Remove ethnicity question

src/Admin.tsx

@@ -3,15 +3,13 @@ import { Container, Badge, FormGroup, Label, Input, Button, Collapse } from 'rea
 import Paper, { Path, PaperScope, Point, Group, Color } from 'paper';
 import { equals, without, append, isNil, identity, includes } from 'ramda';
 import Axios from 'axios';
-import VALUES, { AgeVal, GenderVal, EthnicityVal, NonNativeVal, Filters, FilterVal, FilterStatus } from './services';
+import VALUES, { AgeVal, GenderVal, NonNativeVal, Filters, FilterVal, FilterStatus } from './services';
 
 type Result = {
   personalInformation: {
     age: AgeVal,
     gender: GenderVal,
     genderCustom: string,
-    ethnicity: EthnicityVal,
-    ethnicityCustom: string,
     birthPlace: string,
     currentPlace: string,
     nonNative: NonNativeVal
@@ -28,8 +26,6 @@ type PersonalInformation = Record<FilterVal, string> & {
   age: AgeVal,
   gender: GenderVal,
   genderCustom: string,
-  ethnicity: EthnicityVal,
-  ethnicityCustom: string,
   birthPlace: string,
   currentPlace: string,
   nonNative: NonNativeVal
@@ -205,7 +201,6 @@ const FilterPanel: React.FunctionComponent<{
   });
   const [activeFilters, setActiveFilters] = useState<FilterStatus>({
     age: true,
-    ethnicity: true,
     gender: true,
     nonNative: false
   });
@@ -309,24 +304,6 @@ const FilterPanel: React.FunctionComponent<{
       </Collapse>
 
       <hr/>
-
-      <Switch id="ethnicity-switch" checked={isFilterActive('ethnicity')} onChange={activateFilter('ethnicity')}>
-        <h6>ethnicity</h6>
-      </Switch>
-      <Collapse isOpen={isFilterActive('ethnicity')}>
-        <FormGroup className="vom-filter-group">
-          {
-            VALUES.ETHNICITY.map(value => (
-              <FormGroup check inline key={value}>
-                <Label check>
-                  <Input disabled={!isFilterActive('ethnicity')} type="checkbox" checked={isChecked('ethnicity', value)} onChange={handleCheck('ethnicity', value)}/>{value}
-                </Label>
-              </FormGroup>
-            ))
-          }
-        </FormGroup>
-      </Collapse>
-      <hr/>
       
       <Switch id="non-native-switch" checked={isFilterActive('nonNative')} onChange={activateFilter('nonNative')}>
         <h6> Non natives </h6>

src/App.tsx

@@ -109,8 +109,6 @@ const App = () => {
       age: '',
       gender: '',
       genderCustom: '',
-      ethnicity: '',
-      ethnicityCustom: '',
       levelEducation: [],
       birthPlace: '',
       currentPlace: '',

src/PersonalInformation.tsx

@@ -8,7 +8,6 @@ import {
   FormGroup,
   Label,
   Input,
-  FormText,
   FormFeedback,
   Fade
 } from 'reactstrap';
@@ -18,8 +17,6 @@ export type FormData = {
   age: string,
   gender: string,
   genderCustom: string,
-  ethnicity: string,
-  ethnicityCustom: string,
   levelEducation: string[],
   birthPlace: string,
   currentPlace: string,
@@ -52,8 +49,6 @@ const validateData = (values: FormData): Validations => ({
   age: notEmpty(values.age),
   gender: notEmpty(values.gender),
   genderCustom: notEmptyCustomResponse(values.genderCustom, values.gender),
-  ethnicity: notEmpty(values.ethnicity),
-  ethnicityCustom: notEmptyCustomResponse(values.ethnicityCustom, values.ethnicity),
   levelEducation: atLeastOne(values.levelEducation),
   birthPlace: notEmpty(values.birthPlace),
   currentPlace: notEmpty(values.currentPlace),
@@ -64,8 +59,6 @@ const _initialValidation: Validations = {
   age: false,
   gender: false,
   genderCustom: false,
-  ethnicity: false,
-  ethnicityCustom: false,
   levelEducation: false,
   birthPlace: false,
   currentPlace: false,
@@ -81,8 +74,6 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
     age: '',
     gender: '',
     genderCustom: '',
-    ethnicity: '',
-    ethnicityCustom: '',
     levelEducation: [],
     birthPlace: '',
     currentPlace: '',
@@ -189,51 +180,6 @@ export const PersonalInformation: React.FunctionComponent<PersonalInformationPro
           }
         </FormGroup>
 
-        <FormGroup>
-          <Label for="ethnicity">
-            Ethnicity
-            <FormText color="muted">
-              These ethnic groups are taken from the 2011 UK Census. If you feel that these groups do not effectively represent you, please click ‘None of the above’ and add your ethnicity using your own words.
-            </FormText>
-          </Label>
-          <Input type="select" id="ethnicity" value={values.ethnicity} onChange={handleSelect('ethnicity')} { ...setInputValidation('ethnicity') } required>
-            <option value="" disabled>Please choose</option>
-            <optgroup label="White">
-              <option value="English/Welsh/Scottish/Northern Irish/British">English/Welsh/Scottish/Northern Irish/British</option>
-              <option value="Irish">Irish</option>
-              <option value="Gypsy or Irish Traveller">Gypsy or Irish Traveller</option>
-            </optgroup>
-            <optgroup label="Mixed/multiple ethnic groups">
-              <option value="White and Black Caribbean">White and Black Caribbean</option>
-              <option value="White and Black African">White and Black African</option>
-              <option value="White and Asian">White and Asian</option>
-            </optgroup>
-            <optgroup label="Asian/Asian British">
-              <option value="Indian">Indian</option>
-              <option value="Pakistani">Pakistani</option>
-              <option value="Bangladeshi">Bangladeshi</option>
-              <option value="Chinese">Chinese</option>
-            </optgroup>
-            <optgroup label="Black/African/Caribbean/Black British">
-              <option value="African">African</option>
-              <option value="Caribbean">Caribbean</option>
-            </optgroup>
-            <optgroup label="Other ethnic group">
-              <option value="Arab">Arab</option>
-              <option value="other">None of the above. I identify as follows:</option>
-            </optgroup>
-          </Input>
-          <FormFeedback>Please, select an option</FormFeedback>
-          {
-            values.ethnicity === 'other' && (
-              <>
-                <Input type="text" id="ethnicity-custom" className="mt-2" required value={values.ethnicityCustom} onChange={handleSelect('ethnicityCustom')} { ...setInputValidation('ethnicityCustom') }/>
-                <FormFeedback>Please, fill up this input</FormFeedback>
-              </>
-            )
-          }
-        </FormGroup>
-
         <FormGroup>
           <Label for="level-education">Level of education</Label>
           <FormGroup>

src/services.ts

@@ -1,31 +1,15 @@
 
 export type AgeVal = '1' | '2' | '3' | '4' | '5' | '6';
 export type GenderVal = 'female' | 'male' | 'other';
-export type EthnicityVal =
-  'English/Welsh/Scottish/Northern Irish/British' |
-  'Irish' |
-  'Gypsy or Irish Traveller' |
-  'White and Black Caribbean' |
-  'White and Black African' |
-  'White and Asian' |
-  'Indian' |
-  'Pakistani' |
-  'Bangladeshi' |
-  'Chinese' |
-  'African' |
-  'Caribbean' |
-  'Arab' |
-  'other';
-  
+
 export type NonNativeVal = '1' | '2' | '3' | '4';
-export type FilterVal = 'age' | 'gender' | 'ethnicity' | 'nonNative';
+export type FilterVal = 'age' | 'gender' | 'nonNative';
 
 export type Filters = {
   [filter in FilterVal]?: string[];
 } & {
   age?: AgeVal[];
   gender?: GenderVal[];
-  ethnicity?: EthnicityVal[];
   nonNative?: NonNativeVal[];
 };
 
@@ -49,41 +33,21 @@ const NON_NATIVE: { [k in NonNativeVal]: string } = {
 
 const GENDER: GenderVal[] = [ 'female', 'male', 'other' ];
 
-const ETHNICITY: EthnicityVal[] = [
-  'English/Welsh/Scottish/Northern Irish/British',
-  'Irish',
-  'Gypsy or Irish Traveller',
-  'White and Black Caribbean',
-  'White and Black African',
-  'White and Asian',
-  'Indian',
-  'Pakistani',
-  'Bangladeshi',
-  'Chinese',
-  'African',
-  'Caribbean',
-  'Arab',
-  'other'
-];
-
 const FILTER_KEYS: FilterVal[] = [
   'age',
   'gender',
-  'ethnicity',
   'nonNative'
 ];
 
 const FILTER: Filters = {
   age: [ '1', '2', '3', '4', '5', '6' ],
   gender: [ ...GENDER ],
-  ethnicity: [ ...ETHNICITY ],
   nonNative: ['1', '2', '3', '4']
 }
 
 const CLEAN_FILTER: Filters = {
   age: [],
   gender: [],
-  ethnicity: [],
   nonNative: []
 };
 
@@ -91,7 +55,6 @@ export default {
   AGE,
   NON_NATIVE,
   GENDER,
-  ETHNICITY,
   FILTER,
   CLEAN_FILTER,
   FILTER_KEYS