Skip to content

Commit

Permalink
feat(archive): added frontend archive feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@HoseaCodes
HoseaCodes committed Sep 2, 2021
1 parent 32aa44a commit f1b0086
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 34 deletions.
20 changes: 7 additions & 13 deletions src/Pages/Articles/ArticleCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,27 @@ import VisibilityIcon from '@material-ui/icons/Visibility';
import moment from 'moment-timezone'
import { GlobalState } from '../../GlobalState';


// <Route path="/" exact component={Products} />
// <Route path="/detail/:id" exact component={DetailProduct} />
// <Route path="/login" exact component={isLoggedIn ? NotFound : Login} />
// <Route path="/register" exact component={isLoggedIn ? NotFound : Register} />
// <Route path="/category" exact component={isAdmin ? Category : NotFound} />
// <Route path="/create_product" exact component={isAdmin ? Create : NotFound} />
// <Route path="/edit_product" exact component={isAdmin ? Create : NotFound} />
// <Route path="/history" exact component={isLoggedIn ? OrderHistory : NotFound} />
// <Route path="/history/:id" exact component={isLoggedIn ? OrderDetails : NotFound} />
// Main Article Cards
const ArticleItem = (props) => {
const state = useContext(GlobalState);
const [isLoggedIn] = state.userAPI.isLoggedIn
const [isAdmin] = state.userAPI.isAdmin

const { title, createdAt, description, images, _id } = props.article;
const { title, createdAt, description, images, _id, archived } = props.article;

const timeFormater = moment.utc(createdAt).format('MM/DD/YYYY')

return (
<div className="article-card">
{/* <input type="checkbox" checked={checked}
onChange={() => props.handleCheck(_id)} /> */}
<img className='article-img' src={images.url} alt={title} />
<div className='article-content'>
<div style={{ padding: '1rem' }}>
{isAdmin && isLoggedIn ?

<input type="checkbox" name="archive" onClick={() => props.archiveArticle(_id, archived)}/> :
null
}
<Link to={`/blog/${_id}`} className='article-card-header'
// onClick={() => this.handleCount()}
>
Expand All @@ -55,4 +49,4 @@ const ArticleItem = (props) => {
)
}

export default ArticleItem;
export default ArticleItem;
56 changes: 35 additions & 21 deletions src/Pages/Articles/Articles.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,23 @@ const Articles = () => {
// const [token] = state.token
const [callback, setCallback] = state.articlesAPI.callback
const [loading, setLoading] = useState(false)
const [tagsShow, setTagsShow] = useState('All')
// const [tagsShow, setTagsShow] = useState('All')
const [search, setSearch] = useState('')
const [status, setStatus] = useState('active')
const [currentPage, setCurrentPage] = useState(1)
const [postsPerPage] = useState(3)

const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = articles.slice(indexOfFirstPost, indexOfLastPost)

const mainPosts = articles.map((article) => { return article.archived === true ? articles.pop(article) : article})
const currentPosts = mainPosts.slice(indexOfFirstPost, indexOfLastPost)

const paginate = pageNum => setCurrentPage(pageNum);
const nextPage = () => {
if (currentPage > articles.length) return;
setSearch('')
setCurrentPage(currentPage + 1);
}
}
const prevPage = () => {
if (currentPage < 1) return;
setSearch('')
Expand All @@ -54,6 +55,19 @@ const Articles = () => {
alert(err.response.data.msg)
}
}
const archiveArticle = async (id, archived) => {
try {
console.log('clicks')
const archive = !archived
setLoading(true)
const archiveArticle = axios.patch(`/api/articles/${id}`, {archive})
await archiveArticle
setLoading(false)
setCallback(!callback)
} catch (err) {
alert(err.response.data.msg)
}
}

const handleCheck = async (id) => {
articles.forEach(article => {
Expand All @@ -74,24 +88,24 @@ const Articles = () => {
setSearch(value.substr(0, 20))
}

const updateItemsShow = (str) => {
setTagsShow(str)
const updateItemsShow = (/*str*/) => {
// setTagsShow(str)
setStatus("active")
}

let taggedArticles = []
if (tagsShow === "All") {
taggedArticles = filteredArticles
}
else if (tagsShow === "JavaScript") {
taggedArticles = filteredArticles.filter(item => item.type.includes("JavaScript"))
}
else if (tagsShow === "Python") {
taggedArticles = filteredArticles.filter(item => item.type.includes("Python"))
}
else if (tagsShow === "Software Engineer") {
taggedArticles = filteredArticles.filter(item => item.type.includes("Software Engineer"))
}
// let taggedArticles = []
// if (tagsShow === "All") {
// taggedArticles = filteredArticles
// }
// else if (tagsShow === "JavaScript") {
// taggedArticles = filteredArticles.filter(item => item.type.includes("JavaScript"))
// }
// else if (tagsShow === "Python") {
// taggedArticles = filteredArticles.filter(item => item.type.includes("Python"))
// }
// else if (tagsShow === "Software Engineer") {
// taggedArticles = filteredArticles.filter(item => item.type.includes("Software Engineer"))
// }

if (loading) return <div className="products"><Loading /></div>
return (
Expand Down Expand Up @@ -156,7 +170,7 @@ const Articles = () => {
<section className='articleList'>
{filteredArticles.map(article => {
return (<>
<ArticleCard deleteArticle={deleteArticle} handleCheck={handleCheck} article={article}
<ArticleCard archiveArticle={archiveArticle} deleteArticle={deleteArticle} handleCheck={handleCheck} article={article}
key={article.id}
/>
<hr className='article-line' />
Expand Down Expand Up @@ -194,4 +208,4 @@ const Articles = () => {



export default Articles;
export default Articles;

0 comments on commit f1b0086

Please sign in to comment.