refactoring any type code smells

src/components/CTAEmailSignup.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 
-const CTAEmailSignup = (props: any): JSX.Element =>
+interface CTAEmailSignupProps {
+  // Define specific types for props here if necessary
+}
+const CTAEmailSignup: React.FC<CTAEmailSignupProps> = (props) => (
   <iframe
     className='w-full bg-gray-600 p-4'
     src='https://openbeta.substack.com/embed'
-    height='320' scrolling='no'
+    height='320'
+    scrolling='no'
   />
+)
 
 export default CTAEmailSignup

src/components/edit/AreaCRUD.tsx

@@ -180,12 +180,17 @@ type AreaItemProps = AreaSummaryType & {
  * Individual area entry
  * @param borderBottom true add a bottom border
  */
-export const AreaItem = ({ index, borderBottom, areaName, uuid, parentUuid, onChange, editMode = false, climbs, children, ...props }: AreaItemProps): JSX.Element | null => {
+export const AreaItem = ({ index, borderBottom, areaName, uuid, parentUuid, onChange, editMode = false, climbs, children, ...props }: AreaItemProps): JSX.Element => {
   // undefined array can mean we forget to include the field in GQL so let's make it not editable
   const canEdit = (children?.length ?? 1) === 0 && (climbs?.length ?? 1) === 0
 
   const { totalClimbs, metadata: { leaf, isBoulder } } = props
   const isLeaf = leaf || isBoulder
+
+  if (index === undefined) {
+    return <></>
+  }
+
   return (
     <div className={clx('area-row', borderBottom ? 'border-b' : '')}>
       <a href={`/crag/${uuid}`} className='area-entity-box' data-no-dnd='true'>

src/components/edit/RecentChangeHistory.tsx

@@ -68,27 +68,31 @@ export const ChangesetCard: React.FC<ChangsetRowProps> = ({ changeset }) => {
 
   )
 }
-
-const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element | null => {
+const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element => {
   if (fullDocument.__typename !== DocumentTypeName.Climb) {
-    return null
+    return <></>
   }
-  // @ts-expect-error
-  const icon = dbOpIcon[dbOp]
+
+  const icon = dbOpIcon[dbOp as keyof typeof dbOpIcon]
+
   return (
     <div className='ml-2 flex gap-x-2'>
-      <div className='flex gap-2'><span>{icon}</span><span className='badge badge-sm badge-info'>Climb</span></div>
+      <div className='flex gap-2'>
+        <span>{icon}</span>
+        <span className='badge badge-sm badge-info'>Climb</span>
+      </div>
 
       <div className=''>
         <div className=''>
           {dbOp === 'delete'
-            ? <span>{(fullDocument as ClimbType).name}</span>
+            ? (
+              <span>{(fullDocument as ClimbType).name}</span>
+              )
             : (
-              <Link
-                href={`/climbs/${(fullDocument as ClimbType).id}`}
-                className='link link-hover'
-              >{(fullDocument as ClimbType).name}
-              </Link>)}
+              <Link href={`/climbs/${(fullDocument as ClimbType).id}`} className='link link-hover'>
+                {(fullDocument as ClimbType).name}
+              </Link>
+              )}
         </div>
         <div className='text-xs text-base-300'>
           <UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as ClimbType} />
@@ -98,22 +102,31 @@ const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: Change
   )
 }
 
-const AreaChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element | null => {
+const AreaChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element => {
   if (fullDocument.__typename !== DocumentTypeName.Area) {
-    return null
+    return <></>
   }
+
   const url = `/crag/${(fullDocument as AreaType).uuid}`
-  // @ts-expect-error
-  const icon = dbOpIcon[dbOp]
+  const icon = dbOpIcon[dbOp as keyof typeof dbOpIcon]
+
   return (
     <div className='ml-2 flex gap-x-2'>
-      <div className='flex gap-2'>{icon} <span className='badge badge-sm badge-warning'>Area</span></div>
+      <div className='flex gap-2'>
+        {icon} <span className='badge badge-sm badge-warning'>Area</span>
+      </div>
 
       <div className=''>
         <div className=''>
           {dbOp === 'delete'
-            ? <span>{(fullDocument as AreaType).areaName}</span>
-            : (<Link href={url} className='link link-hover'>{(fullDocument as AreaType).areaName}</Link>)}
+            ? (
+              <span>{(fullDocument as AreaType).areaName}</span>
+              )
+            : (
+              <Link href={url} className='link link-hover'>
+                {(fullDocument as AreaType).areaName}
+              </Link>
+              )}
         </div>
         <div className='text-xs text-base-300'>
           <UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as AreaType} />
@@ -123,15 +136,18 @@ const AreaChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeT
   )
 }
 
