Move state to top level.

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>

client/src/components/windows/Windows.tsx

@@ -85,6 +85,8 @@ export const newWindowState = {
     [WindowType.ManageTags]: () => {
         return {
             tabLabel: <><LoyaltyIcon/>Manage Tags</>,
+            fetchedTags: null,
+            pendingChanges: [],
         }
     }
 }