projets/react_laravel_medium_clone_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

third commit

Browse Source
This commit is contained in:
belasriiimad 2024-02-05 09:53:36 +00:00
parent 3e3c0ca339
commit 0e79054b4e
5 changed files with 57 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Home.jsx
View File

@ -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`)
if (response.data.data.length) {
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))
if (response.data.data.length) {
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 */}
{
message ?
<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}

6
src/components/articles/ArticleList.jsx
View File

@ -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>
)

14
src/components/search/SearchBox.jsx
View File

@ -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}`}
className='text-decoration-none text-primary'>
<button onClick={() => viewArticleDetails(article.slug)}
className='text-decoration-none btn btn-link text-primary'>
View
</Link>
</button>
</div>
</li>
))

8
src/components/user/articles/Bookmarked.jsx
View File

@ -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>
))

19
src/components/user/articles/UserArticles.jsx
View File

@ -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))
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>
)