File size: 2,998 Bytes
67edfce |
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 |
import { Form, Input, Layout, Modal, Spin } from 'antd'
import React, { useEffect, useState } from 'react'
import { RouteComponentProps, useHistory } from 'react-router'
import useSWR from 'swr'
import useSWRImmutable from 'swr/immutable'
import { fetcher } from '../../utils/Fetcher'
import Error from './components/Error'
import TableFiles from './components/TableFiles'
import Viewer from './components/Viewer'
import { useDebounce } from 'use-debounce/lib'
interface PageProps extends RouteComponentProps<{
id: string
}> {}
const View: React.FC<PageProps & { isInDrawer?: boolean, onCloseDrawer?: () => void }> = ({ match, isInDrawer, onCloseDrawer }) => {
const [openPassModal, setOpenPassModal] = useState<boolean>(false)
const history = useHistory()
const [paramId] = useDebounce(match.params.id, 250)
const { data: me } = useSWRImmutable('/users/me', fetcher)
const { data, error, mutate } = useSWR(paramId || match.params.id ? `/files/${paramId || match.params.id}?password=${sessionStorage.getItem(`pass-${paramId || match.params.id}`)}` : null, fetcher)
const [form] = Form.useForm()
useEffect(() => {
if (error?.status === 400) {
setOpenPassModal(true)
}
}, [error])
useEffect(() => {
if (data?.file.type === 'folder') {
if (me?.user) {
if (data.file.user_id === me.user.id) {
return history.replace(`/dashboard?parent=${data.file.id}`)
} else if (data.file.shared_options?.includes(me.user.id)) {
return history.replace(`/dashboard/shared?parent=${data.file.id}`)
}
} else if (data.file.sharing_options?.includes('*')) {
// setParent(data.file)
// setBreadcrumbs([data.file])
// const searchParams = new URLSearchParams(window.location.search)
// searchParams.set('parent', data.file.id)
// return history.replace(`${location.pathname}?${searchParams.toString()}`)
}
}
}, [data, me])
const submit = () => {
const { password } = form.getFieldsValue()
sessionStorage.setItem(`pass-${paramId || match.params.id}`, password)
mutate()
setOpenPassModal(false)
}
return <>
{!data && !error
? <Layout style={{ paddingTop: '45vh', minHeight: '100vh' }}><Spin /></Layout>
: error || data && data.file.upload_progress !== null
? <Error error={error} me={me} />
: data?.file.type === 'folder' && data?.file.sharing_options?.includes('*')
? <TableFiles me={me} data={data} />
: <Viewer isInDrawer={isInDrawer} onCloseDrawer={onCloseDrawer} me={me} data={data} error={error} mutate={mutate} pageParams={match.params} />}
<Modal title="Input your password" visible={openPassModal} onCancel={() => setOpenPassModal(false)} okText="Open" onOk={submit}>
<Form form={form} layout="vertical" onFinish={submit}>
<Form.Item name="password" label="Password">
<Input.Password />
</Form.Item>
</Form>
</Modal>
</>
}
export default View |