Merge branch 'develop' into feature/195_syntax_highlight

git-baboo · Mar 5, 2022 · 004e1b4 · 004e1b4
2 parents 179d79c + 2c59290
commit 004e1b4
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 94 deletions.
diff --git a/src/components/AuthContext.tsx b/src/components/AuthContext.tsx
diff --git a/src/components/AuthProvider.tsx b/src/components/AuthProvider.tsx
@@ -0,0 +1,40 @@
+import { User } from "firebase/auth";
+import { createContext, useEffect, useState } from "react";
+
+import { auth } from "@/utils/firebase";
+
+type AuthContextProps = {
+  currentUser: User | null | undefined;
+  signInCheck: boolean;
+};
+
+const AuthContext = createContext<AuthContextProps>({
+  currentUser: undefined,
+  signInCheck: false,
+});
+
+const AuthProvider = ({ children }: { children: JSX.Element }) => {
+  const [currentUser, setCurrentUser] = useState<User | null | undefined>(
+    undefined
+  );
+  const [signInCheck, setSignInCheck] = useState<boolean>(false);
+
+  useEffect(() => {
+    auth.onAuthStateChanged(async (user) => {
+      if (user) {
+        setCurrentUser(user);
+        setSignInCheck(true);
+      } else {
+        setSignInCheck(true);
+      }
+    });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ currentUser, signInCheck }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export { AuthContext, AuthProvider };
diff --git a/src/components/login/LoginButton.tsx b/src/components/login/LoginButton.tsx
@@ -1,17 +1,20 @@
 import { Button } from "@chakra-ui/react";
-import React from "react";
+import React, { useContext } from "react";
 import { DiGithubBadge } from "react-icons/di";
 
+import { AuthContext } from "@/components/AuthProvider";
 import { useAuth } from "@/hooks/useAuth";
 
 const LoginButton = () => {
+  const { signInCheck } = useContext(AuthContext);
   const { login } = useAuth();
 
   return (
     <Button
       leftIcon={<DiGithubBadge color="black" size={25} />}
       bgColor="white"
       color="black"
+      isLoading={!signInCheck}
       onClick={login}
     >
       ログイン

diff --git a/src/hooks/useApi.ts b/src/hooks/useApi.ts
@@ -1,12 +1,12 @@
 import { Octokit } from "@octokit/rest";
 
-import { useCurrentUser } from "@/hooks/useCurrentUser";
+import { currentUserSelectors } from "@/store/currentUserState";
 
 export const useApi = () => {
-  const { accessToken } = useCurrentUser();
+  const currentUser = currentUserSelectors.useCurrentUser();
 
   const octokit = new Octokit({
-    auth: accessToken,
+    auth: currentUser.accessToken,
   });
 
   return { octokit };

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -1,14 +1,12 @@
 import { GithubAuthProvider, signInWithRedirect, signOut } from "firebase/auth";
 import { useRouter } from "next/router";
-import { useSetRecoilState } from "recoil";
 
-import { currentUserState } from "@/store/currentUserState";
-import { CurrentUserType } from "@/types/CurrentUserType";
+import { currentUserActions } from "@/store/currentUserState";
 import { auth } from "@/utils/firebase";
 
 export const useAuth = () => {
   const router = useRouter();
-  const setCurrentUser = useSetRecoilState<CurrentUserType>(currentUserState);
+  const updateCurrentUser = currentUserActions.useUpdateCurrentUser();
   const provider = new GithubAuthProvider();
   provider.addScope("repo");
 
@@ -18,7 +16,7 @@ export const useAuth = () => {
 
   const logout = () => {
     signOut(auth);
-    setCurrentUser({
+    updateCurrentUser({
       isSignedIn: false,
       username: "",
       accessToken: "",

diff --git a/src/hooks/useCurrentUser.ts b/src/hooks/useCurrentUser.ts
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,20 +2,16 @@ import { ChakraProvider } from "@chakra-ui/react";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { useReducer } from "react";
 import { RecoilRoot } from "recoil";
 
-import AuthContext from "@/components/AuthContext";
-import authReducer from "@/utils/authReducer";
+import { AuthProvider } from "@/components/AuthProvider";
 
 import "prismjs/themes/prism.css";
 import "@/style/difffile.css";
 
 const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
-  const [state] = useReducer(authReducer.reducer, authReducer.initialState);
-
   return (
-    <AuthContext.Provider value={state}>
+    <AuthProvider>
       <ChakraProvider>
         <RecoilRoot>
           <Head>
@@ -24,7 +20,7 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
           <Component {...pageProps} />
         </RecoilRoot>
       </ChakraProvider>
-    </AuthContext.Provider>
+    </AuthProvider>
   );
 };
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,24 +3,24 @@ import { Octokit } from "@octokit/rest";
 import { getRedirectResult, GithubAuthProvider } from "firebase/auth";
 import React, { useEffect, useState } from "react";
 import { BsCheckCircleFill } from "react-icons/bs";
-import { useSetRecoilState } from "recoil";
 
 import Layout from "@/components/Layout";
 import NoPullsMessage from "@/components/top/NoPullsMessage";
 import PullRequestList from "@/components/top/PullRequestList";
 import withAuth from "@/hoc/withAuth";
 import { useApi } from "@/hooks/useApi";
-import { useCurrentUser } from "@/hooks/useCurrentUser";
-import { currentUserState } from "@/store/currentUserState";
-import { CurrentUserType } from "@/types/CurrentUserType";
+import {
+  currentUserActions,
+  currentUserSelectors,
+} from "@/store/currentUserState";
 import { TopPullRequestType } from "@/types/PullRequestType";
 import { auth } from "@/utils/firebase";
 
 const TopPage = () => {
   const [pulls, setPulls] = useState<TopPullRequestType[]>([]);
   const { octokit } = useApi();
-  const { username } = useCurrentUser();
-  const setCurrentUser = useSetRecoilState<CurrentUserType>(currentUserState);
+  const currentUser = currentUserSelectors.useCurrentUser();
+  const updateCurrentUser = currentUserActions.useUpdateCurrentUser();
 
   useEffect(() => {
     getRedirectResult(auth).then((result) => {
@@ -34,27 +34,22 @@ const TopPage = () => {
           });
 
           octokit.request("GET /user").then((res) => {
-            setCurrentUser((prevState) => ({
-              ...prevState,
+            updateCurrentUser({
               username: res.data.login,
-            }));
+              isSignedIn: true,
+              accessToken: String(token),
+            });
           });
-
-          setCurrentUser((prevState) => ({
-            ...prevState,
-            isSignedIn: true,
-            accessToken: String(token),
-          }));
         }
       }
     });
   }, []);
 
   useEffect(() => {
-    if (username) {
+    if (currentUser.username) {
       octokit
         .request("GET /search/issues", {
-          q: `is:pr+user-review-requested:${username}+state:open`,
+          q: `is:pr+user-review-requested:${currentUser.username}+state:open`,
         })
         .then((response) => {
           const items = response.data.items;
@@ -77,7 +72,7 @@ const TopPage = () => {
           setPulls(newPulls);
         });
     }
-  }, [username]);
+  }, [currentUser.username]);
 
   return (
     <Layout

diff --git a/src/store/RecoilKeys.ts b/src/store/RecoilKeys.ts
@@ -0,0 +1,14 @@
+export enum RecoilAtomKeys {
+  CURRENT_USER_STATE = "currentUserState",
+  LOGIN_BUTTON_LOADING_STATE = "loginButtonLoadingState",
+}
+
+export enum RecoilSelectorKeys {
+  CURRENT_USER = "currentUser",
+  LOGIN_BUTTON_LOADING = "loginButtonLoading",
+}
+
+export enum RecoilPersistenceKeys {
+  PERSISTED_CURRENT_USER = "persistedCurrentUser",
+  PERSISTED_LOGIN_BUTTON_LOADING = "persistedLoginButton",
+}
diff --git a/src/store/currentUserState.ts b/src/store/currentUserState.ts
@@ -1,21 +1,66 @@
-import { atom } from "recoil";
+import { useCallback } from "react";
+import { atom, selector, useRecoilValue, useSetRecoilState } from "recoil";
 import { recoilPersist } from "recoil-persist";
 
-import { CurrentUserType } from "@/types/CurrentUserType";
+import {
+  RecoilAtomKeys,
+  RecoilPersistenceKeys,
+  RecoilSelectorKeys,
+} from "@/store/RecoilKeys";
+
+type CurrentUserState = {
+  isSignedIn: boolean;
+  username: string;
+  accessToken: string;
+  reviewId: number;
+};
 
 const { persistAtom } = recoilPersist({
-  key: "persistedCurrentUserState",
+  key: RecoilPersistenceKeys.PERSISTED_CURRENT_USER,
 });
 
-const initialState: CurrentUserType = {
+const initialState: CurrentUserState = {
   isSignedIn: false,
   username: "",
   accessToken: "",
   reviewId: 0,
 };
 
-export const currentUserState = atom<CurrentUserType>({
-  key: "currentUserState",
+const currentUserState = atom<CurrentUserState>({
+  key: RecoilAtomKeys.CURRENT_USER_STATE,
   default: initialState,
   effects_UNSTABLE: [persistAtom],
 });
+
+type CurrentUserActions = {
+  useUpdateCurrentUser: () => (
+    partialCurrentUser: Partial<CurrentUserState>
+  ) => void;
+};
+
+export const currentUserActions: CurrentUserActions = {
+  useUpdateCurrentUser: () => {
+    const setCurrentUser =
+      useSetRecoilState<CurrentUserState>(currentUserState);
+
+    return useCallback((partialCurrentUser) => {
+      setCurrentUser((prevState) => ({
+        ...prevState,
+        ...partialCurrentUser,
+      }));
+    }, []);
+  },
+};
+
+type CurrentUserSelectors = {
+  useCurrentUser: () => CurrentUserState;
+};
+
+const currentUserSelector = selector<CurrentUserState>({
+  key: RecoilSelectorKeys.CURRENT_USER,
+  get: ({ get }) => get(currentUserState),
+});
+
+export const currentUserSelectors: CurrentUserSelectors = {
+  useCurrentUser: () => useRecoilValue<CurrentUserState>(currentUserSelector),
+};
diff --git a/src/types/CurrentUserType.ts b/src/types/CurrentUserType.ts
diff --git a/src/utils/authReducer.ts b/src/utils/authReducer.ts
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
@@ -1,4 +1,4 @@
-import { initializeApp } from "firebase/app";
+import { getApps, initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 
 const firebaseConfig = {
@@ -11,5 +11,8 @@ const firebaseConfig = {
   measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
 };
 
-initializeApp(firebaseConfig);
+if (!getApps().length) {
+  initializeApp(firebaseConfig);
+}
+
 export const auth = getAuth();