From a61e454c838af99dba66e995077771678bf16f4d Mon Sep 17 00:00:00 2001
From: WillDotWhite <will.white01@bbc.co.uk>
Date: Tue, 23 Jan 2024 10:02:20 +0000
Subject: [PATCH] Add team size field

---
 .../home/components/common/CustomSelect.tsx   |  2 +-
 ui/src/pages/mypost/MyPost.tsx                | 29 ++++++++++++++++++-
 ui/vite.config.ts                             |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/home/components/common/CustomSelect.tsx b/ui/src/pages/home/components/common/CustomSelect.tsx
index 5cf7eb0..c9bedf2 100644
--- a/ui/src/pages/home/components/common/CustomSelect.tsx
+++ b/ui/src/pages/home/components/common/CustomSelect.tsx
@@ -14,7 +14,7 @@ export type ValueType<OptionType> = OptionType | OptionsType<OptionType> | null
 
 export interface CustomSelectOption {
     label: ReactNode;
-    value: string | undefined;
+    value: string | number | undefined;
 }
 
 interface CustomSelectProps extends FieldProps {
diff --git a/ui/src/pages/mypost/MyPost.tsx b/ui/src/pages/mypost/MyPost.tsx
index fe14809..5bbfbe3 100644
--- a/ui/src/pages/mypost/MyPost.tsx
+++ b/ui/src/pages/mypost/MyPost.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {Button} from "../../common/components/Button.tsx";
 import {Field, Form, FormikProps} from "formik";
 import {skills} from "../../common/models/skills.tsx";
-import CustomSelect from "../home/components/common/CustomSelect.tsx";
+import CustomSelect, {CustomSelectOption} from "../home/components/common/CustomSelect.tsx";
 import {languages} from "../../common/models/languages.ts";
 import {tools} from "../../common/models/engines.tsx";
 import {timezones} from "../../common/models/timezones.ts";
@@ -42,6 +42,7 @@ export const MyPost: React.FC<{
 
             <div className="c-form-block bg-black">
                 <FieldTimezones />
+                <FieldTeamSize />
             </div>
 
             <Button
@@ -158,4 +159,30 @@ const FieldTimezones: React.FC = () => {
             </span>
         </div>
     )
+}
+
+const FieldTeamSize: React.FC = () => {
+
+    const teamSizes: CustomSelectOption[] = []
+    for (let i = 1; i <= 20; i++) {
+        teamSizes.push({label: i, value: i});
+    }
+
+    return (
+        <div>
+            <label htmlFor="size">How many people are in your team/group?</label>
+            <Field
+                name="size"
+                className="c-dropdown form-block__field"
+                options={teamSizes}
+                component={CustomSelect}
+                placeholder={"Select option(s)"}
+                isMulti={false}
+            />
+
+            <span className="text-xs">
+                (Including you!)
+            </span>
+        </div>
+    )
 }
\ No newline at end of file
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index f4611ed..0f4a73b 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
-    envDir: "../",
+    // envDir: "../", // Uncomment this if you're running the UI outside of Dockerw
     server: {
       host: "0.0.0.0",
       port: 3000,