diff --git a/src/components/QuestionSearchResult.js b/src/components/QuestionSearchResult.js index 12f7ab8..b661d3d 100644 --- a/src/components/QuestionSearchResult.js +++ b/src/components/QuestionSearchResult.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react' +import React from 'react' import Questions from './Questions.js' @@ -8,75 +8,74 @@ const countReducer = (acc, subj) => { return acc + subj.Questions.length } -class QuestionSearchResult extends PureComponent { - render() { - const { data, searchTerm } = this.props +export default function QuestionSearchResult({ data, searchTerm }) { + let subjs = [] + let results = -1 - let subjs = [] - let results = -1 - - if (searchTerm) { - subjs = data.reduce((acc, subj) => { - const resultQuestions = subj.Questions.reduce((qacc, question) => { - const keys = ['Q', 'A', 'data'] - keys.some((key) => { - if (typeof question[key] !== 'string') { - return false - } - if ( - question[key] && - question[key].toLowerCase().includes(searchTerm.toLowerCase()) - ) { - qacc.push(question) - return true - } - }) - return qacc - }, []) - if (resultQuestions.length > 0) { - acc.push({ - Name: subj.Name, - Questions: resultQuestions, - }) - } - return acc + if (searchTerm) { + subjs = data.reduce((acc, subj) => { + const resultQuestions = subj.Questions.reduce((qacc, question) => { + const keys = ['Q', 'A', 'data'] + keys.some((key) => { + if (typeof question[key] !== 'string') { + return false + } + if ( + question[key] && + question[key].toLowerCase().includes(searchTerm.toLowerCase()) + ) { + qacc.push(question) + return true + } + }) + return qacc }, []) - results = subjs.reduce(countReducer, 0) - } else { - results = data.reduce(countReducer, 0) - } + if (resultQuestions.length > 0) { + acc.push({ + Name: subj.Name, + Questions: resultQuestions, + }) + } + return acc + }, []) + results = subjs.reduce(countReducer, 0) + } else { + results = data.reduce(countReducer, 0) + } - const renderCount = () => { - return ( + const renderCount = () => { + return ( +
-
- {searchTerm ? '' : 'Kezdj el írni kereséshez! '} - {`${results} találat, ${subjs.length} tárgyból`} -
- {results === 0 && ( -
- { - 'Pontos egyezést keres a kereső, próbálj kisebb részletre keresni' - } -
- )} + {searchTerm ? '' : 'Kezdj el írni kereséshez! '} + {`${results} találat, ${subjs.length || data.length} tárgyból`}
- ) - } + {results === 0 && ( +
+ {'Pontos egyezést keres a kereső, próbálj kisebb részletre keresni'} +
+ )} +
+ ) + } - if (results > constants.maxQuestionsToRender) { - return renderCount() - } else { - return ( + if (results > constants.maxQuestionsToRender) { + return ( +
+ {renderCount()} + {searchTerm ? ( +
Szűkítsd a keresést találatok megjelenítéséhez!
+ ) : null} +
+ ) + } else { + return ( +
+
{renderCount()}
-
{renderCount()}
-
- -
+
- ) - } +
+ ) } } - -export default QuestionSearchResult diff --git a/src/components/externalLinkIcon.js b/src/components/externalLinkIcon.js new file mode 100644 index 0000000..73c1aab --- /dev/null +++ b/src/components/externalLinkIcon.js @@ -0,0 +1,22 @@ +import React from 'react' + +export default function ExternalLinkIcon({ size }) { + return ( + + + + + + + + ) +} diff --git a/src/components/layout.js b/src/components/layout.js index d4a8c52..f0c97f9 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -15,6 +15,51 @@ const renderSnow = () => { return date.getMonth() === 11 && date.getDate() > 5 } +function MessageButton({ + userSpecificMotd, + setShowMotdModal, + refetchGlobalData, +}) { + return ( +
+
{ + if (!userSpecificMotd) { + return + } + setShowMotdModal(true) + if (userSpecificMotd.seen) { + return + } + fetch(constants.apiUrl + 'infos', { + method: 'POST', + credentials: 'include', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + userSpecificMotdSeen: true, + }), + }) + .then((resp) => { + return resp.json() + }) + .then(() => { + refetchGlobalData() + }) + }} + style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }} + title={ + userSpecificMotd && !userSpecificMotd.seen ? "You've got Mail!" : '' + } + > + {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'} +
+
+ ) +} + export default function Layout({ children, route, @@ -25,6 +70,7 @@ export default function Layout({ const [sidebarOpen, setSidebarOpen] = useState(true) const [windowSize, setWindowSize] = useState([100, 200]) const [showMotdModal, setShowMotdModal] = useState(false) + const [donateShowing, setDonateShowing] = useState(false) const [showNewMsgModal, setShowNewMsgModal] = useState(true) const userId = globalData.userId @@ -109,55 +155,22 @@ export default function Layout({ ) })} { + console.log('AAAAAAAAA') + closeSideBar() + setDonateShowing(true) + }} > Donate
-
-
{ - if (!userSpecificMotd) { - return - } - setShowMotdModal(true) - if (userSpecificMotd.seen) { - return - } - fetch(constants.apiUrl + 'infos', { - method: 'POST', - credentials: 'include', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - userSpecificMotdSeen: true, - }), - }) - .then((resp) => { - return resp.json() - }) - .then(() => { - refetchGlobalData() - }) - }} - style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }} - title={ - userSpecificMotd && !userSpecificMotd.seen - ? "You've got Mail!" - : '' - } - > - {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'} -
-
UID: {userId || '...'}
-
+ +
UID: {userId || '...'}
{ @@ -175,21 +188,28 @@ export default function Layout({ Logout
- {showMotdModal ? ( - { - setShowMotdModal(false) - }} - > -
Üzenet admintól:
-
- - ) : null} ) : null}
+ {donateShowing ? ( + { + setDonateShowing(false) + }} + > +
hi
+
+ ) : null} + {showMotdModal ? ( + { + setShowMotdModal(false) + }} + > +
Üzenet admintól:
+
+ + ) : null}
{children}
{userSpecificMotd && !userSpecificMotd.seen && showNewMsgModal ? ( span:hover { background-color: var(--hoover-color); } + +.buttonContainer { + display: flex; + align-content: center; + justify-content: center; + + margin: 10px 0px; + height: 50px; + display: flex; +} + +.buttonContainer > * { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + + background-color: #f2cb05; + border: none; + color: black; + padding: 5px 10px; + font-weight: bold; + font-size: 15px; + margin: 8px 2px 2px 2px; + cursor: pointer; + text-shadow: 1px 1px 8px black; + transition: width 0.5s, height 0.5s, ease-in 0.5s; + + user-select: none; + cursor: pointer; + text-align: center; + text-decoration: none; +} + +.buttonContainer > *:active { + transform: translateY(2.5px); +} + +.buttonContainer > *:hover { + text-shadow: 2px 2px 8px black; + transition: width 0.5s, height 0.5s, ease-out 0.5s; + background-color: #a38c1a; +} + +.buttonContainer > .activeButton { + color: var(--text-color); +} diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js index 5a82374..31bc336 100644 --- a/src/pages/allQuestions.js +++ b/src/pages/allQuestions.js @@ -6,6 +6,7 @@ import QuestionSearchResult from '../components/QuestionSearchResult.js' import Subject from '../components/Subject.js' import SubjectSelector from '../components/SubjectSelector.js' import Sleep from '../components/sleep' +import ExternalLinkIcon from '../components/externalLinkIcon' import styles from './allQuestions.module.css' @@ -74,6 +75,7 @@ export default function AllQuestions({ router }) { const [searchTerm, setSearchTerm] = useState('') const [activeSubjName, setActiveSubjName] = useState('') const [dbs, setDbs] = useState(null) + const [selectedDb, setSelectedDb] = useState('') const [data, setData] = useState(null) const [fetchingData, setFetchingData] = useState(false) const subjectCount = data ? data.length : 0 @@ -106,11 +108,13 @@ export default function AllQuestions({ router }) { setData(null) setFetchingData(true) if (key === 'all') { + setSelectedDb(key) fetchAllData(dbs).then((res) => { setData(mergeData(res)) setFetchingData(false) }) } else { + setSelectedDb(dbs[key].name) fetchData(dbs[key]).then((res) => { setData(res.data) setFetchingData(false) @@ -238,11 +242,11 @@ export default function AllQuestions({ router }) { return (
- {dbs ? ( + {dbs ? <>{renderDbSelector()} : } + {dbs && data ? ( <> - {renderDbSelector()} - {data && `${questionCount} kérdés, ${subjectCount} tárgy`} -
+ {`${questionCount} kérdés, ${subjectCount} tárgy`} + {fetchingData ? ( @@ -266,9 +285,7 @@ export default function AllQuestions({ router }) {
)} - ) : ( - - )} + ) : null}
) } diff --git a/src/pages/allQuestions.module.css b/src/pages/allQuestions.module.css index 9304a36..e2dffe6 100644 --- a/src/pages/allQuestions.module.css +++ b/src/pages/allQuestions.module.css @@ -11,28 +11,3 @@ cursor: pointer; border: none; } - -.typeSelector { - margin: 10px 0px; - height: 50px; - display: flex; -} - -.typeSelector div { - display: flex; - align-items: center; - justify-content: center; - flex: 1; - - font-size: 18px; - color: #fff; - cursor: pointer; -} - -.typeSelector div:hover { - background-color: #333; -} - -.activeTypeSelector { - background-color: #444; -} diff --git a/src/pages/contact.js b/src/pages/contact.js index 17c568f..97f1809 100644 --- a/src/pages/contact.js +++ b/src/pages/contact.js @@ -1,6 +1,8 @@ import React from 'react' import Head from 'next/head' +import FeedbackArea from '../components/feedbackArea' + import styles from './contact.module.css' const contactMethods = { @@ -26,6 +28,7 @@ export default function Contact() { Kapcsolat - Qmining | Frylabs.net +
Itt vannak hogy hogy lehet kontaktolni
{Object.keys(contactMethods).map((key) => { diff --git a/src/pages/contribute.js b/src/pages/contribute.js index 311fef9..8eacb12 100644 --- a/src/pages/contribute.js +++ b/src/pages/contribute.js @@ -1,65 +1,15 @@ -import React, { useState } from 'react' +import React from 'react' import Head from 'next/head' import Sleep from '../components/sleep' import Todos from '../components/todoStuff/todos' +import FeedbackArea from '../components/feedbackArea' import constants from '../constants.json' import styles from './contribute.module.css' import repos from '../data/repos.json' export default function contribute() { - const [newTask, setNewTask] = useState('') - - const submitNewTask = async () => { - if (!newTask) { - return - } - - fetch(constants.apiUrl + 'postfeedback', { - method: 'POST', - credentials: 'include', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - newTask: newTask, - from: 'contribute', - }), - }) - .then((resp) => { - return resp.json() - }) - .then((resp) => { - if (resp.success) { - alert('Elküldve') - setNewTask('') - } else { - alert('Hiba küldés közben') - } - }) - .catch((err) => { - alert('Hiba küldés közben') - console.error(err) - }) - } - - const renderNewTaskArea = () => { - return ( -
-