✨ add empty page and loading page

daodaoedu · Jan 28, 2024 · 5cca26b · 5cca26b
1 parent bcdbb96
commit 5cca26b
Show file tree

Hide file tree

Showing 12 changed files with 610 additions and 79 deletions.
diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx
@@ -15,6 +15,7 @@ import {
 } from './GroupCard.styled';
 
 function GroupCard({
+  _id,
   photoURL,
   photoAlt,
   title = '未定義主題',
@@ -26,7 +27,7 @@ function GroupCard({
   updatedDate,
 }) {
   return (
-    <StyledGroupCard>
+    <StyledGroupCard href={`/group/detail?id=${_id}`}>
       <Image alt={photoAlt || '未放封面'} src={photoURL || emptyCoverImg.src} />
       <StyledContainer>
         <StyledTitle>{title}</StyledTitle>

diff --git a/components/Group/GroupList/GroupCard.styled.jsx b/components/Group/GroupList/GroupCard.styled.jsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import Link from 'next/link';
 
 export const StyledLabel = styled.span`
   flex-basis: 50px;
@@ -21,6 +22,7 @@ export const StyledTitle = styled.h2`
   font-weight: bold;
   line-height: 1.4;
   display: -webkit-box;
+  color: #293a3d;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
@@ -87,7 +89,8 @@ export const StyledAreas = styled.div`
   align-items: center;
 `;
 
-export const StyledGroupCard = styled.div`
+export const StyledGroupCard = styled(Link)`
+  display: block;
   position: relative;
   background: #fff;
   padding: 0.5rem;

diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, Fragment } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from '@emotion/styled';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { Box } from '@mui/material';
 import { AREAS } from '@/constants/areas';
 import { CATEGORIES } from '@/constants/category';
@@ -13,43 +14,20 @@ export const StyledGroupItem = styled.li`
   position: relative;
   margin-top: 1rem;
   flex-basis: 33.33%;
-  border-bottom: 1px solid #dbdbdb;
-
-  &:nth-of-type(1) {
-    margin-top: 0;
-  }
-
-  &:nth-last-of-type(1) {
-    border-bottom: none;
-  }
 
   @media (max-width: 767px) {
-    flex-basis: calc(50% - 12px);
-  }
-
-  @media (min-width: 767px) {
-    &:nth-of-type(3) {
-      margin-top: 0;
-    }
-
-    &:nth-last-of-type(3) {
-      border-bottom: none;
-    }
+    flex-basis: 50%;
   }
 
   @media (max-width: 560px) {
-    flex-basis: calc(100% - 24px);
+    flex-basis: 100%;
   }
+`;
 
-  @media (min-width: 560px) {
-    &:nth-of-type(2) {
-      margin-top: 0;
-    }
-
-    &:nth-last-of-type(2) {
-      border-bottom: none;
-    }
-  }
+const StyledDivider = styled.li`
+  flex-basis: 100%;
+  background: #dbdbdb;
+  height: 1px;
 `;
 
 const StyledGroupList = styled.ul`
@@ -62,6 +40,10 @@ function GroupList() {
   const [getSearchParams] = useSearchParamsManager();
   const { items, isLoading } = useSelector((state) => state.group);
 
+  const isMobileScreen = useMediaQuery('(max-width: 560px)');
+  const isPadScreen = useMediaQuery('(max-width: 767px)') && !isMobileScreen;
+  const isDeskTopScreen = !isPadScreen;
+
   useEffect(() => {
     const filterOptions = {
       area: AREAS,
@@ -92,11 +74,22 @@ function GroupList() {
     <>
       <StyledGroupList>
         {items?.length || isLoading ? (
-          items.map((data) => (
-            <StyledGroupItem key={data._id}>
-              <GroupCard {...data} />
-            </StyledGroupItem>
-          ))
+          items.map((data, index) => {
+            const isLast = index === items.length - 1;
+            const shouldRenderDivider =
+              (isMobileScreen && !isLast) ||
+              (isPadScreen && !isLast && index % 2 === 1) ||
+              (isDeskTopScreen && !isLast && index % 3 === 2);
+
+            return (
+              <Fragment key={data._id}>
+                <StyledGroupItem>
+                  <GroupCard {...data} />
+                </StyledGroupItem>
+                {shouldRenderDivider && <StyledDivider />}
+              </Fragment>
+            );
+          })
         ) : (
           <li style={{ textAlign: 'center', width: '100%' }}>
             哎呀！這裡好像沒有符合你條件的揪團，別失望！讓我們試試其他選項。

diff --git a/components/Group/More.jsx b/components/Group/More.jsx
@@ -21,6 +21,7 @@ export default function More() {
             borderRadius: '20px',
             padding: '6px 48px',
           }}
+          disabled={isLoading}
           onClick={() => dispatch(setPageSize(pageSize + 12))}
         >
           顯示更多

diff --git a/components/Group/detail/Contact/ContactDone/index.jsx b/components/Group/detail/Contact/ContactDone/index.jsx
@@ -0,0 +1,81 @@
+import { Modal, Box, Typography, Button } from '@mui/material';
+
+function ContactDoneModal() {
+  return (
+    <Modal
+      keepMounted
+      open
+      aria-labelledby="keep-mounted-modal-title"
+      aria-describedby="keep-mounted-modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '480px',
+          height: '602px',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          borderRadius: '16px',
+          p: '45px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Box sx={{ mt: '77px', mb: '16px' }}>
+          <img
+            src="/assets/contactdone.png"
+            alt="nobody-land"
+            width="312px"
+            height="184px"
+          />
+        </Box>
+        <Typography
+          id="keep-mounted-modal-title"
+          variant="h3"
+          component="h2"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 700,
+            fontWize: '18px',
+            lineHeight: '120%',
+          }}
+        >
+          已送出邀請
+        </Typography>
+        <Typography
+          id="keep-mounted-modal-subtitle"
+          variant="h6"
+          component="h4"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 400,
+            fontWize: '14px',
+            lineHeight: '140%',
+            mt: '8px',
+          }}
+        >
+          請耐心等候夥伴的回應
+        </Typography>
+        <Button
+          sx={{
+            color: 'white',
+            width: '100%',
+            borderRadius: '20px',
+            mt: '145px',
+          }}
+          variant="contained"
+        >
+          關閉
+        </Button>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ContactDoneModal;
diff --git a/components/Group/detail/Contact/ContactError/index.jsx b/components/Group/detail/Contact/ContactError/index.jsx
@@ -0,0 +1,66 @@
+import { Modal, Box, Typography, Button } from '@mui/material';
+
+function ContactErrorModal() {
+  return (
+    <Modal
+      keepMounted
+      open
+      aria-labelledby="keep-mounted-modal-title"
+      aria-describedby="keep-mounted-modal-description"
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          width: '480px',
+          height: '602px',
+          bgcolor: 'background.paper',
+          boxShadow: 24,
+          borderRadius: '16px',
+          p: '45px',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Box sx={{ mt: '68px', mb: '21px' }}>
+          <img
+            src="/assets/contacterror.png"
+            alt="nobody-land"
+            width="212px"
+            height="184px"
+          />
+        </Box>
+        <Typography
+          id="keep-mounted-modal-title"
+          variant="h3"
+          component="h2"
+          textAlign="center"
+          sx={{
+            color: ' #536166',
+            fontWeight: 700,
+            fontWize: '18px',
+            lineHeight: '120%',
+          }}
+        >
+          哎呀！有不明錯誤
+        </Typography>
+        <Button
+          sx={{
+            color: 'white',
+            width: '100%',
+            borderRadius: '20px',
+            mt: '173px ',
+          }}
+          variant="contained"
+        >
+          再試一次
+        </Button>
+      </Box>
+    </Modal>
+  );
+}
+
+export default ContactErrorModal;