-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updated: home screen display changes (#228)
* updated: replaced all home top sections with discover; added discover reviewers * fix: failing test for collections router
- Loading branch information
Showing
21 changed files
with
369 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
83 changes: 83 additions & 0 deletions
83
apps/expo/src/components/discover-reviewers/DiscoverReviewersHomeSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as TopTrekersHomeSection } from "./DiscoverTrekersHomeSection"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
apps/expo/src/components/view-all-display/reviewers/ViewAllReviewerDisplay.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
67 changes: 67 additions & 0 deletions
67
apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.