Add registration form v1.

src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css';
 import { Header } from "./components/header";
-import { Registration } from './components/registration';
+import { RegForm } from './components/regForm';
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 export default function App() {
@@ -12,7 +12,7 @@ export default function App() {
             <Header />
           </div>
         </Route>
-        <Route path="/registration/:id" component={Registration} />
+        <Route path="/registration/:id" component={RegForm} />
       </Switch>
     </Router>
   );

src/components/regForm.tsx

@@ -0,0 +1,113 @@
+import { Button, Checkbox, Col, Form, Input, Row, Select, Space } from 'antd';
+import { useParams } from 'react-router';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+import "./../styles/registration.css"
+import { addVisitor } from '../api';
+import { capFirstLetter } from './utils';
+import { Visitor } from '../model/visitor';
+
+const { Option } = Select;
+
+const { TextArea } = Input;
+
+interface ParamTypes {
+    id: string;
+}
+
+interface FormValues {
+    visitors: Visitor[];
+}
+
+const preferences = ["vegan", "vegetarian", "everything goes"].map(preference => {
+    return <Option key={preference} value={preference}>{capFirstLetter(preference)}</Option>
+});
+
+const allergies = ["lactose", "dairy", "gluten", "wheat"].map(allergy => {
+    return <Option key={allergy} value={allergy}>{capFirstLetter(allergy)}</Option>
+});
+
+export const RegForm = () => {
+    const { id } = useParams<ParamTypes>();
+
+    const onFinish = (values: FormValues) => {
+        values.visitors.map(visitor => {
+            addVisitor({
+                ...visitor,
+                allergies: visitor.allergies ? visitor.allergies.toString() : "",
+                services: visitor.services ? visitor.services.toString() : "",
+                preferences: visitor.preferences ?? "",
+                invitationId: visitor.invitationId = atob(id),
+            });
+        });
+    }
+
+    const [form] = Form.useForm();
+
+    return (
+        <Form form={form} name="registration" onFinish={onFinish} autoComplete="off">
+            <Form.List name="visitors">
+                {(fields, { add, remove }) => (
+                    <>
+                        {
+                            fields.map(field => (
+                                <div className="visitorContainer" key={field.key}>
+                                    <div className="nameBar">
+                                        <Form.Item
+                                            label="Name"
+                                            name={[field.name, 'name']}
+                                            fieldKey={[field.fieldKey, 'name']}
+                                            rules={[{ required: true, message: 'Missing name' }]}
+                                        >
+                                            <Input placeholder="Full or nickname" />
+                                        </Form.Item>
+                                        <MinusCircleOutlined onClick={() => remove(field.name)} className="deleteButton" />
+                                    </div>
+                                    <Form.Item name={[field.name, "allergies"]} label="Allergies"
+                                        fieldKey={[field.fieldKey, 'allergies']}>
+                                        <Select mode="tags" placeholder="Lactose, wheat...">
+                                            {allergies}
+                                        </Select>
+                                    </Form.Item>
+                                    <Form.Item name={[field.name, "preferences"]} label="Preferences"
+                                        fieldKey={[field.fieldKey, 'preferences']}>
+                                        <Select placeholder="Vegan...">
+                                            {preferences}
+                                        </Select>
+                                    </Form.Item>
+                                    <Form.Item
+                                        name={[field.name, "services"]} label="Do you need?"
+                                        fieldKey={[field.fieldKey, 'services']}>
+                                        <Checkbox.Group>
+                                            <Row>
+                                                <Col>
+                                                    <Checkbox value="ride">
+                                                        Ride
+                                                    </Checkbox>
+                                                </Col>
+                                                <Col>
+                                                    <Checkbox value="accomodation">
+                                                        Accomodation
+                                                    </Checkbox>
+                                                </Col>
+                                            </Row>
+                                        </Checkbox.Group>
+                                    </Form.Item>
+                                </div>
+                            ))}
+                        <Form.Item>
+                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                                Add visitor
+                            </Button>
+                        </Form.Item>
+                    </>
+                )}
+            </Form.List>
+            <Form.Item>
+                <Button type="primary" htmlType="submit">
+                    Submit
+                </Button>
+            </Form.Item>
+        </Form>
+    );
+};

src/components/utils.ts

@@ -0,0 +1,3 @@
+export const capFirstLetter = (string: string) => {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

src/model/visitor.ts

@@ -1,10 +1,7 @@
 export type Visitor = {
     name: string;
-    lactoseFree: boolean;
+    invitationId: string;
-    dairyFree: boolean;
+    allergies: any;
-    wheatFree: boolean;
+    services: any;
-    vegan: boolean;
+    preferences: string;
-    vegatarian: boolean;
-    accomodation: boolean;
-    ride: boolean;
 }

src/styles/registration.css

@@ -0,0 +1,18 @@
+form#registration {
+  max-width: 24.5em;
+  padding: 1em;
+}
+
+.nameBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.visitorContainer {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  padding: 1em;
+  border-radius: 5px;
+  background-color: rgb(235, 235, 235);
+}