增加登入檢查狀況

MonospaceTW · Feb 6, 2018 · b1f5bae · b1f5bae
1 parent 68eab86
commit b1f5bae
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 250 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,154 +1,37 @@
 import React, { Component } from "react";
 import { cyan500, blue800, white, red900 } from "material-ui/styles/colors";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
 import getMuiTheme from "material-ui/styles/getMuiTheme";
-import AppBar from "material-ui/AppBar";
-import RaisedButton from "material-ui/RaisedButton";
-import RightIconButton from "./components/RightIconButton";
-import IconButton from "material-ui/IconButton";
 import CreateNewmenu from "./containers/CreateNewmenu";
+import AuthWrapper from "./containers/AuthWrapper";
 import CreateStore from "./containers/CreateStore";
-import TextField from "material-ui/TextField";
-import FirebaseManager from "./utils/FirebaseManager";
-import Modal from "react-modal";
-import FontIcon from "material-ui/FontIcon";
 import styled from "styled-components";
-import _ from "lodash";
 import Store from "./containers/Store";
-import Sidebar from "./components/utils/Sidebar";
 import Login from "./containers/Login";
-import { Grid, Row, Col } from "react-flexbox-grid";
 
 const muiTheme = getMuiTheme({
   palette: {
     textColor: cyan500
   },
   appBar: {
-    height: 50,
+    height: 60,
     zIndex: "20"
   }
 });
 
 export default class App extends Component {
-  state = {
-    sidebar: false,
-    LOGON: "NONE",
-    user: {},
-    LoginModal: false,
-    account: "",
-    password: "",
-    accountErrorText: "",
-    passwordErrorText: ""
-  };
-
-  async componentDidMount() {
-    try {
-      await FirebaseManager.getRedirectResult();
-      if (FirebaseManager.user) {
-        this.setState({ user: FirebaseManager.user, LOGON: "LOGON" });
-      } else if (window.location.pathname !== "/") {
-        window.location = "/";
-      }
-    } catch (error) {}
-  }
-
-  login = async () => {
-    try {
-      await this.logout();
-      const result = await FirebaseManager.signInWithPopup();
-      this.setState({ user: result.user, LOGON: "LOGON", LoginModal: false });
-    } catch (error) {
-      this.setState({ LoginModal: false });
-    }
-  };
-
-  loginWithEmail = async () => {
-    const { account, password } = this.state;
-    if (_.isEmpty(account)) {
-      this.setState({ accountErrorText: "帳號不可為空" });
-    } else if (_.isEmpty(password)) {
-      this.setState({ passwordErrorText: "帳號不可為空" });
-    } else {
-      try {
-        const user = await FirebaseManager.signInWithEmailAndPassword(
-          account,
-          password
-        );
-        this.setState({ user, LOGON: "LOGON", LoginModal: false });
-      } catch (error) {
-        const user = await FirebaseManager.createUserWithEmailAndPassword(
-          account,
-          password
-        );
-        this.setState({ user, LOGON: "LOGON", LoginModal: false });
-      }
-    }
-  };
-
-  logout = async () => {
-    await FirebaseManager.signOut();
-    this.setState({ user: {}, LOGON: "NONE" });
-  };
-
   render() {
     return (
       <MuiThemeProvider muiTheme={muiTheme}>
-        <Grid fluid>
-          <Modal
-            ariaHideApp={false}
-            isOpen={this.state.LoginModal}
-            style={{
-              overlay: {
-                height: "100vh",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: "rgba(0, 0, 0, 0.75)"
-              },
-              content: {
-                margin: "auto",
-                minWidth: 300,
-                minHeight: 250,
-                width: "40vw",
-                height: "30vh"
-              }
-            }}
-            contentLabel="Modal"
-          />
-          <AppBar
-            title="訂便當"
-            onLeftIconButtonClick={() => {
-              if (FirebaseManager.user) {
-                this.setState({ sidebar: true });
-              }
-            }}
-            iconElementLeft={
-              <IconButton
-                tooltipPosition="bottom-left"
-                iconClassName="fa fa-bars"
-              />
-            }
-            iconElementRight={
-              <RightIconButton
-                logout={this.logout}
-                setLoginModal={() => this.setState({ LoginModal: true })}
-                LOGON={this.state.LOGON}
-                user={this.state.user}
-              />
-            }
-          />
-          <Route path="/create/menu/:StoreKey" component={CreateNewmenu} />
-          <Route path="/create/store/" component={CreateStore} />
-          <Route path="/store" component={Store} />
-          <Route exact path="/" component={Login} />
-          <Sidebar
-            openSidebar={() => this.setState({ sidebar: false })}
-            isOpen={this.state.sidebar}
-          />
-        </Grid>
+        <Switch>
+          <AuthWrapper>
+            <Route path="/create/menu/:StoreKey" component={CreateNewmenu} />
+            <Route path="/create/store/" component={CreateStore} />
+            <Route path="/store" component={Store} />
+            <Route exact path="/" component={Login} />
+          </AuthWrapper>
+        </Switch>
       </MuiThemeProvider>
     );
   }

diff --git a/src/components/RightIconButton.js → ...components/AuthWrapper/RightIconButton.js b/src/components/RightIconButton.js → ...components/AuthWrapper/RightIconButton.js
@@ -1,33 +1,41 @@
-import React, {Component} from "react";
+import React, { PureComponent } from "react";
 import propTypes from "prop-types";
 import Avatar from "material-ui/Avatar";
 import IconMenu from "material-ui/IconMenu";
 import IconButton from "material-ui/IconButton";
 import MenuItem from "material-ui/MenuItem";
 import Divider from "material-ui/Divider";
 
-class RightIconButton extends Component {
+class RightIconButton extends PureComponent {
   static propTypes = {
     LOGON: propTypes.string.isRequired,
-    user: propTypes.object.isRequired
+    user: propTypes.object.isRequired,
+    isAuth: propTypes.bool.isRequired
   };
   render() {
-    if (this.props.LOGON === "NONE") {
+    if (this.props.isAuth === false) {
       return (
         <IconMenu
-          iconButtonElement={< IconButton iconClassName = "fa fa-user" iconStyle = {{ color: "white" }}/>}>
-          <MenuItem onClick={this.props.setLoginModal} primaryText="登入"/>
+          iconButtonElement={
+            <IconButton
+              iconClassName="fa fa-user"
+              iconStyle={{ color: "white" }}
+            />
+          }
+        >
+          <MenuItem onClick={this.props.setLoginModal} primaryText="登入" />
         </IconMenu>
       );
     } else {
       return (
         <IconMenu
-          iconButtonElement={< Avatar src = {
-          this.props.user.photoURL
-        } />}>
-          <MenuItem primaryText="其他選項"/>
-          <Divider/>
-          <MenuItem onClick={this.props.logout} primaryText="登出"/>
+          iconButtonElement={
+            <Avatar src="https://pbs.twimg.com/media/CjEvuvBWkAI7Yia.jpg" />
+          }
+        >
+          <MenuItem primaryText="其他選項" />
+          <Divider />
+          <MenuItem onClick={this.props.logout} primaryText="登出" />
         </IconMenu>
       );
     }

diff --git a/src/components/AuthWrapper/index.js b/src/components/AuthWrapper/index.js
@@ -0,0 +1,72 @@
+import React, { PureComponent } from "react";
+import propTypes from "prop-types";
+import AppBar from "material-ui/AppBar";
+import { Grid, Row } from "react-flexbox-grid";
+import FirebaseManager from "../../utils/FirebaseManager";
+import RightIconButton from "./RightIconButton";
+import IconButton from "material-ui/IconButton";
+import Sidebar from "../utils/Sidebar";
+
+class AuthWrapper extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidebar: false
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { auth, match } = this.props;
+    const isAuth = auth.get("isAuth");
+    const nextAuth = nextProps.auth.get("isAuth");
+
+    if (nextAuth !== isAuth && isAuth === false) {
+      this.props.goTo("/");
+    }
+  }
+  componentDidMount() {
+    const { auth, match } = this.props;
+    const isAuth = auth.get("isAuth");
+    if (isAuth === false) {
+      this.props.goTo("/");
+    }
+  }
+  render() {
+    const { auth } = this.props;
+
+    return (
+      <Grid fluid>
+        <AppBar
+          title="訂便當"
+          onLeftIconButtonClick={() => {
+            if (FirebaseManager.user) {
+              this.setState({ sidebar: true });
+            }
+          }}
+          iconElementLeft={
+            <IconButton
+              tooltipPosition="bottom-left"
+              iconClassName="fa fa-bars"
+            />
+          }
+          iconElementRight={
+            <RightIconButton
+              logout={this.logout}
+              setLoginModal={() => this.setState({ LoginModal: true })}
+              isAuth={auth.get("isAuth")}
+              LOGON={auth.get("LOGON")}
+              user={auth.get("user")}
+            />
+          }
+        />
+        <Row>{this.props.children}</Row>
+        <Sidebar
+          openSidebar={() => this.setState({ sidebar: false })}
+          isOpen={this.state.sidebar}
+        />
+      </Grid>
+    );
+  }
+}
+
+export default AuthWrapper;