WIP - Frontend Pages

.eslintrc.json

@@ -1,3 +1,38 @@
 {
-  "extends": "next/core-web-vitals"
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "linebreak-style": ["error", "unix"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "no-console": "off",
+        "no-var": 1,
+        "no-case-declarations": 0,
+        "semi-spacing": ["error", {"before": false, "after": true}],
+        "indent": ["error", 4],
+        "no-lonely-if": "error",
+        "no-multiple-empty-lines": ["error", { "max": 1 }],
+        "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
+        "require-await": "error",
+        "prefer-arrow-callback": "error"
+    }
 }

components/forms/formDropDown.tsx

@@ -1,27 +1,27 @@
-import { FieldProps } from "formik";
-import { FunctionComponent } from "react";
+import { FieldProps } from 'formik';
+import { FunctionComponent } from 'react';
 
 export interface FormDropDownProps {
   id: string;
   options: {value: string, label: string}[];
 }
 
 const FormDropDown: FunctionComponent<FormDropDownProps & FieldProps> = ({id, options, field}) => {
-  const optionElements = options.map(option => {
+    const optionElements = options.map(option => {
+        return (
+            <option key={option.value} value={option.value}> {option.label} </option>
+        );
+    });
     return (
-      <option key={option.value} value={option.value}> {option.label} </option>
+        <div className="relative">
+            <select {...field} className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id={id}>
+                {optionElements}
+            </select>
+            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
+            </div>
+        </div>
     );
-  });
-  return (
-    <div className="relative">
-      <select {...field} className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id={id}>
-        {optionElements}
-      </select>
-      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-        <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
-      </div>
-    </div>
-  );
-}
+};
 
 export default FormDropDown;

components/forms/formFragments/homeAddress/index.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { Field } from 'formik';
+import { Grid, MenuItem, Typography } from '@mui/material';
+import {TextField, Select} from 'formik-mui';
+import { getStatesForDropdown } from '../../../../utils/frontend/commonDropDowns';
+
+const states = getStatesForDropdown();
+
+// Using an array allows us to easily change form inputs.
+const HomeAddressFormInputs = [
+    {
+        name: 'homeStreet',
+        fieldType: 'Field',
+        label: 'Home Street',
+        placeholder: '30 Jillson Circle',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'homeApartment',
+        fieldType: 'Field',
+        label: 'Home Apartment',
+        placeholder: 'Apartment 303',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'homeCity',
+        fieldType: 'Field',
+        label: 'Home City',
+        placeholder: 'Milford',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'homeState',
+        fieldType: 'Select',
+        label: 'State',
+        data: states,
+        placeholder: 'Massachusetts',
+        component: Select,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            }
+    },
+    {
+        name: 'homeZip',
+        fieldType: 'Field',
+        label: 'Home Zip',
+        placeholder: '01757',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    }
+];
+
+export default function HomeAddressForm() {
+    return (
+        <React.Fragment>
+            <Typography mb={2} variant="h6" gutterBottom>
+                Home Address
+            </Typography>
+            <Grid container spacing={3}>
+                {HomeAddressFormInputs.map((input) => {
+                    return (
+                        <Grid item xs={input.sizing.xs} sm={input.sizing.sm} key={input.name}>
+                            {/* If the input is a Field, we can use the Field component.
+                             If the input is a Select, we need to use the Select component.
+                             We can use the component prop to pass in the correct component. */}
+                            {input.fieldType === 'Field' ?
+                                <Field
+                                    fullWidth
+                                    className='field'
+                                    component={input.component}
+                                    name={input.name}
+                                    type="text"
+                                    label={input.label}
+                                    placeholder={input.placeholder}
+                                /> :
+                                <Field
+                                    fullWidth
+                                    className='field'
+                                    name={input.name}
+                                    component={input.component}
+                                    type="text"
+                                    label={input.label}
+                                    placeholder={input.placeholder}
+                                >
+                                    {input.data ?
+                                        input.data.map((option) => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        )) :
+                                        null
+                                    }
+                                </Field>
+                            }
+                        </Grid>
+                    );
+                })}
+            </Grid>
+        </React.Fragment>
+    );
+}

components/forms/formFragments/localAddress/index.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Field } from 'formik';
+import { Grid, MenuItem, Typography } from '@mui/material';
+import {TextField, Select} from 'formik-mui';
+import { getStatesForDropdown } from '../../../../utils/frontend/commonDropDowns';
+
+const states = getStatesForDropdown();
+
+const LocalAddressFormInputs = [
+    {
+        name: 'localStreet',
+        fieldType: 'Field',
+        label: 'Local Street',
+        placeholder: '1999 Burdett Ave',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'localApartment',
+        fieldType: 'Field',
+        label: 'Local Apartment',
+        placeholder: 'Cary Hall 215',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'localCity',
+        fieldType: 'Field',
+        label: 'Local City',
+        placeholder: 'Troy',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'localState',
+        fieldType: 'Select',
+        label: 'State',
+        data: states,
+        placeholder: 'New York',
+        component: Select,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+    {
+        name: 'localZip',
+        fieldType: 'Field',
+        label: 'Local Zip',
+        placeholder: 'Local Zip',
+        component: TextField,
+        sizing:
+            {
+                xs: 12,
+                sm: 12
+            },
+    },
+];
+
+export default function LocalAddressForm() {
+    return (
+        <React.Fragment>
+            <Typography mb={2} variant="h6" gutterBottom>
+                Local Address
+            </Typography>
+            <Grid container spacing={3}>
+                {LocalAddressFormInputs.map((input) => {
+                    return (
+                        <Grid item xs={input.sizing.xs} sm={input.sizing.sm} key={input.name}>
+                            {/* If the input is a Field, we can use the Field component.
+                             If the input is a Select, we need to use the Select component.
+                             We can use the component prop to pass in the correct component. */}
+                            {input.fieldType === 'Field' ?
+                                <Field
+                                    fullWidth
+                                    className='field'
+                                    component={input.component}
+                                    name={input.name}
+                                    type="text"
+                                    label={input.label}
+                                    placeholder={input.placeholder}
+                                /> :
+                                <Field
+                                    fullWidth
+                                    className='field'
+                                    name={input.name}
+                                    component={input.component}
+                                    type="text"
+                                    label={input.label}
+                                    placeholder={input.placeholder}
+                                >
+                                    {input.data ?
+                                        input.data.map((option) => (
+                                            <MenuItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </MenuItem>
+                                        )) :
+                                        null
+                                    }
+                                </Field>
+                            }
+                        </Grid>
+                    );
+                })}
+            </Grid>
+        </React.Fragment>
+    );
+}