From ca9be41951b37ee6c7204ef1244274186a1f14d2 Mon Sep 17 00:00:00 2001 From: Aaron Hoffman Date: Tue, 23 Feb 2021 11:29:06 +0100 Subject: [PATCH] Fix auth store --- src/App.tsx | 42 ++++++++++----------- src/models/auth-model/auth-model.ts | 4 ++ src/models/root-store/root-store-context.ts | 2 +- src/models/root-store/setup-root-store.ts | 21 +++++++++-- src/screens/home.tsx | 12 +++++- src/screens/login.tsx | 10 ++++- src/services/api-helpers.ts | 10 +++++ src/services/api-types.ts | 10 ++++- src/services/api.ts | 9 +++-- 9 files changed, 86 insertions(+), 34 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f253ec5..7d97004 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,9 +5,9 @@ import { RootStoreProvider } from "./models/root-store/root-store-context" import { setupRootStore } from "./models/root-store/setup-root-store" import { BrowserRouter as Router, Switch, Route } from "react-router-dom" import { Spin } from "antd" -const Home = React.lazy(() => import("./screens/home")) -const Login = React.lazy(() => import("./screens/login")) -const Register = React.lazy(() => import("./screens/register")) +import Home from "./screens/home" +import Login from "./screens/login" +import Register from "./screens/register" const App = observer(function App() { const [rootStore, setRootStore] = useState(null) @@ -19,25 +19,23 @@ const App = observer(function App() { }, []) if (!rootStore) return null return ( -
- - }> - - - - - - - - - - - - - - - -
+ +
+ + + + + + + + + + + + + +
+ ) }) diff --git a/src/models/auth-model/auth-model.ts b/src/models/auth-model/auth-model.ts index d379d25..63494fe 100644 --- a/src/models/auth-model/auth-model.ts +++ b/src/models/auth-model/auth-model.ts @@ -5,6 +5,8 @@ export const AuthModel = types .model("AuthModel") .props({ loading: false, + username: "", + id: 0, }) .extend(withEnvironment) .actions((self) => { @@ -14,6 +16,8 @@ export const AuthModel = types try { const resp = yield self.environment.api.login(email, password) self.loading = false + self.username = resp.response.username + self.id = resp.response.id return resp } catch (err) { self.loading = false diff --git a/src/models/root-store/root-store-context.ts b/src/models/root-store/root-store-context.ts index 537e51c..f4b7298 100644 --- a/src/models/root-store/root-store-context.ts +++ b/src/models/root-store/root-store-context.ts @@ -19,4 +19,4 @@ export const RootStoreProvider = RootStoreContext.Provider * `const { someStore, someOtherStore } = useStores()`, * or less likely: `const rootStore = useStores()` */ -export const useStores = () => useContext(RootStoreContext) +export const useStores = (): RootStore => useContext(RootStoreContext) diff --git a/src/models/root-store/setup-root-store.ts b/src/models/root-store/setup-root-store.ts index 0b3cfd0..3a2d02c 100644 --- a/src/models/root-store/setup-root-store.ts +++ b/src/models/root-store/setup-root-store.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ -import { RootStoreModel } from "./root-store" +import { RootStore, RootStoreModel } from "./root-store" import { Environment } from "../environment" +import { onSnapshot } from "mobx-state-tree" /** * The key we'll be saving our state as within async storage. @@ -18,12 +19,26 @@ export async function createEnvironment() { return env } +const ROOT_STATE_STORAGE_KEY = "root" + /** * Setup the root state. */ export async function setupRootStore() { + let rootStore: RootStore + + // prepare the environment that will be associated with the RootStore. const env = await createEnvironment() - const rootStore = RootStoreModel.create({}, env) + if (localStorage.getItem(ROOT_STATE_STORAGE_KEY) !== null) { + const data = JSON.parse(localStorage.getItem(ROOT_STATE_STORAGE_KEY) as string) + rootStore = RootStoreModel.create(data, env) + } else { + rootStore = RootStoreModel.create({}, env) + } + // track changes & save to storage + onSnapshot(rootStore, (snapshot) => + localStorage.setItem(ROOT_STATE_STORAGE_KEY, JSON.stringify(snapshot)), + ) + return rootStore } -export {} diff --git a/src/screens/home.tsx b/src/screens/home.tsx index 92a2e7a..70b6858 100644 --- a/src/screens/home.tsx +++ b/src/screens/home.tsx @@ -1,4 +1,4 @@ -import { Avatar, List, Typography } from "antd" +import { Avatar, List, PageHeader, Typography } from "antd" import { observer } from "mobx-react-lite" import React, { ReactElement, useEffect } from "react" import { CenteredBody } from "../components" @@ -16,13 +16,21 @@ const StyledBody = styled(CenteredBody)` margin-right: 100px; margin-left: 100px; ` +const StyledHeader = styled(PageHeader)` + width: 100vw; + text-align: right; + position: relative; + top: 0; +` const Home = observer(function Home(props): ReactElement { - const { proposalsStore } = useStores() + const { proposalsStore, authStore } = useStores() useEffect(() => { proposalsStore.getProposals(0, 30) }, []) + console.log(authStore.username) return ( + {proposalsStore.proposals.map((e) => { return ( diff --git a/src/screens/login.tsx b/src/screens/login.tsx index 578c780..a2aa466 100644 --- a/src/screens/login.tsx +++ b/src/screens/login.tsx @@ -8,7 +8,7 @@ import { useStores } from "../models/root-store/root-store-context" import { parseError } from "../services/error-parser" import { Typography } from "antd" import { observer } from "mobx-react-lite" -import { Link } from "react-router-dom" +import { Link, Redirect } from "react-router-dom" const { Text, Link: AntdLink } = Typography @@ -43,13 +43,19 @@ const StyledTextWrapper = styled.div` const Login = observer(function Login(): ReactElement { const { authStore } = useStores() const [err, setErr] = useState(false) + const [isLogged, setLogged] = useState(false) const onFinish = async (value) => { try { - const resp = await authStore.login(value.email, value.password) + await authStore.login(value.email, value.password) + setLogged(true) } catch (e) { + console.log(e) setErr(parseError(e)) } } + if (isLogged) { + return + } return (