From ebd7ffae1bc33f9745cc6c4c64188d7da16b6530 Mon Sep 17 00:00:00 2001
From: viet nguyen <3805254+vnugent@users.noreply.github.com>
Date: Mon, 10 Jun 2024 14:09:31 +0200
Subject: [PATCH] chore: remove old landing page & related components
---
.../(default)/components}/Post.tsx | 6 +-
.../(default)/components}/RecentMediaCard.tsx | 12 +-
src/app/(default)/components/RecentTags.tsx | 2 +-
src/components/home/DenseAreas.tsx | 13 -
src/components/home/Map.tsx | 70 ------
src/components/home/RecentMedia.tsx | 34 ---
src/components/maps/MarkerLayer.tsx | 71 ------
src/components/ui/FeatureCard/FeatureCard.tsx | 72 ------
.../ui/FeatureCard/FeatureImage.tsx | 36 ---
src/components/ui/FeatureCard/index.ts | 18 --
src/components/ui/TabsTrigger.tsx | 29 ---
src/js/graphql/api.ts | 58 +----
src/pages/classic/index.tsx | 236 ------------------
13 files changed, 12 insertions(+), 645 deletions(-)
rename src/{components/home => app/(default)/components}/Post.tsx (90%)
rename src/{components/home => app/(default)/components}/RecentMediaCard.tsx (85%)
delete mode 100644 src/components/home/DenseAreas.tsx
delete mode 100644 src/components/home/Map.tsx
delete mode 100644 src/components/home/RecentMedia.tsx
delete mode 100644 src/components/ui/FeatureCard/FeatureCard.tsx
delete mode 100644 src/components/ui/FeatureCard/FeatureImage.tsx
delete mode 100644 src/components/ui/FeatureCard/index.ts
delete mode 100644 src/components/ui/TabsTrigger.tsx
delete mode 100644 src/pages/classic/index.tsx
diff --git a/src/components/home/Post.tsx b/src/app/(default)/components/Post.tsx
similarity index 90%
rename from src/components/home/Post.tsx
rename to src/app/(default)/components/Post.tsx
index 7699adb02..177c28927 100644
--- a/src/components/home/Post.tsx
+++ b/src/app/(default)/components/Post.tsx
@@ -1,12 +1,12 @@
import Link from 'next/link'
import React from 'react'
-import { MediaType } from '../../js/types'
+import { MediaType } from '../../../js/types'
import {
UserCircleIcon,
TagIcon
} from '@heroicons/react/24/outline'
-import { getUploadDateSummary, urlResolver } from '../../js/utils'
-import { ATagWrapper } from '../Utils'
+import { getUploadDateSummary, urlResolver } from '../../../js/utils'
+import { ATagWrapper } from '../../../components/Utils'
export interface PostBodyProps {
destUrl: string
diff --git a/src/components/home/RecentMediaCard.tsx b/src/app/(default)/components/RecentMediaCard.tsx
similarity index 85%
rename from src/components/home/RecentMediaCard.tsx
rename to src/app/(default)/components/RecentMediaCard.tsx
index dd0e4d21d..ce18da532 100644
--- a/src/components/home/RecentMediaCard.tsx
+++ b/src/app/(default)/components/RecentMediaCard.tsx
@@ -2,13 +2,13 @@
import { useState } from 'react'
import Image from 'next/image'
import clx from 'classnames'
-import Card from '../ui/Card/Card'
-import TagList from '../media/TagList'
-import { MediaWithTags } from '../../js/types'
-import { getUploadDateSummary } from '../../js/utils'
+import Card from '../../../components/ui/Card/Card'
+import TagList from '../../../components/media/TagList'
+import { MediaWithTags } from '../../../js/types'
+import { getUploadDateSummary } from '../../../js/utils'
import { PostHeader } from './Post'
-import { resolver as urlResolver } from '../media/Tag'
-import { ATagWrapper } from '../Utils'
+import { resolver as urlResolver } from '../../../components/media/Tag'
+import { ATagWrapper } from '../../../components/Utils'
const MOBILE_IMAGE_MAX_WIDITH = 600
diff --git a/src/app/(default)/components/RecentTags.tsx b/src/app/(default)/components/RecentTags.tsx
index ef51a2230..287624f6d 100644
--- a/src/app/(default)/components/RecentTags.tsx
+++ b/src/app/(default)/components/RecentTags.tsx
@@ -1,4 +1,4 @@
-import { RecentImageCard } from '@/components/home/RecentMediaCard'
+import { RecentImageCard } from '@/app/(default)/components/RecentMediaCard'
import { SectionContainer } from './ui/SectionContainer'
import { getMediaForFeedSC } from '@/js/graphql/gql/serverApi'
diff --git a/src/components/home/DenseAreas.tsx b/src/components/home/DenseAreas.tsx
deleted file mode 100644
index e5b05047c..000000000
--- a/src/components/home/DenseAreas.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import FeatureCard from '../ui/FeatureCard'
-import { AreaType } from '../../js/types'
-
-export interface ExploreProps {
- areas: AreaType[]
-}
-export default function Explore ({ areas }: ExploreProps): JSX.Element {
- return (
-
- {areas.map(area => )}
-
- )
-}
diff --git a/src/components/home/Map.tsx b/src/components/home/Map.tsx
deleted file mode 100644
index b4b5df9c8..000000000
--- a/src/components/home/Map.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useEffect, useState, useRef } from 'react'
-import { featureCollection, Feature, Point } from '@turf/helpers'
-import NProgress from 'nprogress'
-import { debounce } from 'underscore'
-
-import useAutoSizing from '../../js/hooks/finder/useMapAutoSizing'
-import BaseMap from '../maps/BaseMap'
-import HeatmapLayer from '../maps/HeatmapLayer'
-import { MarkerLayer2 } from '../maps/MarkerLayer'
-import { geojsonifyCrag } from '../../js/stores/util'
-import { getCragsWithinNicely } from '../../js/graphql/api'
-import { XViewStateType } from '../../js/types'
-
-const mapElementId = 'global-map'
-export default function Map (): JSX.Element {
- const [viewstate, height, setViewState] = useAutoSizing({ geojson: null, elementId: mapElementId })
-
- const [geojson, setData] = useState>>([])
-
- const lastUpdatePosition = useRef({ longitude: 0, latitude: 0, zoom: 0 })
-
- useEffect(() => {
- if (viewstate.bbox[0] === 0 && viewstate.bbox[1] === 0) return
-
- const shouldFetchData = checkIfShouldFetchData(viewstate, lastUpdatePosition)
-
- if (shouldFetchData) {
- lastUpdatePosition.current = { longitude: viewstate.longitude, latitude: viewstate.latitude, zoom: viewstate.zoom }
- progressStart()
- void getCragsWithinNicely({ bbox: viewstate.bbox, zoom: viewstate.zoom }).then(
- data => {
- if (data?.length > 0) {
- setData(data.map(crag => geojsonifyCrag(crag, false)))
- progressStop()
- }
- }
- )
- }
- }, [viewstate])
-
- return (
-
-
-
-
-
-
-
- )
-}
-
-const progressStart = debounce(NProgress.start, 500)
-
-const progressStop = debounce(NProgress.done, 500)
-
-function checkIfShouldFetchData (viewstate: XViewStateType, lastUpdatePosition: any): boolean {
- return (Math.abs(viewstate.latitude - lastUpdatePosition.current.latitude) >= 0.1 ||
- Math.abs(viewstate.longitude - lastUpdatePosition.current.longitude) > 0.2 ||
- Math.abs(viewstate.zoom - lastUpdatePosition.current.zoom) > 1)
-}
diff --git a/src/components/home/RecentMedia.tsx b/src/components/home/RecentMedia.tsx
deleted file mode 100644
index 955683103..000000000
--- a/src/components/home/RecentMedia.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { MediaWithTags } from '../../js/types'
-import { RecentImageCard } from './RecentMediaCard'
-
-export interface RecentTagsProps {
- recentMediaWithTags: MediaWithTags[]
-}
-
-export default function RecentTags ({
- recentMediaWithTags
-}: RecentTagsProps): JSX.Element {
- return (
- <>
-
- {
- recentMediaWithTags.map(media => {
- const { mediaUrl } = media
- return (
-
-
-
- )
- }
- )
- }
-
-
- All photos are copyrighted by their respective owners. All Rights
- Reserved.
-
- >
- )
-}
diff --git a/src/components/maps/MarkerLayer.tsx b/src/components/maps/MarkerLayer.tsx
index 203fe59b1..e2b615c49 100644
--- a/src/components/maps/MarkerLayer.tsx
+++ b/src/components/maps/MarkerLayer.tsx
@@ -56,62 +56,6 @@ const closeupLayerStyle: LayerProps = {
}
}
-const closeupLayerStyleBright: LayerProps = {
- ...closeupLayerStyle,
- id: 'all-markers-bright',
- minzoom: 11,
- filter: ['==', 'leaf', true],
- layout: {
- ...closeupLayerStyle.layout,
- 'text-size': ['interpolate', ['linear'], ['zoom'], 8, 14, 14, 15]
- },
- paint: {
- 'icon-color': '#ffffff',
- 'text-halo-blur': 4,
- 'text-halo-width': 4,
- 'text-color': '#000000',
- 'text-halo-color': '#eaeaea'
- }
-}
-
-const largeAreaLayerStyleBright: LayerProps = {
- ...closeupLayerStyle,
- id: 'area-markers-bright',
- minzoom: 8,
- maxzoom: 14,
- filter: ['all', ['!=', 'leaf', true], ['>', 'totalClimbs', 30], ['<', 'totalClimbs', 500], ['>', 'density', 0.35]],
- layout: {
- ...closeupLayerStyle.layout,
- 'text-size': ['interpolate', ['linear'], ['zoom'], 8, 14, 14, 15]
- },
- paint: {
- 'icon-color': '#ffffff',
- 'text-halo-blur': 4,
- 'text-halo-width': 4,
- 'text-color': '#000000',
- 'text-halo-color': '#eaeaea'
- }
-}
-
-const destinationLayerStyleBright: LayerProps = {
- ...closeupLayerStyle,
- id: 'destination-markers-bright',
- minzoom: 5,
- maxzoom: 8,
- filter: ['all', ['!=', 'leaf', true], ['>=', 'totalClimbs', 300], ['>', 'density', 0.5]],
- layout: {
- ...closeupLayerStyle.layout,
- 'text-size': ['interpolate', ['linear'], ['zoom'], 8, 14, 14, 15]
- },
- paint: {
- 'icon-color': '#ffffff',
- 'text-halo-blur': 4,
- 'text-halo-width': 4,
- 'text-color': '#000000',
- 'text-halo-color': '#eaeaea'
- }
-}
-
interface MarkerLayerProps {
geojson: FeatureCollection | undefined
}
@@ -133,21 +77,6 @@ export default function MarkerLayer ({ geojson }: MarkerLayerProps): JSX.Element
)
}
-export function MarkerLayer2 ({ geojson }: MarkerLayerProps): JSX.Element | null {
- if (geojson == null) return null
- return (
-
- )
-}
-
// Important! Pass these IDs to Mapbox GL so that onClick/onHover receives
// the active Geojson object
export const InteractiveLayerIDs = [layerStyle.id, closeupLayerStyle.id] as string[]
diff --git a/src/components/ui/FeatureCard/FeatureCard.tsx b/src/components/ui/FeatureCard/FeatureCard.tsx
deleted file mode 100644
index 2e76b5ef8..000000000
--- a/src/components/ui/FeatureCard/FeatureCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { shuffle } from 'underscore'
-
-import { AggregateType, AreaType, CountByDisciplineType, DisciplineStatsType } from '../../../js/types'
-import { sanitizeName } from '../../../js/utils'
-import { FeatureImage } from './FeatureImage'
-import { CLIENT_CONFIG } from '../../../js/configs/clientConfig'
-
-function FeatureCard ({ area }: { area: AreaType }): JSX.Element | null {
- const { areaName, pathTokens, aggregate, metadata, totalClimbs, media } = area
-
- if (media == null || media.length === 0) return null
-
- const imageUrl = `${CLIENT_CONFIG.CDN_BASE_URL}${shuffle(media)[0].mediaUrl}?h=300&q=90`
-
- const image = {
- url: imageUrl,
- license: 'All Rights Reserved',
- creator: '',
- license_url: '',
- attribution: ''
- }
-
- /**
- * Turn count-by-discipline to tiny tags.
- * Only consider crags with more 5 climbs for a given discipline.
- * @param aggregateTypes T
- * @returns
- */
- function formatClimbingTypes (aggregate: AggregateType): JSX.Element {
- const aggByDiscipline: CountByDisciplineType = aggregate.byDiscipline
- return (
- <>
- {
- Object.keys(aggregate.byDiscipline).map((key: string) => {
- // @ts-expect-error
- if ((aggByDiscipline?.[key] as DisciplineStatsType)?.total > 5) {
- return {key}
- }
- return null
- })
- }
- >
- )
- }
-
- const attribution = image.attribution ?? image.creator ?? ''
-
- return (
-
-
-
-
-
-
- {sanitizeName(areaName)}
-
-
{totalClimbs} Climbs
-
{formatClimbingTypes(aggregate)}
-
{pathTokens.slice(1).join(' / ')}
- {attribution !== '' &&
Image By: {attribution}
}
-
-
-
-
- )
-}
-
-export default FeatureCard
diff --git a/src/components/ui/FeatureCard/FeatureImage.tsx b/src/components/ui/FeatureCard/FeatureImage.tsx
deleted file mode 100644
index 1ad27ed7f..000000000
--- a/src/components/ui/FeatureCard/FeatureImage.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Image from 'next/image'
-import { PhotoIcon } from '@heroicons/react/24/outline'
-import { OpenverseImage } from '.'
-
-export function DefaultImage (): JSX.Element {
- return (
-
- )
-}
-
-export function FeatureImage ({ image }: { image: OpenverseImage }): JSX.Element {
- return (
-
-
{image.url == null
- ? (
-
- )
- :
}
-
-
- )
-}
diff --git a/src/components/ui/FeatureCard/index.ts b/src/components/ui/FeatureCard/index.ts
deleted file mode 100644
index afcdada89..000000000
--- a/src/components/ui/FeatureCard/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import FeatureCard from './FeatureCard'
-export default FeatureCard
-
-export interface OpenverseImage {
- creator: string | undefined
- url: string
- attribution: string | undefined
- license: string
- license_url: string
-}
-
-export interface OpenverseResponse {
- result_count: number
- page_count: number
- page_size: number
- page: number
- results: OpenverseImage[]
-}
diff --git a/src/components/ui/TabsTrigger.tsx b/src/components/ui/TabsTrigger.tsx
deleted file mode 100644
index 85fc02099..000000000
--- a/src/components/ui/TabsTrigger.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as Tabs from '@radix-ui/react-tabs'
-import classNames from 'classnames'
-
-interface TabsTriggerProps {
- tabKey: string
- activeKey: string
- icon: JSX.Element
- label: string
- hidden?: boolean
-}
-export default function TabsTrigger ({ tabKey, activeKey, icon, label, hidden = false }: TabsTriggerProps): JSX.Element {
- return (
-
-
-
- )
-}
diff --git a/src/js/graphql/api.ts b/src/js/graphql/api.ts
index 9c2ea4b3e..efc52e1d6 100644
--- a/src/js/graphql/api.ts
+++ b/src/js/graphql/api.ts
@@ -1,11 +1,9 @@
import { gql } from '@apollo/client'
-import AwesomeDebouncePromise from 'awesome-debounce-promise'
-import { AreaType, ClimbType, TickType, MediaByUsers, CountrySummaryType, MediaWithTags } from '../types'
+import { AreaType, ClimbType, TickType, CountrySummaryType, MediaWithTags } from '../types'
import { graphqlClient } from './Client'
-import { CORE_CRAG_FIELDS, QUERY_CRAGS_WITHIN, QUERY_TICKS_BY_USER_AND_CLIMB, QUERY_TICKS_BY_USER, QUERY_ALL_COUNTRIES } from './gql/fragments'
-import { QUERY_MEDIA_FOR_FEED } from './gql/tags'
+import { CORE_CRAG_FIELDS, QUERY_TICKS_BY_USER_AND_CLIMB, QUERY_TICKS_BY_USER, QUERY_ALL_COUNTRIES } from './gql/fragments'
import { QUERY_USER_MEDIA } from './gql/users'
import { QUERY_CLIMB_BY_ID } from './gql/climbById'
@@ -85,58 +83,6 @@ export const getAreaByUUID = (uuid: string): AreaType | null => {
return null
}
-export const getMediaForFeed = async (maxUsers: number, maxFiles: number): Promise => {
- try {
- const rs = await graphqlClient.query<{ getMediaForFeed: MediaByUsers[] }>({
- query: QUERY_MEDIA_FOR_FEED,
- variables: {
- maxUsers,
- maxFiles
- }
- // fetchPolicy: 'network-only'
- })
-
- if (Array.isArray(rs.data?.getMediaForFeed)) {
- return rs.data?.getMediaForFeed
- }
- console.log('WARNING: getMediaForFeed() returns non-array data')
- return []
- } catch (e) {
- console.log('####### getMediaForFeed() error', e)
- }
- return []
-}
-
-interface GetCragsWithinProps {
- bbox: number[]
- zoom: number
-}
-export const getCragsWithin = async ({ bbox, zoom }: GetCragsWithinProps): Promise => {
- try {
- const rs = await graphqlClient.query<{ cragsWithin: AreaType[] }>({
- query: QUERY_CRAGS_WITHIN,
- variables: {
- filter: {
- bbox,
- zoom
- }
- },
- notifyOnNetworkStatusChange: true
- })
-
- if (Array.isArray(rs.data?.cragsWithin)) {
- return rs.data?.cragsWithin ?? []
- }
- console.log('WARNING: cragsWithin() returns non-array data')
- return []
- } catch (e) {
- console.log('cragsWithin() error', e)
- }
- return []
-}
-
-export const getCragsWithinNicely = AwesomeDebouncePromise(getCragsWithin, 1000)
-
export const getTicksByUserAndClimb = async (climbId: string, userId: string): Promise => {
try {
const res = await graphqlClient.query<{ userTicksByClimbId: TickType[] }>({
diff --git a/src/pages/classic/index.tsx b/src/pages/classic/index.tsx
deleted file mode 100644
index 144c01764..000000000
--- a/src/pages/classic/index.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { useState, useEffect } from 'react'
-import type { NextPage, GetStaticProps } from 'next'
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import * as Tabs from '@radix-ui/react-tabs'
-import { gql } from '@apollo/client'
-import { TagIcon, LightBulbIcon, MapPinIcon, PencilIcon, ArrowTrendingUpIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
-
-import Layout from '@/components/layout'
-import SeoTags from '@/components/SeoTags'
-import { graphqlClient } from '@/js/graphql/Client'
-import { getMediaForFeed } from '@/js/graphql/api'
-import { IndexResponseType, MediaWithTags } from '@/js/types'
-import { ExploreProps } from '@/components/home/DenseAreas'
-import TabsTrigger from '@/components/ui/TabsTrigger'
-import RecentTaggedMedia from '@/components/home/RecentMedia'
-import { FRAGMENT_MEDIA_WITH_TAGS } from '@/js/graphql/gql/tags'
-
-const allowedViews = ['explore', 'newTags', 'map', 'edit', 'pulse']
-
-interface HomePageType {
- exploreData: IndexResponseType
- recentMediaWithTags: MediaWithTags[]
-}
-
-const Home: NextPage = ({ exploreData, recentMediaWithTags }) => {
- const router = useRouter()
- const [activeTab, setTab] = useState('')
- const { areas } = exploreData
-
- useEffect(() => {
- if (activeTab !== '' && allowedViews.includes(activeTab)) {
- if (activeTab === 'edit') {
- void router.replace('/edit')
- return
- }
- if (activeTab === 'pulse') {
- void router.replace('/pulse')
- return
- }
- const query = router.query
- query.v = activeTab
- const queryString = Object.keys(query).map((key) => {
- return encodeURIComponent(key) + '=' + encodeURIComponent(query[key] as string)
- }).join('&')
-
- void router.push(`/classic?${queryString}`, undefined, { shallow: true })
- }
- }, [activeTab])
-
- useEffect(() => {
- if (router.isReady) {
- const urlViewParam = router.query.v
- let tabToSet = 'newTags'
- if (typeof urlViewParam === 'string' && allowedViews.includes(urlViewParam)) {
- tabToSet = urlViewParam
- }
- setTab(tabToSet)
- }
- }, [router.isReady, router.query])
-
- return (
- <>
-
-
-
-
-
- }
- label='Edit'
- />
- }
- label='New tags'
- />
- }
- label='Popular'
- />
- }
- label='Map'
- />
- }
- label='Pulse'
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- )
-}
-
-export const getStaticProps: GetStaticProps = async ({ params }) => {
- const query = gql`
- ${FRAGMENT_MEDIA_WITH_TAGS}
- query UsaAreas( $filter: Filter) {
- areas(filter: $filter, sort: { totalClimbs: -1 }) {
- id
- uuid
- areaName
- pathTokens
- totalClimbs
- density
- aggregate {
- byDiscipline {
- sport {
- total
- }
- trad {
- total
- }
- boulder {
- total
- }
- tr {
- total
- }
- alpine {
- total
- }
- mixed {
- total
- }
- aid {
- total
- }
- }
- }
- metadata {
- lat
- lng
- areaId
- }
- media {
- ... MediaWithTagsFields
- }
- }
- }`
-
- const rs = await graphqlClient.query({
- query,
- variables: {
- filter: {
- field_compare: [{
- field: 'totalClimbs',
- num: 400,
- comparison: 'gt'
- }, {
- field: 'density',
- num: 0.5,
- comparison: 'gt'
- }]
- }
- }
- })
-
- const recentTagsByUsers = await getMediaForFeed(20, 3)
-
- const testAreaIds = Array.from(new Set((process.env.NEXT_PUBLIC_TEST_AREA_IDS ?? '').split(',')))
-
- const mediaWithTags = recentTagsByUsers.flatMap(entry => entry.mediaWithTags)
-
- const recentTags = mediaWithTags.filter(tag => {
- return tag.entityTags.some(entityTag => {
- return testAreaIds.every(testId => {
- const regex = new RegExp(testId, 'g')
- return !regex.test(entityTag.ancestors)
- })
- })
- })
- return {
- props: {
- exploreData: rs.data,
- recentMediaWithTags: recentTags
- },
- revalidate: 60
- }
-}
-export default Home
-
-const DynamicDenseAreas = dynamic(
- async () =>
- await import('@/components/home/DenseAreas').then(
- module => module.default), { ssr: false }
-)
-
-const DynamicMap = dynamic(
- async () =>
- await import('@/components/home/Map').then(
- module => module.default), { ssr: false }
-)