1

I use the following code to fetch the data for my app.


    export const DataContext = () => {
      const [posts, setPosts] = useState<Array<Post>>([]);
      const [profiles, setProfiles] = useState<Array<User>>([]);
      const [page, setPage] = useState<number>(1);
      const [perPage, setPerPage] = useState<number>(10);
    
      useEffect(() => {
        async function fetchData() {
          const { data: postsData } = await supabase
            .from("posts")
            .select("*")
            .range((page - 1) * perPage, page * perPage - 1);
    
          setPosts(postsData!.map((post) => new Post(post)));
    
          const postUids = postsData!.map((post) => post.uid);
    
          const { data: profilesData } = await supabase
            .from("profiles")
            .select("*")
            .in("uid", postUids);
    
          const profiles = profilesData!.map((userData: any) => {
            const userPosts = posts.filter((post) => post.uid === userData.uid);
            const user = new User({ ...userData, posts: userPosts });
            return user;
          });
    
          setProfiles((prevUsers) => [...prevUsers, ...profiles]);
        }
    
        fetchData();
      }, [page, perPage]);
    
      const nextPage = () => {
        setPage(page + 1);
      };
    
      const prevPage = () => {
        setPage(page - 1);
      };
    
      return React.createContext({ posts, profiles, nextPage, prevPage });
    };

Then, in a TabBarView I use that context to share the data between two screens.


      const { posts, profiles } = useContext(DataContext());
    
      const Home = (props: any) => (
        <View style={Theme().screen}>
          <HomeScreen posts={posts} users={users} />
        </View>
      );
    
      const Discover = (props: any) => (
        <View style={Theme().screen}>
          <ExploreScreen posts={posts} users={profiles} />
        </View>
      );

My first issue was that the posts array in each user was always empty in the context. I fixed this temporarily by repeating the logic to add those posts in the TabBarView.


      const { posts, profiles } = useContext(DataContext());
    
      const users: Array<User> = profiles.map((user) => {                ///Added
        const userPosts = posts.filter((post) => post.uid === user.uid); ///Added
        user.posts.push(...userPosts);                                   ///Added
        return user;                                                     ///Added
      });                                                                ///Added
    
      const Home = (props: any) => (
        <View style={Theme().screen}>
          <HomeScreen posts={posts} users={users} />
        </View>
      );
    
      const Discover = (props: any) => (
        <View style={Theme().screen}>
          <ExploreScreen posts={posts} users={profiles} />
        </View>
      );

Even though that data is now logging what I would expect, the data going to HomeScreen and DiscoverScreen through props is different. The posts is fine but users is just logging as [] which means the users are not added there. Why is this happening and how can I fix this?

Example data from DataContext:


    Posts: [{
       "caption":"Caption",
       "date":"1669244422569",
       "imageUrls":[
          "https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__480.jpg"
       ],
       "location":{
          "latitude":150,
          "locationInfo":"City, State",
          "longitude":-150
       },
       "postId":"1669244407166",
       "uid":"daf6b8be-7cd0-4341-89d7-07879b207087"
    }]
    
    Users: [{
       "blockedUsers":[],
       "displayName":"name",
    "photoURL":"https://cdn.pixabay.com/photo/2020/05/04/16/05/mckenzie-river-5129717__480.jpg",
       "uid":"daf6b8be-7cd0-4341-89d7-07879b207087",
       "verified":false
    }]

Example log from TabBarView:


    Posts: [Post, Post, Post]
    
    Users: [User, User, User]

What would log in HomeScreen:


    Posts: [Post, Post, Post]
    
    Users: []

Globe
  • 169
  • 11

0 Answers0