Refactor drag-n-drop to component with overlay

components/DropZone.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useRef } from "react";
+import { createPortal } from "react-dom";
+
+import { WorkerPool } from "../lib/WorkerPool";
+import { isPluginPath, parsePluginFiles } from "../lib/plugins";
+import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
+import { useAppDispatch } from "../lib/hooks";
+import styles from "../styles/DropZone.module.css";
+
+type Props = {
+  children?: React.ReactNode;
+  workerPool: WorkerPool | null;
+};
+
+export const DropZone: React.FC<Props> = ({ children, workerPool }) => {
+  const dispatch = useAppDispatch();
+  const [entered, setEntered] = useState(0);
+  const overlay = useRef<HTMLDivElement>(null);
+
+  const handleDropFileSystemHandle = async (
+    item: DataTransferItem
+  ): Promise<boolean> => {
+    if (!item.getAsFileSystemHandle) {
+      return false;
+    }
+    const entry = await item.getAsFileSystemHandle();
+    if (entry.kind === "file") {
+      const file = await (entry as FileSystemFileHandle).getFile();
+      dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+      return true;
+    } else if (entry.kind === "directory") {
+      const plugins: { getFile: () => Promise<File> }[] = [];
+      const values = (
+        entry as FileSystemDirectoryHandle & { values: any }
+      ).values();
+      // I'm scared of yield and generators so I'm just going to do a lame while loop
+      while (true) {
+        const next = await values.next();
+        if (next.done) {
+          break;
+        }
+        if (next.value.kind == "file" && isPluginPath(next.value.name)) {
+          plugins.push(next.value);
+        }
+      }
+      const pluginFiles = await Promise.all(
+        plugins.map(async (plugin) => plugin.getFile())
+      );
+      if (workerPool) {
+        parsePluginFiles(pluginFiles, workerPool);
+      } else {
+        alert("Workers not loaded yet");
+      }
+      return true;
+    }
+    return false;
+  };
+
+  const handleDropWebkitEntry = async (
+    item: DataTransferItem
+  ): Promise<boolean> => {
+    if (!item.webkitGetAsEntry) {
+      return false;
+    }
+    const entry = item.webkitGetAsEntry();
+    if (entry?.isFile) {
+      (entry as FileSystemFileEntry).file(async (file) => {
+        dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+      });
+      return true;
+    } else if (entry?.isDirectory) {
+      const reader = (entry as FileSystemDirectoryEntry).createReader();
+      const plugins = await new Promise<FileSystemFileEntry[]>(
+        (resolve, reject) => {
+          const plugins: FileSystemFileEntry[] = [];
+          reader.readEntries((entries) => {
+            entries.forEach((entry) => {
+              if (entry?.isFile && isPluginPath(entry.name)) {
+                plugins.push(entry as FileSystemFileEntry);
+              }
+            });
+            resolve(plugins);
+          }, reject);
+        }
+      );
+      const pluginFiles = await Promise.all(
+        plugins.map(
+          (plugin) =>
+            new Promise<File>((resolve, reject) =>
+              plugin.file((file) => resolve(file), reject)
+            )
+        )
+      );
+      if (workerPool) {
+        parsePluginFiles(pluginFiles, workerPool);
+      } else {
+        alert("Workers not loaded yet");
+      }
+      return true;
+    }
+    return false;
+  };
+
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setEntered(0);
+
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      const item = event.dataTransfer.items[0];
+      if (item.kind === "file") {
+        // Gotta love all these competing web file system standards...
+        let processed = await handleDropFileSystemHandle(item);
+        if (!processed) {
+          processed = await handleDropWebkitEntry(item);
+        }
+        if (!processed) {
+          const file = item.getAsFile();
+          if (file) {
+            dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
+          }
+        }
+      } else if (item.kind === "string") {
+        item.getAsString((str) => {
+          dispatch(setPluginsTxtAndApplyLoadOrder(str));
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      <div id="drop-zone-overlay" ref={overlay} />
+      {overlay.current && entered > 0
+        ? createPortal(
+            <div className={styles.overlay}>
+              Drop Skyrim Data folder or plugins.txt file
+            </div>,
+            overlay.current
+          )
+        : null}
+      <div
+        className={styles["drop-zone"]}
+        onDragOver={(event) => event.preventDefault()}
+        onDragEnter={() => setEntered((entered) => entered + 1)}
+        onDragLeave={() => setEntered((entered) => entered - 1)}
+        onDrop={handleDrop}
+      >
+        {children}
+      </div>
+    </>
+  );
+};

filesystem.d.ts

@@ -0,0 +1,4 @@
+interface DataTransferItem extends DataTransferItem {
+  getAsFileSystemHandle?(): Promise<FileSystemFileHandle|FileSystemDirectoryHandle>;
+  webkitGetAsEntry?(): FileSystemEntry | null;
+}

pages/index.tsx

@@ -4,14 +4,11 @@ import Head from "next/head";
 import "mapbox-gl/dist/mapbox-gl.css";
 
 import Map from "../components/Map";
-import { useAppDispatch } from "../lib/hooks";
-import { isPlugin, isPluginPath, parsePluginFiles } from "../lib/plugins";
-import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
 import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";
+import { DropZone } from "../components/DropZone";
 
 const Home: NextPage = () => {
   const [workerPool, setWorkerPool] = useState<WorkerPool | null>(null);
-  const dispatch = useAppDispatch();
 
   const createWorkerPool = useCallback(async () => {
     setWorkerPool(
@@ -26,7 +23,7 @@ const Home: NextPage = () => {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch]);
+  }, []);
 
   useEffect(() => {
     createWorkerPool();
@@ -81,129 +78,9 @@ const Home: NextPage = () => {
         <meta name="twitter:creator" content="@tyhallada" />
       </Head>
       <WorkerPoolContext.Provider value={workerPool}>
-        <div
+        <DropZone workerPool={workerPool}>
-          style={{
-            margin: 0,
-            padding: 0,
-            width: "100%",
-            height: "100%",
-          }}
-          onDragOver={(evt) => {
-            evt.preventDefault();
-          }}
-          onDrop={async (evt) => {
-            evt.preventDefault();
-
-            if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
-              const item = evt.dataTransfer.items[0];
-              if (item.kind === "file") {
-                // Gotta love all these competing web file system standards...
-                if (
-                  (
-                    item as DataTransferItem & {
-                      getAsFileSystemHandle?: () => Promise<FileSystemHandle>;
-                    }
-                  ).getAsFileSystemHandle
-                ) {
-                  const entry = await (
-                    item as DataTransferItem & {
-                      getAsFileSystemHandle: () => Promise<FileSystemHandle>;
-                    }
-                  ).getAsFileSystemHandle();
-                  if (entry.kind === "file") {
-                    const file = await (
-                      entry as FileSystemFileHandle
-                    ).getFile();
-                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
-                    return;
-                  } else if (entry.kind === "directory") {
-                    const plugins: { getFile: () => Promise<File> }[] = [];
-                    const values = (
-                      entry as FileSystemDirectoryHandle & { values: any }
-                    ).values();
-                    // I'm scared of yield and generators so I'm just going to do a lame while loop
-                    while (true) {
-                      const next = await values.next();
-                      if (next.done) {
-                        break;
-                      }
-                      if (
-                        next.value.kind == "file" &&
-                        isPluginPath(next.value.name)
-                      ) {
-                        plugins.push(next.value);
-                      }
-                    }
-                    const pluginFiles = await Promise.all(
-                      plugins.map(async (plugin) => plugin.getFile())
-                    );
-                    if (workerPool) {
-                      parsePluginFiles(pluginFiles, workerPool);
-                    } else {
-                      alert("Workers not loaded yet");
-                    }
-                  }
-                } else if (
-                  (
-                    item as DataTransferItem & {
-                      webkitGetAsEntry?: FileSystemEntry | null;
-                    }
-                  ).webkitGetAsEntry
-                ) {
-                  const entry = item.webkitGetAsEntry();
-                  if (entry?.isFile) {
-                    (entry as FileSystemFileEntry).file(async (file) => {
-                      dispatch(
-                        setPluginsTxtAndApplyLoadOrder(await file.text())
-                      );
-                    });
-                  } else if (entry?.isDirectory) {
-                    const reader = (
-                      entry as FileSystemDirectoryEntry
-                    ).createReader();
-                    const plugins = await new Promise<FileSystemFileEntry[]>(
-                      (resolve, reject) => {
-                        const plugins: FileSystemFileEntry[] = [];
-                        reader.readEntries((entries) => {
-                          entries.forEach((entry) => {
-                            if (entry?.isFile && isPluginPath(entry.name)) {
-                              plugins.push(entry as FileSystemFileEntry);
-                            }
-                          });
-                          resolve(plugins);
-                        }, reject);
-                      }
-                    );
-                    const pluginFiles = await Promise.all(
-                      plugins.map(
-                        (plugin) =>
-                          new Promise<File>((resolve, reject) =>
-                            plugin.file((file) => resolve(file), reject)
-                          )
-                      )
-                    );
-                    if (workerPool) {
-                      parsePluginFiles(pluginFiles, workerPool);
-                    } else {
-                      alert("Workers not loaded yet");
-                    }
-                  }
-                } else {
-                  const file = item.getAsFile();
-                  if (file) {
-                    dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
-                  }
-                }
-              } else if (item.kind === "string") {
-                item.getAsString((str) => {
-                  dispatch(setPluginsTxtAndApplyLoadOrder(str));
-                });
-              }
-            }
-          }}
-        >
           <Map />
-        </div>
+        </DropZone>
       </WorkerPoolContext.Provider>
     </>
   );

slices/plugins.ts

@@ -52,6 +52,7 @@ export const pluginsSlice = createSlice({
   initialState,
   reducers: {
     addPlugin: (state, action: PayloadAction<PluginFile>) => ({ plugins: [...state.plugins, action.payload], pending: state.pending }),
+    updatePlugin: (state, action: PayloadAction<PluginFile>) => ({ plugins: [...state.plugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload], pending: state.pending }),
     setPlugins: (state, action: PayloadAction<PluginFile[]>) => ({ plugins: action.payload, pending: state.pending }),
     setPending: (state, action: PayloadAction<number>) => ({ plugins: state.plugins, pending: action.payload }),
     decrementPending: (state, action: PayloadAction<number>) => ({ plugins: state.plugins, pending: state.pending - action.payload }),

styles/DropZone.module.css

@@ -0,0 +1,26 @@
+.drop-zone {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 6;
+  position: fixed;
+}
+
+.overlay {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 7;
+  position: fixed;
+  pointer-events: none;
+  border: 8px dashed #0087f7;
+  font-size: 2rem;
+  color: white;
+  text-shadow: -8px -8px 8px #000, 8px -8px 8px #000, -8px 8px 8px #000,
+    8px 8px 8px #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}