Merge branch 'renovate/sst-2.x' of github.com:cuculus-dev/cuculus int…

…o renovate/sst-2.x # Conflicts: # package-lock.json
cuculus-dev · Mar 18, 2024 · d4ef802 · d4ef802
2 parents 373ab4b + a3ee3d8
commit d4ef802
Show file tree

Hide file tree

Showing 19 changed files with 417 additions and 440 deletions.
diff --git a/src/app/(menu)/(private)/invitations/_components/Invitations.tsx b/src/app/(menu)/(private)/invitations/_components/Invitations.tsx
@@ -38,7 +38,7 @@ const StyledItem = styled(ListItem)`
 `;
 
 export default function Invitations() {
-  const { data, mutate } = useInvitations();
+  const { data } = useInvitations();
   const { trigger, isMutating } = useInvitationCreate();
   const [invitations, setInvitations] = useState<Array<Invitation>>([]);
   const [succeedMessage, setSucceedMessage] = useState('');
@@ -65,7 +65,6 @@ export default function Invitations() {
 
   const handleClick = () => {
     void trigger().then(() => {
-      void mutate();
       setSucceedMessage('発行完了しました！');
     });
   };

diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/EditProfileButton.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/EditProfileButton.tsx
@@ -3,7 +3,7 @@
 import CapsuleButton from '@/app/_components/button/CapsuleButton';
 import ProfileSettingModal from '@/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal';
 import { useState } from 'react';
-import { useProfile } from '@/swr/client/auth';
+import { useProfile } from '@/swr/client/account';
 
 export function EditProfileButton() {
   const text = 'プロフィールを編集';

diff --git a/src/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal.tsx b/src/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal.tsx
@@ -23,7 +23,7 @@ import UserIcon from '@/app/(menu)/(public)/[username]/_components/elements/User
 import Cropper, { Area, Point } from 'react-easy-crop';
 import CapsuleButton from '@/app/_components/button/CapsuleButton';
 import { getCroppedImg } from '@/app/(menu)/(public)/[username]/_utils/cropImage';
-import { useProfileMutation } from '@/swr/client/profile';
+import { useProfileUpdate } from '@/swr/client/account';
 import CapsuleLoadingButton from '@/app/_components/button/CapsuleLoadingButton';
 
 const HEADER_HEIGHT = '50px';
@@ -218,7 +218,7 @@ export default function ProfileSettingModal({
   const [displayName, setDisplayName] = useState<string>(initDisplayName);
   const [bio, setBio] = useState<string>(initBio);
   const [iconSrc, setIconSrc] = useState<string | undefined>(undefined);
-  const { trigger, isMutating } = useProfileMutation();
+  const { trigger, isMutating } = useProfileUpdate();
 
   const [errorMessage, setErrorMesssage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');

diff --git a/src/app/(menu)/_components/menu/BottomMenu.tsx b/src/app/(menu)/_components/menu/BottomMenu.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import MobileBottomMenuLinkItem from '@/app/(menu)/_components/menu/elements/MobileBottomMenuLinkItem';
-import { useProfile } from '@/swr/client/auth';
+import { useProfile } from '@/swr/client/account';
 import {
   Home,
   HomeOutlined,

diff --git a/src/app/(menu)/_components/menu/SideMenu.tsx b/src/app/(menu)/_components/menu/SideMenu.tsx
@@ -16,7 +16,7 @@ import {
 import SideMenuAccountButton from '@/app/(menu)/_components/menu/elements/SideMenuAccountButton';
 import SideMenuPostButton from '@/app/(menu)/_components/menu/elements/SideMenuPostButton';
 import SideMenuLinkItem from '@/app/(menu)/_components/menu/elements/SideMenuLinkItem';
-import { useProfile } from '@/swr/client/auth';
+import { useProfile } from '@/swr/client/account';
 import LogoLink from '@/app/(menu)/_components/menu/elements/LogoLink';
 
 const Root = styled('div')`

diff --git a/src/app/(menu)/_components/timeline/elements/FavoriteButton.tsx b/src/app/(menu)/_components/timeline/elements/FavoriteButton.tsx
@@ -2,7 +2,7 @@
 
 import { IconButton, styled } from '@mui/material';
 import { Star } from '@mui/icons-material';
-import { usePostMutation } from '@/swr/client/post';
+import { useFavoriteUpdate } from '@/swr/client/post';
 import React from 'react';
 
 const Icon = styled(Star)<{ active: 'true' | 'false' }>`
@@ -23,12 +23,12 @@ export default function FavoriteButton({
   favorited,
   favoriteCount,
 }: Props) {
-  const { trigger } = usePostMutation(postId);
+  const { trigger } = useFavoriteUpdate(postId);
   const handleClick = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
     event.stopPropagation();
-    void trigger({ favorited: !favorited });
+    void trigger(!favorited);
   };
   return (
     <div aria-label={`${favoriteCount}件のお気に入り。お気に入りに追加する`}>

diff --git a/src/app/(menu)/_components/timeline/elements/RepostButton.tsx b/src/app/(menu)/_components/timeline/elements/RepostButton.tsx
@@ -2,7 +2,7 @@
 
 import { IconButton, styled } from '@mui/material';
 import { Sync } from '@mui/icons-material';
-import { usePostMutation } from '@/swr/client/post';
+import { useRepostCreate } from '@/swr/client/post';
 import React from 'react';
 
 const Icon = styled(Sync)<{ active: 'true' | 'false' }>`
@@ -17,12 +17,17 @@ type Props = {
 };
 
 export default function RepostButton({ postId, reposted, repostCount }: Props) {
-  const { trigger } = usePostMutation(postId);
+  const { trigger } = useRepostCreate(postId);
   const handleClick = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
   ) => {
     event.stopPropagation();
-    void trigger({ reposted: !reposted });
+    if (!reposted) {
+      void trigger();
+    } else {
+      // TODO リポスト解除
+      console.error('リポスト解除は未実装です。');
+    }
   };
   return (
     <div aria-label={`${repostCount}件のリポスト。リポストする`}>

diff --git a/src/app/_components/post/PostDialog.tsx b/src/app/_components/post/PostDialog.tsx
@@ -16,7 +16,7 @@ import {
   styled,
 } from '@mui/material';
 import { useState } from 'react';
-import { useHomeTimelineImmutable } from '@/swr/client/timeline';
+import { useHomeTimeline } from '@/swr/client/timeline';
 
 const Flex = styled('div')`
   display: flex;
@@ -51,7 +51,7 @@ export default function PostDialog({ fullScreen, open, close }: Props) {
   const [showConfirmCloseDialog, setShowConfirmCloseDialog] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
-  const { mutateLatest } = useHomeTimelineImmutable();
+  const { mutateLatest } = useHomeTimeline();
 
   // NOTE: 閉じきる前に微妙に空になるのが見えるので
   // それが嫌ならsetTimeout(unmount時にcb呼ぶ方法あるならそっち)で包む

diff --git a/src/app/_components/post/PostForm.tsx b/src/app/_components/post/PostForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import Editor from '@/app/_components/post/elements/Editor';
-import { useProfile } from '@/swr/client/auth';
+import { useProfile } from '@/swr/client/account';
 import { Avatar, Box, styled } from '@mui/material';
 
 // FIXME: レイアウト

diff --git a/src/app/_components/post/elements/SendPostButton.tsx b/src/app/_components/post/elements/SendPostButton.tsx
@@ -2,7 +2,7 @@
 
 import CapsuleButton from '@/app/_components/button/CapsuleButton';
 import { Send } from '@mui/icons-material';
-import { usePostSend } from '@/swr/client/post';
+import { usePostCreate } from '@/swr/client/post';
 
 interface Props {
   disabled: boolean;
@@ -21,7 +21,7 @@ export default function SendPostButton({
   onSucceed,
   onError,
 }: Props) {
-  const { trigger, isMutating } = usePostSend();
+  const { trigger, isMutating } = usePostCreate();
 
   const sendPost = async () => {
     await trigger({ createPost: { text: sendData.plainText } })

diff --git a/src/swr/README.md b/src/swr/README.md
@@ -1,8 +1,12 @@
-# @/swr
-SWRを使用したデータフェッチ関数置き場
+# swrディレクトリ
 
-## @/swr/client
-クライアントサイド(`'use client';`)で呼び出す用
+SWRを使用したhook関数置き場です。
+`key`にhook関数名を指定することで一意のキャッシュを作成しています。  
+共通のキャッシュを参照する際には元となるキーを指定すること。
 
-## @/swr/server
-サーバーサイドで呼び出す用
+## [client](./client)
+
+hook関数置き場です。  
+clientとserverで分けるつもりで作りましたが、serverで使えないのでclientしかありません。  
+
+ファイルはAPIのタグ単位で分けていますが、特にルールはありません。
diff --git a/src/swr/client/account.ts b/src/swr/client/account.ts
@@ -0,0 +1,81 @@
+import { accountsApi, usersApi } from '@/libs/cuculus-client';
+import { getAuthorizationHeader } from '@/libs/auth';
+import useSWR from 'swr';
+import { User } from '@cuculus/cuculus-api';
+import { useAuth } from '@/swr/client/auth';
+import { UserWithFollows } from '@cuculus/cuculus-api/dist/models';
+import useSWRMutation from 'swr/mutation';
+
+type SWRKey = {
+  key: string;
+  authId: number;
+};
+
+type UpdateRequest = {
+  name?: string;
+  bio?: string;
+  profileImage?: Blob;
+};
+
+/**
+ * 自身の情報を取得する
+ */
+export const useProfile = () => {
+  const { data: authId } = useAuth();
+  // 非ログイン時はキー値にnullを渡して実行させないようにする
+  const swrKey = authId ? { key: 'useProfile', authId } : null;
+  return useSWR<User | undefined, Error>(swrKey, async () => {
+    try {
+      return await usersApi.getMe({
+        headers: await getAuthorizationHeader(authId),
+      });
+    } catch (error) {
+      throw error;
+    }
+  });
+};
+
+/**
+ * プロフィール更新とプロフィール情報再取得
+ */
+export const useProfileUpdate = () => {
+  const { data: authId } = useAuth();
+  // 非ログイン時はキー値にnullを渡して実行させないようにする
+  const key = authId ? { key: 'useProfile', authId } : null;
+  return useSWRMutation<UserWithFollows, Error, SWRKey | null, UpdateRequest>(
+    key,
+    async (_, { arg: request }) => {
+      const headers = await getAuthorizationHeader(authId);
+
+      let user: UserWithFollows | undefined = undefined;
+
+      if (request.bio != undefined || request.name) {
+        user = await accountsApi.updateProfile(
+          {
+            updateProfile: { name: request.name, bio: request.bio },
+          },
+          {
+            headers: {
+              ...headers,
+              'Content-Type': 'application/json',
+            },
+          },
+        );
+      }
+      if (request.profileImage) {
+        user = await accountsApi.updateProfileImage(
+          { file: request.profileImage },
+          { headers },
+        );
+      }
+      if (user) {
+        return user;
+      } else {
+        throw new Error('更新に失敗しました。');
+      }
+    },
+    {
+      revalidate: true,
+    },
+  );
+};