From 93b92e9f09275af20b5501b06b8abed70f6ff6f8 Mon Sep 17 00:00:00 2001 From: 3LL4N Date: Wed, 6 Dec 2023 15:41:05 +0800 Subject: [PATCH 1/2] updated: replaced all home top sections with discover; added discover reviewers --- .../DiscoverCollectionsHomeSection.tsx} | 9 +- .../DiscoverReviewersHomeCard.tsx | 54 +++++++++++ .../DiscoverReviewersHomeSection.tsx | 83 +++++++++++++++++ .../DiscoverTrekersHomeCard.tsx} | 0 .../DiscoverTrekersHomeSection.tsx} | 4 +- .../src/components/discover-trekers/index.ts | 1 + .../discovers/DiscoverHomeSection.tsx | 2 +- apps/expo/src/components/top-trekers/index.ts | 1 - .../collections/ViewAllCollectionsDisplay.tsx | 5 +- .../reviewers/ViewAllReviewerDisplay.tsx | 92 +++++++++++++++++++ .../reviewers/ViewAllScreenReviewerCard.tsx | 67 ++++++++++++++ .../tests/ViewAllTestDisplay.tsx | 2 +- .../users/ViewAllUserDisplay.tsx | 2 +- apps/expo/src/screens/home.tsx | 12 +-- apps/expo/src/screens/view-all.tsx | 8 ++ apps/expo/src/types.ts | 3 +- packages/api/src/router/collection.ts | 5 +- packages/api/src/router/reviewer.ts | 29 ++++++ packages/api/src/router/user.ts | 3 + packages/schema/src/reviewer.ts | 3 + 20 files changed, 364 insertions(+), 21 deletions(-) rename apps/expo/src/components/{top-collections/TopCollectionsHomeSection.tsx => discover-collections/DiscoverCollectionsHomeSection.tsx} (93%) create mode 100644 apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeCard.tsx create mode 100644 apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx rename apps/expo/src/components/{top-trekers/TopTrekersHomeCard.tsx => discover-trekers/DiscoverTrekersHomeCard.tsx} (100%) rename apps/expo/src/components/{top-trekers/TopTrekersHomeSection.tsx => discover-trekers/DiscoverTrekersHomeSection.tsx} (95%) create mode 100644 apps/expo/src/components/discover-trekers/index.ts delete mode 100644 apps/expo/src/components/top-trekers/index.ts create mode 100644 apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx create mode 100644 apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx diff --git a/apps/expo/src/components/top-collections/TopCollectionsHomeSection.tsx b/apps/expo/src/components/discover-collections/DiscoverCollectionsHomeSection.tsx similarity index 93% rename from apps/expo/src/components/top-collections/TopCollectionsHomeSection.tsx rename to apps/expo/src/components/discover-collections/DiscoverCollectionsHomeSection.tsx index 90d9685b..510fe9c1 100644 --- a/apps/expo/src/components/top-collections/TopCollectionsHomeSection.tsx +++ b/apps/expo/src/components/discover-collections/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 ( { 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 new file mode 100644 index 00000000..0bf1e8f5 --- /dev/null +++ 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) => { + return ( + + + + + + + + + {props.title} + + + + + {props.userName} + + + + + + ); +}; + +export default DiscoverReviewersHomeDisplayCard; diff --git a/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx b/apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx new file mode 100644 index 00000000..824b13fe --- /dev/null +++ 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 ( + + + + + + + + + + + ); + } + + if (!data.length) { + return ( + + + + ); + } + + return ( + + + navigation.navigate("ViewAll", { fetchedData: "discoverReviewers" }) + } + /> + item.id || index.toString()} + renderItem={({ item }) => { + const fullName = `${item.user.firstName} ${item.user.lastName}`; + return ( + + + + ); + }} + /> + + ); +}; + +export default DiscoverReviewersHomeSection; diff --git a/apps/expo/src/components/top-trekers/TopTrekersHomeCard.tsx b/apps/expo/src/components/discover-trekers/DiscoverTrekersHomeCard.tsx similarity index 100% rename from apps/expo/src/components/top-trekers/TopTrekersHomeCard.tsx rename to apps/expo/src/components/discover-trekers/DiscoverTrekersHomeCard.tsx diff --git a/apps/expo/src/components/top-trekers/TopTrekersHomeSection.tsx b/apps/expo/src/components/discover-trekers/DiscoverTrekersHomeSection.tsx similarity index 95% rename from apps/expo/src/components/top-trekers/TopTrekersHomeSection.tsx rename to apps/expo/src/components/discover-trekers/DiscoverTrekersHomeSection.tsx index 33b63b91..1471be7a 100644 --- a/apps/expo/src/components/top-trekers/TopTrekersHomeSection.tsx +++ b/apps/expo/src/components/discover-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 ( { 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 new file mode 100644 index 00000000..bfde05a9 --- /dev/null +++ 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 index b2e22a06..4616a495 100644 --- a/apps/expo/src/components/discovers/DiscoverHomeSection.tsx +++ b/apps/expo/src/components/discovers/DiscoverHomeSection.tsx @@ -45,7 +45,7 @@ const DiscoverHomeSection: FC = () => { return ( 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 deleted file mode 100644 index af7524f4..00000000 --- a/apps/expo/src/components/top-trekers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TopTrekersHomeSection } from "./TopTrekersHomeSection"; diff --git a/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx b/apps/expo/src/components/view-all-display/collections/ViewAllCollectionsDisplay.tsx index 8847da8a..08e3dcf2 100644 --- 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) => { 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) => { 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 new file mode 100644 index 00000000..f0384b92 --- /dev/null +++ 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 ( + <> + + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + { + return ( + + + + + + ); + }} + /> + + ); +}; + +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 new file mode 100644 index 00000000..ad245e05 --- /dev/null +++ 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) => { + const timeAgo = getTimeAgo(new Date(props.date), new Date()); + + return ( + + + + + + + + + {props.title} + + + + {timeAgo} + + • + + + + + {props.userName} + + + + + + ); +}; + +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 index 559612c6..1ee5af8c 100644 --- 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) => { 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 index 89acee6b..6bd97346 100644 --- 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) => { if (props.usersFor == "topUsers") { const { data } = trpc.user.getTop.useQuery(); fetchedData = data; - headerTitle = "Top Trekers"; + headerTitle = "Discover Trekers"; } if (!fetchedData) { diff --git a/apps/expo/src/screens/home.tsx b/apps/expo/src/screens/home.tsx index 9f0d327e..b85eaca2 100644 --- a/apps/expo/src/screens/home.tsx +++ b/apps/expo/src/screens/home.tsx @@ -2,18 +2,17 @@ import React, { useEffect, useState } from "react"; import { ScrollView, RefreshControl, Dimensions } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; import DiscoverHomeSection from "../components/discovers/DiscoverHomeSection"; -import TopTrekersHomeSection from "../components/top-trekers/TopTrekersHomeSection"; +import TopTrekersHomeSection from "../components/discover-trekers/DiscoverTrekersHomeSection"; import MainHeader from "../components/headers/MainHeader"; import PlayTest from "../components/playtest/PlayTest"; import Footer from "../components/Footer"; -import TopCollectionsHomeSection from "../components/top-collections/TopCollectionsHomeSection"; -import TrendingTestsHomeSection from "../components/trending-tests/TrendingTestsHomeSection"; -import TopPicksHomeSection from "../components/top-picks-tests/TopPicksHomeSection"; +import DiscoverCollectionsHomeSection from "../components/discover-collections/DiscoverCollectionsHomeSection"; import { Audio } from "expo-av"; import bgMusic from "../../assets/sounds/comedy.mp3"; import { useMusicStore } from "../stores/useMusicStore"; import { playSound, unloadAudio } from "../services/audioService"; import { trpc } from "../utils/trpc"; +import DiscoverReviewersHomeSection from "../components/discover-reviewers/DiscoverReviewersHomeSection"; export const HomeScreen = () => { const { height, width } = Dimensions.get("window"); @@ -56,9 +55,8 @@ export const HomeScreen = () => { - - - + +