[#251] add dropdown box (#346)

* add dropdown box for gender selection

forgettable-frontend/src/components/InputSelector/InputSelector.js

@@ -0,0 +1,53 @@
+import React, {useEffect} from 'react';
+import {useState} from 'react';
+import styles from './InputSelector.module.css';
+
+/**
+ * React input selector component used for entry of data.
+ *
+ * The styling of the component is based on that of the "primary" InputField component.
+ *
+ * @author Bill Song
+ */
+
+export default function InputField({inputLabel, placeholder, inputID,
+  dataType, inputStateValue, autoFocusState, requiredState, options}) {
+  /**
+     * Retrieve state of input component to be rendered in a responsive manner.
+     */
+  const [inputState, setInput] = useState(inputStateValue);
+
+  useEffect(() => {
+    setInput(inputStateValue);
+  }, [inputStateValue]);
+
+  /**
+   *  process options into DOM elements
+   */
+
+  const optionElements = options.map((option) => {
+    return <option key={option} value={option}>{option}</option>;
+  });
+
+  /**
+     * Types allowed for innput component styling.
+     */
+
+  return (
+    <div>
+      <label className={styles.inputLabelPrimary}>{inputLabel}
+        <select className={styles.inputFieldPrimary}
+          type={dataType}
+          name={inputID}
+          placeholder = {placeholder}
+          value={inputState}
+          onChange={(event) => setInput(event.target.value)}
+          autoFocus={autoFocusState}
+          required={requiredState}
+        >
+          {optionElements}
+        </select>
+      </label>
+    </div>
+  );
+}

forgettable-frontend/src/components/InputSelector/InputSelector.module.css

@@ -0,0 +1,24 @@
+@import '../../colours.css';
+
+.inputLabelPrimary {
+    font-size: var(--text-medium);
+    font-weight: var(--font-medium);
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+}
+
+.inputFieldPrimary{
+    font-size: var(--text-normal);
+    background-color: var(--bkgd);
+    color: var(--txt2);
+    width: 370px;
+    height: 57px;
+    border-radius: var(--radius-btn);
+    border: 1.5px solid var(--bord);
+    box-shadow: none;
+    margin-top: 8px;
+    padding: 10px;
+    padding-left: 18px;
+    font-family: 'Poppins', sans-serif;
+}

forgettable-frontend/src/components/InputSelector/__tests__/InputSelector.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import InputSelector from '../InputSelector';
+import {render, cleanup} from '@testing-library/react';
+import testRenderer from 'react-test-renderer';
+
+afterEach(cleanup);
+
+it('renders primary input field correctly', () => {
+  const primaryInput = testRenderer.create(
+      <InputSelector inputLabel={'SELECTOR'}
+        placeholder={'SELECTOR TEXT'}
+        dataType={'text'}
+        inputID={'InputSelector'}
+        options={['option1', 'option2', 'option3']} />).toJSON();
+  expect(primaryInput).toMatchSnapshot();
+});
+
+

forgettable-frontend/src/components/InputSelector/__tests__/__snapshots__/InputSelector.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders primary input field correctly 1`] = `
+<div>
+  <label
+    className="inputLabelPrimary"
+  >
+    SELECTOR
+    <select
+      className="inputFieldPrimary"
+      name="InputSelector"
+      onChange={[Function]}
+      placeholder="SELECTOR TEXT"
+      type="text"
+    >
+      <option
+        value="option1"
+      >
+        option1
+      </option>
+      <option
+        value="option2"
+      >
+        option2
+      </option>
+      <option
+        value="option3"
+      >
+        option3
+      </option>
+    </select>
+  </label>
+</div>
+`;

forgettable-frontend/src/pages/edit/EditPerson.js

@@ -9,6 +9,7 @@ import imageToBase64 from 'image-to-base64/browser';
 import CustomModal from '../../components/CustomModal/CustomModal';
 import * as apiCalls from '../../services/index';
 import InputField from '../../components/InputField/InputField';
+import InputSelector from '../../components/InputSelector/InputSelector';
 import {convertSocialMedia} from '../../functions/convertSocialMediaFormat';
 import {getInputDateFormatString, getLongDateStringWithSlashes} from '../../functions/dateFormatter';
 import {ToastContainer, toast} from 'react-toastify';
@@ -18,6 +19,8 @@ import Loading from '../Loading/Loading';
 
 const MAX_IMAGE_SIZE = 16000000;
 
+const GENDER_OPTIONS = ['Male', 'Female', 'Prefer not to say', 'Unlisted'];
+
 export default function EditPerson() {
   const location = useLocation();
 
@@ -195,7 +198,6 @@ export default function EditPerson() {
     }
   };
 
-
   return ( loading ? <Loading/> :
     <div className={classes.editPerson}>
       <div className={classes.title}>{create ? 'Create' : 'Edit'} Person </div>
@@ -217,7 +219,7 @@ export default function EditPerson() {
         <div className={classes.row}>
           <div className={classes.column}>
             <InputField inputID='first_name' placeholder={'E.g. John'} inputLabel='First Name' inputType='primary' inputStateValue={personData.first_name} autoFocusState={true} requiredState/>
-            <InputField inputID='gender' placeholder={'E.g. Female'} inputLabel='Gender' inputType='primary' inputStateValue={personData.gender}/>
+            <InputSelector inputID='gender' placeholder={'E.g. Female'} inputLabel='Gender' inputStateValue={personData.gender} options={GENDER_OPTIONS}/>
             <InputField inputID='first_met' inputLabel='Date First Met' inputType='primary' dataType='date' inputStateValue={personData.first_met}/>
             <InputField inputID='interests' placeholder={'E.g. music, photography, art'} inputLabel='Interests' inputType='primary' inputStateValue={personData.interests.toString()}/>
             <InputField inputID='labels' placeholder={'E.g. student, tennis'} inputLabel='Labels' inputType='primary' inputStateValue={personData.labels.toString()}/>