feat: Update tick logic to match backend

src/app/(default)/climb/[[...slug]]/components/ClimbData.tsx

@@ -54,7 +54,7 @@ export const ClimbData: React.FC<ClimbType & Pick<AreaType, 'gradeContext'> & {
 
         {/* TODO: Hide the TickButton in editMode */}
         <div className='mt-8'>
-          <TickButton climbId={id} name={name} grade={gradeStr} climbType={sanitizedDisciplines}/>
+          <TickButton climbId={id} name={name} grade={gradeStr} climbType={sanitizedDisciplines} />
         </div>
       </div>
     </>

src/components/users/TickButton.tsx

@@ -11,7 +11,7 @@ interface Props {
   areaId?: string
   name?: string
   grade?: string
-  climbType?: object
+  climbType: object
 }
 
 const IsTicked: React.FC<any> = ({ loading, onClick }) => {

src/components/users/TickForm.tsx

@@ -52,28 +52,27 @@ const allAttemptTypes = [
   { id: 7, name: 'Frenchfree' }
 ]
 
-function hasKey(climbType: object, myList: Array<string>): boolean { return Object.keys(climbType).some(key => myList.includes(key)) }
+function hasKey (climbType: object, myList: string[]): boolean { return Object.keys(climbType).some(key => myList.includes(key)) }
 
-function leadable(climbType: object): boolean { return hasKey(climbType, ['trad', 'sport', 'snow', 'ice', 'mixed', 'alpine']) }
-function topropeable(climbType: object): boolean { return hasKey(climbType, ['tr']) || (leadable(climbType)) }
-function aidable(climbType: object): boolean { return hasKey(climbType, ['aid']) }
-function soloable(climbType: object): boolean { return hasKey(climbType, ['deepwatersolo']) || leadable(climbType) || aidable(climbType) || topropeable(climbType) }
-function boulderable(climbType: object): boolean { return hasKey(climbType, ['bouldering']) }
+function leadable (climbType: object): boolean { return hasKey(climbType, ['trad', 'sport', 'snow', 'ice', 'mixed', 'alpine']) }
+function topropeable (climbType: object): boolean { return hasKey(climbType, ['tr']) || (leadable(climbType)) }
+function aidable (climbType: object): boolean { return hasKey(climbType, ['aid']) }
+function soloable (climbType: object): boolean { return hasKey(climbType, ['deepwatersolo']) || leadable(climbType) || aidable(climbType) || topropeable(climbType) }
+function boulderable (climbType: object): boolean { return hasKey(climbType, ['bouldering']) }
 
-function stylesForClimbType(climbType: object): Array<{ id: number, name: string }> {
-  let styles = []
+function stylesForClimbType (climbType: object): Array<{ id: number, name: string }> {
+  let styles: Array<{ id: number, name: string }> = []
   if (leadable(climbType)) { styles.push(...allStyles.filter(style => ['Lead', 'Follow'].includes(style.name))) }
   if (topropeable(climbType)) { styles.push(...allStyles.filter(style => ['TR'].includes(style.name))) }
   if (soloable(climbType)) { styles.push(...allStyles.filter(style => ['Solo'].includes(style.name))) }
   if (boulderable(climbType)) { styles.push(...allStyles.filter(style => ['Boulder'].includes(style.name))) }
   if (aidable(climbType)) { styles.push(...allStyles.filter(style => ['Aid'].includes(style.name))) }
-  if (styles.length === 0) { styles.push(allStyles) } // If a climb doesn't have a type, anything goes
+  if (styles.length === 0) { styles = [...allStyles] } // If a climb doesn't have a type, anything goes
   styles.push({ id: 0, name: '\u00A0' })
-  console.log("Styles for climb type: ", styles)
   return styles
 }
 
-function attemptTypesForStyle(styleName: string): Array<{ id: number, name: string }> {
+function attemptTypesForStyle (styleName: string): Array<{ id: number, name: string }> {
   const emptyOption = { id: 0, name: '\u00A0' }
   switch (styleName) {
     case 'Lead':
@@ -101,51 +100,47 @@ interface Props {
   climbId: string
   name?: string
   grade?: string
-  climbType?: object
+  climbType: object
 }
 
-export default function TickForm({ open, setOpen, setTicks, ticks, isTicked, climbId, name, grade, climbType }: Props): JSX.Element {
+export default function TickForm ({ open, setOpen, setTicks, ticks, isTicked, climbId, name, grade, climbType }: Props): JSX.Element {
   const styles = stylesForClimbType(climbType)
   const [style, setStyle] = useState(styles[0])
-  console.log("styles", styles)
-  console.log("style", style)
-
-  const [attemptTypes, setAttemptTypes] = useState(attemptTypesForStyle(style))
+
+  const [attemptTypes, setAttemptTypes] = useState(attemptTypesForStyle(style.name))
   const [attemptType, setAttemptType] = useState(attemptTypes[0])
-  console.log('attempt types', attemptTypes)
-  console.log('attempt type', attemptType)
   const [dateClimbed, setDateClimbed] = useState<string>(new Date().toLocaleDateString('fr-CA')) // Default is today, use fr-CA to get YYYY-MM-DD format.
   const [notes, setNotes] = useState<string>('')
   const [errors, setErrors] = useState<string[]>()
   const session = useSession()
   const climbingGlossaryLink = 'https://en.wikipedia.org/wiki/Glossary_of_climbing_terms#'
   const [addTick] = useMutation(
     MUTATION_ADD_TICK, {
-    client: graphqlClient,
-    errorPolicy: 'none'
-  })
+      client: graphqlClient,
+      errorPolicy: 'none'
+    })
 
   /**
    * reset our inputs whenever a form is successfully submitted
    *
    */
-  function resetInputs(): void {
+  function resetInputs (): void {
     setDateClimbed(new Date().toLocaleDateString('fr-CA'))
-    let newAttemptTypes = attemptTypesforStyle(styles[0].name)
+    const newAttemptTypes = attemptTypesForStyle(styles[0].name)
     setAttemptTypes(newAttemptTypes)
     setAttemptType(newAttemptTypes[0])
     setNotes('')
     setStyle(styles[0])
   }
 
-  function handleStyleChange(newStyle: { id: number, name: string }): void {
+  function handleStyleChange (newStyle: { id: number, name: string }): void {
     setStyle(newStyle)
-    let newAttemptTypes = attemptTypesForStyle(newStyle.name)
+    const newAttemptTypes = attemptTypesForStyle(newStyle.name)
     setAttemptTypes(newAttemptTypes)
     setAttemptType(newAttemptTypes[0])
   }
 
-  async function submitTick(): Promise<void> {
+  async function submitTick (): Promise<void> {
     // build a tick object to send to the GraphQL backend
     const tick = {
       name,

src/pages/climbs/[id].tsx

@@ -440,7 +440,7 @@ const ClimbData: React.FC<{
 
         {!editMode && (
           <div className='mt-8'>
-            <TickButton climbId={climbId} name={name} grade={gradesObj.toString()} />
+            <TickButton climbId={climbId} name={name} grade={gradesObj.toString()} climbType={{}} />
           </div>
         )}
       </div>