diff --git a/src/app.tsx b/src/app.tsx
index 9117253..161f7af 100644
--- a/src/app.tsx
+++ b/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() {
)
}
-
-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 (
- <>
-
-
- {status}
- >
- );
- }
-
- return (
- <>
-
-
- >
- );
-}
-
-export function isActiveTarget(targets: Targets, path: string): boolean {
- return targets && path === targets.active;
-}
\ No newline at end of file
diff --git a/src/loader.tsx b/src/loader.tsx
new file mode 100644
index 0000000..7e182ed
--- /dev/null
+++ b/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 (
+ <>
+
+
+ {status}
+ >
+ );
+ }
+
+ return (
+ <>
+
+
+ >
+ );
+}
+
+export function isActiveTarget(targets: Targets, path: string): boolean {
+ return targets && path === targets.active;
+}
\ No newline at end of file
diff --git a/src/parts/nav/nav.tsx b/src/parts/nav/nav.tsx
index bc8914f..1beda3a 100644
--- a/src/parts/nav/nav.tsx
+++ b/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;
diff --git a/src/views/folder/main.tsx b/src/views/folder/main.tsx
index e792b76..4871c74 100644
--- a/src/views/folder/main.tsx
+++ b/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,
diff --git a/src/views/topics/main.tsx b/src/views/topics/main.tsx
index 71a5614..f3d0706 100644
--- a/src/views/topics/main.tsx
+++ b/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;