Upgrade 找夥伴功能 (#78)

* chore: Remove the selection of living city - 釣魚臺 * fix: Resolve issue with real-time data update * feat: add skeleton loader to partner list --------- Co-authored-by: hsuifang <[email protected]>
daodaoedu · Sep 27, 2024 · 2ba3936 · 2ba3936
1 parent 16ea19d
commit 2ba3936
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 43 deletions.
diff --git a/components/Partner/PartnerList/PartnerCard/PartnerSkelton.jsx b/components/Partner/PartnerList/PartnerCard/PartnerSkelton.jsx
@@ -0,0 +1,40 @@
+import { Stack, Skeleton } from '@mui/material';
+
+const PartnerSkelton = () => {
+  const array = new Uint32Array(1);
+  return (
+    <Stack
+      padding="12px"
+      sx={{ padding: '12px', minHeight: '192px', bgcolor: '#fff' }}
+    >
+      <Stack direction="row" alignItems="center" gap="12px" mb="8px">
+        <Skeleton variant="circular" width={50} height={50} />
+        <Skeleton
+          variant="rounded"
+          width={122}
+          height={26}
+          sx={{ borderRadius: '4px' }}
+        />
+      </Stack>
+      <Stack sx={{ marginBottom: '26px' }}>
+        <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+        <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+      </Stack>
+      <Stack direction="row">
+        {new Array(3).fill(0).map((_, idx) => (
+          <Skeleton
+            variant="rounded"
+            width={60}
+            height={23}
+            key={`partnerSkelton-${Math.floor(
+              crypto.getRandomValues(array)[0],
+            )}`}
+            sx={{ mr: '8px', borderRadius: '18px' }}
+          />
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default PartnerSkelton;
diff --git a/components/Partner/PartnerList/PartnerCard/PartnerSkeltonCard.jsx b/components/Partner/PartnerList/PartnerCard/PartnerSkeltonCard.jsx
@@ -0,0 +1,24 @@
+import { Fragment } from 'react';
+import { Grid, Box } from '@mui/material';
+import PartnerSkelton from './PartnerSkelton';
+
+const PartnerSkeltonCard = ({ number, mobileScreen }) => {
+  const array = new Uint32Array(1);
+  return new Array(number).fill(0).map((_, idx) => (
+    <Fragment
+      key={`partnerSkeltonCard-${Math.floor(crypto.getRandomValues(array)[0])}`}
+    >
+      <Grid item md={6} mb={mobileScreen && '12px'} width="100%">
+        <PartnerSkelton />
+      </Grid>
+
+      {!mobileScreen && (idx + 1) % 2 === 0 && idx + 1 !== number && (
+        <Grid item xs={12} py="12px">
+          <Box height={1} width="100%" border="1px solid #E5E5E5" />
+        </Grid>
+      )}
+    </Fragment>
+  ));
+};
+
+export default PartnerSkeltonCard;
diff --git a/components/Partner/PartnerList/index.jsx b/components/Partner/PartnerList/index.jsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Grid, Box } from '@mui/material';
 import PartnerCard from './PartnerCard';
+import PartnerSkeltonCard from './PartnerCard/PartnerSkeltonCard';
 
 function PartnerList() {
   const router = useRouter();
@@ -24,35 +25,46 @@ function PartnerList() {
         alignItems: 'center',
       }}
     >
-      {lists.map((item, idx) => (
-        <Fragment key={`${item._id}`}>
-          <Grid
-            onClick={() => router.push(`partner/detail?id=${item._id}`)}
-            item
-            width="100%"
-            md={6}
-            mb={mobileScreen && '12px'}
-          >
-            <PartnerCard
-              image={item.photoURL}
-              date={item.date}
-              name={item.name}
-              educationStage={item.educationStage}
-              share={item.share}
-              roleList={item.roleList}
-              tagList={item.tagList}
-              wantToDoList={item.wantToDoList}
-              location={item.location}
-              updatedDate={item.updatedDate}
-            />
-          </Grid>
-          {!mobileScreen && (idx + 1) % 2 === 0 && idx + 1 !== lists.length && (
-            <Grid item xs={12} py="12px">
-              <Box height={1} width="100%" border="1px solid #E5E5E5" />
-            </Grid>
-          )}
-        </Fragment>
-      ))}
+      {lists.length === 0 ? (
+        <PartnerSkeltonCard
+          number={mobileScreen ? 2 : 4}
+          mobileScreen={mobileScreen}
+        />
+      ) : (
+        <>
+          {lists.map((item, idx) => (
+            <Fragment key={`${item._id}`}>
+              <Grid
+                onClick={() => router.push(`partner/detail?id=${item._id}`)}
+                item
+                width="100%"
+                md={6}
+                mb={mobileScreen && '12px'}
+              >
+                <PartnerCard
+                  image={item.photoURL}
+                  date={item.date}
+                  name={item.name}
+                  educationStage={item.educationStage}
+                  share={item.share}
+                  roleList={item.roleList}
+                  tagList={item.tagList}
+                  wantToDoList={item.wantToDoList}
+                  location={item.location}
+                  updatedDate={item.updatedDate}
+                />
+              </Grid>
+              {!mobileScreen &&
+                (idx + 1) % 2 === 0 &&
+                idx + 1 !== lists.length && (
+                  <Grid item xs={12} py="12px">
+                    <Box height={1} width="100%" border="1px solid #E5E5E5" />
+                  </Grid>
+                )}
+            </Fragment>
+          ))}
+        </>
+      )}
     </Grid>
   );
 }

diff --git a/constants/areas.js b/constants/areas.js
@@ -304,22 +304,9 @@ export const TAIWAN_DISTRICT = [
         zip: '272',
         name: '南澳鄉',
       },
-      {
-        zip: '290',
-        name: '釣魚臺',
-      },
     ],
     name: '宜蘭縣',
   },
-  {
-    districts: [
-      {
-        zip: '290',
-        name: '釣魚臺',
-      },
-    ],
-    name: '釣魚臺',
-  },
   {
     districts: [
       {

diff --git a/pages/partner/detail/index.jsx b/pages/partner/detail/index.jsx
@@ -7,7 +7,11 @@ import Navigation from '@/shared/components/Navigation_v2';
 import Footer from '@/shared/components/Footer_v2';
 import Profile from '@/components/Profile';
 import ContactModal from '@/components/Profile/Contact';
-import { sendEmailToPartner, fetchPartnerById } from '@/redux/actions/partners';
+import {
+  clearPartnerState,
+  sendEmailToPartner,
+  fetchPartnerById,
+} from '@/redux/actions/partners';
 import toast from 'react-hot-toast';
 import { ROLE } from '@/constants/member';
 import { mapToTable } from '@/utils/helper';
@@ -52,6 +56,9 @@ const Detail = () => {
     if (partnerId !== undefined) {
       fetchUser();
     }
+    return () => {
+      dispatch(clearPartnerState());
+    };
   }, [partnerId]);
 
   // modal handle

diff --git a/redux/actions/partners.js b/redux/actions/partners.js
@@ -46,3 +46,9 @@ export function fetchPartnerTags() {
     type: 'FETCH_PARTNER_TAGS',
   };
 }
+
+export function clearPartnerState() {
+  return {
+    type: 'CLEAR_PARTNER_STATE',
+  };
+}
diff --git a/redux/reducers/partners.js b/redux/reducers/partners.js
@@ -60,6 +60,12 @@ const reducer = (state = initialState, action) => {
         tags: [],
       };
     }
+    case 'CLEAR_PARTNER_STATE': {
+      return {
+        ...state,
+        partner: null,
+      };
+    }
     default: {
       return state;
     }