-const OrganizationChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element | null => {
+const OrganizationChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeType): JSX.Element => {
   if (fullDocument.__typename !== DocumentTypeName.Organization) {
-    return null
+    return <></>
   }
-  // @ts-expect-error
-  const icon = dbOpIcon[dbOp]
+
+  const icon = dbOpIcon[dbOp as keyof typeof dbOpIcon]
+
   return (
     <div className='py-2 ml-2 flex gap-x-2'>
-      <div className='flex gap-2'>{icon} <span className='badge badge-sm badge-warning'>Organization</span></div>
+      <div className='flex gap-2'>
+        {icon} <span className='badge badge-sm badge-warning'>Organization</span>
+      </div>
 
       <div className=''>
         <div className=''>
@@ -149,37 +165,58 @@ interface UpdatedFieldsProps {
   fields: string[] | undefined
   doc: any
 }
-const UpdatedFields = ({ fields, doc }: UpdatedFieldsProps): JSX.Element | null => {
-  if (fields == null) return null
-  return (
-    <div>{fields.map(field => {
-      if (field.startsWith('_change')) return null
-      if (field.startsWith('updatedAt')) return null
-      if (field.startsWith('updatedBy')) return null
-      if (field.startsWith('_deleting')) return null
-      if (field.includes('children')) return null
+const UpdatedFields = ({ fields, doc }: UpdatedFieldsProps): JSX.Element => {
+  if (fields == null) {
+    return <></>
+  }
 
-      // single access - doc[attr]
-      if (field in doc) {
-        const value = JSON.stringify(doc[field])
-        return (<div key={field}>{field} -&gt; {value}{field.includes('length') ? 'm' : ''}</div>)
-      }
+  const filteredFields = fields.filter(field => {
+    if (
+      field.startsWith('_change') ||
+      field.startsWith('updatedAt') ||
+      field.startsWith('updatedBy') ||
+      field.startsWith('_deleting') ||
+      field.includes('children')
+    ) {
+      return false
+    }
 
-      // double access - doc[parent][child]
-      if (field.includes('.')) {
-        let [parent, child] = field.split('.')
-        if (parent === 'content' && doc.__typename === DocumentTypeName.Area) {
-          parent = 'areaContent' // I had to alias this in the query bc of the overlap with ClimbType
+    return true
+  })
+
+  return (
+    <div>
+      {filteredFields.map(field => {
+        // single access - doc[attr]
+        if (field in doc) {
+          const value = JSON.stringify(doc[field])
+          return (
+            <div key={field}>
+              {field} -&gt; {value}
+              {field.includes('length') ? 'm' : ''}
+            </div>
+          )
         }
-        if (parent in doc && child in doc[parent]) {
-          const value = JSON.stringify(doc[parent][child])
-          return (<div key={field}>{child} -&gt; {value}</div>)
+
+        // double access - doc[parent][child]
+        if (field.includes('.')) {
+          let [parent, child] = field.split('.')
+          if (parent === 'content' && doc.__typename === DocumentTypeName.Area) {
+            parent = 'areaContent' // Alias this in the query to avoid overlap with ClimbType
+          }
+          if (parent in doc && child in doc[parent]) {
+            const value = JSON.stringify(doc[parent][child])
+            return (
+              <div key={field}>
+                {child} -&gt; {value}
+              </div>
+            )
+          }
+          return <div key={field}>{child}</div>
         }
-        return (<div key={field}>{child}</div>)
-      }
 
-      return null
-    })}
+        return null
+      })}
     </div>
   )
 }

src/components/home/Post.tsx

@@ -50,9 +50,10 @@ export interface PostHeaderProps {
 export const PostHeader = ({
   profilePhoto = null,
   username
-}: PostHeaderProps): JSX.Element | null => {
-  if (username == null) return null
-
+}: PostHeaderProps): JSX.Element => {
+  if (username == null) {
+    return <></>
+  }
   return (
     <>
       <ATagWrapper href={urlResolver(3, username)} className='flex py-2 items-center space-x-2 text-base-300'>

src/components/media/UserGallery.tsx

@@ -43,7 +43,7 @@ export interface UserGalleryProps {
  * - GQL pagination: https://graphql.org/learn/pagination/
  * - Apollo queries & caching: https://www.apollographql.com/docs/react/data/queries
  */
-export default function UserGallery ({ uid, postId: initialPostId, userPublicPage }: UserGalleryProps): JSX.Element | null {
+export default function UserGallery ({ uid, postId: initialPostId, userPublicPage }: UserGalleryProps): JSX.Element {
   const router = useRouter()
   const userProfile = userPublicPage.profile
 
@@ -112,7 +112,11 @@ export default function UserGallery ({ uid, postId: initialPostId, userPublicPag
     }
   }, [initialPostId, imageList, router])
 
-  const imageOnClickHandler = useCallback((props: any): void => {
+  interface ImageOnClickHandlerProps {
+    index: number
+  }
+
+  const imageOnClickHandler = useCallback((props: ImageOnClickHandlerProps): void => {
     if (isMobile) return
     void navigateHandler(props.index)
   }, [imageList])

src/components/media/slideshow/SlideViewer.tsx

@@ -171,8 +171,10 @@ interface InfoContainerProps {
   onClose?: () => void
 }
 
-const InfoContainer = ({ currentImage, auth, keyboardTip = true, onClose }: InfoContainerProps): ReactElement | null => {
-  if (currentImage == null) return null
+const InfoContainer = ({ currentImage, auth, keyboardTip = true, onClose }: InfoContainerProps): ReactElement => {
+  if (currentImage == null) {
+    return <></>
+  }
 
   const { entityTags } = currentImage
   const tagCount = entityTags.length

src/components/search/Autocomplete.tsx

@@ -24,7 +24,7 @@ export const Autocomplete = ({ queryParams, forceFocus = false, classNames, ...o
   const containerRef = useRef<HTMLDivElement>(null)
   const panelRootRef = useRef<any>(null)
   const rootRef = useRef<HTMLElement | null>(null)
-  let search: AutocompleteApi<any> | null = null
+  let search: AutocompleteApi<any>
 
   useEffect(() => {
     if (forceFocus) {