HansGabriel · HansGabriel · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023
diff --git a/...collections/TopCollectionsHomeSection.tsx → ...ctions/DiscoverCollectionsHomeSection.tsx b/...collections/TopCollectionsHomeSection.tsx → ...ctions/DiscoverCollectionsHomeSection.tsx
@@ -8,9 +8,10 @@ import { SkeletonLoader } from "../loaders/SkeletonLoader";
 import HomeEmptyCollection from "../home-empty-section/EmptyCollection";
 
 const TopCollectionsHomeSection: FC = () => {
-  const { data: topCollections } = trpc.collection.getTopCollections.useQuery({
-    amountOfCollections: 5,
-  });
+  const { data: topCollections } =
+    trpc.collection.getDiscoverCollections.useQuery({
+      amountOfCollections: 5,
+    });
 
   const navigation = useNavigation();
 
@@ -44,7 +45,7 @@ const TopCollectionsHomeSection: FC = () => {
   return (
     <View>
       <SectionHeader
-        title="Top Collections"
+        title="Discover Collections"
         hasViewAll={true}
         onViewAllPress={() => {
           navigation.navigate("ViewAll", { fetchedData: "topCollections" });

diff --git a/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeCard.tsx b/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeCard.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Image, Text, View, ImageSourcePropType } from "react-native";
+
+import type { FC } from "react";
+
+interface Props {
+  imageSource: ImageSourcePropType;
+  title: string;
+  date: Date;
+  userImageSource: ImageSourcePropType;
+  userName: string;
+}
+
+const DiscoverReviewersHomeDisplayCard: FC<Props> = (props) => {
+  return (
+    <View className="h-59 mx-1 w-48 flex-shrink-0 items-center bg-white p-2">
+      <View className="flex-1 flex-shrink-0 overflow-hidden rounded-2xl border-b-2 border-gray-300 bg-white">
+        <View className="relative h-28">
+          <View className="absolute inset-0 bg-gray-400" />
+          <Image
+            className="absolute inset-0 h-28 w-full object-cover"
+            source={props.imageSource}
+            testID="main-image"
+          />
+        </View>
+        <View className="flex-shrink-0 overflow-hidden p-3">
+          <Text
+            className="text-md mb-3 h-5 overflow-hidden truncate font-bold leading-5 text-black"
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {props.title}
+          </Text>
+          <View className="mt-1 flex-row items-center">
+            <Image
+              className="h-4 w-4 flex-shrink-0 rounded-full"
+              source={props.userImageSource}
+              testID="user-image"
+            />
+            <Text
+              className="ml-1.5 w-32 flex-shrink-0 truncate text-xs font-medium text-gray-600"
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.userName}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DiscoverReviewersHomeDisplayCard;
diff --git a/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx b/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx
@@ -0,0 +1,83 @@
+import * as React from "react";
+import { View, TouchableOpacity, FlatList, SafeAreaView } from "react-native";
+import SectionHeader from "../headers/SectionHeader";
+import { trpc } from "../../utils/trpc";
+import type { FC } from "react";
+import { useNavigation } from "@react-navigation/native";
+import { SkeletonLoader } from "../loaders/SkeletonLoader";
+import HomeEmptyTest from "../home-empty-section/EmptyTest";
+import DiscoverReviewersHomeDisplayCard from "./DiscoverReviewersHomeCard";
+
+const DiscoverReviewersHomeSection: FC = () => {
+  const { data } = trpc.reviewer.getDiscoverReviewers.useQuery({
+    amountOfReviewers: 5,
+  });
+
+  const navigation = useNavigation();
+
+  const goToReviewerDetailsScreen = (reviewerId: string) => () => {
+    navigation.navigate("ReviewerDetails", {
+      reviewerId,
+    });
+  };
+
+  if (!data) {
+    return (
+      <SafeAreaView className="flex-1">
+        <View className="h-[90%] w-[90%] items-center space-y-10 self-center py-4">
+          <View className="h-[25%] w-[100%] items-center justify-evenly">
+            <SkeletonLoader isCircular={true} width={"100%"} height={25} />
+          </View>
+          <View className="h-[1%] w-[100%] items-center justify-evenly">
+            <SkeletonLoader isCircular={true} width={"100%"} height={50} />
+          </View>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  if (!data.length) {
+    return (
+      <SafeAreaView className="flex-1">
+        <HomeEmptyTest />
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <View>
+      <SectionHeader
+        title={"Discover Reviewers"}
+        hasViewAll={true}
+        onViewAllPress={() =>
+          navigation.navigate("ViewAll", { fetchedData: "discoverReviewers" })
+        }
+      />
+      <FlatList
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+        data={data}
+        keyExtractor={(item, index) => item.id || index.toString()}
+        renderItem={({ item }) => {
+          const fullName = `${item.user.firstName} ${item.user.lastName}`;
+          return (
+            <TouchableOpacity onPress={goToReviewerDetailsScreen(item.id)}>
+              <DiscoverReviewersHomeDisplayCard
+                imageSource={{ uri: item.imageUrl }}
+                title={item.title}
+                date={new Date(item.createdAt)}
+                userImageSource={{
+                  uri:
+                    item.user.imageUrl ?? "https://example.com/dummy-image.jpg",
+                }}
+                userName={fullName}
+              />
+            </TouchableOpacity>
+          );
+        }}
+      />
+    </View>
+  );
+};
+
+export default DiscoverReviewersHomeSection;
diff --git a/...onents/top-trekers/TopTrekersHomeCard.tsx → ...cover-trekers/DiscoverTrekersHomeCard.tsx b/...onents/top-trekers/TopTrekersHomeCard.tsx → ...cover-trekers/DiscoverTrekersHomeCard.tsx
diff --git a/...nts/top-trekers/TopTrekersHomeSection.tsx → ...er-trekers/DiscoverTrekersHomeSection.tsx b/...nts/top-trekers/TopTrekersHomeSection.tsx → ...er-trekers/DiscoverTrekersHomeSection.tsx
@@ -1,5 +1,5 @@
 import { View, FlatList, TouchableOpacity, SafeAreaView } from "react-native";
-import TopTrekersHomeCard from "./TopTrekersHomeCard";
+import TopTrekersHomeCard from "./DiscoverTrekersHomeCard";
 import SectionHeader from "../headers/SectionHeader";
 
 import { IMAGE_PLACEHOLDER } from "../../constants";
@@ -40,7 +40,7 @@ const TopTrekersHomeSection: FC = () => {
   return (
     <View>
       <SectionHeader
-        title="Top Trekers"
+        title="Discover Trekers"
         hasViewAll={true}
         onViewAllPress={() => {
           navigation.navigate("ViewAll", { fetchedData: "topTrekers" });

diff --git a/apps/expo/src/components/discover-trekers/index.ts b/apps/expo/src/components/discover-trekers/index.ts
@@ -0,0 +1 @@
+export { default as TopTrekersHomeSection } from "./DiscoverTrekersHomeSection";
diff --git a/apps/expo/src/components/discovers/DiscoverHomeSection.tsx b/apps/expo/src/components/discovers/DiscoverHomeSection.tsx
@@ -45,7 +45,7 @@ const DiscoverHomeSection: FC = () => {
   return (
     <View>
       <SectionHeader
-        title={"Discover"}
+        title={"Discover Tests"}
         hasViewAll={true}
         onViewAllPress={() =>
           navigation.navigate("ViewAll", { fetchedData: "discoverTests" })

diff --git a/apps/expo/src/components/top-trekers/index.ts b/apps/expo/src/components/top-trekers/index.ts
diff --git a/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx b/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx
@@ -16,7 +16,8 @@ export const ViewAllCollectionsDisplay: FC<Props> = (props) => {
   const { height, width } = Dimensions.get("window");
   const navigation = useNavigation();
 
-  const { data: topCollections } = trpc.collection.getTopCollections.useQuery();
+  const { data: topCollections } =
+    trpc.collection.getDiscoverCollections.useQuery();
 
   const goToCollectionDetailsScreen = (collectionId: string) => () => {
     navigation.navigate("CollectionDetails", { collectionId });
@@ -26,7 +27,7 @@ export const ViewAllCollectionsDisplay: FC<Props> = (props) => {
     let format = "";
 
     if (title === "topCollections") {
-      format = "Top Collections";
+      format = "Discover Collections";
     }
 
     return format;

diff --git a/apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx b/apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx
@@ -0,0 +1,92 @@
+import React, { FC } from "react";
+import { TouchableOpacity, View, Dimensions } from "react-native";
+import ViewAllScreenHeader from "../../headers/ViewAllScreenHeader";
+import { FlashList } from "@shopify/flash-list";
+import { trpc } from "../../../utils/trpc";
+import { useNavigation } from "@react-navigation/native";
+import { SkeletonLoader } from "../../loaders/SkeletonLoader";
+import { SafeAreaView } from "react-native-safe-area-context";
+import ViewAllScreenReviewerCard from "./ViewAllScreenReviewerCard";
+
+export const ViewAllReviewersDisplay: FC = () => {
+  const { height, width } = Dimensions.get("window");
+  const navigation = useNavigation();
+
+  const { data: discoverReviewers } =
+    trpc.reviewer.getDiscoverReviewers.useQuery();
+
+  const goToCollectionDetailsScreen = (reviewerId: string) => () => {
+    navigation.navigate("ReviewerDetails", {
+      reviewerId,
+    });
+  };
+
+  if (!discoverReviewers) {
+    return (
+      <>
+        <SafeAreaView
+          className="flex-1"
+          style={{
+            height: height,
+            width: width,
+          }}
+        >
+          <ViewAllScreenHeader title={"Discover Reviewers"} />
+          <View className="my-5 h-[50%] w-[90%] flex-col justify-between self-center">
+            <View className="mt-7">
+              <SkeletonLoader isCircular={true} width={"100%"} height={100} />
+            </View>
+            <View className="mt-7">
+              <SkeletonLoader isCircular={true} width={"100%"} height={100} />
+            </View>
+            <View className="mt-7">
+              <SkeletonLoader isCircular={true} width={"100%"} height={100} />
+            </View>
+            <View className="mt-7">
+              <SkeletonLoader isCircular={true} width={"100%"} height={100} />
+            </View>
+          </View>
+        </SafeAreaView>
+      </>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      className="flex-1 flex-col"
+      style={{
+        height: height,
+        width: width,
+      }}
+    >
+      <ViewAllScreenHeader title={"Discover Reviewers"} />
+      <FlashList
+        showsVerticalScrollIndicator={false}
+        data={discoverReviewers}
+        estimatedItemSize={200}
+        renderItem={({ item, index }) => {
+          return (
+            <SafeAreaView className="flex-1">
+              <TouchableOpacity onPress={goToCollectionDetailsScreen(item.id)}>
+                <ViewAllScreenReviewerCard
+                  key={index}
+                  imageSource={{ uri: item.imageUrl }}
+                  date={item.createdAt}
+                  userImageSource={{
+                    uri:
+                      item.user.imageUrl ??
+                      "https://example.com/dummy-image.jpg",
+                  }}
+                  title={item.title}
+                  userName={`${item.user.firstName} ${item.user.lastName}`}
+                />
+              </TouchableOpacity>
+            </SafeAreaView>
+          );
+        }}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default ViewAllReviewersDisplay;
diff --git a/apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx b/apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Image, Text, View } from "react-native";
+import type { ImageSourcePropType } from "react-native";
+import { getTimeAgo } from "../../../functions/timeAgo";
+import { FC } from "react";
+
+interface Props {
+  imageSource: ImageSourcePropType;
+  title: string;
+  date: Date;
+  userImageSource: ImageSourcePropType;
+  userName: string;
+}
+
+const ViewAllScreenReviewerCard: FC<Props> = (props) => {
+  const timeAgo = getTimeAgo(new Date(props.date), new Date());
+
+  return (
+    <View className="w-90 mx-3 h-28 flex-row items-center">
+      <View className="h-28 flex-1 flex-row items-center overflow-hidden rounded-lg bg-white">
+        <View className="relative h-28 w-36">
+          <View className="absolute inset-0 bg-gray-400" />
+          <Image
+            className="absolute inset-0 h-28 w-36"
+            source={props.imageSource}
+            testID="mainImage"
+          />
+        </View>
+        <View className="flex-1 flex-col justify-center overflow-hidden border-b border-r border-t border-gray-200 px-4 py-3">
+          <Text
+            className="flex-1 overflow-hidden truncate text-lg font-bold leading-7 text-black"
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {props.title}
+          </Text>
+          <View className="flex-row items-center overflow-hidden">
+            <Text
+              className="overflow-hidden truncate text-xs font-medium text-gray-400"
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {timeAgo}
+            </Text>
+            <Text className="mx-1 text-xs font-medium text-gray-400">•</Text>
+          </View>
+          <View className="mt-3 flex-row items-center">
+            <Image
+              className="h-5 w-5 rounded-full"
+              source={props.userImageSource}
+              testID="userimage"
+            />
+            <Text
+              className="ml-1.5 overflow-hidden truncate text-xs font-semibold text-gray-600"
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
+              {props.userName}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default ViewAllScreenReviewerCard;
diff --git a/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx b/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx
@@ -64,7 +64,7 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {
   if (props.testsFor == "discover") {
     const { data } = trpc.test.getDiscoverTests.useQuery();
     fetchedTestData = data;
-    headerTitle = "Discover";
+    headerTitle = "Discover Tests";
   } else if (props.testsFor == "trending") {
     const { data } = trpc.test.getTrendingTests.useQuery();
     fetchedTestData = data;

diff --git a/apps/expo/src/components/view-all-display/users/ViewAllUserDisplay.tsx b/apps/expo/src/components/view-all-display/users/ViewAllUserDisplay.tsx
@@ -20,7 +20,7 @@ export const ViewAllUserDisplay: FC<Props> = (props) => {
   if (props.usersFor == "topUsers") {
     const { data } = trpc.user.getTop.useQuery();
     fetchedData = data;
-    headerTitle = "Top Trekers";
+    headerTitle = "Discover Trekers";
   }
 
   if (!fetchedData) {