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.
This commit is contained in:
Sylvia Crowe 2024-06-03 13:24:20 -07:00
parent f7c2897904
commit bf3a036df9
3 changed files with 26 additions and 19 deletions
frontend/app/view
pkg/service/fileservice

View File

@ -10,6 +10,7 @@ import "./directorypreview.less";
interface DirectoryTableProps { interface DirectoryTableProps {
data: FileInfo[]; data: FileInfo[];
cwd: string;
setFileName: (_: string) => void; setFileName: (_: string) => void;
} }
@ -26,11 +27,11 @@ const defaultColumns = [
}), }),
columnHelper.accessor("mimetype", { columnHelper.accessor("mimetype", {
cell: (info) => info.getValue(), cell: (info) => info.getValue(),
header: () => <span>Mimetype</span>, header: () => <span>Type</span>,
}), }),
]; ];
function DirectoryTable<T, U>({ data, setFileName }: DirectoryTableProps) { function DirectoryTable({ data, cwd, setFileName }: DirectoryTableProps) {
const [columns] = React.useState<typeof defaultColumns>(() => [...defaultColumns]); const [columns] = React.useState<typeof defaultColumns>(() => [...defaultColumns]);
const table = useReactTable({ const table = useReactTable({
data, data,
@ -75,9 +76,9 @@ function DirectoryTable<T, U>({ data, setFileName }: DirectoryTableProps) {
))} ))}
</div> </div>
{table.getState().columnSizingInfo.isResizingColumn ? ( {table.getState().columnSizingInfo.isResizingColumn ? (
<MemoizedTableBody table={table} setFileName={setFileName} /> <MemoizedTableBody table={table} cwd={cwd} setFileName={setFileName} />
) : ( ) : (
<TableBody table={table} setFileName={setFileName} /> <TableBody table={table} cwd={cwd} setFileName={setFileName} />
)} )}
</div> </div>
); );
@ -85,10 +86,11 @@ function DirectoryTable<T, U>({ data, setFileName }: DirectoryTableProps) {
interface TableBodyProps { interface TableBodyProps {
table: Table<FileInfo>; table: Table<FileInfo>;
cwd: string;
setFileName: (_: string) => void; setFileName: (_: string) => void;
} }
function TableBody({ table, setFileName }: TableBodyProps) { function TableBody({ table, cwd, setFileName }: TableBodyProps) {
return ( return (
<div className="dir-table-body"> <div className="dir-table-body">
{table.getRowModel().rows.map((row) => ( {table.getRowModel().rows.map((row) => (
@ -98,18 +100,21 @@ function TableBody({ table, setFileName }: TableBodyProps) {
tabIndex={0} tabIndex={0}
onDoubleClick={() => { onDoubleClick={() => {
const newFileName = row.getValue("path") as string; const newFileName = row.getValue("path") as string;
setFileName(newFileName); const fullPath = cwd.concat("/", newFileName);
setFileName(fullPath);
}} }}
> >
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => {
<div return (
className="dir-table-body-cell" <div
key={cell.id} className="dir-table-body-cell"
style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }} key={cell.id}
> style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
{cell.renderValue<any>()} >
</div> {cell.renderValue<string>()}
))} </div>
);
})}
</div> </div>
))} ))}
</div> </div>
@ -130,7 +135,7 @@ function DirectoryPreview({ contentAtom, fileNameAtom }: DirectoryPreviewProps)
const contentText = jotai.useAtomValue(contentAtom); const contentText = jotai.useAtomValue(contentAtom);
let content: FileInfo[] = JSON.parse(contentText); let content: FileInfo[] = JSON.parse(contentText);
let [fileName, setFileName] = jotai.useAtom(fileNameAtom); let [fileName, setFileName] = jotai.useAtom(fileNameAtom);
return <DirectoryTable data={content} setFileName={setFileName} />; return <DirectoryTable data={content} cwd={fileName} setFileName={setFileName} />;
} }
export { DirectoryPreview }; export { DirectoryPreview };

View File

@ -55,6 +55,7 @@ function StreamingPreview({ fileInfo }: { fileInfo: FileInfo }) {
} }
function PreviewView({ blockId }: { blockId: string }) { function PreviewView({ blockId }: { blockId: string }) {
/*
const blockData = WOS.useWaveObjectValueWithSuspense<Block>(WOS.makeORef("block", blockId)); const blockData = WOS.useWaveObjectValueWithSuspense<Block>(WOS.makeORef("block", blockId));
if (blockData == null) { if (blockData == null) {
return ( return (
@ -63,6 +64,7 @@ function PreviewView({ blockId }: { blockId: string }) {
</div> </div>
); );
} }
*/
const blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`); const blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`);
const fileNameAtom: jotai.WritableAtom<string, [string], void> = useBlockCache(blockId, "preview:filename", () => const fileNameAtom: jotai.WritableAtom<string, [string], void> = useBlockCache(blockId, "preview:filename", () =>
jotai.atom<string, [string], void>( jotai.atom<string, [string], void>(
@ -114,6 +116,7 @@ function PreviewView({ blockId }: { blockId: string }) {
mimeType = ""; mimeType = "";
} }
const fileInfo = jotai.useAtomValue(statFileAtom); const fileInfo = jotai.useAtomValue(statFileAtom);
const fileContent = jotai.useAtomValue(fileContentAtom);
// handle streaming files here // handle streaming files here
if (mimeType.startsWith("video/") || mimeType.startsWith("audio/") || mimeType.startsWith("image/")) { if (mimeType.startsWith("video/") || mimeType.startsWith("audio/") || mimeType.startsWith("image/")) {
@ -131,7 +134,7 @@ function PreviewView({ blockId }: { blockId: string }) {
if (mimeType.startsWith("text/")) { if (mimeType.startsWith("text/")) {
return ( return (
<div className="view-preview view-preview-text"> <div className="view-preview view-preview-text">
<pre>{jotai.useAtomValue(fileContentAtom)}</pre> <pre>{fileContent}</pre>
</div> </div>
); );
} }

View File

@ -73,9 +73,8 @@ func (fs *FileService) ReadFile(path string) (*FullFile, error) {
var innerFilesInfo []FileInfo var innerFilesInfo []FileInfo
for _, innerFileEntry := range innerFilesEntries { for _, innerFileEntry := range innerFilesEntries {
innerFileInfoInt, _ := innerFileEntry.Info() innerFileInfoInt, _ := innerFileEntry.Info()
fullFilePath := filepath.Join(finfo.Path, innerFileInfoInt.Name())
innerFileInfo := FileInfo{ innerFileInfo := FileInfo{
Path: fullFilePath, Path: innerFileInfoInt.Name(),
Size: innerFileInfoInt.Size(), Size: innerFileInfoInt.Size(),
Mode: innerFileInfoInt.Mode(), Mode: innerFileInfoInt.Mode(),
ModTime: innerFileInfoInt.ModTime().UnixMilli(), ModTime: innerFileInfoInt.ModTime().UnixMilli(),