2022-05-09 21:04:46 +00:00
|
|
|
import { faFile, faFolder } from "@fortawesome/free-solid-svg-icons"
|
2022-05-27 13:58:16 +00:00
|
|
|
import { CloudUpload, CreateNewFolder } from "@mui/icons-material"
|
2022-05-24 13:27:35 +00:00
|
|
|
import { IconButton, Link as MuiLink } from "@mui/material"
|
2022-05-09 21:04:46 +00:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
|
import { useCookies } from 'react-cookie'
|
2022-05-22 11:38:28 +00:00
|
|
|
import { resolve as pathResolve } from 'path'
|
2022-05-22 10:11:06 +00:00
|
|
|
import api from '../../api_utils'
|
2022-05-22 10:23:07 +00:00
|
|
|
import Icon from "../../components/other/icon"
|
|
|
|
|
import Table from "../../components/user/table"
|
2022-05-24 13:27:35 +00:00
|
|
|
import UploadModal from "../../components/user/modals/upload"
|
2022-05-27 13:58:16 +00:00
|
|
|
import CreateFolderModal from "../../components/user/modals/create-folder"
|
2022-06-11 08:46:25 +00:00
|
|
|
import IconDiv from "../../components/other/icon-div"
|
2022-05-09 21:04:46 +00:00
|
|
|
|
|
|
|
|
export default function Files() {
|
|
|
|
|
const [cookies] = useCookies(["token"])
|
|
|
|
|
|
|
|
|
|
const [path, setPath] = useState("")
|
|
|
|
|
const [files, setFiles] = useState([{ name: "", size: "", modified: "" }])
|
|
|
|
|
const [folders, setFolders] = useState([{ name: "", size: "", modified: "" }])
|
|
|
|
|
|
|
|
|
|
const refresh = (path: string) => {
|
|
|
|
|
api.list(path, cookies.token)
|
|
|
|
|
.then(data => {
|
|
|
|
|
setPath(path)
|
|
|
|
|
setFolders(data.dirs)
|
|
|
|
|
setFiles(data.files)
|
|
|
|
|
})
|
|
|
|
|
.catch(err => console.error(err))
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-24 13:27:35 +00:00
|
|
|
const refreshFolder = () => refresh(path)
|
|
|
|
|
|
2022-05-09 21:04:46 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
const params = new URLSearchParams(window.location.search)
|
2022-05-22 11:38:28 +00:00
|
|
|
const path = params.get("path") || ""
|
2022-05-09 21:04:46 +00:00
|
|
|
|
|
|
|
|
api.list(path, cookies.token)
|
|
|
|
|
.then(data => {
|
|
|
|
|
setPath(path)
|
|
|
|
|
setFolders(data.dirs)
|
|
|
|
|
setFiles(data.files)
|
|
|
|
|
})
|
|
|
|
|
.catch(err => console.error(err))
|
|
|
|
|
}, [cookies])
|
|
|
|
|
|
2022-05-24 13:27:35 +00:00
|
|
|
// modals
|
|
|
|
|
const [uploadModal, setUploadModal] = useState(false)
|
2022-05-27 13:58:16 +00:00
|
|
|
const [createFolderModal, setCreateFolderModal] = useState(false)
|
2022-05-24 13:27:35 +00:00
|
|
|
|
2022-05-09 21:04:46 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Files - HomeDisk</title>
|
|
|
|
|
</Head>
|
|
|
|
|
|
2022-06-11 08:46:25 +00:00
|
|
|
<MuiLink sx={{display: "flex"}}>
|
|
|
|
|
<IconDiv>
|
|
|
|
|
<IconButton
|
|
|
|
|
size="large"
|
|
|
|
|
edge="start"
|
|
|
|
|
color="inherit"
|
|
|
|
|
aria-label="logo"
|
|
|
|
|
onClick={() => setUploadModal(true)}
|
|
|
|
|
>
|
|
|
|
|
<CloudUpload />
|
|
|
|
|
</IconButton>
|
|
|
|
|
</IconDiv>
|
2022-05-27 13:58:16 +00:00
|
|
|
|
2022-06-11 08:46:25 +00:00
|
|
|
<IconDiv>
|
|
|
|
|
<IconButton
|
|
|
|
|
size="large"
|
|
|
|
|
edge="start"
|
|
|
|
|
color="inherit"
|
|
|
|
|
aria-label="logo"
|
|
|
|
|
onClick={() => setCreateFolderModal(true)}
|
|
|
|
|
>
|
|
|
|
|
<CreateNewFolder />
|
|
|
|
|
</IconButton>
|
|
|
|
|
</IconDiv>
|
2022-05-24 13:27:35 +00:00
|
|
|
</MuiLink>
|
|
|
|
|
|
|
|
|
|
<UploadModal open={uploadModal} setOpen={setUploadModal} path={path} refresh={refreshFolder} />
|
2022-05-27 13:58:16 +00:00
|
|
|
<CreateFolderModal open={createFolderModal} setOpen={setCreateFolderModal} refresh={refreshFolder} />
|
2022-05-24 13:27:35 +00:00
|
|
|
|
2022-05-09 21:04:46 +00:00
|
|
|
<Table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Name</td>
|
|
|
|
|
<td>Size</td>
|
|
|
|
|
<td>Modified</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<tbody>
|
2022-05-22 11:38:28 +00:00
|
|
|
{path != "" && path != "/" && (
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<Link href={`?path=${pathResolve(path, '..')}`}>
|
|
|
|
|
<MuiLink onClick={() => refresh(pathResolve(path, '..'))}>
|
|
|
|
|
<Icon icon={faFolder} />
|
|
|
|
|
.. (go up)
|
|
|
|
|
</MuiLink>
|
|
|
|
|
</Link>
|
|
|
|
|
</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
</tr>
|
|
|
|
|
)}
|
|
|
|
|
|
2022-05-09 21:04:46 +00:00
|
|
|
{folders.map((f, index) => <FolderComponent key={index} name={f.name} path={`${path}/${f.name}`} size={f.size} modified={f.modified} refresh={refresh} />)}
|
|
|
|
|
{files.map((f, index) => <FileComponent key={index} name={f.name} path={`${path}/${f.name}`} size={f.size} modified={f.modified} refresh={refresh} />)}
|
|
|
|
|
</tbody>
|
|
|
|
|
</Table>
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FolderComponent({ name, path, size, modified, refresh }: Props) {
|
|
|
|
|
return (
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
2022-05-22 11:38:28 +00:00
|
|
|
<Link href={`?path=${path}`}>
|
2022-05-09 21:04:46 +00:00
|
|
|
<MuiLink onClick={() => refresh(path)}>
|
|
|
|
|
<Icon icon={faFolder} />
|
2022-05-22 10:11:06 +00:00
|
|
|
{name.replace("/", "")}
|
2022-05-09 21:04:46 +00:00
|
|
|
</MuiLink>
|
|
|
|
|
</Link>
|
|
|
|
|
</td>
|
|
|
|
|
<td>{size}</td>
|
|
|
|
|
<td>{modified}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function FileComponent({ name, path, size, modified, refresh }: Props) {
|
|
|
|
|
return (
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
2022-05-22 11:38:28 +00:00
|
|
|
<Link href={`?path=${path}`}>
|
2022-05-09 21:04:46 +00:00
|
|
|
<MuiLink onClick={() => refresh(path)}>
|
|
|
|
|
<Icon icon={faFile} />
|
2022-05-22 10:11:06 +00:00
|
|
|
{name.replace("/", "")}
|
2022-05-09 21:04:46 +00:00
|
|
|
</MuiLink>
|
|
|
|
|
</Link>
|
|
|
|
|
</td>
|
|
|
|
|
<td>{size}</td>
|
2022-05-22 10:23:07 +00:00
|
|
|
<td>{modified} ago</td>
|
2022-05-09 21:04:46 +00:00
|
|
|
</tr>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
name: string,
|
|
|
|
|
path: string,
|
|
|
|
|
size: string,
|
|
|
|
|
modified: string,
|
2022-05-10 14:57:29 +00:00
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
|
|
refresh: (path: string) => void
|
2022-05-09 21:04:46 +00:00
|
|
|
}
|
