fix: LoginPage -> Redux

src/actions/index.ts

@@ -13,3 +13,36 @@ export function setDrawerButton(state: boolean) {
         show: state,
     };
 };
+
+export const LOGIN_SET_SNACKBAR = "LOGIN_SET_SNACKBAR";
+export function setLoginSnackbar(visibility: boolean, msg: string = "") {
+    return {
+        type: LOGIN_SET_SNACKBAR,
+        show: visibility,
+        msg,
+    };
+};
+
+export const LOGIN_SET_LOADING = "LOGIN_SET_LOADING";
+export function setLoginLoading(visibility: boolean) {
+    return {
+        type: LOGIN_SET_LOADING,
+        show: visibility,
+    };
+};
+
+export const SET_AUTHENTICATED = "SET_AUTHENTICATED";
+export function setAuthenticated(state: boolean) {
+    return {
+        type: SET_AUTHENTICATED,
+        status: state,
+    };
+}
+
+export const SET_USER = "SET_USER";
+export function setUser(user: IUser) {
+    return {
+        type: SET_USER,
+        user,
+    };
+}

src/components/app.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter, Route, Redirect } from "react-router-dom";
 import AuthRoute from "../security/AuthRoute";
 
 import Dashboard from "../pages/dashboard";
-import LoginPage from "../pages/login";
+import LoginPage from "../containers/LoginPage";
 import LevelListPage from "../pages/levelList";
 import LevelPage from "../pages/level";
 import ReviewPage from "../pages/review";
@@ -22,22 +22,15 @@ import { IVocab, VocabType } from "../models/vocab";
 import { IReviewMetadata, ReviewType } from "../models/review";
 import { IUser } from "../models/user";
 
+interface IProps {
+    setAuthenticated: (status: boolean) => void;
+    setUser: (user: IUser) => void;
+};
+
 // TODO: Replace the sessionStorage with localStorage?
 // TODO: Cache API-Calls
 // TODO: When mounting without a login, check if the sessionToken is still valid
