refactor: upgrade ts-standard and autofix

AuthProvider/postLoginAction/setDefaultRoles-step0.js

@@ -30,7 +30,7 @@ exports.onExecutePostLogin = async ({ secrets, user, authorization, stats }, api
     clientSecret: secrets.clientSecret,
     scope: 'update:roles'
   })
-  
+
   const params = { id: user.user_id }
   const data = { roles: [EDITOR_ROLE_ID] }
 

jest.config.js

@@ -10,7 +10,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: 'jest-environment-jsdom'
 
   // moduleDirectories: ['node_modules', '<rootDir>/'],
 

package.json

@@ -26,8 +26,6 @@
     "@radix-ui/react-tabs": "^1.0.1",
     "@radix-ui/react-toggle": "^1.0.1",
     "@turf/bbox": "^6.5.0",
-    "@types/underscore": "^1.11.4",
-    "@types/uuid": "^8.3.4",
     "@udecode/zustood": "^1.1.3",
     "auth0": "^2.42.0",
     "awesome-debounce-promise": "^2.1.0",
@@ -49,7 +47,6 @@
     "next": "12.3.4",
     "next-auth": "^4.22.1",
     "nprogress": "^0.2.0",
-    "raw-body": "^2.5.1",
     "rc-slider": "^10.0.0-alpha.5",
     "react": "^18.0.0",
     "react-content-loader": "^6.2.0",
@@ -107,6 +104,8 @@
     "@types/nprogress": "^0.2.0",
     "@types/react": "^18.0.9",
     "@types/react-beautiful-dnd": "^13.1.0",
+    "@types/underscore": "^1.11.9",
+    "@types/uuid": "^9.0.4",
     "autoprefixer": "^10.4.1",
     "eslint-plugin-jest": "^27.1.4",
     "husky": "^7.0.4",
@@ -117,7 +116,7 @@
     "react-test-renderer": "^18.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "tailwindcss": "^3.1.8",
