Added password authorization, minor other changes

src/components/Question.js

@@ -23,7 +23,6 @@ class Question extends PureComponent {
       })
     }
 
-    // TODO
     const qDataChange = (e) => {
       try {
         let newData = JSON.parse(e.target.value)

src/constants.json

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

src/layout.js

@@ -1,14 +0,0 @@
-import Link from 'next/link'
-
-export default function Layout (props) {
-  return (
-    <div>
-      <Link href='/questionView'>
-        <a>Question view</a>
-      </Link>
-      <Link href='/subjectVIew'>
-        <a>subjectView view</a>
-      </Link>
-    </div>
-  )
-}

src/pages/index.js

@@ -13,20 +13,29 @@ const views = {
   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
-// Load data: generate key / save keys as cookie and list?
-// Upload data: save to new / save to same as loaded
+// TODO: Add question on subjects view
+// TODO: Add subject on subjects view
+// TODO: question.data editor
+// TODO: edit \n-s in questions / answers
 
 export default function Index (props) {
   const [data, setData] = useState(null)
   const [view, setView] = useState(views.subject)
   const [error, setError] = useState(null)
+  const [password, setPassword] = useState('')
+  const [editedQuestions, setEditedQuestions] = useState({})
+
+  const [initialCount, setInitialCount] = useState({})
+
+  const getCount = (d) => {
+    return {
+      subjectCount: d.Subjects.length,
+      questionCount: d.Subjects.reduce((acc, subj) => {
+        acc += subj.Questions.length
+        return acc
+      }, 0)
+    }
+  }
 
   const setIndexes = (d) => {
     d.Subjects.forEach((subj, i) => {
@@ -38,9 +47,11 @@ export default function Index (props) {
     return d
   }
 
-  useEffect(() => {
-    console.info('Fetching data')
-    fetch(`${constants.apiUrl}data.json`)
+  const LoadData = () => {
+    setData(null)
+    const toFetch = `${constants.apiUrl}data.json`
+    console.info('Fetching', toFetch)
+    fetch(toFetch)
       .then((resp) => {
         if (resp && resp.ok) {
           return resp.json()
@@ -50,17 +61,20 @@ export default function Index (props) {
         }
       })
       .then((resp) => {
-        if (data) {
-          console.warn('Tried to refetch data when it was still set!')
-        } else {
-          setData(setIndexes(resp))
-        }
+        setData(setIndexes(resp))
+        const count = getCount(resp)
+        console.info(`Data count`, count)
+        setInitialCount(count)
       })
       .catch((e) => {
-        console.log(e)
+        console.error(e)
         console.error('Error while fetching data')
         setError('Error while fetching data')
       })
+  }
+
+  useEffect(() => {
+    LoadData()
   }, [])
 
   if (error) {
@@ -80,12 +94,53 @@ export default function Index (props) {
   }
 
   const onChange = (subjInd, questionInd, newVal) => {
+    const key = subjInd + '/' + questionInd
+    setEditedQuestions({
+      ...editedQuestions,
+      [key]: editedQuestions[key] ? editedQuestions[key] + 1 : 1
+    })
+
     data.Subjects[subjInd].Questions[questionInd] = newVal
     setData({
       ...data
     })
   }
 
+  const SendDataToServer = async () => {
+    const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        newData: data,
+        count: getCount(data),
+        initialCount: initialCount,
+        password: password,
+        editedQuestions: editedQuestions
+      })
+    })
+    rawResponse.json()
+      .then((resp) => {
+        if (resp.status === 'ok') {
+          alert(`Successfull upload! thanks ${resp.user}!`) // eslint-disable-line
+          console.log('OK')
+        } else if (resp.status === 'invalidPass') {
+          alert('Invalid password!') // eslint-disable-line
+          console.log('invalidPass')
+        } else {
+          alert('Error while uploading (server side)! More in console') // eslint-disable-line
+          console.error('RESPONSE', resp)
+          console.error(resp.message)
+        }
+      })
+      .catch((e) => {
+        alert('Error while uploading (client side)! More in console') // eslint-disable-line
+        console.error('Error posting data', e)
+      })
+  }
+
   const renderView = () => {
     if (view === views.subject) {
       return (
@@ -112,18 +167,6 @@ export default function Index (props) {
     }
   }
 
-  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 />
@@ -135,25 +178,26 @@ export default function Index (props) {
       <div className={styles.optionsButtonContainer}>
         <span
           onClick={() => {
-
+            LoadData()
           }}
         >
-          Load data
+          Reload data
+        </span>
+        <span>
+          <input
+            placeholder='Password for uploading'
+            type='text'
+            value={password}
+            onChange={(e) => { setPassword(e.target.value) }}
+          />
         </span>
         <span
           onClick={() => {
-
+            SendDataToServer()
           }}
         >
           Upload data
         </span>
-        <span
-          onClick={() => {
-            downloadFile(data)
-          }}
-        >
-          Download data
-        </span>
       </div>
       <div className={styles.viewButtonContainer}>
         <span

src/pages/index.module.css

@@ -23,6 +23,14 @@
   word-wrap: none;
 }
 
+.optionsButtonContainer span input {
+  width: 95%;
+  font-size: 16px;
+  background-color: var(--background-color);
+  color: white;
+  border: 0px solid;
+}
+
 .optionsButtonContainer span:hover {
   border-color: white;
 }