Merge pull request #29 from chimobi-justice/fix-followed-authored-art…

…icles Fix: error on getting followed articles by authors
chimobi-justice · Oct 11, 2024 · ff3fbfa · ff3fbfa
2 parents 531be6a + 1c518d4
commit ff3fbfa
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 98 deletions.
diff --git a/src/components/CodeBlockContent/index.tsx b/src/components/CodeBlockContent/index.tsx
@@ -42,6 +42,17 @@ const ContentBlockContent: FunctionComponent<ContentBlockContentProps> = ({ cont
         'a': {
           color: 'blue',
           textDecoration: 'underline'
+        },
+        'img': {
+          display: 'block',
+          width: '50%',
+          maxWidth: '100%',
+          height: '350px',
+          mt: '25px',
+          borderRadius: '8px',
+          '@media (max-width: 600px)': {
+            width: '100%', 
+          }
         }
       }}
     />

diff --git a/src/components/FollowCard/index.tsx b/src/components/FollowCard/index.tsx
@@ -26,7 +26,7 @@ const FollowCard: FunctionComponent = () => {
   const { createFollowUserMutation } = useCreateFollowUser()
   const { createOnFollowUserMutation } = useCreateOnFollowUser();
 
-  const handleFollowUnfollow = (userId: string, following: boolean) =>  {
+  const handleFollowUnfollow = (userId: string, following: boolean) => {
     if (following) {
       createOnFollowUserMutation.mutate(userId)
     } else {
@@ -36,72 +36,84 @@ const FollowCard: FunctionComponent = () => {
 
   return (
     <Card>
-      <CardHeader pb={"4px"}>
-        <Heading size={"sm"}>People to follow</Heading>
-      </CardHeader>
+      {isLoading && (
+        <Box
+          textAlign={"center"}
+          height={"200px"}
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Spinner size={"xl"} thickness={"4px"} color={colors.primary} />
+        </Box>
+      )}
 
-      <CardBody>
-        {isLoading && (
-          <Box textAlign={"center"}>
-            <Spinner size={"xl"} thickness={"4px"} color={colors.primary} />
-          </Box>
-        )}
-        {people && people?.map((person: any, index: number) => (
-          <Flex key={index} mb={"8px"}>
-            <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
-              <Link to={`/user/${person?.username}`}>
-                <Avatar size={"sm"} name={person?.fullname} src={person?.avatar} />
-              </Link>
+      {people && (
+        <>
+          <CardHeader pb={"4px"}>
+            <Heading size={"sm"}>People to follow</Heading>
+          </CardHeader>
 
-              <Box>
-                <Link to={`/user/${person?.username}`}>
-                  <Heading size="xs">{person?.fullname}</Heading>
-                </Link>
-                <Text fontSize={"13px"} color={"#0009"}>{truncate(person?.bio, 25)}</Text>
-              </Box>
-            </Flex>
+          <CardBody>
+            {people?.map((person: any, index: number) => (
+              <Flex key={index} mb={"8px"}>
+                <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
+                  <Link to={`/user/${person?.username}`}>
+                    <Avatar size={"sm"} name={person?.fullname} src={person?.avatar} />
+                  </Link>
 
-            {user && (
-              <Button
-                size="sm"
-                rounded="lg"
-                type="button"
-                variant={person?.is_following ? "solid" : "outline"}
-                onClick={() => handleFollowUnfollow(person?.id, person?.is_following)}
-              >
-                {person?.is_following ? "following" : "follow"}
-              </Button>
-            )}
+                  <Box>
+                    <Link to={`/user/${person?.username}`}>
+                      <Heading size="xs">{person?.fullname}</Heading>
+                    </Link>
+                    <Text fontSize={"13px"} color={"#0009"}>{truncate(person?.bio, 25)}</Text>
+                  </Box>
+                </Flex>
+
+                {user && (
+                  <Button
+                    size="sm"
+                    rounded="lg"
+                    type="button"
+                    variant={person?.is_following ? "solid" : "outline"}
+                    onClick={() => handleFollowUnfollow(person?.id, person?.is_following)}
+                  >
+                    {person?.is_following ? "following" : "follow"}
+                  </Button>
+                )}
 
-            {!user && (
-              <Link to={"/auth/login"}>
-                <Button
-                  size="sm"
-                  rounded="lg"
-                  type="button"
-                  variant="outline"
-                >
-                  follow
-                </Button>
-              </Link>
-            )}
-          </Flex>
-        ))}
+                {!user && (
+                  <Link to={"/auth/login"}>
+                    <Button
+                      size="sm"
+                      rounded="lg"
+                      type="button"
+                      variant="outline"
+                    >
+                      follow
+                    </Button>
+                  </Link>
+                )}
+              </Flex>
+            ))}
 
-        <Link to="/follow/people/suggestions">
-          <Text
-            fontSize={"13px"}
-            color={colors.primary}
-            mt={"20px"}
-            _hover={{
-              color: "#101828",
-              textDecoration: "underline"
-            }}
-          >
-            See more suggestions
-          </Text>
-        </Link>
-      </CardBody>
+            <Link to="/follow/people/suggestions">
+              <Text
+                fontSize={"13px"}
+                color={colors.primary}
+                mt={"20px"}
+                _hover={{
+                  color: "#101828",
+                  textDecoration: "underline"
+                }}
+              >
+                See more suggestions
+              </Text>
+            </Link>
+          </CardBody>
+        </>
+      )}
     </Card>
   )
 }

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -138,7 +138,7 @@ const Footer: FunctionComponent = () => {
         </SimpleGrid>
 
         <Box mt={"20px"} pt={"20px"} borderTop={"1px solid gray"}>
-          <Text fontSize={"13px"}>&copy; 2024 Learn Hub. All right reserved. Made in Nigeria.</Text>
+          <Text fontSize={"13px"}>&copy; 2024 Learn Hub. All right reserved. Made in 🇳🇬.</Text>
         </Box>
       </Box>
     </Box>

diff --git a/src/pages/Articles/components/ArticleActionButtons.tsx b/src/pages/Articles/components/ArticleActionButtons.tsx
@@ -19,7 +19,7 @@ const ArticleActionButtons: FunctionComponent<ArticleActionButtonsProps> = ({
     <>
       <Stack
         spacing={5}
-        direction={{ base: "row", md: "column" }}
+        direction={{ base: "row", lg: "column" }}
         justifyContent={"center"}
       >
         <Text

diff --git a/src/pages/Articles/components/ArticleForm.tsx b/src/pages/Articles/components/ArticleForm.tsx
@@ -40,6 +40,8 @@ const ArticleForm: FunctionComponent<IArticleFormProps> = ({
   const { handleFileUpload, loading: imageUploadLoading } = useImageUpload({
     onSuccess: (data) => {
       setThumbnail(data?.data?.imageUploadUrl)
+      console.log(data?.data?.imageUploadUrl);
+
     },
   });
 
@@ -65,6 +67,7 @@ const ArticleForm: FunctionComponent<IArticleFormProps> = ({
 
     setContent('')
     setTitle('')
+    setThumbnail('')
   };
 
   useEffect(() => {

diff --git a/src/pages/Articles/index.tsx b/src/pages/Articles/index.tsx
@@ -127,11 +127,11 @@ const Articles: FunctionComponent = () => {
           display={"flex"}
           alignItems={"flex-start"}
           justifyContent={"space-between"}
-          flexDir={{ base: "column", md: "row" }}
+          flexDir={{ base: "column", lg: "row" }}
           gap={5}
           my={"3rem"}
         >
-          <Box width={{ base: "100%", md: "70%" }}>
+          <Box width={{ base: "100%", lg: "70%" }}>
             {isLoading && <Skeleton />}
 
             {articles && isSuccess && articles?.map((page: any, pageIndex: number) => (
@@ -181,7 +181,7 @@ const Articles: FunctionComponent = () => {
             )}
           </Box>
 
-          <Box width={{ base: "100%", md: "30%" }}>
+          <Box width={{ base: "100%", lg: "30%" }}>
             {/* <Box>
             <RecommendTopicCard />
           </Box> */}

diff --git a/src/pages/Articles/show/index.tsx b/src/pages/Articles/show/index.tsx
@@ -54,11 +54,11 @@ const ShowArticle: FunctionComponent = () => {
 
             <Box
               width={"100%"}
-              maxWidth={{ base: "90%", md: "80%", lg: "70%" }}
+              maxWidth={{ base: "90%", md: "90%", lg: "70%" }}
               m={"2em auto"}
               py={"30px"}
               display={"flex"}
-              flexDir={{ base: "column-reverse", md: "row" }}
+              flexDir={{ base: "column-reverse", lg: "row" }}
               gap={"10"}
             >
               <Box width={{ base: "100%", md: "20%" }} textAlign={"center"}>
@@ -70,7 +70,7 @@ const ShowArticle: FunctionComponent = () => {
                 />
               </Box>
 
-              <Box width={{ base: "100%", md: "80%" }}>
+              <Box width={{ base: "100%", md: "100%", lg: "80%" }}>
                 <Box mb={"25px"}>
                   <Image
                     src={data?.data?.thumbnail}

diff --git a/src/pages/Home/Authenticated/Following/index.tsx b/src/pages/Home/Authenticated/Following/index.tsx
@@ -37,7 +37,7 @@ const Following: FunctionComponent<FollowingProps> = ({ setTabIndex }) => {
     }
   }
 
-  const handleFollowUnfollow = (userId: string, following: boolean) =>  {
+  const handleFollowUnfollow = (userId: string, following: boolean) => {
     if (following) {
       createOnFollowUserMutation.mutate(userId)
     } else {
@@ -66,9 +66,9 @@ const Following: FunctionComponent<FollowingProps> = ({ setTabIndex }) => {
               authorUsername={article?.author?.username}
               isLoggedIn={!!user}
               is_saved={article?.is_saved}
-              is_following={article?.author?.is_following}
-            followUser={() => handleFollowUnfollow(article?.author?.id, article?.author?.is_following)}
-            saveUnsavedArticle={() => handleSaveUnsavedArticle(article?.id, article?.is_saved)}
+              is_following={article?.is_following}
+              followUser={() => handleFollowUnfollow(article?.author?.id, article?.is_following)}
+              saveUnsavedArticle={() => handleSaveUnsavedArticle(article?.id, article?.is_saved)}
             />
           ))}
 

diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx
@@ -13,11 +13,7 @@ import { colors } from '../../colors'
 
 const Search: FunctionComponent = () => {
   const [searchQuery, setSearchQuery] = useState<string>('')
-  const [searchArr, setSearchArr] = useState<any>({
-    users: [],
-    articles: [],
-    threads: []
-  });
+  const [searchArr, setSearchArr] = useState<any>({ users: [], articles: [], threads: [] });
   const [value] = useDebounce(searchQuery, 1000);
 
   const {
@@ -49,11 +45,7 @@ const Search: FunctionComponent = () => {
     setSearchQuery(value);
     if (value?.length === 0) {
       // Clear the search results if input is cleared
-      setSearchArr({
-        users: [],
-        articles: [],
-        threads: []
-      });
+      setSearchArr({ users: [], articles: [], threads: [] });
     }
   }
 
@@ -67,11 +59,7 @@ const Search: FunctionComponent = () => {
       });
     } else {
       // Clear the search results when the search term is empty
-      setSearchArr({
-        users: [],
-        articles: [],
-        threads: [],
-      });
+      setSearchArr({ users: [], articles: [], threads: [] });
     }
   }, [usersData, articlesData, threadsData, value]);
 
@@ -96,7 +84,8 @@ const Search: FunctionComponent = () => {
           </InputGroup>
 
           <Box mt={"10px"}>
-            {searchQuery?.length === 0 && (
+            {searchQuery?.length === 0 ? (
+              // Show "Waiting for search" when input is empty
               <Box
                 mt="20px"
                 textAlign="center"
@@ -105,16 +94,56 @@ const Search: FunctionComponent = () => {
                 justifyContent="center"
                 alignItems="center"
                 height="100%"
-                py="20px">
+                py="20px"
+              >
                 <Text pb={"10px"}>Waiting for search.</Text>
-
                 <Image
                   src={SearchImg}
                   width={"200px"}
                   height={"200px"}
                   bg={"#fafafa"}
                 />
               </Box>
+            ) : (
+              // Show loading spinner or search results
+              <>
+                {(isLoadingUser || isLoadingArticles || isLoadingThreads) ? (
+                  <Box
+                    textAlign={"center"}
+                    display="flex"
+                    flexDirection="column"
+                    justifyContent="center"
+                    alignItems="center"
+                    height={"300px"}
+                  >
+                    <Spinner size={"xl"} thickness='4px' color={colors.primary} />
+                  </Box>
+                ) : (
+                  // Show "Nothing found" when no results are found
+                  searchArr?.users?.length === 0 &&
+                  searchArr?.articles?.length === 0 &&
+                  searchArr?.threads?.length === 0 && (
+                    <Box
+                      mt="20px"
+                      textAlign="center"
+                      display="flex"
+                      flexDirection="column"
+                      justifyContent="center"
+                      alignItems="center"
+                      height="100%"
+                      py="20px">
+                      <Text pb={"10px"}>Nothing found with that search.</Text>
+
+                      <Image
+                        src={SearchImg}
+                        width={"200px"}
+                        height={"200px"}
+                        bg={"#fafafa"}
+                      />
+                    </Box>
+                  )
+                )}
+              </>
             )}
 
             {isLoadingUser && isLoadingArticles && isLoadingThreads && (

diff --git a/src/pages/Threads/index.tsx b/src/pages/Threads/index.tsx
@@ -123,9 +123,9 @@ const Threads: FunctionComponent = () => {
           </Box>
 
           <Box width={{ base: "100%", md: "30%" }}>
-            <Box>
+            {/* <Box>
               <DiscussionCard />
-            </Box>
+            </Box> */}
 
             {/* <Box my={"25px"}>
             <RecommendTopicCard />