From bdf05ee4ff91c048b0190c81055fe1391ac7bb08 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Wed, 18 Nov 2020 11:05:58 -0500 Subject: [PATCH 01/15] AC-491 fix: added styles for experiences mobile view --- .../experiences/feedback-experiences.js | 17 ++++--- .../experiences/initial-experiences.js | 11 +++-- .../experiences/submit-experiences.js | 10 ++-- .../general/modals/share-experiences-modal.js | 14 +++--- src/constants/experiences.constants.js | 48 +++++++++---------- 5 files changed, 53 insertions(+), 47 deletions(-) diff --git a/src/components/experiences/feedback-experiences.js b/src/components/experiences/feedback-experiences.js index 92b0cb77..d58d82e9 100644 --- a/src/components/experiences/feedback-experiences.js +++ b/src/components/experiences/feedback-experiences.js @@ -90,10 +90,10 @@ export default function FeedbackExperiences(props) { const Content = styled(DialogContent)` overflow-y: visible; - padding: 0 24px; + padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; text-align: center; letter-spacing: -0.41px; - font-size: 20px; + font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; `; const Actions = styled(DialogActions)` @@ -106,15 +106,20 @@ const Actions = styled(DialogActions)` const Box = styled(DialogActions)` flex-direction: row; align-self: center; + ${window.innerWidth < 960 ? 'margin: 3px' : ''}; + .gBTTJU { + ${window.innerWidth < 960 ? 'min-width: 127px' : ''}; + ${window.innerWidth < 960 ? 'height: 40px' : ''}; + ${window.innerWidth < 960 ? 'padding: 3px' : ''}; + } `; const TagButton = styled(PrimaryButton)` border-color: #007AFF; border-radius: 20px; - height: 60%; - width: 50%; + ${window.innerWidth < 960 ? 'font-size: 10px' : ''}; + height: ${window.innerWidth < 960 ? '100%' : '65%'}; .MuiButton-label { - width: 100%; align-items: center; justify-content: center; display: flex; @@ -130,7 +135,7 @@ const NextButton = styled(PrimaryButton)` `; const SpaceButton = styled(PrimaryButton)` - margin-top: 15px; + margin-top: 20px; align-self: center; width: 30%; `; \ No newline at end of file diff --git a/src/components/experiences/initial-experiences.js b/src/components/experiences/initial-experiences.js index e6f13268..ce6bebd6 100644 --- a/src/components/experiences/initial-experiences.js +++ b/src/components/experiences/initial-experiences.js @@ -33,11 +33,11 @@ export default function InitialExperiences(props) { handleFeedback(true)}> - + Positive handleFeedback(false)}> - + Negative @@ -59,10 +59,10 @@ export default function InitialExperiences(props) { const Content = styled(DialogContent)` overflow-y: visible; - padding: 0 24px; + padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; text-align: center; letter-spacing: -0.41px; - font-size: 20px; + font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; `; const Actions = styled(DialogActions)` @@ -72,6 +72,7 @@ const Actions = styled(DialogActions)` const RateButton = styled(PrimaryButton)` border-color: #007AFF; + ${window.innerWidth < 960 ? 'min-width: 110px' : ''}; .MuiButton-label { width: 100%; height: 55%; @@ -92,7 +93,7 @@ const NextButton = styled(PrimaryButton)` `; const SpaceButton = styled(PrimaryButton)` - margin-top: 40px; + margin-top: 30px; align-self: center; width: 30%; `; \ No newline at end of file diff --git a/src/components/experiences/submit-experiences.js b/src/components/experiences/submit-experiences.js index c271ab74..26568fa2 100644 --- a/src/components/experiences/submit-experiences.js +++ b/src/components/experiences/submit-experiences.js @@ -34,10 +34,10 @@ export default function SubmitExperiences(props) { const Content = styled(DialogContent)` overflow-y: hidden; margin-bottom: 15px; - padding: 0 24px; + padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; text-align: center; letter-spacing: -0.41px; - font-size: 20px; + font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; `; const Actions = styled(DialogActions)` @@ -47,7 +47,7 @@ const Actions = styled(DialogActions)` const DoneButton = styled(PrimaryButton)` border-color: #007AFF; - margin-bottom: 30%; + margin-bottom: ${window.innerWidth < 960 ? '0%' : '30%'}; `; const Title = styled(DialogTitle)` @@ -56,7 +56,7 @@ const Title = styled(DialogTitle)` flex-direction: column; align-items: center; text-align: center; - font-size: 24px; - margin: 15px; + font-size: ${window.innerWidth < 960 ? '18px' : '24px'}; + margin: ${window.innerWidth < 960 ? '0px' : '15px'}; } `; \ No newline at end of file diff --git a/src/components/general/modals/share-experiences-modal.js b/src/components/general/modals/share-experiences-modal.js index 511ecb32..ec95bf68 100644 --- a/src/components/general/modals/share-experiences-modal.js +++ b/src/components/general/modals/share-experiences-modal.js @@ -144,10 +144,9 @@ const ShareExperienceContainer = styled(Dialog)` .MuiPaper-rounded { border-radius: 30px; padding: 25px; - width: 70%; - height: 60%; + height: ${window.innerWidth < 960 ? '450px' : '70%'}; flex: 1; - justify-content: space-between; + justify-content: ${window.innerWidth < 960 ? 'space-evenly' : 'space-between'}; } `; @@ -157,21 +156,22 @@ const Title = styled(DialogTitle)` flex-direction: column; align-items: center; text-align: center; - font-size: 24px; - margin: 15px; + font-size: ${window.innerWidth < 960? '18px' : '24px'}; + margin: ${window.innerWidth < 960 ? '5px' : '15px'}; } + padding: 0px 20px; `; const CloseButton = styled(IconButton)` position: absolute; top: 0; right: 0; - margin: 20px; + margin:${window.innerWidth < 960 ? '10px' : '20px'}; `; const BackButton = styled(IconButton)` position: absolute; top: 0; left: 0; - margin: 20px; + margin: ${window.innerWidth < 960 ? '10px' : '20px'}; `; \ No newline at end of file diff --git a/src/constants/experiences.constants.js b/src/constants/experiences.constants.js index b242d389..3d4e232a 100644 --- a/src/constants/experiences.constants.js +++ b/src/constants/experiences.constants.js @@ -132,38 +132,38 @@ export const NEGATIVE_TAGS = [ { id: 'ph', name: 'Poor Hygiene', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'su', name: 'Seemed Understaffed', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'ct', name: 'Could Not Get Tested', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'lt', name: 'Long Wait Time', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'ca', name: 'Confusing Process', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'oc', name: 'Overly Crowded', - icon: , - whiteIcon: + icon: , + whiteIcon: }, ]; @@ -171,37 +171,37 @@ export const NEGATIVE_TAGS = [ { id: 'st', name: 'Short Wait Time', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'gh', name: 'Good Hygiene', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'fs', name: 'Friendly Staff', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'pp', name: 'PPE Provided', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'se', name: 'Social Distancing', - icon: , - whiteIcon: + icon: , + whiteIcon: }, { id: 'gm', name: 'Good Bedside Manner', - icon: , - whiteIcon: + icon: , + whiteIcon: }, ]; \ No newline at end of file From 96ab3bab27eb229707e00d189c54cc5be3dbeb04 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Fri, 20 Nov 2020 23:24:32 -0500 Subject: [PATCH 02/15] AC-491 feature: wrapped ternaries in parenthesis and solidified class --- src/components/experiences/feedback-experiences.js | 14 ++++++-------- src/components/experiences/initial-experiences.js | 10 +++++----- src/components/experiences/submit-experiences.js | 10 +++++----- .../general/modals/share-experiences-modal.js | 12 ++++++------ 4 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/components/experiences/feedback-experiences.js b/src/components/experiences/feedback-experiences.js index d58d82e9..758cb64c 100644 --- a/src/components/experiences/feedback-experiences.js +++ b/src/components/experiences/feedback-experiences.js @@ -106,19 +106,17 @@ const Actions = styled(DialogActions)` const Box = styled(DialogActions)` flex-direction: row; align-self: center; - ${window.innerWidth < 960 ? 'margin: 3px' : ''}; - .gBTTJU { - ${window.innerWidth < 960 ? 'min-width: 127px' : ''}; - ${window.innerWidth < 960 ? 'height: 40px' : ''}; - ${window.innerWidth < 960 ? 'padding: 3px' : ''}; - } + ${((window.innerWidth < 960) ? 'margin: 3px' : '')} `; const TagButton = styled(PrimaryButton)` border-color: #007AFF; border-radius: 20px; - ${window.innerWidth < 960 ? 'font-size: 10px' : ''}; - height: ${window.innerWidth < 960 ? '100%' : '65%'}; + ${((window.innerWidth < 960) ? 'font-size: 10px' : '')}; + height: ${((window.innerWidth) < 960 ? '100%' : '65%')}; + ${((window.innerWidth < 960) ? 'min-width: 127px' : '')}; + ${((window.innerWidth < 960) ? 'height: 40px' : '')}; + ${((window.innerWidth < 960) ? 'padding: 3px' : '')}; .MuiButton-label { align-items: center; justify-content: center; diff --git a/src/components/experiences/initial-experiences.js b/src/components/experiences/initial-experiences.js index ce6bebd6..3e512f87 100644 --- a/src/components/experiences/initial-experiences.js +++ b/src/components/experiences/initial-experiences.js @@ -33,11 +33,11 @@ export default function InitialExperiences(props) { handleFeedback(true)}> - + Positive handleFeedback(false)}> - + Negative @@ -59,10 +59,10 @@ export default function InitialExperiences(props) { const Content = styled(DialogContent)` overflow-y: visible; - padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; + padding: ${((window.innerWidth < 960) ? '0px' : '0 24px')}; text-align: center; letter-spacing: -0.41px; - font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; + font-size: ${((window.innerWidth < 960) ? '16px' : '20px')}; `; const Actions = styled(DialogActions)` @@ -72,7 +72,7 @@ const Actions = styled(DialogActions)` const RateButton = styled(PrimaryButton)` border-color: #007AFF; - ${window.innerWidth < 960 ? 'min-width: 110px' : ''}; + ${((window.innerWidth < 960) ? 'min-width: 110px' : '')}; .MuiButton-label { width: 100%; height: 55%; diff --git a/src/components/experiences/submit-experiences.js b/src/components/experiences/submit-experiences.js index 26568fa2..c89c8bda 100644 --- a/src/components/experiences/submit-experiences.js +++ b/src/components/experiences/submit-experiences.js @@ -34,10 +34,10 @@ export default function SubmitExperiences(props) { const Content = styled(DialogContent)` overflow-y: hidden; margin-bottom: 15px; - padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; + padding: ${((window.innerWidth < 960) ? '0px' : '0 24px')}; text-align: center; letter-spacing: -0.41px; - font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; + font-size: ${((window.innerWidth < 960) ? '16px' : '20px')}; `; const Actions = styled(DialogActions)` @@ -47,7 +47,7 @@ const Actions = styled(DialogActions)` const DoneButton = styled(PrimaryButton)` border-color: #007AFF; - margin-bottom: ${window.innerWidth < 960 ? '0%' : '30%'}; + margin-bottom: ${((window.innerWidth < 960) ? '0%' : '30%')}; `; const Title = styled(DialogTitle)` @@ -56,7 +56,7 @@ const Title = styled(DialogTitle)` flex-direction: column; align-items: center; text-align: center; - font-size: ${window.innerWidth < 960 ? '18px' : '24px'}; - margin: ${window.innerWidth < 960 ? '0px' : '15px'}; + font-size: ${((window.innerWidth < 960) ? '18px' : '24px')}; + margin: ${((window.innerWidth < 960) ? '0px' : '15px')}; } `; \ No newline at end of file diff --git a/src/components/general/modals/share-experiences-modal.js b/src/components/general/modals/share-experiences-modal.js index ec95bf68..5c6d1a6b 100644 --- a/src/components/general/modals/share-experiences-modal.js +++ b/src/components/general/modals/share-experiences-modal.js @@ -144,9 +144,9 @@ const ShareExperienceContainer = styled(Dialog)` .MuiPaper-rounded { border-radius: 30px; padding: 25px; - height: ${window.innerWidth < 960 ? '450px' : '70%'}; + height: ${((window.innerWidth < 960) ? '450px' : '70%')}; flex: 1; - justify-content: ${window.innerWidth < 960 ? 'space-evenly' : 'space-between'}; + justify-content: ${((window.innerWidth < 960) ? 'space-evenly' : 'space-between')}; } `; @@ -156,8 +156,8 @@ const Title = styled(DialogTitle)` flex-direction: column; align-items: center; text-align: center; - font-size: ${window.innerWidth < 960? '18px' : '24px'}; - margin: ${window.innerWidth < 960 ? '5px' : '15px'}; + font-size: ${((window.innerWidth < 960) ? '18px' : '24px')}; + margin: ${((window.innerWidth < 960) ? '5px' : '15px')}; } padding: 0px 20px; `; @@ -166,12 +166,12 @@ const CloseButton = styled(IconButton)` position: absolute; top: 0; right: 0; - margin:${window.innerWidth < 960 ? '10px' : '20px'}; + margin:${((window.innerWidth < 960) ? '10px' : '20px')}; `; const BackButton = styled(IconButton)` position: absolute; top: 0; left: 0; - margin: ${window.innerWidth < 960 ? '10px' : '20px'}; + margin: ${((window.innerWidth < 960) ? '10px' : '20px')}; `; \ No newline at end of file From ce019227ea61787b37d4f44ff36c2af2b06aeb27 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Mon, 23 Nov 2020 19:27:21 -0500 Subject: [PATCH 03/15] AC-491 feature: fixed last ternary () I missed --- src/components/experiences/feedback-experiences.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/experiences/feedback-experiences.js b/src/components/experiences/feedback-experiences.js index 758cb64c..3b624965 100644 --- a/src/components/experiences/feedback-experiences.js +++ b/src/components/experiences/feedback-experiences.js @@ -90,10 +90,10 @@ export default function FeedbackExperiences(props) { const Content = styled(DialogContent)` overflow-y: visible; - padding: ${window.innerWidth < 960 ? '0px' : '0 24px'}; + padding: ${((window.innerWidth < 960) ? '0px' : '0 24px')}; text-align: center; letter-spacing: -0.41px; - font-size: ${window.innerWidth < 960 ? '16px' : '20px'}; + font-size: ${((window.innerWidth < 960) ? '16px' : '20px')}; `; const Actions = styled(DialogActions)` From 7ea876fdbee721ddc6784d2d95595d4a0aee162c Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Mon, 7 Dec 2020 20:13:41 -0500 Subject: [PATCH 04/15] AC-492 feature: changed rate limit to prompt at the beginning of workflow and modularized form modal --- src/components/general/modals/form-modal.js | 20 +------ .../general/modals/share-experiences-modal.js | 6 +-- src/components/general/pin-location.js | 22 ++++++++ src/components/general/share-experiences.js | 52 +++++++++++++++++-- src/services/experience.service.js | 9 ++++ 5 files changed, 85 insertions(+), 24 deletions(-) diff --git a/src/components/general/modals/form-modal.js b/src/components/general/modals/form-modal.js index 51d37209..234cf0a4 100644 --- a/src/components/general/modals/form-modal.js +++ b/src/components/general/modals/form-modal.js @@ -1,16 +1,13 @@ import React, { useState } from 'react'; -import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton } from '@material-ui/core'; import CloseIcon from '@material-ui/icons/Close'; import { isNullOrUndefined } from '@util/general.helpers'; -import PrimaryButton from '@general/buttons/primary-button'; import ModalService from '@services/modal.service'; export default function FormModal(props) { - const history = useHistory(); const modalService = ModalService.getInstance(); modalService.registerModal(props.modalName, toggleModal); @@ -48,12 +45,7 @@ export default function FormModal(props) { )} - history.push('/sign-in')}> - Login - - history.push('/sign-up')}> - Create Account - + {props.actions} @@ -87,7 +79,7 @@ const Content = styled(DialogContent)` padding: 0 24px; text-align: center; letter-spacing: -0.41px; - font-size: 16px; + font-size: 18px; `; const Actions = styled(DialogActions)` @@ -101,11 +93,3 @@ const CloseButton = styled(IconButton)` margin: 20px; `; -const LoginButton = styled(PrimaryButton)` - box-shadow: 0px 0px 10px 5px lightGrey; -`; - -const CreateAccountButton = styled(PrimaryButton)` - box-shadow: 0px 0px 10px 5px lightGrey; - margin-top: 10px; -`; diff --git a/src/components/general/modals/share-experiences-modal.js b/src/components/general/modals/share-experiences-modal.js index 5c6d1a6b..d163828c 100644 --- a/src/components/general/modals/share-experiences-modal.js +++ b/src/components/general/modals/share-experiences-modal.js @@ -83,9 +83,9 @@ export default function ShareExperiencesModal(props) { }) .catch((err) => { setExperienceResult({ - title: 'Please try again tomorrow.', - content: `To help ensure authenticity, you'll need to wait until tomorrow - to share your Experience at ${props.testTitle} again. Thank you!` + title: 'An error has occured.', + content: `An error has occured while trying to share your Experience. + Please try again later.` }); setCurrentScreen(3); }); diff --git a/src/components/general/pin-location.js b/src/components/general/pin-location.js index f60e69d7..fccb2bf8 100644 --- a/src/components/general/pin-location.js +++ b/src/components/general/pin-location.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { useHistory } from 'react-router-dom'; import styled, { css, keyframes } from 'styled-components'; import { IconButton } from '@material-ui/core'; @@ -8,10 +9,12 @@ import FormModal from '@general/modals/form-modal'; import PeopleService from '@services/people.service'; import ModalService from '@services/modal.service'; +import PrimaryButton from '@general/buttons/primary-button'; export default function PinLocation({ location }) { const peopleService = PeopleService.getInstance(); const modalService = ModalService.getInstance(); + const history = useHistory(); const initialLocationState = { location, @@ -49,6 +52,16 @@ export default function PinLocation({ location }) { modalName="promptLogin" contentText="You need to be logged in to AllClear to save pinned locations. Please login or create an account to continue." icon={} + actions = { + <> + history.push('/sign-in')}> + Login + + history.push('/sign-up')}> + Create Account + + + } /> ); @@ -106,3 +119,12 @@ const pinAnimation = keyframes` transform: scale(1, 1) rotate(-15deg) translateY(0); } `; + +const LoginButton = styled(PrimaryButton)` + box-shadow: 0px 0px 10px 5px lightGrey; +`; + +const CreateAccountButton = styled(PrimaryButton)` + box-shadow: 0px 0px 10px 5px lightGrey; + margin-top: 10px; +`; diff --git a/src/components/general/share-experiences.js b/src/components/general/share-experiences.js index 152e6315..cd6af354 100644 --- a/src/components/general/share-experiences.js +++ b/src/components/general/share-experiences.js @@ -1,25 +1,37 @@ import React, { useContext } from 'react'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; +import styled from 'styled-components'; + +import { useHistory } from 'react-router-dom'; import FormModal from '@general/modals/form-modal.js'; import ShareExperiencesModal from '@general/modals/share-experiences-modal'; +import PrimaryButton from '@general/buttons/primary-button'; import ModalService from '@services/modal.service'; +import ExperienceService from '@services/experience.service'; import { AppContext } from '@contexts/app.context'; export default function ShareExperience(props) { const { appState } = useContext(AppContext); const isLoggedIn = appState.sessionId ? true : false; + const experienceService = ExperienceService.getInstance(); + + const history = useHistory(); const modalService = ModalService.getInstance(); const handleShareExperience = () => { - if(!isLoggedIn){ - modalService.toggleModal('promptLoginExperiences', true); + if(!isLoggedIn){ + modalService.toggleModal('promptLoginExperiences', true); } else { - modalService.toggleModal('promptShareExperiences'+props.testTitle, true); + experienceService.limit(appState.sessionId, props.facilityId).then((result, i) => { + modalService.toggleModal('promptShareExperiences'+props.testTitle, true); + }).catch((error) => { + modalService.toggleModal('promptRateLimit', true); + }); } }; @@ -38,6 +50,33 @@ export default function ShareExperience(props) { + history.push('/sign-in')}> + Login + + history.push('/sign-up')}> + Create Account + + + } + /> + + modalService.toggleModal('promptRateLimit', false)} + > + Done + + + } /> Date: Thu, 10 Dec 2020 19:38:58 -0500 Subject: [PATCH 05/15] AC-493 feature: create an edit-test-center on front end with prepopulated for an edit request --- src/Router.js | 2 + .../testing-location-list-item.js | 8 +- src/constants/add-test-center.constants.js | 12 + src/pages/edit-test-center.page.js | 492 ++++++++++++++++++ src/pages/test-center.page.js | 7 +- src/services/facilitate.service.js | 17 + src/util/general.helpers.js | 10 - 7 files changed, 528 insertions(+), 20 deletions(-) create mode 100644 src/pages/edit-test-center.page.js diff --git a/src/Router.js b/src/Router.js index b2f6e4f9..8d20d004 100644 --- a/src/Router.js +++ b/src/Router.js @@ -34,6 +34,7 @@ import StateListPage from '@pages/state-list.page'; import StatePage from '@pages/state.page'; import CityPage from '@pages/city.page'; import AddTestCenterPage from '@pages/add-test-center.page'; +import EditTestCenterPage from '@pages/edit-test-center.page'; import MetadataService from '@services/metadata.service'; export const history = createBrowserHistory(); @@ -113,6 +114,7 @@ export default function Router() { {/* /:city/:test-center-name */} + {/* SEO */} diff --git a/src/components/map-components/testing-location-list-item.js b/src/components/map-components/testing-location-list-item.js index 11fba57f..5ff6612d 100644 --- a/src/components/map-components/testing-location-list-item.js +++ b/src/components/map-components/testing-location-list-item.js @@ -16,7 +16,7 @@ import PeopleIcon from '@material-ui/icons/People'; import LocalMallIcon from '@material-ui/icons/LocalMall'; import EventIcon from '@material-ui/icons/Event'; import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord'; -import {boolToEng, isNullOrUndefined, getFeedbackButtonURL, isTaggableLocation, sortExperiencesTags} from '@util/general.helpers'; +import {boolToEng, isNullOrUndefined, isTaggableLocation, sortExperiencesTags} from '@util/general.helpers'; import ExternalItemLinks from './external-item-links'; import CustomizedExpansionPanel, {ExpansionPanelSummary, ExpansionPanelDetails} from './expansion-panel'; import {Link} from 'react-router-dom'; @@ -153,8 +153,6 @@ export default function TestingLocationListItem(props) { ); - const changeURL = getFeedbackButtonURL(props); - function buildExperienceSection(experiencesData) { const {positives, negatives, total, tags} = experiencesData; @@ -375,9 +373,7 @@ export default function TestingLocationListItem(props) { )} View Full Test Center Detail
- - Suggest Change To Test Center Information - + Suggest Change to Test Center Information

Last update: {updatedAt.toLocaleString()}

diff --git a/src/constants/add-test-center.constants.js b/src/constants/add-test-center.constants.js index 6c796894..81176032 100644 --- a/src/constants/add-test-center.constants.js +++ b/src/constants/add-test-center.constants.js @@ -34,31 +34,37 @@ export const OFFERINGS = [ displayName: 'Antibody Test', icon: DiagnosticTest, key: 'ii', + value: false }, { displayName: 'Nasal Swab Test', icon: Swab, key: 'rp', + value: false }, { displayName: 'Drivethrough', icon: Car, key: 'driveThru', + value: false }, { displayName: 'Plasma Donation', icon: Donate, key: 'canDonatePlasma', + value: false }, { displayName: 'Free or Low-Cost Testing', icon: DollarSign, key: 'freeOrLowCost', + value: false }, { displayName: 'Online Scheduling', icon: Monitor, key: 'teleScreeningAvailable', + value: false }, ]; @@ -67,31 +73,37 @@ export const SCREENING_METHODS = [ displayName: 'Accepts Insurance', icon: InsuranceCard, key: 'acceptsInsurance', + value: false }, { displayName: 'Government ID Required', icon: Id, key: 'governmentIdRequired', + value: false }, { displayName: 'Referral Required', icon: Users, key: 'referralRequired', + value: false }, { displayName: 'Appointment Required', icon: Calendar, key: 'appointmentRequired', + value: false }, { displayName: 'First Responders Prioritized', icon: Transportation, key: 'firstResponderFriendly', + value: false }, { displayName: 'Minimum Age', icon: AlertTriangle, key: 'minimumAge', + value: false }, ]; diff --git a/src/pages/edit-test-center.page.js b/src/pages/edit-test-center.page.js new file mode 100644 index 00000000..1e214a6a --- /dev/null +++ b/src/pages/edit-test-center.page.js @@ -0,0 +1,492 @@ +import React, { Component } from 'react'; +import { bindAll, cloneDeep } from 'lodash'; +import styled from 'styled-components'; + +import FacilityService from '@services/facility.service.js'; + +import { + Container, + TextField, + MenuItem, + Select, + RadioGroup, + Radio, + FormControlLabel, + FormControl, +} from '@material-ui/core'; + +import { AppContext } from '@contexts/app.context'; +import { + GOT_TESTED_OPTIONS, + OFFERINGS, + SCREENING_METHODS, + POST_DATA_STATE, +} from '@constants/add-test-center.constants'; +import Header from '@general/headers/header'; +import PrimaryButton from '@general/buttons/primary-button'; +import SnackbarMessage from '@general/alerts/snackbar-message'; +import TypesService from '@services/types.service.js'; +import FacilitateService from '@services/facilitate.service.js'; + +export default class EditTestCenterPage extends Component { + static contextType = AppContext; + + initialState = { + postData: POST_DATA_STATE, + gotTested: GOT_TESTED_OPTIONS, + offerings: OFFERINGS, + screening: SCREENING_METHODS, + snackbarOpen: false, + snackbarSeverity: '', + snackbarMessage: '', + }; + + constructor(props) { + super(props); + bindAll(this, ['onCheckboxSelected', 'onCancelClicked', 'handleSubmit', 'handleSnackbarClose']); + this.typesService = TypesService.getInstance(); + this.facilitateService = FacilitateService.getInstance(); + this.facilityService = FacilityService.getInstance(); + this.state = cloneDeep(this.initialState); + this.id = props.match.params.id; + } + + async componentDidMount() { + + try { + const testCenterTypes = await this.typesService.getFacilities(); + const testCenterDetails = await this.facilityService.getFacility(this.id); + + if (testCenterTypes?.length) { + this.setState({ testCenterTypes }); + } + + let allTestTypes = []; + if(testCenterDetails.data.testTypes) { + testCenterDetails.data.testTypes.map((testType) => { + allTestTypes.push({id: testType.id}); + }); + } + + this.setState((prevState) => { + const offeringsArr = prevState.offerings.map((item, j) => { + if(allTestTypes.some((e) => e.id === item.key)){ + item.value= true; + } else if(testCenterDetails.data.driveThru && item.key==='driveThru'){ + item.value=true; + } else if(testCenterDetails.data.freeOrLowCost && item.key==='freeOrLowCost'){ + item.value=true; + } else if(testCenterDetails.data.teleScreeningAvailable && item.key==='teleScreeningAvailable'){ + item.value=true; + } else if(testCenterDetails.data.canDonatePlasma && item.key==='canDonatePlasma'){ + item.value=true; + } + return item; + }); + + const screeningArr = prevState.screening.map((item, j) => { + if(testCenterDetails.data.minimumAge && item.key==='minimumAge'){ + item.value=true; + } else if(testCenterDetails.data.appointmentRequired && item.key==='appointmentRequired'){ + item.value=true; + } else if(testCenterDetails.data.acceptsInsurance && item.key==='acceptsInsurance'){ + item.value=true; + } else if(testCenterDetails.data.governmentIdRequired && item.key==='governmentIdRequired'){ + item.value=true; + } else if(testCenterDetails.data.referralRequired && item.key==='referralRequired'){ + item.value=true; + } else if(testCenterDetails.data.firstResponderFriendly && item.key==='firstResponderFriendly'){ + item.value=true; + } + return item; + }); + return { + ...prevState, + postData: { + id: this.id, + name: testCenterDetails.data.name, + address: testCenterDetails.data.address, + driveThru: testCenterDetails.data.driveThru, + teleScreeningAvailable: testCenterDetails.data.teleScreeningAvailable, + freeOrLowCost: testCenterDetails.data.freeOrLowCost, + acceptsInsurance: testCenterDetails.data.acceptsInsurance, + governmentIdRequired: testCenterDetails.data.governmentIdRequired, + referralRequired: testCenterDetails.data.referralRequired, + firstResponderFriendly: testCenterDetails.data.firstResponderFriendly, + canDonatePlasma: testCenterDetails.data.canDonatePlasma, + appointmentRequired: testCenterDetails.data.appointmentRequired, + notes: '', + gotTested: undefined, + type: testCenterDetails.data.typeId ? { id: testCenterDetails.data.typeId } : { id: 'none' }, + testTypes: allTestTypes, + minimumAge: testCenterDetails.data.minimumAge ? '18' : undefined, + }, + offerings: offeringsArr, + screening: screeningArr + }; + }); + } catch(err) { + // display error if test center id is invalid + this.setState({ + ...this.initialState, + snackbarMessage: 'Test Center does not exist.', + snackbarSeverity: 'error', + snackbarOpen: true, + }); + } + } + + onCheckboxSelected(selected) { + selected.value = !selected.value; + if (selected.key === 'ii' || selected.key === 'rp') { + if (selected.value) { + // add to testTypes array + this.setState((prevState) => ({ + postData: { + ...prevState.postData, + testTypes: [...prevState.postData.testTypes, { id: selected.key }], + }, + })); + } else { + // remove from testTypes array + this.setState((prevState) => ({ + postData: { + ...prevState.postData, + testTypes: prevState.postData.testTypes.filter((key) => key.id !== selected.key), + }, + })); + } + } else if (selected.key === 'minimumAge') { + if (selected.value) { + // converting minimumAge boolean to actual minimum age value + this.setState((prevState) => ({ + postData: { ...prevState.postData, [selected.key]: 18 }, + })); + } else { + this.setState((prevState) => ({ + postData: { ...prevState.postData, [selected.key]: undefined }, + })); + } + } else { + this.setState((prevState) => ({ + postData: { ...prevState.postData, [selected.key]: selected.value }, + })); + } + } + + onCancelClicked() { + this.setState(cloneDeep(this.initialState), () => { + if (this.props.history.length > 2) { + // if history is not empty, go back: + this.props.history.goBack(); + } else { + // else go to Map page + this.props.history.push(`/map/selection=${this.id}`); + } + }); + } + + async handleSubmit(e) { + e.preventDefault(); + + if (!this.state.postData.name || !this.state.postData.address) { + this.setState({ + snackbarMessage: 'Please complete required fields', + snackbarSeverity: 'error', + snackbarOpen: true, + }); + } else { + + const response = await this.facilitateService.changeFacilityByCitizen({ value: this.state.postData }); + + if (response.error) { + this.setState({ + snackbarMessage: 'An error occured. Please try again later.', + snackbarSeverity: 'error', + snackbarOpen: true, + }); + } else { + this.setState((prevState) => ({ + ...prevState, + snackbarMessage: 'Success! The edited Test Center has been submitted', + snackbarSeverity: 'success', + snackbarOpen: true, + })); + } + } + } + + handleSnackbarClose() { + this.setState({ snackbarOpen: false }); + + // return to map if test center is invalid + if(this.state.snackbarMessage === 'Test Center does not exist.'){ + this.onCancelClicked(); + } + } + + render() { + return ( + <> +
+ +

Edit Existing Test Center

+

+ Edit the following form to update a test center within AllClear. All submissions will be reviewed + by the AllClear team within 24 hours. +

+ + +
+
+

Test Center Profile

+ + this.setState({ postData: { ...this.state.postData, name: event.target.value } }) + } + /> + + this.setState({ postData: { ...this.state.postData, address: event.target.value } }) + } + /> + + + + + this.setState({ postData: { ...this.state.postData, notes: event.target.value } }) + } + /> + +

