Add a lot of stuff

Author: jsprey

ui/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AppRouter from "./routes/AppRouter";
-import AuthProvider from "./auth/AuthProvider";
+import AuthProvider from "./core/auth/AuthProvider";
 import ColorThemeProvider from "./core/context/ColorThemeProvider";
 import {SnackbarProvider} from "notistack";
 

ui/src/api/hooks/storage/useLocalState.tsx

@@ -0,0 +1,43 @@
+import React, {useEffect, useState} from "react";
+
+export default function useLocalState<T>(key:string, defaultValue: T): [T, React.Dispatch<React.SetStateAction<T>>, () => void] {
+    const initialize = (): T => {
+        const valueRaw = localStorage.getItem(key)
+        if (!valueRaw) {
+            return defaultValue
+        }
+
+        try {
+            return JSON.parse(valueRaw) as T;
+        } catch (e) {
+            localStorage.removeItem(key)
+            return defaultValue
+        }
+    };
+
+    const [value, setValue] = useState(initialize)
+    useEffect(() => {
+        localStorage.setItem(key, JSON.stringify(value))
+    }, [value]);
+
+    const resetStorage = (): void => {
+        localStorage.removeItem(key)
+        setValue(defaultValue)
+        localStorage.setItem(key, JSON.stringify(defaultValue))
+    }
+
+    return [value, setValue, resetStorage]
+}
+
+export function removeStorageKeys(prefix: string) {
+    const deleteKeys = []
+    for (let localStorageKey in localStorage) {
+        if (localStorageKey.startsWith(prefix)){
+            deleteKeys.push(localStorageKey)
+        }
+    }
+
+    deleteKeys.forEach(key => {
+        localStorage.removeItem(key)
+    })
+}

ui/src/api/hooks/usePromptBlocker.tsx

@@ -0,0 +1,15 @@
+import {enqueueSnackbar} from "notistack";
+
+export function ShowSuccessfulSnack(message: string) {
+    enqueueSnackbar(message, {
+        autoHideDuration: 6000,
+        variant: "success"
+    })
+}
+
+export function ShowErrorSnack(message: string) {
+    enqueueSnackbar(message, {
+        autoHideDuration: 6000,
+        variant: "error"
+    })
+}

ui/src/core/Snacks.tsx

@@ -1,5 +1,5 @@
 import {Link} from "react-router-dom";
-import {useAuth} from "../auth/AuthProvider";
+import {useAuth} from "./auth/AuthProvider";
 import {useLocation, useNavigate} from "react-router";
 import UserNavbarBadge from "../users/UserNavbarBadge";
 import React from "react";
@@ -33,7 +33,6 @@ function YgoNavbar() {
         </>
     }
 
-
     // for class navBarContainer see index.scss
     // noinspection TypeScriptValidateTypes
     return <>

ui/src/core/YgoNavbar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {LoginVariables, useLoginMutation} from "../api/hooks/useLogin";
+import {LoginVariables, useLoginMutation} from "../../api/hooks/useLogin";
 import {useNavigate} from "react-router";
 import {useAuth} from "./AuthProvider";
 
