Initial commit, with fully working project :p

src/pages/index.js

@@ -0,0 +1,136 @@
+import React, { useState, useEffect } from 'react'
+import fetch from 'unfetch'
+
+import SubjectView from '../components/subjectView'
+import QuestionView from '../components/questionView'
+import LoadingIndicator from '../components/LoadingIndicator'
+
+import styles from './index.module.css'
+import constants from '../constants.json'
+
+const views = {
+  subject: 'SUBJECT',
+  question: 'QUESTION'
+}
+
+// TODO:
+// Add question on subjects view
+// question.data editor
+// save data to server / load it from there
+//   save: save question count and subj count
+//   save deleted/removed questions ?
+// edit \n-s in questions / answers
+
+export default function Index (props) {
+  const [data, setData] = useState(null)
+  const [view, setView] = useState(views.subject)
+
+  const setIndexes = (d) => {
+    d.Subjects.forEach((subj, i) => {
+      subj.ind = i
+      subj.Questions.forEach((question, j) => {
+        question.ind = j
+      })
+    })
+    return d
+  }
+
+  useEffect(() => {
+    console.info('Fetching data')
+    fetch(`${constants.apiUrl}data.json`)
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        if (data) {
+          console.warn('Tried to refetch data when it was still set!')
+        } else {
+          setData(setIndexes(resp))
+        }
+      })
+  }, [])
+
+  const deleteQuestion = (subjInd, questionInd) => {
+    data.Subjects[subjInd].Questions.splice(questionInd, 1)
+
+    setData({
+      ...setIndexes(data)
+    })
+  }
+
+  const onChange = (subjInd, questionInd, newVal) => {
+    data.Subjects[subjInd].Questions[questionInd] = newVal
+    setData({
+      ...data
+    })
+  }
+
+  const renderView = () => {
+    if (view === views.subject) {
+      return (
+        <SubjectView
+          onChange={onChange}
+          data={data}
+          deleteQuestion={deleteQuestion}
+        />
+      )
+    } else if (view === views.question) {
+      return (
+        <QuestionView
+          onChange={onChange}
+          data={data}
+          deleteQuestion={deleteQuestion}
+        />
+      )
+    } else {
+      return (
+        <div>
+          No view!
+        </div>
+      )
+    }
+  }
+
+  const downloadFile = async (data) => {
+    const json = JSON.stringify(data)
+    const blob = new Blob([json], { type: 'application/json' }) // eslint-disable-line
+    const href = await URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = href
+    link.download = 'data.json'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+  }
+
+  if (!data) {
+    return (
+      <LoadingIndicator />
+    )
+  }
+  return (
+    <div>
+      <div className={styles.buttonContainer}>
+        <span
+          className={styles.tabButton}
+          onClick={() => { setView(views.subject) }}>
+            Subject view
+        </span>
+        <span
+          className={styles.tabButton}
+          onClick={() => { setView(views.question) }}>
+            Question view
+        </span>
+        <span
+          className={styles.downloadButton}
+          onClick={() => {
+            downloadFile(data)
+          }}
+        >
+          Download result
+        </span>
+      </div>
+      {renderView()}
+    </div>
+  )
+}