fix: Multiple API calls when bypassing /login
This commit is contained in:
parent
08cd51c2a3
commit
be7a616fb5
@ -2,6 +2,7 @@ import { IVocab, IReviewCard } from "../models/vocab";
|
||||
import { IUser } from "../models/user";
|
||||
import { ILevel } from "../models/level";
|
||||
import { IReviewMetadata } from "../models/review";
|
||||
import { TopTen } from "../models/learner";
|
||||
|
||||
export const SET_DRAWER = "SET_DRAWER";
|
||||
export function setDrawer(state: boolean) {
|
||||
@ -161,7 +162,7 @@ export function setDashboardNLLoading(state: boolean) {
|
||||
};
|
||||
|
||||
export const SET_TOP_TEN = "SET_TOP_TEN";
|
||||
export function setTopTen(topTen: ILearner[]) {
|
||||
export function setTopTen(topTen: TopTen[]) {
|
||||
return {
|
||||
type: SET_TOP_TEN,
|
||||
topTen,
|
||||
@ -175,3 +176,11 @@ export function setDashboardTTLoading(state: boolean) {
|
||||
state,
|
||||
};
|
||||
};
|
||||
|
||||
export const SET_DID_LOGIN = "SET_DID_LOGIN";
|
||||
export function setDidLogin(state: boolean) {
|
||||
return {
|
||||
type: SET_DID_LOGIN,
|
||||
state,
|
||||
};
|
||||
};
|
||||
|
@ -3,7 +3,7 @@ import * as React from "react";
|
||||
import { BrowserRouter, Route, Redirect } from "react-router-dom";
|
||||
|
||||
import AuthRoute from "../security/AuthRoute";
|
||||
import { setSessionToken, removeSessionToken } from "../security/Token";
|
||||
import { setSessionToken, removeSessionToken, getSessionToken } from "../security/Token";
|
||||
|
||||
import Dashboard from "../containers/Dashboard";
|
||||
import LoginPage from "../containers/LoginPage";
|
||||
@ -29,13 +29,21 @@ interface IProps {
|
||||
|
||||
user: IUser;
|
||||
setAuthenticated: (status: boolean) => void;
|
||||
setDidLogin: (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<IProps> {
|
||||
componentDidMount() {
|
||||
// TODO: Ask the server if our session is still valid
|
||||
// TODO: When asking the server if our session is still valid, a spinner
|
||||
// should be shown
|
||||
if (getSessionToken(window) !== null) {
|
||||
this.props.setAuthenticated(true);
|
||||
}
|
||||
}
|
||||
|
||||
getLevels(): Promise<ILevel[]> {
|
||||
console.log("STUB: Application::getLevels");
|
||||
|
||||
@ -143,8 +151,6 @@ export default class Application extends React.Component<IProps> {
|
||||
}).then(resp => resp.json(),
|
||||
err => rej(err))
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
if (data.error === "0") {
|
||||
res(data.data.topTen);
|
||||
} else {
|
||||
@ -164,8 +170,6 @@ export default class Application extends React.Component<IProps> {
|
||||
}).then(resp => resp.json(),
|
||||
err => rej(err))
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
if (data.error === "0") {
|
||||
res(data.data);
|
||||
} else {
|
||||
@ -215,6 +219,7 @@ export default class Application extends React.Component<IProps> {
|
||||
if (resp.error === "0") {
|
||||
// Successful login
|
||||
this.props.setUser(resp.data);
|
||||
this.props.setDidLogin(true);
|
||||
setSessionToken(window, resp.data.sessionToken);
|
||||
this.props.setAuthenticated(true);
|
||||
|
||||
@ -234,8 +239,6 @@ export default class Application extends React.Component<IProps> {
|
||||
|
||||
// Checks whether the user is logged in
|
||||
isAuthenticated = () => {
|
||||
// TODO: Security?
|
||||
// TODO: Implement
|
||||
return this.props.authenticated;
|
||||
}
|
||||
|
||||
|
@ -4,7 +4,7 @@ import { IUser } from "../models/user";
|
||||
|
||||
import Application from "../components/app";
|
||||
|
||||
import { setAuthenticated, setUser } from "../actions";
|
||||
import { setAuthenticated, setUser, setDidLogin } from "../actions";
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
@ -15,6 +15,7 @@ const mapStateToProps = state => {
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
setAuthenticated: (status: boolean) => dispatch(setAuthenticated(status)),
|
||||
setDidLogin: (state: boolean) => dispatch(setDidLogin(state)),
|
||||
setUser: (user: IUser) => dispatch(setUser(user)),
|
||||
};
|
||||
};
|
||||
|
@ -10,6 +10,7 @@ const mapStateToProps = state => {
|
||||
snackOpen: state.login.snackOpen,
|
||||
snackMsg: state.login.snackMsg,
|
||||
authenticated: state.authenticated,
|
||||
didLogin: state.didLogin,
|
||||
};
|
||||
};
|
||||
const mapDispatchToProps = dispatch => {
|
||||
|
@ -18,6 +18,7 @@ interface IProps {
|
||||
authenticated: boolean;
|
||||
history: any;
|
||||
|
||||
didLogin: boolean;
|
||||
setLoading: (state: boolean) => void;
|
||||
setSnackbar: (state: boolean, msg: string) => void;
|
||||
loading: boolean;
|
||||
@ -54,7 +55,11 @@ const LoginPageWithRouter = withRouter(
|
||||
|
||||
componentDidMount() {
|
||||
// If we're already authenticated, we can skip the login page
|
||||
if (this.props.authenticated) {
|
||||
// NOTE: The '!this.props.didLogin' is here, as the Component gets
|
||||
// remounted, when the auth status changes. Thus we would
|
||||
// redirect to /dashboard, redirect back to /welcome
|
||||
// (or /dashboard again) and cause mulitple API calls!
|
||||
if (this.props.authenticated && !this.props.didLogin) {
|
||||
this.props.history.push("/dashboard");
|
||||
}
|
||||
}
|
||||
|
@ -11,6 +11,7 @@ interface IState {
|
||||
scorePopoverOpen: boolean;
|
||||
drawerButton: boolean;
|
||||
authenticated: boolean;
|
||||
didLogin: boolean;
|
||||
|
||||
// TODO: Rework this
|
||||
user: IUser | {},
|
||||
@ -64,6 +65,7 @@ const initialState: IState = {
|
||||
// Should we show the button to open the drawer?
|
||||
drawerButton: true,
|
||||
scorePopoverOpen: false,
|
||||
didLogin: false,
|
||||
|
||||
// Is the user authenticated?
|
||||
// TODO: Set this to false
|
||||
@ -228,7 +230,6 @@ export function LateinicusApp(state: IState = initialState, action: any) {
|
||||
}),
|
||||
});
|
||||
case Actions.SET_TOP_TEN:
|
||||
console.log(action.topTen);
|
||||
return Object.assign({}, state, {
|
||||
topTen: action.topTen,
|
||||
});
|
||||
@ -238,6 +239,10 @@ export function LateinicusApp(state: IState = initialState, action: any) {
|
||||
loadingTT: action.state,
|
||||
}),
|
||||
});
|
||||
case Actions.SET_DID_LOGIN:
|
||||
return Object.assign({}, state, {
|
||||
didLogin: state,
|
||||
});
|
||||
default:
|
||||
// Ignore the initialization call to the reducer. By that we can
|
||||
// catch all actions that are not implemented
|
||||
|
@ -2,6 +2,10 @@ export function setSessionToken(window: Window, token: string) {
|
||||
window.sessionStorage.setItem("sessionToken", token);
|
||||
};
|
||||
|
||||
export function getSessionToken(window: Window) {
|
||||
return window.sessionStorage.getItem("sessionToken");
|
||||
}
|
||||
|
||||
export function removeSessionToken(window: Window) {
|
||||
window.sessionStorage.removeItem("sessionToken");
|
||||
}
|
||||
|
Reference in New Issue
Block a user