Rename files

src/App.tsx

@@ -3,11 +3,11 @@ import 'css/main.scss';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import TargetsProvider from './context/targets';
 import ErrProvider from './context/err';
-import Write from 'views/write/write';
-import Search from 'views/search/main';
-import Today from 'views/today/main';
-import Topics, { Topic } from 'views/topics/main';
-import Loader from 'loader';
+import Write from 'views/Write';
+import Search from 'views/Search';
+import Today from 'views/Today';
+import Topics, { Topic } from 'views/Topics';
+import Loader from 'Loader';
 
 export default function App() {
     return (

src/Loader.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { TargetsContext } from './context/targets';
+import Nav from 'parts/Nav';
+import { isDir, pageTitle } from 'funcs/paths';
+import { setFavicon, blinkFavicon } from 'funcs/favicon';
+import { isActiveTarget } from 'funcs/targets';
+import { dirPath } from 'funcs/paths';
+import useView, { viewObject } from 'state';
+import View from 'views/View';
+
+export default function Loader() {
+    const { targets } = useContext(TargetsContext);
+    const path = useLocation().pathname;
+
+    const { view, setView } = useView()
+
+    const [status, setStatus] = useState("");
+
+    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);
+    };
+
+    // only load when a new *dir* is requested
+    useEffect(() => {
+        document.title = pageTitle(path);
+        setFavicon(path);
+
+        if (shouldLoad(path, view)) {
+            loadView(path);
+        }
+    }, [path, view]);
+
+    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} />
+        </>
+    );
+}

src/app.tsx

@@ -3,11 +3,11 @@ import 'css/main.scss';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import TargetsProvider from './context/targets';
 import ErrProvider from './context/err';
-import Write from 'views/write/write';
-import Search from 'views/search/main';
-import Today from 'views/today/main';
-import Topics, { Topic } from 'views/topics/main';
-import Loader from 'loader';
+import Write from 'views/Write';
+import Search from 'views/Search';
+import Today from 'views/Today';
+import Topics, { Topic } from 'views/Topics';
+import Loader from 'Loader';
 
 export default function App() {
     return (

src/loader.tsx

@@ -1,13 +1,13 @@
 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 Nav from 'parts/Nav';
 import { isDir, pageTitle } from 'funcs/paths';
 import { setFavicon, blinkFavicon } from 'funcs/favicon';
 import { isActiveTarget } from 'funcs/targets';
 import { dirPath } from 'funcs/paths';
 import useView, { viewObject } from 'state';
-import View from 'views/folder/main';
+import View from 'views/View';
 
 export default function Loader() {
     const { targets } = useContext(TargetsContext);

src/parts/meta/main.tsx → src/parts/Meta.tsx

@@ -1,15 +1,15 @@
 import React, {useContext } from 'react';
 import { basename, dirname, join } from 'path-browserify';
 import File from 'funcs/files';
-import { copyRequest } from '../../funcs/requests';
+import { copyRequest } from '../funcs/requests';
 import { ErrContext } from 'context/err';
 import { TargetsContext } from 'context/targets';
-import FileName from './rename';
+import FileName from './meta/FileName';
 import PublicIcon from '@mui/icons-material/PublicSharp';
 import DuplicateIcon from '@mui/icons-material/DifferenceSharp';
 import DeleteIcon from '@mui/icons-material/ClearSharp';
-import { ReactComponent as RarrC } from './svg/rarrc.svg'
-import { ReactComponent as Rarr } from './svg/rarr.svg'
+import { ReactComponent as RarrC } from './meta/svg/rarrc.svg'
+import { ReactComponent as Rarr } from './meta/svg/rarr.svg'
 import useView from 'state';
 
 export function Meta({file}: { file: File }) {

src/parts/nav/nav.tsx → src/parts/Nav.tsx

@@ -5,7 +5,7 @@ import TargetIcon from '@mui/icons-material/BookmarkBorder';
 import ActiveTargetIcon from '@mui/icons-material/BookmarkOutlined';
 import { basename, dirname } from 'path-browserify';
 import CrumbNav from 'parts/nav/crumbs';
-import { Del } from 'parts/meta/main';
+import { Del } from 'parts/Meta';
 import { extendedBase, section, isFile } from 'funcs/paths';
 import { TargetsContext, TargetsProps } from 'context/targets';
 //import { ErrContext } from 'context/err';

src/state.tsx

@@ -137,7 +137,7 @@ const useView = create<ViewState>()(
           const filePath = join(dirPath, newTimestamp() + ".txt")
           return filePath;
         }
-          }),
+      }),
       {
         name: 'dir-state',
       },

