Cooler menubar, handling network errors

src/constants.json

@@ -1,4 +1,4 @@
 {
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "localhost:8080",
   "maxQuestionsToRender": 250
 }

src/pages/index.js

@@ -20,10 +20,13 @@ const views = {
 //   save: save question count and subj count
 //   save deleted/removed questions ?
 // edit \n-s in questions / answers
+// Load data: generate key / save keys as cookie and list?
+// Upload data: save to new / save to same as loaded
 
 export default function Index (props) {
   const [data, setData] = useState(null)
   const [view, setView] = useState(views.subject)
+  const [error, setError] = useState(null)
 
   const setIndexes = (d) => {
     d.Subjects.forEach((subj, i) => {
@@ -39,7 +42,12 @@ export default function Index (props) {
     console.info('Fetching data')
     fetch(`${constants.apiUrl}data.json`)
       .then((resp) => {
-        return resp.json()
+        if (resp && resp.ok) {
+          return resp.json()
+        } else {
+          console.error('Error while fetching data')
+          setError('Error while fetching data')
+        }
       })
       .then((resp) => {
         if (data) {
@@ -48,8 +56,21 @@ export default function Index (props) {
           setData(setIndexes(resp))
         }
       })
+      .catch((e) => {
+        console.log(e)
+        console.error('Error while fetching data')
+        setError('Error while fetching data')
+      })
   }, [])
 
+  if (error) {
+    return (
+      <div>
+        {error}
+      </div>
+    )
+  }
+
   const deleteQuestion = (subjInd, questionInd) => {
     data.Subjects[subjInd].Questions.splice(questionInd, 1)
 
@@ -108,26 +129,40 @@ export default function Index (props) {
       <LoadingIndicator />
     )
   }
+
   return (
     <div>
-      <div className={styles.buttonContainer}>
+      <div className={styles.optionsButtonContainer}>
         <span
-          className={styles.tabButton}
+          onClick={() => {
-          onClick={() => { setView(views.subject) }}>
+
-            Subject view
+          }}
+        >
+          Load data
         </span>
         <span
-          className={styles.tabButton}
+          onClick={() => {
-          onClick={() => { setView(views.question) }}>
+
-            Question view
+          }}
+        >
+          Upload data
         </span>
         <span
-          className={styles.downloadButton}
           onClick={() => {
             downloadFile(data)
           }}
         >
-          Download result
+          Download data
+        </span>
+      </div>
+      <div className={styles.viewButtonContainer}>
+        <span
+          onClick={() => { setView(views.subject) }}>
+            Subject view
+        </span>
+        <span
+          onClick={() => { setView(views.question) }}>
+            Question view
         </span>
       </div>
       {renderView()}

src/pages/index.module.css

@@ -1,4 +1,4 @@
-.tabButton {
+.viewButtonContainer span {
   display: inline-block;
   margin: 5px;
   padding: 5px;
@@ -10,12 +10,12 @@
   border: 1px solid;
 }
 
-.downloadButton {
+.optionsButtonContainer span {
   display: inline-block;
-  margin: 5px;
+  margin: 3px;
-  padding: 5px;
+  padding: 3px;
-  height: 45px;
+  height: 25px;
-  font-size: 30px;
+  font-size: 18px;
   width: 26%;
   text-align: center;
   border-color: var(--background-color);
@@ -23,11 +23,20 @@
   word-wrap: none;
 }
 
-.tabButton:hover {
+.optionsButtonContainer span:hover {
   border-color: white;
 }
 
-.buttonContainer {
+.viewButtonContainer span:hover {
+  border-color: white;
+}
+
+.optionsButtonContainer {
+  text-align: center;
+  width: 100%;
+}
+
+.viewButtonContainer {
   text-align: center;
   width: 100%;
 }