-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): remove fullscreen modal
- Loading branch information
luzzifoss
committed
Oct 16, 2023
1 parent
2763792
commit 23835f2
Showing
3 changed files
with
104 additions
and
277 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1,34 @@ | ||
| import React, { useCallback, useEffect, useState } from "react"; | ||
| import { | ||
| Route, | ||
| Routes, | ||
| useLocation, | ||
| matchPath, | ||
| type Location, | ||
| useNavigate, | ||
| } from "react-router-dom"; | ||
| import React from "react"; | ||
| import { Route, Routes } from "react-router-dom"; | ||
| import { Home } from "../home"; | ||
| import { Page } from "../page"; | ||
| import { Campaigns } from "../campaigns"; | ||
| import { CreateWithTemplateId } from "../create-with-template-id"; | ||
| import { useFathomTrackPageWatch } from "../../hooks/useFathomTrackPageWatch"; | ||
| import { usePreviousDistinct } from "react-use"; | ||
| import { useStagingMode } from "@carrot-kpi/react"; | ||
| import { StagingModeBanner } from "../../components/staging-mode-banner"; | ||
|
|
||
| const CREATE_ROUTE_PATH = { path: "/create/:templateId", key: "create" }; | ||
| const PAGE_ROUTE_PATH = { path: "/campaigns/:address", key: "page" }; | ||
|
|
||
| const MODAL_ROUTE_PATHS = [CREATE_ROUTE_PATH, PAGE_ROUTE_PATH]; | ||
|
|
||
| const DEFAULT_LOCATION = { | ||
| pathname: "/", | ||
| state: undefined, | ||
| key: "", | ||
| search: "", | ||
| hash: "", | ||
| }; | ||
|
|
||
| interface AppProps { | ||
| templateId?: number; | ||
| } | ||
|
|
||
| export const App = ({ templateId }: AppProps) => { | ||
| const location = useLocation(); | ||
| const previousLocation = usePreviousDistinct(location); | ||
| const navigate = useNavigate(); | ||
| const stagingMode = useStagingMode(); | ||
|
|
||
| useFathomTrackPageWatch(); | ||
|
|
||
| const [modalLocation, setModalLocation] = useState<Location | undefined>(); | ||
| const [closingModalId, setClosingModalId] = useState(""); | ||
| const [mainLocation, setMainLocation] = useState(location); | ||
|
|
||
| useEffect(() => { | ||
| if ( | ||
| previousLocation && | ||
| location.pathname === previousLocation.pathname && | ||
| location.search === previousLocation.search && | ||
| location.state === previousLocation.state | ||
| ) | ||
| return; | ||
|
|
||
| // detect modal opening and setup. If the previous distinct | ||
| // location was not a modal route, and the current one is, | ||
| // the previous location is set as the main route to prevent | ||
| // the modal background from unmounting, while the new location | ||
| // is set as the modals one in order to correctly mount the | ||
| // component with animations etc etc. | ||
| const openingModal = MODAL_ROUTE_PATHS.find(({ path }) => | ||
| matchPath({ path }, location.pathname), | ||
| ); | ||
| if (openingModal) { | ||
| // in case previous location is not there (for example when | ||
| // coming in through an external link), set the homepage as | ||
| // the main location | ||
| document.documentElement.classList.add("overflow-hidden"); | ||
|
|
||
| const isPreviousLocationModal = | ||
| previousLocation && | ||
| !!MODAL_ROUTE_PATHS.find(({ path }) => | ||
| matchPath({ path }, previousLocation.pathname), | ||
| ); | ||
| // if the previous location was a modal (i.e. if we're switching | ||
| // through modals) set default location as main | ||
| setMainLocation( | ||
| isPreviousLocationModal | ||
| ? DEFAULT_LOCATION | ||
| : previousLocation || DEFAULT_LOCATION, | ||
| ); | ||
| setModalLocation(location); | ||
| return; | ||
| } | ||
|
|
||
| // detect modal closing and teardown. If the previous distinct | ||
| // location was a modal route, and the current one isn't, trigger | ||
| // the modal close. | ||
| let closingModalId = ""; | ||
| if (previousLocation && !!modalLocation) { | ||
| for (let i = 0; i < MODAL_ROUTE_PATHS.length; i++) { | ||
| const { path, key } = MODAL_ROUTE_PATHS[i]; | ||
| if (matchPath({ path }, previousLocation.pathname)) { | ||
| closingModalId = key; | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| if (closingModalId) { | ||
| setModalLocation(previousLocation); | ||
| setClosingModalId(closingModalId); | ||
| return; | ||
| } | ||
|
|
||
| // if not coming from a modal or going to one, scroll to top on | ||
| // distinct main location changes | ||
| if (!location.state?.navigatingAwayFromModal) setMainLocation(location); | ||
| }, [location, mainLocation, modalLocation, previousLocation]); | ||
|
|
||
| const handleAnimationEnd = useCallback(() => { | ||
| document.documentElement.classList.remove("overflow-hidden"); | ||
| setClosingModalId(""); | ||
| setModalLocation(undefined); | ||
| navigate(mainLocation, { state: { navigatingAwayFromModal: true } }); | ||
| }, [mainLocation, navigate]); | ||
|
|
||
| return ( | ||
| <> | ||
| {stagingMode && <StagingModeBanner />} | ||
| <Routes location={mainLocation}> | ||
| <Routes> | ||
| <Route path="/" element={<Home templateId={templateId} />} /> | ||
| <Route path="/campaigns" element={<Campaigns />} /> | ||
| <Route | ||
| path="/create/:templateId" | ||
| element={<CreateWithTemplateId />} | ||
| /> | ||
| <Route path="/campaigns/:address" element={<Page />} /> | ||
| </Routes> | ||
| {modalLocation && ( | ||
| <Routes location={modalLocation}> | ||
| <Route | ||
| path={CREATE_ROUTE_PATH.path} | ||
| element={ | ||
| <CreateWithTemplateId | ||
| closing={ | ||
| closingModalId === CREATE_ROUTE_PATH.key | ||
| } | ||
| onOutAnimationEnd={handleAnimationEnd} | ||
| /> | ||
| } | ||
| /> | ||
| <Route | ||
| path={PAGE_ROUTE_PATH.path} | ||
| element={ | ||
| <Page | ||
| closing={closingModalId === PAGE_ROUTE_PATH.key} | ||
| onOutAnimationEnd={handleAnimationEnd} | ||
| /> | ||
| } | ||
| /> | ||
| </Routes> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
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
Oops, something went wrong.