From 62b056d28082248a0fa546928d2c3992c841f428 Mon Sep 17 00:00:00 2001 From: rhahao <26148770+rhahao@users.noreply.github.com> Date: Sat, 1 Jul 2023 22:26:36 +0300 Subject: [PATCH] feat(congregations): use pagination when navigating public talks --- .../publicTalks/PublicTalkContainer.jsx | 31 +++---- src/features/publicTalks/PublicTalkEditor.jsx | 27 ++---- .../publicTalks/PublicTalkPagination.jsx | 20 +++++ src/features/publicTalks/index.js | 1 + src/pages/PublicTalks.jsx | 85 +++++++++++-------- 5 files changed, 93 insertions(+), 71 deletions(-) create mode 100644 src/features/publicTalks/PublicTalkPagination.jsx diff --git a/src/features/publicTalks/PublicTalkContainer.jsx b/src/features/publicTalks/PublicTalkContainer.jsx index e2268bc0..5960613b 100644 --- a/src/features/publicTalks/PublicTalkContainer.jsx +++ b/src/features/publicTalks/PublicTalkContainer.jsx @@ -6,14 +6,13 @@ import { publicTalksListState } from '../../states/congregation'; import { LANGUAGE_LIST } from '../../constant/langList'; import { apiUpdatePublicTalk } from '../../api/congregation'; -const PublicTalkContainer = ({ isNew, talk_number }) => { +const PublicTalkContainer = ({ talk_number }) => { const [publicTalks, setPublicTalks] = useRecoilState(publicTalksListState); - const nextTalkNumber = publicTalks.length + 1; const publicTalk = publicTalks.find((record) => record.talk_number === talk_number); const handleSave = async (language, value) => { - const currentTalk = isNew ? nextTalkNumber : talk_number; + const currentTalk = talk_number; const modifDate = new Date().toISOString(); language = language.toUpperCase(); @@ -52,22 +51,20 @@ const PublicTalkContainer = ({ isNew, talk_number }) => { borderRadius: '5px', }} > - {isNew ? nextTalkNumber : publicTalk.talk_number} + {publicTalk.talk_number} - - {!isNew && ( - - {LANGUAGE_LIST.filter((lang) => !lang.isSource).map((language) => ( - - ))} - - )} + + + {LANGUAGE_LIST.filter((lang) => !lang.isSource).map((language) => ( + + ))} + ); diff --git a/src/features/publicTalks/PublicTalkEditor.jsx b/src/features/publicTalks/PublicTalkEditor.jsx index ea94c669..e97529d8 100644 --- a/src/features/publicTalks/PublicTalkEditor.jsx +++ b/src/features/publicTalks/PublicTalkEditor.jsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import AddCircleIcon from '@mui/icons-material/AddCircle'; import Box from '@mui/material/Box'; import CheckIcon from '@mui/icons-material/Check'; import ClearIcon from '@mui/icons-material/Clear'; @@ -8,8 +7,8 @@ import IconButton from '@mui/material/IconButton'; import TextField from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; -const PublicTalkEditor = ({ isNew, handleSaveData, public_talk, language }) => { - const [isEdit, setIsEdit] = useState(isNew); +const PublicTalkEditor = ({ handleSaveData, public_talk, language }) => { + const [isEdit, setIsEdit] = useState(false); const [title, setTitle] = useState(''); const handleEdit = () => { @@ -18,24 +17,17 @@ const PublicTalkEditor = ({ isNew, handleSaveData, public_talk, language }) => { const handleCancel = () => { setIsEdit(false); - if (isNew) setTitle(''); - if (!isNew) setTitle(public_talk[language.toUpperCase()]?.title || ''); + setTitle(public_talk[language.toUpperCase()]?.title || ''); }; const handleSave = () => { handleSaveData(language, title); - setIsEdit(isNew ? true : false); - if (isNew) setTitle(''); + setIsEdit(false); }; useEffect(() => { - if (isNew) setTitle(''); - if (!isNew) setTitle(public_talk[language.toUpperCase()]?.title || ''); - }, [isNew, public_talk, language]); - - useEffect(() => { - setIsEdit(isNew); - }, [isNew]); + setTitle(public_talk[language.toUpperCase()]?.title || ''); + }, [public_talk, language]); return ( @@ -68,7 +60,7 @@ const PublicTalkEditor = ({ isNew, handleSaveData, public_talk, language }) => { value={title} onChange={(e) => setTitle(e.target.value)} /> - {!isNew && public_talk[language.toUpperCase()] && ( + {public_talk[language.toUpperCase()] && ( { )} - {isEdit && !isNew && ( + {isEdit && ( )} {isEdit && ( - {isNew && } - {!isNew && } + )} diff --git a/src/features/publicTalks/PublicTalkPagination.jsx b/src/features/publicTalks/PublicTalkPagination.jsx new file mode 100644 index 00000000..9af9b67a --- /dev/null +++ b/src/features/publicTalks/PublicTalkPagination.jsx @@ -0,0 +1,20 @@ +import TablePagination from '@mui/material/TablePagination'; + +const PublicTalkPagination = ({ count, page, handleChangePage, noLabel }) => { + return ( + (noLabel ? '' : `${from}–${to} / ${count}`)} + rowsPerPageOptions={[]} + rowsPerPage={10} + onPageChange={handleChangePage} + showFirstButton={true} + showLastButton={true} + sx={{ '.MuiTablePagination-displayedRows': { fontWeight: 'bold', fontSize: '16px' } }} + /> + ); +}; + +export default PublicTalkPagination; diff --git a/src/features/publicTalks/index.js b/src/features/publicTalks/index.js index 67780efa..c98c8227 100644 --- a/src/features/publicTalks/index.js +++ b/src/features/publicTalks/index.js @@ -1,2 +1,3 @@ export { default as PublicTalkContainer } from './PublicTalkContainer'; export { default as PublicTalkImport } from './PublicTalkImport'; +export { default as PublicTalkPagination } from './PublicTalkPagination'; diff --git a/src/pages/PublicTalks.jsx b/src/pages/PublicTalks.jsx index 7f4cd063..b66b22f5 100644 --- a/src/pages/PublicTalks.jsx +++ b/src/pages/PublicTalks.jsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { useRecoilState } from 'recoil'; import { useQuery } from '@tanstack/react-query'; import Box from '@mui/material/Box'; @@ -5,45 +6,57 @@ import Button from '@mui/material/Button'; import ImportExportIcon from '@mui/icons-material/ImportExport'; import Typography from '@mui/material/Typography'; import { publicTalkImportOpenState, publicTalksListState } from '../states/congregation'; -import { PublicTalkContainer, PublicTalkImport } from '../features/publicTalks'; -import { useEffect } from 'react'; +import { PublicTalkContainer, PublicTalkImport, PublicTalkPagination } from '../features/publicTalks'; import { apiFetchPublicTalks } from '../api/congregation'; const PublicTalks = () => { - const { isLoading, data } = useQuery({ - queryKey: ['public_talks'], - queryFn: apiFetchPublicTalks, - staleTime: 60000, - }); - - const [publicTalks, setPublicTalks] = useRecoilState(publicTalksListState); - const [openImport, setOpenImport] = useRecoilState(publicTalkImportOpenState); - - const handleClickOpen = () => { - setOpenImport(true); - }; - - useEffect(() => { - if (!isLoading) setPublicTalks(data); - }, [isLoading, data, setPublicTalks]); - - return ( - - PUBLIC TALKS - - - {openImport && } - - - {publicTalks.map((talk) => ( - - ))} - - - - ); + const { isLoading, data } = useQuery({ + queryKey: ['public_talks'], + queryFn: apiFetchPublicTalks, + staleTime: 60000, + }); + + const [publicTalks, setPublicTalks] = useRecoilState(publicTalksListState); + const [openImport, setOpenImport] = useRecoilState(publicTalkImportOpenState); + + const [page, setPage] = useState(0); + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleClickOpen = () => { + setOpenImport(true); + }; + + useEffect(() => { + if (!isLoading) setPublicTalks(data); + }, [isLoading, data, setPublicTalks]); + + return ( + + PUBLIC TALKS + + + {openImport && } + + + {publicTalks.length > 0 && ( + + )} + + {publicTalks.slice(page * 10, page * 10 + 10).map((talk) => ( + + ))} + + {publicTalks.length > 0 && ( + + )} + + + ); }; export default PublicTalks;