From 4c0e050f48479a2d80fa3249efe173418764ddd9 Mon Sep 17 00:00:00 2001 From: Aishwarya Mustoori <59821571+aishwarya-mustoori@users.noreply.github.com> Date: Mon, 6 Jul 2020 20:27:10 -0700 Subject: [PATCH 1/2] Favorite Implementation --- components/article/ArticleList.tsx | 40 +------------------ components/global/ArticleCard.tsx | 16 ++------ lib/api/article.ts | 24 +++++++++++- pages/article/[pid].tsx | 63 ++++++++++++++++++------------ 4 files changed, 66 insertions(+), 77 deletions(-) diff --git a/components/article/ArticleList.tsx b/components/article/ArticleList.tsx index 8ec96bb..c1ee349 100644 --- a/components/article/ArticleList.tsx +++ b/components/article/ArticleList.tsx @@ -116,43 +116,7 @@ const ArticleList = (props) => { } } - const handleClickFavorite = async (e,slug,favorited) => { - e.preventDefault() - if (!isLoggedIn) { - Router.push(`/user/login`); - return; - } - try { - if (favorited) { - await axios.delete(`${SERVER_BASE_URL}/articles/${slug}/favorite`, { - headers: { - Authorization: `Token ${currentUser?.token}`, - }, - }); - - } else { - await axios.post( - `${SERVER_BASE_URL}/articles/${slug}/favorite`, - {}, - { - headers: { - Authorization: `Token ${currentUser?.token}`, - }, - } - ); - - } - for (let index in props.articles){ - if(props.articles[index].slug== slug){ - props.articles[index].favorited = !favorited - break; - } - } - setRefresh(!refresh) - } catch (error) { - - } - }; + return ( <> {articles?.map((article) => ( @@ -161,7 +125,7 @@ const ArticleList = (props) => { as={`/article/${article.slug}`} className="preview-link" > - rightButtonClicked(e,article.slug,article.bookmarked)} favoriteClick = {(e)=>handleClickFavorite(e,article.slug,article.favorited)} /> + rightButtonClicked(e,article.slug,article.bookmarked)} /> ))} diff --git a/components/global/ArticleCard.tsx b/components/global/ArticleCard.tsx index bcc585d..47cfe68 100644 --- a/components/global/ArticleCard.tsx +++ b/components/global/ArticleCard.tsx @@ -66,14 +66,7 @@ const StyledEmoji = styled.span` width: 20px; } ` -const StyledEmoji2 = styled.span` -background: red; -border-radius: 22px; -padding: 0.2em 0.4em 0.2em 0.4em; - img { - width: 11px; - } -` + const StyleButton = styled(Button)` font-weight: bold; border-radius: 0.5em; @@ -85,7 +78,7 @@ border-color: ${props => props.isPublished ? !props.bookmarked ?'#4EC700 !imp /* article state: draft, review, pubished, complete*/ -const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null,favoriteClick = null }) => { +const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRightButtonClick = null}) => { const tags = article.tagList.map((tag, i) => ( - {!article.favorited? - {'🤍'} {article.favoritesCount} - - : {"❤️ " + article.favoritesCount}} + {"❤️ " + article.favoritesCount} {"💬 " + article.commentsCount} diff --git a/lib/api/article.ts b/lib/api/article.ts index 278de1a..2f5010c 100644 --- a/lib/api/article.ts +++ b/lib/api/article.ts @@ -42,7 +42,29 @@ const ArticleAPI = { feed: (page, limit = 10) => axios.get(`${SERVER_BASE_URL}/articles/feed?${getQuery(limit, page)}`), - get: (slug) => axios.get(`${SERVER_BASE_URL}/articles/${slug}`), + get: async(slug,user) => { + const token = user?.token; + try { + if(token != null){ + const response = await axios.get( + `${SERVER_BASE_URL}/articles/${slug}`, + { + headers: { + Authorization: `Token ${encodeURIComponent(token)}`, + }, + } + ); + return response; + }else{ + const response = await axios.get( + `${SERVER_BASE_URL}/articles/${slug}` + ); + return response; + + } + } catch (error) { + return error.response; + }}, unfavorite: (slug) => axios.delete(`${SERVER_BASE_URL}/articles/${slug}/favorite`), diff --git a/pages/article/[pid].tsx b/pages/article/[pid].tsx index d284af9..9098bd2 100644 --- a/pages/article/[pid].tsx +++ b/pages/article/[pid].tsx @@ -17,6 +17,7 @@ import CommentList from "../../components/comment/CommentList"; import ArticleAPI from "../../lib/api/article"; import { Article } from "../../lib/types/articleType"; import ArticleTags from "../../components/article/ArticleTags"; +import { ppid } from "process"; const ArticleContain = styled.div` width: 880px; @@ -73,10 +74,10 @@ border-radius: 22px; const StyledEmoji2 = styled.div` background: red; border-radius: 22px; -padding: 0.2em 0.4em 0.2em 0.4em; +padding: 0.5em; margin :0.5em; img { - width: 16px; + width: 20px; } ` @@ -85,28 +86,38 @@ width :100%; object-fit: cover; object-position: 0 40%; ` - -const ArticlePage = (initialArticle) => { +const ArticlePage = (id) => { + const [mainArticles,setMainArticles] = React.useState([]) + const [fetchedArticle,setFetchedArticle] =React.useState([]) const router = useRouter(); const { query: { pid }, } = router; - const { - data: fetchedArticle, - } = useSWR( - `${SERVER_BASE_URL}/articles/${encodeURIComponent(String(pid))}`, - fetcher - ); - - const { article }: Article = fetchedArticle || initialArticle; - - const { data: fetchedArticles } = useSWR( - `${SERVER_BASE_URL}/articles?author=${article.author.username}`, - fetcher - ); + const getArticles = async (currentUser) => { + if (id != null) { + const { data: fetchedArticle } = await ArticleAPI.get(id.id, currentUser); + setPreview({ ...article, favorited: fetchedArticle.article.favorited,bookmarked: false, bookmarkCount: null + }) + setMainArticles(fetchedArticle) + } + } + + React.useEffect(() => { + let user = JSON.parse(localStorage.getItem("user")) + getArticles(user) + let { article }: any = mainArticles; + if(article != null){ + const { data: fetchedArticles } = useSWR( + `${SERVER_BASE_URL}/articles?author=${article.author.username}`, + fetcher + ); + setFetchedArticle(fetchedArticles) + } + }, [id]); - let { articles } = fetchedArticles || []; + let { article }: any = mainArticles; + let { articles } : any = fetchedArticle || []; articles = articles ? articles.slice(0, Math.min(articles.length, 5)) : []; @@ -134,7 +145,7 @@ const ArticlePage = (initialArticle) => { : preview.favoritesCount + 1, }); } else { - await axios.post( + await axios.post( `${SERVER_BASE_URL}/articles/${slug}/favorite`, {}, { @@ -142,7 +153,7 @@ const ArticlePage = (initialArticle) => { Authorization: `Token ${currentUser?.token}`, }, } - ); + ) } setPreview({ ...preview, @@ -198,11 +209,10 @@ const ArticlePage = (initialArticle) => { }); } }; - +if(article != null){ const markup = { __html: marked(article.body, { sanitize: true }), }; - return (
@@ -233,11 +243,14 @@ const ArticlePage = (initialArticle) => {
); -}; +}else{ + return (
) +} +} ArticlePage.getInitialProps = async ({ query: { pid } }) => { - const { data } = await ArticleAPI.get(pid); - return data; + let id = pid + return { id }; }; export default ArticlePage; From 1ca79cb2c6a0fae9552863ff68896a5986211d67 Mon Sep 17 00:00:00 2001 From: Aishwarya Mustoori <59821571+aishwarya-mustoori@users.noreply.github.com> Date: Mon, 6 Jul 2020 20:35:46 -0700 Subject: [PATCH 2/2] Update [pid].tsx --- pages/editor/[pid].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/editor/[pid].tsx b/pages/editor/[pid].tsx index f7324c9..2a69122 100644 --- a/pages/editor/[pid].tsx +++ b/pages/editor/[pid].tsx @@ -432,7 +432,7 @@ const UpdateArticleEditor = ({ article: initialArticle }) => { UpdateArticleEditor.getInitialProps = async ({ query: { pid } }) => { const { data: { article }, - } = await ArticleAPI.get(pid); + } = await ArticleAPI.get(pid,null); return { article }; };