From 5d633f51bd72041029e9294868b352c2e5052575 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 17 Jul 2022 02:51:21 +0200
Subject: [PATCH] Properly save auth state

---
 components/auth/storage.ts | 16 ++++------------
 pages/_app.tsx             |  4 ++--
 utils/stateContext.ts      |  4 ++--
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/components/auth/storage.ts b/components/auth/storage.ts
index 6c9cb7d..90d7123 100644
--- a/components/auth/storage.ts
+++ b/components/auth/storage.ts
@@ -1,21 +1,13 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { localStorageSaveJSON, useLocalStorageJSONLoad, useLocalStorageJSONState } from "../generic/storage/json";
 import { AuthContextContents } from "./base";
 
 
-/**
- * Hook holding as state the {@link AuthContextContents}.
- */
-export function useStateAuth() {
-    return useState<AuthContextContents>(null)
-}
-
-
 /**
  * Hook which combines {@link useState}, {@link useLocalStorageJSONLoad}, and {@link localStorageSaveJSON}.
  */
-export function useLocalStorageAuthState(key: string) {
-    const [state, setStateInner] = useState<AuthContextContents | undefined>(undefined);
+export function useLocalStorageAuthState(key: string): [AuthContextContents | null, React.Dispatch<AuthContextContents | null>] {
+    const [state, setStateInner] = useState<AuthContextContents | null>(null);
 
     const validateAndSetState = useCallback(
         (data: any) => {
@@ -36,8 +28,8 @@ export function useLocalStorageAuthState(key: string) {
 
     const setState = useCallback(
         (value: AuthContextContents) => {
-            validateAndSetState(value);
             localStorageSaveJSON(key, value);
+            validateAndSetState(value);
         },
         [key, validateAndSetState]
     );
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 56f2e72..e3866b3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,13 +4,13 @@ import { AxiosSWRFetcherProvider } from '../components/auth/requests'
 import { useStatePostcard } from '../components/postcard/storage'
 import { PageErrorBoundary } from '../components/generic/errors/boundaries'
 import { PostcardContext } from '../components/postcard/base'
-import { useStateAuth } from '../components/auth/storage'
 import { AuthContext } from '../components/auth/base'
 import { PostcardRenderer } from '../components/postcard/renderer'
 import '../styles/globals.css'
 import defaultPostcard from "../public/postcards/adi-goldstein-Hli3R6LKibo-unsplash.jpg"
 import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
+import { useLocalStorageAuthState } from '../components/auth/storage'
 
 
 fontAwesomeConfig.autoAddCss = false
@@ -19,7 +19,7 @@ fontAwesomeConfig.autoAddCss = false
 const App = ({ Component, pageProps }: AppProps): JSX.Element => {
     const { t } = useTranslation()
     const postcardState = useStatePostcard(defaultPostcard)
-    const authState = useStateAuth()
+    const authState = useLocalStorageAuthState("auth")
 
     return (
         <PageErrorBoundary text={t("genericError")}>
diff --git a/utils/stateContext.ts b/utils/stateContext.ts
index 4a356b9..b23614d 100644
--- a/utils/stateContext.ts
+++ b/utils/stateContext.ts
@@ -6,6 +6,6 @@ import { createDefinedContext } from "./definedContext"
  * 
  * @returns The created context.
  */
-export function createStateContext<T>(): Context<[T, Dispatch<SetStateAction<T>>] | undefined> {
-    return createDefinedContext<[T, React.Dispatch<React.SetStateAction<T>>]>()
+export function createStateContext<T>(): Context<[T, Dispatch<T>] | undefined> {
+    return createDefinedContext<[T, React.Dispatch<T>]>()
 }