Merge pull request #46 from codersagainstcovidorg/location-modal-cleanup

Slimmed LocationModal into three seperate components

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;

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;