Feedback and test sender implement, minor fixes with links

src/components/layout.js

@@ -1,10 +1,11 @@
 import Link from 'next/link'
 
 import tabs from '../data/tabs.json'
+import constants from '../constants.json'
 
 // TODO: activelink prop to set link to active
 export default function Layout (props) {
-  const { currPageName } = props
+  const href = '' // TODO
 
   return (
     <div>
@@ -24,11 +25,14 @@ export default function Layout (props) {
           return (
             <Link href={item.href} key={key} >
               <a
-                className={currPageName === key ? 'active' : ''}
+                className={href.includes(key) ? 'active' : ''}
               >{item.text}</a>
             </Link>
           )
         })}
+        <a href={constants.serverUrl + 'donate'}>
+          Donate
+        </a>
       </div>
       <div className='content'>
         {props.children}

src/data/links.json

@@ -1,18 +1,22 @@
 {
   "install": {
-    "href": "/install",
+    "href": "install",
     "text": "Install"
   },
+  "data": {
+    "href": "data.json",
+    "text": "Összes kérdés JSON"
+  },
   "server": {
-    "href": "/servergit",
+    "href": "servergit",
     "text": "Szerver repó"
   },
   "client": {
-    "href": "/scriptgit",
+    "href": "scriptgit",
     "text": "Script git"
   },
   "classes": {
-    "href": "/classesgit",
+    "href": "classesgit",
     "text": "Classes git"
   }
 }

src/data/tabs.json

@@ -11,6 +11,14 @@
     "href": "/allQuestions",
     "text": "All question"
   },
+  "feedback": {
+    "href": "/feedback",
+    "text": "Feedback"
+  },
+  "testSender": {
+    "href": "/testSender",
+    "text": "Test Sender"
+  },
   "userQuestions": {
     "href": "/userQuestions",
     "text": "User Questions"

src/defaultStyles.css

@@ -20,6 +20,16 @@ body {
   text-decoration: none;
 }
 
+.motdHeader {
+  text-align: center;
+  font-size: 24px;
+}
+
+.motd {
+  text-align: center;
+  font-size: 20px;
+}
+
 .sidebar {
   margin: 0;
   padding: 0;

src/pages/_app.js

@@ -1,9 +1,14 @@
 // import App from 'next/app'
 
 import '../defaultStyles.css'
+import Layout from '../components/layout'
 
 function MyApp ({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }
 
 // Only uncomment this method if you have blocking data requirements for

src/pages/allQuestions.js

@@ -4,7 +4,6 @@ import fetch from 'unfetch'
 import LoadingIndicator from '../components/LoadingIndicator.js'
 import Subject from '../components/Subject.js'
 import SubjectSelector from '../components/SubjectSelector.js'
-import Layout from '../components/layout'
 
 import constants from '../constants.json'
 
@@ -30,37 +29,33 @@ export default function AllQuestions (props) {
     })
 
     return (
-      <Layout currPageName='allQuestions' >
+      <div>
         <div>
-          <div>
-            <input
-              placeholder='Keresés...'
-              className='searchBar'
-              type='text'
-              value={searchTerm}
-              onChange={(e) => { setSearchTerm(e.target.value) }}
-            />
-          </div>
-          <SubjectSelector
-            data={data}
-            activeSubjName={activeSubjName}
-            searchTerm={searchTerm}
-            onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+          <input
+            placeholder='Keresés...'
+            className='searchBar'
+            type='text'
+            value={searchTerm}
+            onChange={(e) => { setSearchTerm(e.target.value) }}
           />
-          <hr />
-          <div>
-            <Subject
-              subj={currSubj}
-            />
-          </div>
         </div>
-      </Layout>
+        <SubjectSelector
+          data={data}
+          activeSubjName={activeSubjName}
+          searchTerm={searchTerm}
+          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
+        />
+        <hr />
+        <div>
+          <Subject
+            subj={currSubj}
+          />
+        </div>
+      </div>
     )
   } else {
     return (
-      <Layout currPageName='allQuestions' >
-        <LoadingIndicator />
-      </Layout>
+      <LoadingIndicator />
     )
   }
 }

src/pages/feedback.js

