Merge pull request #104 from nkc-ug/feature/userData

ユーザー情報確認機能実装/ユーザー認証関連を分離

src/components/auth/LoginButton.tsx

@@ -0,0 +1,41 @@
+import { useState, useContext } from 'react';
+import { Button } from '@mui/material';
+import { Auth } from './AuthGoogleSigninPopup';
+import { IsLoginContext } from '../../provider/ContextProviders';
+import { EmailContext } from '../../provider/ContextProviders';
+
+export const LoginButton = () => {
+  const [loginButtonText, setLoginButtonText] = useState('ろぐいん');
+  const [isLogin, setIsLogin] = useContext(IsLoginContext);
+  const [email, setEmail] = useContext(EmailContext);
+
+  const handleLoginClick = async () => {
+    if (!isLogin) {
+      // ログイン作業の分岐
+      const fetchEmail = String(
+        localStorage.getItem('email') !== null ? localStorage.getItem('email') : ''
+      );
+      setEmail(fetchEmail);
+      if (fetchEmail === '') {
+        // ローカルストレージにEmailが格納されていない場合の処理(Authでログインし、Emailを取得後ローカルストレージに格納)
+        const fetchEmail = await Auth();
+        setEmail(fetchEmail);
+        localStorage.setItem('email', fetchEmail);
+      }
+      setIsLogin(true);
+    } else {
+      // ログアウト作業の分岐
+      localStorage.clear();
+      setEmail('');
+      setIsLogin(false);
+    }
+    setLoginButtonText(loginButtonText === 'ろぐいん' ? 'ろぐあうと' : 'ろぐいん');
+    setIsLogin(!isLogin);
+  };
+
+  return (
+    <Button variant="contained" onClick={handleLoginClick}>
+      {loginButtonText}
+    </Button>
+  );
+};

src/components/auth/UserDataButton.tsx

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+import { Button } from '@mui/material';
+import { IsLoginContext } from '../../provider/ContextProviders';
+import { UserDataModal } from './UserDataModal';
+import { useDiscloser } from '../../hooks/useDiscloser';
+
+export const UserDataButton = () => {
+  const [isLogin, setIsLogin] = useContext(IsLoginContext);
+  const [modalOpen, handleUserModalOpen, handleUserModalClose] = useDiscloser(false);
+
+  const userDataButton = async () => {
+    handleUserModalOpen();
+  };
+
+  return isLogin ? (
+    <div>
+      <UserDataModal open={modalOpen} closeClick={handleUserModalClose} />
+      <Button variant="outlined" color="primary" onClick={userDataButton}>
+        ゆーざーでーた
+      </Button>
+    </div>
+  ) : null;
+};

src/components/auth/UserDataModal.tsx

@@ -0,0 +1,80 @@
+import { FC, useContext, useEffect, useState } from 'react';
+import Backdrop from '@mui/material/Backdrop';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Typography from '@mui/material/Typography';
+import { Button, Stack } from '@mui/material';
+import { modalStyle } from '../../styles/modalStyle';
+import { EmailContext } from '../../provider/ContextProviders';
+import { getAuth } from './getAuth';
+import { UserDataType } from '../../types/UserDataType';
+
+type Props = {
+  open: boolean;
+  closeClick: React.MouseEventHandler<HTMLButtonElement> | undefined;
+};
+
+export const UserDataModal: FC<Props> = ({ open, closeClick }) => {
+  const [email, setEmail] = useContext(EmailContext);
+  const [userData, setUserData] = useState<UserDataType>();
+  useEffect(() => {
+    // useEffect自体ではasyncの関数を受け取れないので内部で関数を定義して呼び出す。
+    const access_db = async () => {
+      const response = await getAuth(email);
+      setUserData(response);
+    };
+    access_db();
+  }, []);
+  const labelList = new Map([
+    [0, 'ゆーざーID'],
+    [1, email],
+    [2, 'ゆーざーねーむ'],
+    [3, userData?.userName],
+  ]);
+
+  return (
+    <div>
+      {/* <IconButton onClick={openClick} color="primary">
+        <QuestionMarkIcon fontSize="large" color="primary" />
+      </IconButton> */}
+      <Modal
+        open={open}
+        onClose={closeClick}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={open}>
+          <Stack sx={modalStyle} spacing={3}>
+            <Typography
+              id="transition-modal-title"
+              sx={{
+                variant: 'h5',
+                textAlign: 'center',
+                fontSize: '30px',
+              }}
+            >
+              ゆーざーでーた
+            </Typography>
+            <Stack justifyContent="center" spacing={1}>
+              {[...labelList].map(([key]) => (
+                <Typography key={key} sx={{ mt: 2, variant: 'h6', textAlign: 'center' }}>
+                  {labelList.get(key)}
+                </Typography>
+              ))}
+            </Stack>
+            <Stack justifyContent="center" direction="row">
+              <Button variant="contained" sx={{ color: 'white' }} onClick={closeClick}>
+                とじる
+              </Button>
+            </Stack>
+          </Stack>
+        </Fade>
+      </Modal>
+    </div>
+  );
+};

