From 5c18ed2abdab3624f10c7e4225daa50b05e3578e Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Mon, 3 Mar 2025 20:58:04 +0100
Subject: [PATCH] fix types - components/templates (#172)

Fix more types - specifically in components/templates. This is done by
removing eslint-ignores and fixing them.
---
 src/Components/Templates/DateUserInfo.tsx          |  6 ++----
 src/Components/Templates/EmojiPicker.tsx           |  7 +++----
 src/Components/Templates/ItemCard.tsx              | 11 +++--------
 src/Components/Templates/MapOverlayPage.tsx        |  7 +++----
 src/Components/Templates/OverlayItemsIndexPage.tsx | 12 ++++++------
 src/Components/Templates/TagView.tsx               |  4 +---
 src/Components/Templates/TitleCard.tsx             |  8 +++-----
 src/Components/Typography/ErrorText.tsx            |  5 +----
 src/Utils/RandomColor.ts                           |  7 +------
 9 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/src/Components/Templates/DateUserInfo.tsx b/src/Components/Templates/DateUserInfo.tsx
index 4243a9c0..fcc4dacc 100644
--- a/src/Components/Templates/DateUserInfo.tsx
+++ b/src/Components/Templates/DateUserInfo.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { useState } from 'react'
 
 import { timeAgo } from '#utils/TimeAgo'
@@ -18,7 +15,8 @@ export const DateUserInfo = ({ item }: { item: Item }) => {
         <p
           className={'tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500'}
           onClick={() => setInfoExpanded(false)}
-        >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item && item.user_created && item.user_created.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}</p>
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}</p>
       ) : (
         <p
           className='!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500'
diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx
index e52b09ea..9ef1872b 100644
--- a/src/Components/Templates/EmojiPicker.tsx
+++ b/src/Components/Templates/EmojiPicker.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { useState } from 'react'
 
 interface Props {
@@ -110,7 +109,7 @@ export const EmojiPicker = ({
               <button
                 key={emoji}
                 onClick={() => selectEmoji(emoji)}
-                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji ? 'tw-bg-base-300' : ''}`}
               >
                 {emoji}
               </button>
@@ -121,7 +120,7 @@ export const EmojiPicker = ({
             {shapes.map((shape) => (
               <div
                 key={shape}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape === selectedShape && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape === selectedShape ? 'tw-bg-base-300' : ''}`}
                 onClick={() => selectShape(shape)}
               >
                 <div className={`tw-h-12 tw-mask tw-mask-${shape} tw-bg-neutral-content`}></div>
@@ -133,7 +132,7 @@ export const EmojiPicker = ({
             {colors.map((color) => (
               <div
                 key={color}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color === selectedColor && 'tw-bg-base-300'}`}
+                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color === selectedColor ? 'tw-bg-base-300' : ''}`}
                 onClick={() => selectColor(color)}
               >
                 <div className={`tw-h-8 tw-w-8 tw-rounded-full tw-bg-[${color}]`}></div>
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
index b876f670..f173124f 100644
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@@ -1,8 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useNavigate } from 'react-router-dom'
 
 import { StartEndView, TextView } from '#components/Map'
@@ -22,7 +17,7 @@ export const ItemCard = ({
   i: Item
   loading: boolean
   url: string
-  deleteCallback: any
+  deleteCallback: (item: Item) => void
 }) => {
   const navigate = useNavigate()
   const windowDimensions = useWindowDimensions()
@@ -34,8 +29,8 @@ export const ItemCard = ({
         // We could have an onClick callback instead
         const params = new URLSearchParams(window.location.search)
         if (windowDimensions.width < 786 && i.position)
-          navigate('/' + i.id + `${params ? `?${params}` : ''}`)
-        else navigate(url + i.id + `${params ? `?${params}` : ''}`)
+          navigate('/' + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`)
+        else navigate(url + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`)
       }}
     >
       <HeaderView
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index 33ff59e1..b0daf844 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { DomEvent } from 'leaflet'
 import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -39,14 +38,14 @@ export function MapOverlayPage({
   }, [overlayRef, backdropRef])
 
   return (
-    <div className={`tw-absolute tw-h-full tw-w-full tw-m-auto ${backdrop && 'tw-z-[2000]'}`}>
+    <div className={`tw-absolute tw-h-full tw-w-full tw-m-auto ${backdrop ? 'tw-z-[2000]' : ''}`}>
       <div
         ref={backdropRef}
-        className={`${backdrop && 'tw-backdrop-brightness-75'} tw-h-full tw-w-full tw-grid tw-place-items-center tw-m-auto`}
+        className={`${backdrop ? 'tw-backdrop-brightness-75' : ''} tw-h-full tw-w-full tw-grid tw-place-items-center tw-m-auto`}
       >
         <div
           ref={overlayRef}
-          className={`${card && 'tw-card tw-card-body'} tw-shadow-xl tw-bg-base-100 tw-p-6 ${className && className} ${!backdrop && 'tw-z-[2000]'} tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-left-0 tw-m-auto`}
+          className={`${card ? 'tw-card tw-card-body' : ''} tw-shadow-xl tw-bg-base-100 tw-p-6 ${className ?? ''} ${backdrop ? '' : 'tw-z-[2000]'} tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-left-0 tw-m-auto`}
         >
           {children}
           <button
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 2815e764..26a9b506 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 
@@ -73,16 +72,16 @@ export const OverlayItemsIndexPage = ({
 
   const layer = layers.find((l) => l.name === layerName)
 
-  const submitNewItem = async (evt: any) => {
+  const submitNewItem = async (evt: React.FormEvent<HTMLFormElement>) => {
     evt.preventDefault()
     const formItem: Item = {} as Item
-    Array.from(evt.target).forEach((input: HTMLInputElement) => {
+    Array.from(evt.target as any).forEach((input: HTMLInputElement) => {
       if (input.name) {
         formItem[input.name] = input.value
       }
     })
     setLoading(true)
-    formItem.text &&
+    if (formItem.text) {
       formItem.text
         .toLocaleLowerCase()
         .match(hashTagRegex)
@@ -92,6 +91,7 @@ export const OverlayItemsIndexPage = ({
           }
           return null
         })
+    }
     const uuid = crypto.randomUUID()
     let success = false
     try {
@@ -109,7 +109,7 @@ export const OverlayItemsIndexPage = ({
     setAddItemPopupType('')
   }
 
-  const deleteItem = async (item) => {
+  const deleteItem = async (item: Item) => {
     setLoading(true)
     let success = false
     try {
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index f19c5adc..1483e0b0 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-
 import { decodeTag } from '#utils/FormatTags'
 
 import type { Tag } from '#types/Tag'
@@ -21,7 +19,7 @@ export const TagView = ({
     <div
       key={tag.name}
       onClick={onClick}
-      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight && 'tw-border-4 tw-border-base-200 tw-shadow-lg'}`}
+      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight ? 'tw-border-4 tw-border-base-200 tw-shadow-lg' : ''}`}
       style={{ backgroundColor: tag.color ? tag.color : '#666' }}
     >
       <b>{decodeTag(tag.name)}</b>
diff --git a/src/Components/Templates/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx
index c3370550..d90a93f7 100644
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import Subtitle from '#components/Typography/Subtitle'
 
 interface TitleCardProps {
@@ -8,7 +6,7 @@ interface TitleCardProps {
   children?: React.ReactNode
   topMargin?: string
   className?: string
-  TopSideButtons?: any
+  TopSideButtons?: React.ReactNode
 }
 
 /**
@@ -26,9 +24,9 @@ export function TitleCard({
     <div
       className={
         'tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit tw-mb-4 ' +
-        (className || '') +
+        (className ?? '') +
         ' ' +
-        (topMargin || 'tw-mt-6')
+        (topMargin ?? 'tw-mt-6')
       }
     >
       {!hideTitle && (
diff --git a/src/Components/Typography/ErrorText.tsx b/src/Components/Typography/ErrorText.tsx
index 133c466a..b1af8717 100644
--- a/src/Components/Typography/ErrorText.tsx
+++ b/src/Components/Typography/ErrorText.tsx
@@ -1,7 +1,4 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-
-// eslint-disable-next-line react/prop-types
-function ErrorText({ styleClass, children }) {
+function ErrorText({ styleClass, children }: { styleClass: string; children: React.ReactNode }) {
   return <p className={`tw-text-center  tw-text-error ${styleClass}`}>{children}</p>
 }
 
diff --git a/src/Utils/RandomColor.ts b/src/Utils/RandomColor.ts
index daa5e1c7..b23da582 100644
--- a/src/Utils/RandomColor.ts
+++ b/src/Utils/RandomColor.ts
@@ -1,8 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 const goldenRatioConjugate = 0.618033988749895
 
 export const randomColor = () => {
@@ -53,7 +48,7 @@ function hsvToHex(h: number, s: number, v: number) {
   return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255))
 }
 
-const rgbToHex = (r, g, b) =>
+const rgbToHex = (r: number, g: number, b: number) =>
   '#' +
   [r, g, b]
     .map((x) => {