Merge pull request #116 from dorimu0/refact/api-login

Lainari · web-flow · commit d10a530904fe · 2024-04-22T20:22:47.000+09:00
recoil persistライブラリを追加し、ログイン状態を維持するように修正
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "react-markdown": "^9.0.1",
     "react-pdf": "^7.7.0",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "swiper": "^11.1.0",
     "ts-node": "^10.9.2"
   },
diff --git a/src/app/intro/googleLogin/page.tsx b/src/app/intro/googleLogin/page.tsx
@@ -3,21 +3,18 @@ import {useEffect} from 'react';
 import Image from 'next/image';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {useSetRecoilState} from 'recoil';
-import {userState} from '@/src/recoil/atoms/userState';
+import userState from '@/src/recoil/atoms/userState';
 import accessTokenState from '@/src/recoil/atoms/accessTokenState';
 import refreshTokenState from '@/src/recoil/atoms/refreshTokenState';
-import isLoginState from '@/src/recoil/atoms/isLoginState';
-import useRecoilStateWithLocalStorage from '@/src/hooks/useRecoilStateWithLocalStorage';
 import postGoogleLogin from '@/src/api/auth/postGoogleLogin';
 import gifs from '@/public/gif';
 import '@/src/styles/variable.css';
 
 const Page = () => {
   const code: string | null = useSearchParams().get('code');
-  const [, setUser] = useRecoilStateWithLocalStorage(userState);
+  const setUser = useSetRecoilState(userState);
   const setAccessToken = useSetRecoilState(accessTokenState);
   const setRefreshToken = useSetRecoilState(refreshTokenState);
-  const setIsLogin = useSetRecoilState(isLoginState);
   const router = useRouter();
   useEffect(() => {
     console.log(code);
@@ -31,7 +28,6 @@ const Page = () => {
           setRefreshToken({refresh_token: res.refresh_token});
           window.localStorage.setItem('access_token', res.access_token);
           window.localStorage.setItem('refresh_token', res.refresh_token);
-          setIsLogin(true);
         }
         router.push('/');
       });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type {Metadata} from 'next';
 import {Inter} from 'next/font/google';
 import {Navbar} from '../components/navbar';
 import {Footer} from '../components/footer';
+import Protect from '../components/protect';
 import RecoilRootContainer from '../components/RecoilRootContainer';
 import './globals.css';
 import '@/src/styles/variable.css';
@@ -18,13 +19,15 @@ const RootLayout = ({children}: {children: React.ReactNode}) => {
     <html lang="en">
       <body className={inter.className}>
         <RecoilRootContainer>
-          <div className="flex h-full relative">
-            <Navbar />
-            <div className="grow overflow-x-auto overflow-y-auto">
-              <div className="mainContainer">{children}</div>
-              <Footer />
+          <Protect>
+            <div className="flex h-full relative">
+              <Navbar />
+              <div className="grow overflow-x-auto overflow-y-auto">
+                <div className="mainContainer">{children}</div>
+                <Footer />
+              </div>
             </div>
-          </div>
+          </Protect>
         </RecoilRootContainer>
       </body>
     </html>
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -2,20 +2,18 @@
 import {useState} from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import {useParams, usePathname, useRouter} from 'next/navigation';
-import {useRecoilState, useRecoilValue} from 'recoil';
-import {userState} from '@/src/recoil/atoms/userState';
-import isLogInState from '@/src/recoil/atoms/isLoginState';
+import {useParams, usePathname} from 'next/navigation';
+import {useRecoilValue} from 'recoil';
+import userState from '@/src/recoil/atoms/userState';
 import {MaterialContainer, MaterialForm} from './material';
 import Profile from './profile';
+import {User} from '@/src/interfaces/user';
 import icons from '@/public/svgs/navbar';
 import '@/src/styles/variable.css';
 
 const Navbar = () => {
-  const isLogin = useRecoilValue(isLogInState);
-  const user = useRecoilState(userState)[0];
+  const user = useRecoilValue(userState) as User;
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const routerTest = useRouter();
 
   const pages = [
     {name: 'Class', icon: icons.group},
@@ -31,10 +29,6 @@ const Navbar = () => {
     return null;
   }
 
-  if (!isLogin || !user) {
-    return routerTest.push('/intro');
-  }
-
   return (
     <div className="w-72 h-full bg-gray-50">
       <div className="relative w-72 px-6 pt-5 navbar flex flex-col">
diff --git a/src/components/navbar/profile/Profile.tsx b/src/components/navbar/profile/Profile.tsx
@@ -1,7 +1,7 @@
 import {useState} from 'react';
 import Image from 'next/image';
 import {useSetRecoilState} from 'recoil';
-import isLogInState from '@/src/recoil/atoms/isLoginState';
+import userState from '@/src/recoil/atoms/userState';
 import EditName from './EditName';
 import Warning from '../../warning/Warning';
 import putUserName from '@/src/api/classUser/putUserName';
@@ -11,7 +11,7 @@ import ClassUser from '@/src/model/User';
 import icons from '@/public/svgs/navbar';
 
 const Profile = ({user, params}: {user: User; params: ParamsProps}) => {
-  const setIsLogin = useSetRecoilState(isLogInState);
+  const setUser = useSetRecoilState(userState);
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   const [isEditOpen, setIsEditOpen] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -32,7 +32,7 @@ const Profile = ({user, params}: {user: User; params: ParamsProps}) => {
   };
 
   const handleClickLogout = () => {
-    setIsLogin(false);
+    setUser(null);
     localStorage.clear();
     console.log('logout');
   };
diff --git a/src/components/protect/Protect.tsx b/src/components/protect/Protect.tsx
@@ -0,0 +1,20 @@
+'use client';
+import {ReactNode, useEffect} from 'react';
+import {useRouter} from 'next/navigation';
+import {useRecoilValue} from 'recoil';
+import userState from '@/src/recoil/atoms/userState';
+
+const Protect = ({children}: {children: ReactNode}) => {
+  const user = useRecoilValue(userState);
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!user) {
+      router.push('/intro');
+    }
+  }, [user, router]);
+
+  return children;
+};
+
+export default Protect;
diff --git a/src/components/protect/index.ts b/src/components/protect/index.ts
@@ -0,0 +1,3 @@
+import Protect from './Protect';
+
+export default Protect;
diff --git a/src/recoil/atoms/isLoginState.ts b/src/recoil/atoms/isLoginState.ts
diff --git a/src/recoil/atoms/userState.ts b/src/recoil/atoms/userState.ts
@@ -1,18 +1,13 @@
 import {atom} from 'recoil';
 import {User} from '@/src/interfaces/user';
+import {recoilPersist} from 'recoil-persist';
+
+const {persistAtom} = recoilPersist();
 
 const userState = atom<User | null>({
   key: 'userState',
   default: null,
+  effects_UNSTABLE: [persistAtom],
 });
 
-const saveStateToLocalStorage = (key: string, value: unknown) => {
-  localStorage.setItem(key, JSON.stringify(value));
-};
-
-const loadStateFromLocalStorage = (key: string) => {
-  const storedState = localStorage.getItem(key);
-  return storedState ? JSON.parse(storedState) : null;
-};
-
-export {userState, saveStateToLocalStorage, loadStateFromLocalStorage};
+export default userState;
diff --git a/yarn.lock b/yarn.lock
@@ -5961,6 +5961,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil-persist@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/recoil-persist/-/recoil-persist-5.1.0.tgz#c4232fe04f2e4b6afcc815baff56f2521f6dcde1"
+  integrity sha512-sew4k3uBVJjRWKCSFuBw07Y1p1pBOb0UxLJPxn4G2bX/9xNj+r2xlqYy/BRfyofR/ANfqBU04MIvulppU4ZC0w==
+
 recoil@^0.7.7:
   version "0.7.7"
   resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
@@ -6407,7 +6412,16 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6491,7 +6505,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -7197,7 +7218,16 @@ wide-align@^1.1.2:
   dependencies:
     string-width "^1.0.2 || 2 || 3 || 4"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Protect from './Protect';`
	`2`	`+`
	`3`	`+export default Protect;`