fix: LoginPage -> Redux

src/pages/login.tsx

@@ -14,74 +14,41 @@ import { IUser } from "../models/user";
 
 interface IProps {
     login: (username: string, password: string) => Promise<IUser | {}>;
-    loggedIn: boolean;
-}
-
-interface IState {
-    username: string;
-    password: string;
+    authenticated: boolean;
 
+    setLoading: (state: boolean) => void;
+    setSnackbar: (state: boolean, msg: string) => void;
     loading: boolean;
-
-    snack: string; // The message
-    open: boolean;
+    snackOpen: boolean;
+    snackMsg: string;
 }
+/* 
+ * interface IState {
+ *     loading: boolean;
+ * 
+ *     snack: string; // The message
+ *     open: boolean;
+ * } */
 
-export default class LoginPage extends React.Component<IProps, IState> {
-    constructor(props: any) {
-        super(props);
+export default class LoginPage extends React.Component<IProps> {
+    private usernameRef: any = undefined;
+    private passwordRef: any = undefined;
 
-        this.state = {
-            username: "",
-            password: "",
-            loading: false,
-            snack: "",
-            open: false,
-        };
+    performLogin = () => {
+        this.props.setLoading(true);
 
-        this.update = this.update.bind(this);
-        this.performLogin = this.performLogin.bind(this);
-    }
-
-    update(prop: string) {
-        return (event: any) => {
-            this.setState({
-                [prop]: event.target.value,
-            });
-        };
-    }
-
-    performLogin() {
-        const load = (loading: boolean) => {
-            this.setState({
-                loading
-            });
-        }
-        const showSnackbar = (msg: string) => {
-            this.setState({
-                open: true,
-                snack: msg,
-            });
-        };
-
-        load(true);
-
-        const { username, password } = this.state;
-        console.log(this.state);
+        const username = this.usernameRef.value || "";
+        const password = this.passwordRef.value || "";
         this.props.login(username, password).then((res: IUser) => {
             // Set the session key
             window.sessionStorage.setItem("sessionToken", res.sessionToken);
         }, (err) => {
-            load(false);
-            showSnackbar("Failed to log in");
+            this.props.setLoading(false);
+            this.props.setSnackbar(true, "Failed to log in");
         });
     }
 
     render() {
-        const snackbarClose = () => {
-            this.setState({ open: false });
-        };
-
         return <div>
             <Grid
                 container
@@ -97,15 +64,13 @@ export default class LoginPage extends React.Component<IProps, IState> {
                             <Grid item>
                                 <TextField
                                     label="Username"
-                                    onChange={this.update("username")}
-                                    value={this.state.username} />
+                                    inputRef={node => this.usernameRef = node} />
                             </Grid>
                             <Grid item>
                                 <TextField
                                     label="Passwort"
                                     type="password"
-                                    value={this.state.password}
-                                    onChange={this.update("password")} />
+                                    inputRef={node => this.passwordRef = node} />
                             </Grid>
                             <Grid item>
                                 <Button
@@ -116,7 +81,7 @@ export default class LoginPage extends React.Component<IProps, IState> {
                                     Login
                             </Button>
                                 {
-                                    this.state.loading ? (
+                                    this.props.loading ? (
                                         <LinearProgress />
                                     ) : undefined
                                 }
@@ -126,12 +91,12 @@ export default class LoginPage extends React.Component<IProps, IState> {
                 </Grid>
             </Grid>
             <Snackbar
-                open={this.state.open}
-                onClose={snackbarClose}
-                message={this.state.snack}
+                open={this.props.snackOpen}
+                onClose={() => this.props.setSnackbar(false, "")}
+                message={this.props.snackMsg}
                 autoHideDuration={6000} />
             {
-                this.props.loggedIn ? (
+                this.props.authenticated ? (
                     <Redirect to="/dashboard" />
                 ) : undefined
             }