Fix load order re-applying and transition between sidebar pages

components/Map.tsx

@@ -290,14 +290,15 @@ const Map: React.FC = () => {
         clearSelectedCells();
         selectCell(cell);
       }
-    } else if (
+    } else if (router.query.mod && typeof router.query.mod === "string") {
-      router.query.mod &&
+      if (selectedCells) {
-      typeof router.query.mod === "string" &&
+        clearSelectedCell();
-      selectedCells
+        setSidebarOpen(true);
-    ) {
+        selectCells(selectedCells);
-      clearSelectedCell();
+      } else {
-      setSidebarOpen(true);
+        // TODO: this is so spaghetti
-      selectCells(selectedCells);
+        clearSelectedCell();
+      }
     } else if (router.query.plugin && typeof router.query.plugin === "string") {
       clearSelectedCells();
       setSidebarOpen(true);
@@ -320,9 +321,32 @@ const Map: React.FC = () => {
           selectCells(cells);
         }
       }
-    } else {
+    } else if (plugins && plugins.length > 0 && pluginsPending === 0) {
-      clearSelectedCell();
       clearSelectedCells();
+      clearSelectedCell();
+      const cells = plugins.reduce(
+        (acc: { x: number; y: number }[], plugin: PluginFile) => {
+          if (plugin.enabled && plugin.parsed) {
+            const newCells = [...acc];
+            for (const cell of plugin.parsed.cells) {
+              if (
+                cell.x !== undefined &&
+                cell.y !== undefined &&
+                cell.world_form_id === 60
+              ) {
+                newCells.push({ x: cell.x, y: cell.y });
+              }
+            }
+            return newCells;
+          }
+          return acc;
+        },
+        []
+      );
+      selectCells(cells);
+    } else {
+      clearSelectedCells();
+      clearSelectedCell();
     }
   }, [
     selectedCell,
@@ -346,49 +370,6 @@ const Map: React.FC = () => {
     }
   }, [router.query.mod, clearSelectedMod, heatmapLoaded]);
 
-  useEffect(() => {
-    if (!heatmapLoaded) return; // wait for all map layers to load
-    if (
-      plugins &&
-      plugins.length > 0 &&
-      pluginsPending === 0 &&
-      !router.query.cell &&
-      !router.query.mod &&
-      !router.query.plugin
-    ) {
-      clearSelectedCells();
-      const cells = plugins.reduce(
-        (acc: { x: number; y: number }[], plugin: PluginFile) => {
-          if (plugin.enabled && plugin.parsed) {
-            const newCells = [...acc];
-            for (const cell of plugin.parsed.cells) {
-              if (
-                cell.x !== undefined &&
-                cell.y !== undefined &&
-                cell.world_form_id === 60
-              ) {
-                newCells.push({ x: cell.x, y: cell.y });
-              }
-            }
-            return newCells;
-          }
-          return acc;
-        },
-        []
-      );
-      selectCells(cells);
-    }
-  }, [
-    plugins,
-    pluginsPending,
-    heatmapLoaded,
-    clearSelectedCells,
-    selectCells,
-    router.query.cell,
-    router.query.mod,
-    router.query.plugin,
-  ]);
-
   useEffect(() => {
     if (map.current) return; // initialize map only once
     map.current = new mapboxgl.Map({

components/PluginTxtEditor.tsx

@@ -2,7 +2,7 @@ import { createPortal } from "react-dom";
 import React, { useEffect, useState } from "react";
 
 import { useAppSelector, useAppDispatch } from "../lib/hooks";
-import { setPluginsTxt } from "../slices/pluginsTxt";
+import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 import { applyLoadOrder } from "../slices/plugins";
 import styles from "../styles/PluginTxtEditor.module.css";
 
@@ -24,8 +24,6 @@ const PluginsLoader: React.FC<Props> = () => {
 
   useEffect(() => {
     setPluginsTxtShown(false);
-    console.log("going to apply!");
-    dispatch(applyLoadOrder());
   }, [dispatch, pluginsTxt]);
 
   const onPluginsTxtButtonClick = async () => {
@@ -69,7 +67,9 @@ const PluginsLoader: React.FC<Props> = () => {
               </button>
               <button
                 onClick={() => {
-                  dispatch(setPluginsTxt(editPluginsTxt ?? ""));
+                  dispatch(
+                    setPluginsTxtAndApplyLoadOrder(editPluginsTxt ?? "")
+                  );
                   setPluginsTxtShown(false);
                 }}
               >

pages/index.tsx

@@ -4,7 +4,7 @@ import "mapbox-gl/dist/mapbox-gl.css";
 
 import Map from "../components/Map";
 import { useAppDispatch } from "../lib/hooks";
-import { setPluginsTxt } from "../slices/pluginsTxt";
+import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 
 const Home: NextPage = () => {
   const dispatch = useAppDispatch();
@@ -74,7 +74,7 @@ const Home: NextPage = () => {
           if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
             const file = evt.dataTransfer.items[0].getAsFile();
             if (file) {
-              dispatch(setPluginsTxt(await file.text()));
+              dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
             }
           }
         }}

slices/plugins.ts

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit"
-import { StateChangeTypes } from "downshift";
 
 import type { AppState, AppThunk } from "../lib/store"
 
@@ -98,7 +97,7 @@ export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
   dispatch(setPlugins([...originalPlugins.sort((a, b) => b.lastModified - a.lastModified), ...newPlugins]));
 }
 
-export const addPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch, getState) => {
+export const addPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch) => {
   dispatch(addPlugin(plugin));
   dispatch(applyLoadOrder());
 }

slices/pluginsTxt.ts

@@ -1,6 +1,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit"
 
-import type { AppState } from "../lib/store"
+import type { AppState, AppThunk } from "../lib/store"
+import { applyLoadOrder } from "./plugins";
 
 export type PluginsTxtState = string;
 
@@ -11,7 +12,7 @@ export const pluginsTxtSlice = createSlice({
   initialState,
   reducers: {
     setPluginsTxt: (state, action: PayloadAction<string>) => action.payload,
-    clearPluginsTxt: (state) => "",
+    clearPluginsTxt: () => "",
   },
 })
 
@@ -19,4 +20,9 @@ export const { setPluginsTxt, clearPluginsTxt } = pluginsTxtSlice.actions
 
 export const selectPluginsTxt = (state: AppState) => state.pluginsTxt
 
+export const setPluginsTxtAndApplyLoadOrder = (pluginsTxt: string): AppThunk => (dispatch) => {
+  dispatch(setPluginsTxt(pluginsTxt));
+  dispatch(applyLoadOrder());
+}
+
 export default pluginsTxtSlice.reducer