src/views/all/main.tsx → src/views/All.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import File, { filesOnly } from 'funcs/files';
 import { FileList } from 'views/search/list'
 
-type AllViewProps = {
-    path: string;
-    files: File[];
-}
-
-export default function All({path, files}: AllViewProps){
+export default function All({files}: { files: File[] }){
     return (
         <section id="files">
         <FileList files={filesOnly(files)} />

src/views/search/main.tsx → src/views/Search.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
-import { SearchView } from './view';
-import Nav from 'parts/nav/nav';
+import { SearchView } from './search/view';
+import Nav from 'parts/Nav';
 import File from 'funcs/files';
 
 type resultView = {

src/views/topics/main.tsx → src/views/Topics.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router';
-import Nav from 'parts/nav/nav';
+import Nav from 'parts/Nav';
 import { FileList } from 'views/search/list';
 import { newView } from 'state';
 

src/views/folder/main.tsx → src/views/View.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import All from 'views/all/main';
+import All from 'views/All';
 import { fileType } from 'funcs/paths';
 import File from 'funcs/files';
-import TextView from 'views/folder/views/text';
-import DirView from 'views/folder/views/dir';
-import MediaView from './views/media';
+import TextView from 'views/folder/TextView';
+import DirView from 'views/folder/DirView';
+import MediaView from './folder/MediaView';
 
 type ViewProps = {
     path: string;
@@ -20,7 +20,7 @@ export default function View({path, files }: ViewProps) {
         case "media":
             return <MediaView path={path} files={files} />;
         case "all":
-            return <All path={path} files={files} />;
+            return <All files={files} />;
         default:
             return <DirView path={path} files={files} />
     }

src/views/folder/views/dir.tsx → src/views/folder/DirView.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Head from 'parts/head/main';
+import Head from 'parts/Head';
 import File, { dirsOnly, filesOnly } from 'funcs/files';
-import { DirList, FileList } from 'views/folder/list';
-import { AddDir, AddText } from 'views/folder/add';
+import { DirList, FileList } from 'views/folder/parts/lists';
+import { AddDir, AddText } from 'views/folder/parts/AddDir';
 import { HotKeys } from 'react-hotkeys';
 import useView from 'state';
 import { useNavigate } from 'react-router';

src/views/folder/views/media.tsx → src/views/folder/MediaView.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import Head from 'parts/head/main';
+import Head from 'parts/Head';
 import File from 'funcs/files';
-import Image from '../files/image';
-import Video from '../files/video';
+import Image from './files/Image';
+import Video from './files/Video';
 
 import { basename } from 'path-browserify';
 

src/views/folder/views/text.tsx → src/views/folder/TextView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Head from 'parts/head/main';
-import TextField from 'views/folder/files/text';
+import Head from 'parts/Head';
+import TextField from 'views/folder/files/TextView';
 import File, { newFile } from 'funcs/files';
 
 import { basename } from 'path-browserify';

src/views/folder/files/Image.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import File from 'funcs/files';
+import Info from './Info';
+import AddInfo from './extra/AddInfo';
+
+export default function Image({file, isSingle}: { file: File; isSingle?: boolean }) {
+    if (isSingle) {
+        return <img alt="" src={"/file" + file.path} />
+    } else {
+        return (
+            <div className="list-media">
+                <img alt="" src={"/file" + file.path} />
+                <AddInfo mainFilePath={file.path}></AddInfo>
+                <Info mainFilePath={file.path} />
+            </div>
+        )
+    }
+}

src/views/folder/files/Info.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import TextField from './TextView';
+import { newInfoFile } from 'funcs/files';
+
+export default function Info({ mainFilePath }: { mainFilePath: string }) {
+    const info = newInfoFile(mainFilePath);
+    return (
+        <TextField file={info} isSingle={false} />
+    )
+}

src/views/folder/files/Video.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import File from 'funcs/files';
+import AddInfo from 'views/folder/files/extra/AddInfo'
+
+type VideoProps = {
+    file: File;
+    isSingle?: boolean;
+}
+
+export default function Video({file, isSingle}: VideoProps) {
+    if (isSingle) {
+        return (
+            <video controls src={"/file" + file.path}></video>
+        )
+    } else {
+        return (
+            <div className="list-media">
+                <video controls src={"/file" + file.path}></video>
+                <AddInfo mainFilePath={file.path}></AddInfo>
+            </div>
+        )
+    }
+}
+

src/views/folder/files/image.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
 import File from 'funcs/files';
-import Info from './info';
-import AddInfo from './extra/add-info';
+import Info from './Info';
+import AddInfo from './extra/AddInfo';
 
-type ImageProps = {
-    file: File;
-    isSingle?: boolean;
-}
-
-export default function Image({file, isSingle}: ImageProps) {
+export default function Image({file, isSingle}: { file: File; isSingle?: boolean }) {
     if (isSingle) {
         return <img alt="" src={"/file" + file.path} />
     } else {

src/views/folder/files/info.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TextField from './text';
+import TextField from './TextView';
 import { newInfoFile } from 'funcs/files';
 
 export default function Info({ mainFilePath }: { mainFilePath: string }) {

src/views/folder/files/video.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import File from 'funcs/files';
-import AddInfo from 'views/folder/files/extra/add-info'
+import AddInfo from 'views/folder/files/extra/AddInfo'
 
 type VideoProps = {
     file: File;

src/views/folder/list.tsx → src/views/folder/parts/lists.tsx

@@ -7,8 +7,8 @@ import File from 'funcs/files';
 import { setActiveTarget } from 'funcs/targets';
 import { TargetsContext } from 'context/targets';
 import { separate } from 'funcs/sort';
-import { FileSwitch } from 'views/folder/switch'
-import { Meta } from '../../parts/meta/main';
+import { FileSwitch } from 'views/folder/parts/switch'
+import { Meta } from '../../../parts/Meta';
 import Sortable from 'sortablejs';
 import { flushSync } from 'react-dom';
 import useView from 'state';

src/views/folder/switch.tsx → src/views/folder/parts/switch.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Meta } from 'parts/meta/main';
-import Text from 'views/folder/files/text';
-import Image from 'views/folder/files/image';
-import Video from 'views/folder/files/video';
+import { Meta } from 'parts/Meta';
+import Text from 'views/folder/files/TextView';
+import Image from 'views/folder/files/Image';
+import Video from 'views/folder/files/Video';
 import File from 'funcs/files';
 
 export function FileSwitch({file, isSingle}: { file: File; isSingle: boolean }) {

src/views/search/chart.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { monthObj } from './main';
+import { monthObj } from '../Search';
 import {
     Chart,
     CategoryScale,

src/views/search/view.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import File, { filesOnly } from 'funcs/files';
 import { FileList } from './list';
 //import { dirname, join } from 'path-browserify';
-import { monthObj } from './main';
+import { monthObj } from '../Search';
 import TimeChart from './chart';
 
 export function SearchView({path, months, files}: {path: string, months: monthObj[], files: File[]}) {