Unlike functionality

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"
         >
-          <ArticleCard key={article.slug} article={article} onRightButtonClick ={(e)=>rightButtonClicked(e,article.slug,article.bookmarked)} favoriteClick = {(e)=>handleClickFavorite(e,article.slug,article.favorited)}  />
+          <ArticleCard key={article.slug} article={article} onRightButtonClick ={(e)=>rightButtonClicked(e,article.slug,article.bookmarked)}   />
         </CustomLink>
       ))}
 

components/global/ArticleCard.tsx

@@ -66,14 +66,6 @@ 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;
@@ -84,7 +76,8 @@ const StyleButton = styled(Button)`
 
 
 /* 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) =>
     (<StyledSpan>
       <CustomLink
@@ -145,10 +138,7 @@ const ArticleCard = ({ article, showAuth = false, onLeftButtonClick = null, onRi
               {article.isPublished &&
                 <Space size={"large"}>
                   <Twemoji options={{ className: 'twemoji' }}>
-                    {!article.favorited ?
-                      <span><StyledEmoji2 onClick={favoriteClick}>{'🤍'}</StyledEmoji2>  <span>{article.favoritesCount} </span></span>
-
-                      : <StyledEmoji onClick={favoriteClick}>{"❤️ " + article.favoritesCount}</StyledEmoji>}
+                    <StyledEmoji>{"❤️ " + article.favoritesCount}</StyledEmoji>
                     <StyledEmoji>{"💬 " + article.commentsCount}</StyledEmoji>
                   </Twemoji>
                 </Space>

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`),

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;
@@ -71,12 +72,12 @@ const StyledEmoji = styled.div`
 
 `
 const StyledEmoji2 = styled.div`
-  background: red;
-  border-radius: 22px;
-  padding: 0.2em 0.4em 0.2em 0.4em;
-  margin :0.5em;
+background: red;
+border-radius: 22px;
+padding: 0.5em;
+margin :0.5em;
   img {
-      width: 16px;
+      width: 20px;
     }
 `
 
@@ -85,28 +86,38 @@ const Image = styled.img`
   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,15 +145,15 @@ const ArticlePage = (initialArticle) => {
             : preview.favoritesCount + 1,
         });
       } else {
-        await axios.post(
+       await axios.post(
           `${SERVER_BASE_URL}/articles/${slug}/favorite`,
           {},
           {
             headers: {
               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 (
     <div className="article-page">
 
@@ -234,11 +244,14 @@ const ArticlePage = (initialArticle) => {
       </StickyRight>
     </div>
   );
-};
+}else{
+  return (<div></div>)
+}
+}
 
 ArticlePage.getInitialProps = async ({ query: { pid } }) => {
-  const { data } = await ArticleAPI.get(pid);
-  return data;
+  let id = pid
+  return { id };
 };
 
 export default ArticlePage;

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 };
 };