fix: Add userId in MyGroup props and Modify UserCard

daodaoedu · Apr 8, 2024 · dcb0e12 · dcb0e12
1 parent d3aab02
commit dcb0e12
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/components/Profile/MyGroup/index.jsx b/components/Profile/MyGroup/index.jsx
@@ -25,10 +25,13 @@ const StyledGroupsWrapper = styled.div`
   ${(props) => props.sx}
 `;
 
-const MyGroup = ({ hasTitle = true, sx }) => {
+const MyGroup = ({ hasTitle = true, sx, userId }) => {
+  if (!userId) {
+    return <Typography py={7.5}>趕快發起屬於你的揪團吧～</Typography>;
+  }
+
   const [response, setResponse] = useState(null);
-  const me = useSelector((state) => state.user);
-  const { isFetching } = useFetch(`${GROUP_API_URL}/user/${me?._id}`, {
+  const { isFetching } = useFetch(`${GROUP_API_URL}/user/${userId}`, {
     onSuccess: setResponse,
   });
 

diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx
@@ -228,10 +228,10 @@ function UserCard({
           </StyledProfileTitle>
 
           <StyledProfileLocation>
-            <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />{' '}
+            <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />
             {location
               ? location.length >= 2
-                ? locations.join('').replace('台灣', '').replace('null', '')
+                ? locations.join('').replace('台灣', '').replaceAll('null', '')
                 : locations.join('')
               : '-'}
           </StyledProfileLocation>

diff --git a/components/Profile/UserTabs/UserInfoBasic.jsx b/components/Profile/UserTabs/UserInfoBasic.jsx
@@ -19,7 +19,7 @@ function UserInfoBasic({ description = '', wantToDoList = [], share = '' }) {
         <p>簡介</p>
         <div>
           {description ? (
-            description.split('\n').map((d) => <span>{d}</span>)
+            description.split('\n').map((d) => <span key={d}>{d}</span>)
           ) : (
             <span>尚未填寫</span>
           )}

diff --git a/components/Profile/UserTabs/index.jsx b/components/Profile/UserTabs/index.jsx
@@ -29,6 +29,7 @@ const UserTabs = ({ panels = [] }) => {
             {panels.length > 0 &&
               panels.map((panel) => (
                 <Tab
+                  key={panel.id}
                   style={{ flexGrow: 1 }}
                   label={panel.title}
                   value={panel.id}
@@ -38,7 +39,7 @@ const UserTabs = ({ panels = [] }) => {
         </StyledTabContextBox>
         {panels.length > 0 &&
           panels.map((panel) => (
-            <TabPanel value={panel.id} sx={{ padding: '0' }}>
+            <TabPanel key={panel.id} value={panel.id} sx={{ padding: '0' }}>
               {panel.content}
             </TabPanel>
           ))}

diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx
@@ -53,6 +53,7 @@ const ROLELIST = mapToTable(ROLE);
 const EDUCATION_STAGE_TABLE = mapToTable(EDUCATION_STAGE);
 
 const Profile = ({
+  _id,
   name,
   email,
   photoURL,
@@ -182,9 +183,12 @@ const Profile = ({
               title: '發起的揪團',
               content: (
                 <MyGroup
+                  userId={_id}
+                  hasTitle={false}
                   sx={{
                     maxWidth: '100%',
                     padding: '40px 30px',
+                    alignItems: 'flex-start',
                     '@media (max-width: 767px)': {
                       padding: '30px',
                     },

diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx
@@ -12,6 +12,7 @@ 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);
@@ -79,6 +80,16 @@ function a11yProps(index) {
 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 [value, setValue] = useState(() => {
     const id = new URLSearchParams(location.search).get('id');
     const tabIndex = tabs.findIndex((tab) => tab.id === id);
@@ -156,7 +167,7 @@ const ProfilePage = () => {
           </Tabs>
         </Box>
         <Box sx={{ flex: 1, maxWidth: '672px' }}>
-          {tabs.map((tab, index) => (
+          {tabsItems.map((tab, index) => (
             <TabPanel key={tab.id} value={value} index={index}>
               {tab.view}
             </TabPanel>