Spaces:
Running
Running
File size: 2,634 Bytes
2fb9e9d 7d3eca5 2fb9e9d 7d3eca5 2fb9e9d 7d3eca5 2fb9e9d 7d3eca5 2fb9e9d 7d3eca5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
// The directory browser.
import Image from "next/image";
import Link from 'next/link';
// @ts-ignore
import Home from '~icons/tabler/home'
// @ts-ignore
import Folder from '~icons/tabler/folder'
// @ts-ignore
import FolderPlus from '~icons/tabler/folder-plus'
// @ts-ignore
import File from '~icons/tabler/file'
// @ts-ignore
import FilePlus from '~icons/tabler/file-plus'
export default async function Home({
searchParams,
}: {
searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
;
async function fetchList(path) {
const encodedPath = encodeURIComponent(path || '');
const res = await fetch(`http://localhost:8000/api/dir/list?path=${encodedPath}`);
const j = await res.json();
return j;
}
const path = (await searchParams)?.path || '';
const list = await fetchList(path);
function link(item) {
if (item.type === 'directory') {
return `/dir?path=${item.name}`;
} else {
return `/workspace?path=${item.name}`;
}
}
function shortName(item) {
return item.name.split('/').pop();
}
function newName(list) {
let i = 0;
while (true) {
const name = `Untitled${i ? ` ${i}` : ''}`;
if (!list.find(item => item.name === name)) {
return name;
}
i++;
}
}
function newWorkspaceIn(path, list) {
const pathSlash = path ? `${path}/` : '';
return `/workspace?path=${pathSlash}${newName(list)}`;
}
async function newFolderIn(path, list) {
const pathSlash = path ? `${path}/` : '';
const name = newName(list);
const res = await fetch(`/api/dir/mkdir`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ path: pathSlash + name }),
});
list = await res.json();
}
return (
<div className="directory-page">
<div className="logo">
<Link href="https://lynxkite.com/"><img src='/logo.png' className="logo-image" alt="LynxKite logo" /></Link>
<div className="tagline">The Complete Graph Data Science Platform</div>
</div>
<div className="entry-list">
<div className="actions">
<a href={newWorkspaceIn(path, list)}><FilePlus /> New workspace</a>
<a href="" onClick={() => newFolderIn(path, list)}><FolderPlus /> New folder</a>
</div>
{path && <div className="breadcrumbs"><a href="#dir"><Home /></a> {path} </div>}
{list.map(item =>
<a className="entry" href={link(item)}>
{item.type === 'directory' ? <Folder /> : <File />}
{shortName(item)}
</a>
)}
</div>
</div>
);
}
|