diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6ac8141..69c50a9 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,42 +1,17 @@ import * as React from "react"; -import { connect } from "react-redux"; -import { - Redirect, - Route, - RouteComponentProps, - Switch, - withRouter, -} from "react-router"; +import { Route, RouteComponentProps, Switch, withRouter } from "react-router"; import { AuthScreen } from "~Auth/AuthScreen"; +import { requireAuth } from "~Auth/AuthWrapper"; import { Home } from "~Home/Home"; -import { Landing } from "~Landing/Landing"; -import { IAppState } from "~redux/reducers"; -interface IAppComponentProps extends RouteComponentProps { - loggedIn: boolean; -} - -export function AppComponent(props: IAppComponentProps) { - const { loggedIn } = props; - return loggedIn ? ( +export function AppComponent(props: RouteComponentProps) { + return ( , , - , - , - - ) : ( - - - - - } /> + , ); } -function mapStateToProps(state: IAppState) { - return { loggedIn: state.auth.jwt !== null }; -} - -export const App = withRouter(connect(mapStateToProps)(AppComponent)); +export const App = withRouter(AppComponent); diff --git a/frontend/src/Auth/AuthWrapper.tsx b/frontend/src/Auth/AuthWrapper.tsx new file mode 100644 index 0000000..e66ec58 --- /dev/null +++ b/frontend/src/Auth/AuthWrapper.tsx @@ -0,0 +1,39 @@ +import * as React from "react"; +import { connect } from "react-redux"; +import { Redirect } from "react-router"; +import { webRoot } from "~env"; +import { IAppState } from "~redux/reducers"; + +interface IAuthWrapperComponentProps { + loggedIn: boolean; +} + +export const AuthWrapperComponent: React.FunctionComponent = ( + props, +) => { + if (!props.children) { + return ; + } + if (props.loggedIn) { + return
{props.children}
; + } else { + return ; + } +}; + +function mapStateToProps(state: IAppState): IAuthWrapperComponentProps { + return { loggedIn: state.auth.jwt !== null }; +} + +export const AuthWrapper = connect(mapStateToProps)(AuthWrapperComponent); + +export function requireAuth(Component: React.ComponentType): () => JSX.Element { + const wrapped = () => { + return ( + + + + ); + }; + return wrapped; +}