feature: add conditional logic for menu display (#61)

* feature: add conditional logic for menu display * style: adjust width
daodaoedu · Jul 20, 2024 · 26a8252 · 26a8252
1 parent 277a8fe
commit 26a8252
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 39 deletions.
diff --git a/components/Profile/MyGroup/GroupCard.jsx b/components/Profile/MyGroup/GroupCard.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
 import Menu from '@mui/material/Menu';
 import IconButton from '@mui/material/IconButton';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
@@ -30,20 +31,25 @@ function GroupCard({
   description,
   area,
   isGrouping,
+  userId,
   updatedDate,
   onUpdateGrouping,
   onDeleteGroup,
 }) {
+  const me = useSelector((state) => state.user);
   const router = useRouter();
   const [anchorEl, setAnchorEl] = useState(null);
+  const isEnabledMutation = me._id === userId;
 
   const apiUpdateGrouping = useMutation(`/activity/${_id}`, {
     method: 'PUT',
+    enabled: isEnabledMutation,
     onSuccess: onUpdateGrouping,
   });
 
   const apiDeleteGroup = useMutation(`/activity/${_id}`, {
     method: 'DELETE',
+    enabled: isEnabledMutation,
     onSuccess: onDeleteGroup,
   });
 
@@ -95,9 +101,11 @@ function GroupCard({
               ) : (
                 <StyledStatus className="finished">已結束</StyledStatus>
               )}
-              <IconButton size="small" onClick={handleMenu}>
-                <MoreVertOutlinedIcon />
-              </IconButton>
+              {isEnabledMutation && (
+                <IconButton size="small" onClick={handleMenu}>
+                  <MoreVertOutlinedIcon />
+                </IconButton>
+              )}
             </StyledFlex>
           </StyledFooter>
         </StyledContainer>

diff --git a/components/Profile/MyGroup/LoadingCard.jsx b/components/Profile/MyGroup/LoadingCard.jsx
@@ -18,7 +18,12 @@ function LoadingCard() {
   return (
     <StyledGroupCard href="#">
       <StyledImageWrapper>
-        <Skeleton variant="rounded" width={240} height={122} animation="wave" />
+        <Skeleton
+          variant="rounded"
+          width="100%"
+          height={122}
+          animation="wave"
+        />
       </StyledImageWrapper>
       <StyledContainer>
         <StyledTitle>

diff --git a/components/Profile/MyGroup/index.jsx b/components/Profile/MyGroup/index.jsx
@@ -23,7 +23,7 @@ const StyledGroupsWrapper = styled.div`
   ${(props) => props.sx}
 `;
 
-const MyGroup = ({ hasTitle = true, sx, userId }) => {
+const MyGroup = ({ title, sx, userId }) => {
   const [response, setResponse] = useState(null);
   const { isFetching } = useFetch(`/activity/user/${userId}`, {
     enabled: !!userId,
@@ -76,15 +76,15 @@ const MyGroup = ({ hasTitle = true, sx, userId }) => {
 
   return (
     <StyledGroupsWrapper sx={sx}>
-      {hasTitle && (
+      {title && (
         <Typography
           sx={{ fontSize: '22px', color: '#536166', fontWeight: 700, mb: 1 }}
         >
-          我的揪團
+          {title}
         </Typography>
       )}
 
-      <Box maxWidth="560px" width="100%">
+      <Box width="100%">
         {isFetching ? (
           <LoadingCard />
         ) : Array.isArray(response?.data) && response.data.length ? (
@@ -93,6 +93,7 @@ const MyGroup = ({ hasTitle = true, sx, userId }) => {
               {index > 0 && <StyledDivider />}
               <GroupCard
                 {...item}
+                userId={userId}
                 onUpdateGrouping={() => handleUpdateGrouping(item._id)}
                 onDeleteGroup={() => handleDeleteGroup(item._id)}
               />

diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx
@@ -184,7 +184,6 @@ const Profile = ({
               content: (
                 <MyGroup
                   userId={_id}
-                  hasTitle={false}
                   sx={{
                     maxWidth: '100%',
                     padding: '40px 30px',

diff --git a/hooks/useMutation.jsx b/hooks/useMutation.jsx
@@ -4,14 +4,16 @@ import { useRouter } from 'next/navigation';
 import { BASE_URL } from '@/constants/common';
 import { userLogout } from '@/redux/actions/user';
 
-const useMutation = (url, { method, onSuccess, onError } = {}) => {
+const useMutation = (url, { method, enabled = true, onSuccess, onError } = {}) => {
   const { token } = useSelector((state) => state.user);
   const dispatch = useDispatch();
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);
 
   const mutate = (values) => {
+    if (!enabled) return;
+
     const endpoint = url.startsWith('http') ? url : `${BASE_URL}${url}`;
     const headers = {
       'Content-Type': 'application/json',

diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx
@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
 import styled from '@emotion/styled';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -12,32 +13,13 @@ import Navigation from '@/shared/components/Navigation_v2';
 import MyGroup from '@/components/Profile/MyGroup';
 import AccountSetting from '@/components/Profile/Accountsetting';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { useSelector } from 'react-redux';
 
 const HomePageWrapper = styled.div`
   --section-height: calc(100vh - 80px);
   --section-height-offset: 80px;
   background: linear-gradient(0deg, #f3fcfc, #f3fcfc), #f7f8fa;
 `;
 
-const tabs = [
-  {
-    id: 'person-setting',
-    tabLabel: '個人資料編輯',
-    view: <Edit />,
-  },
-  {
-    id: 'my-group',
-    tabLabel: '我的揪團',
-    view: <MyGroup />,
-  },
-  {
-    id: 'account-setting',
-    tabLabel: '帳號設定',
-    view: <AccountSetting />,
-  },
-];
-
 const StyledTab = styled(Tab)(({ isActive, mobileScreen }) => ({
   width: `${mobileScreen ? '50%' : '100%'}`,
   color: '#536166',
@@ -81,14 +63,23 @@ const ProfilePage = () => {
   const router = useRouter();
   const mobileScreen = useMediaQuery('(max-width: 767px)');
   const me = useSelector((state) => state.user);
-  const tabsItems = tabs.map((tab) =>
-    tab.id === 'my-group'
-      ? {
-          ...tab,
-          view: <MyGroup userId={me?._id} />,
-        }
-      : tab,
-  );
+  const tabs = [
+    {
+      id: 'person-setting',
+      tabLabel: '個人資料編輯',
+      view: <Edit />,
+    },
+    {
+      id: 'my-group',
+      tabLabel: '我的揪團',
+      view: <MyGroup title="我的揪團" userId={me?._id} />,
+    },
+    {
+      id: 'account-setting',
+      tabLabel: '帳號設定',
+      view: <AccountSetting />,
+    },
+  ];
 
   const [value, setValue] = useState(() => {
     const id = new URLSearchParams(location.search).get('id');
@@ -124,6 +115,7 @@ const ProfilePage = () => {
           display: 'flex',
           justifyContent: 'center',
           marginTop: '60px',
+          minHeight: 'calc(100vh - 518px)',
           '@media (max-width: 767px)': {
             flexDirection: 'column',
             marginTop: '0',
@@ -166,8 +158,8 @@ const ProfilePage = () => {
             ))}
           </Tabs>
         </Box>
-        <Box sx={{ flex: 1, maxWidth: '672px' }}>
-          {tabsItems.map((tab, index) => (
+        <Box sx={{ flex: 1, maxWidth: '720px' }}>
+          {tabs.map((tab, index) => (
             <TabPanel key={tab.id} value={value} index={index}>
               {tab.view}
             </TabPanel>