From 8c62f73c82c004dc48d401568f0b3662f0f6a693 Mon Sep 17 00:00:00 2001 From: "Jonguk. Lim" Date: Fri, 10 Jun 2022 16:49:43 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20react-query=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/index.js | 26 +++++++---- src/views/biz/pboard/PublicBoard.jsx | 64 ++++++++++++++-------------- src/views/cmm/file-ctl/FileForm.jsx | 4 +- 4 files changed, 51 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 008ea42..e763ab9 100755 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "react-otp-input-rc-17": "^2.4.1-minor", "react-pdf": "^5.7.2", "react-perfect-scrollbar": "^1.5.8", + "react-query": "^3.39.1", "react-quill": "^2.0.0-beta.4", "react-redux": "^7.2.6", "react-resizable": "^3.0.4", diff --git a/src/index.js b/src/index.js index 133b706..e8a145c 100755 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,9 @@ import ReactDOM from 'react-dom'; // third party import { BrowserRouter } from 'react-router-dom'; import { Provider } from 'react-redux'; +import { QueryClient, QueryClientProvider } from 'react-query'; +import { ReactQueryDevtools } from 'react-query/devtools'; + import { PersistGate } from 'redux-persist/integration/react'; import { transitions, positions, Provider as AlertProvider, types } from 'react-alert'; import AlertTemplate from 'react-alert-template-basic'; @@ -32,17 +35,22 @@ const options = { } }; +const queryClient = new QueryClient(); + ReactDOM.render( - - - - - - - - - + + + + + + + + + + + + , document.getElementById('root') ); diff --git a/src/views/biz/pboard/PublicBoard.jsx b/src/views/biz/pboard/PublicBoard.jsx index a2aa48b..f3ea7e3 100644 --- a/src/views/biz/pboard/PublicBoard.jsx +++ b/src/views/biz/pboard/PublicBoard.jsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; +import { useMutation, useQuery, useQueryClient } from 'react-query'; // material-ui import { Button, Grid, Link } from '@mui/material'; @@ -22,6 +23,7 @@ import { removeAlert, saveAlert } from '../../../commons/XitCmm'; const PublicBoard = () => { const { user } = useAuth(); + const queryClient = useQueryClient(); const [owner, setOwner] = useState(); const [totalCount, setTotalCount] = useState(0); const [rowsState, setRowsState] = useState({ @@ -72,24 +74,24 @@ const PublicBoard = () => { { headerName: '조회수', headerAlign: 'center', field: 'inHit', align: 'right', width: 80 } ]; - const search = useCallback(() => { - const params = { - page: rowsState.page, - size: rowsState.pageSize - }; - - findPublicBoards(params).then((response) => { - // console.log(response); - if (response && response.data) { - setTotalCount(response.count); - setRowsState((prevState) => ({ ...prevState, rows: response.data })); - } - }); - }, [rowsState.page, rowsState.pageSize]); - - useEffect(() => { - search(); - }, [search]); // rowsState.page, rowsState.pageSize, rowsState.rows]); + const params = { + page: rowsState.page, + size: rowsState.pageSize + }; + + const search = async () => { + const res = await findPublicBoards(params); + if (res && res.data) { + setTotalCount(res.count); + setRowsState((prevState) => ({ ...prevState, rows: res.data })); + } + }; + useQuery(['pboards', params.page, params.size], search); + // const { isLoading, data, isError } = useQuery(['pboards', params.page, params.size], search); + + // useEffect(() => { + // search(); + // }, [search]); // rowsState.page, rowsState.pageSize, rowsState.rows]); const handleOnCellClick = (e) => { if (e?.field === 'inTitle') { @@ -97,6 +99,12 @@ const PublicBoard = () => { setTitle('공지사항 상세'); setSelectedRow(e?.row); setOwner(user.name === e?.row.inName); + // eslint-disable-next-line react-hooks/rules-of-hooks + // useMutation(modifyPublicBoardHitCount(e?.row?.inCode), { + // onSuccess: () => { + // queryClient.invalidateQueries('pboards'); + // } + // }); modifyPublicBoardHitCount(e?.row?.inCode); setOpen(true); } @@ -108,26 +116,16 @@ const PublicBoard = () => { setOpen(false); saveAlert(() => - savePublicBoard(payload).then((res) => { - if (res?.success) { - search(); - } else { - alert.show(`${res?.data.message}`); - } - }) + // eslint-disable-next-line react-hooks/rules-of-hooks + useMutation(savePublicBoard(payload)) ); break; case 'DELETE': setOpen(false); - removeAlert(() => - removePublicBoard(payload).then((res) => { - if (res?.success) { - search(); - } else { - alert.show(`${res?.data.message}`); - } - }) + removeAlert( + // eslint-disable-next-line react-hooks/rules-of-hooks + () => useMutation(removePublicBoard(payload)) ); break; default: diff --git a/src/views/cmm/file-ctl/FileForm.jsx b/src/views/cmm/file-ctl/FileForm.jsx index f600675..079545e 100644 --- a/src/views/cmm/file-ctl/FileForm.jsx +++ b/src/views/cmm/file-ctl/FileForm.jsx @@ -26,7 +26,7 @@ const FileForm = ({ ) : ( - + )}