Added user file vote

src/components/upDownVote.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import styles from './upDownVote.module.css'
+
+export default function UpDownVote({
+  onUp,
+  onDown,
+  onClear,
+  upvotes,
+  downvotes,
+  userId,
+}) {
+  const upvoted = upvotes.includes(userId)
+  const downvoted = downvotes.includes(userId)
+
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.action}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!upvoted) {
+            onUp()
+          } else {
+            onClear()
+          }
+        }}
+      >
+        <div>👍</div>
+        <div className={`${upvoted && styles.voted}`}>{upvotes.length}</div>
+      </div>
+      <div
+        className={styles.action}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (!downvoted) {
+            onDown()
+          } else {
+            onClear()
+          }
+        }}
+      >
+        <div>👎</div>
+        <div className={`${downvoted && styles.voted}`}>{downvotes.length}</div>
+      </div>
+    </div>
+  )
+}

src/components/upDownVote.module.css

@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+}
+
+.container > div {
+  display: flex;
+  align-items: center;
+}
+
+.container > div > * {
+  padding: 3px;
+}
+
+.action {
+  border-radius: 3px;
+}
+
+.action:hover {
+  background-color: #555;
+}
+
+.voted {
+  color: var(--text-color);
+}

src/pages/userfiles.js

@@ -4,12 +4,40 @@ import Head from 'next/head'
 import LoadingIndicator from '../components/LoadingIndicator'
 import Modal from '../components/modal'
 import SearchBar from '../components/searchBar'
+import UpDownVote from '../components/upDownVote'
 
 import styles from './userfiles.module.css'
 import constants from '../constants.json'
 
+function vote(to, item) {
+  return new Promise((resolve, reject) => {
+    fetch(`${constants.apiUrl}voteFile`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        path: item.path,
+        to: to,
+      }),
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((res) => {
+        if (res.success) {
+          resolve(res)
+        } else {
+          reject(res)
+        }
+      })
+  })
+}
+
 function listUserDir(subdir) {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
     fetch(
       `${constants.apiUrl}listUserDir${subdir ? `?subdir=${subdir}` : ''}`,
       {
@@ -23,7 +51,7 @@ function listUserDir(subdir) {
         if (res.success) {
           resolve(res)
         } else {
-          alert(res.msg)
+          reject(res)
         }
       })
   })
@@ -180,13 +208,21 @@ export default function UserFiles({ router, globalData }) {
     setSearchTerm()
 
     if (router.query.dir) {
-      listUserDir(dir).then((res) => {
+      listUserDir(dir)
-        setDirs(res.files)
+        .then((res) => {
-      })
+          setDirs(res.files)
+        })
+        .catch((res) => {
+          alert(res.msg)
+        })
     } else {
-      listUserDir().then((res) => {
+      listUserDir()
-        setDirs(res.dirs)
+        .then((res) => {
-      })
+          setDirs(res.dirs)
+        })
+        .catch((res) => {
+          alert(res.msg)
+        })
     }
   }, [router.query.dir])
 
