Move viewloader to own file

src/app.tsx

@@ -1,20 +1,13 @@
-import React, { useState, useEffect, useCallback, useContext } from 'react';
+import React from 'react';
 import 'css/main.scss';
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
-import View from 'views/folder/main';
-//import Nav from 'components/nav/nav';
-import Targets from 'funcs/targets';
-import TargetsProvider, { TargetsContext } from './context/targets';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import TargetsProvider from './context/targets';
 import ErrProvider from './context/err';
-import { isDir, pageTitle } from 'funcs/paths';
-import { setFavicon, blinkFavicon } from 'funcs/favicon';
 import Write from 'views/write/write';
-import Nav from 'parts/nav/nav';
 import Search from 'views/search/main';
-import File from 'funcs/files';
-import { dirPath } from 'funcs/paths';
 import Today from 'views/today/main';
 import Topics, { Topic } from 'views/topics/main';
+import { ViewLoader } from 'loader';
 
 export default function App() {
     return (
@@ -34,101 +27,3 @@ export default function App() {
     </TargetsProvider>
     )
 }
-
-export type viewObject = {
-    path: string;
-    dir: dirContents;
-}
-
-export type dirContents = {
-    files:  File[];
-    sorted: boolean;
-}
-
-export function newView(): viewObject {
-    return {
-        path: "",
-        dir: { files: [], sorted: false },
-    };
-}
-
-function ViewLoader() {
-    const { targets } = useContext(TargetsContext);
-    const path = useLocation().pathname;
-
-    const [status, setStatus] = useState("");
-    const [view, setView] = useState(newView());
-
-    function setDir(dir: dirContents) {
-        view.dir = dir;
-        setView({ ...view });
-    }
-
-    // only load when a new *dir* is requested
-    useEffect(() => {
-        document.title = pageTitle(path);
-        setFavicon(path);
-
-        if (shouldLoad(path, view)) {
-            loadView(path);
-        }
-    }, [path, view]);
-
-    async function loadView(path: string) {
-        const resp = await fetch("/api/view" + path);
-        if (!resp.ok) {
-            setStatus(resp.status + " - " + resp.statusText)
-        }
-        const newView = await resp.json();
-        setView(newView);
-    };
-
-    function shouldLoad(path: string, view: viewObject): boolean {
-        // load if is new dir
-        if (isDir(path) && dirPath(path) !== view.path) {
-            return true
-        }
-        // load if is file but no dir loaded
-        if (!isDir(path) && view.path === "") {
-            return true
-        }
-        return false
-    }
-
-    // listen if another tab sends files to this tab.
-    const listenForWrite = useCallback(() => {
-        if (isActiveTarget(targets, path)) {
-            loadView(path);
-            blinkFavicon(path);
-        }
-    }, [targets, path]);
-
-    useEffect(() => {
-        window.addEventListener('storage', listenForWrite);
-
-        return () => {
-            window.removeEventListener('storage', listenForWrite);
-        };
-    }, [listenForWrite]);
-
-    if (status !== "") {
-        return (
-            <>
-                <Nav path={path} />
-                <br />
-                <code>{status}</code>
-            </>
-        );
-    }
-
-    return (
-        <>
-            <Nav path={path} />
-            <View path={path} files={view.dir.files} sorted={view.dir.sorted} setDir={setDir} />
-        </>
-    );
-}
-
-export function isActiveTarget(targets: Targets, path: string): boolean {
-    return targets && path === targets.active;
-}

src/loader.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { TargetsContext } from './context/targets';
+import Nav from 'parts/nav/nav';
+import { isDir, pageTitle } from 'funcs/paths';
+import { setFavicon, blinkFavicon } from 'funcs/favicon';
+import View from 'views/folder/main';
+import Targets from 'funcs/targets';
+import File from 'funcs/files';
+import { dirPath } from 'funcs/paths';
+
+export type viewObject = {
+    path: string;
+    dir: dirContents;
+}
+
+export type dirContents = {
+    files:  File[];
+    sorted: boolean;
+}
+
+export function newView(): viewObject {
+    return {
+        path: "",
+        dir: { files: [], sorted: false },
+    };
+}
+
+export function ViewLoader() {
+    const { targets } = useContext(TargetsContext);
+    const path = useLocation().pathname;
+
+    const [status, setStatus] = useState("");
+    const [view, setView] = useState(newView());
+
+    function setDir(dir: dirContents) {
+        view.dir = dir;
+        setView({ ...view });
+    }
+
+    // only load when a new *dir* is requested
+    useEffect(() => {
+        document.title = pageTitle(path);
+        setFavicon(path);
+
+        if (shouldLoad(path, view)) {
+            loadView(path);
+        }
+    }, [path, view]);
+
+    async function loadView(path: string) {
+        const resp = await fetch("/api/view" + path);
+        if (!resp.ok) {
+            setStatus(resp.status + " - " + resp.statusText)
+        }
+        const newView = await resp.json();
+        setView(newView);
+    };
+
+    function shouldLoad(path: string, view: viewObject): boolean {
+        // load if is new dir
+        if (isDir(path) && dirPath(path) !== view.path) {
+            return true
+        }
+        // load if is file but no dir loaded
+        if (!isDir(path) && view.path === "") {
+            return true
+        }
+        return false
+    }
+
+    // listen if another tab sends files to this tab.
+    const listenForWrite = useCallback(() => {
+        if (isActiveTarget(targets, path)) {
+            loadView(path);
+            blinkFavicon(path);
+        }
+    }, [targets, path]);
+
+    useEffect(() => {
+        window.addEventListener('storage', listenForWrite);
+
+        return () => {
+            window.removeEventListener('storage', listenForWrite);
+        };
+    }, [listenForWrite]);
+
+    if (status !== "") {
+        return (
+            <>
+                <Nav path={path} />
+                <br />
+                <code>{status}</code>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Nav path={path} />
+            <View path={path} files={view.dir.files} sorted={view.dir.sorted} setDir={setDir} />
+        </>
+    );
+}
+
+export function isActiveTarget(targets: Targets, path: string): boolean {
+    return targets && path === targets.active;
+}

src/parts/nav/nav.tsx

@@ -14,7 +14,7 @@ import { setActiveTarget, removeTarget, unsetActiveTarget } from 'funcs/targets'
 import { ErrComponent } from 'parts/nav/error';
 import Config from 'config';
 import { ErrContext } from 'context/err';
-import { isActiveTarget } from 'app';
+import { isActiveTarget } from 'loader';
 
 type NavProps = {
     path: string;

src/views/folder/main.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { basename, dirname, join } from 'path-browserify';
 import { isText, fileType } from 'funcs/paths';
 import { orgSort } from 'funcs/sort';
-import { dirContents } from 'app';
+import { dirContents } from 'loader';
 import File, { merge, insertNewDir, renameText, insertDuplicateFile,
     createDuplicate, isPresent, removeFromArr, updateFile } from 'funcs/files';
 import { saveSortRequest, newDirRequest, moveRequest, writeRequest,

src/views/topics/main.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router';
 import Nav from 'parts/nav/nav';
 import { FileList } from 'views/search/list';
-import { newView } from 'app';
+import { newView } from 'loader';
 
 export type topic = {
     name: string;