80481 wip fb

packages/app/src/components/PageReactionButtons.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useState, useEffect } from 'react';
+import LikeButtons from './LikeButtons';
+import BookmarkButton from './BookmarkButton';
+import { apiv3Get } from '../client/util/apiv3-client';
+
+
+type Props = {
+  pageId: string,
+  currentUserId: string,
+}
+
+const PageReactionButtons : React.FC<Props> = (props: Props) => {
+  const { pageId, currentUserId } = props;
+  const LikeButtonsTypeAny: any = LikeButtons;
+
+
+  const [sumOflikers, setSumOfLikers] = useState(0);
+  const [likers, setLikers] = useState<string[]>([]);
+  const [isLiked, setIsLiked] = useState(true);
+
+  // component did mount
+  useEffect(() => {
+    const f = async() => {
+      const {
+        data: { likerIds, sumOfLikers, isLiked },
+      } = await apiv3Get('/page/info', { _id: pageId });
+
+      setSumOfLikers(sumOfLikers);
+      setLikers(likerIds);
+      setIsLiked(isLiked);
+    };
+    f();
+  }, []);
+
+  const onChangeInvoked = () => {
+    setSumOfLikers(sumOflikers => (isLiked ? sumOflikers - 1 : sumOflikers + 1));
+    setLikers(likerIds => (isLiked ? likerIds.filter(id => id !== currentUserId) : [...likerIds, currentUserId]));
+    setIsLiked(isLiked => !isLiked);
+  };
+
+  return (
+    <>
+      <span>
+        <LikeButtonsTypeAny onChangeInvoked={onChangeInvoked} pageId={pageId} likers={likers} sumOfLikers={sumOflikers} isLiked={isLiked}></LikeButtonsTypeAny>
+      </span>
+      <span>
+        {/*
+          TODO:
+          once 80335 is done, merge 77543 branch(parent of 80335) into 77524.
+          (pageContainer dependencies in bookmark, delete modal, rename etc are removed)
+          then place BookMarkButton here
+          TASK: https://estoc.weseek.co.jp/redmine/issues/81076
+        */}
+        {/* <BookmarkButton></BookmarkButton> */}
+      </span>
+    </>
+  );
+};
+
+export default PageReactionButtons;