qmining-page/src/pages/userFiles.js

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>
  )
}