From 256f8da97765f643d017ffe476ea5e3366ac50c2 Mon Sep 17 00:00:00 2001
From: philiparpin <philip.arpin@me.com>
Date: Sat, 28 Mar 2020 09:21:50 -0400
Subject: [PATCH 1/2] Slimmed LocationModal into three seperate components

---
 src/App.tsx                        |   5 +
 src/Components/LocationActions.tsx |  53 +++++++++
 src/Components/LocationDetails.tsx | 147 ++++++++++++++++++++++++
 src/Components/LocationModal.tsx   | 178 +++--------------------------
 4 files changed, 221 insertions(+), 162 deletions(-)
 create mode 100644 src/Components/LocationActions.tsx
 create mode 100644 src/Components/LocationDetails.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 89688b6..707c4d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,6 +45,11 @@ export const labelMap: LabelMap = {
     card: 'Collects samples',
     icon: faVial,
   },
+  is_collecting_samples_onsite: {
+    sidebar: 'Collects samples for testing',
+    card: 'Collects samples onsite',
+    icon: faVial,
+  },
 };
 
 // Controls toggles
diff --git a/src/Components/LocationActions.tsx b/src/Components/LocationActions.tsx
new file mode 100644
index 0000000..e94ed7c
--- /dev/null
+++ b/src/Components/LocationActions.tsx
@@ -0,0 +1,53 @@
+import { IconButton } from '@material-ui/core';
+import PhoneIcon from '@material-ui/icons/Phone';
+import DirectionsIcon from '@material-ui/icons/Directions';
+import ReportProblemIcon from '@material-ui/icons/ReportProblem';
+import React from 'react';
+
+interface LocationActionsProps {
+  location: any;
+  onLinkClick: Function;
+  address: string;
+}
+
+const LocationActions = ({
+  location,
+  onLinkClick,
+  address,
+}: LocationActionsProps) => {
+  return (
+    <div>
+      <IconButton
+        area-label="call"
+        href={`tel://${location.location_contact_phone_main}`}
+        onClick={() => {
+          onLinkClick(location.location_id, 'Call');
+        }}
+      >
+        <PhoneIcon />
+      </IconButton>
+      <IconButton
+        area-label="directions"
+        href={`https://maps.google.com/?&daddr=${address}`}
+        target="_blank"
+      >
+        <DirectionsIcon />
+      </IconButton>
+      {/* <IconButton area-label="share"> */}
+      {/*  <ShareIcon /> */}
+      {/* </IconButton> */}
+      <IconButton
+        area-label="report"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfYpEDiV8MwkBSVa7rKI_OzrmtGvclzgFzvcjxocLJncJOXDQ/viewform?usp=sf_link"
+        target="_blank"
+        onClick={() => {
+          onLinkClick(location.location_id, 'Report Error');
+        }}
+      >
+        <ReportProblemIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+export default LocationActions;
diff --git a/src/Components/LocationDetails.tsx b/src/Components/LocationDetails.tsx
new file mode 100644
index 0000000..5b4e844
--- /dev/null
+++ b/src/Components/LocationDetails.tsx
@@ -0,0 +1,147 @@
+import {
+  Avatar,
+  CardContent,
+  Chip,
+  Collapse,
+  createStyles,
+  Divider,
+  Grid,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Theme,
+  Typography,
+} from '@material-ui/core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faCampground,
+  faCircle,
+  faClinicMedical,
+  faFirstAid,
+  faHospital,
+  faMedkit,
+  faShieldAlt,
+  faStethoscope,
+  faUserMd,
+} from '@fortawesome/free-solid-svg-icons';
+import { indigo, orange } from '@material-ui/core/colors';
+import Link from '@material-ui/core/Link';
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import LocationModal from './LocationModal';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    typeChip: {
+      backgroundColor: orange[900],
+      color: theme.palette.getContrastText(indigo[800]),
+      height: '20px',
+      marginTop: '5px',
+    },
+  })
+);
+
+interface DetailsProps {
+  location: any;
+  expanded: boolean;
+  details: any;
+}
+
+const LocationDetails = ({ location, expanded, details }: DetailsProps) => {
+  const classes = useStyles();
+
+  function renderLocationIcon(param: any): IconProp {
+    switch (param) {
+      case 'Urgent Care':
+        return faStethoscope;
+      case 'Medical Center':
+        return faHospital;
+      case 'Health Center':
+        return faFirstAid;
+      case 'Clinic':
+        return faClinicMedical;
+      case 'Primary Care':
+        return faUserMd;
+      case 'Temporary':
+        return faCampground;
+      case 'Immediate Care':
+        return faMedkit;
+      case 'Public Health Department':
+        return faShieldAlt;
+      default:
+        return faHospital;
+    }
+  }
+
+  return (
+    <Collapse in={expanded} timeout="auto" unmountOnExit>
+      <Divider />
+      <CardContent>
+        <Grid container spacing={2}>
+          <Grid item md={3} xs={12}>
+            <div
+              style={{
+                paddingTop: '20px',
+              }}
+            >
+              <span className="fa-layers fa-fw fa-4x" style={{ width: '100%' }}>
+                <FontAwesomeIcon icon={faCircle} color={indigo[800]} />
+                <FontAwesomeIcon
+                  icon={renderLocationIcon(
+                    location.location_place_of_service_type
+                  )}
+                  transform="shrink-6"
+                  color="white"
+                />
+              </span>
+              <div style={{ width: '100%', textAlign: 'center' }}>
+                <Chip
+                  size="medium"
+                  label={
+                    location.location_place_of_service_type ===
+                    'Public Health Department'
+                      ? 'Public Health Dept.'
+                      : location.location_place_of_service_type
+                  }
+                  className={classes.typeChip}
+                />
+              </div>
+            </div>
+          </Grid>
+          <Grid key={1} item md={5} xs={12}>
+            <Typography style={{ paddingTop: '20px' }}>
+              {'Visit '}
+              <Link href={location.location_contact_url_main}>
+                this website
+              </Link>
+              {
+                ' for information about COVID-19 screening and testing services at this location.'
+              }
+            </Typography>
+          </Grid>
+          <Divider orientation="vertical" flexItem />
+          <Grid key={2} item md={3} xs={12}>
+            <List>
+              {details.map((item: any) => {
+                return location[item.key] === 'TRUE' ? (
+                  <ListItem key={item.key}>
+                    <ListItemAvatar>
+                      <Avatar>
+                        <FontAwesomeIcon icon={item.icon} />
+                      </Avatar>
+                    </ListItemAvatar>
+                    <ListItemText secondary={item.title} />
+                  </ListItem>
+                ) : null;
+              })}
+            </List>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Collapse>
+  );
+};
+
+export default LocationDetails;
diff --git a/src/Components/LocationModal.tsx b/src/Components/LocationModal.tsx
index 131ebe4..951ea84 100644
--- a/src/Components/LocationModal.tsx
+++ b/src/Components/LocationModal.tsx
@@ -1,50 +1,25 @@
 import React from 'react';
 import {
-  Avatar,
   Button,
   Card,
   CardActions,
   CardContent,
   CardHeader,
-  Chip,
-  Collapse,
   createStyles,
   Divider,
-  Grid,
   IconButton,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
   Modal,
   Theme,
   Typography,
 } from '@material-ui/core';
 import clsx from 'clsx';
