-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor routes code, save form when back from add location
- Loading branch information
Showing
13 changed files
with
331 additions
and
274 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import { ArrowBack } from '@styled-icons/boxicons-regular' | ||
| import { useRef } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { useDispatch, useSelector } from 'react-redux' | ||
| import { Route, useParams } from 'react-router-dom' | ||
| import styled from 'styled-components/macro' | ||
|
|
||
| import { saveFormValues } from '../../redux/locationSlice' | ||
| import { useAppHistory } from '../../utils/useAppHistory' | ||
| import BackButton from '../ui/BackButton' | ||
| import TopBar from '../ui/TopBar' | ||
| import TopBarNav from '../ui/TopBarNav' | ||
| import { EditLocationForm } from './EditLocation' | ||
| import { EditReviewForm } from './EditReview' | ||
| import { LocationForm } from './LocationForm' | ||
| import { ReviewForm } from './ReviewForm' | ||
|
|
||
| const StyledNavBack = styled.div` | ||
| padding: 25px 15px 15px 10px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| svg { | ||
| height: 20px; | ||
| margin-right: 5px; | ||
| } | ||
| ` | ||
|
|
||
| const Header = styled.h3` | ||
| margin-left: 10px; | ||
| ` | ||
|
|
||
| const MobileNav = ({ titleKey, onBack }) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| return ( | ||
| <TopBar> | ||
| <TopBarNav onBack={onBack} title={t(titleKey)} /> | ||
| </TopBar> | ||
| ) | ||
| } | ||
|
|
||
| const DesktopNav = ({ titleKey, onBack }) => { | ||
| const { t } = useTranslation() | ||
| return ( | ||
| <> | ||
| <StyledNavBack> | ||
| <BackButton onClick={onBack}> | ||
| <ArrowBack /> | ||
| {t('back')} | ||
| </BackButton> | ||
| </StyledNavBack> | ||
| <Header>{t(titleKey)}</Header> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const EditLocation = ({ NavComponent }) => { | ||
| const history = useAppHistory() | ||
| const { locationId } = useParams() | ||
|
|
||
| return ( | ||
| <> | ||
| <NavComponent | ||
| titleKey="layouts.page_title.editing_location" | ||
| onBack={(event) => { | ||
| event.stopPropagation() | ||
| history.push(`/locations/${locationId}`) | ||
| }} | ||
| /> | ||
| <EditLocationForm /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const AddLocation = ({ NavComponent, backUrl }) => { | ||
| const history = useAppHistory() | ||
| const formRef = useRef() | ||
| const dispatch = useDispatch() | ||
|
|
||
| return ( | ||
| <> | ||
| <NavComponent | ||
| titleKey="layouts.page_title.adding_location" | ||
| onBack={(event) => { | ||
| event.stopPropagation() | ||
| if (formRef.current) { | ||
| dispatch(saveFormValues(formRef.current.values)) | ||
| } | ||
| history.push(backUrl) | ||
| }} | ||
| /> | ||
| <LocationForm innerRef={formRef} /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const AddReview = ({ NavComponent }) => { | ||
| const history = useAppHistory() | ||
| const { locationId } = useParams() | ||
|
|
||
| return ( | ||
| <> | ||
| <NavComponent | ||
| titleKey="layouts.page_title.adding_review" | ||
| onBack={(event) => { | ||
| event.stopPropagation() | ||
| history.push(`/locations/${locationId}`) | ||
| }} | ||
| /> | ||
| <ReviewForm /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| const EditReview = ({ NavComponent }) => { | ||
| const history = useAppHistory() | ||
| const { review } = useSelector((state) => state.review) | ||
|
|
||
| return ( | ||
| <> | ||
| <NavComponent | ||
| titleKey="layouts.page_title.editing_review" | ||
| onBack={(event) => { | ||
| event.stopPropagation() | ||
| history.push(`/locations/${review?.location_id}`) | ||
| }} | ||
| /> | ||
| <EditReviewForm /> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const formRoutesMobile = [ | ||
| <Route key="edit-location" path="/locations/:locationId/edit/details"> | ||
| <EditLocation NavComponent={MobileNav} /> | ||
| </Route>, | ||
| <Route key="add-location" path="/locations/new"> | ||
| <AddLocation NavComponent={MobileNav} backUrl="/locations/init" /> | ||
| </Route>, | ||
| <Route key="add-review" path="/locations/:locationId/review"> | ||
| <AddReview NavComponent={MobileNav} /> | ||
| </Route>, | ||
| <Route key="edit-review" path="/reviews/:reviewId/edit"> | ||
| <EditReview NavComponent={MobileNav} /> | ||
| </Route>, | ||
| ] | ||
|
|
||
| export const formRoutesDesktop = [ | ||
| <Route key="edit-location" path="/locations/:locationId/edit/details"> | ||
| <EditLocation NavComponent={DesktopNav} /> | ||
| </Route>, | ||
| <Route key="add-location" path="/locations/new"> | ||
| <AddLocation NavComponent={DesktopNav} backUrl="/map" /> | ||
| </Route>, | ||
| <Route key="edit-review" path="/reviews/:reviewId/edit"> | ||
| <EditReview NavComponent={DesktopNav} /> | ||
| </Route>, | ||
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Check, X } from '@styled-icons/boxicons-regular' | ||
| import { useSelector } from 'react-redux' | ||
| import styled from 'styled-components/macro' | ||
|
|
||
| import { useAppHistory } from '../../utils/useAppHistory' | ||
| import { theme } from '../ui/GlobalStyle' | ||
| import IconButton from '../ui/IconButton' | ||
| import TopBarNav from '../ui/TopBarNav' | ||
|
|
||
| const Instructions = styled.span` | ||
| margin-left: 15px; | ||
| ` | ||
|
|
||
| const InitLocationNav = () => { | ||
| const history = useAppHistory() | ||
| const { form } = useSelector((state) => state.location) | ||
|
|
||
| return ( | ||
| <TopBarNav | ||
| left={ | ||
| <Instructions> | ||
| {form | ||
| ? 'Edit position for your new location.' | ||
| : 'Choose a position for your new location.'} | ||
| </Instructions> | ||
| } | ||
| rightIcons={ | ||
| <> | ||
| <IconButton | ||
| label="Cancel choose location" | ||
| icon={<X />} | ||
| raised | ||
| size={54} | ||
| onClick={() => history.push('/map')} | ||
| /> | ||
| <IconButton | ||
| label="Confirm choose location" | ||
| icon={<Check />} | ||
| raised | ||
| size={54} | ||
| color={theme.green} | ||
| onClick={() => history.push('/locations/new')} | ||
| /> | ||
| </> | ||
| } | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default InitLocationNav |
Oops, something went wrong.