Cleanup/UI

package.json

@@ -11,7 +11,7 @@
     "@okta/okta-signin-widget": "^4.1.2",
     "antd": "^4.4.3",
     "axios": "^0.21.1",
-    "babel-jest": "^27.3.1",
+    "babel-jest": "^24.9.0",
     "craco-less": "^1.17.0",
     "multiselect-react-dropdown": "^1.6.11",
     "plotly.js": "^1.54.6",

src/components/common/RecipientsTable/RecipientTable.js

@@ -107,17 +107,12 @@ const RecipientTable = ({
   useEffect(() => {
     getAllRecipientAction();
     getAllHouseholdAction();
-    console.log('CURRENT_RECIPIENT: ', recipientToEdit);
     // change is a one of the attribute in application state, when it
     // changed, the useEffect will be invoke. Any change for the data is
     // just an two moves, one is use axio call to perform a specific move
     // and then grab all the data again.
   }, [change, getAllHouseholdAction, getAllRecipientAction, recipientToEdit]);
 
-  const deleteRecipient = key => {
-    deleteRecipientAction(key);
-  };
-
   const save = (recipientId, values) => {
     try {
       editRecipientAction(recipientId, values);

src/components/forms/AddEmployeeForm.js

@@ -3,7 +3,6 @@ import { Modal, Form, Input, Select } from 'antd';
 
 function AddEmployeeForm({ visible, onCreate, onCancel }) {
   const [form] = Form.useForm();
-  const programs = ['Prevention', 'Aftercare', 'Sheltering'];
 
   return (
     <Modal
@@ -19,10 +18,9 @@ function AddEmployeeForm({ visible, onCreate, onCancel }) {
           .then(values => {
             onCreate(values);
             form.resetFields();
-            console.log(values);
           })
           .catch(info => {
-            console.log('Validate Failed:', info);
+            console.error('Validate Failed:', info);
           });
       }}
     >

src/components/forms/AddServiceTypeForm.js

@@ -1,39 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
-import { Form, Input, Select, Modal, Menu, Dropdown } from 'antd';
-// import { DownOutlined } from '@ant-design/icons';
-// import CC_NumberInput from './CustomizableComponents/CC_NumberInput';
+import { Form, Input, Select, Modal } from 'antd';
 
 function AddServiceTypeForm({ onCreate, onCancel, visible, programs }) {
   const [form] = Form.useForm();
 
-  //state for which dropdown Value is selected
-  // const [dropDownValue, setDropDownValue] = useState('');
-
-  // const handleSelectCustomField = ({ key }) => {
-  //   setDropDownValue(key);
-  // };
-
-  // const menu = (
-  //   <Menu onClick={handleSelectCustomField}>
-  //     <Menu.Item key="Number" value="Number">
-  //       <a>Number</a>
-  //     </Menu.Item>
-  //     <Menu.Item key="Text">
-  //       <a>Text</a>
-  //     </Menu.Item>
-  //     <Menu.Item key="Dropdown">
-  //       <a>Dropdown</a>
-  //     </Menu.Item>
-  //     <Menu.Item key="Checkboxes">
-  //       <a>Checkboxes</a>
-  //     </Menu.Item>
-  //     <Menu.Item key="RadioButtons">
-  //       <a>Radio Buttons</a>
-  //     </Menu.Item>
-  //   </Menu>
-  // );
-
   return (
     <>
       <Modal
@@ -109,30 +80,6 @@ function AddServiceTypeForm({ onCreate, onCancel, visible, programs }) {
               maxLength={240}
             />
           </Form.Item>
-          {/* <button onClick={}>Add a custom Service Field</button> */}
-          {/* <Dropdown name="dropdown_custom" overlay={menu} trigger={['click']}>
-            <a
-              className="custom_dropdown_selector"
-              onClick={e => e.preventDefault()}
-            >
-              Add A Custom Service Field <DownOutlined />
-            </a>
-          </Dropdown> */}
-
-          {/* {dropDownValue === 'Number' ? <CC_NumberInput /> : <></>} */}
-          {/* // Add these in and build this out in the forms>CustomizableComponents folder */}
-          {/* {dropDownValue === 'Text' ? (
-            <CC_TextInput />
-          ) : <></>}
-          {dropDownValue === 'Dropdown' ? (
-            <CC_DropdownInput />
-          ) : <></>}
-          {dropDownValue === 'Checkboxes' ? (
-            <CC_CheckboxesInput />
-          ) : <></>}
-          {dropDownValue === 'RadioButton' ? (
-            <CC_RadioButtonInput />
-          ) : <></>} */}
         </Form>
       </Modal>
     </>

src/components/forms/CustomizableComponents/CC_NumberInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Form, Input, Radio } from 'antd';
+import { Input, Radio } from 'antd';
 
 function CC_NumberInput({ onCreate, onCancel, visible, programs }) {
   return (
@@ -21,18 +21,6 @@ function CC_NumberInput({ onCreate, onCancel, visible, programs }) {
         maxLength="400"
       />
     </div>
-    // <Form.Item
-    //     name="name1"
-    //     label="Service Name1"
-    //     rules={[
-    //         {
-    //             // required: true,
-    //             message: 'Please input the service name',
-    //         },
-    //     ]}
-    // >
-    //     <Input size="large" placeholder="Enter Name" />
-    // </Form.Item>
   );
 }
 const mapStateToProps = state => {

src/components/forms/EditRecipientForm.js

@@ -1,12 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { Form, Input, Select, DatePicker, Radio, Modal } from 'antd';
 import moment from 'moment';
 
-import {
-  addRecipientAction,
-  getRecipientByIdAction,
-} from '../../state/actions/recipientActions';
+import { addRecipientAction } from '../../state/actions/recipientActions';
 
 const { Option } = Select;
 
@@ -15,7 +12,6 @@ function EditRecipientForm({
   onCreate,
   onCancel,
   households,
-  recipient_id,
   recipientToEdit,
 }) {
   const [form] = Form.useForm();
@@ -124,15 +120,11 @@ function EditRecipientForm({
               {
                 required: true,
                 message: 'Please select the race of the recipient',
-                // type: 'array',
               },
             ]}
             initialValue={recipientToEdit.race_id}
           >
-            <Select
-              // mode="multiple" - limiting race to 1 temporarily to test Create Recipient
-              placeholder="Please select the race of the recipient"
-            >
+            <Select placeholder="Please select the race of the recipient">
               <Option value={1}>White/Caucasian</Option>
               <Option value={2}>Black/African American</Option>
               <Option value={3}>Asian</Option>

src/components/forms/HouseholdActive.js

@@ -1,10 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import '../../styles/Dashboard.scss';
 import 'antd/dist/antd.css';
-//../../styles/Dashboard.scss'
 // This component allows the user to activate different household eligibilities for each services. All state props
-//from householdactiveReducer will drop in this component.
 
 function ServiceDetail(props) {
   if (!props.active) {

src/components/forms/HouseholdLists.js

@@ -1,33 +1,44 @@
 // container
-import React, { useState, Component, useReducer } from 'react';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { selectUser } from '../../state/actions/householdeligibilityActions';
 import 'antd/dist/antd.css';
-import { Button } from 'antd';
-import logo from '../../../src/assets/logo.png';
+import { Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
 // This component provides an option for the user to click and observe disparate eligibility for the surrounding area.
 
 function HouseholdList(props) {
   const createListItems = () => {
     return props.services.map(service => {
       return (
-        <Button
-          type="primary"
+        <TabPane
+          tab={service.type}
           key={service.id}
-          onClick={() => props.selectUser(service)}
+          className={service.type.toLowerCase()}
         >
           {service.Prevention} {service.Shelter} {service.Aftercare}
-        </Button>
+        </TabPane>
       );
     });
   };
 
+  const handleTabClick = tabId => {
+    let service = {};
+    props.services.forEach(item => {
+      if (String(item.id) === tabId) {
+        service = item;
+      }
+    });
+    props.selectUser(service);
+  };
+
   return (
-    <div className="">
-      <div className="serviceButton">{createListItems()}</div>
-      );
-    </div>
+    <Tabs defaultActiveKey="1" centered onTabClick={handleTabClick}>
+      {createListItems()}
+    </Tabs>
   );
 }
 

src/components/pages/Dashboard/City-Info.js

@@ -19,7 +19,7 @@ function CityInfo(props) {
       <img
         width={240}
         src={info.image}
-        alt="image of city we are gathering data from"
+        alt="The city from which we are gathering data"
       />
     </div>
   );

src/components/pages/Dashboard/DashboardHouseholdEligibility.js

@@ -30,7 +30,7 @@ export default function EligibilityDashboard() {
         });
       })
       .catch(err => {
-        console.log(err);
+        console.error(err);
       });
   };
 
@@ -42,7 +42,7 @@ export default function EligibilityDashboard() {
       }}
     />
   );
-  const onSearch = value => console.log(value);
+  const onSearch = value => value;
   return (
     <div className="eligibilityDashboardContainer">
       <div className="eligibilityForm">
@@ -78,18 +78,3 @@ export default function EligibilityDashboard() {
     </div>
   );
 }
-
-// Removed for styling purposes.
-
-//<div className="eligibilityResults">
-//  <p>Eligible For Residential Assistance</p>
-// <p className="resultAnswer">
-// {eligible.resident_assistance_eligibility ? ' Yes' : ' No'}
-// </p>
-// <p>Eligible For Reduced Bus Fare</p>
-//<p className="resultAnswer">
-// {eligible.reduced_bus_fare_eligibility ? ' Yes' : ' No'}
-//</p>
-//</div>
-//
-//

src/components/pages/Dashboard/RenderDashboardPage.js

@@ -1,16 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import MetricsFilterBar from '../../common/MetricsFilterBar/MetricsFilterBar';
 import EligibilityDashboard from './DashboardHouseholdEligibility';
 
-// import GraphsPlaceholder from '../../common/GraphsPlaceholder/GraphsPlaceholder';
-
 function RenderDashboardPage({ user, status }) {
   return (
     <div>
       <div className="metrics-holder-dashboard center">
-        {/* <MetricsFilterBar /> */}
-
         <EligibilityDashboard />
         <div className="metrics-dashboard"></div>
       </div>

src/components/pages/Dashboard/ServiceMap.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import axios from 'axios';
 import { useState, useRef, useEffect } from 'react';
-// import ReactMapGL, { Source, Layer } from 'react-map-gl';
-import ReactMapGL, { Marker, Popup, NavigationControl } from 'react-map-gl';
+import ReactMapGL, { Marker, Popup } from 'react-map-gl';
 import { clusterLayer } from './layers';
 import './styles.css';
 import CITIES from './cities.json';
@@ -26,8 +25,6 @@ export default function ServiceMap(props) {
     axios.get('http://localhost:8000/api/service_type').then(response => {
       const allservices = response.data;
       setPost(allservices);
-
-      console.log(allservices);
     });
   }, []);
 
@@ -74,14 +71,6 @@ export default function ServiceMap(props) {
 
   return (
     <div className="service-map">
-      {/* <ReactMapGL
-        {...viewport}
-        onViewportChange={nextViewport => setViewport(nextViewport)}
-        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
-      >
-        {markers}
-      </ReactMapGL>
-      <button onClick={resetViewport}>Reset</button> */}
       <>
         <ReactMapGL
           {...viewport}
@@ -99,18 +88,6 @@ export default function ServiceMap(props) {
           {/* Next step is to reenable the React-Map-GL Markers and Clusters using geojson and props.data */}
           {/* Then we can disable the svg markers in place and reenable popups through the React-Map-GL markers and or clusters  */}
           {renderPopUp()}
-          {/* <Source
-            id="programClusters"
-            type="geojson"
-            data={props.data}
-            cluster={true}
-            clusterMaxZoom={14}
-            clusterRadius={50}
-          >
-            <Layer {...clusterLayer} />
-            <Layer {...clusterCountLayer} />
-            <Layer {...unclusteredPointLayer} />
-          </Source> */}
         </ReactMapGL>
         {/* <button onClick={resetViewport}>Reset</button>  */}
       </>