-    "ts-standard": "11.0.0",
+    "ts-standard": "^12.0.2",
     "typescript": "4.9.5"
   },
   "repository": {
@@ -135,9 +134,8 @@
     "plugins": [
       "jest"
     ],
-    "envs": {
-      "browser": true,
-      "es2021": true
+    "environment": {
+      "browser": true
     },
     "files": [
       "src/**/*.js",

src/components/GitHubStars.tsx

@@ -6,7 +6,7 @@ import GithubIcon from '../assets/icons/github.inline.svg'
  * Render GitHub stargazers button
  */
 const GitHubStars: React.FC = () => {
-  const { data } = useSWRImmutable<{ stargazers_count: number}>('https://api.github.com/repos/openbeta/open-tacos', fetcher)
+  const { data } = useSWRImmutable<{ stargazers_count: number }>('https://api.github.com/repos/openbeta/open-tacos', fetcher)
 
   return (
     <a className='no-animation transition-none btn btn-sm btn-info' href='https://github.com/OpenBeta/open-tacos'>

src/components/area/panel/listItem.tsx

@@ -40,7 +40,7 @@ export interface ListItemProps extends ListItemEntity {
  * use-cases. You'll need to change this to account for overflow rules after the
  * state is expanded.
  */
-function Expandable (props: {expand: boolean, children: any}): JSX.Element {
+function Expandable (props: { expand: boolean, children: any }): JSX.Element {
   const ref = React.useRef<HTMLDivElement>(null)
   const contentHeight = ref.current !== null ? ref.current?.clientHeight : 0
 

src/components/area/panel/panelOverview.tsx

@@ -3,7 +3,7 @@ import { ListItemEntity } from './listItem'
 import { BarChart, Bar, Cell, XAxis, Tooltip, ResponsiveContainer } from 'recharts'
 import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart'
 
-const CustomTooltip: React.FC<any> = (data: {label: string, payload: any[] }) => {
+const CustomTooltip: React.FC<any> = (data: { label: string, payload: any[] }) => {
   let tags: Array<[string, number]> = []
 
   if (data?.payload?.length > 0) {

src/components/basecamp/Users.tsx

@@ -44,7 +44,7 @@ export default function Users (): JSX.Element {
   )
 }
 
-const LinkProfile = ({ nick }: {nick: string}): JSX.Element => <Link href={`/u/${nick}`}><a className='link-primary'>{nick}</a></Link>
+const LinkProfile = ({ nick }: { nick: string }): JSX.Element => <Link href={`/u/${nick}`}><a className='link-primary'>{nick}</a></Link>
 
 const fetcher = async (url: string): Promise<any> => (await axios.get(url)).data
 interface HtmlFormProps {

src/components/crag/ClimbListPreview.tsx

@@ -67,7 +67,7 @@ export const ClimbListPreview = ({ editable }: Props): JSX.Element => {
   )
 }
 
-type ClimbEntryDirtyType = Record<keyof EditableClimbType, boolean|undefined>
+type ClimbEntryDirtyType = Record<keyof EditableClimbType, boolean | undefined>
 type ClimbEntryProps = EditableClimbTypeWithFieldId & {
   index: number
   defaultDict?: Dictionary<EditableClimbType>

src/components/crag/disciplineDist.tsx

@@ -7,7 +7,7 @@ interface DisiplineDistributionProps {
 }
 
 export default function DisciplineDistribution (props: DisiplineDistributionProps): JSX.Element {
-  const data: Array<{value: number, label: string}> = Object.keys(props.data)
+  const data: Array<{ value: number, label: string }> = Object.keys(props.data)
     .filter(i => i !== '__typename')
     .map(key => {
       return {

src/components/crag/mediumHistogram.tsx

@@ -18,7 +18,7 @@ interface MediumHistogramProps {
   columnLabels?: string[]
 }
 
-function Column ({ val, vert, label }: {val: number, vert: number, label?: string}): JSX.Element {
+function Column ({ val, vert, label }: { val: number, vert: number, label?: string }): JSX.Element {
   const cells = Array(vert).fill(0).map((_, index) => {
     if (index < val) {
       return false

src/components/crag/tinyHistogram.tsx

@@ -16,7 +16,7 @@ interface TinyHistogramProps {
   title?: string
 }
 
-function Column ({ val, vert }: {val: number, vert: number}): JSX.Element {
+function Column ({ val, vert }: { val: number, vert: number }): JSX.Element {
   const cells = Array(vert).fill(0).map((_, index) => {
     if (index < val) {
       return false

src/components/edit/AddChildAreaForm.tsx

@@ -91,7 +91,7 @@ const Step1 = (props: ChildAreaBaseProps): JSX.Element => {
   // Form declaration
   const form = useForm<NewAreaFormProps>({
     mode: 'onSubmit',
-    defaultValues: { newAreaName: '', shortCode: '', parentName: parentName }
+    defaultValues: { newAreaName: '', shortCode: '', parentName }
   })
 
   const { handleSubmit, formState: { isSubmitting, isSubmitSuccessful }, setFocus } = form

src/components/edit/Triggers.tsx

@@ -88,7 +88,7 @@ export const DeleteAreaTriggerButtonSm = ({ disabled }: TriggerButtonProps): JSX
 
 )
 
-export type AddAreaTriggerProps = Omit<AddAreaFormProps, 'onError'> & { children?: JSX.Element}
+export type AddAreaTriggerProps = Omit<AddAreaFormProps, 'onError'> & { children?: JSX.Element }
 
 /**
  * A high level component that triggers the Add Area dialog.  See  {@link DeleteAreaTrigger} for a customization example.

src/components/editor/__tests__/InplaceTextInput.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@testing-library/jest-dom'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import InplaceTextInput from '../InplaceTextInput'

src/components/finder/CragRow.tsx

@@ -7,7 +7,7 @@ import { MiniCrumbs } from '../ui/BreadCrumbs'
 import useResponsive from '../../js/hooks/useResponsive'
 import { cragFiltersStore } from '../../js/stores'
 
-type CragRowProps = Pick<AreaType, 'areaName'|'totalClimbs'|'metadata'|'aggregate'|'pathTokens'>
+type CragRowProps = Pick<AreaType, 'areaName' | 'totalClimbs' | 'metadata' | 'aggregate' | 'pathTokens'>
 
 export default function CragRow ({ areaName, totalClimbs, metadata, aggregate, pathTokens }: CragRowProps): JSX.Element {
   const getClimbsForYou = cragFiltersStore.get.inMyRangeCount(aggregate)

src/components/lco/PageBanner.tsx

@@ -25,7 +25,7 @@ export interface LCOProfileType {
   donation?: string
 }
 
-interface PageBannerProps{orgs: OrganizationType[]}
+interface PageBannerProps {orgs: OrganizationType[]}
 
 const getLcoList = (orgs: OrganizationType[]): LCOProfileType[] => {
   return orgs.filter(org => org.orgType === 'LOCAL_CLIMBING_ORGANIZATION')
@@ -80,7 +80,7 @@ export const PageBanner: React.FC<PageBannerProps> = ({ orgs }) => {
   )
 }
 
-const LcoCardTrigger: React.FC<{ profile: LCOProfileType}> = ({ profile }): JSX.Element => {
+const LcoCardTrigger: React.FC<{ profile: LCOProfileType }> = ({ profile }): JSX.Element => {
   return (
     <MobileDialog modal>
       <IndividualBanner profile={profile} />

src/components/logbook/OverviewChart.tsx

@@ -150,7 +150,7 @@ const xAxisFormatter = (data: any): any => {
 /**
  * Make median score looks like a candle stick
  */
-const CustomizeMedianDot: React.FC<LineProps & { payload?: ChartDataPayloadProps}> = (props) => {
+const CustomizeMedianDot: React.FC<LineProps & { payload?: ChartDataPayloadProps }> = (props) => {
   const { cx, cy, payload } = props
   if (cx == null || cy == null || payload == null) return null
   const lengthOffset = payload.total * 1.2

src/components/logbook/Stats.tsx

@@ -2,7 +2,7 @@ import { groupBy } from 'underscore'
 import { formatDistanceToNowStrict, format, endOfDay, differenceInCalendarDays } from 'date-fns'
 import { TickType } from '../../js/types'
 
-const Stats: React.FC<{ tickList: TickType[]}> = ({ tickList }) => {
+const Stats: React.FC<{ tickList: TickType[] }> = ({ tickList }) => {
   const sortedList = tickList
   const total = tickList.length
   const totalTime = formatDistanceToNowStrict(sortedList[0].dateClimbed)

src/components/maps/BaseMap.tsx

@@ -105,7 +105,7 @@ export default function BaseMap ({
       onMove={onMoveHandler}
       onLoad={onMapLoad}
       interactive
-      style={{ height: height }}
+      style={{ height }}
       ref={mapRef}
     >
       {children}

src/components/maps/CragsMap.tsx

@@ -20,7 +20,7 @@ export default function CragsMap (): JSX.Element {
   const [viewstate, height, setViewState] = useAutoSizing({ geojson, elementId: mapElementId })
 
   // track current mouseover marker
-  const [hoverMarker, setHoverMarker] = useState<null|number[]>(null)
+  const [hoverMarker, setHoverMarker] = useState<null | number[]>(null)
 
   const onHoverHandler = useCallback((event: MapLayerMouseEvent) => {
     const { features } = event

src/components/maps/ui/PieIcon.tsx

@@ -35,7 +35,7 @@ export function getTotal (aggregatedTypes: Array<[string, number]>): number {
   }, 0)
 }
 
-export function getPieIcon ({ data, text }: {data: PieData, text: string}): string {
+export function getPieIcon ({ data, text }: { data: PieData, text: string }): string {
   const padding = 20
   const radius = 55
   const center = [radius + padding, radius + padding]

src/components/media/Tag.tsx

@@ -39,7 +39,7 @@ export default function Tag ({ mediaId, tag, onDelete, size = 'md', showDelete =
           <button
             onClick={async (e) => {
               e.preventDefault()
-              await onDelete({ mediaId: mediaId, tagId: tag.id, entityId: tag.targetId, entityType: tag.type })
+              await onDelete({ mediaId, tagId: tag.id, entityId: tag.targetId, entityType: tag.type })
             }}
             title='Delete tag'
           >

src/components/search/Autocomplete.tsx

@@ -23,7 +23,7 @@ interface AutocompleteProps extends Partial<AutocompleteOptions<any>> {
 export const Autocomplete = ({ queryParams, forceFocus = false, classNames, ...otherProps }: AutocompleteProps): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null)
   const panelRootRef = useRef<any>(null)
-  const rootRef = useRef<HTMLElement|null>(null)
+  const rootRef = useRef<HTMLElement | null>(null)
   let search: AutocompleteApi<any> | null = null
 
   useEffect(() => {

src/components/search/Autocomplete2.tsx

@@ -23,8 +23,8 @@ interface AutocompleteProps extends Partial<AutocompleteOptions<any>> {
 export const Autocomplete2 = ({ label, open = false, onCancel, detached = true, queryParams, classNames, resultContainer, ...otherProps }: AutocompleteProps): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null)
   const panelRootRef = useRef<any>(null)
-  const rootRef = useRef<HTMLElement|null>(null)
-  const [search, setSearch] = useState<AutocompleteApi<any>|null>(null)
+  const rootRef = useRef<HTMLElement | null>(null)
+  const [search, setSearch] = useState<AutocompleteApi<any> | null>(null)
 
   useEffect(() => {
     if (containerRef.current == null) {

src/components/search/CragsNearBy.tsx

@@ -13,7 +13,7 @@ const GET_CRAGS_NEAR = gql`query CragsNear($placeId: String, $lng: Float, $lat:
     }
   }`
 
-const CragsNearBy = ({ center, placeId }: {center: [number, number], placeId: string}): JSX.Element| null => {
+const CragsNearBy = ({ center, placeId }: { center: [number, number], placeId: string }): JSX.Element | null => {
   const { loading, data } = useQuery(GET_CRAGS_NEAR, {
     client: graphqlClient,
     variables: {
@@ -39,12 +39,12 @@ const CragsNearBy = ({ center, placeId }: {center: [number, number], placeId: st
 
 export default CragsNearBy
 
-export const CragDensity = ({ crags }: {crags: any[]}): JSX.Element => {
+export const CragDensity = ({ crags }: { crags: any[] }): JSX.Element => {
   return (
     <div className='mt-4 w-full'>
       <div className='flex items-end space-x-2 w-full'>
         {crags.map(
-          ({ _id, count }: {_id: string, count: number}) => {
+          ({ _id, count }: { _id: string, count: number }) => {
             return (
               <div key={_id} className='flex-1'>
                 <div className='text-xl text-center'>{count}</div>

src/components/search/ResultTemplates.tsx

@@ -32,7 +32,7 @@ export const SearchByNameTemplate = ({ groupKey, hits, router }: SearchByNameTem
   )
 }
 
-const ClimbTypesHeader = ({ typeKeys }: {typeKeys: string[]}): JSX.Element =>
+const ClimbTypesHeader = ({ typeKeys }: { typeKeys: string[] }): JSX.Element =>
   (
     <div className='border-b border-gray-700 my-2.5'>
       <div className='flex space-x-2'>{typeKeys.map(item =>

src/components/search/sources/PoiSource.tsx

@@ -26,7 +26,7 @@ export const searchPoi = async (query: string): Promise<AutocompleteSource<any>>
     getItems: async ({ query }) => rs,
     templates: {
       noResults: DefaultNoResult,
-      item: ({ item }: {item: PoiDoc}) => {
+      item: ({ item }: { item: PoiDoc }) => {
         return (
           <a href={`/finder?shortName=${item.text}&placeId=${item.id}&center=${item.center.join(',')}`}>
             <ClientOnly>

src/components/search/sources/PoiSource2.tsx

@@ -24,7 +24,7 @@ export const searchPoi = async (onSelect: any): Promise<AutocompleteSource<any>>
       return transform(rs)
     },
 
-    getItemInputValue: ({ item }: {item: PoiDoc}) => {
+    getItemInputValue: ({ item }: { item: PoiDoc }) => {
       return item.place_name
     },
 
@@ -36,7 +36,7 @@ export const searchPoi = async (onSelect: any): Promise<AutocompleteSource<any>>
     templates: {
       noResults: () => 'No results',
 
-      item: ({ item }: {item: PoiDoc}) => {
+      item: ({ item }: { item: PoiDoc }) => {
         return (
           <div>{item.place_name}</div>
         )

src/components/search/sources/TypesenseXSearchSources.tsx

@@ -89,7 +89,7 @@ const makeFASource = (rs: MultisearchReturnType): AutocompleteSource<TypesenseDo
 /**
  * Typesense result item => OpenBeta entity URL
  */
-const entityToUrl = ({ item }: {item: TypesenseAreaType | TypesenseDocumentType}): string | undefined => {
+const entityToUrl = ({ item }: { item: TypesenseAreaType | TypesenseDocumentType }): string | undefined => {
   const { type } = item
   switch (type) {
     case EntityType.area:

src/components/ui/BaseButton.tsx

@@ -6,7 +6,7 @@ interface BaseButtonProps {
   onClick?: any
   label: string | JSX.Element
   variant?: ButtonVariant
-  size?: 'sm'|'md' | 'lg'
+  size?: 'sm' | 'md' | 'lg'
   href?: string
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean

src/components/ui/ComboBox.tsx

@@ -6,7 +6,7 @@ function classNames (...classes: string[]): string {
   return classes.filter(Boolean).join(' ')
 }
 
-export interface ValueObj{
+export interface ValueObj {
   id: number
   name: string
   disabled?: boolean

src/components/ui/RadiusRangeSlider.tsx

@@ -29,15 +29,15 @@ export const prettifyLabel = (range: RadiusRange): string => {
 export const sliderRangeToStore = (rangeIndices: number[]): RadiusRange => ({
   rangeMeters: [RADIUS_DEF[rangeIndices[0]].value,
     RADIUS_DEF[rangeIndices[1]].value],
-  rangeIndices: rangeIndices
+  rangeIndices
 })
 
 export const radiusRangeToString = (range: RadiusRange): { min: string, max: string } => ({
   min: RADIUS_DEF[range.rangeIndices[0]].label,
   max: RADIUS_DEF[range.rangeIndices[1]].label
 })
 
-type RadiusDefType = Record<number, {label: string, value: number, miles: number}>
+type RadiusDefType = Record<number, { label: string, value: number, miles: number }>
 
 export const RADIUS_DEF: RadiusDefType = {
   0: {

src/components/ui/Statistics/DensityBar.tsx

@@ -1,4 +1,4 @@
-const DensityBar = ({ level, max }: {level: number, max: number}): JSX.Element => {
+const DensityBar = ({ level, max }: { level: number, max: number }): JSX.Element => {
   return (
     <div className='w-2 flex flex-col-reverse justify-end grow-0 space-y-0.5 space-y-reverse'>
       {

src/components/users/FavouriteButton.tsx

@@ -74,7 +74,7 @@ export default function FavouriteButton ({ climbId, areaId }: Props): JSX.Elemen
     }
 
     fetch('/api/user/fav', {
-      method: method,
+      method,
       body: JSON.stringify({ climbId, areaId, collection: favCollection })
     })
       .then(() => setIsFav(!isFav))

src/components/users/TickCard.tsx

@@ -4,7 +4,7 @@ import { useMutation } from '@apollo/client'
 import AlertDialogue from '../ui/micro/AlertDialogue'
 import { TickType } from '../../js/types'
 
-interface Props{
+interface Props {
   ticks: TickType[]
   setTicks: Function
   tickId: string