@@ -248,6 +284,8 @@ export default function UserFiles({ router, globalData }) {
             <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="upCount">Hasznos</div>
+            <div name="views">Letöltések</div>
             <div name="user">Feltöltő user</div>
           </div>
         </div>
@@ -263,7 +301,17 @@ export default function UserFiles({ router, globalData }) {
             {dirs.length !== 0 && (
               <>
                 {dirs.sort(dirSorter).map((dir) => {
-                  const { name, date, path, size, user } = dir
+                  const {
+                    name,
+                    date,
+                    path,
+                    size,
+                    views,
+                    user,
+                    upvotes,
+                    downvotes,
+                  } = dir
+
                   if (
                     searchTerm &&
                     !name.toLowerCase().includes(searchTerm.toLowerCase())
@@ -272,6 +320,7 @@ export default function UserFiles({ router, globalData }) {
                   }
                   return (
                     <div
+                      className={styles.row}
                       title={name}
                       key={name}
                       onClick={() => {
@@ -296,6 +345,43 @@ export default function UserFiles({ router, globalData }) {
                           ? (size / 1000000).toFixed(2).toString() + ' MB'
                           : size + ' fájl'}
                       </div>
+                      <div>
+                        {Array.isArray(upvotes) && Array.isArray(downvotes) && (
+                          <UpDownVote
+                            onUp={() => {
+                              vote('up', dir)
+                                .then((res) => {
+                                  setDirs(res.files)
+                                })
+                                .catch((res) => {
+                                  alert(res.msg)
+                                })
+                            }}
+                            onDown={() => {
+                              vote('down', dir)
+                                .then((res) => {
+                                  setDirs(res.files)
+                                })
+                                .catch((res) => {
+                                  alert(res.msg)
+                                })
+                            }}
+                            onClear={() => {
+                              vote('clear', dir)
+                                .then((res) => {
+                                  setDirs(res.files)
+                                })
+                                .catch((res) => {
+                                  alert(res.msg)
+                                })
+                            }}
+                            upvotes={upvotes}
+                            downvotes={downvotes}
+                            userId={userId}
+                          />
+                        )}
+                      </div>
+                      <div>{!isNaN(views) && `${views} db`}</div>
                       <div>
                         {user &&
                           user !== -1 &&
@@ -306,9 +392,13 @@ export default function UserFiles({ router, globalData }) {
                                 e.stopPropagation()
                                 if (confirm(`Biztos törlöd '${name}'-t ?`)) {
                                   deleteFile(currDir, name).then(() => {
-                                    listUserDir(currDir).then((res) => {
+                                    listUserDir(currDir)
-                                      setDirs(res.files)
+                                      .then((res) => {
-                                    })
+                                        setDirs(res.files)
+                                      })
+                                      .catch((res) => {
+                                        alert(res.msg)
+                                      })
                                   })
                                 }
                               }}
@@ -394,10 +484,14 @@ export default function UserFiles({ router, globalData }) {
                     setUploading(true)
                     uploadFile(currDir, file).then(() => {
                       setUploading(false)
-                      listUserDir(currDir).then((res) => {
+                      listUserDir(currDir)
-                        setDirs(res.files)
+                        .then((res) => {
-                        setAddingNew(null)
+                          setDirs(res.files)
-                      })
+                          setAddingNew(null)
+                        })
+                        .catch((res) => {
+                          alert(res.msg)
+                        })
                     })
                   }}
                 >
@@ -418,10 +512,14 @@ export default function UserFiles({ router, globalData }) {
                     setUploading(true)
                     newSubj(newSubjName).then(() => {
                       setUploading(false)
-                      listUserDir().then((res) => {
+                      listUserDir()
-                        setDirs(res.dirs)
+                        .then((res) => {
-                        setAddingNew(null)
+                          setDirs(res.dirs)
-                      })
+                          setAddingNew(null)
+                        })
+                        .catch((res) => {
+                          alert(res.msg)
+                        })
                     })
                   }}
                 >

src/pages/userfiles.module.css

@@ -15,20 +15,28 @@
 }
 
 .tableContainer > div > div:nth-child(1) {
-  flex: 1;
+  flex: 1 0 100px;
 }
 
 .tableContainer > div > div:nth-child(2) {
-  flex: 0 240px;
+  flex: 0 200px;
 }
 .tableContainer > div > div:nth-child(3) {
-  flex: 0 160px;
+  flex: 0 90px;
 }
 
 .tableContainer > div > div:nth-child(4) {
   flex: 0 100px;
 }
 
+.tableContainer > div > div:nth-child(5) {
+  flex: 0 110px;
+}
+
+.tableContainer > div > div:nth-child(6) {
+  flex: 0 100px;
+}
+
 .rows > div {
   cursor: pointer;
 }
@@ -102,3 +110,7 @@
 .title > div:nth-child(2) {
   flex: 1;
 }
+
+.row > div {
+  word-wrap: anywhere;
+}