User files changes

src/data/tabs.json

@@ -11,6 +11,10 @@
     "href": "/allQuestions",
     "text": "Kérdések és tárgyak"
   },
+  "userFiles": {
+    "href": "/userFiles",
+    "text": "Tanulás segédanyagok"
+  },
   "contribute": {
     "href": "/contribute",
     "text": "Teendők"

src/defaultStyles.css

@@ -46,12 +46,11 @@ textarea {
 input {
   color: var(--text-color);
   background-color: var(--background-color);
-  border: 1px solid #666;
+  border: 0px solid #444;
-  border-radius: 5px;
   width: 80%;
   font-family: inherit;
-  border: 1px solid #444;
   width: 98%;
+  padding: 4px;
 }
 
 input:focus {

src/pages/allQuestions.js

@@ -7,6 +7,7 @@ import Subject from '../components/Subject.js'
 import SubjectSelector from '../components/SubjectSelector.js'
 import Sleep from '../components/sleep'
 import ExternalLinkIcon from '../components/externalLinkIcon'
+import SearchBar from '../components/searchBar'
 
 import styles from './allQuestions.module.css'
 
@@ -210,26 +211,12 @@ export default function AllQuestions({ router }) {
       <div>
         {data ? (
           <>
-            <center>
+            <SearchBar
-              <div className={styles.searchContainer}>
+              searchTerm={searchTerm}
-                <input
+              onChange={(e) => {
-                  placeholder="Kezdj el írni a kereséshez..."
+                setSearchTerm(e)
-                  type="text"
-                  value={searchTerm}
-                  onChange={(event) => {
-                    setSearchTerm(event.target.value)
               }}
             />
-                <button
-                  onClick={() => {
-                    setSearchTerm('')
-                  }}
-                  className={styles.clearButton}
-                >
-                  X
-                </button>
-              </div>
-            </center>
             <hr />
             <SubjectSelector
               data={data}
@@ -255,31 +242,12 @@ export default function AllQuestions({ router }) {
       <div>
         {data ? (
           <>
-            <div className={styles.searchContainer}>
+            <SearchBar
-              <input
+              searchTerm={searchTerm}
-                placeholder="Kezdj el írni a kereséshez..."
+              onChange={(e) => {
-                type="text"
+                setSearchTerm(e)
-                value={searchTerm}
-                onChange={(event) => {
-                  setSearchTerm(event.target.value)
-                  router.replace(
-                    `${router.pathname}?question=${encodeURIComponent(
-                      event.target.value
-                    )}&db=${selectedDb}`,
-                    undefined,
-                    { shallow: true }
-                  )
               }}
             />
-              <button
-                onClick={() => {
-                  setSearchTerm('')
-                }}
-                className={styles.clearButton}
-              >
-                X
-              </button>
-            </div>
             <div>
               <QuestionSearchResult data={data} searchTerm={searchTerm} />
             </div>

src/pages/allQuestions.module.css

@@ -1,22 +1,3 @@
-.searchContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-left: 10px;
-  padding-top: 10px;
-  padding-bottom: 2px;
-}
-
-.clearButton {
-  width: 50px;
-  background-color: var(--background-color);
-  color: white;
-  font-size: 18px;
-  cursor: pointer;
-  border: none;
-  margin-left: 10px;
-}
-
 .info {
   text-align: center;
   font-style: italic;

src/pages/script.js

@@ -15,7 +15,11 @@ export default function Script() {
         <h1>Script</h1>
       </div>
       <div className={'buttonContainer'}>
-        <a href="https://www.tampermonkey.net/">
+        <a
+          href="https://www.tampermonkey.net/"
+          target="_blank"
+          rel="noreferrer"
+        >
           Ajánlott userscript kezelő bővítmény
           <ExternalLinkIcon size={15} />
         </a>

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,12 +29,52 @@ function listUserDir(subdir) {
   })
 }
 
-function FileUploader({ onChange }) {
+function FileUploader({ onChange, uploading }) {
   return (
     <div>
-      <div>Fájl csatolása</div>
+      <div className={styles.text}>
-      <input type="file" name="file" onChange={onChange} />
+        <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>
+      )}
+    </>
   )
 }
 
@@ -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,6 +198,7 @@ export default function UserFiles({ router, globalData }) {
     return (
       <div>
         {currDir && (
+          <div className={styles.title}>
             <div className={`buttonContainer ${styles.backButton}`}>
               <div
                 onClick={() => {
@@ -161,13 +207,24 @@ export default function UserFiles({ router, globalData }) {
                   // 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.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,6 +245,7 @@ export default function UserFiles({ router, globalData }) {
             <div name="user">Feltöltő user</div>
           </div>
         </div>
+        {dirs ? (
           <div className={`${styles.tableContainer} ${styles.rows}`}>
             <div
               onClick={() => {
@@ -200,16 +258,25 @@ export default function UserFiles({ router, globalData }) {
               <>
                 {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.apiUrl}${path}`, '_blank')
+                          window.open(`${constants.siteUrl}${path}`, '_blank')
                         } else {
+                          setDirs(undefined)
                           router.push(
-                          `${router.pathname}?dir=${encodeURIComponent(name)}`,
+                            `${router.pathname}?dir=${encodeURIComponent(
+                              name
+                            )}`,
                             undefined,
                             { shallow: true }
                           )
@@ -252,6 +319,9 @@ export default function UserFiles({ router, globalData }) {
               </>
             )}
           </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}>
+      {!currDir && (
-        Ide tárgyanként lehet feltölteni
+        <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>
-      {dirs ? renderDirList(dirs) : <LoadingIndicator />}
+      )}
+      {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>
+                <SubjNameInput
-                <div>
+                  uploading={uploading}
-                  <input
-                    type="text"
                   onChange={(e) => {
-                      setNewSubjName(e.target.value)
+                    setNewSubjName(e)
                   }}
                 />
-                </div>
                 <div
                   className="buttonContainer"
                   onClick={() => {
+                    setUploading(true)
                     newSubj(newSubjName).then(() => {
+                      setUploading(false)
                       listUserDir().then((res) => {
                         setDirs(res.dirs)
                         setAddingNew(null)

src/pages/userFiles.module.css

@@ -5,7 +5,7 @@
 }
 
 .tableContainer > div {
-  padding: 15px 5px;
+  padding: 5px 5px;
   display: flex;
   align-items: stretch;
 }
@@ -42,9 +42,11 @@
 }
 
 .header > div > div {
+  color: var(--text-color);
   display: flex;
   align-items: center;
   cursor: pointer;
+  background-color: var(--background-color);
 }
 
 .header > div > div:hover {
@@ -69,10 +71,34 @@
 }
 
 .backButton {
-  width: 30%;
+  width: 15%;
 }
 
 .description {
   padding: 5px;
   text-align: center;
+  cursor: pointer;
+}
+
+.text {
+}
+
+.text > b {
+  color: red;
+}
+
+.currDir {
+  color: var(--text-color);
+  text-align: center;
+  font-size: 20px;
+}
+
+.title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title > div:nth-child(2) {
+  flex: 1;
 }