fix: ui long text displays and flashlist cards spacing and text

HansGabriel · Dec 17, 2023 · 7bf7fa0 · 7bf7fa0
1 parent dbe4b1f
commit 7bf7fa0
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 35 deletions.
diff --git a/apps/expo/src/components/cards/QuestionCard.tsx b/apps/expo/src/components/cards/QuestionCard.tsx
@@ -76,7 +76,11 @@ const QuestionCard: FC<QuestionCardProps> = ({
             className="absolute left-0 top-0 h-[103px] w-[140px] rounded-l-xl"
           />
         </View>
-        <Text className="font-nunito-bold absolute left-40 top-2 w-full text-lg leading-[28.80px] text-neutral-800">
+        <Text
+          className="font-nunito-bold absolute left-40 top-2 w-[50%] text-lg leading-[28.80px] text-neutral-800"
+          ellipsizeMode="tail"
+          numberOfLines={1}
+        >
           {index + 1} -{" "}
           {match(question.type)
             .with("multiple_choice", () => "Multiple Choice")
@@ -86,7 +90,7 @@ const QuestionCard: FC<QuestionCardProps> = ({
             .exhaustive()}
         </Text>
         <Text
-          className="font-nunito-semibold absolute left-40 top-10 text-base leading-snug tracking-tight text-neutral-700"
+          className="font-nunito-semibold absolute left-40 top-10 w-[50%] text-base leading-snug tracking-tight text-neutral-700"
           numberOfLines={1}
           ellipsizeMode="tail"
         >

diff --git a/apps/expo/src/components/my-library/LibraryTabs.tsx b/apps/expo/src/components/my-library/LibraryTabs.tsx
@@ -77,7 +77,7 @@ export const LibraryTabs: FC<ContentProps> = ({ tabData }) => {
             onPress={() =>
               navigation.navigate("TestDetails", { testId: item.id })
             }
-            className=" my-5 h-28 w-full flex-row overflow-hidden rounded-xl border-2 border-gray-100"
+            className=" mb-5 h-28 w-full flex-row overflow-hidden rounded-xl border-2 border-gray-100"
           >
             <View className=" w-32 items-center justify-center bg-violet-600">
               <Image
@@ -89,7 +89,7 @@ export const LibraryTabs: FC<ContentProps> = ({ tabData }) => {
               />
             </View>
             <View className=" ml-3 w-full justify-around">
-              <View className="w-[55%]">
+              <View className="-mb-4 w-[55%]">
                 <Text
                   className=" font-nunito-bold text-lg"
                   numberOfLines={2}
@@ -99,10 +99,19 @@ export const LibraryTabs: FC<ContentProps> = ({ tabData }) => {
                 </Text>
               </View>
               <View className="flex-row">
-                <Text className=" mr-2">{dayjs(item.createdAt).fromNow()}</Text>
-                <Text className=" mr-2">.</Text>
                 <Text className=" mr-2">
-                  {item.plays ? item.plays.length : 0} plays
+                  {((fromNow) =>
+                    fromNow.charAt(0).toUpperCase() + fromNow.slice(1))(
+                    dayjs(item.createdAt).fromNow(),
+                  )}
+                </Text>
+                <Text className=" mr-2">
+                  • {item.plays ? item.plays.length : 0}{" "}
+                  {item.plays
+                    ? item.plays.length > 1
+                      ? "plays"
+                      : "play"
+                    : "play"}
                 </Text>
               </View>
 

diff --git a/apps/expo/src/components/my-reviewer/ReviewerTab.tsx b/apps/expo/src/components/my-reviewer/ReviewerTab.tsx
@@ -82,7 +82,12 @@ export const ReviewerTabs: FC<ContentProps> = ({ tabData }) => {
                 </Text>
               </View>
               <View className="flex-row">
-                <Text className=" mr-2">{dayjs(item.createdAt).fromNow()}</Text>
+                <Text className=" mr-2">
+                  {((fromNow) =>
+                    fromNow.charAt(0).toUpperCase() + fromNow.slice(1))(
+                    dayjs(item.createdAt).fromNow(),
+                  )}
+                </Text>
               </View>
 
               <View className="w-[55%] flex-row justify-between">

diff --git a/apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx b/apps/expo/src/components/view-all-display/reviewers/ViewAllScreenReviewerCard.tsx
@@ -1,8 +1,8 @@
 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";
+import dayjs from "dayjs";
 
 interface Props {
   imageSource: ImageSourcePropType;
@@ -13,8 +13,6 @@ interface Props {
 }
 
 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">
@@ -40,9 +38,11 @@ const ViewAllScreenReviewerCard: FC<Props> = (props) => {
               numberOfLines={1}
               ellipsizeMode="tail"
             >
-              {timeAgo}
+              {((fromNow) =>
+                fromNow.charAt(0).toUpperCase() + fromNow.slice(1))(
+                dayjs(props.date).fromNow(),
+              )}
             </Text>
-            <Text className="mx-1 text-xs font-medium text-gray-400">•</Text>
           </View>
           <View className="mt-3 flex-row items-center">
             <Image

diff --git a/apps/expo/src/components/view-all-display/tests/ViewAllScreenTestCard.tsx b/apps/expo/src/components/view-all-display/tests/ViewAllScreenTestCard.tsx
@@ -12,6 +12,7 @@ interface Props {
   plays: number;
   userImageSource: ImageSourcePropType;
   userName: string;
+  displayPlays?: boolean;
 }
 
 const ViewAllScreenTestCard: FC<Props> = (props) => {
@@ -54,14 +55,21 @@ const ViewAllScreenTestCard: FC<Props> = (props) => {
             >
               {timeAgo}
             </Text>
-            <Text className="mx-1 text-xs font-medium text-gray-400">•</Text>
-            <Text
-              className="overflow-hidden truncate text-xs font-medium text-gray-400"
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {props.plays} plays
-            </Text>
+            {props.displayPlays && (
+              <>
+                <Text className="mx-1 text-xs font-medium text-gray-400">
+                  •
+                </Text>
+
+                <Text
+                  className="overflow-hidden truncate text-xs font-medium text-gray-400"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
+                  {props.plays} {props.plays <= 1 ? "play" : "plays"}
+                </Text>
+              </>
+            )}
           </View>
           <View className="mt-3 flex-row items-center">
             <Image

diff --git a/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx b/apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx
@@ -54,6 +54,8 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {
         imageUrl: string;
         createdAt: Date;
         updatedAt: Date;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        plays: any;
       }[]
     | undefined = undefined;
   let headerTitle = "";
@@ -64,14 +66,6 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {
     const { data } = trpc.test.getDiscoverTests.useQuery();
     fetchedTestData = data;
     headerTitle = "Discover Tests";
-  } else if (props.testsFor == "trending") {
-    const { data } = trpc.test.getTrendingTests.useQuery();
-    fetchedTestData = data;
-    headerTitle = "Trending";
-  } else if (props.testsFor == "topPicks") {
-    const { data } = trpc.test.getTopPicks.useQuery();
-    fetchedTestData = data;
-    headerTitle = "Top Picks";
   } else if (props.testsFor == "questions") {
     const { type } = props;
     headerTitle = "Questions";
@@ -185,13 +179,14 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {
                         title={item.title}
                         questions={item.questions.length}
                         date={new Date(item.createdAt)}
-                        plays={0}
+                        plays={item.plays.length}
                         userImageSource={{
                           uri:
                             item.user.imageUrl ??
                             "https://example.com/dummy-image.jpg",
                         }}
                         userName={fullName}
+                        displayPlays={true}
                       />
                     </TouchableOpacity>
                   );

diff --git a/apps/expo/src/screens/settings/HistoryTest.tsx b/apps/expo/src/screens/settings/HistoryTest.tsx
@@ -64,11 +64,12 @@ export const HistoryTestScreen = () => {
                 title={testHistory.title}
                 questions={testHistory.questions.length}
                 date={new Date(testHistory.createdAt)}
-                plays={0}
                 userImageSource={{
                   uri: testHistory.creatorImage ?? IMAGE_PLACEHOLDER,
                 }}
                 userName={fullName}
+                plays={0}
+                displayPlays={false}
               />
             </TouchableOpacity>
           );

diff --git a/apps/expo/src/screens/test-history/index.tsx b/apps/expo/src/screens/test-history/index.tsx
@@ -143,7 +143,10 @@ export const TestHistoryScreen: FC<TestHistoryProps> = ({
           numberOfLines={1}
           ellipsizeMode="tail"
         >
-          <Text className="font-nunito-bold w-[382px] text-2xl font-bold leading-[38.40px] text-neutral-800">
+          <Text
+            className="font-nunito-bold w-[382px] text-2xl font-bold leading-[38.40px] text-neutral-800"
+            ellipsizeMode="tail"
+          >
             {testHistory.title}
           </Text>
         </Text>
@@ -202,7 +205,10 @@ export const TestHistoryScreen: FC<TestHistoryProps> = ({
         <Text className="font-nunito-bold mt-3 break-words text-xl font-bold leading-[32px] text-[#212121]">
           Description
         </Text>
-        <Text className="font-nunito text-m mb-6 break-words font-medium leading-[25.20px] tracking-tight text-[#424242]">
+        <Text
+          className="font-nunito text-m mb-6 break-words font-medium leading-[25.20px] tracking-tight text-[#424242]"
+          ellipsizeMode="tail"
+        >
           {testHistory?.description ?? "N/A"}
         </Text>
         <View className="mt-6 flex flex-row items-center justify-between">

diff --git a/packages/api/src/router/test.ts b/packages/api/src/router/test.ts
@@ -634,8 +634,8 @@ export const testRouter = router({
     })
     .input(highlightTestsInput)
     .output(z.any())
-    .query(({ ctx, input }) => {
-      return ctx.prisma.test.findMany({
+    .query(async ({ ctx, input }) => {
+      return await ctx.prisma.test.findMany({
         ...(input && input.amountOfTests
           ? { take: input.amountOfTests }
           : { take: 50 }),
@@ -647,6 +647,11 @@ export const testRouter = router({
           title: true,
           description: true,
           imageUrl: true,
+          plays: {
+            select: {
+              isFinished: true,
+            },
+          },
           keywords: {
             select: {
               id: true,