Merge pull request #85 from kc3hack/RAIT-09/develop

Rait 09/develop

Author: RAIT-09

frontend/src/app/timeline/actions/countMiyabi.ts

@@ -0,0 +1,59 @@
+// サーバアクション
+'use server';
+
+import { hc } from 'hono/client';
+import { AppType } from '../../../../../backend/src/index';
+
+const client = hc<AppType>(process.env.BACKEND_URL ?? 'http://localhost:8080');
+
+/**
+ * 雅を増やす非同期関数
+ * @async
+ * @function addMiyabi
+ * @param {Object} params - 雅追加のためのパラメータオブジェクト
+ * @param {string} params.iconUrl - ユーザのアイコン画像URL
+ * @param {string} params.postId - 雅する投稿のID
+ */
+export const addMiyabi = async ({ iconUrl, postId }: { iconUrl: string; postId: string }) => {
+  try {
+    const res = await client.miyabi.$post({
+      json: {
+        post_id: postId,
+        my_icon: iconUrl,
+      },
+    });
+
+    // エラーがある場合はログを出力
+    if (!res.ok) {
+      console.log(res.statusText);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+/**
+ * 雅を減らす非同期関数
+ * @async
+ * @function removeMiyabi
+ * @param {Object} params - 雅追加のためのパラメータオブジェクト
+ * @param {string} params.iconUrl - ユーザのアイコン画像URL
+ * @param {string} params.postId - 雅する投稿のID
+ */
+export const removeMiyabi = async ({ iconUrl, postId }: { iconUrl: string; postId: string }) => {
+  try {
+    const res = await client.miyabi.$delete({
+      json: {
+        post_id: postId,
+        my_icon: iconUrl,
+      },
+    });
+
+    // エラーがある場合はログを出力
+    if (!res.ok) {
+      console.log(res.statusText);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};

frontend/src/app/timeline/actions/deletePost.ts

@@ -0,0 +1,45 @@
+// サーバアクション
+'use server';
+
+import { hc } from 'hono/client';
+import { AppType } from '../../../../../backend/src/index';
+
+const client = hc<AppType>(process.env.BACKEND_URL ?? 'http://localhost:8080');
+
+/**
+ * 投稿データを削除する非同期関数
+ * @async
+ * @function deletePost
+ * @param {Object} params - 投稿データ取得のためのパラメータオブジェクト
+ * @param {string} params.iconUrl - ユーザのアイコン画像URL
+ * @param {string} params.postId - 削除する投稿のID
+ * @returns {Promise<boolean>} 結果を返すPromise．
+ */
+const deletePost = async ({
+  iconUrl,
+  postId,
+}: {
+  iconUrl: string;
+  postId: string;
+}): Promise<boolean> => {
+  try {
+    const res = await client.post.$delete({
+      json: {
+        user_icon: iconUrl,
+        post_id: postId,
+      },
+    });
+
+    // エラーがある場合はログを出力
+    if (!res.ok) {
+      console.log(res.statusText);
+      return false;
+    }
+    return true;
+  } catch (error) {
+    console.error(error);
+    return false;
+  }
+};
+
+export default deletePost;

frontend/src/app/timeline/actions/fetchPosts.ts

@@ -34,7 +34,9 @@ const fetchPosts = async ({
         post_id: offsetId,
       },
     });
-    console.log(`Loading more Posts... limit: ${limit}, offsetId: ${offsetId}`);
+    console.log(
+      `Loading more Posts...\nlimit: ${limit}\niconUrl: ${iconUrl}\noffsetId: ${offsetId}`
+    );
 
     // エラーがある場合は空の配列を返す
     if (!res.ok) {
@@ -44,7 +46,6 @@ const fetchPosts = async ({
 
     const json = await res.json();
     return json.posts.map((post) => ({
-      ...post,
       id: post.id,
       tanka: post.tanka,
       original: post.original,

frontend/src/app/timeline/page.tsx

@@ -13,13 +13,14 @@ import { useSession } from 'next-auth/react';
 import LoginDialog from '@/components/LoginDialog';
 import { useRouter } from 'next/navigation';
 
-const LIMIT = 10;
+const LIMIT = 10; // 一度に取得する投稿数
+const MAX = 100; // タイムラインに表示できる最大投稿数
 
 const Timeline = () => {
   // 投稿データの配列
   const [posts, setPosts] = useState<PostTypes[]>([]);
   // 投稿取得時のオフセットID
-  const [offsetId, setOffsetId] = useState('');
+  const offsetIdRef = useRef('');
   // データ取得中かどうかのフラグ
   const [isLoading, setIsLoading] = useState(false);
   // これ以上取得できる投稿があるかのフラグ
@@ -36,6 +37,8 @@ const Timeline = () => {
 
   //IntersectionObserverを保持するためのref
   const observer = useRef<IntersectionObserver | null>(null);
+  // 投稿取得の重複実行を防ぐためのref
+  const isFetchingRef = useRef(false);
 
   /**
    * 追加の投稿データを取得し，状態を更新する非同期関数のCallback Ref
@@ -44,16 +47,24 @@ const Timeline = () => {
    * @returns {Promise<void>} 投稿データの取得と状態更新が完了するPromise
    */
   const loadMorePosts = useCallback(async () => {
+    if (isFetchingRef.current) return;
+    isFetchingRef.current = true;
     setIsLoading(true);
     // 投稿データを取得
     const newPosts = await fetchPosts({
       limit: LIMIT,
-      iconUrl: session.data?.user?.id,
-      offsetId: offsetId,
+      iconUrl: session.data?.user?.image ?? '',
+      offsetId: offsetIdRef.current,
     });
     if (newPosts && newPosts.length > 0) {
-      setPosts((prevPosts) => [...prevPosts, ...newPosts]);
-      setOffsetId(() => newPosts[newPosts.length - 1].id);
+      setPosts((prevPosts) => {
+        const updatedPosts = [...prevPosts, ...newPosts];
+        if (updatedPosts.length >= MAX) {
+          setHasMore(false);
+        }
+        return updatedPosts;
+      });
+      offsetIdRef.current = newPosts[newPosts.length - 1].id;
       // 取得した投稿数がLIMIT未満の場合は，これ以上取得できる投稿は無い．
       if (newPosts.length < LIMIT) {
         setHasMore(false);
@@ -63,7 +74,8 @@ const Timeline = () => {
       setHasMore(false);
     }
     setIsLoading(false);
-  }, [offsetId]);
+    isFetchingRef.current = false;
+  }, [session.data?.user?.image]);
 
   // ターゲットの要素を監視するためのcallback ref
   const targetRef = useCallback(
@@ -94,6 +106,11 @@ const Timeline = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 見かけ上の投稿を削除する関数
+  const deletePost = (postId: string) => {
+    setPosts((prevPosts) => prevPosts.filter((post) => post.id !== postId));
+  };
+
   return (
     <div className='relative min-h-screen'>
       {/* ヘッダ */}
@@ -117,10 +134,10 @@ const Timeline = () => {
       <div className='pt-12'>
         <div className='relative mx-auto max-w-lg'>
           <SideMenu className='fixed top-16 hidden -translate-x-full lg:block' />
-          <PostList posts={posts} className='mx-auto max-w-sm lg:max-w-lg' />
+          <PostList posts={posts} className='mx-auto max-w-sm lg:max-w-lg' onDelete={deletePost} />
           {isLoading && <p className='py-3 text-center'>投稿を取得中...</p>}
           <div ref={targetRef} className='h-px' />
-          {!hasMore && <p className='py-3 text-center'>これ以上投稿はありません</p>}
+          {!hasMore && <p className='py-3 text-center'>これ以上投稿を取得できません。</p>}
         </div>
       </div>
 
@@ -146,7 +163,7 @@ const Timeline = () => {
       )}
 
       {/* ログイン確認ダイアログ表示が有効の場合，ダイアログを表示する */}
-      {loginDialogOpen && <LoginDialog isOpen={loginDialogOpen} setIsOpen={setLoginDialogOpen} />}
+      <LoginDialog isOpen={loginDialogOpen} setIsOpen={setLoginDialogOpen} />
     </div>
   );
 };

frontend/src/components/GifButton.tsx

@@ -9,6 +9,7 @@ export interface GifButtonProps {
   afterSrc: string;
   animationDuration?: number;
   initialIsClicked?: boolean;
+  isAnimationDisabled?: boolean;
   onClick?: () => void;
   onCancel?: () => void;
   className?: string;
@@ -21,6 +22,7 @@ const GifButton = ({
   afterSrc,
   animationDuration,
   initialIsClicked,
+  isAnimationDisabled = false,
   onClick,
   onCancel,
   className,
@@ -32,6 +34,7 @@ const GifButton = ({
   const [isAnimationPlaying, setIsAnimationPlaying] = useState(false);
 
   const clickButton = () => {
+    if (isAnimationDisabled) return;
     setIsAnimationPlaying(true);
     setTimeout(() => {
       setIsAnimationPlaying(false);
@@ -40,6 +43,7 @@ const GifButton = ({
   };
 
   const cancelButton = () => {
+    if (isAnimationDisabled) return;
     setIsAnimationPlaying(false);
     setIsClicked(false);
   };

frontend/src/components/MiyabiButton.tsx

@@ -6,6 +6,7 @@ interface MiyabiButtonProps {
   size?: 'small' | 'medium' | 'large';
   className?: string;
   initialIsClicked?: boolean;
+  isAnimationDisabled?: boolean;
   onClick?: () => void;
   onCancel?: () => void;
 }
@@ -16,6 +17,7 @@ const MiyabiButton = ({
   onCancel,
   className,
   initialIsClicked = false,
+  isAnimationDisabled = false,
 }: MiyabiButtonProps) => {
   return (
     <GifButton
@@ -27,6 +29,7 @@ const MiyabiButton = ({
       initialIsClicked={initialIsClicked}
       onClick={onClick}
       onCancel={onCancel}
+      isAnimationDisabled={isAnimationDisabled}
       className={`${className} scale-150 hover:scale-[1.6]`}
     />
   );