From 1381bb352c95578aaa1db19a92bb81238f53f2f1 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Fri, 19 Feb 2021 17:30:22 +0200
Subject: [PATCH 01/12] Add hCaptcha dependencies

---
 package.json |  2 ++
 yarn.lock    | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/package.json b/package.json
index a36627c1..716f80b1 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "@hcaptcha/react-hcaptcha": "^0.3.2",
     "@sentry/react": "6.1.0",
     "@svgr/webpack": "5.5.0",
     "@swc/core": "1.2.47",
+    "@types/hcaptcha__react-hcaptcha": "^0.1.4",
     "axios": "0.21.1",
     "copy-webpack-plugin": "7.0.0",
     "fs-extra": "9.1.0",
diff --git a/yarn.lock b/yarn.lock
index 63e5b831..0d714d25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1296,6 +1296,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@hcaptcha/react-hcaptcha@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@hcaptcha/react-hcaptcha/-/react-hcaptcha-0.3.2.tgz#8910ea4c111799336fb64de6aa7b74329a7d7579"
+  integrity sha512-+90hSDwtnKAk3PXJsyABi+wRHS1B+wgWjDO4nz68KpkLnE73rMz/XMdl+ckrwYkFFilzIDKI3o1IqOpMapEwgg==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2011,6 +2016,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hcaptcha__react-hcaptcha@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@types/hcaptcha__react-hcaptcha/-/hcaptcha__react-hcaptcha-0.1.4.tgz#145cab4f0ac29fe8925dc98ab16cf2dffacad7d5"
+  integrity sha512-eqEIBR7yn4Y1fRtxPnFlEP8SAHwX762Z27s/ifd5wfJicviz6HynF8gHCgUPPtfYlaQFHa/A0NkwBA5YNmNCmQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/history@*":
   version "4.7.8"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"

From 15a4a8654a5ee6b0ce9bd084da1285c98f88d388 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sat, 20 Feb 2021 10:37:24 +0200
Subject: [PATCH 02/12] Add Redux and React Redux dependencies

---
 package.json |  2 ++
 yarn.lock    | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 716f80b1..5334b6c2 100644
--- a/package.json
+++ b/package.json
@@ -22,9 +22,11 @@
     "react": "17.0.1",
     "react-app-polyfill": "2.0.0",
     "react-dom": "17.0.1",
+    "react-redux": "^7.2.2",
     "react-router-dom": "5.2.0",
     "react-spinners": "0.10.4",
     "react-transition-group": "4.4.1",
+    "redux": "^4.0.5",
     "smoothscroll-polyfill": "0.4.4",
     "swc-loader": "0.1.12",
     "typescript": "4.1.5",
diff --git a/yarn.lock b/yarn.lock
index 0d714d25..8b6619ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,6 +974,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.1":
+  version "7.12.18"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.18.tgz#af137bd7e7d9705a412b3caaf991fe6aaa97831b"
+  integrity sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -7271,7 +7278,7 @@ react-dom@17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7281,6 +7288,17 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-redux@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736"
+  integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-router-dom@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@@ -7424,6 +7442,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -8428,6 +8454,11 @@ swc-loader@0.1.12:
     "@swc/core" "^1.1.48"
     loader-utils "^2.0.0"
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.2, symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From c6bf4b1bfebfee518fa038941fce45fc3e4b279f Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sat, 20 Feb 2021 10:39:45 +0200
Subject: [PATCH 03/12] Add hCaptcha sitekey and allowed hosts to webpack
 config

