Platform wide reviews (#39)

src/components/MyLatestReviews.tsx

@@ -0,0 +1,96 @@
+import { ActivityIndicator, FlatList, View } from "react-native";
+import { useUser } from "../hooks";
+import { useUserReviews } from "../hooks/useUserReviews";
+import { Card } from "./Card";
+import { StyledText } from "./StyledText";
+import { useScreenInfo } from "../hooks/useScreenInfo";
+import { SmallReviewCard } from "./SmallReviewCard";
+import { useEffect, useMemo } from "react";
+import { usePlatformWideReviews } from "../hooks/usePlatformWideReviews";
+
+export const MyLatestReviews = ({
+  allowPlatformWideReviews = true,
+}: {
+  allowPlatformWideReviews?: boolean;
+}) => {
+  const me = useUser()!;
+  const userReviews = useUserReviews(me.id);
+  const platformWideReviews = usePlatformWideReviews();
+  const { isPhone } = useScreenInfo();
+
+  useEffect(() => {
+    if (
+      userReviews.isFetched &&
+      userReviews.data &&
+      userReviews.data.length == 0 &&
+      !platformWideReviews.isFetched
+    ) {
+      platformWideReviews.refetch();
+    }
+  }, [userReviews.data, userReviews.isFetched, platformWideReviews.isFetched]);
+
+  const displayLoading = useMemo(() => {
+    if (!userReviews.isFetched) {
+      return true;
+    }
+    if (
+      userReviews.data &&
+      userReviews.data.length === 0 &&
+      allowPlatformWideReviews &&
+      !platformWideReviews.isFetched
+    ) {
+      return true;
+    }
+
+    return false;
+  }, [
+    userReviews.data,
+    userReviews.isFetched,
+    allowPlatformWideReviews,
+    platformWideReviews.isFetched,
+  ]);
+
+  const body = useMemo(() => {
+    if (displayLoading) {
+      return <ActivityIndicator size="large" className="self-center" />;
+    }
+
+    let reviews = userReviews.data!;
+
+    if (!reviews.length && allowPlatformWideReviews) {
+      reviews = platformWideReviews.data!;
+    }
+
+    if (!reviews.length) {
+      return <StyledText className="mt-5">No reviews to display.</StyledText>;
+    }
+
+    return (
+      <FlatList
+        data={reviews}
+        // list dosen't scroll on web when overflow is visible
+        style={isPhone ? { overflow: "visible" } : {}}
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        contentContainerClassName="pb-4"
+        renderItem={({ item }) => (
+          <SmallReviewCard className="w-80 mr-4 min-w-48" review={item} />
+        )}
+      />
+    );
+  }, [displayLoading, userReviews.data]);
+
+  return (
+    <Card
+      bodyComponent={<View>{body}</View>}
+      hideHeaderDivider
+      headerComponent={
+        <StyledText xl2 weight={500}>
+          {userReviews.isLoading || platformWideReviews.data?.length
+            ? "Latest reviews"
+            : "My latest reviews"}
+        </StyledText>
+      }
+    />
+  );
+};

src/hooks/usePlatformWideReviews.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { User } from "../types";
+import { getPlatformWideReviews } from "../utils/api";
+
+export function usePlatformWideReviews() {
+  return useQuery({
+    queryKey: ["latest-reviews"],
+    queryFn: () => getPlatformWideReviews(),
+    enabled: false,
+  });
+}

src/screens/HomeScreen/HomeScreen.tsx

@@ -1,31 +1,21 @@
 import { View, ScrollView } from "react-native";
 import React from "react";
 import { DrawerHeader } from "../../components/headers/DrawerHeader";
-import { Card, MyReviewsCard, StyledText } from "../../components";
+import { MyReviewsCard } from "../../components";
 import { ConnectionReviewCard } from "../../components/ConnectionsReviewCard";
 import { SocialMediaCard } from "../../icons/SocialMediaCard";
 import { useUser } from "../../hooks";
-import { ReviewsList } from "../../components/ReviewsList";
+import { MyLatestReviews } from "../../components/MyLatestReviews";
 
 const HomeScreen = ({}: {}) => {
-  const user = useUser()!;
-
   return (
     <ScrollView>
       <View className="p-4 md:p-9">
         <DrawerHeader title="Welcome to Culero!" />
 
         <View className="flex">
           <View className="w-full">
-            <Card
-              bodyComponent={<ReviewsList userId={user.id} />}
-              hideHeaderDivider
-              headerComponent={
-                <StyledText xl2 weight={600}>
-                  My latest reviews
-                </StyledText>
-              }
-            />
+            <MyLatestReviews />
           </View>
           <View className="md:flex-row flex-1">
             <View className="md:w-2/5 md:pr-8">

src/screens/MyProfileScreen/MyProfileScreen.tsx

@@ -1,17 +1,10 @@
-import { View, FlatList, ScrollView, ActivityIndicator } from "react-native";
+import { View, ScrollView } from "react-native";
 import React from "react";
 import { DrawerHeader } from "../../components/headers/DrawerHeader";
-import {
-  Card,
-  HorizontalDivider,
-  MyReviewsCard,
-  ProfileCard,
-  StyledText,
-} from "../../components";
+import { HorizontalDivider, ProfileCard } from "../../components";
 
-import { ReviewsList } from "../../components/ReviewsList";
 import { useUser } from "../../hooks";
-import { useUserRatings } from "../../hooks/useUserRatings";
+import { MyLatestReviews } from "../../components/MyLatestReviews";
 
 export const MyProfileScreen = ({}: {}) => {
   const me = useUser()!;
@@ -26,15 +19,7 @@ export const MyProfileScreen = ({}: {}) => {
 
           <HorizontalDivider className="bg-light-primary my-6" />
 
-          <Card
-            bodyComponent={<ReviewsList userId={me!.id} />}
-            hideHeaderDivider
-            headerComponent={
-              <StyledText xl2 weight={500}>
-                My latest reviews
-              </StyledText>
-            }
-          />
+          <MyLatestReviews allowPlatformWideReviews={false} />
         </View>
       </View>
     </ScrollView>