diff --git a/src/components/layout.js b/src/components/layout.js index 71bf473..a4673f4 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -17,8 +17,11 @@ const renderSnow = () => { export default function Layout(props) { let href = props.route const [sidebarOpen, setSidebarOpen] = useState(true) - const [userId, setUserId] = useState(null) const [windowSize, setWindowSize] = useState([100, 200]) + const userId = props.globalData.userId + const userSpecificMotd = props.globalData.userSpecificMotd + + console.log(userSpecificMotd) if (href === '/' || href === '') { href = 'index' @@ -32,20 +35,6 @@ export default function Layout(props) { } } - useEffect(() => { - fetch(`${constants.apiUrl}infos`, { - credentials: 'include', - Accept: 'application/json', - 'Content-Type': 'application/json', - }) - .then((resp) => { - return resp.json() - }) - .then((data) => { - setUserId(data.uid) - }) - }, []) - useEffect(() => { closeSideBar() setWindowSize([window.innerWidth, window.innerHeight]) @@ -108,7 +97,23 @@ export default function Layout(props) { -
User #{userId}
+
+ {userSpecificMotd ? ( +
{ + // TODO: modal + alert(userSpecificMotd) + }} + style={{ cursor: 'pointer' }} + title={"You've got Mail!"} + > + 📬 +
+ ) : ( +
📭
+ )} +
User #{userId || '...'}
+
) : null} diff --git a/src/defaultStyles.css b/src/defaultStyles.css index d04cf06..0873e3c 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -55,11 +55,21 @@ a { color: white; } -.userInfo { +.userStatus { + display: flex; + align-items: center; margin-bottom: 15px; margin-top: auto; } +.userStatus :first-child { + font-size: 25px; +} + +.userStatus > div { + margin: 3px 5px; +} + .content { margin-left: 200px; padding: 1px 16px; diff --git a/src/pages/_app.js b/src/pages/_app.js index e1263f4..cdc51e7 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -1,13 +1,42 @@ // import App from 'next/app' -import React from 'react' -import '../defaultStyles.css' +import React, { useState, useEffect } from 'react' + import Layout from '../components/layout' +import '../defaultStyles.css' +import constants from '../constants.json' + function MyApp({ Component, pageProps, router }) { + const [userId, setUserId] = useState() + const [motd, setMotd] = useState() + const [userSpecificMotd, setUserSpecificMotd] = useState() + + useEffect(() => { + fetch(`${constants.apiUrl}infos?motd=true`, { + credentials: 'include', + Accept: 'application/json', + 'Content-Type': 'application/json', + }) + .then((resp) => { + return resp.json() + }) + .then((data) => { + setUserId(data.uid) + setMotd(data.motd) + setUserSpecificMotd(data.userSpecificMotd) + }) + }, []) + + const globalData = { + userId, + motd, + userSpecificMotd, + } + return ( - - + + ) } diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js index 2919072..0f40f12 100644 --- a/src/pages/allQuestions.js +++ b/src/pages/allQuestions.js @@ -22,7 +22,7 @@ function mergeData(data) { ...db.data.map((subj) => { return { ...subj, - Name: `${subj.Name} (${db.dbName})`, + Name: `${subj.Name} [ DB: ${db.dbName} ]`, } }), ] diff --git a/src/pages/contribute.js b/src/pages/contribute.js index e560ee4..c99e682 100644 --- a/src/pages/contribute.js +++ b/src/pages/contribute.js @@ -94,6 +94,13 @@ export default function contribute() { ) })} +
+
+ +
) diff --git a/src/pages/index.js b/src/pages/index.js index f43ce82..c8b3329 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,10 +10,10 @@ import styles from './index.module.css' import links from '../data/links.json' import constants from '../constants.json' -export default function Index() { - const [motd, setMotd] = useState('loading...') - const [userSpecificMotd, setUserSpecificMotd] = useState('loading...') +export default function Index(props) { const [news, setNews] = useState(null) + const motd = props.globalData.motd + const userSpecificMotd = props.globalData.userSpecificMotd useEffect(() => { console.info('Fetching news.json') @@ -28,49 +28,33 @@ export default function Index() { }) }, []) - useEffect(() => { - console.info('Fetching data') - fetch(`${constants.apiUrl}infos?motd=true`, { - credentials: 'include', - Accept: 'application/json', - 'Content-Type': 'application/json', - }) - .then((resp) => { - return resp.json() - }) - .then((data) => { - setMotd(data.motd) - setUserSpecificMotd(data.userSpecificMotd) - }) - }, []) - - const renderQAItem = (n, key) => { + const renderQAItem = (newsItem, key) => { return (
{key} :
) } - const renderNewsItem = (n, key) => { + const renderNewsItem = (newsItem, key) => { return (
{key} :
) @@ -79,19 +63,19 @@ export default function Index() { const renderNews = () => { if (news) { let questions = Object.keys(news) - .map((key, i) => { - let n = news[key] - if (n.q) { + .map((key) => { + let newsItem = news[key] + if (newsItem.q) { return (
- {renderQAItem(n, key)} + {renderQAItem(newsItem, key)}
) } else { return (
- {renderNewsItem(n, key)} + {renderNewsItem(newsItem, key)}
) @@ -118,10 +102,14 @@ export default function Index() {
MOTD


-
+ {motd ? ( +
+ ) : ( +
...
+ )}
) } @@ -129,13 +117,18 @@ export default function Index() { const renderUserSpecificMotd = () => { return (
-
+
+
Felhasználó MOTD (ezt csak te látod):
-
+ {userSpecificMotd ? ( +
+ ) : ( +
...
+ )}
) } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index d6724a0..8647bf5 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -49,6 +49,12 @@ text-align: center; } +.subtitle { + color: #9999ff; + font-size: 20px; + text-align: center; +} + .newsTitle { font-size: 28px; color: var(--text-color);