Merge pull request #23 from chimobi-justice/ft/save-articles

Feat: save, unsaved, articles to reading-list
chimobi-justice · Oct 3, 2024 · 10f1825 · 10f1825
2 parents bad570b + 25ae080
commit 10f1825
Show file tree

Hide file tree

Showing 39 changed files with 886 additions and 197 deletions.
diff --git a/index.html b/index.html
@@ -4,12 +4,14 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="keywords" content="Reactjs, TypeScript, React Query, Chakra UI and Laravel">
+  <meta name="description" content="A portal for problem solving, knowledge sharing and community builders, join others for sharing knowledge.">
+  <meta name="author" content="Justice Chimobi">
   <title>learn-hub</title>
 </head>
 
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
-
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource/open-sans": "^5.1.0",
+    "@fontsource/raleway": "^5.1.0",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.56.2",
     "axios": "^1.7.2",
@@ -25,6 +27,7 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.24.1",
     "react-toastify": "^10.0.5",
+    "use-debounce": "^10.0.3",
     "yup": "^1.4.0"
   },
   "devDependencies": {

diff --git a/src/Route/index.tsx b/src/Route/index.tsx
@@ -25,11 +25,16 @@ import {
 } from 'react-router-dom'
 import AuthRoute from './AuthRoute'
 import PrivateRoute from './privateRoute'
+import Search from '@pages/Search'
+import SavedArticles from '@pages/Users/SavedArticles'
 
 const routes = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Layout />}>
       <Route index path='/' element={<Home />} />
+
+      <Route path="/search" element={<Search />} />
+
       <Route index path='/threads' element={<Threads />} />
       <Route index path='/threads/:slug/:id' element={<ShowThread />} />
 