Were you able to get tested at this location?

+ + {this.state.gotTested.map((option) => ( + } + label={option.displayName} + onChange={(event) => + this.setState({ postData: { ...this.state.postData, gotTested: option.value } }) + } + /> + ))} + + +
+
+

Test Center Offerings

+
+

Select all offerings that exist at this test center:

+ + {this.state.offerings.map((option, index) => ( + // TODO: Make checkbox partial + + {`Select + + + + ))} + +
+
+

Select all screening methods used at this test center:

+ + {this.state.screening.map((option, index) => ( + // TODO: Make checkbox partial + + {`Select + + + + ))} + +
+
+ + Cancel + + Submit Test Center + + +
+ +
+ + + ); + } +} + +const Section = styled.section` + background: ${(props) => props.theme.palette.gradient.mobile}; + ${(props) => props.theme.breakpoints.up('md')} { + background: ${(props) => props.theme.palette.gradient.desktop}; + } + svg { + color: #fff; + } +`; + +const H3 = styled.h3` + margin-bottom: 20px; + font-size: 24px; +`; + +const H4 = styled.h4` + margin-bottom: 20px; + font-size: 16px; +`; + +const StyledHeader = styled(Header)` + .color-block { + display: none; + } +`; + +const Article = styled.article` + padding: 44px 0; + color: #fff; + + &:first-child { + border-bottom: 1px solid rgba(255, 255, 255, 0.4); + } + + > * { + width: 100%; + &:not(:last-child) { + margin-bottom: 20px; + } + } +`; + +const Checkboxes = styled.section` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); + column-gap: 17px; + row-gap: 17px; + margin-bottom: 40px; +`; + +const Checkbox = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + min-height: 122.78px; + text-align: center; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.5); + transition: background-color ease 0.5s; + cursor: pointer; + + * { + cursor: inherit; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + + &.checked { + border-color: ${(props) => props.theme.palette.secondary.main}; + background-color: ${(props) => props.theme.palette.secondary.main}; + } +`; + +const StyledRadio = styled(Radio)` + color: #fff; + &.Mui-checked { + color: #fff; + } +`; + +const ButtonContainer = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + column-gap: 32px; + row-gap: 32px; + margin-bottom: 61px; + + button { + font-size: 17px; + } +`; + +const CancelButton = styled(PrimaryButton)` + color: #fff; + background-color: rgba(255, 255, 255, 0.1); +`; + +const SubmitButton = styled(PrimaryButton)` + color: ${(props) => props.theme.palette.primary.main}; + background-color: #fff; + + &:hover { + background-color: #e1efff; + } +`; diff --git a/src/pages/test-center.page.js b/src/pages/test-center.page.js index f348d5d1..bfad901a 100644 --- a/src/pages/test-center.page.js +++ b/src/pages/test-center.page.js @@ -5,6 +5,7 @@ import { withRouter } from 'react-router'; import { Container, Button } from '@material-ui/core'; import PhoneIcon from '@material-ui/icons/Phone'; import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft'; +import { Link } from 'react-router-dom'; // components import LinkButton from '@general/buttons/link-button'; @@ -20,7 +21,6 @@ import { triggerShareAction, getShareActionSnackbar } from '@util/social.helpers import { getFacilityDetailsMap, convertToReadableDate, - getFeedbackButtonURL, isTaggableLocation, applyCovidTag } from '@util/general.helpers'; @@ -63,7 +63,6 @@ class TestCenterPage extends Component { const facility = res.data; this.loading = false; this.facilityDetailsMap = getFacilityDetailsMap(facility); - this.feedbackURL = getFeedbackButtonURL(facility); facility.lastUpdated = convertToReadableDate(facility.updatedAt); return facility; }) @@ -213,7 +212,7 @@ class TestCenterPage extends Component {
Want to help us improve our data? - + - +
)} diff --git a/src/services/facilitate.service.js b/src/services/facilitate.service.js index e607dac8..be93b473 100644 --- a/src/services/facilitate.service.js +++ b/src/services/facilitate.service.js @@ -41,4 +41,21 @@ export default class FacilitateService { return error; } } + + async changeFacilityByCitizen(body) { + try { + const response = await Axios({ + method: 'PUT', + url: `${this.baseURL}/citizen`, + data: body, + }); + return response; + } catch (e) { + const error = { + error: true, + ...e.response, + }; + return error; + } + } } diff --git a/src/util/general.helpers.js b/src/util/general.helpers.js index 69c43923..86d8f900 100644 --- a/src/util/general.helpers.js +++ b/src/util/general.helpers.js @@ -141,16 +141,6 @@ export function convertToReadableDate(dateStr) { return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; } -export function getFeedbackButtonURL(facility) { - return ` - https://airtable.com/shrVJrPQs4qQkcW4o?prefill_Name=${facility.name || facility.title || ''} - &prefill_Phone number=${facility.phone || ''} - &prefill_Hours=${facility.service_time === undefined ? '' : facility.service_time} - &prefill_This location was drive through=${(facility.driveThru.toString() === 'true' ? 'Drive Through' : '')} - &prefill_This location required an appointment=${boolToEng(facility.appointmentRequired) || ''} - &prefill_Address=${facility.description || facility.address || ''}`; -} - export function applyCovidTag({name, city, state, address, lastUpdated, text, url, type}) { const tag = { '@context': 'https://schema.org', From 355d48a409dcf5160644af97f1b63bd1db928a0a Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Thu, 10 Dec 2020 20:56:25 -0500 Subject: [PATCH 06/15] AC-493 feature: reduced statements to fix code smells --- src/pages/edit-test-center.page.js | 22 +++------------------- 1 file changed, 3 insertions(+), 19 deletions(-) diff --git a/src/pages/edit-test-center.page.js b/src/pages/edit-test-center.page.js index 1e214a6a..1fb7dfa8 100644 --- a/src/pages/edit-test-center.page.js +++ b/src/pages/edit-test-center.page.js @@ -72,30 +72,14 @@ export default class EditTestCenterPage extends Component { const offeringsArr = prevState.offerings.map((item, j) => { if(allTestTypes.some((e) => e.id === item.key)){ item.value= true; - } else if(testCenterDetails.data.driveThru && item.key==='driveThru'){ + } else if(testCenterDetails.data[item.key]){ item.value=true; - } else if(testCenterDetails.data.freeOrLowCost && item.key==='freeOrLowCost'){ - item.value=true; - } else if(testCenterDetails.data.teleScreeningAvailable && item.key==='teleScreeningAvailable'){ - item.value=true; - } else if(testCenterDetails.data.canDonatePlasma && item.key==='canDonatePlasma'){ - item.value=true; - } + } return item; }); const screeningArr = prevState.screening.map((item, j) => { - if(testCenterDetails.data.minimumAge && item.key==='minimumAge'){ - item.value=true; - } else if(testCenterDetails.data.appointmentRequired && item.key==='appointmentRequired'){ - item.value=true; - } else if(testCenterDetails.data.acceptsInsurance && item.key==='acceptsInsurance'){ - item.value=true; - } else if(testCenterDetails.data.governmentIdRequired && item.key==='governmentIdRequired'){ - item.value=true; - } else if(testCenterDetails.data.referralRequired && item.key==='referralRequired'){ - item.value=true; - } else if(testCenterDetails.data.firstResponderFriendly && item.key==='firstResponderFriendly'){ + if(testCenterDetails.data[item.key]){ item.value=true; } return item; From d2de3f23813760c2ae6c2f6af71fffa51f9c7533 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Thu, 10 Dec 2020 21:03:07 -0500 Subject: [PATCH 07/15] AC-493 feature: condenced last statement to fix final code smell --- src/pages/edit-test-center.page.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/edit-test-center.page.js b/src/pages/edit-test-center.page.js index 1fb7dfa8..d0b55adc 100644 --- a/src/pages/edit-test-center.page.js +++ b/src/pages/edit-test-center.page.js @@ -70,10 +70,8 @@ export default class EditTestCenterPage extends Component { this.setState((prevState) => { const offeringsArr = prevState.offerings.map((item, j) => { - if(allTestTypes.some((e) => e.id === item.key)){ + if(allTestTypes.some((e) => e.id === item.key) || testCenterDetails.data[item.key]){ item.value= true; - } else if(testCenterDetails.data[item.key]){ - item.value=true; } return item; }); From ac5046cad2f513834f745fdad198e46a89fe8751 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Tue, 15 Dec 2020 17:24:56 -0500 Subject: [PATCH 08/15] AC-493 feature: commented out previous url function instead of deleting it --- src/util/general.helpers.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/util/general.helpers.js b/src/util/general.helpers.js index 86d8f900..e346a64d 100644 --- a/src/util/general.helpers.js +++ b/src/util/general.helpers.js @@ -175,4 +175,14 @@ export function sortExperiencesTags(tagA, tagB){ } else { return tagB.count - tagA.count; } -} \ No newline at end of file +} + +/*export function getFeedbackButtonURL(facility) { + return ` + https://airtable.com/shrVJrPQs4qQkcW4o?prefill_Name=${facility.name || facility.title || ''} + &prefill_Phone number=${facility.phone || ''} + &prefill_Hours=${facility.service_time === undefined ? '' : facility.service_time} + &prefill_This location was drive through=${(facility.driveThru.toString() === 'true' ? 'Drive Through' : '')} + &prefill_This location required an appointment=${boolToEng(facility.appointmentRequired) || ''} + &prefill_Address=${facility.description || facility.address || ''}`; +}*/ \ No newline at end of file From b608edb9bb56a25ad824b7f832878e844f06c59b Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Wed, 16 Dec 2020 19:49:32 -0500 Subject: [PATCH 09/15] AC-493 feature: put duplicate code into component and fixed typo issue in constants --- src/components/general/test-center-update.js | 253 +++++++++++++++++ src/constants/add-test-center.constants.js | 2 +- src/pages/add-test-center.page.js | 281 ++----------------- src/pages/edit-test-center.page.js | 280 ++---------------- 4 files changed, 292 insertions(+), 524 deletions(-) create mode 100644 src/components/general/test-center-update.js diff --git a/src/components/general/test-center-update.js b/src/components/general/test-center-update.js new file mode 100644 index 00000000..046aa8ee --- /dev/null +++ b/src/components/general/test-center-update.js @@ -0,0 +1,253 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { + Container, + TextField, + MenuItem, + Select, + RadioGroup, + Radio, + FormControlLabel, + FormControl, +} from '@material-ui/core'; + +import Header from '@general/headers/header'; +import PrimaryButton from '@general/buttons/primary-button'; +import SnackbarMessage from '@general/alerts/snackbar-message'; + +export default function TestCenterUpdate(props) { + + return ( + <> + +

{props.title}

+

{props.content}

+ + +
+
+

Test Center Profile

+ props.onNameChange(event)} + /> + props.onAddressChange(event)} + /> + + + + props.onNotesChange(event)} + /> + +

Were you able to get tested at this location?

+ + {props.state.gotTested.map((option) => ( + } + label={option.displayName} + onChange={(event) => props.onGotTestedChange(event, option)} + /> + ))} + + +
+
+

Test Center Offerings

+
+

Select all offerings that exist at this test center:

+ + {props.state.offerings.map((option, index) => ( + // TODO: Make checkbox partial + + {`Select + + + + ))} + +
+
+

Select all screening methods used at this test center:

+ + {props.state.screening.map((option, index) => ( + // TODO: Make checkbox partial + + {`Select + + + + ))} + +
+
+ + Cancel + + Submit Test Center + + +
+ + + + ); +} + +const StyledHeader = styled(Header)` + .color-block { + display: none; + } +`; + +const H3 = styled.h3` +margin-bottom: 20px; +font-size: 24px; +`; + +const H4 = styled.h4` +margin-bottom: 20px; +font-size: 16px; +`; + +const Article = styled.article` +padding: 44px 0; +color: #fff; + +&:first-child { + border-bottom: 1px solid rgba(255, 255, 255, 0.4); +} + +> * { + width: 100%; + &:not(:last-child) { + margin-bottom: 20px; + } +} +`; + +const StyledRadio = styled(Radio)` + color: #fff; + &.Mui-checked { + color: #fff; + } +`; + +const Checkboxes = styled.section` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); + column-gap: 17px; + row-gap: 17px; + margin-bottom: 40px; +`; + +const Checkbox = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + min-height: 122.78px; + text-align: center; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.5); + transition: background-color ease 0.5s; + cursor: pointer; + + * { + cursor: inherit; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } + + &.checked { + border-color: ${(props) => props.theme.palette.secondary.main}; + background-color: ${(props) => props.theme.palette.secondary.main}; + } +`; + +const ButtonContainer = styled.div` + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + column-gap: 32px; + row-gap: 32px; + margin-bottom: 61px; + + button { + font-size: 17px; + } +`; + +const CancelButton = styled(PrimaryButton)` + color: #fff; + background-color: rgba(255, 255, 255, 0.1); +`; + +const SubmitButton = styled(PrimaryButton)` + color: ${(props) => props.theme.palette.primary.main}; + background-color: #fff; + + &:hover { + background-color: #e1efff; + } +`; \ No newline at end of file diff --git a/src/constants/add-test-center.constants.js b/src/constants/add-test-center.constants.js index 81176032..1d7372b3 100644 --- a/src/constants/add-test-center.constants.js +++ b/src/constants/add-test-center.constants.js @@ -63,7 +63,7 @@ export const OFFERINGS = [ { displayName: 'Online Scheduling', icon: Monitor, - key: 'teleScreeningAvailable', + key: 'telescreeningAvailable', value: false }, ]; diff --git a/src/pages/add-test-center.page.js b/src/pages/add-test-center.page.js index e901d5ea..91d5d1c4 100644 --- a/src/pages/add-test-center.page.js +++ b/src/pages/add-test-center.page.js @@ -2,17 +2,6 @@ import React, { Component } from 'react'; import { bindAll, cloneDeep } from 'lodash'; import styled from 'styled-components'; -import { - Container, - TextField, - MenuItem, - Select, - RadioGroup, - Radio, - FormControlLabel, - FormControl, -} from '@material-ui/core'; - import { AppContext } from '@contexts/app.context'; import { GOT_TESTED_OPTIONS, @@ -20,12 +9,11 @@ import { SCREENING_METHODS, POST_DATA_STATE, } from '@constants/add-test-center.constants'; -import Header from '@general/headers/header'; -import PrimaryButton from '@general/buttons/primary-button'; -import SnackbarMessage from '@general/alerts/snackbar-message'; import TypesService from '@services/types.service.js'; import FacilitateService from '@services/facilitate.service.js'; +import TestCenterUpdate from '../components/general/test-center-update'; + export default class AddTestCenterPage extends Component { static contextType = AppContext; @@ -139,157 +127,25 @@ export default class AddTestCenterPage extends Component { render() { return ( - <>
- -

Submit New Test Center

-

- Complete the following form to propose a new test center within AllClear. All submissions will be reviewed - by the AllClear team within 24 hours. -

- - -
-
-

Test Center Profile

- - this.setState({ postData: { ...this.state.postData, name: event.target.value } }) - } - /> - - this.setState({ postData: { ...this.state.postData, address: event.target.value } }) - } - /> - - - - - this.setState({ postData: { ...this.state.postData, notes: event.target.value } }) - } - /> - -

Were you able to get tested at this location?

- - {this.state.gotTested.map((option) => ( - } - label={option.displayName} - onChange={(event) => - this.setState({ postData: { ...this.state.postData, gotTested: option.value } }) - } - /> - ))} - - -
-
-

Test Center Offerings

-
-

Select all offerings that exist at this test center:

- - {this.state.offerings.map((option, index) => ( - // TODO: Make checkbox partial - - {`Select - - - - ))} - -
-
-

Select all screening methods used at this test center:

- - {this.state.screening.map((option, index) => ( - // TODO: Make checkbox partial - - {`Select - - - - ))} - -
-
- - Cancel - - Submit Test Center - - -
- + this.onCheckboxSelected.bind(this, option)} + handleSnackbarClose={() => this.handleSnackbarClose} + handleSubmit={(e) => this.handleSubmit(e)} + onCancelClicked={() => this.onCancelClicked} + onNameChange={(event) => this.setState({ postData: { ...this.state.postData, name: event.target.value } })} + onAddressChange={(event) => this.setState({ postData: { ...this.state.postData, address: event.target.value } })} + onNotesChange={(event) => this.setState({ postData: { ...this.state.postData, notes: event.target.value } })} + onTypeChange={(event) => this.setState({ postData: { ...this.state.postData, type: { id: event.target.value },}, })} + onGotTestedChange={(event, option) => this.setState({ postData: { ...this.state.postData, gotTested: option.value } })} + />
- - ); } } @@ -303,102 +159,3 @@ const Section = styled.section` color: #fff; } `; - -const H3 = styled.h3` - margin-bottom: 20px; - font-size: 24px; -`; - -const H4 = styled.h4` - margin-bottom: 20px; - font-size: 16px; -`; - -const StyledHeader = styled(Header)` - .color-block { - display: none; - } -`; - -const Article = styled.article` - padding: 44px 0; - color: #fff; - - &:first-child { - border-bottom: 1px solid rgba(255, 255, 255, 0.4); - } - - > * { - width: 100%; - &:not(:last-child) { - margin-bottom: 20px; - } - } -`; - -const Checkboxes = styled.section` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); - column-gap: 17px; - row-gap: 17px; - margin-bottom: 40px; -`; - -const Checkbox = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - min-height: 122.78px; - text-align: center; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.5); - transition: background-color ease 0.5s; - cursor: pointer; - - * { - cursor: inherit; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.1); - } - - &.checked { - border-color: ${(props) => props.theme.palette.secondary.main}; - background-color: ${(props) => props.theme.palette.secondary.main}; - } -`; - -const StyledRadio = styled(Radio)` - color: #fff; - &.Mui-checked { - color: #fff; - } -`; - -const ButtonContainer = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - column-gap: 32px; - row-gap: 32px; - margin-bottom: 61px; - - button { - font-size: 17px; - } -`; - -const CancelButton = styled(PrimaryButton)` - color: #fff; - background-color: rgba(255, 255, 255, 0.1); -`; - -const SubmitButton = styled(PrimaryButton)` - color: ${(props) => props.theme.palette.primary.main}; - background-color: #fff; - - &:hover { - background-color: #e1efff; - } -`; diff --git a/src/pages/edit-test-center.page.js b/src/pages/edit-test-center.page.js index d0b55adc..5477cb46 100644 --- a/src/pages/edit-test-center.page.js +++ b/src/pages/edit-test-center.page.js @@ -4,17 +4,6 @@ import styled from 'styled-components'; import FacilityService from '@services/facility.service.js'; -import { - Container, - TextField, - MenuItem, - Select, - RadioGroup, - Radio, - FormControlLabel, - FormControl, -} from '@material-ui/core'; - import { AppContext } from '@contexts/app.context'; import { GOT_TESTED_OPTIONS, @@ -22,11 +11,9 @@ import { SCREENING_METHODS, POST_DATA_STATE, } from '@constants/add-test-center.constants'; -import Header from '@general/headers/header'; -import PrimaryButton from '@general/buttons/primary-button'; -import SnackbarMessage from '@general/alerts/snackbar-message'; import TypesService from '@services/types.service.js'; import FacilitateService from '@services/facilitate.service.js'; +import TestCenterUpdate from '../components/general/test-center-update'; export default class EditTestCenterPage extends Component { static contextType = AppContext; @@ -89,7 +76,7 @@ export default class EditTestCenterPage extends Component { name: testCenterDetails.data.name, address: testCenterDetails.data.address, driveThru: testCenterDetails.data.driveThru, - teleScreeningAvailable: testCenterDetails.data.teleScreeningAvailable, + telescreeningAvailable: testCenterDetails.data.telescreeningAvailable, freeOrLowCost: testCenterDetails.data.freeOrLowCost, acceptsInsurance: testCenterDetails.data.acceptsInsurance, governmentIdRequired: testCenterDetails.data.governmentIdRequired, @@ -211,154 +198,24 @@ export default class EditTestCenterPage extends Component { return ( <>
- -

Edit Existing Test Center

-

- Edit the following form to update a test center within AllClear. All submissions will be reviewed - by the AllClear team within 24 hours. -

- - -
-
-

Test Center Profile

- - this.setState({ postData: { ...this.state.postData, name: event.target.value } }) - } - /> - - this.setState({ postData: { ...this.state.postData, address: event.target.value } }) - } - /> - - - - - this.setState({ postData: { ...this.state.postData, notes: event.target.value } }) - } - /> - -

Were you able to get tested at this location?

- - {this.state.gotTested.map((option) => ( - } - label={option.displayName} - onChange={(event) => - this.setState({ postData: { ...this.state.postData, gotTested: option.value } }) - } - /> - ))} - - -
-
-