-export default class Application extends React.Component<{}> {
+export default class Application extends React.Component<IProps> {
-    constructor(props: any) {
-        super(props);
-
-        // Load a key from the SessionStorage
-        const authKey = window.sessionStorage.getItem("sessionToken") || null;
-        // TODO
-        const loggedIn = authKey !== null;
-
-        this.login = this.login.bind(this);
-        this.isAuthenticated = this.isAuthenticated.bind(this);
-    }
-
     getLevels(): ILevel[] {
         console.log("STUB: Application::getLevels");
         // TODO: Actually fetch them from somewhere
@@ -184,27 +177,25 @@ export default class Application extends React.Component<{}> {
             } */] as IVocab[];
     }
 
-    login(username: string, password: string): Promise<IUser | {}> {
+    login = (username: string, password: string): Promise<IUser | {}> => {
         return new Promise((res, rej) => {
-            // TODO: First login? Redirect to /welcome
             fetch(`${BACKEND_URL}/login`, {
                 method: "POST",
                 headers: new Headers({
-                    'Content-Type': "application/json",
+                    "Content-Type": "application/json",
                 }),
                 body: JSON.stringify({
-                    // NOTE: We will force HTTPS and hash using pbkdf2 on the
+                    // NOTE: We will force HTTPS, so this should not be a
-                    // server
+                    // problem
-                    username: username,
+                    username,
-                    hash: password,
+                    password,
                 }),
             }).then(data => data.json())
-                .then((resp) => {
+                .then(resp => {
                     if (resp.error === "0") {
-                        this.setState({
+                        // Successful login
-                            loggedIn: true,
+                        // TODO: Set the auth token here
-                            user: resp.data,
+                        this.props.setUser(resp.data);
-                        });
                         res(resp.data);
                     } else {
                         rej({});
@@ -214,7 +205,7 @@ export default class Application extends React.Component<{}> {
     }
 
     // Checks whether the user is logged in
-    isAuthenticated() {
+    isAuthenticated = () => {
         // TODO: Security?
         // TODO: Implement
         return true;
@@ -239,12 +230,12 @@ export default class Application extends React.Component<{}> {
     render() {
         return <BrowserRouter
             basename="/app/">
-            <div className="flex">
+            < div className="flex" >
                 <Drawer />
                 <div className="content">
                     <Route exact path="/" component={() => <Redirect to="/login" />} />
                     <Route exact path="/login" component={() => {
-                        return <LoginPage loggedIn={this.state.loggedIn} login={this.login} />
+                        return <LoginPage login={this.login} />
                     }} />
                     <AuthRoute
                         isAuth={this.isAuthenticated}
@@ -312,7 +303,7 @@ export default class Application extends React.Component<{}> {
                                 reviewMeta={this.getLastReview} />
                         }} />
                 </div>
-            </div>
+            </div >
-        </BrowserRouter>;
+        </BrowserRouter >;
     }
 };

src/containers/Application.ts

@@ -0,0 +1,22 @@
+import { connect } from "react-redux";
+
+import { IUser } from "../models/user";
+
+import Application from "../components/app";
+
+import { setAuthenticated, setUser } from "../actions";
+
+const mapStateToProps = state => {
+    return {};
+};
+const mapDispatchToProps = dispatch => {
+    return {
+        setAuthenticated: (status: boolean) => dispatch(setAuthenticated(status)),
+        setUser: (user: IUser) => dispatch(setUser(user)),
+    };
+};
+
+const ApplicationContainer = connect(mapStateToProps,
+    mapDispatchToProps)(Application);
+
+export default ApplicationContainer;

src/containers/LoginPage.ts

@@ -0,0 +1,23 @@
+import { connect } from "react-redux";
+
+import { setLoginSnackbar, setLoginLoading } from "../actions";
+
+import LoginPage from "../pages/login";
+
+const mapStateToProps = state => {
+    return {
+        loading: state.login.loading,
+        snackOpen: state.login.snackOpen,
+        snackMsg: state.login.snackMsg,
+        authenticated: state.authenticated,
+    };
+};
+const mapDispatchToProps = dispatch => {
+    return {
+        setLoading: (state: boolean) => dispatch(setLoginLoading(state)),
+        setSnackbar: (state: boolean, msg: string) => dispatch(setLoginSnackbar(state, msg)),
+    };
+};
+
+const LoginPageContainer = connect(mapStateToProps, mapDispatchToProps)(LoginPage);
+export default LoginPageContainer;

src/index.tsx

@@ -6,7 +6,7 @@ import { Provider } from "react-redux";
 
 import { LateinicusApp } from "./reducers";
 
-import Application from "./components/app";
+import Application from "./containers/Application";
 
 const store = createStore(LateinicusApp);
 

src/pages/login.tsx

@@ -14,74 +14,41 @@ import { IUser } from "../models/user";
 
 interface IProps {
     login: (username: string, password: string) => Promise<IUser | {}>;
-    loggedIn: boolean;
+    authenticated: boolean;
-}
-
-interface IState {
-    username: string;
-    password: string;
 
+    setLoading: (state: boolean) => void;
+    setSnackbar: (state: boolean, msg: string) => void;
     loading: boolean;
-
+    snackOpen: boolean;
-    snack: string; // The message
+    snackMsg: string;
-    open: boolean;
 }
+/* 
+ * interface IState {
+ *     loading: boolean;
+ * 
+ *     snack: string; // The message
+ *     open: boolean;
+ * } */
 
-export default class LoginPage extends React.Component<IProps, IState> {
+export default class LoginPage extends React.Component<IProps> {
-    constructor(props: any) {
+    private usernameRef: any = undefined;
-        super(props);
+    private passwordRef: any = undefined;
 
-        this.state = {
+    performLogin = () => {
-            username: "",
+        this.props.setLoading(true);
-            password: "",
-            loading: false,
-            snack: "",
-            open: false,
-        };
 
-        this.update = this.update.bind(this);
+        const username = this.usernameRef.value || "";
-        this.performLogin = this.performLogin.bind(this);
+        const password = this.passwordRef.value || "";
-    }
-
-    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);
         this.props.login(username, password).then((res: IUser) => {
             // Set the session key
             window.sessionStorage.setItem("sessionToken", res.sessionToken);
         }, (err) => {
-            load(false);
+            this.props.setLoading(false);
-            showSnackbar("Failed to log in");
+            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")}
+                                    inputRef={node => this.usernameRef = node} />
-                                    value={this.state.username} />
                             </Grid>
                             <Grid item>
                                 <TextField
                                     label="Passwort"
                                     type="password"
-                                    value={this.state.password}
+                                    inputRef={node => this.passwordRef = node} />
-                                    onChange={this.update("password")} />
                             </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}
+                open={this.props.snackOpen}
-                onClose={snackbarClose}
+                onClose={() => this.props.setSnackbar(false, "")}
-                message={this.state.snack}
+                message={this.props.snackMsg}
                 autoHideDuration={6000} />
             {
-                this.props.loggedIn ? (
+                this.props.authenticated ? (
                     <Redirect to="/dashboard" />
                 ) : undefined
             }

src/reducers/index.ts

@@ -1,16 +1,47 @@
 import * as Actions from "../actions";
 
-const initialState = {
+import { ILearner } from "../models/learner";
+import { IUser } from "../models/user";
+
+interface IState {
+    drawer: boolean;
+    drawerButton: boolean;
+    authenticated: boolean;
+
+    // TODO: Rework this
+    user: IUser | {},
+
+    login: {
+        loading: boolean;
+        snackMsg: string;
+        snackOpen: boolean;
+    };
+
+    topTen: ILearner[];
+};
+
+const initialState: IState = {
     // Show the drawer?
     drawer: false,
     // Should we show the button to open the drawer?
     drawerButton: true,
     // Is the user authenticated?
     // TODO: Set this to false
-    authenticated: true,
+    authenticated: false,
+
+    user: {},
+
+    login: {
+        loading: false,
+        snackMsg: "",
+        snackOpen: false,
+    },
+
+    // The top ten
+    topTen: [],
 };
 
-export function LateinicusApp(state = initialState, action: any) {
+export function LateinicusApp(state: IState = initialState, action: any) {
     switch (action.type) {
         case Actions.SET_DRAWER:
             return Object.assign({}, state, {
@@ -20,6 +51,30 @@ export function LateinicusApp(state = initialState, action: any) {
             return Object.assign({}, state, {
                 drawerButton: action.show,
             });
+        case Actions.LOGIN_SET_SNACKBAR:
+            return Object.assign({}, state, {
+                login: {
+                    loading: state.login.loading,
+                    snackMsg: action.msg,
+                    snackOpen: action.show,
+                },
+            });
+        case Actions.LOGIN_SET_LOADING:
+            return Object.assign({}, state, {
+                login: {
+                    loading: action.show,
+                    snackMsg: state.login.snackMsg,
+                    snackOpen: state.login.snackOpen,
+                },
+            });
+        case Actions.SET_AUTHENTICATED:
+            return Object.assign({}, state, {
+                authenticated: action.status,
+            });
+        case Actions.SET_USER:
+            return Object.assign({}, state, {
+                user: action.user,
+            });
         default:
             return state;
     }