-import PhoneIcon from '@material-ui/icons/Phone';
-import DirectionsIcon from '@material-ui/icons/Directions';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ReportProblemIcon from '@material-ui/icons/ReportProblem';
 import ReactGA from 'react-ga';
-import { indigo, orange, red } from '@material-ui/core/colors';
+import { red } from '@material-ui/core/colors';
 import { makeStyles } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import {
-  faCampground,
-  faCircle,
-  faClinicMedical,
-  faFirstAid,
-  faHospital,
-  faMedkit,
-  faShieldAlt,
-  faStethoscope,
-  faUserMd,
-  faVial,
-  faTasks,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { labelMap } from '../App';
+import LocationDetails from './LocationDetails';
+import LocationActions from './LocationActions';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -100,26 +75,15 @@ const useStyles = makeStyles((theme: Theme) =>
     cardHeader: {
       paddingBottom: '0px',
     },
-    typeChip: {
-      backgroundColor: orange[900],
-      color: theme.palette.getContrastText(indigo[800]),
-      height: '20px',
-      marginTop: '5px',
-    },
   })
 );
 
-interface ModalProps {
+interface LocationModalProps {
   location: any;
   onClose: Function;
 }
 
-interface LocationIconProps {
-  locationType: any;
-}
-
-const LocationModal = ({ location, onClose }: ModalProps) => {
-  // const [value, setValue] = React.useState(0);
+const LocationModal = ({ location, onClose }: LocationModalProps) => {
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -127,28 +91,7 @@ const LocationModal = ({ location, onClose }: ModalProps) => {
   };
 
   const classes = useStyles();
-  function renderLocationIcon(param: any): IconProp {
-    switch (param) {
-      case 'Urgent Care':
-        return faStethoscope;
-      case 'Medical Center':
-        return faHospital;
-      case 'Health Center':
-        return faFirstAid;
-      case 'Clinic':
-        return faClinicMedical;
-      case 'Primary Care':
-        return faUserMd;
-      case 'Temporary':
-        return faCampground;
-      case 'Immediate Care':
-        return faMedkit;
-      case 'Public Health Department':
-        return faShieldAlt;
-      default:
-        return faHospital;
-    }
-  }
+
   const handleLinkClicked = (locationId: string, action: string): void => {
     ReactGA.event({
       category: 'Location',
@@ -183,37 +126,11 @@ const LocationModal = ({ location, onClose }: ModalProps) => {
           subheader={address}
           className={classes.cardHeader}
           action={
-            <div>
-              <IconButton
-                area-label="call"
-                href={`tel://${location.location_contact_phone_main}`}
-                onClick={() => {
-                  handleLinkClicked(location.location_id, 'Call');
-                }}
-              >
-                <PhoneIcon />
-              </IconButton>
-              <IconButton
-                area-label="directions"
-                href={`https://maps.google.com/?&daddr=${address}`}
-                target="_blank"
-              >
-                <DirectionsIcon />
-              </IconButton>
-              {/* <IconButton area-label="share"> */}
-              {/*  <ShareIcon /> */}
-              {/* </IconButton> */}
-              <IconButton
-                area-label="report"
-                href="https://docs.google.com/forms/d/e/1FAIpQLSfYpEDiV8MwkBSVa7rKI_OzrmtGvclzgFzvcjxocLJncJOXDQ/viewform?usp=sf_link"
-                target="_blank"
-                onClick={() => {
-                  handleLinkClicked(location.location_id, 'Report Error');
-                }}
-              >
-                <ReportProblemIcon />
-              </IconButton>
-            </div>
+            <LocationActions
+              onLinkClick={handleLinkClicked}
+              location={location}
+              address={address}
+            />
           }
         />
 
@@ -256,74 +173,11 @@ const LocationModal = ({ location, onClose }: ModalProps) => {
             <ExpandMoreIcon />
           </IconButton>
         </CardActions>
-        <Collapse in={expanded} timeout="auto" unmountOnExit>
-          <Divider />
-          <CardContent>
-            <Grid container spacing={2}>
-              <Grid item md={3} xs={12}>
-                <div
-                  style={{
-                    paddingTop: '20px',
-                  }}
-                >
-                  <span
-                    className="fa-layers fa-fw fa-4x"
-                    style={{ width: '100%' }}
-                  >
-                    <FontAwesomeIcon icon={faCircle} color={indigo[800]} />
-                    <FontAwesomeIcon
-                      icon={renderLocationIcon(
-                        location.location_place_of_service_type
-                      )}
-                      transform="shrink-6"
-                      color="white"
-                    />
-                  </span>
-                  <div style={{ width: '100%', textAlign: 'center' }}>
-                    <Chip
-                      size="medium"
-                      label={
-                        location.location_place_of_service_type ===
-                        'Public Health Department'
-                          ? 'Public Health Dept.'
-                          : location.location_place_of_service_type
-                      }
-                      className={classes.typeChip}
-                    />
-                  </div>
-                </div>
-              </Grid>
-              <Grid key={1} item md={5} xs={12}>
-                <Typography style={{ paddingTop: '20px' }}>
-                  {'Visit '}
-                  <Link href={location.location_contact_url_main}>
-                    this website
-                  </Link>
-                  {
-                    ' for information about COVID-19 screening and testing services at this location.'
-                  }
-                </Typography>
-              </Grid>
-              <Divider orientation="vertical" flexItem />
-              <Grid key={2} item md={3} xs={12}>
-                <List>
-                  {details.map((item: any) => {
-                    return location[item.key] === 'TRUE' ? (
-                      <ListItem key={item.key}>
-                        <ListItemAvatar>
-                          <Avatar>
-                            <FontAwesomeIcon icon={item.icon} />
-                          </Avatar>
-                        </ListItemAvatar>
-                        <ListItemText secondary={item.title} />
-                      </ListItem>
-                    ) : null;
-                  })}
-                </List>
-              </Grid>
-            </Grid>
-          </CardContent>
-        </Collapse>
+        <LocationDetails
+          location={location}
+          expanded={expanded}
+          details={details}
+        />
       </Card>
     </Modal>
   );

From 9c4ae61b0f9dfe092123926111562a2c22fe3cbd Mon Sep 17 00:00:00 2001
From: philiparpin <philip.arpin@me.com>
Date: Sat, 28 Mar 2020 09:23:29 -0400
Subject: [PATCH 2/2] removed unnecessary data in LabelMap

---
 src/App.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 707c4d7..89688b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -45,11 +45,6 @@ export const labelMap: LabelMap = {
     card: 'Collects samples',
     icon: faVial,
   },
-  is_collecting_samples_onsite: {
-    sidebar: 'Collects samples for testing',
-    card: 'Collects samples onsite',
-    icon: faVial,
-  },
 };
 
 // Controls toggles