Test Center Offerings

-
-

Select all offerings that exist at this test center:

- - {this.state.offerings.map((option, index) => ( - // TODO: Make checkbox partial - - {`Select - - - - ))} - -
-
-

Select all screening methods used at this test center:

- - {this.state.screening.map((option, index) => ( - // TODO: Make checkbox partial - - {`Select - - - - ))} - -
-
- - Cancel - - Submit Test Center - - -
- + this.onCheckboxSelected.bind(this, option)} + handleSnackbarClose={() => this.handleSnackbarClose} + handleSubmit={(e) => this.handleSubmit(e)} + onCancelClicked={() => this.onCancelClicked} + onNameChange={(event) => this.setState({ postData: { ...this.state.postData, name: event.target.value } })} + onAddressChange={(event) => this.setState({ postData: { ...this.state.postData, address: event.target.value } })} + onNotesChange={(event) => this.setState({ postData: { ...this.state.postData, notes: event.target.value } })} + onTypeChange={(event) => this.setState({ postData: { ...this.state.postData, type: { id: event.target.value },}, })} + onGotTestedChange={(event, option) => this.setState({ postData: { ...this.state.postData, gotTested: option.value } })} + />
- ); } @@ -373,102 +230,3 @@ const Section = styled.section` color: #fff; } `; - -const H3 = styled.h3` - margin-bottom: 20px; - font-size: 24px; -`; - -const H4 = styled.h4` - margin-bottom: 20px; - font-size: 16px; -`; - -const StyledHeader = styled(Header)` - .color-block { - display: none; - } -`; - -const Article = styled.article` - padding: 44px 0; - color: #fff; - - &:first-child { - border-bottom: 1px solid rgba(255, 255, 255, 0.4); - } - - > * { - width: 100%; - &:not(:last-child) { - margin-bottom: 20px; - } - } -`; - -const Checkboxes = styled.section` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); - column-gap: 17px; - row-gap: 17px; - margin-bottom: 40px; -`; - -const Checkbox = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - min-height: 122.78px; - text-align: center; - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.5); - transition: background-color ease 0.5s; - cursor: pointer; - - * { - cursor: inherit; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.1); - } - - &.checked { - border-color: ${(props) => props.theme.palette.secondary.main}; - background-color: ${(props) => props.theme.palette.secondary.main}; - } -`; - -const StyledRadio = styled(Radio)` - color: #fff; - &.Mui-checked { - color: #fff; - } -`; - -const ButtonContainer = styled.div` - display: grid; - grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - column-gap: 32px; - row-gap: 32px; - margin-bottom: 61px; - - button { - font-size: 17px; - } -`; - -const CancelButton = styled(PrimaryButton)` - color: #fff; - background-color: rgba(255, 255, 255, 0.1); -`; - -const SubmitButton = styled(PrimaryButton)` - color: ${(props) => props.theme.palette.primary.main}; - background-color: #fff; - - &:hover { - background-color: #e1efff; - } -`; From 8455c083a3d53b614c88c6923a7f15793b0dcfee Mon Sep 17 00:00:00 2001 From: Joe Sangiorgio Date: Thu, 17 Dec 2020 02:06:58 -0500 Subject: [PATCH 10/15] fix import --- .env | 2 +- src/pages/add-test-center.page.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.env b/.env index 54bcebfe..57fc8fe7 100644 --- a/.env +++ b/.env @@ -1,6 +1,6 @@ SKIP_PREFLIGHT_CHECK=true EXTEND_ESLINT=true REACT_APP_VERSION=$npm_package_version -REACT_APP_BUILT_AT=10/26/2020 - 1:33 PM +REACT_APP_BUILT_AT=12/17/2020 - 2:04 AM REACT_APP_BASE_URL=https://api-dev.allclear.app REACT_APP_ROBOTS_DIRECTIVE=noindex, nofollow diff --git a/src/pages/add-test-center.page.js b/src/pages/add-test-center.page.js index 91d5d1c4..58547f80 100644 --- a/src/pages/add-test-center.page.js +++ b/src/pages/add-test-center.page.js @@ -12,7 +12,7 @@ import { import TypesService from '@services/types.service.js'; import FacilitateService from '@services/facilitate.service.js'; -import TestCenterUpdate from '../components/general/test-center-update'; +import TestCenterUpdate from '@components/general/test-center-update'; export default class AddTestCenterPage extends Component { static contextType = AppContext; @@ -128,13 +128,13 @@ export default class AddTestCenterPage extends Component { render() { return (
- this.onCheckboxSelected.bind(this, option)} handleSnackbarClose={() => this.handleSnackbarClose} handleSubmit={(e) => this.handleSubmit(e)} From d3313bc6fe73602db62b2be8966644993b1c36f2 Mon Sep 17 00:00:00 2001 From: MattMoran12 Date: Fri, 18 Dec 2020 14:02:10 -0500 Subject: [PATCH 11/15] AC-494 fix: used alias imports and generalized onChange function --- src/components/general/test-center-update.js | 10 ++++---- src/pages/add-test-center.page.js | 10 ++++---- src/pages/edit-test-center.page.js | 24 +++++++++----------- 3 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/components/general/test-center-update.js b/src/components/general/test-center-update.js index 046aa8ee..7aee2891 100644 --- a/src/components/general/test-center-update.js +++ b/src/components/general/test-center-update.js @@ -36,7 +36,7 @@ export default function TestCenterUpdate(props) { placeholder="Test Center Name*" helperText="*Required" value={props.state.postData.name} - onChange={(event) => props.onNameChange(event)} + onChange={(event) => props.onChange('name', event.target.value)} /> props.onAddressChange(event)} + onChange={(event) => props.onChange('address', event.target.value)} />