From 91fea75b0f4fe87b505f8cfed9bf836e10c2cc91 Mon Sep 17 00:00:00 2001 From: Viet Nguyen <3805254+vnugent@users.noreply.github.com> Date: Tue, 23 Jan 2024 12:17:57 -0700 Subject: [PATCH] feat: new full screen map (#1083) * new full screen map * set initial viewstate from user's geo * migrate to route groups --- next.config.js | 5 + package.json | 1 + .../area/[[...slug]]/loading.tsx | 2 +- .../{ => (default)}/area/[[...slug]]/page.tsx | 4 +- .../[[...slug]]/sections/ClimbListSection.tsx | 2 +- .../[[...slug]]/sections/SubAreasSection.tsx | 2 +- .../components/AreaPageActions.tsx | 2 +- .../components/DesktopHeader.tsx | 6 +- .../components/FinancialContributors.tsx | 0 .../components/InternationalToC.tsx | 0 .../{ => (default)}/components/LandingCTA.tsx | 0 src/app/(default)/components/LandingHero.tsx | 21 +++ .../components/LatestContributions.tsx | 0 .../components/LoginButton.tsx | 0 .../components/MobileHeader.tsx | 6 +- .../{ => (default)}/components/PageFooter.tsx | 4 +- .../components/ReactToastifyProvider.tsx | 0 .../{ => (default)}/components/RecentTags.tsx | 0 .../components/ShareAreaLinkButton.tsx | 0 .../components/ShowEmailJS.tsx | 0 src/app/{ => (default)}/components/USAToC.tsx | 0 .../{ => (default)}/components/Volunteers.tsx | 0 .../components/international-data.ts | 0 .../components/recent/MapboxLayers.tsx | 0 .../recent/RecentContributionsMap.tsx | 0 .../components/ui/AreaPageContainer.tsx | 6 +- .../components/ui/GlobalAlerts.tsx | 0 .../components/ui/SectionContainer.tsx | 0 .../components/ui/StickyHeaderContainer.tsx | 0 src/app/{ => (default)}/edit/page.tsx | 7 +- .../editArea/[slug]/SidebarNav.tsx | 0 .../[slug]/components/EditAreaContainers.tsx | 0 .../[slug]/components/SingleEntryForm.tsx | 0 .../[slug]/general/components/AddAreaForm.tsx | 2 +- .../components/AreaDescriptionForm.tsx | 2 +- .../[slug]/general/components/AreaItem.tsx | 0 .../general/components/AreaLatLngForm.tsx | 2 +- .../[slug]/general/components/AreaList.tsx | 0 .../general/components/AreaNameForm.tsx | 2 +- .../general/components/AreaTypeForm.tsx | 2 +- .../components/climb/ClimbListForm.tsx | 0 .../editArea/[slug]/general/page.tsx | 0 .../editArea/[slug]/layout.tsx | 4 +- .../editArea/[slug]/loading.tsx | 0 .../components/sorting/SortAreasForm.tsx | 2 +- .../editArea/[slug]/manageAreas/page.tsx | 0 .../manageClimbs/components/AddClimbsForm.tsx | 2 +- .../components/ClimbListMiniToolbar.tsx | 0 .../components/DisciplinesSelection.tsx | 0 .../components/DynamicClimbInputList.tsx | 0 .../components/sorting/SortClimbsForm.tsx | 2 +- .../components/sorting/SortableClimbItem.tsx | 0 .../editArea/[slug]/manageClimbs/page.tsx | 2 +- .../{ => (default)}/editArea/[slug]/page.tsx | 0 src/app/{ => (default)}/header.tsx | 0 src/app/{ => (default)}/layout.tsx | 10 +- src/app/{ => (default)}/login/page.tsx | 0 src/app/{ => (default)}/page.tsx | 2 +- src/app/(maps)/components/ProfileMenu.tsx | 17 +++ src/app/(maps)/layout.tsx | 31 ++++ src/app/(maps)/maps/page.tsx | 15 ++ src/app/api/geo/route.ts | 18 +++ src/app/components/LandingHero.tsx | 10 -- .../AuthenticatedProfileNavButton.tsx} | 22 ++- src/components/ProfileNavButton.tsx | 3 +- .../auth}/NextAuthProvider.tsx | 0 src/components/cues/Entities.tsx | 2 +- .../edit/form/AreaDesignationRadioGroup.tsx | 2 +- src/components/maps/AreaInfoDrawer.tsx | 2 +- src/components/maps/AreaInfoHover.tsx | 2 +- src/components/maps/BaseMap.tsx | 1 + src/components/maps/CragsMap.tsx | 1 + src/components/maps/GlobalMap.tsx | 141 ++++++++++++++++++ src/pages/climbs/[id].tsx | 2 +- tsconfig.json | 3 + yarn.lock | 5 + 76 files changed, 322 insertions(+), 57 deletions(-) rename src/app/{ => (default)}/area/[[...slug]]/loading.tsx (61%) rename src/app/{ => (default)}/area/[[...slug]]/page.tsx (97%) rename src/app/{ => (default)}/area/[[...slug]]/sections/ClimbListSection.tsx (91%) rename src/app/{ => (default)}/area/[[...slug]]/sections/SubAreasSection.tsx (91%) rename src/app/{ => (default)}/components/AreaPageActions.tsx (92%) rename src/app/{ => (default)}/components/DesktopHeader.tsx (90%) rename src/app/{ => (default)}/components/FinancialContributors.tsx (100%) rename src/app/{ => (default)}/components/InternationalToC.tsx (100%) rename src/app/{ => (default)}/components/LandingCTA.tsx (100%) create mode 100644 src/app/(default)/components/LandingHero.tsx rename src/app/{ => (default)}/components/LatestContributions.tsx (100%) rename src/app/{ => (default)}/components/LoginButton.tsx (100%) rename src/app/{ => (default)}/components/MobileHeader.tsx (67%) rename src/app/{ => (default)}/components/PageFooter.tsx (94%) rename src/app/{ => (default)}/components/ReactToastifyProvider.tsx (100%) rename src/app/{ => (default)}/components/RecentTags.tsx (100%) rename src/app/{ => (default)}/components/ShareAreaLinkButton.tsx (100%) rename src/app/{ => (default)}/components/ShowEmailJS.tsx (100%) rename src/app/{ => (default)}/components/USAToC.tsx (100%) rename src/app/{ => (default)}/components/Volunteers.tsx (100%) rename src/app/{ => (default)}/components/international-data.ts (100%) rename src/app/{ => (default)}/components/recent/MapboxLayers.tsx (100%) rename src/app/{ => (default)}/components/recent/RecentContributionsMap.tsx (100%) rename src/app/{ => (default)}/components/ui/AreaPageContainer.tsx (87%) rename src/app/{ => (default)}/components/ui/GlobalAlerts.tsx (100%) rename src/app/{ => (default)}/components/ui/SectionContainer.tsx (100%) rename src/app/{ => (default)}/components/ui/StickyHeaderContainer.tsx (100%) rename src/app/{ => (default)}/edit/page.tsx (85%) rename src/app/{ => (default)}/editArea/[slug]/SidebarNav.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/components/EditAreaContainers.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/components/SingleEntryForm.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AddAreaForm.tsx (96%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaDescriptionForm.tsx (93%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaItem.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaLatLngForm.tsx (93%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaList.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaNameForm.tsx (93%) rename src/app/{ => (default)}/editArea/[slug]/general/components/AreaTypeForm.tsx (94%) rename src/app/{ => (default)}/editArea/[slug]/general/components/climb/ClimbListForm.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/general/page.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/layout.tsx (93%) rename src/app/{ => (default)}/editArea/[slug]/loading.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageAreas/components/sorting/SortAreasForm.tsx (98%) rename src/app/{ => (default)}/editArea/[slug]/manageAreas/page.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/AddClimbsForm.tsx (95%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/ClimbListMiniToolbar.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/DisciplinesSelection.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/DynamicClimbInputList.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/sorting/SortClimbsForm.tsx (98%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/components/sorting/SortableClimbItem.tsx (100%) rename src/app/{ => (default)}/editArea/[slug]/manageClimbs/page.tsx (94%) rename src/app/{ => (default)}/editArea/[slug]/page.tsx (100%) rename src/app/{ => (default)}/header.tsx (100%) rename src/app/{ => (default)}/layout.tsx (81%) rename src/app/{ => (default)}/login/page.tsx (100%) rename src/app/{ => (default)}/page.tsx (97%) create mode 100644 src/app/(maps)/components/ProfileMenu.tsx create mode 100644 src/app/(maps)/layout.tsx create mode 100644 src/app/(maps)/maps/page.tsx create mode 100644 src/app/api/geo/route.ts delete mode 100644 src/app/components/LandingHero.tsx rename src/{app/components/ProfileNavButton.tsx => components/AuthenticatedProfileNavButton.tsx} (83%) rename src/{app/components => components/auth}/NextAuthProvider.tsx (100%) create mode 100644 src/components/maps/GlobalMap.tsx diff --git a/next.config.js b/next.config.js index b43512370..53857a977 100644 --- a/next.config.js +++ b/next.config.js @@ -35,6 +35,11 @@ module.exports = { }, async redirects () { return [ + { + source: '/map', + destination: '/maps', + permanent: true + }, { source: '/areas/:uuid', destination: '/area/:uuid/', diff --git a/package.json b/package.json index 30f528cdc..3ad0f63ff 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@turf/bbox": "^6.5.0", "@turf/line-to-polygon": "^6.5.0", "@udecode/zustood": "^1.1.3", + "@vercel/edge": "^1.1.1", "auth0": "^2.42.0", "awesome-debounce-promise": "^2.1.0", "aws-sdk": "^2.1265.0", diff --git a/src/app/area/[[...slug]]/loading.tsx b/src/app/(default)/area/[[...slug]]/loading.tsx similarity index 61% rename from src/app/area/[[...slug]]/loading.tsx rename to src/app/(default)/area/[[...slug]]/loading.tsx index e56d4d39b..229609270 100644 --- a/src/app/area/[[...slug]]/loading.tsx +++ b/src/app/(default)/area/[[...slug]]/loading.tsx @@ -1,4 +1,4 @@ -import { AreaPageContainer } from '@/app/components/ui/AreaPageContainer' +import { AreaPageContainer } from '@/app/(default)/components/ui/AreaPageContainer' /** * Loading skeleton for /area/ page. diff --git a/src/app/area/[[...slug]]/page.tsx b/src/app/(default)/area/[[...slug]]/page.tsx similarity index 97% rename from src/app/area/[[...slug]]/page.tsx rename to src/app/(default)/area/[[...slug]]/page.tsx index c3f1acd39..eda0061f8 100644 --- a/src/app/area/[[...slug]]/page.tsx +++ b/src/app/(default)/area/[[...slug]]/page.tsx @@ -8,12 +8,12 @@ import Markdown from 'react-markdown' import PhotoMontage, { UploadPhotoCTA } from '@/components/media/PhotoMontage' import { getArea } from '@/js/graphql/getArea' -import { StickyHeaderContainer } from '@/app/components/ui/StickyHeaderContainer' +import { StickyHeaderContainer } from '@/app/(default)/components/ui/StickyHeaderContainer' import { AreaCrumbs } from '@/components/breadcrumbs/AreaCrumbs' import { ArticleLastUpdate } from '@/components/edit/ArticleLastUpdate' import { getMapHref, getFriendlySlug, getAreaPageFriendlyUrl, sanitizeName } from '@/js/utils' import { LazyAreaMap } from '@/components/maps/AreaMap' -import { AreaPageContainer } from '@/app/components/ui/AreaPageContainer' +import { AreaPageContainer } from '@/app/(default)/components/ui/AreaPageContainer' import { AreaPageActions } from '../../components/AreaPageActions' import { SubAreasSection } from './sections/SubAreasSection' import { ClimbListSection } from './sections/ClimbListSection' diff --git a/src/app/area/[[...slug]]/sections/ClimbListSection.tsx b/src/app/(default)/area/[[...slug]]/sections/ClimbListSection.tsx similarity index 91% rename from src/app/area/[[...slug]]/sections/ClimbListSection.tsx rename to src/app/(default)/area/[[...slug]]/sections/ClimbListSection.tsx index 9c4ae1ec8..af07cebcc 100644 --- a/src/app/area/[[...slug]]/sections/ClimbListSection.tsx +++ b/src/app/(default)/area/[[...slug]]/sections/ClimbListSection.tsx @@ -1,4 +1,4 @@ -import { ClimbList } from '@/app/editArea/[slug]/general/components/climb/ClimbListForm' +import { ClimbList } from '@/app/(default)/editArea/[slug]/general/components/climb/ClimbListForm' import { AreaType } from '@/js/types' /** * Climb list section diff --git a/src/app/area/[[...slug]]/sections/SubAreasSection.tsx b/src/app/(default)/area/[[...slug]]/sections/SubAreasSection.tsx similarity index 91% rename from src/app/area/[[...slug]]/sections/SubAreasSection.tsx rename to src/app/(default)/area/[[...slug]]/sections/SubAreasSection.tsx index 483d01825..bf0283093 100644 --- a/src/app/area/[[...slug]]/sections/SubAreasSection.tsx +++ b/src/app/(default)/area/[[...slug]]/sections/SubAreasSection.tsx @@ -1,6 +1,6 @@ import Link from 'next/link' import { PlusSquare } from '@phosphor-icons/react/dist/ssr' -import { AreaList } from 'app/editArea/[slug]/general/components/AreaList' +import { AreaList } from '@/app/(default)/editArea/[slug]/general/components/AreaList' import { AreaEntityBullet } from '@/components/cues/Entities' import { AreaType } from '@/js/types' diff --git a/src/app/components/AreaPageActions.tsx b/src/app/(default)/components/AreaPageActions.tsx similarity index 92% rename from src/app/components/AreaPageActions.tsx rename to src/app/(default)/components/AreaPageActions.tsx index c05dc21f9..3a4e9dde1 100644 --- a/src/app/components/AreaPageActions.tsx +++ b/src/app/(default)/components/AreaPageActions.tsx @@ -1,6 +1,6 @@ import Link from 'next/link' import { PencilSimple, ArrowElbowLeftDown } from '@phosphor-icons/react/dist/ssr' -import { ShareAreaLinkButton } from '@/app/components/ShareAreaLinkButton' +import { ShareAreaLinkButton } from '@/app/(default)/components/ShareAreaLinkButton' import { UploadPhotoButton } from '@/components/media/PhotoUploadButtons' /** diff --git a/src/app/components/DesktopHeader.tsx b/src/app/(default)/components/DesktopHeader.tsx similarity index 90% rename from src/app/components/DesktopHeader.tsx rename to src/app/(default)/components/DesktopHeader.tsx index b3994381c..459707c20 100644 --- a/src/app/components/DesktopHeader.tsx +++ b/src/app/(default)/components/DesktopHeader.tsx @@ -1,11 +1,11 @@ 'use client' import { signIn, useSession } from 'next-auth/react' -import { Logo } from 'app/header' +import { Logo } from '../header' import { XSearchMinimal } from '@/components/search/XSearch' import { NavMenuItem, NavMenuItemProps } from '@/components/ui/NavMenuButton' import GitHubStars from '@/components/GitHubStars' -import ProfileNavButton from './ProfileNavButton' +import AuthenticatedProfileNavButton from '../../../components/AuthenticatedProfileNavButton' export const DesktopHeader: React.FC = () => { const { status } = useSession() @@ -56,7 +56,7 @@ export const DesktopHeader: React.FC = () => { let nav switch (status) { case 'authenticated': - nav = + nav = break case 'loading': nav = ( diff --git a/src/app/components/FinancialContributors.tsx b/src/app/(default)/components/FinancialContributors.tsx similarity index 100% rename from src/app/components/FinancialContributors.tsx rename to src/app/(default)/components/FinancialContributors.tsx diff --git a/src/app/components/InternationalToC.tsx b/src/app/(default)/components/InternationalToC.tsx similarity index 100% rename from src/app/components/InternationalToC.tsx rename to src/app/(default)/components/InternationalToC.tsx diff --git a/src/app/components/LandingCTA.tsx b/src/app/(default)/components/LandingCTA.tsx similarity index 100% rename from src/app/components/LandingCTA.tsx rename to src/app/(default)/components/LandingCTA.tsx diff --git a/src/app/(default)/components/LandingHero.tsx b/src/app/(default)/components/LandingHero.tsx new file mode 100644 index 000000000..ec1c1813b --- /dev/null +++ b/src/app/(default)/components/LandingHero.tsx @@ -0,0 +1,21 @@ +import { ArrowRight } from '@phosphor-icons/react/dist/ssr' + +export const LandingHero: React.FC = () => { + return ( +
+

Share your climbing route knowledge!

+
+ Join us to help improve this comprehensive climbing resource for the community. +
+
+ +
+
+ ) +} + +export const HeroAlert: React.FC = () => ( +
+ NEW + Crag maps +
) diff --git a/src/app/components/LatestContributions.tsx b/src/app/(default)/components/LatestContributions.tsx similarity index 100% rename from src/app/components/LatestContributions.tsx rename to src/app/(default)/components/LatestContributions.tsx diff --git a/src/app/components/LoginButton.tsx b/src/app/(default)/components/LoginButton.tsx similarity index 100% rename from src/app/components/LoginButton.tsx rename to src/app/(default)/components/LoginButton.tsx diff --git a/src/app/components/MobileHeader.tsx b/src/app/(default)/components/MobileHeader.tsx similarity index 67% rename from src/app/components/MobileHeader.tsx rename to src/app/(default)/components/MobileHeader.tsx index ae25b868a..08bb22739 100644 --- a/src/app/components/MobileHeader.tsx +++ b/src/app/(default)/components/MobileHeader.tsx @@ -1,16 +1,16 @@ 'use client' import { useSession } from 'next-auth/react' -import { Logo } from 'app/header' +import { Logo } from '../header' import { XSearchMinimal } from '@/components/search/XSearch' import { LoginButton, More } from '@/components/MobileAppBar' -import ProfileNavButton from './ProfileNavButton' +import AuthenticatedProfileNavButton from '../../../components/AuthenticatedProfileNavButton' /** * Main header for mobile */ export const MobileHeader: React.FC = () => { const { status } = useSession() - const nav = status === 'authenticated' ? : + const nav = status === 'authenticated' ? : return (
diff --git a/src/app/components/PageFooter.tsx b/src/app/(default)/components/PageFooter.tsx similarity index 94% rename from src/app/components/PageFooter.tsx rename to src/app/(default)/components/PageFooter.tsx index ead279311..a971b1334 100644 --- a/src/app/components/PageFooter.tsx +++ b/src/app/(default)/components/PageFooter.tsx @@ -1,10 +1,10 @@ -import { Logo, LogoSize } from 'app/header' +import { Logo, LogoSize } from '../header' /** * Page footer */ export const PageFooter: React.FC = () => { return ( -