{\n if (currentSortKey === sortKey) {\n if (currentSortAscending !== defaultSortAscending) {\n setSortKey(null)\n setSortAscending(defaultSortAscending)\n } else {\n setSortAscending(!defaultSortAscending)\n }\n } else {\n setSortKey(sortKey)\n setSortAscending(defaultSortAscending)\n }\n }}\n cursor=\"pointer\"\n >\n {name} \n {sortKey === currentSortKey ? (\n currentSortAscending ? (\n \n ) : (\n \n )\n ) : (\n \n )}\n \n )\n}\n\nconst sortField = (climb, sortKey, gradeMap) => {\n if (sortKey === 'name') {\n return mostVoted(climb.name_votes)\n }\n if (sortKey === 'grade') {\n // TODO: should be average grade, not most voted\n return gradeMap[climb.most_voted_grade]?.fuzzyUnifiedRank\n }\n if (sortKey === 'rating') {\n return climb.average_rating\n }\n if (sortKey === 'type') {\n return mostVoted(climb.climb_type_votes)\n }\n}\n\nconst NameCell = ({ climb }) => {\n const { sector, error } = useSector(climb.sector_id)\n if (sector === undefined || error) {\n return null\n }\n return (\n | \n \n \n {mostVoted(climb.name_votes)}\n {' '}\n \n \n | \n )\n}\n\nconst ClimbTagIcons = ({ climb }) => {\n const { betaVideos } = useBetaVideos({\n climb_id: climb.id,\n })\n const { comments } = useComments(climb.id)\n return (\n \n {comments !== undefined && comments.length >= 1 ? (\n = 2\n ? `${comments.length} comments`\n : `${comments.length} comment`\n }\n />\n ) : (\n ''\n )}\n {betaVideos !== undefined && betaVideos.length >= 1 ? (\n = 2\n ? `${betaVideos.length} beta videos`\n : `${betaVideos.length} beta video`\n }\n />\n ) : (\n ''\n )}\n {climb.broken_votes !== undefined && climb.broken_votes.length >= 1 ? (\n \n ) : (\n ''\n )}\n \n )\n}\n\nconst RatingCell = ({ climb }) => {\n return (\n \n {climb.rating_votes.length >= 1 ? (\n \n ) : (\n 'No votes yet'\n )}\n | \n )\n}\n\nconst AscentsCell = ({ climb }) => {\n const { ascents } = useAscents({ climb_id: climb.id })\n return (\n {ascents !== undefined && ascents.length > 0 ? ascents.length : 0} | \n )\n}\n\nconst ClimbTypeCell = ({ climb }) => {\n const climbType = mostVoted(climb.climb_type_votes)\n return (\n \n {(climbType !== undefined) & (climbType !== null)\n ? climbType.value\n : 'No votes yet'}\n | \n )\n}\n\nconst SectorCell = ({ climb }) => {\n const { sector, error } = useSector(climb.sector_id)\n if (sector === undefined || error) {\n return null\n }\n return (\n \n \n {mostVoted(sector.name_votes)}\n {' '}\n | \n )\n}\n\nconst TickedCell = ({ climb }) => {\n const currentUserId = useCurrentUser().user?.id\n const { ascents, error: errorAscents } = useAscents({ climb_id: climb.id })\n if (ascents === undefined || errorAscents) {\n return null\n }\n const isTicked =\n ascents.filter((ascent) => ascent.user_id === currentUserId).length >= 1\n return (\n \n \n | \n )\n}\n","import { Box, Button, Center, Image, Text } from '@chakra-ui/react'\nimport React from 'react'\nimport 'react-medium-image-zoom/dist/styles.css'\nimport {\n authorizedFetcher,\n useCragPhoto,\n useCurrentUser,\n useUser,\n} from '../utils/backend'\n\nexport default function CragPhotoPage({ cragPhotoId }) {\n const { cragPhoto, error } = useCragPhoto(cragPhotoId)\n const { user } = useUser(cragPhoto?.user_id)\n const { user: currentUser } = useCurrentUser()\n\n const deleteImage = () =>\n authorizedFetcher(`/crag_photos/${cragPhotoId}}`, {\n method: 'DELETE',\n })\n\n if (cragPhoto === undefined || user === undefined) {\n return ''\n }\n\n if (error) {\n return Error fetching photo\n }\n return (\n \n \n Uploaded by: {user?.display_name}\n \n {user?.id === currentUser.id ? (\n \n ) : (\n ''\n )}\n \n \n \n \n \n \n )\n}\n","import {\n Avatar,\n Box,\n Fade,\n SimpleGrid,\n Text,\n useDisclosure,\n} from '@chakra-ui/react'\nimport React from 'react'\nimport CragPhotoPage from '../pages/crag-photo'\nimport { useUser } from '../utils/backend'\nimport ModalDialog from './modal-dialog'\n\nfunction PhotoGrid({ cragPhotos, error, children, ...props }) {\n if (cragPhotos === undefined) {\n return ''\n }\n\n if (error) {\n return Error fetching photos\n }\n\n return (\n \n {children}\n \n {cragPhotos.map((cragPhoto) => {\n return (\n \n )\n })}\n \n \n )\n}\n\nfunction CragPhoto({ img, cragId, imgId, userId, ...props }) {\n const { isOpen, onToggle } = useDisclosure()\n const { user } = useUser(userId)\n return (\n \n \n \n \n \n Uploaded by {user?.display_name}\n \n \n \n \n \n \n \n }\n size=\"4xl\"\n width=\"100%\"\n >\n \n \n \n )\n}\n\nexport { PhotoGrid }\n","import useSwr from 'swr'\nimport { useAuth0 } from '@auth0/auth0-react'\n\nexport const useToken = () => {\n const { getAccessTokenSilently, isAuthenticated } = useAuth0()\n const { data, error } = useSwr(\n isAuthenticated ? 'token' : null,\n getAccessTokenSilently\n )\n return { token: data, error }\n}\n","import { useToken } from './useToken'\n\nconst checkResponseStatus = (response) => {\n if (response.status >= 400) {\n throw response\n }\n return response\n}\n\nexport const useAuthorizedFetcher = () => {\n const { token } = useToken()\n\n if (token) {\n return (endpoint, requestOptions = {}) =>\n fetch(`${process.env.REACT_APP_BACKEND}${endpoint}`, {\n ...requestOptions,\n method: requestOptions?.method ? requestOptions.method : 'get',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: `Bearer ${token}`,\n ...requestOptions?.headers,\n },\n body: requestOptions?.body\n ? JSON.stringify(requestOptions.body)\n : undefined,\n })\n .then(checkResponseStatus)\n .then((response) => {\n if (response.headers.get('content-type') === 'application/json') {\n return response.json()\n } else {\n return response.blob()\n }\n })\n } else {\n return null\n }\n}\n","import { useAuth0 } from '@auth0/auth0-react'\nimport { useAuthorizedFetcher } from './useAuthorizedFetcher.js'\nimport useSWR from 'swr'\nimport { useSWRConfig } from 'swr'\nimport { stringify } from 'query-string'\n\nconst camelToUnderscore = (key) => {\n var result = key.replace(/([A-Z])/g, ' $1')\n return result.split(' ').join('_').toLowerCase()\n}\n\nconst camelToUnderscoreObject = (object) =>\n Object.keys(object).reduce(\n (newObject, key) =>\n Object.assign(newObject, { [camelToUnderscore(key)]: object[key] }),\n {}\n )\n\nconst removeUndefined = (object) =>\n Object.keys(object).reduce(\n (newObject, key) =>\n object[key] === undefined || object[key] === ''\n ? newObject\n : Object.assign(newObject, { [key]: object[key] }),\n {}\n )\n\nconst queryString = (query) => {\n return stringify(camelToUnderscoreObject(removeUndefined(query)))\n}\n\nexport const useBackend = (endpoint, kwargs = {}) => {\n const query = kwargs?.query\n const options = kwargs?.options\n const { mutate } = useSWRConfig()\n const { user } = useAuth0()\n const authorizedFetcher = useAuthorizedFetcher()\n\n const uri =\n Object.keys(query ?? {}).length === 0\n ? endpoint\n : `${endpoint}?${queryString(query)}`\n\n const key = [uri, user?.sub]\n\n const backend = useSWR(\n authorizedFetcher && uri ? key : null,\n (_) => authorizedFetcher(uri, options),\n options\n )\n\n // Local bound mutate is mutating new object if the key changes\n // https://github.com/vercel/swr/issues/1732\n const replaceLocalMutate = (data, shouldRevalidate) => {\n // options?.onMutate?.(data);\n const promise = options?.onMutate?.(data)\n return Promise.all([\n mutate(key, data, shouldRevalidate),\n ...(promise ? [promise] : []),\n ])\n }\n\n return {\n ...backend,\n mutate: replaceLocalMutate,\n isLoading: backend.data === undefined && backend.error === undefined,\n key,\n }\n}\n","import { useBackend } from './useBackend'\n\nexport const useQuery = (collection, query, limit, offset) =>\n useBackend(collection && query ? `/${collection}/query` : null, {\n query: {\n limit: limit,\n offset: offset,\n },\n options: {\n method: 'POST',\n body: query,\n },\n })\n// useBackend(\n// collection && query\n// ? `/${collection}/query?limit=${limit}&offset=${offset}`\n// : null,\n// {\n// method: 'POST',\n// body: JSON.stringify(query),\n// }\n// )\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { AddIcon, ChevronDownIcon, EditIcon } from '@chakra-ui/icons'\nimport {\n Alert,\n AlertIcon,\n AlertTitle,\n Avatar,\n AvatarGroup,\n Box,\n Button,\n Center,\n CloseButton,\n Container,\n Flex,\n Heading,\n IconButton,\n Link,\n LinkBox,\n Menu,\n MenuButton,\n MenuItem,\n MenuList,\n Spacer,\n Stack,\n Tag,\n Text,\n Wrap,\n} from '@chakra-ui/react'\nimport Linkify from 'react-linkify'\nimport { Link as RouterLink, useParams } from 'react-router-dom'\nimport {\n CragBannerMenu,\n CragFrontPageBanner,\n} from '../../components/crag-banner.js'\nimport { CragComponentBox } from '../../components/crag-component-box'\nimport { CragGrades } from './crag-grades.js'\nimport EditButton from '../../components/edit-button.js'\nimport Loader from '../../components/loader.js'\nimport ModalDialog from '../../components/modal-dialog.js'\nimport { PageFooter } from '../../components/page-footer.js'\nimport { PhotoGrid } from '../../components/photo-grid.js'\nimport { Sector, SectorGrid } from './sectors.js'\nimport VoteConflictWarning from '../../components/vote-conflict-warning.js'\nimport {\n countVotes,\n mostVoted,\n useCrag,\n useCragPhotos,\n useSectors,\n} from '../../utils/backend.js'\nimport AddCragPhoto from '../add-crag-photo.js'\nimport AddSector from '../add-sector.js'\nimport Comments from '../comments.js'\nimport { useClimbs } from '../../backend/useClimbs.js'\n\nexport default function Crag() {\n const bg = useColorModeValue('gray.200', 'gray.700')\n const boxBg = useColorModeValue('offwhite', 'gray.600')\n const headingColor = useColorModeValue('gray.900', 'gray.100')\n const headingShadow = useColorModeValue(\n 'none',\n '3px 3px 3px rgba(0, 0, 0, 0.2)'\n )\n\n const { cragId } = useParams()\n const { crag, error: errorCrag } = useCrag(cragId)\n const { cragPhotos, error: errorCragPhotos } = useCragPhotos({\n crag_id: cragId,\n })\n const { sectors, error: errorSectors } = useSectors({ crag_id: cragId }, 100)\n\n const climbs = useClimbs(cragId ? { crag_id: cragId } : null, 100)\n const boulderClimbs = climbs.data?.filter(\n (climb) =>\n climb.climb_type_votes.filter((vote) => vote.value === 'boulder')\n .length >= 1\n )?.length\n const sportClimbs = climbs.data?.filter(\n (climb) =>\n climb.climb_type_votes.filter((vote) => vote.value === 'sport').length >=\n 1\n )\n const traditionalClimbs = climbs.data?.filter(\n (climb) =>\n climb.climb_type_votes.filter((vote) => vote.value === 'traditional')\n .length >= 1\n )?.length\n\n if (errorCrag || errorSectors) {\n return (\n \n \n Failed to load crag.\n \n \n )\n }\n\n if (crag === undefined || sectors === undefined) {\n return \n }\n return (\n \n \n \n \n {crag.name_votes.length >= 1\n ? mostVoted(crag.name_votes)\n : 'No name votes'}\n \n \n \n \n \n \n \n \n \n in the area of{' '}\n \n Uppsala, Sweden\n \n \n \n {boulderClimbs >= 1 && (\n \n {boulderClimbs} Boulders\n \n )}\n {sportClimbs >= 1 && (\n \n {sportClimbs} Sport routes\n \n )}\n {traditionalClimbs >= 1 && (\n \n {traditionalClimbs} Trad routes\n \n )}\n \n \n \n \n \n {countVotes(crag?.access_information_votes)\n .filter((vote) => vote.count > 1)\n .map((vote) => (\n \n \n \n Access Issue!\n {vote.value} ({vote.count} votes)\n \n \n ))}\n\n \n \n New comment!\n Rasmus: Kul och så men va i hela jäv... View now\n \n \n \n \n \n \n \n \n \n \n \n Description\n \n \n \n \n \n \n \n \n \n \n {crag.description_votes.length === 0\n ? 'No description has been added.'\n : mostVoted(crag.description_votes)}\n \n \n \n \n\n \n \n \n Access\n \n \n \n \n \n \n \n \n \n \n {crag.access_information_votes.length === 0\n ? 'No access information has been added.'\n : mostVoted(crag.access_information_votes)}\n \n \n \n \n \n \n Authors\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n List all problems\n \n \n \n \n \n \n \n \n \n \n \n Sectors\n \n \n\n \n \n \n }\n display={{ base: 'block', md: 'none' }}\n boxShadow=\"xl\"\n colorScheme=\"brand\"\n color=\"white\"\n >\n \n \n Add sector \n \n \n \n }\n >\n \n \n \n \n \n \n \n \n \n\n \n {sectors.length > 0 ? (\n \n {sectors\n .filter((sector) => sector.name_votes.length >= 1 && sector)\n .map((sector) => (\n \n {mostVoted(sector.name_votes)}\n \n \n ))}\n \n ) : (\n No sectors has been added yet.\n )}\n \n \n \n \n \n \n \n Recent comments\n \n \n\n \n \n \n }\n display={{ base: 'block', md: 'none' }}\n boxShadow=\"xl\"\n colorScheme=\"brand\"\n color=\"white\"\n >\n \n \n Add comment\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Photos of{' '}\n {crag.name_votes.length >= 1\n ? mostVoted(crag.name_votes)\n : 'No name votes'}\n \n \n \n \n }\n display={{ base: 'block', md: 'none' }}\n boxShadow=\"xl\"\n colorScheme=\"brand\"\n color=\"white\"\n >\n \n \n Add photo\n \n \n \n }\n >\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n","import { useQuery } from './useQuery'\n\nexport const useClimbs = (query, limit = 20, offset = 0) => {\n return useQuery('climbs', query, limit, offset)\n}\n","import {\n Box,\n Button,\n Center,\n Container,\n Heading,\n HStack,\n Link,\n Skeleton,\n StackDivider,\n Stat,\n StatLabel,\n StatNumber,\n Text,\n VStack,\n} from '@chakra-ui/react'\nimport { Link as RouterLink } from 'react-router-dom'\nimport Loader from '../components/loader.js'\nimport { mostVoted, useClimbs, useCrags, useSectors } from '../utils/backend.js'\n\nexport default function Crags() {\n const { crags, error } = useCrags({})\n\n if (error) {\n return (\n \n \n Failed to load crags.\n \n \n )\n }\n\n if (crags === undefined) {\n return \n }\n\n if (crags.length === 0) {\n return (\n \n \n There are no crags to show.\n \n \n )\n }\n\n return (\n \n \n \n }\n spacing={6}\n alignItems=\"left\"\n width=\"100%\"\n >\n {crags\n .filter((crag) => crag.name_votes.length >= 1)\n .map((crag) => (\n \n ))}\n \n \n \n )\n}\n\nfunction Crag({ crag }) {\n const { sectors, error: errorSectors } = useSectors({ crag_id: crag.id })\n const { climbs, error: errorClimbs } = useClimbs({ crag_id: crag.id })\n\n if (errorSectors || errorClimbs) {\n return Failed to load crag.\n }\n\n return (\n \n \n \n \n {mostVoted(crag.name_votes)}\n \n \n \n \n Sectors\n {sectors ? sectors.length : '?'}\n \n \n Climbs\n {climbs ? climbs.length : '?'}\n \n \n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport {\n Avatar,\n Box,\n Button,\n HStack,\n Image,\n Text,\n VStack,\n} from '@chakra-ui/react'\n\nexport default function Feed(filter) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction FeedItemBox({ children }) {\n const bg = useColorModeValue('gray.200', 'gray.600')\n return (\n \n {children}\n \n )\n}\n\nfunction FeedItem({ itemId, itemType }) {\n if (itemType === 'content') {\n return (\n \n \n \n UserName added new content {' '}\n {' '}\n \n \n \n \n \n )\n }\n if (itemType === 'ascent') {\n return (\n \n \n \n UserName just ticked! {' '}\n \n \n \n \n \n \n \n )\n }\n if (itemType === 'photo') {\n return (\n \n \n \n UserName added new photo!{' '}\n \n \n \n \n \n \n \n \n \n )\n }\n if (itemType === 'betavideo') {\n return (\n \n \n \n UserName added new beta video for ... {' '}\n \n\n \n \n )\n } else return 's'\n}\n","import { Box } from '@chakra-ui/react'\nimport { CragComponentBox } from '../components/crag-component-box.js'\nimport Feed from '../components/feed.js'\nimport { PageFooter } from '../components/page-footer.js'\n\nexport default function FeedPage() {\n return (\n <>\n \n \n \n \n \n \n \n )\n}\n","import {\n Box,\n Heading,\n HStack,\n Slider,\n SliderFilledTrack,\n SliderThumb,\n SliderTrack,\n Text,\n} from '@chakra-ui/react'\n\nexport default function FilterSlider({ label, ...props }) {\n return (\n \n \n {label}\n \n \n \n \n \n \n \n {props.value}\n \n \n \n \n )\n}\n","import { useCallback, useLayoutEffect, useRef } from 'react'\n\nexport default function useCallbackRef(fn, dependencies = []) {\n // More or less stolen from:\n // https://github.com/chakra-ui/chakra-ui/blob/7e2cb4c344cabf9ddd607a632affd84060dcb424/packages/hooks/src/use-callback-ref.ts\n const ref = useRef(fn)\n\n useLayoutEffect(() => {\n ref.current = fn\n })\n return useCallback(\n (...args) => {\n return ref.current?.(...args)\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [...dependencies]\n )\n}\n","import { Text } from '@chakra-ui/layout'\nimport { Box } from '@chakra-ui/layout'\nimport { SliderThumb } from '@chakra-ui/slider'\nimport { SliderFilledTrack } from '@chakra-ui/slider'\nimport { SliderTrack } from '@chakra-ui/slider'\nimport { Slider } from '@chakra-ui/slider'\nimport { useCallback, useEffect, useState } from 'react'\nimport useCallbackRef from '../hooks/use-callback-ref'\n\nexport default function RangeSlider({\n min,\n max,\n step = 1,\n fromArray,\n value,\n onChange,\n onChangeEnd,\n ...props\n}) {\n const [lowerValue, setLowerValue] = useState(value[0])\n const [upperValue, setUpperValue] = useState(value[1])\n const onChangeCallback = useCallbackRef(onChange)\n const lowerChangeEnd = useCallbackRef((lowerValue) =>\n onChangeEnd([lowerValue, upperValue])\n )\n const upperChangeEnd = useCallbackRef((upperValue) =>\n onChangeEnd([lowerValue, upperValue])\n )\n\n const handleLowerChangeEnd = useCallback(\n () => lowerChangeEnd(lowerValue),\n [lowerChangeEnd, lowerValue]\n )\n const handleUpperChangeEnd = useCallback(\n () => upperChangeEnd(upperValue),\n [upperChangeEnd, upperValue]\n )\n\n useEffect(() => {\n onChangeCallback([lowerValue, upperValue])\n }, [lowerValue, upperValue, onChangeCallback])\n\n if ((fromArray && min) || (fromArray && max)) {\n throw new Error('fromArray should not be used with the min or max prop.')\n }\n\n const minimum = fromArray ? 0 : min\n const maximum = fromArray ? fromArray.length - 1 : max\n const displayFunction = fromArray\n ? (index) => fromArray[index]\n : (index) => index\n\n return (\n \n \n setUpperValue(Math.max(lowerValue, value))}\n onChangeEnd={handleUpperChangeEnd}\n >\n \n \n \n \n {displayFunction(upperValue)}\n \n \n \n \n {\n // To make sure both sliders don't get stuck at 0\n // (only the lower value one is clickable)\n if (lowerValue === 0 && upperValue === 0) {\n setUpperValue(value)\n }\n setLowerValue(Math.min(value, upperValue))\n }}\n onChangeEnd={handleLowerChangeEnd}\n >\n \n \n \n\n \n {displayFunction(lowerValue)}\n \n \n \n \n )\n}\n","import { Box } from '@chakra-ui/react'\n// eslint-disable-next-line import/no-webpack-loader-syntax\nimport mapboxgl from '!mapbox-gl'\nimport { useEffect, useRef, useState } from 'react'\nimport useCallbackRef from '../hooks/use-callback-ref'\n\nexport default function MapboxMap({\n lng = 17.194966,\n lat = 59.821977,\n zoom = 8,\n onMapLoad,\n mapEffects,\n deps,\n h = '50vh',\n}) {\n const [mapLoaded, setMapLoaded] = useState(false)\n const [stylesLoaded, setStylesLoaded] = useState(false)\n const mapContainer = useRef()\n const mapboxMap = useRef()\n const onLoad = useCallbackRef(onMapLoad)\n const effects = useCallbackRef(mapEffects)\n\n useEffect(() => {\n if (mapboxMap.current) {\n return\n }\n\n mapboxMap.current = new mapboxgl.Map({\n container: mapContainer.current,\n style: 'mapbox://styles/trabuchhobbes/ckml1bv0s28tu17ntgo22j7i9',\n center: [lng, lat],\n attributionControl: false,\n zoom,\n })\n\n setMapLoaded(true)\n\n return () => mapboxMap.current.remove()\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onLoad])\n\n useEffect(() => {\n if (!mapLoaded) return\n\n mapboxMap.current.on('load', () => {\n mapboxMap.current.addControl(\n new mapboxgl.AttributionControl(),\n 'top-left'\n )\n\n onLoad(mapboxMap.current)\n })\n\n mapboxMap.current.on('styledata', () => {\n setStylesLoaded(true)\n })\n }, [mapLoaded, onLoad])\n\n useEffect(() => {\n if (!mapLoaded || !stylesLoaded) return\n\n effects(mapboxMap.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [lat, lng, zoom, effects, ...deps, stylesLoaded, mapLoaded])\n\n return \n}\n","import ReactDOM from 'react-dom'\n\nexport default function MapPopupPortal({ domNode, children }) {\n if (!domNode) {\n return null\n }\n return ReactDOM.createPortal(children, domNode)\n}\n","import { Box, Link, Skeleton, Text } from '@chakra-ui/react'\nimport { Link as RouterLink } from 'react-router-dom'\nimport { mostVoted, useGradeSystemGrade } from '../utils/backend'\n\nexport default function SearchResult({ climb }) {\n const { grade, error } = useGradeSystemGrade(mostVoted(climb.grade_votes))\n if (error) {\n return Failed to load grade.\n }\n\n if (grade === undefined) {\n return (\n \n ?\n \n )\n }\n return (\n \n \n {mostVoted(climb.name_votes)}, {grade.grade}\n \n \n )\n}\n","import { IconButton } from '@chakra-ui/button'\nimport { useColorModeValue } from '@chakra-ui/color-mode'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'\nimport { Flex, Text, VStack } from '@chakra-ui/layout'\nimport { useState } from 'react'\nimport SearchResult from './search-result'\nexport default function MapPopup({ climbs }) {\n const [climbIndex, setClimbIndex] = useState(0)\n const textColor = useColorModeValue('black', 'black')\n\n if (!climbs) return null\n\n const climb = climbs[climbIndex]\n const nClimbs = climbs.length\n\n let leftArrow = null\n let rightArrow = null\n let nMoreClimbs = null\n\n if (nClimbs > 1) {\n leftArrow = (\n }\n flex=\"0 0 0\"\n size=\"xs\"\n variant=\"ghost\"\n onClick={() =>\n setClimbIndex((oldIndex) => (oldIndex - 1 + nClimbs) % nClimbs)\n }\n />\n )\n rightArrow = (\n }\n flex=\"0 0 0\"\n size=\"xs\"\n onClick={() => setClimbIndex((oldIndex) => (oldIndex + 1) % nClimbs)}\n variant=\"ghost\"\n />\n )\n nMoreClimbs = (\n {`${nClimbs - 1} more climb${\n nClimbs > 2 ? 's' : ''\n }...`}\n )\n }\n\n return (\n \n \n {leftArrow}\n \n {rightArrow}\n \n {nMoreClimbs}\n \n )\n}\n","import { addLocationMarker } from '../mapbox/add-marker'\nimport useCallbackRef from '../hooks/use-callback-ref'\nimport MapboxMap from './mapbox-map'\nimport { addSearchArea, removeSearchArea } from '../mapbox/isochrone'\nimport { addRouteMarkers } from '../mapbox/route-markers'\nimport { climbsToGeoJson } from '../mapbox/utils'\nimport { useRef, useState } from 'react'\n// eslint-disable-next-line import/no-webpack-loader-syntax\nimport mapboxgl from '!mapbox-gl'\nimport MapPopupPortal from './map-popup-portal'\nimport MapPopup from './map-popup'\n\nexport default function SearchMap({\n h,\n searchArea,\n climbs,\n location,\n zoom = 7,\n setLocation,\n}) {\n const setLocationCallback = useCallbackRef(setLocation)\n const [popupRoutes, setPopupRoutes] = useState(null)\n const popupRef = useRef(null)\n\n const onMapLoad = (map) => {\n map.resize()\n\n addLocationMarker(\n map,\n location.latitude,\n location.longitude,\n setLocationCallback\n )\n\n map.on('click', (e) => {\n const features = map.queryRenderedFeatures(e.point, {\n layers: ['routes'],\n })\n if (!features.length) {\n setPopupRoutes(null)\n return\n }\n\n const feature = features[0]\n\n const popupContainer = window.document.createElement('div')\n popupRef.current = popupContainer\n\n new mapboxgl.Popup({\n offset: [0, -20],\n maxWidth: '360px',\n closeButton: false,\n })\n .setLngLat(feature.geometry.coordinates)\n .setDOMContent(popupContainer)\n .addTo(map)\n\n setPopupRoutes(JSON.parse(feature.properties.climbs))\n })\n }\n\n const mapEffects = (map) => {\n if (searchArea) {\n addSearchArea(map, searchArea)\n } else {\n removeSearchArea(map)\n }\n\n if (climbs) {\n addRouteMarkers(map, climbsToGeoJson(climbs))\n }\n }\n\n return (\n <>\n \n \n \n \n \n )\n}\n","// eslint-disable-next-line import/no-webpack-loader-syntax\nimport mapboxgl from '!mapbox-gl'\n\nexport function addLocationMarker(map, lat, lng, setLocation) {\n const marker = new mapboxgl.Marker({ draggable: true })\n .setLngLat([lng, lat])\n .addTo(map)\n\n marker.on('dragend', () => {\n const lnglat = marker.getLngLat()\n setLocation({\n longitude: lnglat.lng,\n latitude: lnglat.lat,\n })\n })\n}\n","export function addSearchArea(map, searchArea) {\n if (map.getSource('searchArea')) {\n map.getSource('searchArea').setData(searchArea)\n } else {\n map.addSource('searchArea', {\n type: 'geojson',\n data: searchArea,\n })\n map.addLayer({\n id: 'searchArea',\n source: 'searchArea',\n type: 'fill',\n paint: { 'fill-color': '#BF4040', 'fill-opacity': 0.2 },\n })\n map.addLayer({\n id: 'searchArea-outline',\n source: 'searchArea',\n type: 'line',\n paint: {\n 'line-width': 1,\n 'line-color': '#bf0000',\n },\n })\n }\n}\n\nexport function removeSearchArea(map) {\n if (map.getSource('searchArea')) {\n map.removeLayer('searchArea')\n map.removeLayer('searchArea-outline')\n map.removeSource('searchArea')\n }\n}\n","export function addRouteMarkers(map, routesFeatures) {\n if (map.getSource('routes')) {\n map.getSource('routes').setData(routesFeatures)\n } else {\n map.addSource('routes', {\n type: 'geojson',\n data: routesFeatures,\n })\n\n map.addLayer({\n id: 'routes',\n type: 'symbol',\n source: 'routes',\n layout: {\n 'icon-image': 'mapbox-marker-icon-green',\n 'icon-anchor': 'center',\n 'icon-allow-overlap': true,\n },\n })\n\n map.addLayer({\n id: 'routes-count-overlay',\n type: 'circle',\n source: 'routes',\n filter: ['>', 'climb_count', 1],\n paint: {\n 'circle-color': '#cfefcf',\n 'circle-radius': 10,\n 'circle-stroke-color': 'black',\n 'circle-stroke-width': 1,\n 'circle-translate': [13, -24],\n },\n })\n\n map.addLayer({\n id: 'routes-count',\n type: 'symbol',\n source: 'routes',\n filter: ['>', 'climb_count', 1],\n layout: {\n 'text-field': '{climb_count}',\n 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],\n 'text-size': 12,\n 'text-anchor': 'center',\n 'text-offset': [1.05, -2],\n },\n })\n }\n}\n","import { groupBy } from '../utils/functions'\n\nexport function climbsToGeoJson(climbs) {\n const sectors = Object.values(groupBy(climbs, 'sector_id'))\n return {\n type: 'FeatureCollection',\n features: sectors.map((climbs) => ({\n type: 'Feature',\n geometry: { type: 'Point', coordinates: climbs[0].coordinates },\n properties: {\n climbs,\n climb_count: climbs.length,\n },\n })),\n }\n}\n","export const groupBy = (array, key) => {\n return array.reduce((grouped, item) => {\n grouped[item[key]] = grouped[item[key]] || []\n grouped[item[key]].push(item)\n return grouped\n }, {})\n}\n","import { Box, Heading } from '@chakra-ui/react'\nimport SearchResult from './search-result'\n\nexport default function SearchResults({ climbs }) {\n if (!climbs || !climbs.length) return null\n\n return (\n <>\n Results\n \n {climbs.map((climb) => (\n \n ))}\n \n \n )\n}\n","export const climbTypes = ['Boulder', 'Sport', 'Trad']\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { Flex, Heading, HStack } from '@chakra-ui/layout'\nimport { Box, Center, Container, Text } from '@chakra-ui/react'\nimport { Select } from '@chakra-ui/select'\nimport circleToPolygon from 'circle-to-polygon'\nimport { useCallback, useEffect, useState } from 'react'\nimport FilterSlider from '../components/filter-slider'\nimport Loader from '../components/loader'\nimport RangeSlider from '../components/range-slider'\nimport SearchMap from '../components/search-map'\nimport SearchResults from '../components/search-results'\nimport { useGradeSystemGrades, useSearchClimbs } from '../utils/backend'\nimport { climbTypes } from '../utils/constants'\n\nexport default function FilterSearch({ ...props }) {\n const [climbType, setClimbType] = useState('')\n const [drivingDistance, setDrivingDistance] = useState(60)\n const [drivingDistanceEnd, setDrivingDistanceEnd] = useState(60)\n const [linearDistance, setLinearDistance] = useState(100)\n const [linearDistanceEnd, setLinearDistanceEnd] = useState(100)\n const [gradeRange, setGradeRange] = useState([7, 30])\n const [gradeRangeEnd, setGradeRangeEnd] = useState([7, 30])\n const [stars, setStars] = useState(0)\n const [starsEnd, setStarsEnd] = useState(0)\n const [ascents, setAscents] = useState(0)\n const [ascentsEnd, setAscentsEnd] = useState(0)\n const [location, setLocation] = useState({\n longitude: 18.103421414223476,\n latitude: 59.356688222237636,\n })\n\n const [distanceType, setDistanceType] = useState('Linear')\n const [isochrone, setIsochrone] = useState(null)\n const [sphericalArea, setSphericalArea] = useState(\n circleToPolygon(\n [location.longitude, location.latitude],\n linearDistanceEnd * 1000,\n { numberOfEdges: 100 }\n )\n )\n const handleDrivingDistanceChangeEnd = useCallback(\n (value) => setDrivingDistanceEnd(value),\n [setDrivingDistanceEnd]\n )\n const handleLinearDistanceChangeEnd = useCallback(\n (value) => setLinearDistanceEnd(value),\n [setLinearDistanceEnd]\n )\n const handleStarsEnd = useCallback(\n (value) => setStarsEnd(value),\n [setStarsEnd]\n )\n const handleAscentsEnd = useCallback(\n (value) => setAscentsEnd(value),\n [setAscentsEnd]\n )\n\n const { gradeSystemGrades, error: errorGradeSystemGrades } =\n useGradeSystemGrades()\n\n const fontGrades = gradeSystemGrades\n ?.filter(({ system }) => system === 'Fontainebleau grading system')\n .sort((a, b) => a.rank - b.rank)\n\n const getEquivalentGrades = (sliderGrades, gradeRange) => {\n const [lowerBound, upperBound] = gradeRange\n const lowerFuzzyGrade = sliderGrades[lowerBound].fuzzy_unified_rank\n const upperFuzzyGrade = sliderGrades[upperBound].fuzzy_unified_rank\n\n return gradeSystemGrades.filter(\n (grade) =>\n grade.fuzzy_unified_rank >= lowerFuzzyGrade &&\n grade.fuzzy_unified_rank <= upperFuzzyGrade\n )\n }\n\n const boxBg = useColorModeValue('offwhite', 'blackAlpha.700')\n const { climbs, searchClimbError } = useSearchClimbs(\n {\n ...(fontGrades && {\n grade_ids: getEquivalentGrades(fontGrades, gradeRangeEnd).map(\n (grade) => grade.id\n ),\n }),\n ...(distanceType === 'Driving' &&\n isochrone !== null && {\n within_polygon: isochrone.features[0].geometry.coordinates[0],\n }),\n },\n {\n longitude: location.longitude,\n latitude: location.latitude,\n // Don't filter on min rating if it is set to 0 (to\n // include problems with no avg rating).\n ...(starsEnd && { minimum_average_rating: starsEnd }),\n ...(ascentsEnd && { minimum_ascents: ascentsEnd }),\n ...(distanceType === 'Linear' && { max_distance: linearDistanceEnd }),\n }\n )\n\n useEffect(() => {\n if (distanceType === 'Linear')\n setSphericalArea(\n circleToPolygon(\n [location.longitude, location.latitude],\n linearDistanceEnd * 1000,\n { numberOfEdges: 100 }\n )\n )\n }, [distanceType, linearDistanceEnd, location.latitude, location.longitude])\n\n useEffect(() => {\n if (distanceType !== 'Driving') {\n return\n }\n\n const getIsochrone = async () => {\n const requestString = `https://api.mapbox.com/isochrone/v1/mapbox/driving/${location.longitude}%2C${location.latitude}?contours_minutes=${drivingDistanceEnd}&polygons=true&denoise=1&generalize=500&access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`\n const response = await fetch(requestString).then((res) => res.json())\n setIsochrone(response)\n }\n\n getIsochrone()\n }, [drivingDistanceEnd, distanceType, location.longitude, location.latitude])\n\n if (errorGradeSystemGrades || searchClimbError) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (gradeSystemGrades === undefined) {\n return \n }\n\n const gradeArray = fontGrades?.map(({ grade }) => grade)\n\n let distanceSlider\n let searchArea\n\n if (distanceType === 'Linear') {\n distanceSlider = (\n setLinearDistance(value)}\n onChangeEnd={handleLinearDistanceChangeEnd}\n min={0}\n max={500}\n >\n )\n searchArea = sphericalArea\n } else if (distanceType === 'Driving') {\n distanceSlider = (\n setDrivingDistance(value)}\n onChangeEnd={handleDrivingDistanceChangeEnd}\n min={10}\n step={5}\n max={60}\n >\n )\n searchArea = isochrone\n }\n\n const handleDistanceTypeChange = (event) => {\n const type = event.target.value\n setDistanceType(type)\n if (type === 'Linear') {\n setSphericalArea(\n circleToPolygon(\n [location.longitude, location.latitude],\n linearDistance * 1000,\n { numberOfEdges: 100 }\n )\n )\n }\n }\n return (\n \n \n \n \n \n \n setClimbType(event.target.value)}\n boxShadow=\"base\"\n >\n {climbTypes.map((climbType) => (\n \n ))}\n \n\n \n \n \n \n\n {distanceSlider}\n\n \n \n Grade\n \n setGradeRange(value)}\n onChangeEnd={(value) => setGradeRangeEnd(value)}\n w=\"80%\"\n fromArray={gradeArray}\n />\n \n\n setStars(value)}\n onChangeEnd={handleStarsEnd}\n />\n\n setAscents(value)}\n onChangeEnd={handleAscentsEnd}\n />\n\n \n \n \n \n )\n}\n","import { Button, Center, Container, Link, Text } from '@chakra-ui/react'\nimport { Link as RouterLink, useParams } from 'react-router-dom'\nimport { ImageBreadcrumb } from '../components/breadcrumb.js'\nimport LineImage from '../components/line-image.js'\nimport Loader from '../components/loader.js'\nimport { useImage, useLines } from '../utils/backend.js'\n\nexport default function RockImage() {\n const { cragId, sectorId, imageId } = useParams()\n const { image, error: errorImage } = useImage(imageId)\n const { lines, error: errorLines } = useLines(\n imageId ? { image_id: imageId } : null\n )\n\n if (errorImage || errorLines) {\n return (\n \n \n Failed to load image.\n \n \n )\n }\n\n if (image === undefined || lines === undefined) {\n return \n }\n\n return (\n \n \n \n \n \n \n \n )\n}\n","import { useAuth0 } from '@auth0/auth0-react'\nimport {\n Avatar,\n Box,\n Button,\n Center,\n Container,\n Flex,\n Heading,\n HStack,\n Link,\n SimpleGrid,\n Text,\n} from '@chakra-ui/react'\nimport { Link as RouterLink } from 'react-router-dom'\nimport Loader from '../components/loader.js'\nimport { PageFooter } from '../components/page-footer.js'\nimport { TickRocksLogo } from '../components/tick-rocks-logo.js'\nimport { useCurrentUser } from '../utils/backend'\n\nexport default function Landing() {\n return (\n \n \n \n \n \n \n \n {' '}\n \n \n \n \n Big tick Move of the Month - September: Emil Abrahamsson, Total\n Eclipse, 8A+, Cul de Chen, Fontaniebleau, France.\n \n \n \n \n \n \n \n tick.rocks\n \n \n open-source climbing\n \n \n \n \n \n \n Find a project\n \n \n Browse map\n \n \n View all crags\n \n \n Add crag\n \n \n \n \n \n \n\n \n \n )\n}\n\nfunction SignedIn() {\n const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0()\n const { user } = useCurrentUser()\n if (isLoading) {\n return \n }\n\n if (!isAuthenticated && !isLoading) {\n return (\n \n \n \n You need to{' '}\n \n loginWithRedirect({\n appState: {\n returnTo: window.location.pathname,\n },\n })\n }\n color=\"brand.300\"\n >\n login\n {' '}\n to add stuff and vote.\n \n \n \n )\n } else {\n return (\n \n \n \n \n \n \n Welcome back {user?.display_name}\n !
\n What would you like to do today?\n \n \n \n )\n }\n}\n","import { Center, Code, Container, Text } from '@chakra-ui/react'\nimport { useParams } from 'react-router-dom'\nimport { ImageBreadcrumb } from '../components/breadcrumb.js'\nimport LineImage from '../components/line-image.js'\nimport Loader from '../components/loader.js'\nimport { useImage, useLine } from '../utils/backend.js'\n\nexport default function Line() {\n const { lineId } = useParams()\n const { line, error: errorLine } = useLine(lineId)\n const { image, error: errorImage } = useImage(line?.image_id)\n\n if (errorImage || errorLine) {\n return (\n \n \n Failed to load line.\n \n \n )\n }\n\n if (image === undefined || line === undefined) {\n return \n }\n\n return (\n \n line-id: {line.id} }]}\n />\n \n \n )\n}\n","import { AddIcon } from '@chakra-ui/icons'\nimport { Box, Button, ButtonGroup, IconButton } from '@chakra-ui/react'\nimport MapPopupPortal from '../components/map-popup-portal.js'\nimport MapPopup from '../components/map-popup.js'\nimport MapboxMap from '../components/mapbox-map.js'\n\nexport default function Map() {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n } />\n \n \n \n )\n}\n","import { Text } from '@chakra-ui/react'\nimport React from 'react'\n\nexport function CalcDistance({ lat1, lon1, lat2, lon2 }) {\n var R = 6371 // km\n var dLat = toRad(lat2 - lat1)\n var dLon = toRad(lon2 - lon1)\n const newLat1 = toRad(lat1)\n const newLat2 = toRad(lat2)\n\n var a =\n Math.sin(dLat / 2) * Math.sin(dLat / 2) +\n Math.sin(dLon / 2) *\n Math.sin(dLon / 2) *\n Math.cos(newLat1) *\n Math.cos(newLat2)\n var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))\n var d = R * c * 1000\n var e = d.toString()\n var f = e.substr(0, 3)\n return {f}m\n}\n\n// Converts numeric degrees to radians\nfunction toRad(Value) {\n return (Value * Math.PI) / 180\n}\n","import { Box } from '@chakra-ui/react'\n\nexport function VideoIcon({ color, h, w, mr, props }) {\n const newColor = color || '#fff'\n const newH = h || '15px'\n const newW = w || '20px'\n const newMr = mr || '1px'\n return (\n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { Box, Flex, HStack, Link, Text } from '@chakra-ui/react'\nimport { Link as RouterLink } from 'react-router-dom'\nimport StarRatings from 'react-star-ratings'\nimport Grade from '../../components/grade.js'\nimport { VideoIcon } from '../../components/icons.js'\nimport Loader from '../../components/loader.js'\nimport VoteConflictWarning from '../../components/vote-conflict-warning.js'\nimport { mostVoted, useBetaVideos, useClimb } from '../../utils/backend.js'\n\nexport function Climb({ cragId, sectorId, climbId }) {\n const textColor = useColorModeValue('black', 'white')\n const { climb, error } = useClimb(climbId)\n const { betaVideos, error: errorBetaVideos } = useBetaVideos({\n climb_id: climbId,\n })\n\n if (error || errorBetaVideos) {\n return Failed to load climb.\n }\n\n if (climb === undefined) {\n return \n }\n\n return (\n \n \n \n {mostVoted(climb.name_votes)}\n {climb.grade_votes.length >= 1 && (\n \n )}\n \n \n \n \n {betaVideos?.length >= 1 && (\n \n \n \n )}\n \n \n {climb.rating_votes.length >= 1 && (\n = 3 ? 'gold' : 'gray'\n }\n numberOfStars={5}\n name=\"rating\"\n starEmptyColor=\"none\"\n starDimension=\"20px\"\n starSpacing=\"1px\"\n />\n )}\n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { AddIcon, ChevronDownIcon, EditIcon } from '@chakra-ui/icons'\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n Box,\n Button,\n Center,\n Container,\n Flex,\n Heading,\n HStack,\n IconButton,\n Link,\n LinkBox,\n ListItem,\n Menu,\n MenuButton,\n MenuItem,\n MenuList,\n OrderedList,\n Stack,\n Text,\n UnorderedList,\n Spacer,\n} from '@chakra-ui/react'\nimport { isEmpty } from 'lodash'\nimport { useState } from 'react'\nimport { Link as RouterLink, useParams } from 'react-router-dom'\nimport { SectorBreadcrumb } from '../../components/breadcrumb.js'\nimport { CalcDistance } from '../../components/cordinate-distance-calc.js'\nimport { CragBanner, CragBannerMenu } from '../../components/crag-banner.js'\nimport EditButton from '../../components/edit-button.js'\nimport Grade from '../../components/grade.js'\nimport LineImage from '../../components/line-image.js'\nimport Loader from '../../components/loader.js'\nimport ModalDialog from '../../components/modal-dialog.js'\nimport { PageFooter } from '../../components/page-footer.js'\nimport VoteConflictWarning from '../../components/vote-conflict-warning.js'\nimport {\n mostVoted,\n useClimbs,\n useImages,\n useLines,\n useSector,\n useSectors,\n} from '../../utils/backend.js'\nimport AddClimb from '../add-climb.js'\nimport AddImage from '../add-image.js'\nimport { Comments } from '../comments.js'\nimport { Climb } from './climb.js'\n\nexport default function Sector() {\n const bg = useColorModeValue('gray.100', 'gray.700')\n const boxBg = useColorModeValue('offwhite', 'gray.800')\n\n const headingShadow = '3px 3px 3px rgba(0, 0, 0, 0.2)'\n const { cragId, sectorId } = useParams()\n const { sectors, error: errorSectors } = useSectors({ crag_id: cragId }, 100)\n const { sector, error: errorSector } = useSector(sectorId)\n const { climbs, error: errorClimbs } = useClimbs({ sector_id: sectorId })\n const { lines, error: errorLines } = useLines({ sector_id: sectorId })\n const { images, error: errorImages } = useImages({ sector_id: sectorId })\n\n if (errorSector || errorClimbs || errorLines || errorImages || errorSectors) {\n return (\n \n \n Failed to load sector.\n \n \n )\n }\n\n if (\n sector === undefined ||\n climbs === undefined ||\n lines === undefined ||\n images === undefined ||\n sectors === undefined\n ) {\n return \n }\n\n const climbIdsWithLines = new Set(\n Object.values(lines).map((line) => line.climb_id)\n )\n\n const nearbySectors = sectors.filter(\n (nearbySector) =>\n nearbySector.name_votes.length >= 1 &&\n nearbySector.coordinate_votes.length >= 1 &&\n sector.id !== nearbySector.id\n )\n\n return (\n \n \n \n \n \n {sector.name_votes.length >= 1\n ? mostVoted(sector.name_votes)\n : 'No name votes'}\n \n \n \n \n \n \n \n \n {sector.coordinate_votes.length >= 1\n ? `Coordinates: ${JSON.stringify(\n mostVoted(sector.coordinate_votes).coordinates\n )}`\n : 'No coordinate votes'}\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n }\n display={{ base: 'block', md: 'none' }}\n boxShadow=\"xl\"\n colorScheme=\"brand\"\n color=\"white\"\n >\n \n \n Add topo image\n \n \n \n }\n >\n \n \n \n \n \n }\n display={{ base: 'block', md: 'none' }}\n boxShadow=\"xl\"\n colorScheme=\"brand\"\n color=\"white\"\n >\n \n \n Add climb\n \n \n \n }\n >\n \n \n \n \n \n\n \n \n \n {images &&\n images.map((image) => (\n \n ))}\n \n \n {climbs.filter(\n (climb) =>\n climb.name_votes.length >= 1 &&\n !climbIdsWithLines.has(climb.id)\n ).length >= 1 && (\n <>\n \n \n \n \n \n \n \n There are undrawn lines on this sector.\n \n Please edit and add topo to contribute.\n \n \n \n \n \n \n \n {climbs\n .filter(\n (climb) =>\n climb.name_votes.length >= 1 &&\n !climbIdsWithLines.has(climb.id)\n )\n .map((climb) => (\n \n \n \n \n {mostVoted(climb.name_votes)}\n \n \n {climb.grade_votes.length >= 1 && (\n \n )}\n \n \n \n ))}\n \n \n \n \n \n )}\n \n \n \n \n \n \n Comments\n \n \n \n \n \n \n \n \n {sector.coordinate_votes.length >= 1 && nearbySectors.length >= 2 && (\n \n \n \n Sectors close by:\n \n \n {nearbySectors.map((nearbySector) => (\n \n \n {mostVoted(nearbySector.name_votes)}\n \n \n \n \n ))}\n \n \n \n )}\n \n \n \n \n \n )\n}\n\nfunction ImageWithLines({ cragId, sectorId, image, sectorName }) {\n const boxBg = useColorModeValue('gray.300', 'gray.600')\n const [selectedIndex, setSelectedIndex] = useState(null)\n\n const { lines, error } = useLines({ image_id: image.id })\n\n if (error) {\n return (\n \n Failed to load lines.\n \n )\n }\n\n if (lines === undefined) {\n return \n }\n\n if (lines === isEmpty()) {\n return Emptiiii\n }\n const parsedLines = lines.map((line) => mostVoted(line.line_path_votes))\n\n const handleMouseMove = (event) => {\n const canvas = event.target\n const bounds = canvas.getBoundingClientRect()\n const mouseX = event.pageX - bounds.left - window.scrollX\n const mouseY = event.pageY - bounds.top - window.scrollY\n\n let hasSelected = false\n parsedLines.forEach((points, index) => {\n const { x, y } = {\n x: points[0].x * canvas.width,\n y: points[0].y * canvas.height,\n }\n const distance = Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2)\n if (distance < 12) {\n setSelectedIndex(index)\n hasSelected = true\n }\n })\n if (!hasSelected && selectedIndex !== null) {\n setSelectedIndex(null)\n }\n }\n\n return (\n \n \n \n \n \n \n \n \n \n \n Sector: {sectorName}\n \n \n \n \n \n \n \n \n \n {lines.map((line, index) => (\n setSelectedIndex(index)}\n >\n \n \n ))}\n \n \n \n \n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { StarIcon } from '@chakra-ui/icons'\nimport {\n Avatar,\n Box,\n Button,\n Center,\n Flex,\n Heading,\n Image,\n LinkBox,\n Spacer,\n Text,\n VStack,\n} from '@chakra-ui/react'\nimport { Link as RouterLink } from 'react-router-dom'\nimport { useUser } from '../utils/backend.js'\nexport default function UserProfileBanner({ userId, ...props }) {\n const bannerColor = useColorModeValue('gray.300', 'gray.800')\n const { user, error: errorUser } = useUser(userId)\n\n if (errorUser) {\n return null\n }\n\n return (\n <>\n \n \n \n \n \n \n \n \n {user?.display_name}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Latest updates\n \n Ticks (3345)\n \n Pre-ticks (534)\n \n Beta Videos (666)\n \n \n Photos (32)\n \n \n Settings\n \n \n \n \n \n \n )\n}\n\nfunction MenuButton({ children, to, buttonicon, ...props }) {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport {\n Avatar,\n Box,\n Button,\n Center,\n Container,\n Flex,\n FormLabel,\n Grid,\n GridItem,\n HStack,\n Input,\n Text,\n Textarea,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { CragComponentBox } from '../components/crag-component-box.js'\nimport Loader from '../components/loader.js'\nimport { PageFooter } from '../components/page-footer.js'\nimport UserProfileBanner from '../components/user-profile-banner.js'\nimport { useAuthorizedFetcher, useCurrentUser } from '../utils/backend.js'\n\nexport default function Settings() {\n const { user, userError, mutate } = useCurrentUser()\n const { authorizedFetcher, isLoading, authError } = useAuthorizedFetcher()\n const [displayName, setDisplayName] = useState(null)\n const bg = useColorModeValue('offwhite', 'gray.700')\n\n useEffect(() => {\n if (displayName === null && user) {\n setDisplayName(user?.display_name)\n }\n }, [displayName, user])\n\n const updateDisplayName = () => {\n user.display_name === null\n ? authorizedFetcher('/users', {\n method: 'POST',\n body: JSON.stringify({\n display_name: displayName,\n }),\n })\n : authorizedFetcher(`/users/${user?.id}`, {\n method: 'PUT',\n body: JSON.stringify({\n display_name: displayName,\n }),\n })\n mutate({ ...user, display_name: displayName })\n }\n\n if (userError || authError) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n \n You need to login before you can change your settings.\n \n \n \n )\n }\n\n if (!user || (!authorizedFetcher && isLoading)) {\n return \n }\n\n return (\n \n \n \n \n \n \n \n \n Profile Picture\n \n \n \n \n \n \n \n \n \n \n Display name\n \n \n \n setDisplayName(event.target.value)}\n />\n {' '}\n \n \n Country\n \n \n \n \n {' '}\n \n \n Language\n \n \n \n \n {' '}\n \n \n Date of birth\n \n \n \n \n \n \n \n Climbing since\n \n \n \n \n {' '}\n \n \n Presentation\n \n \n \n \n \n \n \n Height\n \n \n \n \n \n \n \n Weight\n \n \n \n \n \n \n \n Wingspan\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { Box, Center, Container, Text } from '@chakra-ui/react'\nimport { useParams } from 'react-router-dom'\nimport { CragComponentBox } from '../components/crag-component-box.js'\nimport Loader from '../components/loader.js'\nimport { PageFooter } from '../components/page-footer.js'\nimport { PhotoGrid } from '../components/photo-grid.js'\nimport UserProfileBanner from '../components/user-profile-banner.js'\nimport { useCragPhotos, useUser } from '../utils/backend.js'\n\nexport default function UserPhotos() {\n const { userId } = useParams()\n const { user, error: erroruser } = useUser(userId)\n const { cragPhotos, error: errorphotos } = useCragPhotos({ user_id: userId })\n\n const bg = useColorModeValue('gray.50', 'gray.700')\n if (erroruser) {\n return (\n \n \n Failed to load user.\n \n \n )\n }\n\n if (user === undefined) {\n return \n }\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport { Box, Center, Container, Text } from '@chakra-ui/react'\nimport { useParams } from 'react-router-dom'\nimport { CragComponentBox } from '../components/crag-component-box.js'\nimport Feed from '../components/feed.js'\nimport Loader from '../components/loader.js'\nimport { PageFooter } from '../components/page-footer.js'\nimport UserProfileBanner from '../components/user-profile-banner.js'\nimport { useUser } from '../utils/backend.js'\n\nexport default function UserProfile() {\n const { userId } = useParams()\n const { user, error: erroruser } = useUser(userId)\n const bg = useColorModeValue('gray.50', 'gray.700')\n if (erroruser) {\n return (\n \n \n Failed to load user.\n \n \n )\n }\n\n if (user === undefined) {\n return \n }\n\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n )\n}\n","import { useColorModeValue } from '@chakra-ui/color-mode'\nimport {\n Box,\n Button,\n Center,\n Container,\n Heading,\n Table,\n Tbody,\n Td,\n Text,\n Th,\n Thead,\n Tr,\n} from '@chakra-ui/react'\nimport React from 'react'\nimport { Link as RouterLink, useParams } from 'react-router-dom'\nimport AscentType from '../components/ascent-type.js'\nimport { CragComponentBox } from '../components/crag-component-box.js'\nimport Grade from '../components/grade.js'\nimport Loader from '../components/loader.js'\nimport ModalDialog from '../components/modal-dialog.js'\nimport { PageFooter } from '../components/page-footer.js'\nimport UserProfileBanner from '../components/user-profile-banner.js'\nimport {\n mostVoted,\n useAscents,\n useClimb,\n useCrag,\n useCurrentUser,\n useUser,\n} from '../utils/backend.js'\nimport AddAscent from './add-ascent.js'\n\nexport default function UserTicks() {\n const { userId } = useParams()\n const { error: erroruser } = useUser(userId)\n const { ascents } = useAscents({})\n\n const bg = useColorModeValue('gray.50', 'gray.700')\n const table = useColorModeValue('gray.50', 'gray.600')\n console.log(ascents)\n\n if (erroruser) {\n return (\n \n \n Failed to load user.\n \n \n )\n }\n\n if (ascents === undefined) {\n return \n }\n if (ascents === null) {\n return 'No ticks logged yet, get tickin!'\n }\n\n return (\n \n \n \n \n Ticks\n \n \n \n \n | Date | \n Climb | \n Crag | \n Grade | \n Go | \n
\n \n \n {ascents.map((ascent) => (\n \n ))}\n \n
\n \n \n \n )\n}\n\nfunction Ascent({ children, ascent, isLast, to = '/', ...props }) {\n const { climb, error: errorClimb } = useClimb(ascent.climb_id)\n const climbName = mostVoted(climb?.name_votes)\n const { crag, error: errorCrag } = useCrag(climb?.crag_id)\n const cragName = mostVoted(crag?.name_votes)\n const { user } = useUser(ascent.user_id)\n const currentUser = useCurrentUser().user\n\n if (errorClimb || errorCrag) {\n return ''\n }\n\n return (\n \n | {new Date(ascent.ascent_date).toISOString().slice(0, 10)} | \n \n \n \n {climbName}\n {' '}\n {ascent.description}\n \n | \n \n \n {cragName}\n \n | \n \n \n | \n \n \n | \n\n {currentUser?.id === user?.id ? (\n \n \n \n \n \n \n }\n >\n \n \n {' '}\n \n | \n ) : (\n ''\n )}\n
\n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n Text,\n Textarea,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { CragBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport { useAuthorizedFetcher, useCrag, useUserVote } from '../utils/backend.js'\n\nexport default function VoteAccessInformation() {\n const { cragId } = useParams()\n const { crag, error: errorCrag } = useCrag(cragId)\n const { userVote, error: errorUserVote } = useUserVote(\n crag?.access_information_votes\n )\n const {\n authorizedFetcher,\n isLoading,\n error: errorAuth,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [accessInfornation, setAccessInformation] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (accessInfornation === null && userVote) {\n setAccessInformation(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [accessInfornation, userVote])\n\n const voteAccessInformation = () => {\n const body = JSON.stringify({\n value: accessInfornation,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(\n `/crags/${cragId}/access_information_votes/${userVote.id}`,\n {\n method: 'PUT',\n body: body,\n }\n )\n : authorizedFetcher(`/crags/${cragId}/access_information_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToCrag = () => history.replace(`/crags/${cragId}`)\n\n const handleSubmit = () => voteAccessInformation().then(navigateToCrag)\n\n if (errorAuth || errorCrag || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!crag || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for access information\n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setAccessInformation('')\n } else {\n setAccessInformation(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Access information\n setAccessInformation(event.target.value)}\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n \n \n )\n}\n","import {\n Box,\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n Image,\n Progress,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { CragBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport {\n countVotes,\n useAuthorizedFetcher,\n useCrag,\n useCragPhotos,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteBanner() {\n const { cragId } = useParams()\n const { crag, error: errorCrag } = useCrag(cragId)\n const { cragPhotos, errorCragPhotos } = useCragPhotos({ crag_id: cragId })\n const { userVote, error: errorUserVote } = useUserVote(crag?.banner_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: errorAuth,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [banner, setBanner] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (banner === null && userVote) {\n setBanner(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [banner, userVote])\n\n const voteBanner = () => {\n const body = JSON.stringify({\n value: banner,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/crags/${cragId}/banner_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/crags/${cragId}/banner_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToCrag = () => history.replace(`/crags/${cragId}`)\n\n const handleSubmit = () => voteBanner().then(navigateToCrag)\n\n if (errorAuth || errorCrag || errorUserVote || errorCragPhotos) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (\n crag === undefined ||\n userVote === undefined ||\n cragPhotos === undefined\n ) {\n return \n }\n\n return (\n \n \n Vote for crag banner\n {\n if (cragPhotoId === null) {\n setBanner('')\n } else {\n setBanner(cragPhotoId)\n }\n }}\n value={userVote?.value || null}\n />\n Add a crag photo if you want to chose from another option.\n Your vote\n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n \n \n )\n}\n\nexport function BannerVotes({ voteOptions, votes, value, onChange }) {\n const countedVotes = countVotes(votes)\n const maxVoteCount = Math.max(countedVotes.map(({ count }) => count))\n const [checkboxes, setCheckboxes] = useState(\n voteOptions.map(\n (voteOption) => JSON.stringify(voteOption.id) === JSON.stringify(value)\n )\n )\n const countedVotesDict = countedVotes.reduce(\n (dict, countedVote) => ({\n [countedVote.value]: countedVote.count,\n ...dict,\n }),\n {}\n )\n\n return (\n \n Votes\n {voteOptions.length === 0 ? (\n There are no crag photos.\n ) : (\n voteOptions.map((voteOption, index) => (\n \n \n {\n const newCheckboxes = checkboxes.map(() => false)\n newCheckboxes[index] = !checkboxes[index]\n setCheckboxes(newCheckboxes)\n if (newCheckboxes[index]) {\n onChange(voteOption.id)\n } else {\n onChange(null)\n }\n }}\n >\n ({countedVotesDict[voteOption.id] || 0} votes)\n \n \n \n ))\n )}\n \n )\n}\n","import {\n Box,\n Button,\n Center,\n Checkbox,\n Container,\n Flex,\n FormControl,\n FormLabel,\n Heading,\n Input,\n Text,\n useColorModeValue,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { ClimbBreadcrumb } from '../components/breadcrumb.js'\nimport {\n CragBanner,\n CragBannerMenu,\n CragBannerMenuButton,\n} from '../components/crag-banner.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n mostVoted,\n useAuthorizedFetcher,\n useClimb,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteClimbDescription() {\n const { cragId, sectorId, climbId } = useParams()\n const { climb, error: errorClimb } = useClimb(climbId)\n const { userVote, error: errorUserVote } = useUserVote(\n climb?.description_votes\n )\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [climbDescription, setClimbDescription] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n const bg = useColorModeValue('offwhite', 'gray.700')\n const boxBg = useColorModeValue('gray.100', 'gray.800')\n const inputBg = useColorModeValue('gray.300', 'gray.700')\n\n useEffect(() => {\n if (climbDescription === null && userVote) {\n setClimbDescription(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [climbDescription, userVote])\n\n const voteClimbDescription = (climbId) => {\n const body = JSON.stringify({\n value: climbDescription,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(\n `/climbs/${climbId}/description_votes/${userVote.id}`,\n {\n method: 'PUT',\n body: body,\n }\n )\n : authorizedFetcher(`/climbs/${climbId}/description_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToClimb = (climbId) =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}/climbs/${climbId}`)\n\n const handleSubmit = () =>\n voteClimbDescription(climbId).then(() => navigateToClimb(climbId))\n\n if (authError || errorClimb || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!climb || userVote === undefined) {\n return \n }\n\n return (\n \n \n \n \n \n \n Edit:{' '}\n {climb.description_votes.length >= 1\n ? mostVoted(climb.description_votes)\n : 'No description votes'}{' '}\n \n \n \n Edit\n \n\n \n \n \n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setClimbDescription('')\n } else {\n setClimbDescription(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Climb Description\n \n setClimbDescription(event.target.value)\n }\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have\n a slightly lower value than if you openly support it.\n \n \n\n \n \n \n \n \n \n \n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n HStack,\n Select,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { ClimbBreadcrumb } from '../components/breadcrumb.js'\nimport Grade from '../components/grade.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n mostVoted,\n useAuthorizedFetcher,\n useClimb,\n useGradeSystemGrade,\n useGradeSystemGrades,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteClimbGrade() {\n const { cragId, sectorId, climbId } = useParams()\n const { climb, error: errorClimb } = useClimb(climbId)\n const { userVote, error: errorUserVote } = useUserVote(climb?.grade_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const { gradeSystemGrades, error: errorGradeSystemGrades } =\n useGradeSystemGrades()\n const [gradeSystem, setGradeSystem] = useState(null)\n const [gradeId, setGradeId] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n const { grade: previouslyVotedGrade, error: errorPreviouslyVotedGrade } =\n useGradeSystemGrade(userVote?.value)\n\n useEffect(() => {\n if (gradeId === null && previouslyVotedGrade) {\n setGradeId(previouslyVotedGrade.id)\n setGradeSystem(previouslyVotedGrade.system)\n setPublicVote(userVote.public)\n }\n }, [gradeId, userVote, previouslyVotedGrade])\n\n const { grade: mostVotedGrade, error: errorMostVotedGrade } =\n useGradeSystemGrade(climb ? mostVoted(climb.grade_votes) : null)\n\n useEffect(() => {\n if (mostVotedGrade && gradeId === null && gradeSystem === null) {\n setGradeSystem(mostVotedGrade.system)\n }\n }, [mostVotedGrade, gradeId, gradeSystem])\n\n const voteClimbGrade = (climbId) =>\n userVote\n ? authorizedFetcher(`/climbs/${climbId}/grade_votes/${userVote.id}`, {\n method: 'PUT',\n body: JSON.stringify({\n value: gradeId,\n public: publicVote,\n }),\n })\n : authorizedFetcher(`/climbs/${climbId}/grade_votes`, {\n method: 'POST',\n body: JSON.stringify({\n value: gradeId,\n public: publicVote,\n }),\n })\n\n const navigateToClimb = (climbId) =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}/climbs/${climbId}`)\n\n const handleSubmit = () =>\n voteClimbGrade(climbId).then(() => navigateToClimb(climbId))\n\n if (\n authError ||\n errorClimb ||\n errorPreviouslyVotedGrade ||\n errorGradeSystemGrades ||\n errorMostVotedGrade ||\n errorUserVote\n ) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (\n climb === undefined ||\n gradeSystemGrades === undefined ||\n userVote === undefined\n ) {\n return \n }\n\n const systems = [\n ...new Set(\n gradeSystemGrades.map((gradeSystemGrade) => gradeSystemGrade.system)\n ),\n ]\n\n return (\n \n \n Vote for grade\n (\n \n \n ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setGradeId('')\n } else {\n setGradeId(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Grade system\n {\n setGradeSystem(event.target.value)\n setGradeId(null)\n }}\n >\n \n {systems.map((system) => (\n \n ))}\n \n \n \n Grade\n setGradeId(event.target.value)}\n >\n \n {gradeSystemGrades\n .filter(\n (gradeSystemGrade) => gradeSystemGrade.system === gradeSystem\n )\n .map((gradeSystemGrade) => (\n \n ))}\n \n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n\n \n \n )\n}\n","import {\n Box,\n Button,\n Center,\n Checkbox,\n Container,\n Flex,\n FormControl,\n FormLabel,\n Heading,\n Input,\n Text,\n useColorModeValue,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { ClimbBreadcrumb } from '../components/breadcrumb.js'\nimport {\n CragBanner,\n CragBannerMenu,\n CragBannerMenuButton,\n} from '../components/crag-banner.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n mostVoted,\n useAuthorizedFetcher,\n useClimb,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteClimbName() {\n const { cragId, sectorId, climbId } = useParams()\n const { climb, error: errorClimb } = useClimb(climbId)\n const { userVote, error: errorUserVote } = useUserVote(climb?.name_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [climbName, setClimbName] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n const bg = useColorModeValue('offwhite', 'gray.700')\n const boxBg = useColorModeValue('gray.100', 'gray.800')\n const inputBg = useColorModeValue('gray.300', 'gray.700')\n\n useEffect(() => {\n if (climbName === null && userVote) {\n setClimbName(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [climbName, userVote])\n\n const voteClimbName = (climbId) => {\n const body = JSON.stringify({\n value: climbName,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/climbs/${climbId}/name_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/climbs/${climbId}/name_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToClimb = (climbId) =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}/climbs/${climbId}`)\n\n const handleSubmit = () =>\n voteClimbName(climbId).then(() => navigateToClimb(climbId))\n\n if (authError || errorClimb || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!climb || userVote === undefined) {\n return \n }\n\n return (\n \n \n \n \n \n \n Edit:{' '}\n {climb.name_votes.length >= 1\n ? mostVoted(climb.name_votes)\n : 'No name votes'}{' '}\n \n \n \n Edit\n \n\n \n \n \n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setClimbName('')\n } else {\n setClimbName(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Climb name\n setClimbName(event.target.value)}\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have\n a slightly lower value than if you openly support it.\n \n \n\n \n \n \n \n \n \n \n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n Text,\n Textarea,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { CragBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport { useAuthorizedFetcher, useCrag, useUserVote } from '../utils/backend.js'\n\nexport default function VoteCragDescription() {\n const { cragId } = useParams()\n const { crag, error: errorCrag } = useCrag(cragId)\n const { userVote, error: errorUserVote } = useUserVote(\n crag?.description_votes\n )\n const {\n authorizedFetcher,\n isLoading,\n error: errorAuth,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [cragDescription, setCragDescription] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (cragDescription === null && userVote) {\n setCragDescription(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [cragDescription, userVote])\n\n const voteCragDescription = () => {\n const body = JSON.stringify({\n value: cragDescription,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/crags/${cragId}/description_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/crags/${cragId}/description_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToCrag = () => history.replace(`/crags/${cragId}`)\n\n const handleSubmit = () => voteCragDescription().then(navigateToCrag)\n\n if (errorAuth || errorCrag || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!crag || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for Description\n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setCragDescription('')\n } else {\n setCragDescription(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Description\n setCragDescription(event.target.value)}\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n \n \n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n Input,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { CragBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport { useAuthorizedFetcher, useCrag, useUserVote } from '../utils/backend.js'\n\nexport default function VoteCragName() {\n const { cragId } = useParams()\n const { crag, error: errorCrag } = useCrag(cragId)\n const { userVote, error: errorUserVote } = useUserVote(crag?.name_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: errorAuth,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [cragName, setCragName] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (cragName === null && userVote) {\n setCragName(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [cragName, userVote])\n\n const voteCragName = (cragId) => {\n const body = JSON.stringify({\n value: cragName,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/crags/${cragId}/name_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/crags/${cragId}/name_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToCrag = (cragId) => history.replace(`/crags/${cragId}`)\n\n const handleSubmit = () =>\n voteCragName(cragId).then(() => navigateToCrag(cragId))\n\n if (errorAuth || errorCrag || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!crag || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for crag name\n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setCragName('')\n } else {\n setCragName(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Crag name\n setCragName(event.target.value)}\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n \n \n )\n}\n","import {\n Box,\n Button,\n Center,\n Checkbox,\n Container,\n Flex,\n FormControl,\n FormLabel,\n Heading,\n Slider,\n SliderFilledTrack,\n SliderThumb,\n SliderTrack,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { ClimbBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n useAuthorizedFetcher,\n useClimb,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteRating() {\n const { cragId, sectorId, climbId } = useParams()\n const { climb, error: errorClimb, mutate } = useClimb(climbId)\n const { userVote, error: errorUserVote } = useUserVote(climb?.rating_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [rating, setRating] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (rating === null && userVote) {\n setRating(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [rating, userVote])\n\n const voteRating = () => {\n const body = JSON.stringify({\n value: rating,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/climbs/${climbId}/rating_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/climbs/${climbId}/rating_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToClimb = () =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}/climbs/${climbId}`)\n\n const handleSubmit = () => voteRating().then(mutate).then(navigateToClimb)\n\n if (authError || errorClimb || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!climb || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for rating\n (\n \n {countedVote.value} stars ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setRating('')\n } else {\n setRating(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Rating\n \n \n {rating === null ? 0 : rating} / 5 stars\n \n \n \n \n \n \n \n \n \n \n \n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n\n \n \n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n NumberInput,\n NumberInputField,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { SectorBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n useAuthorizedFetcher,\n useSector,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteSectorCoordinates() {\n const { cragId, sectorId } = useParams()\n const { sector, error: errorSector } = useSector(sectorId)\n const { userVote, error: errorUserVote } = useUserVote(\n sector?.coordinate_votes\n )\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [latitude, setLatitude] = useState(null)\n const [longitude, setLongitude] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (latitude === null && longitude === null && userVote) {\n setLatitude(userVote.value.coordinates[1])\n setLongitude(userVote.value.coordinates[0])\n setPublicVote(userVote.public)\n }\n }, [latitude, longitude, userVote])\n\n const voteSectorCoordinates = (sectorId) => {\n const body = JSON.stringify({\n value: {\n type: 'Point',\n coordinates: [longitude, latitude],\n },\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(\n `/sectors/${sectorId}/coordinate_votes/${userVote.id}`,\n {\n method: 'PUT',\n body: body,\n }\n )\n : authorizedFetcher(`/sectors/${sectorId}/coordinate_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToSector = (sectorId) =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}`)\n\n const handleSubmit = () =>\n voteSectorCoordinates(sectorId).then(() => navigateToSector(sectorId))\n\n if (authError || errorSector || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!sector || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for sector coordinates\n (\n \n {JSON.stringify(countedVote.value.coordinates)} ({countedVote.count}{' '}\n votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setLatitude('')\n setLongitude('')\n } else {\n setLatitude([countedVote.value.coordinates[1]])\n setLongitude([countedVote.value.coordinates[0]])\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Latitude\n \n setLatitude(event.target.value)}\n />\n \n \n \n Longitude\n \n setLongitude(event.target.value)}\n />\n \n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n\n \n \n )\n}\n","import {\n Button,\n Center,\n Checkbox,\n Container,\n FormControl,\n FormLabel,\n Heading,\n Input,\n Text,\n} from '@chakra-ui/react'\nimport { useEffect, useState } from 'react'\nimport { useHistory, useParams } from 'react-router-dom'\nimport { SectorBreadcrumb } from '../components/breadcrumb.js'\nimport Loader from '../components/loader.js'\nimport Votes from '../components/votes.js'\nimport {\n useAuthorizedFetcher,\n useSector,\n useUserVote,\n} from '../utils/backend.js'\n\nexport default function VoteSectorName() {\n const { cragId, sectorId } = useParams()\n const { sector, error: errorSector } = useSector(sectorId)\n const { userVote, error: errorUserVote } = useUserVote(sector?.name_votes)\n const {\n authorizedFetcher,\n isLoading,\n error: authError,\n } = useAuthorizedFetcher()\n const history = useHistory()\n const [sectorName, setSectorName] = useState(null)\n const [publicVote, setPublicVote] = useState(true)\n\n useEffect(() => {\n if (sectorName === null && userVote) {\n setSectorName(userVote.value)\n setPublicVote(userVote.public)\n }\n }, [sectorName, userVote])\n\n const voteSectorName = (sectorId) => {\n const body = JSON.stringify({\n value: sectorName,\n public: publicVote,\n })\n return userVote\n ? authorizedFetcher(`/sectors/${sectorId}/name_votes/${userVote.id}`, {\n method: 'PUT',\n body: body,\n })\n : authorizedFetcher(`/sectors/${sectorId}/name_votes`, {\n method: 'POST',\n body: body,\n })\n }\n\n const navigateToSector = (sectorId) =>\n history.replace(`/crags/${cragId}/sectors/${sectorId}`)\n\n const handleSubmit = () =>\n voteSectorName(sectorId).then(() => navigateToSector(sectorId))\n\n if (authError || errorSector || errorUserVote) {\n return (\n \n \n Failed to load page.\n \n \n )\n }\n\n if (!authorizedFetcher && !isLoading) {\n return (\n \n \n You need to login to vote.\n \n \n )\n }\n\n if (!sector || userVote === undefined) {\n return \n }\n\n return (\n \n \n Vote for sector name\n (\n \n {countedVote.value} ({countedVote.count} votes)\n \n )}\n onChange={(countedVote) => {\n if (countedVote === null) {\n setSectorName('')\n } else {\n setSectorName(countedVote.value)\n }\n }}\n value={userVote?.value || null}\n />\n Your vote\n \n Sector name\n setSectorName(event.target.value)}\n />\n \n \n Anonymous\n {\n setPublicVote(!publicVote)\n }}\n />\n \n You can vote anonymously if you want but your vote will have a\n slightly lower value than if you openly support it.\n \n \n\n \n \n )\n}\n","import { extendTheme } from '@chakra-ui/react'\nimport { createBreakpoints } from '@chakra-ui/theme-tools'\n\nconst fonts = { mono: `'Menlo', monospace` }\n\nconst breakpoints = createBreakpoints({\n xxs: '21em', // Iphone SE\n xs: '30em', // Iphone SE\n sm: '40em', // Iphone 6 typ\n md: '52em',\n lg: '64em',\n xl: '80em',\n xxl: '120em', // 1920px\n xxxl: '160em', // 2560px\n})\n\nconst theme = extendTheme({\n config: {\n useSystemColorMode: true,\n initialColorMode: 'dark',\n },\n colors: {\n black: '#16161D',\n offwhite: '#f8f8ff',\n brand: {\n 100: '#2d3748',\n 200: '#3CAB70',\n 300: '#2E8B57',\n 400: '#3CAB70',\n 500: '#3CAB70',\n 600: '#2E8B57',\n 700: '#dfaa72',\n },\n },\n fonts,\n breakpoints,\n\n icons: {\n logo: {\n path: (\n \n \n \n \n ),\n viewBox: '0 0 3000 3163',\n },\n },\n})\n\nexport default theme\n","import { ChakraProvider } from '@chakra-ui/react'\nimport { Route, Switch } from 'react-router'\nimport { ParallaxProvider } from 'react-scroll-parallax'\nimport { SWRConfig } from 'swr'\nimport { NavBar } from './components/navbar.js'\nimport AddAscent from './pages/add-ascent'\nimport AddBetaVideo from './pages/add-beta-video'\nimport AddClimb from './pages/add-climb.js'\nimport AddCragPhoto from './pages/add-crag-photo'\nimport AddCrag from './pages/add-crag.js'\nimport AddImage from './pages/add-image.js'\nimport AddLine from './pages/add-line.js'\nimport AddSector from './pages/add-sector.js'\nimport Area from './pages/area'\nimport Climb from './pages/climb.js'\nimport CragList from './pages/crag-list'\nimport CragPhoto from './pages/crag-photo'\nimport Crag from './pages/crag/index.js'\nimport Crags from './pages/crags.js'\nimport FeedPage from './pages/feedpage'\nimport FilterSearch from './pages/filter-search'\nimport RockImage from './pages/image.js'\nimport Landing from './pages/landing.js'\nimport Line from './pages/line.js'\nimport Map from './pages/map'\nimport Sector from './pages/sector/index.js'\nimport Settings from './pages/settings.js'\nimport UserPhotos from './pages/user-photos'\nimport UserProfile from './pages/user-profile'\nimport UserTicks from './pages/user-ticks'\nimport VoteAccessInformation from './pages/vote-access-information'\nimport VoteBanner from './pages/vote-banner'\nimport VoteClimbBroken from './pages/vote-climb-broken'\nimport VoteClimbDescription from './pages/vote-climb-description'\nimport VoteClimbGrade from './pages/vote-climb-grade.js'\nimport VoteClimbName from './pages/vote-climb-name.js'\nimport VoteCragDescription from './pages/vote-crag-description'\nimport VoteCragName from './pages/vote-crag-name.js'\nimport VoteRating from './pages/vote-rating'\nimport VoteSectorCoordinates from './pages/vote-sector-coordinates'\nimport VoteSectorName from './pages/vote-sector-name.js'\nimport theme from './styles/theme'\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default App\n","const reportWebVitals = (onPerfEntry) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry)\n getFID(onPerfEntry)\n getFCP(onPerfEntry)\n getLCP(onPerfEntry)\n getTTFB(onPerfEntry)\n })\n }\n}\n\nexport default reportWebVitals\n","import { Auth0Provider } from '@auth0/auth0-react'\nimport React from 'react'\nimport { useHistory } from 'react-router-dom'\n\nconst Auth0ProviderWithHistory = ({ children }) => {\n const history = useHistory()\n\n const onRedirectCallback = (appState) => {\n history.push(appState?.returnTo || window.location.pathname)\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport default Auth0ProviderWithHistory\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport App from './app.js'\nimport reportWebVitals from './reportWebVitals'\nimport { BrowserRouter as Router } from 'react-router-dom'\nimport Auth0ProviderWithHistory from './components/auth0-provider.js'\n// eslint-disable-next-line import/no-webpack-loader-syntax\nimport mapboxgl from '!mapbox-gl'\nimport './styles/mapbox.css'\nimport theme from './styles/theme.js'\n\nimport { ColorModeScript } from '@chakra-ui/react'\nmapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN\n\nReactDOM.render(\n \n \n \n \n \n ,\n document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""}