From b0f0b3c2f62cbbeb5c9e3cbad68b1ba031c43b0d Mon Sep 17 00:00:00 2001 From: hoseacodes Date: Wed, 22 May 2024 02:10:41 -0500 Subject: [PATCH] fix(articles): update edit feature --- src/App.js | 6 + src/Pages/Articles/CreateArticle.jsx | 18 +- src/Pages/Home/Home.jsx | 329 +++++++++++++++------------ 3 files changed, 209 insertions(+), 144 deletions(-) diff --git a/src/App.js b/src/App.js index f77fcf7..df8b86f 100755 --- a/src/App.js +++ b/src/App.js @@ -294,6 +294,12 @@ const App = () => { exact={true} element={CreateArticle} /> + { if (article._id === param.id) { setArticle(article); - // setImages(article.images) + setImages(article.images) } }); } @@ -201,6 +204,7 @@ function CreatArticle() { setArticle({ ...article, [name]: checked }); }; + console.log({ article }); return ( <> {loggedIn ? ( @@ -324,7 +328,7 @@ function CreatArticle() { -
+
)} + {onEdit && ( +
+ + X +
+ )}
-
+
-
+
{ const state = useContext(GlobalState); const [isLoggedIn] = state.userAPI.isLoggedIn; + const [user] = state.userAPI.user; const [articles] = state.articlesAPI.articles; + const [userArticles, setUserArticles] = useState([]); + const [mainPosts, setMainPosts] = useState([]); + useEffect(() => { - console.log({ articles }); + articles.forEach((article) => { + if (user.articles.includes(article.article_id)) { + console.log(article) + setUserArticles((prev) => [...prev, article]); + } + }); }, [articles]); - if (!articles && isLoggedIn) return <>loading...; - const mainPosts = articles.sort( - (a, b) => new Date(b.createdAt) - new Date(a.createdAt) - ); + if (!userArticles && isLoggedIn) return <>loading...; + + useEffect(() => { + if (userArticles.length >= 1) { + const updateMainPosts = userArticles.sort( + (a, b) => new Date(b.createdAt) - new Date(a.createdAt) + ); + setMainPosts(updateMainPosts); + } + }, [userArticles]); + + const handleDelete = async (e, id) => { + e.preventDefault(); + if (user) { + await axios.delete(`/api/articles/${id}`); + } + }; + + const handleArchive = async (e, id, archive) => { + e.preventDefault(); + if (user) { + await axios.put(`/api/articles/${id}`, { + archive: archive ? false : true, + }); + } + }; + + const handleDraft = async (e, id, draft) => { + e.preventDefault(); + if (user) { + await axios.put(`/api/articles/${id}`, { + draft: draft, + }); + } + }; + const loggedInHome = () => { return ( <> @@ -34,143 +76,150 @@ const Home = () => {
All Blog Posts - {mainPosts.map((article) => { - const timeFormater = moment - .utc(article.createdAt) - .format("MMMM Do YYYY"); - const updateTimeFormater = moment - .utc(article.updatedAt) - .format("MMMM Do YYYY"); - return ( -
-
  • -
    -
    - -    - -
    -
    -
    - -    - -
    -
    - -    - + {mainPosts.length === 0 ? ( + <> + ) : ( + mainPosts.map((article) => { + const timeFormater = moment + .utc(article.createdAt) + .format("MMMM Do YYYY"); + const updateTimeFormater = moment + .utc(article.updatedAt) + .format("MMMM Do YYYY"); + return ( +
    +
  • +
    +
    + handleDraft(e, article._id, article.draft)} + /> +    + +
    +
    +
    + handleArchive(e, article._id, article.archive)} + // checked + /> +    + +
    +
    + handleDelete(e, article._id)} + // checked + /> +    + +
    -
    • - -
    • -
    - ); - })} +
    +

    {truncate(article.description)}

    + Categories: + {article.categories.length >= 1 && + article.categories[0] !== "" ? ( + article.categories.map((category) => { + return ( + + {category} + + ); + }) + ) : ( + None + )} +
    + Tags: + {article.tags.length >= 1 ? ( + article.tags.map((tag) => { + return ( + + {tag} + + ); + }) + ) : ( + None + )} + + + + ); + }) + )}