src/pages/SettingsView.tsx

@@ -1,30 +1,22 @@
 import { BottomNavigationAction, Slider, Typography } from '@mui/material';
 import { Container } from '@mui/material';
 import { Stack } from '@mui/material';
-import React, { useEffect,useState, useContext } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import VolumeDownIcon from '@mui/icons-material/VolumeDown';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import { Button } from '@mui/material';
-import { Auth } from '../components/auth/AuthGoogleSigninPopup';
-import { getAuth } from '../components/auth/getAuth';
-import { UserDataType } from '../types/UserDataType';
-import { LoginContext } from '../provider/ContextProviders';
-import { EmailContext } from '../provider/ContextProviders';
 import bgm from '../Audio/Bgm.mp3';
 import { VolumeDown, VolumeUp } from '@mui/icons-material';
 import backgroundgImage from '../assets/tutorial.png';
 import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import { LoginButton } from '../components/auth/LoginButton';
+import { UserDataButton } from '../components/auth/UserDataButton';
 
 export const SettingsView = () => {
   const [value, setValue] = useState<number>(50);
   const [isPlaying, setIsPlaying] = useState(false);
 
   const audioRef = React.useRef<HTMLAudioElement | null>(null);
 
-  const [loginButtonText, setLoginButtonText] = useState('ろぐいん');
-  const [login, setLogin] = useContext(LoginContext);
-  const [email, setEmail] = useContext(EmailContext);
-
   const handleChange = (event: Event, newValue: number | number[]) => {
     setValue(newValue as number);
     if (audioRef.current) {
@@ -64,27 +56,6 @@ export const SettingsView = () => {
     }
   };
 
-  const loginButton = async () => {
-    if (!login) {
-      const fetchEmail = String(
-        localStorage.getItem('email') !== null ? localStorage.getItem('email') : ''
-      );
-      setEmail(fetchEmail);
-      if (fetchEmail === '') {
-        const fetchEmail = await Auth();
-        setEmail(fetchEmail);
-        localStorage.setItem('email', fetchEmail);
-      }
-      setLoginButtonText('ろぐあうと');
-      setLogin(true);
-    } else {
-      localStorage.clear();
-      setEmail('');
-      setLoginButtonText('ろぐいん');
-      setLogin(false);
-    }
-  };
-
   return (
     <Stack direction="row" justifyContent="center" spacing={2}>
       <Container
@@ -108,9 +79,8 @@ export const SettingsView = () => {
           <Slider aria-label="Volume" value={value} onChange={handleChange} />
           <VolumeUp />
         </Stack>{' '}
-        <Button variant="contained" onClick={loginButton}>
-          {loginButtonText}
-        </Button>
+        <UserDataButton />
+        <LoginButton />
       </Container>
     </Stack>
   );

src/provider/ContextProviders.tsx

@@ -31,7 +31,7 @@ export const MonsterContext = createContext<StringContextType>({} as StringConte
 //バトルのためにモンスターの属性値を保持するコンテキスト
 export const MonsterNumberContext = createContext<NumberContextType>({} as NumberContextType);
 // ログイン状態を保持するコンテキスト
-export const LoginContext = createContext<BooleanContextType>({} as BooleanContextType);
+export const IsLoginContext = createContext<BooleanContextType>({} as BooleanContextType);
 // ユーザーのEmailを保持するコンテキスト
 export const EmailContext = createContext<StringContextType>({} as StringContextType);
 
@@ -50,21 +50,19 @@ export const ContextProviders: FC<Props> = ({ children }) => {
   //monsterの属性値を保持するステート
   const [monsternumber, setMonsterNumber] = useState(0);
   // ログイン状態を保持するステート
-  const [login, setLogin] = useState(false);
+  const [isLogin, setIsLogin] = useState(false);
   // ユーザーのEmailを保持するステート
-  const [email, setEmail] = useState('null');
+  const [email, setEmail] = useState('');
 
   return (
     <GoatClothesContext.Provider value={[clothesUrl, setClothesUrl]}>
       <GoatContext.Provider value={[goatUrl, setGoatUrl]}>
         <BackgroundContext.Provider value={[backgroundUrl, setBackgroundUrl]}>
           <MonsterContext.Provider value={[monsterUrl, setMonsterUrl]}>
             <MonsterNumberContext.Provider value={[monsternumber, setMonsterNumber]}>
-              <LoginContext.Provider value={[login, setLogin]}>
-               <EmailContext.Provider value={[email, setEmail]}>
-                 {children}
-                </EmailContext.Provider>
-              </LoginContext.Provider>
+              <IsLoginContext.Provider value={[isLogin, setIsLogin]}>
+                <EmailContext.Provider value={[email, setEmail]}>{children}</EmailContext.Provider>
+              </IsLoginContext.Provider>
             </MonsterNumberContext.Provider>
           </MonsterContext.Provider>
         </BackgroundContext.Provider>