removing redundant typecast to void functions

Author: ayushsatyam146

.eslintrc.json

@@ -17,6 +17,6 @@
     "react/prop-types": "off"
   },
   "globals": {
-    "JSX": "true"
+    "JSX": true
   }
 }

components/CookiesBanner.tsx

@@ -8,9 +8,8 @@ const CookiesBanner = () => {
   const [cookiesBanner, setCookiesBanner] = useState<boolean>(false)
 
   /* Toggle customizable functionality */
-  const cookiesHandler = (callback: void) => {
+  const cookiesHandler = () => {
     setCookiesBanner(true)
-    return callback
   }
 
   useEffect(() => {
@@ -45,9 +44,12 @@ const CookiesBanner = () => {
                 Edit preferences
               </Link>
               <Button
-                onClick={() =>
-                  cookiesHandler(dispatch({ type: 'TOGGLE_CUSTOMIZE_COOKIES' }))
-                }
+                onClick={() => {
+                  cookiesHandler()
+                  dispatch({
+                    type: 'TOGGLE_CUSTOMIZE_COOKIES'
+                  })
+                }}
                 primary
                 customClass='js-cookies-accept'
               >

components/CustomizeIconsPanel.tsx

@@ -29,7 +29,7 @@ const CustomizeIconsPanel: React.FC<CustomizeIconsPanelProps> = (props) => {
   const { state, dispatch } = useContext(AppContext)
   const [iconEditor, setIconEditor] = useState(false)
 
-  const iconEditorToggle = (e: MouseEvent) => {
+  const iconEditorToggle = (e: React.MouseEvent) => {
     e.preventDefault()
     if (state.multipleIcons.length > 0) setIconEditor(!iconEditor)
     else window.alert('Please select atleast one icon')
@@ -44,7 +44,7 @@ const CustomizeIconsPanel: React.FC<CustomizeIconsPanelProps> = (props) => {
     setModal(!modal)
   }
 
-  const generateFont = (e: MouseEvent) => {
+  const generateFont = (e: React.MouseEvent) => {
     if (state.multipleIcons.length > 0) {
       e.preventDefault()
       modalToggle()
@@ -73,10 +73,10 @@ const CustomizeIconsPanel: React.FC<CustomizeIconsPanelProps> = (props) => {
         <div className='generate-div'>
           <span>{state.multipleIcons.length} icons selected</span>
           <span>Export as: </span>
-          <Button type='submit' onClick={generateFont as () => void}>
+          <Button type='submit' onClick={generateFont}>
             Font
           </Button>
-          <Button type='button' onClick={iconEditorToggle as () => void}>
+          <Button type='button' onClick={iconEditorToggle}>
             Images
           </Button>
         </div>
@@ -101,7 +101,7 @@ const CustomizeIconsPanel: React.FC<CustomizeIconsPanelProps> = (props) => {
       {iconEditor ? (
         <IconEditor
           isActive={iconEditor}
-          show={iconEditorToggle as () => void}
+          show={iconEditorToggle}
           iconNames={state.multipleIcons}
         />
       ) : (

components/HowToPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react'
+import { useRouter } from 'next/router'
 import { AppContext } from '../utils/AppContext'
 import { IconSetContext } from '../utils/IconSetContext'
 import Button from './Button'
@@ -17,6 +18,7 @@ const HowToPanel: React.FC<HowToPanelProps> = ({
   const ref = useRef<HTMLDivElement>(null)
   const [iconEditor, setIconEditor] = useState(false)
   const [iconType, setIconType] = useState('static')
+  const router = useRouter()
 
   const iconEditorToggle = (type: 'animated' | 'static') => {
     setIconType(type)
@@ -44,13 +46,9 @@ const HowToPanel: React.FC<HowToPanelProps> = ({
   }
 
   useOnClickOrEsc(ref, () => close())
-  let queryString
-  if (typeof window !== 'undefined') {
-    queryString = window.location.search
-  }
-  const urlParams: URLSearchParams = new URLSearchParams(queryString)
-  const urlIconName: string | null = urlParams.get('iconName')
-  const urlTagName: string | null = urlParams.get('tagName')
+
+  const urlTagName = router.query.tagName as string
+  const urlIconName = router.query.iconName as string
 
   let setSearchWithUrlParam: string | null =
     urlIconName && !iconName ? urlIconName : ''
@@ -59,15 +57,14 @@ const HowToPanel: React.FC<HowToPanelProps> = ({
     setSearchWithUrlParam = urlTagName
   }
 
-  const selectTag = (urlTagName: string, callback: void) => {
+  const selectTag = (urlTagName: string) => {
     if (typeof window !== 'undefined') {
       window.history.replaceState(
         '',
         'EOS Icons',
         `${window.location.pathname}?tagName=${urlTagName}`
       )
     }
-    return callback
   }
   const setTagInSearch = () => {
     return dispatch({
@@ -168,13 +165,11 @@ const HowToPanel: React.FC<HowToPanelProps> = ({
                   className='badge'
                   onClick={() => {
                     iconDispatch({ type: 'SET_SEARCH_VALUE', payload: tag })
-                    selectTag(
-                      tag,
-                      dispatch({
-                        type: 'TOGGLE_ICON_TAGS',
-                        selection: tag
-                      })
-                    )
+                    selectTag(tag)
+                    dispatch({
+                      type: 'TOGGLE_ICON_TAGS',
+                      selection: tag
+                    })
                   }}
                   style={{ cursor: 'pointer' }}
                 >
@@ -187,7 +182,7 @@ const HowToPanel: React.FC<HowToPanelProps> = ({
         {iconEditor ? (
           <IconEditor
             isActive={iconEditor}
-            show={iconEditorToggle as () => void}
+            show={iconEditorToggle}
             iconNames={[iconName]}
             iconType={iconType}
             theme={state.iconsTheme}

components/IconEditor.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useContext, useRef } from 'react'
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useRef,
+  MouseEventHandler
+} from 'react'
 import { SketchPicker } from 'react-color'
 import Button from './Button'
 import axios, { AxiosResponse } from 'axios'
@@ -63,12 +69,12 @@ const IconEditor: React.FC<IconEditorProps> = ({
         .value
     )
   }
-  const flipIconHorizontal = (e: MouseEvent) => {
+  const flipIconHorizontal = (e: React.MouseEvent) => {
     e.preventDefault()
     setHorizontalFlip(!horizontalFlip)
   }
 
-  const flipIconVertical = (e: MouseEvent) => {
+  const flipIconVertical = (e: React.MouseEvent) => {
     e.preventDefault()
     setVerticalFlip(!verticalFlip)
   }
@@ -160,7 +166,7 @@ const IconEditor: React.FC<IconEditorProps> = ({
     }
     return window.open(downloadEndPoints, '_blank')
   }
-  const generateCustomizedIcon = (e: MouseEvent) => {
+  const generateCustomizedIcon = (e: React.MouseEvent) => {
     if (!generating) {
       e.preventDefault()
       setGenerate(true)
@@ -191,7 +197,10 @@ const IconEditor: React.FC<IconEditorProps> = ({
         className='icon-editor-card'
         ref={iconEditorRef as React.RefObject<HTMLDivElement>}
       >
-        <div className='close' onClick={show as () => void} />
+        <div
+          className='close'
+          onClick={show as MouseEventHandler<HTMLDivElement>}
+        />
         <h2>Customize Icon</h2>
         <div className='flex flex-row icon-editor-content'>
           <div>
@@ -292,10 +301,10 @@ const IconEditor: React.FC<IconEditorProps> = ({
               <div>
                 <p>Flip</p>
                 <div>
-                  <button onClick={flipIconHorizontal as () => void}>
+                  <button onClick={flipIconHorizontal}>
                     <i className='eos-icons'>flip</i>
                   </button>
-                  <button onClick={flipIconVertical as () => void}>
+                  <button onClick={flipIconVertical}>
                     <i className='eos-icons rotate-flip-icon'>flip</i>
                   </button>
                 </div>
@@ -341,10 +350,7 @@ const IconEditor: React.FC<IconEditorProps> = ({
               ''
             )}
             <div className='export-btn'>
-              <Button
-                type='button'
-                onClick={generateCustomizedIcon as () => void}
-              >
+              <Button type='button' onClick={generateCustomizedIcon}>
                 {!generating ? (
                   <span>Export as {exportAs.toUpperCase()}</span>
                 ) : (

interface/index.ts

@@ -11,7 +11,7 @@ export interface AboutBlockProps {
 
 export interface ButtonProps {
   children: React.ReactNode
-  onClick: () => void
+  onClick: ((e: React.MouseEvent) => void) | (() => void)
   primary?: boolean
   type?: 'button' | 'submit' | 'reset'
   customClass?: string
@@ -62,7 +62,10 @@ export interface IconProps {
 
 export interface IconEditorProps {
   isActive: boolean
-  show: () => void
+  show:
+    | ((type: 'animated' | 'static') => void)
+    | ((e: React.MouseEvent) => void)
+    | (() => void)
   iconNames: string[]
   iconType?: string
   theme?: string
@@ -98,15 +101,6 @@ export interface eosIconsStateType {
   cookiesToggle: boolean
 }
 
-export interface eosIconsActionType {
-  type: string
-  selection: string
-  search: string
-  data: string[]
-  category: string
-  action: string
-}
-
 export interface ModalProps {
   isActive: boolean
   show: () => void

tsconfig.tsbuildinfo

@@ -0,0 +1,8 @@
+export type eosIconsActionType =
+  | { type: string }
+  | { type: string; selection: string }
+  | { type: string; search: string }
+  | { type: string; search: string }
+  | { type: string; data: string[] }
+  | { type: string; action: string }
+  | { type: string; category: string }

types/index.ts

@@ -1,10 +1,12 @@
 import React, { createContext, useReducer } from 'react'
 import { iconsReducer, eosIconsState } from './EosIcons.store'
 import { eosIconsStateType } from '../interface'
+import { eosIconsActionType } from '../types'
+import type { Dispatch } from 'react'
 
 export const AppContext = createContext<{
   state: eosIconsStateType
-  dispatch: React.Dispatch<any>
+  dispatch: Dispatch<eosIconsActionType>
 }>({ state: eosIconsState, dispatch: () => null })
 
 interface AppWrapperProps {