Notes

{
"name": "hack-front",
"version": "0.1.0",
"private": true,
"dependencies": {
"@carbon/icons-react": "10.3.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"carbon-components": "10.3.0",
"carbon-components-react": "7.3.0",
"carbon-icons": "7.0.7",
"node-sass": "4.12.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"yup": "^0.29.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build-prd": "cross-env GENERATE_SOURCEMAP=false react-scripts build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.2"
}
}


APP.JS
import React from 'react';
import './App.scss';
import Form from './components/EntryForm'



function App() {
return (
<div className="App">
<Form className="OverallForm" />
</div>
);
}

export default App;


EMPLFORM

import React, { useState } from 'react'
import { Form, FormGroup, TextInput, TextArea, Select, SelectItem, DatePicker, DatePickerInput, Checkbox, RadioButtonGroup, RadioButton, Button } from 'carbon-components-react';
import './EntryForm.scss'
import formAPI from '../../api/formAPI';

const EmployeeInfoInput = (props) => {
const [testStatus, setTestStatus] = useState("No");
const [exposureStatus, setExposureStatus] = useState("Yes")
const [testType, setTestType] = useState("Antibody")

function determineTestStatus() {
let radios = document.getElementsByName("testStatus");
radios.forEach(radio => {
if(radio.checked) {
setTestStatus(radio.value);
}
})
}
function determineExposure() {
let radios = document.getElementsByName("exposure");
radios.forEach(radio => {
if(radio.checked) {
setExposureStatus(radio.value);
}
})
}
function determineTestType() {
if(testStatus !== "No"){
let radios = document.getElementsByName("testType");
radios.forEach(radio => {
if(radio.checked) {
setTestType(radio.value);
}
})
}

}
const getCheckedValuesArray = () => {
let checkedValues = [];
for (let index = 1; index < 10; index++){
const getID = `checked-${index}`
if (document.getElementById(getID).checked)
checkedValues.push(document.getElementById(getID).value);
}
return checkedValues;
}
const handleSubmit = async (e) => {
e.preventDefault();
document.getElementById('submitID').disabled = true;
let selectedValues = {
fullname: document.getElementById('fullname').value,
employee_id: document.getElementById('eid').value,
location: document.getElementById('location').value,
department: document.getElementById('department').value,
testStatus: testStatus,
additional: document.getElementById('additional').value,
testInfo: "",
testDate: "",
symptoms: "",
exposure: "",
}
if(testStatus !== "No"){
selectedValues.testInfo = testType;
}
if(testStatus === "positive" || testStatus === "negative"){
selectedValues.testDate = document.getElementById('test-when').value;
}
if(testStatus !== "positive"){
selectedValues.symptoms = getCheckedValuesArray();
selectedValues.exposure = exposureStatus;
}
console.log(selectedValues);
//now send request to Kian's endpoint
let res = await formAPI.submitEntryForm(selectedValues);
console.log(res)
if(res.status == 200) props.completeSubmit(true);
}
return (
<Form onSubmit={e => handleSubmit(e)}>
{/* Name */}
<FormGroup legendText="">
<TextInput
id="fullname"
invalidText="Please enter your first and last name."
labelText="Full Name"
placeholder="Annie Pearson"
required
/>
</FormGroup>
{/* ID */}
<FormGroup legendText="">
<TextInput
id="eid"
invalidText="ID is required."
labelText="Employee ID (W3ID)"
required
/>
</FormGroup>
{/* Location */}
<FormGroup legendText="">
<Select
defaultValue="NYC"
id="location"
invalidText="Please select the location of your office."
labelText="Office location"
>
<SelectItem
text="Armonk"
value="Armonk"
/>
<SelectItem
text="Austin"
value="Austin"
/>
<SelectItem
text="Dubuque"
value="Dubuque"
/>
<SelectItem
text="Durham"
value="Durham"
/>
<SelectItem
text="New York City"
value="New York City"
/>
<SelectItem
text="Poughkeepsie"
value="Poughkeepsie"
/>
<SelectItem
text="San Fransisco"
value="San Fransisco"
/>
<SelectItem
text="San Jose"
value="San Jose"
/>
<SelectItem
text="Southbury"
value="Southbury"
/>
<SelectItem
text="Washington DC"
value="Washington DC"
/>

</Select>
</FormGroup>
{/* Department */}
<FormGroup legendText="">
<Select
defaultValue="Cloud and Cognitive Software"
id="department"
invalidText="Please select your department."
labelText="Department"
>
<SelectItem
text="Cloud and Cognitive Software"
value="Cloud and Cognitive Software"
/>
<SelectItem
text="Global Business Services"
value="Global Business Services"
/>
<SelectItem
text="Global Financing"
value="Global Financing"
/>
<SelectItem
text="Global Technology Services"
value="Global Technology Services"
/>
<SelectItem
text="Systems"
value="Systems"
/>
</Select>
</FormGroup>
{/* Test */}
<FormGroup legendText="Have you gotten tested for COVID-19?">
<RadioButtonGroup orientation='vertical' labelPosition='right'
defaultSelected="No"
id="testStatus"
name="testStatus"
invalidText="Enter test status."
valueSelected="No"
onChange={() => determineTestStatus()}
>
<RadioButton
id="radio-01"
labelText="No"
value="No"
/>
<RadioButton
id="radio-02"
labelText="Yes - Waiting on results"
value="wait"
/>
<RadioButton
id="radio-03"
labelText="Yes - Positive"
value="positive"
/>
<RadioButton
id="radio-04"
labelText="Yes - Negative"
value="negative"
/>
</RadioButtonGroup>
</FormGroup>
{/* Antibody vs Active Infection (If tested) */}
{testStatus !== "No" &&
<div>
<FormGroup legendText="What type of test did you take?">
<RadioButtonGroup orientation='vertical' labelPosition='right'
defaultSelected="Antibody"
legend=""
name="testType"
id="testType"
valueSelected="Antibody"
onChange={() => determineTestType()}
>
<RadioButton
id="radio-11"
labelText="Antibody"
value="Antibody"
/>
<RadioButton
id="radio-12"
labelText="Active Infection"
value="Active Infection"
/>
</RadioButtonGroup>
</FormGroup>
{/* Test Date (If test is positive or negative) */}
{(testStatus === "positive" || testStatus === "negative") &&
<FormGroup legendText="">
{/* display != none when tested */}
<DatePicker dateFormat="m/d/Y" datePickerType="single">
<DatePickerInput
id="test-when"
placeholder="mm/dd/yyyy"
labelText="When did you take this test?"
type="text"
required
/>
</DatePicker>
</FormGroup>
}
{/*----- EOL for positive testers -----*/}
</div>
}
{testStatus !== "positive" &&
<div>
{/* Symptoms Checklist (Unless positive 14 days+ ago) */}
<fieldset className="bx--fieldset">
<legend className="bx--label">Have you had any of the following Symptoms?</legend>
<Checkbox labelText="Cold or cough" id="checked-1" value="Cold/Cough" />
<Checkbox labelText="Fever (≥37.5C/99.5F)" id="checked-2" value="Fever" />
<Checkbox labelText="Tiredness" id="checked-3" value="Tiredness"/>
<Checkbox labelText="Difficulty breathing" id="checked-4" value="Difficulty Breathing"/>
<Checkbox labelText="Sore throat" id="checked-5" value="Sore Throat"/>
<Checkbox labelText="Diarrhea" id="checked-6" value="Diarrhea" />
<Checkbox labelText="Aches/pains" id="checked-7" value="Aches/pains"/>
<Checkbox labelText="Shortness of breath" id="checked-8" value="Shortness of breath"/>
<Checkbox labelText="New loss of taste or smell" id="checked-9" value="sense loss"/>
</fieldset>
{/* Exposure Options */}
<FormGroup legendText="Within the last 14 days, have you been in close contact with a person confirmed to have COVID-19 or with a person under quarantine because of a suspected case of COVID-19 infection (Including travel)?">
<RadioButtonGroup orientation='vertical' labelPosition='right'
defaultSelected="Yes"
legend="If unsure, choose yes"
name="exposure"
id="exposure"
valueSelected="Yes"
onChange={() => determineExposure()}
>
<RadioButton
id="radio-21"
labelText="Yes"
value="Yes"
/>
<RadioButton
id="radio-22"
labelText="No"
value="No"
/>
<RadioButton
id="radio-23"
labelText="Unsure"
value="Unsure"
/>
</RadioButtonGroup>
</FormGroup>
</div>
}
{/* Extra Info */}
<FormGroup legendText="">
<TextArea
cols={50}
helperText="Example: special risks, contact tracing, etc."
id="additional"
labelText="More information (Optional)"
placeholder="Describe your situation..."
rows={3}
/>
</FormGroup>
{/* SUBMIT */}
<Button
kind="primary"
tabIndex={0}
type="submit"
className="SubmitEmployee"
id="submitID"
>
Submit
</Button>
</Form>
);
}
export default EmployeeInfoInput;



INDEX
import React, { useState } from 'react'
import EmployeeInput from './EmployeeInput'
import HRInput from './HRInput'
import { Toggle } from 'carbon-components-react'
import './EntryForm.scss'

const EntryForm = () => {
const [toggled, setToggled] = useState(false);
const [submitted, setSubmitted] = useState(false);
return(
<div>
<div className="PageHeader">
<h1 className="PageHeaderText">COVID-19 Check-in Questionairre</h1>
</div>
<div className="EntryForm">
{submitted ? <div>
<h1 className="FormHeader">Submitted!<br /><br /><br /><br />Thank you for helping make Stevens a safer place!</h1>
</div>
:
<div>
<h1 className="FormHeader">{toggled ? "HR Upload" : "Employee Self Check-In"}</h1>
<Toggle
className="inputter-toggle"
labelA="Employee"
labelB="HR Representative"
labelText="View the appropriate form for your role"
onChange={() => setToggled(!toggled)}
id="added"
/>
{toggled ? <HRInput /> : <EmployeeInput completeSubmit={setSubmitted}/>}
</div>
}
</div>
</div>


);
}
export default EntryForm;