Merge pull request #20 from chimobi-justice/ft/recommented-articles

Feat: Recommended & Pinned Articles
chimobi-justice · Sep 27, 2024 · 9410e76 · 9410e76
2 parents 429f79e + 0f3bf6d
commit 9410e76
Show file tree

Hide file tree

Showing 42 changed files with 481 additions and 232 deletions.
diff --git a/index.html b/index.html
@@ -5,20 +5,11 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>learn-hub</title>
-
-  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> -->
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
-
-
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-
-  <script>
-    hljs.highlightAll();
-  </script> -->
 </body>
 
 </html>
diff --git a/src/api/endpoints/articleEndpoint.ts b/src/api/endpoints/articleEndpoint.ts
@@ -18,4 +18,8 @@ export const CREATE_ARTICLE_COMMENT_ENDPOINT = `${API_BASE_URL}/articles`;
 
 export const ARTICLE_LIKE_ENDPOINT = `${API_BASE_URL}/articles`;
 
-export const ARTICLE_DISLIKE_ENDPOINT = `${API_BASE_URL}/articles`;
+export const ARTICLE_DISLIKE_ENDPOINT = `${API_BASE_URL}/articles`;
+
+export const GET_RECOMMENDED_ARTICLES_ENDPOINT = `${API_BASE_URL}/articles/recommented-articles`;
+
+export const GET_PINNED_ARTICLES_ENDPOINT = `${API_BASE_URL}/articles/pinned-articles`;
diff --git a/src/components/ArticleCard/Articles.tsx b/src/components/ArticleCard/Articles.tsx
@@ -39,7 +39,6 @@ const ArticlesCard: FunctionComponent<IProps> = ({
   authorUsername,
   authorFullname,
   authorAvatar,
-  authorProfileHeadlines,
   CTA = '#',
   isOwner,
   onDelete,
@@ -58,8 +57,9 @@ const ArticlesCard: FunctionComponent<IProps> = ({
             <Image
               src={articleImg}
               alt={articleImg}
-              width={"100%"}
-              height={"250px"}
+              width={{ base: "100%", md: "50%" }}
+              height={{ base: "200px", md: "150px" }}
+              mx={{ base: "", md: "auto" }}
             />
           </Box>
 
@@ -109,7 +109,14 @@ const ArticlesCard: FunctionComponent<IProps> = ({
                   dangerouslySetInnerHTML={stripTags(truncate(description, 200))}
                 />
 
-                <Flex flex="1" gap={2} my={"12px"} flexDirection={{ base: "column", md: "row" }}>
+                <Flex 
+                  flex="1" 
+                  gap={2} 
+                  my={"12px"} 
+                  justifyContent={"space-between"} 
+                  flexDirection={{ base: "column", md: "row" }}
+                  alignItems={"center"}
+                >
                   <Box display={"flex"} gap={3} alignItems={"center"}>
                     {authorUsername && (
                       <Link to={`/user/${authorUsername}`}>
@@ -124,13 +131,12 @@ const ArticlesCard: FunctionComponent<IProps> = ({
                         </Link>
                       </Heading>
                     )}
-                  </Box>
 
-                  <Box display={"flex"} gap={3} alignItems={"center"}>
-                    {authorProfileHeadlines && (
-                      <Text fontSize={"12px"} color={"#0009"}>{truncate(authorProfileHeadlines, 60)}</Text>
-                    )}
+                    <Text fontSize={"12px"} color={"blue"} cursor={"pointer"} _hover={{ textDecoration: "underline"}}>follow</Text>
+
+                  </Box>
 
+                  <Box gap={3} alignItems={"center"}>
                     <Text fontSize={"12px"} color={"#0009"}>{read_time}</Text>
                   </Box>
                 </Flex>

diff --git a/src/components/ArticleCard/LatestArticle.tsx b/src/components/ArticleCard/LatestArticle.tsx
@@ -32,7 +32,7 @@ const LatestArticleCard: FunctionComponent<IProps> = ({
   CTAText
 }) => {
   return (
-    <Card maxW="sm">
+    <Card>
       <CardBody>
         <Box>
           <Image

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -61,7 +61,7 @@ const Card: FunctionComponent<IProps> = ({
         </HStack>
       </CardHeader>
 
-      <CardBody>
+      <CardBody overflow={"hidden"}>
         <Heading
           as="h5"
           size={"md"}

diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx
@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react'
+import { Link } from 'react-router-dom'
 import {
   Box,
   Container,
@@ -11,12 +12,8 @@ import {
 import HeroImg from '@assets/images/hero.jpg'
 import Button from '@components/Button'
 import { colors } from '../../colors'
-import { Link } from 'react-router-dom'
-import { useUser } from '@context/userContext'
 
 const HeroSection: FunctionComponent = () => {
-  const { user } = useUser();
-
   return (
     <Box
       as="section"
@@ -61,39 +58,37 @@ const HeroSection: FunctionComponent = () => {
               A portal for problem solving, knowledge sharing and community builders, join others for sharing knowledge.
             </Text>
 
-            {!user && (
-              <Stack
-                spacing={4}
-                my={"15px"}
-                direction={{ base: "column", lg: "row" }}
-              >
-                <Link to="/auth/register">
-                  <Button
-                    variant="solid"
-                    size={{ base: "md", lg: "lg" }}
-                    width={{ base: "100%", lg: "auto" }}
-                    type="button"
-                    fontWeight={"semibold"}
-                    rounded="sm"
-                  >
-                    Join the community
-                  </Button>
-                </Link>
+            <Stack
+              spacing={4}
+              my={"15px"}
+              direction={{ base: "column", lg: "row" }}
+            >
+              <Link to="/auth/register">
+                <Button
+                  variant="solid"
+                  size={{ base: "md", lg: "lg" }}
+                  width={{ base: "100%", lg: "auto" }}
+                  type="button"
+                  fontWeight={"semibold"}
+                  rounded="sm"
+                >
+                  Join the community
+                </Button>
+              </Link>
 
-                <Link to="/threads">
-                  <Button
-                    variant="outline"
-                    size={{ base: "md", lg: "lg" }}
-                    width={{ base: "100%", lg: "auto" }}
-                    type="button"
-                    fontWeight={"semibold"}
-                    rounded="sm"
-                  >
-                    Visit Threads
-                  </Button>
-                </Link>
-              </Stack>
-            )}
+              <Link to="/threads">
+                <Button
+                  variant="outline"
+                  size={{ base: "md", lg: "lg" }}
+                  width={{ base: "100%", lg: "auto" }}
+                  type="button"
+                  fontWeight={"semibold"}
+                  rounded="sm"
+                >
+                  Visit Threads
+                </Button>
+              </Link>
+            </Stack>
           </Box>
 
           <Box
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ const LatestArticleCard: FunctionComponent<IProps> = ({ @@
       CTAText
     }) => {
       return (
-        <Card maxW="sm">
+        <Card>
           <CardBody>
             <Box>
               <Image
@@ Expand Down @@