@@ -1,7 +1,24 @@
+import constants from '../constants.json'
+
 export default function Feedback (props) {
+  // TODO: textarea style to css
+  // TODO: response to user that msg is sucessfully sent
   return (
     <div>
-        hello Feedback
+      <form action={constants.serverUrl + 'postfeedback'} method='post'>
+        <div>Észrevételek: (közeledő teszt miatti kérdés-karbantartás, bug, feature vagy egyéb dolog, ami nyomja a lelked)</div>
+        <textarea
+          type='text'
+          name='message_field'
+          style={{
+            width: '100%',
+            boxSizing: 'border-box',
+            height: '400px'
+          }}
+        />
+        <div>Rengeteg spam-et kapok, nyugodtan küldd el ezerszer, akkor hátha észreveszem a spam között :)</div>
+        <button>Küldés</button>
+      </form>
     </div>
   )
 }

src/pages/home.js

@@ -1,28 +1,31 @@
 import React, { PureComponent } from 'react'
 
 import links from './links.json'
+import constants from '../constants.json'
 
+// TODO: aludni
 class HomeTab extends PureComponent {
   render () {
-    return (
-      <div>
-        {Object.keys(links).map((key) => {
-          let link = links[key]
-          return (
-            <div
-              className='link'
-              key={key}
-            >
-              <a
-                href={link.href}
-              >
-                {link.text}
-              </a>
-            </div>
-          )
-        })}
-      </div>
-    )
+    return (<div>HAAAAAAAAAA</div>)
+    // return (
+    //   <div>
+    //     {Object.keys(links).map((key) => {
+    //       const link = links[key]
+    //       return (
+    //         <div
+    //           className='link'
+    //           key={key}
+    //         >
+    //           <a
+    //             href={constants.serverUrl + link.href}
+    //           >
+    //             {link.text}
+    //           </a>
+    //         </div>
+    //       )
+    //     })}
+    //   </div>
+    // )
   }
 }
 

src/pages/index.js

@@ -1,35 +1,60 @@
-
 // TODO: css remove unnecesarry stuff
 // TODO: resizing
-// TODO: fetch data only once?
-// TODO: move manual to this module instead of api
-// TODO: feedback tab
 // TODO: motd
-import Layout from '../components/layout'
+// TODO: aludni
+// TODO: fetch only once
 
+import React, { useState, useEffect } from 'react'
+import fetch from 'unfetch'
 import links from '../data/links.json'
-// import constants from '../constants.json'
+import constants from '../constants.json'
 
 export default function Index (props) {
-  return (
-    <Layout currPageName='index'>
+  const [motd, setMotd] = useState('loading...')
+
+  useEffect(() => {
+    console.info('Fetching data')
+    fetch(`${constants.serverUrl}motd`)
+      .then((resp) => {
+        return resp.text()
+      })
+      .then((data) => {
+        setMotd(data)
+      })
+  }, [])
+
+  const renderMotd = () => {
+    return (
       <div>
-        {Object.keys(links).map((key) => {
-          let link = links[key]
-          return (
-            <div
-              className='link'
-              key={key}
-            >
-              <a
-                href={link.href}
-              >
-                {link.text}
-              </a>
-            </div>
-          )
-        })}
+        <div className='motdHeader'>
+          MOTD:
+        </div>
+        <div
+          className='motd'
+          dangerouslySetInnerHTML={{ __html: motd }}
+        />
       </div>
-    </Layout>
+    )
+  }
+
+  return (
+    <div>
+      {renderMotd()}
+      {Object.keys(links).map((key) => {
+        let link = links[key]
+        return (
+          <div
+            className='link'
+            key={key}
+          >
+            <a
+              href={constants.serverUrl + link.href}
+            >
+              {link.text}
+            </a>
+          </div>
+        )
+      })}
+    </div>
   )
 }

src/pages/manual.js

@@ -1,10 +1,9 @@
-import Layout from '../components/layout'
 
 export default function Manual (props) {
   return (
-    <Layout currPageName='manual' >
+    <div>
       {renderMaual()}
-    </Layout>
+    </div>
   )
 }
 

src/pages/userQuestions.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
 import LoadingIndicator from '../components/LoadingIndicator'
-import Layout from '../components/layout'
 
 import constants from '../constants.json'
 
@@ -40,17 +39,13 @@ export default function UserQuestions (props) {
     }).reverse()
 
     return (
-      <Layout currPageName='UserQuestions' >
-        <div className='uquestionscontainer'>
-          {questions}
-        </div>
-      </Layout>
+      <div className='uquestionscontainer'>
+        {questions}
+      </div>
     )
   } else {
     return (
-      <Layout currPageName='UserQuestions' >
-        <LoadingIndicator />
-      </Layout>
+      <LoadingIndicator />
     )
   }
 }