@@ -47,7 +52,8 @@ const routes = createBrowserRouter(
       <Route path="/threads/edit/:id" element={<PrivateRoute element={<EditThread />} />} />
       <Route path="/me/threads/:username" element={<PrivateRoute element={<ArthoredThreads />} />} />
 
-      <Route path="/me/:username" element={<PrivateRoute element={<Profile />} />} />
+      <Route path="/:username" element={<PrivateRoute element={<Profile />} />} />
+      <Route path="/:username/reading-list" element={<PrivateRoute element={<SavedArticles />} />} />
       <Route path="/me/settings/account/edit" element={<PrivateRoute element={<ProfileEdit />} />} />
       {/* end private route */}
 

diff --git a/src/api/endpoints/articleEndpoint.ts b/src/api/endpoints/articleEndpoint.ts
@@ -22,4 +22,11 @@ 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`;
+export const GET_PINNED_ARTICLES_ENDPOINT = `${API_BASE_URL}/articles/pinned-articles`;
+
+export const CREATE_SAVE_ARTICLE_ENDPOINT = `${API_BASE_URL}/articles/save-article`;
+
+export const DELETE_SAVE_ARTICLE_ENDPOINT = `${API_BASE_URL}/articles/unsave-article`;
+
+export const GET_SAVED_ARTICLES_ENDPOINT = `${API_BASE_URL}/articles/saved-articles`;
+
diff --git a/src/assets/images/searching.png b/src/assets/images/searching.png
diff --git a/src/components/ArticleCard/Articles.tsx b/src/components/ArticleCard/Articles.tsx
@@ -8,10 +8,13 @@ import {
   Flex,
   Heading,
   Image,
-  Text
+  Text,
+  Tooltip
 } from '@chakra-ui/react'
 import { CiEdit } from 'react-icons/ci'
 import { MdDeleteOutline } from 'react-icons/md'
+import { BsSave } from 'react-icons/bs'
+import { IoSaveSharp } from "react-icons/io5";
 
 import truncate from '@helpers/truncate'
 import { stripTags } from '@helpers/stripTags'
@@ -29,7 +32,9 @@ interface IProps {
   isOwner?: boolean;
   onDelete?: () => void;
   id?: any;
-  isLoggedIn?: any
+  isLoggedIn?: any;
+  is_saved?: boolean;
+  saveUnsavedArticle?: () => void;
 }
 
 const ArticlesCard: FunctionComponent<IProps> = ({
@@ -44,7 +49,9 @@ const ArticlesCard: FunctionComponent<IProps> = ({
   isOwner,
   onDelete,
   id,
-  isLoggedIn
+  isLoggedIn,
+  is_saved,
+  saveUnsavedArticle
 }) => {
   return (
     <Card mb={"20px"} size={"md"}>
@@ -89,7 +96,7 @@ const ArticlesCard: FunctionComponent<IProps> = ({
                     </Link>
                   </Heading>
                 </Box>
-                
+
                 <Box>
                   {isOwner && (
                     <Flex p={"5px"} gap={2}>
@@ -144,7 +151,23 @@ const ArticlesCard: FunctionComponent<IProps> = ({
 
                   </Box>
 
-                  <Box gap={3} alignItems={"center"}>
+                  <Box gap={3} alignItems={"center"} display={"flex"}>
+                    {!isOwner && isLoggedIn && !is_saved && (
+                      <Tooltip label='Save' placement='top'>
+                        <Text as={"span"}>
+                          <BsSave onClick={saveUnsavedArticle} cursor={"pointer"} />
+                        </Text>
+                      </Tooltip>
+                    )}
+
+                    {!isOwner && isLoggedIn && is_saved &&
+                      <Tooltip label='Article Saved' placement='top'>
+                        <Text as={"span"}>
+                          <IoSaveSharp onClick={saveUnsavedArticle} cursor={"pointer"} />
+                        </Text>
+                      </Tooltip>
+                    }
+
                     <Text fontSize={"12px"} color={"#0009"}>{read_time}</Text>
                   </Box>
                 </Flex>

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -71,14 +71,14 @@ const Card: FunctionComponent<IProps> = ({
             textDecoration: "underline"
           }}
         >
-          <Link to={CTA}>{title}</Link>
+          <Link to={CTA}>{truncate(title, 21)}</Link>
         </Heading>
 
         <Text
           fontSize={"14px"}
           lineHeight={"1.7em"}
           color={"#0009"}
-          dangerouslySetInnerHTML={stripTags(truncate(description, 100))}
+          dangerouslySetInnerHTML={stripTags(truncate(description, 70))}
         />
       </CardBody>
 

diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
@@ -12,7 +12,7 @@ const Editor: FunctionComponent<EditorProps> = ({ content, setContent, placehold
     toolbar: [
       [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
       ['bold', 'italic', 'underline', 'blockquote'],
-      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '+1' }],
+      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
       ['link', 'image', 'code-block'],
     ],
   };
@@ -24,13 +24,23 @@ const Editor: FunctionComponent<EditorProps> = ({ content, setContent, placehold
     'link', 'image', 'code-block'
   ];
 
+  const handleContentChange = (value: string) => {
+    const trimmedValue = value.replace(/<(.|\n)*?>/g, '').trim();
+
+    if (!trimmedValue) {
+      setContent("");
+    } else {
+      setContent(value);
+    }
+  }
+
   return (
     <ReactQuill
       theme="snow"
       formats={formats}
       modules={modules}
       value={content}
-      onChange={setContent}
+      onChange={handleContentChange}
       className="editor-input"
       placeholder={placeholder}
     />

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '@chakra-ui/react'
 import { FaXTwitter } from 'react-icons/fa6'
 import { IoLogoLinkedin } from 'react-icons/io'
-import { FaGithub } from "react-icons/fa";
+import { FaGithub } from 'react-icons/fa'
 
 import { colors } from '../../colors'
 
@@ -83,7 +83,6 @@ const Footer: FunctionComponent = () => {
               fontWeight={"normal"}
               spacing={3}
             >
-              <ListItem><Link to="/">Account</Link></ListItem>
               <ListItem><Link to="/">Feedback</Link></ListItem>
               <ListItem><Link to="/">Contact Us</Link></ListItem>
             </List>
@@ -139,7 +138,7 @@ const Footer: FunctionComponent = () => {
         </SimpleGrid>
 
         <Box mt={"20px"} pt={"20px"} borderTop={"1px solid gray"}>
-          <Text fontSize={"15px"}>&copy; 2024 Learn Hub. All right reserved. Made in Nigeria.</Text>
+          <Text fontSize={"13px"}>&copy; 2024 Learn Hub. All right reserved. Made in Nigeria.</Text>
         </Box>
       </Box>
     </Box>

diff --git a/src/components/NavBar/navBarLg.tsx b/src/components/NavBar/navBarLg.tsx
@@ -15,8 +15,14 @@ import {
 } from '@chakra-ui/react'
 import { FaRegUser } from 'react-icons/fa'
 import { IoIosArrowUp, IoIosArrowDown } from 'react-icons/io'
+import { GoPerson } from 'react-icons/go'
+import { FiSearch } from 'react-icons/fi'
+import { RiArticleFill } from 'react-icons/ri'
+import { RiChatThreadLine } from 'react-icons/ri'
+import { CiViewList } from 'react-icons/ci'
+import { IoSettingsOutline } from 'react-icons/io5'
 
-import { Button, Search } from '@components/index'
+import { Button } from '@components/index'
 import { colors } from '../../colors'
 import { Menu } from '@constant/Menu'
 import { useUser } from '@context/userContext'
@@ -43,7 +49,6 @@ const NavBarLg: FunctionComponent = () => {
           justifyContent="space-between"
           py={"20px"}
         >
-          {/* <Box display={"flex"} gap={4} alignItems={"center"}> */}
           <Link to="/">
             <Heading
               fontStyle={"italic"}
@@ -54,7 +59,6 @@ const NavBarLg: FunctionComponent = () => {
               Learn <Text as="span" color={"#000"}>Hub</Text>
             </Heading>
           </Link>
-          {/* </Box> */}
 
           <Box
             display={"inline-flex"}
@@ -75,10 +79,17 @@ const NavBarLg: FunctionComponent = () => {
             ))}
           </Box>
 
-
-
           <Box display={"flex"} gap={4} alignItems={"center"}>
-            <Search />
+            <Link to={"/search"}>
+              <Button
+                size="md"
+                rounded="md"
+                type="button"
+                variant="outline"
+              >
+                <FiSearch />
+              </Button>
+            </Link>
 
             {user ? (
               <Box>
@@ -107,29 +118,34 @@ const NavBarLg: FunctionComponent = () => {
                         </Box>
                       </MenuButton>
                       <MenuList>
-                        <Link to={`/me/${user?.data?.username}`}>
+                        <Link to={`/${user?.data?.username}`}>
                           <MenuItem color={"blcack"}>
-                            Your Profile
+                            <GoPerson style={{ marginRight: "4px" }} /> Your Profile
                           </MenuItem>
                         </Link>
                         <Link to={`/me/articles/${user?.data?.username}`}>
                           <MenuItem color={"black"}>
-                            Your Articles
+                            <RiArticleFill style={{ marginRight: "4px" }} /> Your Articles
                           </MenuItem>
                         </Link>
                         <Link to={`/me/threads/${user?.data?.username}`}>
                           <MenuItem color={"black"}>
-                            Your Threads
+                            <RiChatThreadLine style={{ marginRight: "4px" }} /> Your Threads
+                          </MenuItem>
+                        </Link>
+                        <Link to={`/${user?.data?.username}/reading-list`}>
+                          <MenuItem color={"black"}>
+                            <CiViewList style={{ marginRight: "4px" }} /> Reading List
                           </MenuItem>
                         </Link>
                         <Link to="/me/settings/account/edit">
                           <MenuItem color={"black"}>
-                            Settings
+                            <IoSettingsOutline style={{ marginRight: "4px" }} /> Settings
                           </MenuItem>
                         </Link>
                         <MenuDivider />
                         <MenuItem color={"black"} onClick={handleLoggedOut}>
-                          Logout
+                          <FaRegUser style={{ marginRight: "4px" }} /> Logout
                         </MenuItem>
                       </MenuList>
                     </>