User files changes

src/pages/userFiles.js

@@ -3,6 +3,7 @@ import Head from 'next/head'
 
 import LoadingIndicator from '../components/LoadingIndicator'
 import Modal from '../components/modal'
+import SearchBar from '../components/searchBar'
 
 import styles from './userFiles.module.css'
 import constants from '../constants.json'
@@ -28,15 +29,55 @@ function listUserDir(subdir) {
   })
 }
 
-function FileUploader({ onChange }) {
+function FileUploader({ onChange, uploading }) {
   return (
     <div>
-      <div>Fájl csatolása</div>
-      <input type="file" name="file" onChange={onChange} />
+      <div className={styles.text}>
+        <b>
+          Fontos a névtelenség, ezért figyelj rá milyen személyes adatokat
+          tartalmaz a feltöltött dokumentum!
+        </b>
+        <p />
+        Amit feltöltesz minden felhasználó lát. Csak ide illő tartalmat ossz
+        meg.
+        <p />
+      </div>
+      {uploading ? (
+        <LoadingIndicator />
+      ) : (
+        <input type="file" name="file" onChange={onChange} />
+      )}
     </div>
   )
 }
 
+function SubjNameInput({ onChange, uploading }) {
+  return (
+    <>
+      <div className={styles.text}>
+        Tárgyat kérlek úgy nevezd el, hogy: [tárgy neve] - [egyetem rövid
+        azonosító], szóval pl: Elektronika - OE.
+        <p />
+        Üres mappák időnként törölve lesznek.
+      </div>
+      <p />
+      {uploading ? (
+        <LoadingIndicator />
+      ) : (
+        <div>
+          <input
+            placeholder={'Új tárgy neve'}
+            type="text"
+            onChange={(e) => {
+              onChange(e.target.value)
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
 function deleteFile(currDir, name) {
   return new Promise((resolve) => {
     fetch(constants.apiUrl + 'deleteUserFile', {
@@ -121,12 +162,16 @@ export default function UserFiles({ router, globalData }) {
   const [addingNew, setAddingNew] = useState()
   const [newSubjName, setNewSubjName] = useState()
   const [file, setFile] = useState()
+  const [usageShowing, setUsageShowing] = useState(false)
+  const [searchTerm, setSearchTerm] = useState()
+  const [uploading, setUploading] = useState(false)
 
   const currDir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
 
   useEffect(() => {
     const dir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
     setDirs(null)
+    setSearchTerm()
 
     if (router.query.dir) {
       listUserDir(dir).then((res) => {
@@ -153,21 +198,33 @@ export default function UserFiles({ router, globalData }) {
     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 className={styles.title}>
+            <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>
+            {currDir && <div className={styles.currDir}>{currDir}</div>}
+            <div className={`${styles.backButton}`} />
           </div>
         )}
+        <SearchBar
+          searchTerm={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e)
+          }}
+        />
         <div className={`${styles.tableContainer} ${styles.header}`}>
           <div
             onClick={(e) => {
@@ -188,70 +245,83 @@ export default function UserFiles({ router, globalData }) {
             <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)
+        {dirs ? (
+          <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
+                  if (
+                    searchTerm &&
+                    !name.toLowerCase().includes(searchTerm.toLowerCase())
+                  ) {
+                    return null
+                  }
+                  return (
+                    <div
+                      title={name}
+                      key={name}
+                      onClick={() => {
+                        if (path) {
+                          window.open(`${constants.siteUrl}${path}`, '_blank')
+                        } else {
+                          setDirs(undefined)
+                          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}`
-                        ))}
+                                }
+                              }}
+                            >
+                              Törlés
+                            </div>
+                          ) : (
+                            `#${user}`
+                          ))}
+                      </div>
                     </div>
-                  </div>
-                )
-              })}
-            </>
-          )}
-        </div>
+                  )
+                })}
+              </>
+            )}
+          </div>
+        ) : (
+          <LoadingIndicator />
+        )}
       </div>
     )
   }
@@ -259,15 +329,44 @@ export default function UserFiles({ router, globalData }) {
   return (
     <div>
       <Head>
-        <title>Study Docs - Qmining | Frylabs.net</title>
+        <title>Tanulás segédanyagok - Qmining | Frylabs.net</title>
       </Head>
       <div className="pageHeader">
-        <h1>Study Docs</h1>
+        <h1>Tanulás segédanyagok</h1>
       </div>
-      <div className={styles.description}>
-        Ide tárgyanként lehet feltölteni
-      </div>
-      {dirs ? renderDirList(dirs) : <LoadingIndicator />}
+      {!currDir && (
+        <div
+          onClick={() => {
+            setUsageShowing(true)
+          }}
+          className={styles.description}
+        >
+          Itt lehet megosztani mindenféle tanulást segítő doksit (kidolgozott
+          tételektől puskáig mindent).{' '}
+          <b>Használati útmutatóért és egyéb infókért kattints ide!</b>
+        </div>
+      )}
+      {usageShowing && (
+        <Modal
+          closeClick={() => {
+            setUsageShowing(false)
+          }}
+        >
+          <div className={styles.text}>
+            Ez gyakorlatilag egy fájl böngésző, a tárgyak a mappák, és azon
+            belül lehet fájlokat feltölteni.
+            <p />A feltöltött fájlok ellenőrizve vannak, hogy ide valóak-e, de{' '}
+            <b>
+              hibás információért, vírusokért és hasonlókért semmi felelősség
+              vállalás nincs.
+            </b>{' '}
+            Ha valami nem idevalót látsz, azt a Kapcsolat oldalon jelezd kérlek.
+            Tudatos károkozásért ban jár.
+            <p />
+          </div>
+        </Modal>
+      )}
+      {renderDirList(dirs)}
       {addingNew && (
         <Modal
           closeClick={() => {
@@ -278,6 +377,7 @@ export default function UserFiles({ router, globalData }) {
             {addingNew === 'file' ? (
               <>
                 <FileUploader
+                  uploading={uploading}
                   onChange={(e) => {
                     setFile(e.target.files[0])
                   }}
@@ -285,7 +385,9 @@ export default function UserFiles({ router, globalData }) {
                 <div
                   className="buttonContainer"
                   onClick={() => {
+                    setUploading(true)
                     uploadFile(currDir, file).then(() => {
+                      setUploading(false)
                       listUserDir(currDir).then((res) => {
                         setDirs(res.files)
                         setAddingNew(null)
@@ -298,19 +400,18 @@ export default function UserFiles({ router, globalData }) {
               </>
             ) : (
               <>
-                <div>Új tárgy neve</div>
-                <div>
-                  <input
-                    type="text"
-                    onChange={(e) => {
-                      setNewSubjName(e.target.value)
-                    }}
-                  />
-                </div>
+                <SubjNameInput
+                  uploading={uploading}
+                  onChange={(e) => {
+                    setNewSubjName(e)
+                  }}
+                />
                 <div
                   className="buttonContainer"
                   onClick={() => {
+                    setUploading(true)
                     newSubj(newSubjName).then(() => {
+                      setUploading(false)
                       listUserDir().then((res) => {
                         setDirs(res.dirs)
                         setAddingNew(null)