Minor chages including class name rename, max entries to load on front page

src/pages/userFiles.js

@@ -0,0 +1,330 @@
+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>
+  )
+}