rebase and update to graph blog api

src/components/blog/feed/index.tsx

@@ -1,16 +1,37 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { useFeed, FeedItemData } from "../wp";
 import { Post } from "./post";
 import { FilterControl } from "./filter-control";
 import { Spinner } from "../../spinner";
 import { SortMethodSelection, defaultSortMethod, SortMethod } from "./sorting";
+import { favoritPosts } from "../../../users_api/UserAPI";
 
 function PostList({ sortMethod }: { sortMethod: SortMethod<FeedItemData> }) {
+  const [favoritposts, setFavoritPosts] = useState([]);
+  const [loaded, setLoaded] = useState<boolean>(false);
   const { loading, error, data } = useFeed();
-  const [firstRenderDone, setFirstRenderDone] = React.useState(false);
+  const [firstRenderDone, setFirstRenderDone] = useState(false);
 
-  React.useEffect(() => {
+  const fetchFavorits = async () => {
+    let response;
+    try {
+      response = await favoritPosts();
+    } catch (error) {
+      setFavoritPosts([]);
+    }
+    // @ts-ignore
+    let slugs = response.slugs;
+    setFavoritPosts(JSON.parse(JSON.stringify(slugs)));
+    setLoaded(true);
+  };
+
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem("user");
+
+    if (loggedInUser) {
+      fetchFavorits();
+    }
     if (data) setFirstRenderDone(true);
   }, [data]);
 
@@ -26,15 +47,19 @@ function PostList({ sortMethod }: { sortMethod: SortMethod<FeedItemData> }) {
 
   if (loading && firstRenderDone) return <Spinner />;
 
-  return (
-    <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
-      {(items[0] ? (items as FeedItemData[]).sort(sortMethod.fn) : items).map(
-        (data, i) => (
-          <Post data={data} key={i} />
-        )
-      )}
-    </div>
-  );
+  if (loaded) {
+    return (
+      <div className="grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 md:gap-x-10 xl:gap-16 2xl:grid-cols-3">
+        {(items[0] ? (items as FeedItemData[]).sort(sortMethod.fn) : items).map(
+          (data, i) => (
+            <Post data={data} key={i} favorits={favoritposts} />
+          )
+        )}
+      </div>
+    );
+  }
+
+  return <Spinner />
 }
 
 export const Feed: React.FC = () => {

src/components/blog/feed/post/index.tsx

@@ -9,8 +9,10 @@ import { BookmarkButton } from "../../single/bookmark-button";
 import { DetailBar } from "./detail-bar";
 
 import styles from "./post.module.css";
+import { LatestPostData } from "../../wp/latest_post";
 
 export type ParsedPostData = {
+  slug: string;
   path: string;
   title: string;
   excerpt: string;
@@ -22,10 +24,11 @@ export type ParsedPostData = {
   tags?: TagData[];
 };
 
-export const Post: React.FC<{ data?: FeedItemData }> = ({ data }) => {
+export const Post: React.FC<{ data?: FeedItemData | LatestPostData, favorits: string[]}> = ({ data, favorits }) => {
   const parsedData = React.useMemo<ParsedPostData | undefined>(
     () =>
       data && {
+        slug: data.slug,
         path: `/blog/${data.slug}`,
         title: data.title,
         excerpt: data.excerpt,
@@ -84,7 +87,7 @@ export const Post: React.FC<{ data?: FeedItemData }> = ({ data }) => {
         </div>
       )}
       <div className="absolute right-1 -top-5">
-        <BookmarkButton disabled={!parsedData} />
+        <BookmarkButton slug={parsedData ? parsedData.slug : ""} disabled={!parsedData} posts={favorits} />
       </div>
     </div>
   );

src/components/blog/single/bookmark-button/index.tsx

@@ -1,20 +1,52 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import cn from "classnames";
 
 import { BookmarkIcon } from "./icon";
 
 import styles from "./bookmark.module.css";
+import { deFavorisePost, favorisePost } from "../../../../users_api/UserAPI";
 
 export const BookmarkButton: React.FC<{
   disabled?: boolean;
   onSolidBackground?: boolean;
-}> = ({ disabled, onSolidBackground }) => {
-  const [active, setActive] = React.useState(false);
+  slug: string;
+  posts: string[];
+}> = ({ disabled, onSolidBackground, slug, posts }) => {
+  const [active, setActive] = useState(false);
+
+  const updateFavorise = async (slug: string) => {
+    let favorite_blogpost = {
+      slug,
+    };
+    if (active) {
+      try {
+        await deFavorisePost(favorite_blogpost);
+      } catch (error) {
+      }
+    } else {
+      try {
+        await favorisePost(favorite_blogpost);
+      } catch (error) {
+      }
+    }
+  };
+
+
+  useEffect(() => {
+    if (posts.includes(slug)) {
+      setActive(true);
+    }
+  }, [posts, slug]);
+
+
 
   return (
     <button
       className={cn(styles.button, "group", active && styles.active)}
-      onClick={() => setActive(!active)}
+      onClick={() => {
+        setActive(!active);
+        updateFavorise(slug);
+      }}
       disabled={disabled}
     >
       <div className="pointer-events-none">

src/components/blog/single/heading.tsx

@@ -4,19 +4,19 @@ import type { PostData } from "../wp";
 import { PostDate } from "./date";
 import { BookmarkButton } from "./bookmark-button";
 
-export const PostHeading: React.FC<PostData> = ({ post }) => (
+export const PostHeading: React.FC<{ post: PostData, favorits: string[]}> = ({ post, favorits }) => (
   <div className="flex max-w-full">
     <div className="flex-1 mr-4">
       <div className="mb-2">
-        <PostDate date={new Date(post.date)} />
+        <PostDate date={new Date(post.post.date)} />
       </div>
       <h1
         className="text-xl font-bold sm:font-normal sm:text-3xl uppercase text-em3 leading-snug md:leading-snug mb-16"
-        dangerouslySetInnerHTML={{ __html: post.title }}
+        dangerouslySetInnerHTML={{ __html: post.post.title }}
       />
     </div>
     <div className="flex-shrink-0">
-      <BookmarkButton onSolidBackground={true} />
+      <BookmarkButton onSolidBackground={true} slug={post.post.slug} posts={favorits} />
     </div>
   </div>
 );

src/components/blog/single/index.tsx

@@ -1,16 +1,36 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { SEO } from "../../seo";
 import { usePost } from "../wp";
 import { PostHeading } from "./heading";
 import { PostContent } from "./content";
 import { Spinner } from "../../spinner";
+import { favoritPosts } from "../../../users_api/UserAPI";
 
 export const SinglePost: React.FC = () => {
+  const [favoritposts, setFavoritPosts] = useState([]);
   const { slug } = useParams<{ slug: string }>();
   const { loading, error, data } = usePost(slug);
 
+  useEffect(() => {
+    const loggedInUser = localStorage.getItem('user');
+    if (loggedInUser) {
+      const fetchFavorits = async () => {
+        let response;
+        try {
+          response = await favoritPosts()
+        } catch(error) {
+          setFavoritPosts([])
+        }
+        // @ts-ignore
+        let slugs = response.slugs
+        setFavoritPosts(JSON.parse(JSON.stringify(slugs)))
+      }
+      fetchFavorits();
+    }
+  }, [])
+
   return (
     <div className="center-box max-w-2xl">
       {loading ? (
@@ -20,7 +40,7 @@ export const SinglePost: React.FC = () => {
       ) : (
         <>
           <SEO title={data.post.title} />
-          <PostHeading post={data.post} />
+          <PostHeading post={data} favorits={favoritposts} />
           <PostContent post={data.post} />
         </>
       )}