Merge pull request #135 from cuculus-dev/feature/issues-112

#128 指摘事項修正
cuculus-dev · Dec 20, 2023 · 5a31eb3 · 5a31eb3
2 parents c2f92f0 + 850808a
commit 5a31eb3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 49 deletions.
diff --git a/src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx b/src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx
@@ -2,9 +2,9 @@
 
 import { IconButton } from '@/app/_components/button/IconButton';
 import PostDialog from '@/app/_components/post/PostDialog';
-import { useProfile } from '@/swr/client/auth';
+import { useAuth } from '@/swr/client/auth';
 import { Send } from '@mui/icons-material';
-import { Box, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 
@@ -33,37 +33,38 @@ const StyledButton = styled(IconButton)`
   /* FIXME: IconButtonのvariant=containedで色つかない問題が解消したら消す */
   color: white;
   background-color: #007bbb;
+
   :hover {
     background-color: #007bbb;
   }
 `;
 
 export default function MobileOpenPostDialogButton() {
-  const [getOpenDialog, setOpenDialog] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
+  const { data: auth } = useAuth();
+
+  const excludePaths = ['/settings', '/invitations', '/messages'];
+  const pathname = usePathname();
 
-  const renderablePaths = ['/home', '/search', '/notifications'];
-  const renderable = renderablePaths.includes(usePathname() as string);
-  const { data: profile } = useProfile();
+  if (!auth || (pathname && excludePaths.includes(pathname))) {
+    return null;
+  }
 
   return (
     <>
-      {profile && renderable && (
-        <Box>
-          <StyledButton
-            variant="contained"
-            color="primary"
-            onClick={() => setOpenDialog(true)}
-          >
-            <Send />
-          </StyledButton>
+      <StyledButton
+        variant="contained"
+        color="primary"
+        onClick={() => setOpenDialog(true)}
+      >
+        <Send />
+      </StyledButton>
 
-          <PostDialog
-            fullScreen
-            open={getOpenDialog}
-            close={() => setOpenDialog(false)}
-          />
-        </Box>
-      )}
+      <PostDialog
+        fullScreen
+        open={openDialog}
+        close={() => setOpenDialog(false)}
+      />
     </>
   );
 }
diff --git a/src/app/(menu)/_components/menu/elements/SideMenuAccountButton.tsx b/src/app/(menu)/_components/menu/elements/SideMenuAccountButton.tsx
@@ -87,7 +87,7 @@ const SideMenuAccountButton = ({
   userName,
   profileAvatarImageUrl,
 }: Props) => {
-  const [getShowAccountMenu, setShowAccountMenu] = useState(false);
+  const [showAccountMenu, setShowAccountMenu] = useState(false);
   const accountMenuRef = useRef(null);
 
   return (
@@ -106,7 +106,7 @@ const SideMenuAccountButton = ({
       </HFlex>
 
       <Menu
-        open={getShowAccountMenu}
+        open={showAccountMenu}
         onClose={() => setShowAccountMenu(false)}
         anchorEl={accountMenuRef.current}
         anchorOrigin={{

diff --git a/src/app/(menu)/_components/menu/elements/SideMenuPostButton.tsx b/src/app/(menu)/_components/menu/elements/SideMenuPostButton.tsx
@@ -35,7 +35,7 @@ const Label = styled(`span`)`
   }
 `;
 const SideMenuPostButton = () => {
-  const [getShowPostDialog, setShowPostDialog] = useState(false);
+  const [showPostDialog, setShowPostDialog] = useState(false);
 
   return (
     <>
@@ -47,7 +47,7 @@ const SideMenuPostButton = () => {
       </Wrapper>
 
       <PostDialog
-        open={getShowPostDialog}
+        open={showPostDialog}
         close={() => setShowPostDialog(false)}
       />
     </>

diff --git a/src/app/_components/post/PostDialog.tsx b/src/app/_components/post/PostDialog.tsx
@@ -47,11 +47,10 @@ interface Props {
 }
 
 export default function PostDialog({ fullScreen, open, close }: Props) {
-  const [getContent, setContent] = useState('');
-  const [getShowConfirmCloseDialog, setShowConfirmCloseDialog] =
-    useState(false);
-  const [getErrorMessage, setErrorMesssage] = useState('');
-  const [getSucceedMessage, setSucceedMessage] = useState('');
+  const [content, setContent] = useState('');
+  const [showConfirmCloseDialog, setShowConfirmCloseDialog] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
   const { mutateLatest } = useHomeTimelineImmutable();
 
   // NOTE: 閉じきる前に微妙に空になるのが見えるので
@@ -64,55 +63,51 @@ export default function PostDialog({ fullScreen, open, close }: Props) {
       <Dialog
         fullScreen={fullScreen}
         open={open}
-        onClose={() => (getContent.length ? confirmAndClose() : close())}
+        onClose={() => (content.length ? confirmAndClose() : close())}
       >
         <StyledDialogTitle>
           <HFlex>
             <IconButton
-              onClick={() => (getContent.length ? confirmAndClose() : close())}
+              onClick={() => (content.length ? confirmAndClose() : close())}
             >
               <Close />
             </IconButton>
           </HFlex>
         </StyledDialogTitle>
 
         <StyledDialogContent>
-          <PostForm
-            getContent={getContent}
-            setContent={setContent}
-            focusEditor
-          />
+          <PostForm getContent={content} setContent={setContent} focusEditor />
         </StyledDialogContent>
 
         <StyledDialogActions>
           <SendPostButton
-            disabled={!getContent.length}
-            sendData={{ plainText: getContent }}
+            disabled={!content.length}
+            sendData={{ plainText: content }}
             onSucceed={() => {
-              setSucceedMessage('送信しました。');
+              setSuccessMessage('送信しました。');
               clearContent();
               void mutateLatest();
               close();
             }}
             onError={(e) => {
               // TODO: リリース前に消す？
               console.error(e);
-              setErrorMesssage('送信に失敗しました。');
+              setErrorMessage('送信に失敗しました。');
             }}
           />
         </StyledDialogActions>
 
         <Snackbar
-          open={!!getErrorMessage.length}
-          onClose={() => setErrorMesssage('')}
+          open={!!errorMessage.length}
+          onClose={() => setErrorMessage('')}
           autoHideDuration={2_000}
         >
-          <Alert severity="error">{getErrorMessage}</Alert>
+          <Alert severity="error">{errorMessage}</Alert>
         </Snackbar>
       </Dialog>
 
       <ConfirmClosePostDialogDialog
-        open={getShowConfirmCloseDialog}
+        open={showConfirmCloseDialog}
         close={() => setShowConfirmCloseDialog(false)}
         actions={[
           {
@@ -127,11 +122,11 @@ export default function PostDialog({ fullScreen, open, close }: Props) {
       />
 
       <Snackbar
-        open={!!getSucceedMessage.length}
-        onClose={() => setSucceedMessage('')}
+        open={!!successMessage.length}
+        onClose={() => setSuccessMessage('')}
         autoHideDuration={2_000}
       >
-        <Alert severity="success">{getSucceedMessage}</Alert>
+        <Alert severity="success">{successMessage}</Alert>
       </Snackbar>
     </Box>
   );