From bf3a036df96e6aa2c5aea5ceff18d9aad93e19c6 Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Mon, 3 Jun 2024 13:24:20 -0700 Subject: [PATCH 1/2] fix: recreate full directory path and fix hooks This fixes two bugs. The first had to do with the path library not working in prod. That involved making a simple version of it that works in the meantime. The other is rendering a different number of hooks which required moving hooks outside of an if statement. --- frontend/app/view/directorypreview.tsx | 37 +++++++++++++++----------- frontend/app/view/preview.tsx | 5 +++- pkg/service/fileservice/fileservice.go | 3 +-- 3 files changed, 26 insertions(+), 19 deletions(-) diff --git a/frontend/app/view/directorypreview.tsx b/frontend/app/view/directorypreview.tsx index 464ae20e0..8801e93ea 100644 --- a/frontend/app/view/directorypreview.tsx +++ b/frontend/app/view/directorypreview.tsx @@ -10,6 +10,7 @@ import "./directorypreview.less"; interface DirectoryTableProps { data: FileInfo[]; + cwd: string; setFileName: (_: string) => void; } @@ -26,11 +27,11 @@ const defaultColumns = [ }), columnHelper.accessor("mimetype", { cell: (info) => info.getValue(), - header: () => Mimetype, + header: () => Type, }), ]; -function DirectoryTable({ data, setFileName }: DirectoryTableProps) { +function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) { const [columns] = React.useState(() => [...defaultColumns]); const table = useReactTable({ data, @@ -75,9 +76,9 @@ function DirectoryTable({ data, setFileName }: DirectoryTableProps) { ))} {table.getState().columnSizingInfo.isResizingColumn ? ( - + ) : ( - + )} ); @@ -85,10 +86,11 @@ function DirectoryTable({ data, setFileName }: DirectoryTableProps) { interface TableBodyProps { table: Table; + cwd: string; setFileName: (_: string) => void; } -function TableBody({ table, setFileName }: TableBodyProps) { +function TableBody({ table, cwd, setFileName }: TableBodyProps) { return (
{table.getRowModel().rows.map((row) => ( @@ -98,18 +100,21 @@ function TableBody({ table, setFileName }: TableBodyProps) { tabIndex={0} onDoubleClick={() => { const newFileName = row.getValue("path") as string; - setFileName(newFileName); + const fullPath = cwd.concat("/", newFileName); + setFileName(fullPath); }} > - {row.getVisibleCells().map((cell) => ( -
- {cell.renderValue()} -
- ))} + {row.getVisibleCells().map((cell) => { + return ( +
+ {cell.renderValue()} +
+ ); + })}
))} @@ -130,7 +135,7 @@ function DirectoryPreview({ contentAtom, fileNameAtom }: DirectoryPreviewProps) const contentText = jotai.useAtomValue(contentAtom); let content: FileInfo[] = JSON.parse(contentText); let [fileName, setFileName] = jotai.useAtom(fileNameAtom); - return ; + return ; } export { DirectoryPreview }; diff --git a/frontend/app/view/preview.tsx b/frontend/app/view/preview.tsx index e896baf8e..32de511d1 100644 --- a/frontend/app/view/preview.tsx +++ b/frontend/app/view/preview.tsx @@ -55,6 +55,7 @@ function StreamingPreview({ fileInfo }: { fileInfo: FileInfo }) { } function PreviewView({ blockId }: { blockId: string }) { + /* const blockData = WOS.useWaveObjectValueWithSuspense(WOS.makeORef("block", blockId)); if (blockData == null) { return ( @@ -63,6 +64,7 @@ function PreviewView({ blockId }: { blockId: string }) { ); } + */ const blockAtom = WOS.getWaveObjectAtom(`block:${blockId}`); const fileNameAtom: jotai.WritableAtom = useBlockCache(blockId, "preview:filename", () => jotai.atom( @@ -114,6 +116,7 @@ function PreviewView({ blockId }: { blockId: string }) { mimeType = ""; } const fileInfo = jotai.useAtomValue(statFileAtom); + const fileContent = jotai.useAtomValue(fileContentAtom); // handle streaming files here if (mimeType.startsWith("video/") || mimeType.startsWith("audio/") || mimeType.startsWith("image/")) { @@ -131,7 +134,7 @@ function PreviewView({ blockId }: { blockId: string }) { if (mimeType.startsWith("text/")) { return (
- 
{jotai.useAtomValue(fileContentAtom)}
+ 
{fileContent}
); } diff --git a/pkg/service/fileservice/fileservice.go b/pkg/service/fileservice/fileservice.go index 0178d6f1b..c66c81d07 100644 --- a/pkg/service/fileservice/fileservice.go +++ b/pkg/service/fileservice/fileservice.go @@ -73,9 +73,8 @@ func (fs *FileService) ReadFile(path string) (*FullFile, error) { var innerFilesInfo []FileInfo for _, innerFileEntry := range innerFilesEntries { innerFileInfoInt, _ := innerFileEntry.Info() - fullFilePath := filepath.Join(finfo.Path, innerFileInfoInt.Name()) innerFileInfo := FileInfo{ - Path: fullFilePath, + Path: innerFileInfoInt.Name(), Size: innerFileInfoInt.Size(), Mode: innerFileInfoInt.Mode(), ModTime: innerFileInfoInt.ModTime().UnixMilli(), From 28d02f760c53069364abc4ef4ba1aab67ba20af0 Mon Sep 17 00:00:00 2001 From: Sylvia Crowe Date: Mon, 3 Jun 2024 15:50:51 -0700 Subject: [PATCH 2/2] feat: add background navigation bar This allows traversal backwards in a preview block. --- frontend/app/view/preview.tsx | 73 ++++++++++++++++++++++++++--------- frontend/app/view/view.less | 24 ++++++++++++ 2 files changed, 79 insertions(+), 18 deletions(-) diff --git a/frontend/app/view/preview.tsx b/frontend/app/view/preview.tsx index 32de511d1..90693287b 100644 --- a/frontend/app/view/preview.tsx +++ b/frontend/app/view/preview.tsx @@ -14,6 +14,39 @@ import "./view.less"; const MaxFileSize = 1024 * 1024 * 10; // 10MB +function DirNav({ cwdAtom }: { cwdAtom: jotai.WritableAtom }) { + const [cwd, setCwd] = jotai.useAtom(cwdAtom); + let splitNav = [cwd]; + let remaining = cwd; + + let idx = remaining.lastIndexOf("/"); + while (idx !== -1) { + remaining = remaining.substring(0, idx); + splitNav.unshift(remaining); + + idx = remaining.lastIndexOf("/"); + } + if (splitNav.length === 0) { + splitNav = [cwd]; + } + return ( +
+ {splitNav.map((item) => { + let splitPath = item.split("/"); + if (splitPath.length === 0) { + splitPath = [item]; + } + const baseName = splitPath[splitPath.length - 1]; + return ( + setCwd(item)}> + {baseName} + + ); + })} +
+ ); +} + function MarkdownPreview({ contentAtom }: { contentAtom: jotai.Atom> }) { const readmeText = jotai.useAtomValue(contentAtom); return ( @@ -119,31 +152,35 @@ function PreviewView({ blockId }: { blockId: string }) { const fileContent = jotai.useAtomValue(fileContentAtom); // handle streaming files here + let specializedView: React.ReactNode; if (mimeType.startsWith("video/") || mimeType.startsWith("audio/") || mimeType.startsWith("image/")) { - return ; - } - if (fileInfo == null) { - return File Not Found; - } - if (fileInfo.size > MaxFileSize) { - return File Too Large to Preview; - } - if (mimeType === "text/markdown") { - return ; - } - if (mimeType.startsWith("text/")) { - return ( + specializedView = ; + } else if (fileInfo == null) { + specializedView = File Not Found; + } else if (fileInfo.size > MaxFileSize) { + specializedView = File Too Large to Preview; + } else if (mimeType === "text/markdown") { + specializedView = ; + } else if (mimeType.startsWith("text/")) { + specializedView = ( 
{fileContent}
); + } else if (mimeType === "directory") { + specializedView = ; + } else { + specializedView = ( +
+
Preview ({mimeType})
+
+ ); } - if (mimeType === "directory") { - return ; - } + return ( -
-
Preview ({mimeType})
+
+ + {specializedView}
); } diff --git a/frontend/app/view/view.less b/frontend/app/view/view.less index d3e1ddc5f..2f6b2aca9 100644 --- a/frontend/app/view/view.less +++ b/frontend/app/view/view.less @@ -78,3 +78,27 @@ align-items: start; } } + +.full-preview { + display: flex; + flex-direction: column; +} + +.view-nav { + display: flex; + gap: 0.5rem; + + .view-nav-item { + background-color: var(--panel-bg-color); + border-radius: 3px; + padding: 0.2rem; + + &:hover { + background-color: var(--highlight-bg-color); + } + + &:active { + background-color: var(--accent-color); + } + } +}