import React, { useState, useEffect } from 'react' import Head from 'next/head' import LoadingIndicator from '../components/LoadingIndicator' import Modal from '../components/modal' import styles from './userFiles.module.css' import constants from '../constants.json' function listUserDir(subdir) { return new Promise((resolve) => { fetch( `${constants.apiUrl}listUserDir${subdir ? `?subdir=${subdir}` : ''}`, { credentials: 'include', } ) .then((resp) => { return resp.json() }) .then((res) => { if (res.success) { resolve(res) } else { alert(res.msg) } }) }) } function FileUploader({ onChange }) { return ( <div> <div>Fájl csatolása</div> <input type="file" name="file" onChange={onChange} /> </div> ) } function deleteFile(currDir, name) { return new Promise((resolve) => { fetch(constants.apiUrl + 'deleteUserFile', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ dir: currDir, fname: name, }), }) .then((res) => { return res.json() }) .then((res) => { if (res.success) { resolve(res) } else { alert(res.msg) } }) }) } function newSubj(name) { return new Promise((resolve) => { fetch(constants.apiUrl + 'newUserDir', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ name: name, }), }) .then((res) => { return res.json() }) .then((res) => { if (res.success) { resolve(res) } else { alert(res.msg) } }) }) } function uploadFile(dir, file) { return new Promise((resolve) => { const formData = new FormData() // eslint-disable-line formData.append('file', file) formData.append('dir', dir) fetch(constants.apiUrl + 'uploadUserFile', { method: 'POST', credentials: 'include', headers: { Accept: 'application/json', }, body: formData, }) .then((res) => { return res.json() }) .then((res) => { resolve(res) }) }) } export default function UserFiles({ router, globalData }) { const userId = globalData.userId const [dirs, setDirs] = useState() const [sortBy, setSortBy] = useState('name') const [sortDirection, setSortDirection] = useState(true) const [addingNew, setAddingNew] = useState() const [newSubjName, setNewSubjName] = useState() const [file, setFile] = useState() const currDir = router.query.dir ? decodeURIComponent(router.query.dir) : '' useEffect(() => { const dir = router.query.dir ? decodeURIComponent(router.query.dir) : '' setDirs(null) if (router.query.dir) { listUserDir(dir).then((res) => { setDirs(res.files) }) } else { listUserDir().then((res) => { setDirs(res.dirs) }) } }, [router.query.dir]) const dirSorter = (a, b) => { if (a[sortBy] < b[sortBy]) { return sortDirection ? -1 : 1 } else if (a[sortBy] > b[sortBy]) { return sortDirection ? 1 : -1 } else { return 0 } } const renderDirList = (dirs) => { return ( <div> {currDir && ( <div className={`buttonContainer ${styles.backButton}`}> <div onClick={() => { router.back() // FIXME: consistend going back with browser back button // back button works like broser back button, unless it would result in site leave // history: nothing > opened site/usrFiles?dir=... // history: site > site/userFiles > site/usrFiles?dir=... router.push(`${router.pathname}`, undefined, { shallow: true }) }} > Vissza </div> </div> )} <div className={`${styles.tableContainer} ${styles.header}`}> <div onClick={(e) => { const name = e.target.getAttribute('name') if (name) { if (sortBy === name) { setSortDirection(!sortDirection) } else { setSortDirection(true) } setSortBy(name) } }} > <div name="name">Fájl név</div> <div name="date">Feltöltés dátuma</div> <div name="size">Méret</div> <div name="user">Feltöltő user</div> </div> </div> <div className={`${styles.tableContainer} ${styles.rows}`}> <div onClick={() => { setAddingNew(currDir ? 'file' : 'dir') }} > <div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div> </div> {dirs.length !== 0 && ( <> {dirs.sort(dirSorter).map((dir) => { const { name, date, path, size, user } = dir return ( <div title={name} key={name} onClick={() => { if (path) { window.open(`${constants.apiUrl}${path}`, '_blank') } else { router.push( `${router.pathname}?dir=${encodeURIComponent(name)}`, undefined, { shallow: true } ) } }} > <div>{name}</div> <div>{new Date(date).toDateString()}</div> <div> {currDir ? (size / 1000000).toFixed(2).toString() + ' MB' : size + ' fájl'} </div> <div> {user && user !== -1 && (userId === user ? ( <div className={styles.deleteButton} onClick={(e) => { e.stopPropagation() if (confirm(`Biztos törlöd '${name}'-t ?`)) { deleteFile(currDir, name).then(() => { listUserDir(currDir).then((res) => { setDirs(res.files) }) }) } }} > Törlés </div> ) : ( `#${user}` ))} </div> </div> ) })} </> )} </div> </div> ) } return ( <div> <Head> <title>Study Docs - Qmining | Frylabs.net</title> </Head> <div className="pageHeader"> <h1>Study Docs</h1> </div> <div className={styles.description}> Ide tárgyanként lehet feltölteni </div> {dirs ? renderDirList(dirs) : <LoadingIndicator />} {addingNew && ( <Modal closeClick={() => { setAddingNew(null) }} > <div className={styles.uploadContainer}> {addingNew === 'file' ? ( <> <FileUploader onChange={(e) => { setFile(e.target.files[0]) }} /> <div className="buttonContainer" onClick={() => { uploadFile(currDir, file).then(() => { listUserDir(currDir).then((res) => { setDirs(res.files) setAddingNew(null) }) }) }} > <div>Feltöltés</div> </div> </> ) : ( <> <div>Új tárgy neve</div> <div> <input type="text" onChange={(e) => { setNewSubjName(e.target.value) }} /> </div> <div className="buttonContainer" onClick={() => { newSubj(newSubjName).then(() => { listUserDir().then((res) => { setDirs(res.dirs) setAddingNew(null) }) }) }} > <div>OK</div> </div> </> )} </div> </Modal> )} </div> ) }