user files improvements

src/components/searchBar.module.css

@@ -7,6 +7,12 @@
   padding-bottom: 2px;
 }
 
+.searchContainer input {
+  border: 1px solid var(--text-color);
+  border-radius: 5px;
+  padding: 10px;
+}
+
 .clearButton {
   width: 50px;
   background-color: var(--background-color);

src/pages/chat.js

@@ -425,7 +425,7 @@ export default class Chat extends React.Component {
           ref={this.chatInputRef}
           className={styles.msgInput}
           autoFocus
-          placeholder={'Message ...'}
+          placeholder={'Üzenet ...'}
           type={'text'}
           value={currMsg}
           tabIndex={0}

src/pages/userfiles.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 
 import LoadingIndicator from '../components/LoadingIndicator'
@@ -203,6 +203,52 @@ export default function UserFiles({
 
   const currDir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
 
+  const goBack = useCallback(() => {
+    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,
+    })
+  }, [router])
+
+  const deleteDirectory = useCallback(
+    (dirName) => {
+      fetch(constants.apiUrl + 'deleteDir', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: dirName,
+        }),
+      })
+        .then((res) => {
+          return res.json()
+        })
+        .then((res) => {
+          console.info(res)
+          if (res.succes) {
+            getRootDir(true)
+            alert(`a(z) '${dirName}' mappa törölve!`)
+          } else {
+            alert('Hiba törlés közben!')
+            console.log(res)
+          }
+        })
+        .catch((e) => {
+          alert('Hálózati hiba!')
+          console.log(e)
+        })
+    },
+    [router]
+  )
+
   useEffect(() => {
     router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
       shallow: true,
@@ -281,37 +327,37 @@ export default function UserFiles({
       })
   }
 
+  const renderNewButton = () => (
+    <div className={`buttonContainer ${styles.newButton}`}>
+      <div
+        onClick={() => {
+          setAddingNew(currDir ? 'file' : 'dir')
+        }}
+      >
+        {currDir ? 'Új fájl feltöltése...' : '➕ Új tárgy hozzáadása...'}
+      </div>
+    </div>
+  )
+
   const renderDirList = (dirs) => {
     return (
       <div>
         {currDir && (
           <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>
         )}
+        <div style={{ display: 'flex' }}>
+          <div style={{ flexGrow: 1 }}>
             <SearchBar
               searchTerm={searchTerm}
               onChange={(e) => {
                 setSearchTerm(e)
               }}
             />
+          </div>
+          {renderNewButton()}
+        </div>
         <div className={`${styles.tableContainer} ${styles.header}`}>
           <div
             onClick={(e) => {
@@ -336,14 +382,17 @@ export default function UserFiles({
         </div>
         {dirs ? (
           <div className={`${styles.tableContainer} ${styles.rows}`}>
+            {currDir && (
               <div
+                style={{ height: 40 }}
                 onClick={() => {
-                setAddingNew(currDir ? 'file' : 'dir')
+                  goBack()
                 }}
               >
-              <div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div>
+                {'Vissza'}
               </div>
-            {dirs.length !== 0 && (
+            )}
+            {dirs.length !== 0 ? (
               <>
                 {dirs.sort(dirSorter).map((dir) => {
                   const {
@@ -444,6 +493,22 @@ export default function UserFiles({
                   )
                 })}
               </>
+            ) : (
+              <div
+                title={'A megnyitott mappa törlése, mivel üres'}
+                onClick={() => {
+                  if (
+                    window.confirm(
+                      `Biztosan törlöd a(z) '${currDir}' üres mappát?`
+                    )
+                  ) {
+                    deleteDirectory(currDir)
+                    goBack()
+                  }
+                }}
+              >
+                {'Mappa törlése'}
+              </div>
             )}
           </div>
         ) : (
@@ -524,11 +589,14 @@ export default function UserFiles({
                     newSubj(newSubjName).then(() => {
                       setUploading(false)
                       setAddingNew(null)
-                      getRootDir()
+                      getRootDir(true)
+                      alert(`'${newSubjName}' létrehozva!`)
                     })
                   }}
                 >
-                  <div>OK</div>
+                  <div>
+                    {addingNew === 'file' ? 'OK' : 'Új mappa létrehozása'}
+                  </div>
                 </div>
               </>
             )}

src/pages/userfiles.module.css

@@ -88,8 +88,8 @@
   background-color: var(--dark-color);
 }
 
-.backButton {
-  width: 15%;
+.newButton {
+  width: 35%;
 }
 
 .description {