From 533cfcd7d1f2d44e1c278f07f844dccc9a71cd4f Mon Sep 17 00:00:00 2001
From: Sander Vocke <sandervocke@gmail.com>
Date: Mon, 28 Sep 2020 12:06:05 +0200
Subject: [PATCH] Move state to top level.

---
 .../components/windows/ManageTagsWindow.tsx   | 29 +++++++++++++++----
 client/src/components/windows/Windows.tsx     |  2 ++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/src/components/windows/ManageTagsWindow.tsx b/client/src/components/windows/ManageTagsWindow.tsx
index f14498c..4daa1a8 100644
--- a/client/src/components/windows/ManageTagsWindow.tsx
+++ b/client/src/components/windows/ManageTagsWindow.tsx
@@ -22,15 +22,27 @@ export interface TagChange {
 }
 
 export interface ManageTagsWindowState extends WindowState {
-    fetchedTags: any[],
+    fetchedTags: any[] | null,
     pendingChanges: TagChange[],
 }
 
 export enum ManageTagsWindowActions {
+    SetFetchedTags = "SetFetchedTags",
+    SetPendingChanges = "SetPendingChanges",
 }
 
 export function ManageTagsWindowReducer(state: ManageTagsWindowState, action: any) {
     switch (action.type) {
+        case ManageTagsWindowActions.SetFetchedTags:
+            return {
+                ...state,
+                fetchedTags: action.value,
+            }
+        case ManageTagsWindowActions.SetPendingChanges:
+            return {
+                ...state,
+                pendingChanges: action.value,
+            }
         default:
             throw new Error("Unimplemented ManageTagsWindow state update.")
     }
@@ -126,16 +138,22 @@ export interface IProps {
 }
 
 export default function ManageTagsWindow(props: IProps) {
-    const [tags, setTags] = React.useState<any[]>([]);
-
     useEffect(() => {
+        if (props.state.fetchedTags !== null) {
+            return;
+        }
         (async () => {
             const allTags = await getAllTags();
             // We have the tags in list form. Now, we want to organize
             // them hierarchically by giving each tag a "children" prop.
-            setTags(organiseTags(allTags, null));
+            props.dispatch({
+                type: ManageTagsWindowActions.SetFetchedTags,
+                value: organiseTags(allTags, null),
+            });
         })();
-    }, []);
+    }, [props.state.fetchedTags]);
+
+    const tags = props.state.fetchedTags || [];
 
     return <Box width="100%" justifyContent="center" display="flex" flexWrap="wrap">
         <Box
@@ -158,7 +176,6 @@ export default function ManageTagsWindow(props: IProps) {
             width="80%"
         >
             {tags && tags.length && tags.map((tag: any) => {
-                console.log("Tags:", tags);
                 return <Box mt={1}><SingleTag tag={tag} prependElems={[]} /></Box>;
             })}
         </Box>
diff --git a/client/src/components/windows/Windows.tsx b/client/src/components/windows/Windows.tsx
index f78d620..4fc87a7 100644
--- a/client/src/components/windows/Windows.tsx
+++ b/client/src/components/windows/Windows.tsx
@@ -85,6 +85,8 @@ export const newWindowState = {
     [WindowType.ManageTags]: () => {
         return {
             tabLabel: <><LoyaltyIcon/>Manage Tags</>,
+            fetchedTags: null,
+            pendingChanges: [],
         }
     }
 }
\ No newline at end of file