google OAuth追加

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+memo

public/index.html

@@ -6,8 +6,11 @@
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
+  <meta name="google-signin-client_id" content="193248965975-lm5drb0mkrhepcipvomamrjamgcfopkq.apps.googleusercontent.com">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <script src="https://apis.google.com/js/api.js"></script>
+  <script type='text/javascript' src='https://apis.google.com/js/platform.js' async defer></script>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/actions/index.js

@@ -31,7 +31,7 @@ export const changeTopic = (server) => ({
   payload: server,
 });
 
-export const getInitialData = (userId) => async (dispatch) => {
+export const getInitialData = (oAuthData) => async (dispatch) => {
   let url = `${baseUrl}/user?`;
   const res = await axios.get(url);
   dispatch({ type: GET_INITIAL_DATA, payload: res.data });

src/components/App.css

@@ -120,6 +120,7 @@ body {
   width: 100%;
   box-sizing: border-box;
   background: #2a2c31;
+  list-style: none;
 }
 
 /* Messages.jsx */

src/components/GoogleOAuth.jsx

@@ -0,0 +1,60 @@
+/* global gapi */
+import React, { useEffect, useRef } from "react";
+import { Button } from "@material-ui/core";
+import { useDispatch, useSelector } from "react-redux";
+
+import { signIn, signOut } from "../actions";
+
+//ログイン画面
+export const GoogleOAuth = () => {
+  const user = useSelector((state) => state.user);
+  const dispatch = useDispatch();
+
+  let auth = useRef();
+
+  useEffect(() => {
+    //OAuth接続のおまじない
+    window.gapi.load("client:auth2", () => {
+      window.gapi.client
+        .init({
+          clientId:
+            "193248965975-lm5drb0mkrhepcipvomamrjamgcfopkq.apps.googleusercontent.com",
+          scope: "email",
+        })
+        // thenを使用することで、処理が成功した場合のみ、処理を進めることができる
+        .then(() => {
+          auth.current = window.gapi.auth2.getAuthInstance();
+          console.log(auth);
+          onAuthChange(auth.current.isSignedIn.get());
+          // Listen for changes
+          this.auth.isSignedIn.listen(() => {
+            onAuthChange(auth.current.isSignedIn.get());
+          });
+        });
+    });
+    console.log(auth.current);
+  }, []);
+
+  const onLoginButtonClick = (action) => {
+    if (action === "login") auth.current.signIn();
+    else auth.current.signOut();
+  };
+
+  const onAuthChange = (isSignedIn) => {
+    //useのsignのstateをdispatchから更新
+    if (isSignedIn) {
+      const { Eea, ig, U3 } = auth.current.currentUser.get().getBasicProfile();
+      dispatch(signIn({ userId: Eea, userName: ig, userEmail: U3 }));
+    } else dispatch(signOut(auth.current.currentUser.get().getId()));
+  };
+
+  return (
+    <div>
+      {user.isSignedIn ? (
+        <Button onClick={() => onLoginButtonClick("logout")}>Sign Out</Button>
+      ) : (
+        <Button onClick={() => onLoginButtonClick("login")}>Sign In</Button>
+      )}
+    </div>
+  );
+};

src/components/Sidebar.jsx

@@ -12,38 +12,19 @@ import {
   Tooltip,
   IconButton,
   Typography,
-  TextField,
-  Snackbar,
+  ListItemText,
+  ListItemSecondaryAction,
 } from "@material-ui/core";
 
 import { changeServer, changeTopic } from "../actions";
+import { GoogleOAuth } from "./GoogleOAuth";
 
 export const Sidebar = ({ topics, servers, changeDrawerVisible }) => {
   // Get store state
   const { activeServer } = useSelector((state) => state.chat);
   const user = useSelector((state) => state.user);
   const dispatch = useDispatch();
 
-  //Local state
-  //ユーザーネームを変更できる
-  const [userName, changeUserName] = useState(user.userName);
-  const [snackBarVisible, changeSnackBarVisible] = useState(false);
-  const [snackBarMessage, changeSnackBarMessage] = useState("");
-
-  const handleKeyPress = (e) => {
-    if (e.key === "Enter") {
-      //Enterで一旦SignInのactionとする
-      dispatch({
-        type: "SIGN_IN",
-        payload: { userId: "1", userName: userName },
-      });
-      changeSnackBarMessage(`Name changed to : ${userName}`);
-      //Snackbarは通知なので一時的にtrueに
-      changeSnackBarVisible(true);
-      setTimeout(() => changeSnackBarVisible(false), 2000);
-    }
-  };
-
   return (
     <div className="sidebar-container">
       <div className="servers-container">
@@ -92,18 +73,11 @@ export const Sidebar = ({ topics, servers, changeDrawerVisible }) => {
                 <PersonIcon />
               </Avatar>
             </ListItemAvatar>
-            <TextField
-              id="user-name"
-              value={userName}
-              onChange={(e) => changeUserName(e.target.value)}
-              onKeyPress={(e) => handleKeyPress(e)}
-            />
+            <ListItemText primary={user.userName} />
+            <ListItemSecondaryAction>
+              <GoogleOAuth />
+            </ListItemSecondaryAction>
           </ListItem>
-          <Snackbar
-            anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-            open={snackBarVisible}
-            message={snackBarMessage}
-          />
         </div>
       </div>
     </div>

src/reducers/userReducer.jsx

@@ -3,8 +3,8 @@ import { SIGN_IN, SIGN_OUT } from "../actions/types";
 const initialState = {
   isSignedIn: false,
   isAdmin: false,
-  userId: null,
-  userName: "anonymous" + Math.floor(Math.random(0) * 100),
+  userName: "terry" + Math.floor(Math.random(0) * 100),
+  userEmail: null,
 };
 
 export const userReducer = (state = initialState, action) => {
@@ -16,13 +16,14 @@ export const userReducer = (state = initialState, action) => {
         //payloadにこのactionだとuserデータが入っている
         userId: action.payload.userId,
         userName: action.payload.userName,
+        userEmail: action.payload.userEmail,
       };
     case SIGN_OUT:
       return {
         ...state,
         isSignedIn: false,
         userId: null,
-        userName: "anonymous" + Math.random(0) * 100,
+        userName: "terry" + Math.floor(Math.random(0) * 100),
       };
     default:
       return state;