---
 webpack.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index 35c90a74..54b4030d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -70,6 +70,7 @@ module.exports = {
         }]
     },
     devServer: {
+        allowedHosts: ["pythondiscord.local"],  // hCaptcha don't support localhost (pythondiscord.local:3000)
         contentBase: path.join(__dirname, 'public'),
         compress: true,
         port: 3000,
@@ -93,7 +94,8 @@ module.exports = {
         REACT_APP_SENTRY_DSN: "https://false@notreal.ingest.sentry.io/1234",
         REACT_APP_OAUTH2_CLIENT_ID: "0",
         BACKEND_URL: "https://forms-api.pythondiscord.com/",
-        CONTEXT: "development"
+        CONTEXT: "development",
+        HCAPTCHA_SITEKEY: "10000000-ffff-ffff-ffff-000000000001"  // This is development key what don't add any protection
     }), new HtmlWebpackPlugin({
         inject: true,
         template: 'public/index.html'

From e4125b11ef0c4edaa1f59148eb728fb9f9fdeb49 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sat, 20 Feb 2021 10:55:08 +0200
Subject: [PATCH 04/12] Add React-Redux and Redux type packages as dev
 dependencies

---
 package.json |  2 ++
 yarn.lock    | 29 +++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5334b6c2..d773fe34 100644
--- a/package.json
+++ b/package.json
@@ -65,8 +65,10 @@
     "@types/node": "14.14.25",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.0",
+    "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "5.1.7",
     "@types/react-transition-group": "4.4.0",
+    "@types/redux": "^3.6.0",
     "@types/smoothscroll-polyfill": "0.3.1",
     "@typescript-eslint/eslint-plugin": "4.15.0",
     "@typescript-eslint/parser": "4.15.0",
diff --git a/yarn.lock b/yarn.lock
index 8b6619ad..1b9f71c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2035,6 +2035,14 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
   integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -2127,6 +2135,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react-router-dom@5.1.7":
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
@@ -2159,6 +2177,13 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/redux@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
+  integrity sha1-8evh5UEVGAcuT9/KXHbhbnTBOZo=
+  dependencies:
+    redux "*"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -4806,7 +4831,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7442,7 +7467,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux@^4.0.5:
+redux@*, redux@^4.0.0, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==

From 4eeb24bc3317856b34be6e8eac9b668262b177ae Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sat, 20 Feb 2021 11:02:08 +0200
Subject: [PATCH 05/12] Move hCaptcha types library to dev-dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d773fe34..78e5acc8 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "@sentry/react": "6.1.0",
     "@svgr/webpack": "5.5.0",
     "@swc/core": "1.2.47",
-    "@types/hcaptcha__react-hcaptcha": "^0.1.4",
     "axios": "0.21.1",
     "copy-webpack-plugin": "7.0.0",
     "fs-extra": "9.1.0",
@@ -61,6 +60,7 @@
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.6.3",
+    "@types/hcaptcha__react-hcaptcha": "^0.1.4",
     "@types/jest": "26.0.20",
     "@types/node": "14.14.25",
     "@types/react": "17.0.1",

From b1f05fa57c862ce8219e5ca464e794353261f842 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 21 Feb 2021 07:35:29 +0200
Subject: [PATCH 06/12] Migrate from public state map to Redux

---
 src/App.tsx                            |   4 +-
 src/components/InputTypes/Checkbox.tsx |   7 +-
 src/components/InputTypes/Select.tsx   |  40 +++++--
 src/components/InputTypes/index.tsx    |  13 ++-
 src/components/Question.tsx            | 153 +++++++++++++++----------
 src/pages/FormPage.tsx                 |  38 ++++--
 src/store/form/actions.ts              |  79 +++++++++++++
 src/store/form/reducers.ts             |  29 +++++
 src/store/form/store.ts                |   4 +
 src/store/form/types.ts                |   5 +
 10 files changed, 285 insertions(+), 87 deletions(-)
 create mode 100644 src/store/form/actions.ts
 create mode 100644 src/store/form/reducers.ts
 create mode 100644 src/store/form/store.ts
 create mode 100644 src/store/form/types.ts

diff --git a/src/App.tsx b/src/App.tsx
index 523e5834..14e53291 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@
 import React, { Suspense } from "react";
 import { jsx, css, Global } from "@emotion/react";
 
+import { Provider } from "react-redux";
 import {
     BrowserRouter as Router,
     Route,
@@ -14,6 +15,7 @@ import { PropagateLoader } from "react-spinners";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import globalStyles from "./globalStyles";
+import { store } from "./store/form/store";
 
 const LandingPage = React.lazy(() => import("./pages/LandingPage"));
 const FormPage = React.lazy(() => import("./pages/FormPage"));
@@ -51,7 +53,7 @@ function App(): JSX.Element {
                                 {routes.map(({path, Component}) => (
                                     <Route exact key={path} path={path}>
                                         <Suspense fallback={<PageLoading/>}>
-                                            <Component/>
+                                            {path == "/form/:id" ? <Provider store={store}><Component/></Provider> : <Component/>}
                                         </Suspense>
                                     </Route>
                                 ))}
diff --git a/src/components/InputTypes/Checkbox.tsx b/src/components/InputTypes/Checkbox.tsx
index 3093caf6..b3130c6b 100644
--- a/src/components/InputTypes/Checkbox.tsx
+++ b/src/components/InputTypes/Checkbox.tsx
@@ -3,6 +3,8 @@ import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import colors from "../../colors";
 import { multiSelectInput, hiddenInput } from "../../commonStyles";
+import {useSelector} from "react-redux";
+import {FormState} from "../../store/form/types";
 
 interface CheckboxProps {
     index: number,
@@ -53,10 +55,13 @@ const activeStyles = css`
 `;
 
 export default function Checkbox(props: CheckboxProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
     return (
         <label css={[generalStyles, activeStyles]}>
             <label className="unselected" css={multiSelectInput}>
-                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler}/>
+                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler} checked={!!values.get(`${("000" + props.index).slice(-4)}. ${props.option}`)}/>
                 <span className="checkmark"/>
             </label>
             {props.option}<br/>
diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index 2d0187a8..c0f54251 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -1,13 +1,26 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React from "react";
+import { connect } from "react-redux";
+
 import { hiddenInput, invalidStyles } from "../../commonStyles";
+import { Question } from "../../api/question";
+import { setValue, SetValueAction } from "../../store/form/actions";
+import { FormState } from "../../store/form/types";
 
 interface SelectProps {
     options: Array<string>,
-    state_dict: Map<string, string | boolean | null>,
     valid: boolean,
-    onBlurHandler: () => void
+    onBlurHandler: () => void,
+    question: Question
+}
+
+interface SelectStateProps {
+    values: Map<string, string | Map<string, boolean> | null>
+}
+
+interface SelectDispatchProps {
+    setValue: (question: Question, value: string | Map<string, boolean> | null) => SetValueAction
 }
 
 const containerStyles = css`
@@ -143,7 +156,7 @@ const optionStyles = css`
   }
 `;
 
-class Select extends React.Component<SelectProps> {
+class Select extends React.Component<SelectProps & SelectStateProps & SelectDispatchProps> {
     handler(selected_option: React.RefObject<HTMLDivElement>, event: React.ChangeEvent<HTMLInputElement>): void {
         const option_container = event.target.parentElement;
         if (!option_container || !option_container.parentElement || !selected_option.current) {
@@ -151,7 +164,7 @@ class Select extends React.Component<SelectProps> {
         }
 
         // Update stored value
-        this.props.state_dict.set("value", option_container.textContent);
+        this.props.setValue(this.props.question, option_container.textContent);
 
         // Close the menu
         selected_option.current.focus();
@@ -178,10 +191,10 @@ class Select extends React.Component<SelectProps> {
     }
 
     focusOption(): void {
-        if (!this.props.state_dict.get("value")) {
-            this.props.state_dict.set("value", "temporary");
+        if (!this.props.values.get(this.props.question.id)) {
+            this.props.setValue(this.props.question, "temporary");
             this.props.onBlurHandler();
-            this.props.state_dict.set("value", null);
+            this.props.setValue(this.props.question, null);
         }
     }
 
@@ -211,4 +224,15 @@ class Select extends React.Component<SelectProps> {
     }
 }
 
-export default Select;
+const mapStateToProps = (state: FormState, ownProps: SelectProps): SelectProps & SelectStateProps => {
+    return {
+        ...ownProps,
+        values: state.values
+    };
+};
+
+const mapDispatchToProps = {
+    setValue
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Select);
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index bc65248b..e816c9c6 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -6,10 +6,10 @@ import Select from "./Select";
 import ShortText from "./ShortText";
 import TextArea from "./TextArea";
 
-import React, { ChangeEvent } from "react";
+import React, {ChangeEvent} from "react";
 
-import { QuestionType } from "../../api/question";
-import { QuestionProp } from "../Question";
+import {QuestionType} from "../../api/question";
+import {QuestionDispatchProp, QuestionProp, QuestionStateProp} from "../Question";
 
 const require_options: Array<QuestionType> = [
     QuestionType.Radio,
@@ -19,14 +19,15 @@ const require_options: Array<QuestionType> = [
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function create_input({ question, public_state }: QuestionProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, onBlurHandler: () => void, focus_ref: React.RefObject<any>): JSX.Element | JSX.Element[] {
+export default function create_input(props: QuestionProp & QuestionStateProp & QuestionDispatchProp, handler: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, onBlurHandler: () => void, focus_ref: React.RefObject<any>): JSX.Element | JSX.Element[] {
     let result: JSX.Element | JSX.Element[];
+    const question = props.question;
 
     // eslint-disable-next-line
     // @ts-ignore
     let options: string[] = question.data["options"];
     let valid = true;
-    if (!public_state.get("valid")) {
+    if (!props.valid.get(question.id)) {
         valid = false;
     }
 
@@ -51,7 +52,7 @@ export default function create_input({ question, public_state }: QuestionProp, h
             break;
 
         case QuestionType.Select:
-            result = <Select options={options} state_dict={public_state} valid={valid} onBlurHandler={onBlurHandler}/>;
+            result = <Select options={options} question={question} valid={valid} onBlurHandler={onBlurHandler}/>;
             break;
 
         case QuestionType.ShortText:
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 0af745e4..74c4a712 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -1,11 +1,14 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
+import { connect } from "react-redux";
 
 import { Question, QuestionType } from "../api/question";
 import { selectable } from "../commonStyles";
 import create_input from "./InputTypes";
 import ErrorMessage from "./ErrorMessage";
+import { FormState } from "../store/form/types";
+import { setError, SetErrorAction, setValid, SetValidAction, setValue, SetValueAction } from "../store/form/actions";
 
 const skip_normal_state: Array<QuestionType> = [
     QuestionType.Radio,
@@ -17,14 +20,25 @@ const skip_normal_state: Array<QuestionType> = [
 
 export type QuestionProp = {
     question: Question,
-    public_state: Map<string, string | boolean | null>,
     scroll_ref: React.RefObject<HTMLDivElement>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     focus_ref: React.RefObject<any>
 }
 
-class RenderedQuestion extends React.Component<QuestionProp> {
-    constructor(props: QuestionProp) {
+export type QuestionStateProp = {
+    values: Map<string, string | Map<string, boolean> | null>,
+    errors: Map<string, string>,
+    valid: Map<string, boolean>,
+};
+
+export type QuestionDispatchProp = {
+    setValue: (question: Question, value: string | Map<string, boolean> | null) => SetValueAction,
+    setValid: (question: Question, valid: boolean) => SetValidAction,
+    setError: (question: Question, error: string) => SetErrorAction
+};
+
+export class RenderedQuestion extends React.Component<QuestionProp & QuestionStateProp & QuestionDispatchProp> {
+    constructor(props: QuestionProp & QuestionStateProp & QuestionDispatchProp) {
         super(props);
         if (props.question.type === QuestionType.TextArea) {
             this.handler = this.text_area_handler.bind(this);
@@ -33,47 +47,39 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         }
         this.blurHandler = this.blurHandler.bind(this);
 
-        this.setPublicState("valid", true);
-        this.setPublicState("error", "");
+        props.setValid(props.question, true);
+        props.setError(props.question, "");
 
         if (!skip_normal_state.includes(props.question.type)) {
-            this.setPublicState("value", "");
+            props.setValue(props.question, "");
         }
     }
 
-    setPublicState(target: string, value: string | boolean | null, callback?:() => void): void {
-        this.setState({[target]: value}, callback);
-        this.props.public_state.set(target, value);
-    }
-
     // This is here to allow dynamic selection between the general handler, and the textarea handler.
     handler(_: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void {} // eslint-disable-line
 
     blurHandler(): void {
         if (this.props.question.required) {
-            if (!this.props.public_state.get("value")) {
-                this.setPublicState("error", "Field must be filled.");
-                this.setPublicState("valid", false);
+            if (!this.props.values.get(this.props.question.id)) {
+                this.props.setError(this.props.question, "Field must be filled.");
+                this.props.setValid(this.props.question, false);
             } else {
-                this.setPublicState("error", "");
-                this.setPublicState("valid", true);
+                this.props.setError(this.props.question, "");
+                this.props.setValid(this.props.question, true);
             }
         }
     }
 
     normal_handler(event: ChangeEvent<HTMLInputElement>): void {
-        let target: string;
-        let value: string | boolean;
+        let value: string | [string, boolean];
 
         switch (event.target.type) {
             case "checkbox":
-                target = event.target.name;
-                value = event.target.checked;
+                value = [event.target.name, event.target.checked];
                 break;
 
             case "radio":
-            // This handles radios and ranges, as they are both based on the same fundamental input type
-                target = "value";
+                // This handles radios and ranges, as they are both based on the same fundamental input type
                 if (event.target.parentElement) {
                     value = event.target.parentElement.innerText.trimEnd();
                 } else {
@@ -82,11 +88,19 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                 break;
 
             default:
-                target = "value";
                 value = event.target.value;
         }
 
-        this.setPublicState(target, value);
+        if (value instanceof Array) {
+            let values = this.props.values.get(this.props.question.id);
+            if (!(values instanceof Map)) {
+                values = new Map<string, boolean>();
+            }
+            values.set(value[0], value[1]);
+            this.props.setValue(this.props.question, values);
+        } else {
+            this.props.setValue(this.props.question, value);
+        }
 
         // Toggle checkbox class
         if (event.target.type == "checkbox" && event.target.parentElement !== null) {
@@ -97,7 +111,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         const options: string | string[] = this.props.question.data["options"];
         switch (event.target.type) {
             case "text":
-                this.setPublicState("valid", true);
+                this.props.setValid(this.props.question, true);
                 break;
 
             case "checkbox":
@@ -107,29 +121,30 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                     options.forEach((val, index) => {
                         keys.push(`${("000" + index).slice(-4)}. ${val}`);
                     });
-                    if (keys.every(v => !this.props.public_state.get(v))) {
-                        this.setPublicState("error", "Field must be filled.");
-                        this.setPublicState("valid", false);
+                    const values = this.props.values.get(this.props.question.id);
+                    if (values instanceof Map && keys.every(v => !values.get(v))) {
+                        this.props.setError(this.props.question, "Field must be filled.");
+                        this.props.setValid(this.props.question, false);
                     } else {
-                        this.setPublicState("error", "");
-                        this.setPublicState("valid", true);
+                        this.props.setError(this.props.question, "");
+                        this.props.setValid(this.props.question, true);
                     }
                 }
                 break;
 
             case "radio":
-                this.setPublicState("valid", true);
-                this.setPublicState("error", "");
+                this.props.setError(this.props.question, "");
+                this.props.setValid(this.props.question, true);
                 break;
         }
     }
 
     text_area_handler(event: ChangeEvent<HTMLTextAreaElement>): void {
         // We will validate again when focusing out.
-        this.setPublicState("valid", true);
-        this.setPublicState("error", "");
+        this.props.setError(this.props.question, "");
+        this.props.setValid(this.props.question, true);
 
-        this.setPublicState("value", event.target.value);
+        this.props.setValue(this.props.question, event.target.value);
     }
 
     validateField(): void {
@@ -142,7 +157,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         switch (this.props.question.type) {
             case QuestionType.TextArea:
             case QuestionType.ShortText:
-                if (this.props.public_state.get("value") === "") {
+                if (this.props.values.get(this.props.question.id) === "") {
                     invalid = true;
                 }
                 break;
@@ -150,7 +165,7 @@ class RenderedQuestion extends React.Component<QuestionProp> {
             case QuestionType.Select:
             case QuestionType.Range:
             case QuestionType.Radio:
-                if (!this.props.public_state.get("value")) {
+                if (!this.props.values.get(this.props.question.id)) {
                     invalid = true;
                 }
                 break;
@@ -161,7 +176,8 @@ class RenderedQuestion extends React.Component<QuestionProp> {
                     options.forEach((val, index) => {
                         keys.push(`${("000" + index).slice(-4)}. ${val}`);
                     });
-                    if (keys.every(v => !this.props.public_state.get(v))) {
+                    const values = this.props.values.get(this.props.question.id);
+                    if (values instanceof Map && keys.every(v => !values.get(v))) {
                         invalid = true;
                     }
                 }
@@ -169,36 +185,36 @@ class RenderedQuestion extends React.Component<QuestionProp> {
         }
 
         if (invalid) {
-            this.setPublicState("error", "Field must be filled.");
-            this.setPublicState("valid", false);
+            this.props.setError(this.props.question, "Field must be filled.");
+            this.props.setValid(this.props.question, false);
         } else {
-            this.setPublicState("error", "");
-            this.setPublicState("valid", true);
+            this.props.setError(this.props.question, "");
+            this.props.setValid(this.props.question, true);
         }
     }
 
     componentDidMount(): void {
         // Initialize defaults for complex and nested fields
         const options: string | string[] = this.props.question.data["options"];
+        const values = this.props.values.get(this.props.question.id);
 
-        if (this.props.public_state.size === 0) {
-            switch (this.props.question.type) {
-                case QuestionType.Checkbox:
-                    if (typeof options === "string") {
-                        return;
-                    }
+        switch (this.props.question.type) {
+            case QuestionType.Checkbox:
+                if (typeof options === "string" || !(values instanceof Map)) {
+                    return;
+                }
 
-                    options.forEach((option, index) => {
-                        this.setPublicState(`${("000" + index).slice(-4)}. ${option}`, false);
-                    });
-                    break;
+                options.forEach((option, index) => {
+                    values.set(`${("000" + index).slice(-4)}. ${option}`, false);
+                });
+                this.props.setValue(this.props.question, values);
+                break;
 
-                case QuestionType.Range:
-                case QuestionType.Radio:
-                case QuestionType.Select:
-                    this.setPublicState("value", null);
-                    break;
-            }
+            case QuestionType.Range:
+            case QuestionType.Radio:
+            case QuestionType.Select:
+                this.props.setValue(this.props.question, null);
+                break;
         }
     }
 
@@ -250,10 +266,10 @@ class RenderedQuestion extends React.Component<QuestionProp> {
               }
             `;
             let valid = true;
-            if (!this.props.public_state.get("valid")) {
+            if (!this.props.valid.get(this.props.question.id)) {
                 valid = false;
             }
-            const rawError = this.props.public_state.get("error");
+            const rawError = this.props.errors.get(this.props.question.id);
             let error = "";
             if (typeof rawError === "string") {
                 error = rawError;
@@ -271,4 +287,19 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     }
 }
 
-export default RenderedQuestion;
+const mapStateToProps = (state: FormState, ownProps: QuestionProp): QuestionProp & QuestionStateProp => {
+    return {
+        ...ownProps,
+        values: state.values,
+        errors: state.errors,
+        valid: state.valid
+    };
+};
+
+const mapDispatchToProps = {
+    setValue,
+    setValid,
+    setError
+};
+
+export default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(RenderedQuestion);
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 1e331b96..e9306e32 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -5,9 +5,10 @@ import { Link } from "react-router-dom";
 import React, { SyntheticEvent, useEffect, useState, createRef } from "react";
 import { useParams } from "react-router";
 import { PropagateLoader } from "react-spinners";
+import { useDispatch, useSelector } from "react-redux";
 
 import HeaderBar from "../components/HeaderBar";
-import RenderedQuestion from "../components/Question";
+import ConnectedRenderedQuestion, { RenderedQuestion } from "../components/Question";
 import Loading from "../components/Loading";
 import ScrollToTop from "../components/ScrollToTop";
 
@@ -16,6 +17,8 @@ import colors from "../colors";
 import { unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
+import { FormState } from "../store/form/types";
+import { clean } from "../store/form/actions";
 
 interface PathParams {
     id: string
@@ -157,11 +160,21 @@ const closedHeaderStyles = css`
 function FormPage(): JSX.Element {
     const { id } = useParams<PathParams>();
 
+    const valid = useSelector<FormState, FormState["valid"]>(
+        state => state.valid
+    );
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+
+    const dispatch = useDispatch();
+
     const [form, setForm] = useState<Form>();
     const [sending, setSending] = useState<boolean>();
     const [sent, setSent] = useState<boolean>();
 
     useEffect(() => {
+        dispatch(clean());
         getForm(id).then(form => {
             setForm(form);
         });
@@ -203,7 +216,7 @@ function FormPage(): JSX.Element {
         const questionRef = createRef<RenderedQuestion>();
         refMap.set(question.id, questionRef);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return <RenderedQuestion ref={questionRef} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} public_state={new Map()} key={index + Date.now()}/>;
+        return <ConnectedRenderedQuestion ref={questionRef} focus_ref={createRef<any>()} scroll_ref={createRef<HTMLDivElement>()} question={question} key={index + Date.now()}/>;
     });
 
     async function handleSubmit(event: SyntheticEvent) {
@@ -220,8 +233,8 @@ function FormPage(): JSX.Element {
             if (questionRef && questionRef.current) {
                 questionRef.current.validateField();
             }
-            // In case when field is invalid, add this to invalid fields list.
-            if (prop.props.public_state.get("valid") === false) {
+            // In case when field is invalid, add this to invalid fields list
+            if (valid.get(question.id) === false) {
                 invalidFieldIDs.push(i);
             }
         });
@@ -257,22 +270,27 @@ function FormPage(): JSX.Element {
 
                 case QuestionType.Checkbox: {
                     if (typeof options !== "string") {
+                        console.log(values);
+                        const checkbox_values = values.get(question.id);
+                        console.log(checkbox_values);
                         const keys: Map<string, string> = new Map();
                         options.forEach((val: string, index) => {
                             keys.set(val, `${("000" + index).slice(-4)}. ${val}`);
                         });
-                        const pairs: { [key: string]: boolean } = { };
-                        keys.forEach((val, key) => {
-                            pairs[key] = !!prop.props.public_state.get(val);
-                        });
-                        answers[question.id] = pairs;
+                        if (checkbox_values instanceof Map) {
+                            const pairs: { [key: string]: boolean } = { };
+                            keys.forEach((val, key) => {
+                                pairs[key] = !!checkbox_values.get(val);
+                            });
+                            answers[question.id] = pairs;
+                        }
                     }
                     break;
                 }
 
                 case QuestionType.Code:
                 default:
-                    answers[question.id] = prop.props.public_state.get("value");
+                    answers[question.id] = values.get(question.id);
             }
         });
 
diff --git a/src/store/form/actions.ts b/src/store/form/actions.ts
new file mode 100644
index 00000000..8b48a374
--- /dev/null
+++ b/src/store/form/actions.ts
@@ -0,0 +1,79 @@
+import { Question } from "../../api/question";
+
+// All Redux actions that can be triggered
+export enum FormAction {
+    SET_VALUE = "SET_VALUE",
+    SET_ERROR = "SET_ERROR",
+    SET_VALID = "SET_VALID",
+    CLEAN = "CLEAN"
+}
+
+// This is base for all actions
+export interface DefaultFormAction {
+    type: FormAction
+}
+
+// Return values for actions
+export interface SetValueAction extends DefaultFormAction {
+    type: FormAction.SET_VALUE,
+    payload: {
+        question: Question,
+        value: string | Map<string, boolean> | null
+    }
+}
+
+export interface SetErrorAction extends DefaultFormAction {
+    type: FormAction.SET_ERROR,
+    payload: {
+        question: Question,
+        error: string
+    }
+}
+
+export interface SetValidAction extends DefaultFormAction {
+    type: FormAction.SET_VALID,
+    payload: {
+        question: Question,
+        valid: boolean
+    }
+}
+
+export interface CleanAction extends DefaultFormAction {
+    type: FormAction.CLEAN
+}
+
+export type Action = SetValueAction | SetErrorAction | SetValidAction | CleanAction;
+
+export function setValue(question: Question, value: string | Map<string, boolean> | null): SetValueAction {
+    return {
+        type: FormAction.SET_VALUE,
+        payload: {
+            question: question,
+            value: value
+        }
+    };
+}
+
+export function setError(question: Question, error: string): SetErrorAction {
+    return {
+        type: FormAction.SET_ERROR,
+        payload: {
+            question: question,
+            error: error
+        }
+    };
+}
+
+export function setValid(question: Question, valid: boolean): SetValidAction {
+    return {
+        type: FormAction.SET_VALID,
+        payload: {
+            question: question,
+            valid: valid
+        }
+    };
+}
+
+export function clean(): CleanAction {
+    return { type: FormAction.CLEAN };
+}
diff --git a/src/store/form/reducers.ts b/src/store/form/reducers.ts
new file mode 100644
index 00000000..fcbb33a1
--- /dev/null
+++ b/src/store/form/reducers.ts
@@ -0,0 +1,29 @@
+import {Action, FormAction} from "./actions";
+import {FormState} from "./types";
+
+export const initialState: FormState = {
+    values: new Map(),
+    errors: new Map(),
+    valid: new Map()
+};
+
+export function formReducer(state = initialState, action: Action): FormState {
+    const new_state = state;
+    switch (action.type) {
+        case FormAction.SET_VALUE:
+            new_state.values.set(action.payload.question.id, action.payload.value);
+            break;
+
+        case FormAction.SET_ERROR:
+            new_state.errors.set(action.payload.question.id, action.payload.error);
+            break;
+
+        case FormAction.SET_VALID:
+            new_state.valid.set(action.payload.question.id, action.payload.valid);
+            break;
+
+        case FormAction.CLEAN:
+            return initialState;
+    }
+    return new_state;
+}
diff --git a/src/store/form/store.ts b/src/store/form/store.ts
new file mode 100644
index 00000000..4311a2f7
--- /dev/null
+++ b/src/store/form/store.ts
@@ -0,0 +1,4 @@
+import { createStore } from "redux";
+import { formReducer } from "./reducers";
+
+export const store = createStore(formReducer);
diff --git a/src/store/form/types.ts b/src/store/form/types.ts
new file mode 100644
index 00000000..1d3e5943
--- /dev/null
+++ b/src/store/form/types.ts
@@ -0,0 +1,5 @@
+export interface FormState {
+    values: Map<string, string | Map<string, boolean> | null>,
+    errors: Map<string, string>,
+    valid: Map<string, boolean>
+}

From 75273e5798eb3cc69fb23ab8547b9a438d35845e Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 21 Feb 2021 08:33:06 +0200
Subject: [PATCH 07/12] Implement basic hCaptcha

---
 src/pages/FormPage.tsx     | 52 +++++++++++++++++++++++++++++++++++---
 src/store/form/actions.ts  | 14 ++++++++--
 src/store/form/reducers.ts |  7 ++++-
 src/store/form/types.ts    |  3 ++-
 4 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index e9306e32..c06b33cd 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -2,10 +2,11 @@
 import { jsx, css } from "@emotion/react";
 import { Link } from "react-router-dom";
 
-import React, { SyntheticEvent, useEffect, useState, createRef } from "react";
+import React, {SyntheticEvent, useEffect, useState, createRef, useRef} from "react";
 import { useParams } from "react-router";
 import { PropagateLoader } from "react-spinners";
 import { useDispatch, useSelector } from "react-redux";
+import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 import HeaderBar from "../components/HeaderBar";
 import ConnectedRenderedQuestion, { RenderedQuestion } from "../components/Question";
@@ -18,7 +19,7 @@ import { unselectable }  from "../commonStyles";
 import { Question, QuestionType } from "../api/question";
 import ApiClient from "../api/client";
 import { FormState } from "../store/form/types";
-import { clean } from "../store/form/actions";
+import { clean, setCaptchaToken } from "../store/form/actions";
 
 interface PathParams {
     id: string
@@ -157,6 +158,14 @@ const closedHeaderStyles = css`
   }
 `;
 
+const captchaStyles = css`
+  text-align: center;
+  
+  @media (max-width: 850px) {
+    padding-bottom: 1.2rem;
+  }
+`;
+
 function FormPage(): JSX.Element {
     const { id } = useParams<PathParams>();
 
@@ -166,6 +175,9 @@ function FormPage(): JSX.Element {
     const values = useSelector<FormState, FormState["values"]>(
         state => state.values
     );
+    const captchaToken = useSelector<FormState, FormState["captchaToken"]>(
+        state => state.captchaToken
+    );
 
     const dispatch = useDispatch();
 
@@ -173,6 +185,9 @@ function FormPage(): JSX.Element {
     const [sending, setSending] = useState<boolean>();
     const [sent, setSent] = useState<boolean>();
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const captchaRef = useRef<any>();
+
     useEffect(() => {
         dispatch(clean());
         getForm(id).then(form => {
@@ -255,6 +270,14 @@ function FormPage(): JSX.Element {
             return;
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (!(FormFeatures.DisableAntispam in form!.features) && captchaToken === null) {
+            if (captchaRef && captchaRef.current) {
+                captchaRef.current.execute();
+            }
+            return;
+        }
+
         setSending(true);
 
         const answers: { [key: string]: unknown } = {};
@@ -294,7 +317,14 @@ function FormPage(): JSX.Element {
             }
         });
 
-        await ApiClient.post(`forms/submit/${id}`, {response: answers});
+        const data: { [key: string]: unknown } = {response: answers};
+
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (!(FormFeatures.DisableAntispam in form!.features)) {
+            data["captcha"] = captchaToken;
+        }
+
+        await ApiClient.post(`forms/submit/${id}`, data);
         setSending(false);
         setSent(true);
     }
@@ -306,6 +336,21 @@ function FormPage(): JSX.Element {
         closed_header = <div css={closedHeaderStyles}>This form is now closed. You will not be able to submit your response.</div>;
     }
 
+    let captcha = null;
+    if (!(FormFeatures.DisableAntispam in form.features)) {
+        captcha = (
+            <div css={captchaStyles}>
+                <HCaptcha
+                    sitekey={process.env.HCAPTCHA_SITEKEY ? process.env.HCAPTCHA_SITEKEY : ""}
+                    theme={"dark"}
+                    onVerify={(token) => dispatch(setCaptchaToken(token))}
+                    onExpire={() => dispatch(setCaptchaToken(null))}
+                    ref={captchaRef}
+                />
+            </div>
+        );
+    }
+
     return (
         <div>
             <HeaderBar title={form.name} description={form.description}/>
@@ -314,6 +359,7 @@ function FormPage(): JSX.Element {
                 <form id="form" onSubmit={handleSubmit} css={[formStyles, unselectable]}>
                     { closed_header }
                     { questions }
+                    { captcha }
                 </form>
                 <Navigation form_state={open}/>
             </div>
diff --git a/src/store/form/actions.ts b/src/store/form/actions.ts
index 8b48a374..dc437297 100644
--- a/src/store/form/actions.ts
+++ b/src/store/form/actions.ts
@@ -5,7 +5,8 @@ export enum FormAction {
     SET_VALUE = "SET_VALUE",
     SET_ERROR = "SET_ERROR",
     SET_VALID = "SET_VALID",
-    CLEAN = "CLEAN"
+    CLEAN = "CLEAN",
+    SET_CAPTCHA_TOKEN = "SET_CAPTCHA_TOKEN"
 }
 
 // This is base for all actions
@@ -42,7 +43,12 @@ export interface CleanAction extends DefaultFormAction {
     type: FormAction.CLEAN
 }
 
-export type Action = SetValueAction | SetErrorAction | SetValidAction | CleanAction;
+export interface SetCaptchaTokenAction extends DefaultFormAction {
+    type: FormAction.SET_CAPTCHA_TOKEN,
+    payload: string | null
+}
+
+export type Action = SetValueAction | SetErrorAction | SetValidAction | CleanAction | SetCaptchaTokenAction;
 
 export function setValue(question: Question, value: string | Map<string, boolean> | null): SetValueAction {
     return {
@@ -77,3 +83,7 @@ export function setValid(question: Question, valid: boolean): SetValidAction {
 export function clean(): CleanAction {
     return { type: FormAction.CLEAN };
 }
+
+export function setCaptchaToken(token: string | null): SetCaptchaTokenAction {
+    return { type: FormAction.SET_CAPTCHA_TOKEN, payload: token };
+}
diff --git a/src/store/form/reducers.ts b/src/store/form/reducers.ts
index fcbb33a1..21bd0473 100644
--- a/src/store/form/reducers.ts
+++ b/src/store/form/reducers.ts
@@ -4,7 +4,8 @@ import {FormState} from "./types";
 export const initialState: FormState = {
     values: new Map(),
     errors: new Map(),
-    valid: new Map()
+    valid: new Map(),
+    captchaToken: null
 };
 
 export function formReducer(state = initialState, action: Action): FormState {
@@ -24,6 +25,10 @@ export function formReducer(state = initialState, action: Action): FormState {
 
         case FormAction.CLEAN:
             return initialState;
+
+        case FormAction.SET_CAPTCHA_TOKEN:
+            new_state.captchaToken = action.payload;
+            break;
     }
     return new_state;
 }
diff --git a/src/store/form/types.ts b/src/store/form/types.ts
index 1d3e5943..3f8557ed 100644
--- a/src/store/form/types.ts
+++ b/src/store/form/types.ts
@@ -1,5 +1,6 @@
 export interface FormState {
     values: Map<string, string | Map<string, boolean> | null>,
     errors: Map<string, string>,
-    valid: Map<string, boolean>
+    valid: Map<string, boolean>,
+    captchaToken: string | null
 }

From 37b521cd3b3090427fb67fa4316b8aaa52388a1c Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 21 Feb 2021 11:27:24 +0200
Subject: [PATCH 08/12] Remove debug logging and use HCaptcha object for ref

---
 src/pages/FormPage.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index c06b33cd..865497c5 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -186,7 +186,7 @@ function FormPage(): JSX.Element {
     const [sent, setSent] = useState<boolean>();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const captchaRef = useRef<any>();
+    const captchaRef = useRef<HCaptcha>(null);
 
     useEffect(() => {
         dispatch(clean());
@@ -293,9 +293,7 @@ function FormPage(): JSX.Element {
 
                 case QuestionType.Checkbox: {
                     if (typeof options !== "string") {
-                        console.log(values);
                         const checkbox_values = values.get(question.id);
-                        console.log(checkbox_values);
                         const keys: Map<string, string> = new Map();
                         options.forEach((val: string, index) => {
                             keys.set(val, `${("000" + index).slice(-4)}. ${val}`);

From 55050d1c0048cebaa932efdb87cbd11b1554890e Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 21 Feb 2021 11:29:52 +0200
Subject: [PATCH 09/12] Add locking way to show value in ShortText

---
 src/components/InputTypes/ShortText.tsx | 14 ++++++++++++--
 src/components/InputTypes/index.tsx     |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index 8d99dc6f..e40612fa 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,20 +1,30 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
 import React, { ChangeEvent } from "react";
+import { useSelector } from "react-redux";
+
 import { textInputs, invalidStyles } from "../../commonStyles";
+import { Question } from "../../api/question";
+import { FormState } from "../../store/form/types";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
     onBlurHandler: () => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    focus_ref: React.RefObject<any>
+    focus_ref: React.RefObject<any>,
+    question: Question
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+    const value = values.get(props.question.id);
+
     return (
         <div css={invalidStyles}>
-            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
+            <input type="text" value={typeof value === "string" ? value : ""} css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
         </div>
     );
 }
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index e816c9c6..fd99ce80 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -56,7 +56,7 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref}/>;
+            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref} question={question}/>;
             break;
 
         case QuestionType.Range:

From 1b7113627d421f58885625851241d0be0a93f4cb Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Sun, 21 Feb 2021 16:27:39 +0200
Subject: [PATCH 10/12] Copy state instead changing original

---
 src/store/form/reducers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/form/reducers.ts b/src/store/form/reducers.ts
index 21bd0473..d7d3388d 100644
--- a/src/store/form/reducers.ts
+++ b/src/store/form/reducers.ts
@@ -9,7 +9,7 @@ export const initialState: FormState = {
 };
 
 export function formReducer(state = initialState, action: Action): FormState {
-    const new_state = state;
+    const new_state = {...state};
     switch (action.type) {
         case FormAction.SET_VALUE:
             new_state.values.set(action.payload.question.id, action.payload.value);

From 9f0bbee596b22e5dc12359164b8fd556e957ff09 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 22 Feb 2021 20:41:32 +0200
Subject: [PATCH 11/12] Change Redux store items from map to object

---
 src/components/InputTypes/Checkbox.tsx  |  2 +-
 src/components/InputTypes/ShortText.tsx |  2 +-
 src/components/InputTypes/index.tsx     |  5 +--
 src/components/Question.tsx             | 46 ++++++++++++-------------
 src/pages/FormPage.tsx                  | 10 +++---
 src/store/form/actions.ts               |  4 +--
 src/store/form/reducers.ts              | 42 +++++++++++++++-------
 src/store/form/types.ts                 |  6 ++--
 8 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/src/components/InputTypes/Checkbox.tsx b/src/components/InputTypes/Checkbox.tsx
index b3130c6b..38b8ee81 100644
--- a/src/components/InputTypes/Checkbox.tsx
+++ b/src/components/InputTypes/Checkbox.tsx
@@ -61,7 +61,7 @@ export default function Checkbox(props: CheckboxProps): JSX.Element {
     return (
         <label css={[generalStyles, activeStyles]}>
             <label className="unselected" css={multiSelectInput}>
-                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler} checked={!!values.get(`${("000" + props.index).slice(-4)}. ${props.option}`)}/>
+                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler} checked={!!values[`${("000" + props.index).slice(-4)}. ${props.option}`]}/>
                 <span className="checkmark"/>
             </label>
             {props.option}<br/>
diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index e40612fa..87fef84a 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -20,7 +20,7 @@ export default function ShortText(props: ShortTextProps): JSX.Element {
     const values = useSelector<FormState, FormState["values"]>(
         state => state.values
     );
-    const value = values.get(props.question.id);
+    const value = values[props.question.id];
 
     return (
         <div css={invalidStyles}>
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index fd99ce80..ff022598 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -26,10 +26,7 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
     // eslint-disable-next-line
     // @ts-ignore
     let options: string[] = question.data["options"];
-    let valid = true;
-    if (!props.valid.get(question.id)) {
-        valid = false;
-    }
+    const valid = props.valid[question.id];
 
     // Catch input types that require options but don't have any
     if ((options === undefined || typeof options !== "object") && require_options.includes(question.type)) {
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 74c4a712..7212a2de 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -26,13 +26,13 @@ export type QuestionProp = {
 }
 
 export type QuestionStateProp = {
-    values: Map<string, string | Map<string, boolean> | null>,
-    errors: Map<string, string>,
-    valid: Map<string, boolean>,
+    values: { [key: string]: string | { [subKey: string]: boolean } | null },
+    errors: { [key: string]: string },
+    valid: { [key: string]: boolean }
 };
 
 export type QuestionDispatchProp = {
-    setValue: (question: Question, value: string | Map<string, boolean> | null) => SetValueAction,
+    setValue: (question: Question, value: string | { [key: string]: boolean } | null) => SetValueAction,
     setValid: (question: Question, valid: boolean) => SetValidAction,
     setError: (question: Question, error: string) => SetErrorAction
 };
@@ -60,7 +60,7 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
 
     blurHandler(): void {
         if (this.props.question.required) {
-            if (!this.props.values.get(this.props.question.id)) {
+            if (!this.props.values[this.props.question.id]) {
                 this.props.setError(this.props.question, "Field must be filled.");
                 this.props.setValid(this.props.question, false);
             } else {
@@ -92,11 +92,11 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
         }
 
         if (value instanceof Array) {
-            let values = this.props.values.get(this.props.question.id);
-            if (!(values instanceof Map)) {
-                values = new Map<string, boolean>();
+            let values = this.props.values[this.props.question.id];
+            if (typeof values !== "object" || !values) {
+                values = {};
             }
-            values.set(value[0], value[1]);
+            values[value[0]] = value[1];
             this.props.setValue(this.props.question, values);
         } else {
             this.props.setValue(this.props.question, value);
@@ -121,8 +121,8 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
                     options.forEach((val, index) => {
                         keys.push(`${("000" + index).slice(-4)}. ${val}`);
                     });
-                    const values = this.props.values.get(this.props.question.id);
-                    if (values instanceof Map && keys.every(v => !values.get(v))) {
+                    const values = this.props.values[this.props.question.id];
+                    if (typeof values === "object" && values && keys.every(v => !values[v])) {
                         this.props.setError(this.props.question, "Field must be filled.");
                         this.props.setValid(this.props.question, false);
                     } else {
@@ -157,7 +157,7 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
         switch (this.props.question.type) {
             case QuestionType.TextArea:
             case QuestionType.ShortText:
-                if (this.props.values.get(this.props.question.id) === "") {
+                if (this.props.values[this.props.question.id] === "") {
                     invalid = true;
                 }
                 break;
@@ -165,7 +165,7 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
             case QuestionType.Select:
             case QuestionType.Range:
             case QuestionType.Radio:
-                if (!this.props.values.get(this.props.question.id)) {
+                if (!this.props.values[this.props.question.id]) {
                     invalid = true;
                 }
                 break;
@@ -176,8 +176,8 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
                     options.forEach((val, index) => {
                         keys.push(`${("000" + index).slice(-4)}. ${val}`);
                     });
-                    const values = this.props.values.get(this.props.question.id);
-                    if (values instanceof Map && keys.every(v => !values.get(v))) {
+                    const values = this.props.values[this.props.question.id];
+                    if (typeof values === "object" && values && keys.every(v => !values[v])) {
                         invalid = true;
                     }
                 }
@@ -196,16 +196,16 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
     componentDidMount(): void {
         // Initialize defaults for complex and nested fields
         const options: string | string[] = this.props.question.data["options"];
-        const values = this.props.values.get(this.props.question.id);
+        const values = this.props.values[this.props.question.id];
 
         switch (this.props.question.type) {
             case QuestionType.Checkbox:
-                if (typeof options === "string" || !(values instanceof Map)) {
+                if (typeof options === "string" || !(typeof values === "object") || !values) {
                     return;
                 }
 
                 options.forEach((option, index) => {
-                    values.set(`${("000" + index).slice(-4)}. ${option}`, false);
+                    values[`${("000" + index).slice(-4)}. ${option}`] = false;
                 });
                 this.props.setValue(this.props.question, values);
                 break;
@@ -266,13 +266,13 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
               }
             `;
             let valid = true;
-            if (!this.props.valid.get(this.props.question.id)) {
-                valid = false;
+            if (this.props.question.id in this.props.valid) {
+                valid = this.props.valid[this.props.question.id];
             }
-            const rawError = this.props.errors.get(this.props.question.id);
+
             let error = "";
-            if (typeof rawError === "string") {
-                error = rawError;
+            if (this.props.question.id in this.props.errors) {
+                error = this.props.errors[this.props.question.id];
             }
 
             return <div ref={this.props.scroll_ref}>
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 865497c5..e7d40cf5 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -249,7 +249,7 @@ function FormPage(): JSX.Element {
                 questionRef.current.validateField();
             }
             // In case when field is invalid, add this to invalid fields list
-            if (valid.get(question.id) === false) {
+            if (!valid[question.id]) {
                 invalidFieldIDs.push(i);
             }
         });
@@ -293,15 +293,15 @@ function FormPage(): JSX.Element {
 
                 case QuestionType.Checkbox: {
                     if (typeof options !== "string") {
-                        const checkbox_values = values.get(question.id);
+                        const checkbox_values = values[question.id];
                         const keys: Map<string, string> = new Map();
                         options.forEach((val: string, index) => {
                             keys.set(val, `${("000" + index).slice(-4)}. ${val}`);
                         });
-                        if (checkbox_values instanceof Map) {
+                        if (typeof checkbox_values === "object" && checkbox_values) {
                             const pairs: { [key: string]: boolean } = { };
                             keys.forEach((val, key) => {
-                                pairs[key] = !!checkbox_values.get(val);
+                                pairs[key] = checkbox_values[val];
                             });
                             answers[question.id] = pairs;
                         }
@@ -311,7 +311,7 @@ function FormPage(): JSX.Element {
 
                 case QuestionType.Code:
                 default:
-                    answers[question.id] = values.get(question.id);
+                    answers[question.id] = values[question.id];
             }
         });
 
diff --git a/src/store/form/actions.ts b/src/store/form/actions.ts
index dc437297..90a23b07 100644
--- a/src/store/form/actions.ts
+++ b/src/store/form/actions.ts
@@ -19,7 +19,7 @@ export interface SetValueAction extends DefaultFormAction {
     type: FormAction.SET_VALUE,
     payload: {
         question: Question,
-        value: string | Map<string, boolean> | null
+        value: string | { [key: string]: boolean } | null
     }
 }
 
@@ -50,7 +50,7 @@ export interface SetCaptchaTokenAction extends DefaultFormAction {
 
 export type Action = SetValueAction | SetErrorAction | SetValidAction | CleanAction | SetCaptchaTokenAction;
 
-export function setValue(question: Question, value: string | Map<string, boolean> | null): SetValueAction {
+export function setValue(question: Question, value: string | { [key: string]: boolean } | null): SetValueAction {
     return {
         type: FormAction.SET_VALUE,
         payload: {
diff --git a/src/store/form/reducers.ts b/src/store/form/reducers.ts
index d7d3388d..69730c36 100644
--- a/src/store/form/reducers.ts
+++ b/src/store/form/reducers.ts
@@ -2,33 +2,49 @@ import {Action, FormAction} from "./actions";
 import {FormState} from "./types";
 
 export const initialState: FormState = {
-    values: new Map(),
-    errors: new Map(),
-    valid: new Map(),
+    values: {},
+    errors: {},
+    valid: {},
     captchaToken: null
 };
 
 export function formReducer(state = initialState, action: Action): FormState {
-    const new_state = {...state};
     switch (action.type) {
         case FormAction.SET_VALUE:
-            new_state.values.set(action.payload.question.id, action.payload.value);
-            break;
+            return {
+                ...state,
+                values: {
+                    ...state.values,
+                    [action.payload.question.id]: action.payload.value
+                }
+            };
 
         case FormAction.SET_ERROR:
-            new_state.errors.set(action.payload.question.id, action.payload.error);
-            break;
+            return {
+                ...state,
+                errors: {
+                    ...state.errors,
+                    [action.payload.question.id]: action.payload.error
+                }
+            };
 
         case FormAction.SET_VALID:
-            new_state.valid.set(action.payload.question.id, action.payload.valid);
-            break;
+            return {
+                ...state,
+                valid: {
+                    ...state.valid,
+                    [action.payload.question.id]: action.payload.valid
+                }
+            };
 
         case FormAction.CLEAN:
             return initialState;
 
         case FormAction.SET_CAPTCHA_TOKEN:
-            new_state.captchaToken = action.payload;
-            break;
+            return {
+                ...state,
+                captchaToken: action.payload
+            };
     }
-    return new_state;
+    return {...state};
 }
diff --git a/src/store/form/types.ts b/src/store/form/types.ts
index 3f8557ed..280ef925 100644
--- a/src/store/form/types.ts
+++ b/src/store/form/types.ts
@@ -1,6 +1,6 @@
 export interface FormState {
-    values: Map<string, string | Map<string, boolean> | null>,
-    errors: Map<string, string>,
-    valid: Map<string, boolean>,
+    values: { [key: string]: string | { [subKey: string]: boolean } | null },
+    errors: { [key: string]: string },
+    valid: { [key: string]: boolean },
     captchaToken: string | null
 }

From dfbd9eb719bda4a672884bb7d42c353fde75a5e6 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Tue, 23 Feb 2021 09:46:27 +0200
Subject: [PATCH 12/12] Use values from Redux in fields

---
 src/components/InputTypes/Checkbox.tsx | 18 ++++++++---
 src/components/InputTypes/Radio.tsx    |  8 ++++-
 src/components/InputTypes/Range.tsx    |  8 ++++-
 src/components/InputTypes/Select.tsx   |  6 ++--
 src/components/InputTypes/TextArea.tsx | 12 +++++--
 src/components/InputTypes/index.tsx    |  8 ++---
 src/components/Question.tsx            | 43 ++++++++++++++++----------
 7 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/components/InputTypes/Checkbox.tsx b/src/components/InputTypes/Checkbox.tsx
index 38b8ee81..9c633f0b 100644
--- a/src/components/InputTypes/Checkbox.tsx
+++ b/src/components/InputTypes/Checkbox.tsx
@@ -3,13 +3,15 @@ import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import colors from "../../colors";
 import { multiSelectInput, hiddenInput } from "../../commonStyles";
-import {useSelector} from "react-redux";
-import {FormState} from "../../store/form/types";
+import { useSelector } from "react-redux";
+import { FormState } from "../../store/form/types";
+import { Question } from "../../api/question";
 
 interface CheckboxProps {
     index: number,
     option: string,
-    handler: (event: ChangeEvent<HTMLInputElement>) => void
+    handler: (event: ChangeEvent<HTMLInputElement>) => void,
+    question: Question
 }
 
 const generalStyles = css`
@@ -58,10 +60,16 @@ export default function Checkbox(props: CheckboxProps): JSX.Element {
     const values = useSelector<FormState, FormState["values"]>(
         state => state.values
     );
+    let value = values[props.question.id];
+    if (typeof value !== "object" || !value) {
+        value = {};
+    }
+    const checked = value[`${("000" + props.index).slice(-4)}. ${props.option}`];
+
     return (
         <label css={[generalStyles, activeStyles]}>
-            <label className="unselected" css={multiSelectInput}>
-                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler} checked={!!values[`${("000" + props.index).slice(-4)}. ${props.option}`]}/>
+            <label className={checked ? "selected" : "unselected"} css={multiSelectInput}>
+                <input type="checkbox" value={props.option} css={hiddenInput} name={`${("000" + props.index).slice(-4)}. ${props.option}`} onChange={props.handler} checked={checked}/>
                 <span className="checkmark"/>
             </label>
             {props.option}<br/>
diff --git a/src/components/InputTypes/Radio.tsx b/src/components/InputTypes/Radio.tsx
index a8579646..68c9519a 100644
--- a/src/components/InputTypes/Radio.tsx
+++ b/src/components/InputTypes/Radio.tsx
@@ -3,6 +3,8 @@ import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import colors from "../../colors";
 import { multiSelectInput, hiddenInput } from "../../commonStyles";
+import { useSelector } from "react-redux";
+import { FormState } from "../../store/form/types";
 
 interface RadioProps {
     option: string,
@@ -30,9 +32,13 @@ const styles = css`
 `;
 
 export default function Radio(props: RadioProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+    const value = values[props.question_id];
     return (
         <label css={styles}>
-            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput} onBlur={props.onBlurHandler}/>
+            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput} onBlur={props.onBlurHandler} checked={value === props.option}/>
             <div css={multiSelectInput}/>
             {props.option}<br/>
         </label>
diff --git a/src/components/InputTypes/Range.tsx b/src/components/InputTypes/Range.tsx
index 23cb3f6a..8d37b8aa 100644
--- a/src/components/InputTypes/Range.tsx
+++ b/src/components/InputTypes/Range.tsx
@@ -3,6 +3,8 @@ import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import colors from "../../colors";
 import { hiddenInput, multiSelectInput } from "../../commonStyles";
+import { useSelector } from "react-redux";
+import { FormState } from "../../store/form/types";
 
 interface RangeProps {
     question_id: string,
@@ -97,11 +99,15 @@ const sliderStyles = css`
 `;
 
 export default function Range(props: RangeProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+    const value = values[props.question_id];
     const range = props.options.map((option, index) => {
         return (
             <label css={[selectorStyles, css`width: 1rem`]} key={index}>
                 <span css={optionStyles}>{option}</span>
-                <input type="radio" name={props.question_id} css={hiddenInput} onChange={props.handler} onBlur={props.onBlurHandler}/>
+                <input type="radio" name={props.question_id} css={hiddenInput} onChange={props.handler} onBlur={props.onBlurHandler} checked={value === option}/>
                 <div css={multiSelectInput}/>
             </label>
         );
diff --git a/src/components/InputTypes/Select.tsx b/src/components/InputTypes/Select.tsx
index c0f54251..82e09751 100644
--- a/src/components/InputTypes/Select.tsx
+++ b/src/components/InputTypes/Select.tsx
@@ -16,11 +16,11 @@ interface SelectProps {
 }
 
 interface SelectStateProps {
-    values: Map<string, string | Map<string, boolean> | null>
+    values: { [key: string]: string | { [subKey: string]: boolean; } | null; }
 }
 
 interface SelectDispatchProps {
-    setValue: (question: Question, value: string | Map<string, boolean> | null) => SetValueAction
+    setValue: (question: Question, value: string | { [key: string]: boolean } | null) => SetValueAction
 }
 
 const containerStyles = css`
@@ -191,7 +191,7 @@ class Select extends React.Component<SelectProps & SelectStateProps & SelectDisp
     }
 
     focusOption(): void {
-        if (!this.props.values.get(this.props.question.id)) {
+        if (!(this.props.question.id in this.props.values) || !this.props.values[this.props.question.id]) {
             this.props.setValue(this.props.question, "temporary");
             this.props.onBlurHandler();
             this.props.setValue(this.props.question, null);
diff --git a/src/components/InputTypes/TextArea.tsx b/src/components/InputTypes/TextArea.tsx
index 08424fb6..a32094c6 100644
--- a/src/components/InputTypes/TextArea.tsx
+++ b/src/components/InputTypes/TextArea.tsx
@@ -2,13 +2,17 @@
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
 import { invalidStyles, textInputs } from "../../commonStyles";
+import { useSelector } from "react-redux";
+import { FormState } from "../../store/form/types";
+import { Question } from "../../api/question";
 
 interface TextAreaProps {
     handler: (event: ChangeEvent<HTMLTextAreaElement>) => void,
     onBlurHandler: () => void,
     valid: boolean,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    focus_ref: React.RefObject<any>
+    focus_ref: React.RefObject<any>,
+    question: Question
 }
 
 const styles = css`
@@ -21,9 +25,13 @@ const styles = css`
 `;
 
 export default function TextArea(props: TextAreaProps): JSX.Element {
+    const values = useSelector<FormState, FormState["values"]>(
+        state => state.values
+    );
+    const value = values[props.question.id];
     return (
         <div css={invalidStyles}>
-            <textarea css={[textInputs, styles]} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
+            <textarea css={[textInputs, styles]} value={typeof value === "string" ? value : ""} placeholder="Enter Text..." onChange={props.handler} onBlur={props.onBlurHandler} className={!props.valid ? "invalid-box" : ""} ref={props.focus_ref}/>
         </div>
     );
 }
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index ff022598..97fd7909 100644
--- a/src/components/InputTypes/index.tsx
+++ b/src/components/InputTypes/index.tsx
@@ -37,11 +37,11 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
     /* eslint-disable react/react-in-jsx-scope */
     switch (question.type) {
         case QuestionType.TextArea:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
+            result = <TextArea question={question} handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
             break;
 
         case QuestionType.Checkbox:
-            result = options.map((option, index) => <Checkbox index={index} option={option} handler={handler} key={index}/>);
+            result = options.map((option, index) => <Checkbox question={question} index={index} option={option} handler={handler} key={index}/>);
             break;
 
         case QuestionType.Radio:
@@ -53,7 +53,7 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
             break;
 
         case QuestionType.ShortText:
-            result = <ShortText handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref} question={question}/>;
+            result = <ShortText key={props.question.id} handler={handler} onBlurHandler={onBlurHandler} valid={valid} focus_ref={focus_ref} question={question}/>;
             break;
 
         case QuestionType.Range:
@@ -66,7 +66,7 @@ export default function create_input(props: QuestionProp & QuestionStateProp & Q
             break;
 
         default:
-            result = <TextArea handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
+            result = <TextArea question={question} handler={handler} valid={valid} onBlurHandler={onBlurHandler} focus_ref={focus_ref}/>;
     }
     /* eslint-enable react/react-in-jsx-scope */
 
diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 7212a2de..74ee86f2 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -1,14 +1,14 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent } from "react";
-import { connect } from "react-redux";
+import React, {ChangeEvent} from "react";
+import {connect} from "react-redux";
 
-import { Question, QuestionType } from "../api/question";
-import { selectable } from "../commonStyles";
+import {Question, QuestionType} from "../api/question";
+import {selectable} from "../commonStyles";
 import create_input from "./InputTypes";
 import ErrorMessage from "./ErrorMessage";
-import { FormState } from "../store/form/types";
-import { setError, SetErrorAction, setValid, SetValidAction, setValue, SetValueAction } from "../store/form/actions";
+import {FormState} from "../store/form/types";
+import {setError, SetErrorAction, setValid, SetValidAction, setValue, SetValueAction} from "../store/form/actions";
 
 const skip_normal_state: Array<QuestionType> = [
     QuestionType.Radio,
@@ -47,10 +47,14 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
         }
         this.blurHandler = this.blurHandler.bind(this);
 
-        props.setValid(props.question, true);
-        props.setError(props.question, "");
+        if (!(props.question.id in props.valid)) {
+            props.setValid(props.question, true);
+        }
+        if (!(props.question.id in props.errors)) {
+            props.setError(props.question, "");
+        }
 
-        if (!skip_normal_state.includes(props.question.type)) {
+        if (!skip_normal_state.includes(props.question.type) && !(props.question.id in props.values)) {
             props.setValue(props.question, "");
         }
     }
@@ -102,12 +106,6 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
             this.props.setValue(this.props.question, value);
         }
 
-        // Toggle checkbox class
-        if (event.target.type == "checkbox" && event.target.parentElement !== null) {
-            event.target.parentElement.classList.toggle("unselected");
-            event.target.parentElement.classList.toggle("selected");
-        }
-
         const options: string | string[] = this.props.question.data["options"];
         switch (event.target.type) {
             case "text":
@@ -194,17 +192,28 @@ export class RenderedQuestion extends React.Component<QuestionProp & QuestionSta
     }
 
     componentDidMount(): void {
+        // We don't want to set if we already have them in values.
+        if (this.props.question.id in this.props.values) {
+            return;
+        }
+
         // Initialize defaults for complex and nested fields
         const options: string | string[] = this.props.question.data["options"];
-        const values = this.props.values[this.props.question.id];
+        let values = this.props.values[this.props.question.id];
 
         switch (this.props.question.type) {
             case QuestionType.Checkbox:
-                if (typeof options === "string" || !(typeof values === "object") || !values) {
+                if (typeof options === "string") {
                     return;
                 }
 
+                if (!(typeof values === "object") || !values) {
+                    values = {};
+                }
+
                 options.forEach((option, index) => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
                     values[`${("000" + index).slice(-4)}. ${option}`] = false;
                 });
                 this.props.setValue(this.props.question, values);