From 4d6b00a4306518cd2c33225377acbf72bfc2a6b3 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Sat, 12 Oct 2024 19:50:02 +0800 Subject: [PATCH] Feature/empty group list (#96) * refactor: group list page * refactor: change empty cover image * feat: empty group list ui * feat: error group list page --- components/Group/GroupList/GroupCard.jsx | 7 +- components/Group/GroupList/index.jsx | 190 +++++++++++++----- components/Group/More.jsx | 4 +- public/assets/empty-cover-with-background.png | Bin 0 -> 7803 bytes public/assets/empty-cover.png | Bin 2552 -> 8305 bytes redux/reducers/group.js | 3 + shared/components/Image/index.jsx | 6 +- 7 files changed, 154 insertions(+), 56 deletions(-) create mode 100644 public/assets/empty-cover-with-background.png diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx index 4c0c6876..57501760 100644 --- a/components/Group/GroupList/GroupCard.jsx +++ b/components/Group/GroupList/GroupCard.jsx @@ -1,7 +1,7 @@ import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import Image from '@/shared/components/Image'; -import emptyCoverImg from '@/public/assets/empty-cover.png'; import { timeDuration } from '@/utils/date'; +import emptyCoverWithBackgroundImg from '@/public/assets/empty-cover-with-background.png'; import { StyledAreas, StyledContainer, @@ -31,7 +31,10 @@ function GroupCard({ return ( - {photoAlt + {photoAlt {title} diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx index 3aa27d00..59352d3b 100644 --- a/components/Group/GroupList/index.jsx +++ b/components/Group/GroupList/index.jsx @@ -1,10 +1,13 @@ import { useEffect, Fragment } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from '@emotion/styled'; +import Button from '@mui/material/Button'; import useMediaQuery from '@mui/material/useMediaQuery'; -import { Box } from '@mui/material'; import useSearchParamsManager from '@/hooks/useSearchParamsManager'; import { setQuery } from '@/redux/actions/group'; +import Image from '@/shared/components/Image'; +import emptyCoverImg from '@/public/assets/empty-cover.png'; +import errorCoverImg from '@/public/assets/contacterror.png'; import GroupCard from './GroupCard'; import SkeletonGroupCard from './SkeletonGroupCard'; @@ -41,10 +44,93 @@ const StyledGroupList = styled.ul` flex-wrap: wrap; `; +const StyledFullItem = styled.li` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 412px; + + .color-gray { + color: #536166; + } + + .color-gray-light { + color: #92989a; + } + + p { + margin-top: 20px; + } + + span { + margin-top: 6px; + font-size: 14px; + } +`; + +function shouldRenderDivider( + index, + isLast, + isMobileScreen, + isPadScreen, + isDeskTopScreen, +) { + return ( + (isMobileScreen && !isLast) || + (isPadScreen && !isLast && index % 2 === 1) || + (isDeskTopScreen && !isLast && index % 3 === 2) + ); +} + +function GroupItems({ items, isMobileScreen, isPadScreen, isDeskTopScreen }) { + return ( + Array.isArray(items) && + items.map((data, index) => { + const isLast = index === items.length - 1; + return ( + + + + + {shouldRenderDivider( + index, + isLast, + isMobileScreen, + isPadScreen, + isDeskTopScreen, + ) && } + + ); + }) + ); +} + +function SkeletonItems({ isMobileScreen, isPadScreen, isDeskTopScreen }) { + return Array.from({ length: isMobileScreen ? 3 : 6 }, (_, index) => { + const isLast = index === (isMobileScreen ? 2 : 5); + return ( + + + + + {shouldRenderDivider( + index, + isLast, + isMobileScreen, + isPadScreen, + isDeskTopScreen, + ) && } + + ); + }); +} + function GroupList() { const dispatch = useDispatch(); const [getSearchParams] = useSearchParamsManager(); - const { items, isLoading } = useSelector((state) => state.group); + const { items, isLoading, isError } = useSelector((state) => state.group); const isMobileScreen = useMediaQuery('(max-width: 560px)'); const isPadScreen = useMediaQuery('(max-width: 767px)') && !isMobileScreen; @@ -55,54 +141,62 @@ function GroupList() { }, [getSearchParams]); return ( - <> - - {isLoading ? ( - // always show 3 || 6 skeleton cards in mobile || desktop screen - Array.from({ length: isMobileScreen ? 3 : 6 }, (_, index) => { - const isLast = index === (isMobileScreen ? 2 : 5); - const shouldRenderDivider = - (isMobileScreen && !isLast) || - (isPadScreen && !isLast && index % 2 === 1) || - (isDeskTopScreen && !isLast && index % 3 === 2); - - return ( - - - - - {shouldRenderDivider && } - - ); - }) - ) : items?.length ? ( - 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 ( - - - - - {shouldRenderDivider && } - - ); - }) - ) : ( -
  • - 哎呀！這裡好像沒有符合你條件的揪團，別失望！讓我們試試其他選項。 -
    • - )} -     - + + {isLoading && ( - 搜尋揪團中～ + + )} + {isError ? ( + + 異常錯誤 +

    哎呀！有不明錯誤

    + +     + ) : ( + !isLoading && + items.length === 0 && ( + + 查無資料 +

    哎呀！這裡沒有符合條件的揪團

    + + 試著更改條件或搜尋其他關鍵字吧 + +     + ) )} - +     ); } diff --git a/components/Group/More.jsx b/components/Group/More.jsx index 342f68e9..63362427 100644 --- a/components/Group/More.jsx +++ b/components/Group/More.jsx @@ -11,7 +11,7 @@ export default function More() { - {isMore ? ( + {isMore && ( - ) : ( - '已經到底囉～' )} ); diff --git a/public/assets/empty-cover-with-background.png b/public/assets/empty-cover-with-background.png new file mode 100644 index 0000000000000000000000000000000000000000..d0da2dd19c1e7a217a2162de0d399feb9573f23a GIT binary patch literal 7803 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 IweUazf!v)2_GgkFg+bn-!r&3% z3l5t0;wi*BtX>afLFpU&*;okYK&e>q{S)aLO*24L8r7ymYq#NgWjTlRbk-_-V|ap~ zZ{(wZ8K;D9(%q@UnP4w=j2ioYWowzp6MYpy+!(2i4BO3kU4;c5dGkxJ<&(6!bYEMV z)E7)S#-d?{=Q&80uFCc>T42k(w@gJ=p?@IY< za!8N_9Los0!Wq%vLA4PFLdXA!47ad=rQUEa&!GzlCS2-zfxCNW;FwKg-yO3w?Goq*NkA6*i zxVlEW{m`rppfz|r;n(4PY}y*;^YkRULg>EJhnS&23NsI{gf41w;-&oRUndoR+0k)AyCDp=9JONZN@&;{2$%4pi@yR&A{gjwW4h@%$exQ4e)ly zd8w8g5ljuA?tW-#AWHSdnO$%4kke`V8kAj+N3Q$OmhfCo&hPRMlwE!jUnsb44fe4X zW6c893_LD&Rpb=~p;BCtT0TW0&AB0jGF>gc!=Ye&RNQ7pPYIJNjn@_%2{r>ly3_&! zoPJ3+k@scT25fA{pkRBBNb^G8g;rGxcK89h7W zyiW0?mB;)XC(1pQRBq7L&20$>6j57!qiGpycc4bs&P+7Shq&#m!b1XT{plE)dEAeaC!~jcf1Qty7-|XnZEkrN@w83__-}5*JsWVU zpoA}Mj$9f3NMQFH&pH_#_{8DF|7+79hndpBMm7-+^7ozk%`Z28`CB|4zM~E%2KxMt zZ=XMa5vI~L^Q9h#lRV2ddblcAQEgyyqP=eNo`L7MxQyhQE`d{g=~`&1*jG&3^mJfs zt_!XJywTH5&Xm4(Z=Q3Yxx!oR^{O4}0ye*rJjVjDx1E}&RK5Z%-^OSerbu8iB5NZt z56?M5O2;ZthKK;(%8!AXW&@{8HH{T5YA1!Ee2Z8!$;RXed9lZbb%0Sikqfip5IQ*Y zCW``_yeqCGd?&+32M~CW{3_S&V&Z5Z=H*uupkqd~A3VSgexDpquN@k#=$+YBrkLOQ zM>7@0vevRr7leq4geEqd{_>-Z{TWFi)lUjaVyr|AEG!H^~S!T0>_=J3m$?NgB_w+3R_Z e`&o!{#1oINNnURaFGl>61yEPfeo&%}4EkS;S33m& literal 2552 zcmZ`*XHb*b8vdvOBq0<535FoZvJnBPS(?%WM4A+32~B#HrZibv5RhI3q_coZiN@z#xuu>gR7o3(3XaG@ghm?*lb8;U1omp=1``*j^67Wd&`N>Hz zesTLZujhYzWv!Xrg?2Zh{L_O_h@ zoX=6JKx3@TSXsj2A5q5>P*I>2%HF$HvE8Pj3^XPnIL_QzB!8SKp??Hon5j&+5@ln772(&tjQvtV0sH1lj#Dq?J;zB;zakmT&n67Vp?LHMP06QU_dfGDM~Ewz?M z0dieVWcA8*+w{F$7elmIiNBAOX0ZN^WMs`)aHgs8HEAIzoNM1!`5SJ%yXUmzk zr2=CK$1&e?4xR)fYG_U5pH>!+Q}IYDI31M`%nUgc=LuS|szn zK>Y8AxQ59vDKaLsGTn&KCK0B)_mreKMy<@Y{^Z%eU6+BcP*ks-Q z`nqo+ZK)s!A6*Pro2OI}j?R5M6;M-}2d(n@ryLpVhSK#uM=4dvjz@Jl`g|OGGJ_x+ z{WHN^i6m_4N$;~>-{DEmn{J;PHnYE{(%#t0Js&ow ze9{C-#Zbt#<3dYK%XMT)lwGmK_{`O(=9dYTx648bJKF7Q1@G5pAp2$dOCKeF6vP;q zxRzUr1X`NrS{qNgqnkIugi5JHnExM9F!YvPERq+lyg?k@AzEYg(ro#YzChv1nKe`I zW6e&bx=d(1REzkDEFZ;xFd(E}*hKk;>~L|2J(^PiCq}hk$!|Rj_3IU$Nug0%-e>Kl z|FUBlR||zl=BYh#+q^L^XoaCs6hHL~4|U<27FaGKG!C{t_L@a>%m`90?*6WsB6^Z( zR=MhMfb5U%#FX(D94)qBhL%Hj^a8`nPs1)AZgmX~6hE2kkaSQn%F{HBwdaLL9=NMq z{plxD zl214?G<&W8)9MPnV;e@Tn7H7wTdGl`nocO<5BRH{9lp?DLQ0xNt@Fa~?7ugP3DL0K zmbPzliPYN6!wvR-z*B&|iud`7!uhHKYl4t2rxGGWQYGCt?DN6EmR)nh=$!>tD*G}@ zq48)+rG4GLtsza~<~A~iTrpk0_g$x!N2^7F~ACaf=Y;1qoM67=%SUh1rlUMI3rqosHJY>&C4 zzRdVIw6Ep0q}g1cXe6(w4oR2fF)!=#N#B2ARZ%WZH+7gk_+Yt-g`is_blgV5q1Slz zRY}IRSy_oK{Ct=B{RtZx1Yga)dwynm|L^9l;s)C|6A6=C7peF@A7HMp@F`>Q5uy>M)+ zX>hc)TAiNg@4X~N=nGtdI0W4&1i1hntuyV9>eBrN9wb@)%wPj*yO=w<`CKl#^<{`I zPCTH~ZK)iNN$kT4A|c=D3O;MHA_}Mo_b%kGe|^Z><7rQz1x(a7W`dJuDN$KFcbb={ z*h2kQnA@Q6^z5Yv5UvjP<;PQ4^*Q6ozl^tz(bOrk<%htnNC@vl$Wr(6cOCO{x7#N#U( zA~qi`w(yDOL#)NTC?m69Bu!hpy@et$2Ju6~+t)fNCTBNgxl4x#jo~wY@cE|=ufFJnZ5fK7yLPX1l~kSJRDgLwKrVONmW40=B=;i$*`cHqcM-$9th9Ocd(JWzA}nqENXy}zNsEo$0_bVEMd|a diff --git a/redux/reducers/group.js b/redux/reducers/group.js index 106a277c..5d3aa93b 100644 --- a/redux/reducers/group.js +++ b/redux/reducers/group.js @@ -12,6 +12,7 @@ const initialState = { items: [], total: 0, isLoading: true, + isError: false, }; const reducer = (state = initialState, action) => { @@ -39,6 +40,7 @@ const reducer = (state = initialState, action) => { ...state, ...(action.payload ?? {}), isLoading: false, + isError: false, }; } case GET_GROUP_ITEMS_FAILURE: { @@ -46,6 +48,7 @@ const reducer = (state = initialState, action) => { ...state, total: 0, isLoading: false, + isError: true, }; } default: { diff --git a/shared/components/Image/index.jsx b/shared/components/Image/index.jsx index 2fcc4752..13fa374a 100644 --- a/shared/components/Image/index.jsx +++ b/shared/components/Image/index.jsx @@ -1,6 +1,6 @@ import Skeleton from '@mui/material/Skeleton'; import { LazyLoadImage } from 'react-lazy-load-image-component'; -import emptyCoverImg from '@/public/assets/empty-cover.png'; +import emptyCoverWithBackgroundImg from '@/public/assets/empty-cover-with-background.png'; import { useState } from 'react'; const Loading = ({ height }) => ( @@ -17,13 +17,13 @@ const Image = ({ alt, width = '100%', height = '122px', - background = 'rgba(240, 240, 240, .8)', + background = 'transparent', borderRadius = '8px', }) => { const [isError, setIsError] = useState(false); return (