Cooler menubar, handling network errors

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={() => { setView(views.subject) }}>
-            Subject view
+          onClick={() => {
+
+          }}
+        >
+          Load data
         </span>
         <span
-          className={styles.tabButton}
-          onClick={() => { setView(views.question) }}>
-            Question view
+          onClick={() => {
+
+          }}
+        >
+          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()}