@@ -42,7 +42,7 @@ function LoginPage() {
                     <div className={"flex justify-center items-center"}>
                         <img
                             alt=""
-                            src="/logo.png"
+                            src="/ui/public/logo.png"
                             width="96"
                             height="96"
                             className="d-inline-block align-top"

ui/src/auth/AuthProvider.tsx ui/src/core/auth/AuthProvider.tsxui/src/auth/AuthProvider.tsx renamed to ui/src/core/auth/AuthProvider.tsx

@@ -1,13 +1,14 @@
-import React, {useState} from "react";
-import PageDraftDeck from "./PageDraftDeck";
-import PageSettings from "./PageSettings";
+import React from "react";
+import PageDraftDeck from "../shared/draftPage/PageDraftDeck";
+import PageSettings from "../shared/settingsPage/PageSettings";
 import Stepper from "../../core/stepper/Stepper";
 import StepperStep from "../../core/stepper/StepperStep";
 import {Deck} from "../../api/CardModel";
-import PageOverview from "./PageOverview";
+import LocaleDraftWizardResultPage from "./LocaleDraftWizardResultPage";
 import {ExtraDeckFilter, MainDeckFilter} from "../../api/CardFilter";
 import {DraftSettings} from "../../api/Draft";
-import {ExportDeck} from "../../deck/DeckRandomGeneratorPage";
+import {ExportDeck} from "../shared/deck/DeckRandomGeneratorPage";
+import useLocalState from "../../api/hooks/storage/useLocalState";
 
 export enum LocalDraftStages {
     Settings = 1,
@@ -16,50 +17,61 @@ export enum LocalDraftStages {
     DeckOverview
 }
 
-function DeckDraftWizard() {
-    const [draftSettings, setDraftSettings] = useState<DraftSettings>({} as DraftSettings)
-    const [currentStage, setCurrentStage] = useState<LocalDraftStages>(LocalDraftStages.Settings)
-    const [deck, setDeck] = useState<Deck>({cards: []} as Deck)
+function LocaleDraftWizard() {
+    const [draftSettings, setDraftSettings, resetDraftSettings] = useLocalState<DraftSettings>("deck_draft_wizard_settings", {} as DraftSettings)
+    const [currentStage, setCurrentStage, resetCurrentStage] = useLocalState<LocalDraftStages>("deck_draft_wizard_stage", LocalDraftStages.Settings)
+    const [deck, setDeck, resetDeck] = useLocalState<Deck>("deck_draft_wizard_deck", {cards: []} as Deck)
 
     let mainDeckFilter = MainDeckFilter
     mainDeckFilter.sets = draftSettings.sets
 
     let extraDeckFilter = ExtraDeckFilter
     extraDeckFilter.sets = draftSettings.sets
 
+    function onAbortDraft() {
+        resetDeck()
+        resetDraftSettings()
+        resetCurrentStage()
+        setCurrentStage(LocalDraftStages.Settings)
+    }
+
     let stageBody
     switch (currentStage) {
         case LocalDraftStages.DraftMain:
             stageBody = <PageDraftDeck isMainDraft={true}
+                                       storagePrefix={"locale_main"}
                                        filter={mainDeckFilter}
                                        deck={deck}
+                                       canAbort={true}
                                        setDeck={setDeck}
                                        draftSize={draftSettings.main_deck_size}
                                        maxRounds={draftSettings.main_deck_draws}
                                        onNextClick={() => setCurrentStage(LocalDraftStages.DraftExtra)}
-                                       onAbort={() => setCurrentStage(LocalDraftStages.Settings)}/>
+                                       onAbort={onAbortDraft}/>
             break
         case LocalDraftStages.DraftExtra:
             stageBody = <PageDraftDeck isMainDraft={false}
+                                       storagePrefix={"locale_extra"}
                                        filter={extraDeckFilter}
                                        deck={deck}
+                                       canAbort={true}
                                        setDeck={setDeck}
                                        draftSize={draftSettings.extra_deck_size}
                                        maxRounds={draftSettings.extra_deck_draws}
                                        onNextClick={() => setCurrentStage(LocalDraftStages.DeckOverview)}
-                                       onAbort={() => setCurrentStage(LocalDraftStages.Settings)}/>
+                                       onAbort={onAbortDraft}/>
             break
         case LocalDraftStages.DeckOverview:
-            stageBody = <PageOverview deck={deck} submitName={"Export"} onSubmit={ExportDeck}/>
+            stageBody = <LocaleDraftWizardResultPage onAbort={onAbortDraft} deck={deck}/>
             break
         default:
         case LocalDraftStages.Settings:
             stageBody = <PageSettings submitButtonName={"Next"}
                                       local={true}
                                       onSettingsSubmit={(settings: DraftSettings) => {
-                setDraftSettings(settings)
-                setCurrentStage(LocalDraftStages.DraftMain)
-            }}/>
+                                          setDraftSettings(settings)
+                                          setCurrentStage(LocalDraftStages.DraftMain)
+                                      }}/>
             break
     }
 
@@ -88,4 +100,4 @@ function getCurrentStageHeader(currentStage: LocalDraftStages): JSX.Element {
     </Stepper>
 }
 
-export default DeckDraftWizard
+export default LocaleDraftWizard