useUser custom hook 사용

src/components/Admin.tsx

@@ -6,18 +6,16 @@ import { useHistory, useParams } from "react-router-dom";
 import PlayerListItem from "./PlayerListItem";
 import AddMatch from "./AddMatch";
 import { CollectionName } from "../collections";
+import { useUser } from "../customHooks/useUser";
 
 const Admin = (): JSX.Element => {
   const history = useHistory();
   const { id } = useParams<{ id: string }>();
-  const [user, setUser] = useState(firebase.auth().currentUser);
   const [idToPlayers, setIdToPlayers] = useState<Map<string, string>>(
     new Map()
   );
 
-  useEffect(() => {
-    firebase.auth().onAuthStateChanged(setUser);
-  }, []);
+  const user = useUser();
 
   useEffect(() => {
     (async () => {

src/components/Header.test.tsx

@@ -5,14 +5,16 @@ import { fireAntEvent } from "../setupTests";
 
 describe("Test", () => {
   test("Sign In", async () => {
+    const fakeUser = {} as firebase.User;
     ((firebase.auth as unknown) as jest.Mock).mockReturnValue({
       currentUser: null,
-      onAuthStateChanged: jest.fn(),
+      onAuthStateChanged: (callback: (user: firebase.User | null) => void) => {
+        callback(null);
+      },
       signInWithPhoneNumber: jest.fn().mockResolvedValue({
-        confirm: jest.fn().mockResolvedValue({
-          additionalUserInfo: { isNewUser: false },
-          user: {},
-        }),
+        confirm: jest.fn().mockImplementation((callback: (user: firebase.User | null) => void) => {
+          callback(fakeUser);
+        })
       }),
     });
     ((firebase.firestore as unknown) as jest.Mock).mockReturnValue({
@@ -42,10 +44,13 @@ describe("Test", () => {
   });
 
   test("Sign Out", async () => {
+    const fakeUser = null;
     ((firebase.auth as unknown) as jest.Mock).mockReturnValue({
       onAuthStateChanged: jest.fn(),
       currentUser: {},
-      signOut: jest.fn().mockResolvedValue(null),
+      signOut: jest.fn().mockImplementation((callback: (user: firebase.User | null) => void) => {
+        callback(null);
+      }),
     });
 
     render(<Header />);
@@ -57,6 +62,7 @@ describe("Test", () => {
   test("Sign In Status", async () => {
     const fakeUser = {} as firebase.User;
     ((firebase.auth as unknown) as jest.Mock).mockReturnValue({
+      currentUser: {},
       onAuthStateChanged: (callback: (user: firebase.User) => void) => {
         callback(fakeUser);
       },

src/components/Header.tsx

@@ -1,23 +1,20 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { Row, Col, Modal } from "antd";
 import "antd/dist/antd.css";
 import "./Header.css";
 import firebase from "firebase";
 import { useHistory, Link } from "react-router-dom";
 import { CollectionName } from "../collections";
+import { useUser } from "../customHooks/useUser";
 
 let appVerifier: firebase.auth.ApplicationVerifier | null = null;
 
 const Header = (): JSX.Element => {
   const history = useHistory();
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [phoneNumber, setPhoneNumber] = useState("");
-  const [user, setUser] = useState(firebase.auth().currentUser);
   const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    firebase.auth().onAuthStateChanged(setUser);
-  }, []);
+  const user = useUser();
 
   const showModal = () => {
     setIsModalVisible(true);
@@ -65,8 +62,6 @@ const Header = (): JSX.Element => {
       hideModal();
       if (isNewUser) {
         history.push("/signup");
-      } else {
-        setUser(user);
       }
     } catch (error) {
       window.alert(error);
@@ -77,7 +72,6 @@ const Header = (): JSX.Element => {
   const signOut = async () => {
     try {
       await firebase.auth().signOut();
-      setUser(null);
     } catch (error) {
       window.alert(error);
     }

src/components/MatchDetail.tsx

@@ -12,19 +12,16 @@ import {
 } from "../globalFunction";
 import ReservationStatus from "./ReservationStatus";
 import { CollectionName } from "../collections";
+import { useUser } from "../customHooks/useUser";
 
 const MatchDetail = (): JSX.Element | null => {
   const history = useHistory();
   const [match, setMatch] = useState<Match | null>(null);
-  const [user, setUser] = useState(firebase.auth().currentUser);
   const [reservationStatus, setReservationStatus] = useState<Status>(
     "신청가능"
   );
   const { id } = useParams<{ id: string }>();
-
-  useEffect(() => {
-    firebase.auth().onAuthStateChanged(setUser);
-  }, []);
+  const user = useUser();
 
   useEffect(() => {
     (async () => {

src/components/MatchList.tsx

@@ -7,17 +7,14 @@ import { Match } from "../types";
 import { Button, Spin } from "antd";
 import { Link } from "react-router-dom";
 import { CollectionName } from "../collections";
+import { useUser } from "../customHooks/useUser";
 
 const MatchList = (): JSX.Element => {
   const [dateKeyToMatches, setDateKeyToMatches] = useState<
     Map<string, Match[]>
   >(new Map());
-  const [user, setUser] = useState(firebase.auth().currentUser);
   const [isAdmin, setIsAdmin] = useState(false);
-
-  useEffect(() => {
-    firebase.auth().onAuthStateChanged(setUser);
-  }, []);
+  const user = useUser();
 
   useEffect(() => {
     async function getMatches() {

src/components/MatchListItem.tsx

@@ -4,23 +4,19 @@ import "antd/dist/antd.css";
 import "./MatchListItem.css";
 import { Match, Status } from "../types";
 import { Link } from "react-router-dom";
-import firebase from "firebase";
 import { getReservationStatus } from "../globalFunction";
 import ReservationStatus from "./ReservationStatus";
+import { useUser } from "../customHooks/useUser";
 
 const MatchListItem = (matchProps: {
   match: Match;
   isAdmin: boolean;
 }): JSX.Element => {
   const { match, isAdmin } = matchProps;
-  const [user, setUser] = useState(firebase.auth().currentUser);
   const [reservationStatus, setReservationStatus] = useState<Status>(
     "신청가능"
   );
-
-  useEffect(() => {
-    firebase.auth().onAuthStateChanged(setUser);
-  }, []);
+  const user = useUser();
 
   useEffect(() => {
     (async () => {

src/customHooks/useUser.tsx

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+import firebase from "firebase";
+
+export function useUser(): firebase.User | null {
+  const [user, setUser] = useState(firebase.auth().currentUser);
+
+  useEffect(() => {
+    firebase.auth().onAuthStateChanged(setUser);
+  }, []);
+
+  return user;
+}