diff --git a/src/components/upDownVote.js b/src/components/upDownVote.js new file mode 100644 index 0000000..f145c2c --- /dev/null +++ b/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 ( +
+
{ + e.stopPropagation() + if (!upvoted) { + onUp() + } else { + onClear() + } + }} + > +
👍
+
{upvotes.length}
+
+
{ + e.stopPropagation() + if (!downvoted) { + onDown() + } else { + onClear() + } + }} + > +
👎
+
{downvotes.length}
+
+
+ ) +} diff --git a/src/components/upDownVote.module.css b/src/components/upDownVote.module.css new file mode 100644 index 0000000..b480fe5 --- /dev/null +++ b/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); +} diff --git a/src/pages/userfiles.js b/src/pages/userfiles.js index 8321c04..b3af8b8 100644 --- a/src/pages/userfiles.js +++ b/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) => { - setDirs(res.files) - }) + listUserDir(dir) + .then((res) => { + setDirs(res.files) + }) + .catch((res) => { + alert(res.msg) + }) } else { - listUserDir().then((res) => { - setDirs(res.dirs) - }) + listUserDir() + .then((res) => { + setDirs(res.dirs) + }) + .catch((res) => { + alert(res.msg) + }) } }, [router.query.dir]) @@ -248,6 +284,8 @@ export default function UserFiles({ router, globalData }) {
Fájl név
Feltöltés dátuma
Méret
+
Hasznos
+
Letöltések
Feltöltő user
@@ -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 (
{ @@ -296,6 +345,43 @@ export default function UserFiles({ router, globalData }) { ? (size / 1000000).toFixed(2).toString() + ' MB' : size + ' fájl'}
+
+ {Array.isArray(upvotes) && Array.isArray(downvotes) && ( + { + 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} + /> + )} +
+
{!isNaN(views) && `${views} db`}
{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) => { - setDirs(res.files) - }) + listUserDir(currDir) + .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) => { - setDirs(res.files) - setAddingNew(null) - }) + listUserDir(currDir) + .then((res) => { + 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) => { - setDirs(res.dirs) - setAddingNew(null) - }) + listUserDir() + .then((res) => { + setDirs(res.dirs) + setAddingNew(null) + }) + .catch((res) => { + alert(res.msg) + }) }) }} > diff --git a/src/pages/userfiles.module.css b/src/pages/userfiles.module.css index 9faddf4..f2494ad 100644 --- a/src/pages/userfiles.module.css +++ b/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; +}