Added tabs.json

src/components/layout.js

@@ -1,5 +1,7 @@
 import Link from 'next/link'
 
+import tabs from '../data/tabs.json'
+
 // TODO: activelink prop to set link to active
 export default function Layout (props) {
   const { currPageName } = props
@@ -17,26 +19,16 @@ export default function Layout (props) {
             Frylabs
           </div>
         </div>
-        <Link href='/' >
-          <a
-            className={currPageName === 'index' ? 'active' : ''}
-          >home</a>
-        </Link>
-        <Link href='/manual' >
-          <a
-            className={currPageName === 'manual' ? 'active' : ''}
-          >manual</a>
-        </Link>
-        <Link href='/allQuestions' >
-          <a
-            className={currPageName === 'allQuestions' ? 'active' : ''}
-          >AllQuestions</a>
-        </Link>
-        <Link href='/userQuestions' >
-          <a
-            className={currPageName === 'userQuestions' ? 'active' : ''}
-          >userQuestions</a>
-        </Link>
+        {Object.keys(tabs).map((key) => {
+          const item = tabs[key]
+          return (
+            <Link href={item.href} key={key} >
+              <a
+                className={currPageName === key ? 'active' : ''}
+              >{item.text}</a>
+            </Link>
+          )
+        })}
       </div>
       <div className='content'>
         {props.children}

src/data/tabs.json

@@ -0,0 +1,18 @@
+{
+  "index": {
+    "href": "/",
+    "text": "Home"
+  },
+  "manual": {
+    "href": "/manual",
+    "text": "Manual"
+  },
+  "allQuestions": {
+    "href": "/allQuestions",
+    "text": "All question"
+  },
+  "userQuestions": {
+    "href": "/userQuestions",
+    "text": "User Questions"
+  }
+}

src/pages/allQuestions.js

@@ -10,11 +10,9 @@ import constants from '../constants.json'
 
 export default function AllQuestions (props) {
   const [data, setData] = useState(null)
-  const [loaded, setLoaded] = useState(false)
   const [activeSubjName, setActiveSubjName] = useState('')
   const [searchTerm, setSearchTerm] = useState('')
 
-  // TODO: fetches twice
   useEffect(() => {
     console.info('Fetching data')
     fetch(`${constants.serverUrl}data.json`)
@@ -23,11 +21,10 @@ export default function AllQuestions (props) {
       })
       .then((data) => {
         setData(data)
-        setLoaded(true)
       })
-  }, [loaded])
+  }, [])
 
-  if (loaded) {
+  if (data) {
     let currSubj = data.Subjects.find((subj) => {
       return subj.Name === activeSubjName
     })

src/pages/feedback.js

@@ -1,13 +1,7 @@
-import React, { PureComponent } from 'react'
-
-class Feedback extends PureComponent {
-  render () {
-    return (
-      <div>
+export default function Feedback (props) {
+  return (
+    <div>
         hello Feedback
-      </div>
-    )
-  }
+    </div>
+  )
 }
-
-export default Feedback

src/pages/userQuestions.js

@@ -6,7 +6,6 @@ import Layout from '../components/layout'
 import constants from '../constants.json'
 
 export default function UserQuestions (props) {
-  const [loaded, setLoaded] = useState(false)
   const [qa, setQa] = useState(null)
 
   useEffect(() => {
@@ -17,11 +16,10 @@ export default function UserQuestions (props) {
       })
       .then((data) => {
         setQa(data)
-        setLoaded(true)
       })
-  }, [loaded])
+  }, [])
 
-  if (loaded) {
+  if (qa) {
     let questions = Object.keys(qa).map((key, i) => {
       let q = qa[key]
       return (