third commit

src/components/Home.jsx

@@ -13,6 +13,7 @@ export default function Home() {
   const [articles, setArticles] = useState([])
   const [loading, setLoading] = useState(false)
   const [articleByTag, setArticleByTag] = useState('')
+  const [message, setMessage] = useState('')
   const [articleByFollowing, setArticleByFollowing] = useState(false)
   const [meta, setMeta] = useState({
     to: 0,
@@ -24,18 +25,27 @@ export default function Home() {
 
   useEffect(() => {
     const fetchArticles = async () => {
+      setMessage('')
       setLoading(true)
       try {
         if (articleByTag) {
           const response = await axios.get(`${BASE_URL}/tag/${articleByTag}/articles`)
-          setArticles(response.data.data)
+          if (response.data.data.length) {
-          setMeta(response.data.meta)
+            setArticles(response.data.data)
+            setMeta(response.data.meta)
+          }else {
+            setMessage('No articles found.')
+          }  
           setLoading(false)
         } else if (articleByFollowing) {
           const response = await axios.get(`${BASE_URL}/followings/articles`,
             getConfig(token))
-          setArticles(response.data.data)
+          if (response.data.data.length) {
-          setMeta(response.data.meta)
+            setArticles(response.data.data)
+            setMeta(response.data.meta)
+          }else {
+            setMessage('No articles found.')
+          }  
           setLoading(false)
         } else {
           const response = await axios.get(`${BASE_URL}/articles`)
@@ -90,10 +100,19 @@ export default function Home() {
               setArticleByTag={setArticleByTag} />
           }
           {/* display all the published articles */}
-          <ArticleList articles={articles} 
+          {
-            fetchNextArticles={fetchNextArticles}
+            message ?
-            meta={meta}  
+              <div className="col-md-8">
+                <div className="alert alert-info">
+                  No articles found
+                </div>
+              </div>
+              :
+            <ArticleList articles={articles} 
+              fetchNextArticles={fetchNextArticles}
+              meta={meta}  
           />
+          }
           {/* display all the tags */}
           <Tags setArticleByTag={setArticleByTag}
             articleByTag={articleByTag}

src/components/articles/ArticleList.jsx

@@ -25,14 +25,10 @@ export default function ArticleList({articles, fetchNextArticles, meta}) {
     return (
         <div className='col-md-8'>
             {
-                articles?.length ? articles?.map(article => (
+                articles?.map(article => (
                     <ArticleListItem article={article}
                         key={article.id} />
                 ))
-                :
-                <div className="alert alert-info">
-                    No article found.
-                </div>
             }
         </div>
     )

src/components/search/SearchBox.jsx

@@ -1,13 +1,14 @@
 import axios from 'axios'
 import React, { useState } from 'react'
 import { BASE_URL } from '../../helpers/config'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 export default function SearchBox() {
     const [searchTerm, setSearTerm] = useState('')
     const [message, setMessage] = useState('')
     const [articles, setArticles] = useState([])
     const [loading, setLoading] = useState(false)
+    const navigate = useNavigate()
 
     const searchArticles = async (e) => {
         e.preventDefault()
@@ -34,6 +35,11 @@ export default function SearchBox() {
         }
     }
 
+    const viewArticleDetails = (slug) => {
+        navigate(`/articles/${slug}`)
+        setArticles([])
+    }
+
     return (
         <div className="offcanvas offcanvas-start" tabIndex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
             <div className="offcanvas-header">
@@ -84,10 +90,10 @@ export default function SearchBox() {
                                     <span>
                                         { article.title }
                                     </span>
-                                    <Link to={`/articles/${article.slug}`}
+                                    <button onClick={() => viewArticleDetails(article.slug)}
-                                        className='text-decoration-none text-primary'>
+                                        className='text-decoration-none btn btn-link text-primary'>
                                         View
-                                    </Link>
+                                    </button>
                                 </div>
                             </li>
                         ))

src/components/user/articles/Bookmarked.jsx

@@ -1,12 +1,14 @@
 import React, { useEffect } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Link, useNavigate } from 'react-router-dom'
 import useTitle from '../../custom/useTitle'
+import { bookmark } from '../../../redux/slices/bookmarkSlice'
 
 export default function Bookmarked() {
     const { isLoggedIn } = useSelector(state => state.user)
     const { bookmarked } = useSelector(state => state.bookmark)
     const navigate = useNavigate()
+    const dispatch = useDispatch()
 
     //change page title
     useTitle('Saved Articles')
@@ -45,6 +47,10 @@ export default function Bookmarked() {
                                                         to={`/articles/${article.slug}`}>
                                                         <i className="bi bi-eye"></i>
                                                     </Link>
+                                                    <button className="btn btn-sm btn-danger ms-2"
+                                                        onClick={() => dispatch(bookmark(article))}>
+                                                        <i className="bi bi-bookmark-dash"></i>
+                                                    </button>
                                                 </td>
                                             </tr>
                                         ))

src/components/user/articles/UserArticles.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import { setCurrentUser } from '../../../redux/slices/userSlice'
 import { toast } from 'react-toastify'
 import axios from 'axios'
@@ -10,20 +10,25 @@ import Spinner from '../../layouts/Spinner'
 export default function UserArticles() {
     const { token } = useSelector(state => state.user)
     const dispatch = useDispatch()
-    const navigate = useNavigate()    
     const [articles, setArticles] = useState([])
     const [loading, setLoading] = useState(false)
+    const [message, setMessage] = useState('')
 
     useEffect(() => {
         fetchUserArticles()
     }, [])
 
     const fetchUserArticles = async () => {
+        setMessage('')
         setLoading(true)
         try {
             const response = await axios.get(`${BASE_URL}/user/articles`,
               getConfig(token))
-                setArticles(response.data.data)
+                if (response.data.data.length) {
+                    setArticles(response.data.data)
+                }else {
+                    setMessage('No articles found.')
+                }
                 setLoading(false)
             } catch (error) {
                 setLoading(false)
@@ -55,7 +60,11 @@ export default function UserArticles() {
                         <Spinner />
                     </div>
                 :
-                articles?.length ?
+                message ?
+                    <div className="alert alert-info">
+                        { message }
+                    </div>
+                    :
                     <table className='table table-responsive'>
                         <caption>List of published articles</caption>
                         <thead>
@@ -111,10 +120,6 @@ export default function UserArticles() {
                             }
                         </tbody>
                     </table>
-                :
-                <div className="alert alert-info">
-                    No articles found.
-                </div>
             }
         </div>
     )