Updates:

- Adds formik and yup to project
- Adds harassment form page and component
- Made some spelling corrections in placeholder text
- Moves proceedings from official documents page to archive page'

components/HarassmentForm.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { Form, Formik, FormikHelpers } from "formik";
+import { TextField, Button, Switch, FormControlLabel } from "@mui/material";
+import * as Yup from "yup";
+import styles from "@/styles/harassmentForm.module.css";
+
+interface Values {
+  incident: string;
+  partiesInvolved: string;
+  wantsAnswer: boolean;
+  name: string;
+  email: string;
+}
+
+const validationSchema = Yup.object({
+  email: Yup.string()
+    .email("Invalid email address")
+    .when("wantsAnswer", {
+      is: true,
+      then: Yup.string().required("Email is required"),
+    }),
+  name: Yup.string().when("wantsAnswer", {
+    is: true,
+    then: Yup.string().required("Name is required"),
+  }),
+});
+
+const HarassmentForm = () => {
+  const [wantsAnswer, setWantsAnswer] = useState(false);
+
+  return (
+    <Formik
+      initialValues={{
+        incident: "",
+        partiesInvolved: "",
+        wantsAnswer: false,
+        name: "",
+        email: "",
+      }}
+      validationSchema={validationSchema}
+      onSubmit={(values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 500);
+      }}
+    >
+      {({ values, handleChange, handleBlur, touched, errors }) => (
+        <Form className={styles.form}>
+          <TextField
+            fullWidth
+            id="incident"
+            name="incident"
+            label="Tell about what happened in your own words"
+            multiline
+            rows={4}
+            variant="outlined"
+            value={values.incident}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={touched.incident && Boolean(errors.incident)}
+            helperText={touched.incident && errors.incident}
+            className={styles.inputField}
+          />
+
+          <TextField
+            fullWidth
+            id="partiesInvolved"
+            name="partiesInvolved"
+            label="Were there other people there?"
+            multiline
+            rows={4}
+            variant="outlined"
+            value={values.partiesInvolved}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={touched.partiesInvolved && Boolean(errors.partiesInvolved)}
+            helperText={touched.partiesInvolved && errors.partiesInvolved}
+            className={styles.inputField}
+          />
+
+          <FormControlLabel
+            control={
+              <Switch
+                checked={wantsAnswer}
+                onChange={() => setWantsAnswer(!wantsAnswer)}
+                name="wantsAnswer"
+                color="success"
+              />
+            }
+            label="I want to be answered"
+            className={styles.switchLabel}
+          />
+
+          {wantsAnswer && (
+            <>
+              <TextField
+                fullWidth
+                id="name"
+                name="name"
+                label="Your Name"
+                variant="outlined"
+                value={values.name}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                error={touched.name && Boolean(errors.name)}
+                helperText={touched.name && errors.name}
+                className={styles.inputField}
+              />
+
+              <TextField
+                fullWidth
+                id="email"
+                name="email"
+                label="Email"
+                variant="outlined"
+                value={values.email}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                error={touched.email && Boolean(errors.email)}
+                helperText={touched.email && errors.email}
+                className={styles.inputField}
+              />
+            </>
+          )}
+
+          <Button type="submit" className="button darkBlue">
+            Submit
+          </Button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default HarassmentForm;

hooks/translations.json

@@ -55,6 +55,11 @@
     "en": "For Members",
     "sv": "För Medlemmar"
   },
+  "nav:harassmentForm": {
+    "fi": "Härintälomake\t",
+    "en": "Harrassment Form\t",
+    "sv": "Trakasserianmälan\t"
+  },
   "nav:home": { "fi": "Etusivu", "en": "Home", "sv": "Framsida" },
   "nav:karhunkierros": {
     "fi": "Karhunkierros Lehti",

package.json

@@ -31,11 +31,13 @@
     "dotenv": "^16.4.5",
     "embla-carousel": "^8.1.6",
     "embla-carousel-react": "^8.1.6",
+    "formik": "^2.4.6",
     "next": "14.2.4",
     "prop-types": "^15.8.1",
     "react": "^18",
     "react-dom": "^18",
-    "tsx": "^4.17.0"
+    "tsx": "^4.17.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.0",