From 58f7fe968d5318fd79db2bb966bc577e41e48d5e Mon Sep 17 00:00:00 2001 From: younoah Date: Sat, 12 Mar 2022 21:01:42 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat=20:=20LadingProvider=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 18 ++++++++++----- src/contexts/index.ts | 5 ++++ src/contexts/loading/loadingProvider.tsx | 29 ++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 src/contexts/loading/loadingProvider.tsx diff --git a/src/App.tsx b/src/App.tsx index 5e8beb2..0fea529 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,7 +3,11 @@ import Router from './routes/Router'; import { RecoilRoot } from 'recoil'; import { GlobalStyle } from '@/styles'; import { Header, Spinner } from '@/components'; -import { ModalsProvider, WaffleCardsProvider } from '@/contexts'; +import { + ModalsProvider, + WaffleCardsProvider, + LoadingProvider, +} from '@/contexts'; function App() { return ( @@ -11,11 +15,13 @@ function App() { }>
- - - - - + + + + + + + ); diff --git a/src/contexts/index.ts b/src/contexts/index.ts index ca61c06..881a8b7 100644 --- a/src/contexts/index.ts +++ b/src/contexts/index.ts @@ -8,3 +8,8 @@ export { useWaffleCardsState, useWaffleCardsDispatch, } from './waffleCards/waffleCardsProvider'; +export { + LoadingProvider, + useLoadingState, + useLoadingDispatch, +} from './loading/loadingProvider'; diff --git a/src/contexts/loading/loadingProvider.tsx b/src/contexts/loading/loadingProvider.tsx new file mode 100644 index 0000000..e804478 --- /dev/null +++ b/src/contexts/loading/loadingProvider.tsx @@ -0,0 +1,29 @@ +import React, { createContext, useContext, useState } from 'react'; +import { Spinner } from '@/components'; + +const LoadingDispatchContext = createContext<(loading: boolean) => void>( + // eslint-disable-next-line @typescript-eslint/no-empty-function + () => {}, +); + +const LoadingStateContext = createContext(false); + +interface LoadingProviderProps { + children: React.ReactElement | React.ReactElement[]; +} + +export const LoadingProvider = ({ children }: LoadingProviderProps) => { + const [loading, setLoading] = useState(false); + + return ( + + + {children} + + + + ); +}; + +export const useLoadingState = () => useContext(LoadingStateContext); +export const useLoadingDispatch = () => useContext(LoadingDispatchContext); From 4c25003a81559a0e3bf297b820deb70591f3dc82 Mon Sep 17 00:00:00 2001 From: younoah Date: Sat, 12 Mar 2022 21:07:32 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20HomePage=EC=97=90=20LoadingProvider?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/HomePage/index.jsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/pages/HomePage/index.jsx b/src/pages/HomePage/index.jsx index 673dee5..f67fcc6 100644 --- a/src/pages/HomePage/index.jsx +++ b/src/pages/HomePage/index.jsx @@ -4,9 +4,9 @@ import { useModals } from '@/hooks'; import styled from '@emotion/styled'; import { useWaffleCardsDispatch } from '@/contexts'; import { waffleCardApi, commentApi, likeApi } from '@/apis'; +import { useLoadingDispatch } from '@/contexts'; import { Tab, - Spinner, WaffleCardsList, ScrollGuide, Modals, @@ -17,11 +17,11 @@ import { const HomePage = () => { const { openModal } = useModals(); const [tabValue, setTabValue] = useState('total'); - const [isLoading, setIsLoading] = useState(false); + const setLoading = useLoadingDispatch(); const { setWaffleCardsByType, refreshWaffleCards } = useWaffleCardsDispatch(); const handleClickWaffleCard = async waffleCard => { - setIsLoading(true); + setLoading(true); try { const response = await commentApi.getCommentsByWaffleCardId( @@ -44,7 +44,7 @@ const HomePage = () => { }); } - setIsLoading(false); + setLoading(false); }; const handleClickWaffleCardCreate = async () => { @@ -78,10 +78,10 @@ const HomePage = () => { }).then(async result => { if (result.isConfirmed) { try { - setIsLoading(true); + setLoading(true); await waffleCardApi.deleteWaffleCard(waffleCardId); await refreshWaffleCards(tabValue); - setIsLoading(false); + setLoading(false); } catch (error) { console.error( `in ChattingCardModal : 댓글 삭제 실패 - ${error.message}`, @@ -109,13 +109,13 @@ const HomePage = () => { useEffect(() => { const initWaffleCardsByType = async () => { - setIsLoading(true); + setLoading(true); await setWaffleCardsByType(tabValue, { cached: true }); - setIsLoading(false); + setLoading(false); }; initWaffleCardsByType(); - }, [setWaffleCardsByType, tabValue]); + }, [setLoading, setWaffleCardsByType, tabValue]); return ( @@ -128,7 +128,6 @@ const HomePage = () => { onClickWaffleCardDelete={handleClickWaffleCardDelete} onClickLikeToggle={handleClickLikeToggle} /> - {tabValue === 'total' && } From 4c262a6de6025bf1d75b3de4cef1df684e12abdf Mon Sep 17 00:00:00 2001 From: younoah Date: Sat, 12 Mar 2022 21:07:52 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20LoginPage=EC=97=90=20LoadingProvide?= =?UTF-8?q?r=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LoginPage/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx index 9b7370e..54fbf63 100644 --- a/src/pages/LoginPage/index.tsx +++ b/src/pages/LoginPage/index.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import Swal from 'sweetalert2'; import { useNavigate } from 'react-router-dom'; import Common from '@/styles'; @@ -5,11 +6,13 @@ import { useForm } from '@/hooks'; import { useUser } from '@/hooks'; import styled from '@emotion/styled'; import { formValidator } from '@/utils'; -import { Text, Button, Input, BackButton, Spinner } from '@/components'; +import { useLoadingDispatch } from '@/contexts'; +import { Text, Button, Input, BackButton } from '@/components'; const LoginPage = () => { const { login } = useUser(); const navigate = useNavigate(); + const setLoading = useLoadingDispatch(); const { isLoading, errors, handleChange, handleSubmit } = useForm({ initialValues: { email: '', @@ -57,6 +60,10 @@ const LoginPage = () => { navigate('/signup'); }; + useEffect(() => { + setLoading(isLoading); + }, [isLoading, setLoading]); + return ( @@ -82,7 +89,7 @@ const LoginPage = () => { 가입하기 - + {/* */} ); }; From 5daf2da358716db4923cc71535917a519d4cca0e Mon Sep 17 00:00:00 2001 From: younoah Date: Sat, 12 Mar 2022 21:08:12 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LoginPage/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx index 54fbf63..0200fc0 100644 --- a/src/pages/LoginPage/index.tsx +++ b/src/pages/LoginPage/index.tsx @@ -89,7 +89,6 @@ const LoginPage = () => { 가입하기 - {/* */} ); }; From 0b7ff865e26eefa0d8e2406699c6dab4a5d29e46 Mon Sep 17 00:00:00 2001 From: younoah Date: Sat, 12 Mar 2022 21:26:27 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat=20:=20SignUpPage=EC=97=90=20LoadingPro?= =?UTF-8?q?vider=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUpPage/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/SignUpPage/index.tsx b/src/pages/SignUpPage/index.tsx index 2e69436..07ae562 100644 --- a/src/pages/SignUpPage/index.tsx +++ b/src/pages/SignUpPage/index.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import Swal from 'sweetalert2'; import { useNavigate } from 'react-router-dom'; import Common from '@/styles'; @@ -5,10 +6,12 @@ import { authApi } from '@/apis'; import { useForm } from '@/hooks'; import styled from '@emotion/styled'; import { formValidator } from '@/utils'; -import { Text, Button, Input, BackButton, Spinner } from '@/components'; +import { useLoadingDispatch } from '@/contexts'; +import { Text, Button, Input, BackButton } from '@/components'; const SignUpPage = () => { const navigate = useNavigate(); + const setLoading = useLoadingDispatch(); const { isLoading, errors, handleChange, handleSubmit } = useForm({ initialValues: { email: '', @@ -67,6 +70,10 @@ const SignUpPage = () => { }, }); + useEffect(() => { + setLoading(isLoading); + }, [isLoading, setLoading]); + return ( @@ -94,7 +101,6 @@ const SignUpPage = () => { 가입하기 - ); }; From 863f8b84ae40af861294800229eb3e52e1597ebc Mon Sep 17 00:00:00 2001 From: younoah Date: Mon, 14 Mar 2022 20:06:52 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor=20:=20=EC=B4=88=EA=B8=B0=EA=B0=92?= =?UTF-8?q?=20=EA=B0=84=EA=B2=B0=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/contexts/loading/loadingProvider.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/contexts/loading/loadingProvider.tsx b/src/contexts/loading/loadingProvider.tsx index e804478..75f08de 100644 --- a/src/contexts/loading/loadingProvider.tsx +++ b/src/contexts/loading/loadingProvider.tsx @@ -1,10 +1,9 @@ import React, { createContext, useContext, useState } from 'react'; import { Spinner } from '@/components'; -const LoadingDispatchContext = createContext<(loading: boolean) => void>( - // eslint-disable-next-line @typescript-eslint/no-empty-function - () => {}, -); +const LoadingDispatchContext = createContext<(loading: boolean) => void>(() => { + return; +}); const LoadingStateContext = createContext(false);