From 33935efd06a78785e5689415f603ab5130076cc7 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 17 Sep 2024 15:32:55 +0200
Subject: [PATCH] refactor: no explicit any

enabled eslint rule no-explicit-any and fixed reported errors
---
 .eslintrc.cjs                                 |  1 -
 src/app/(main)/layout.tsx                     |  2 +-
 src/app/api/fetchData/route.ts                |  2 +-
 src/components/richText/RichText.tsx          | 35 +++++-----
 src/components/sections/callout/Callout.tsx   |  6 +-
 src/components/sections/grid/Grid.tsx         |  6 +-
 .../sections/logoSalad/LogoSalad.tsx          |  6 +-
 src/post/lead/Lead.tsx                        |  6 +-
 src/utils/reactNode.ts                        | 20 ++++++
 src/utils/seo.ts                              |  5 +-
 studio/components/AnchorSelect.tsx            | 12 +---
 studio/components/SoMeInputs.tsx              | 26 ++++++-
 studio/components/slug/ReferenceSlugInput.tsx | 70 -------------------
 studio/lib/fetchWithToken.ts                  |  2 +-
 studio/schemas/objects/link.ts                |  2 +-
 studio/utils/validations.ts                   | 13 ----
 16 files changed, 81 insertions(+), 133 deletions(-)
 create mode 100644 src/utils/reactNode.ts
 delete mode 100644 studio/components/slug/ReferenceSlugInput.tsx
 delete mode 100644 studio/utils/validations.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a6be710a3..b83f65ddd 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -31,7 +31,6 @@ module.exports = {
     },
   },
   rules: {
-    "@typescript-eslint/no-explicit-any": "off", // TODO
     "unused-imports/no-unused-imports": "error",
     "import/no-named-as-default": "off",
     "import/no-unresolved": "error",
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
index 0b6865141..e28cf5ca2 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -18,7 +18,7 @@ import { loadQuery } from "studio/lib/store";
 
 import styles from "./layout.module.css";
 
-const hasValidData = (data: any) => data && Object.keys(data).length > 0;
+const hasValidData = (data: unknown) => data && Object.keys(data).length > 0;
 
 export default async function Layout({
   children,
diff --git a/src/app/api/fetchData/route.ts b/src/app/api/fetchData/route.ts
index 88febb8c4..1229e0edd 100644
--- a/src/app/api/fetchData/route.ts
+++ b/src/app/api/fetchData/route.ts
@@ -8,7 +8,7 @@ const clientWithToken = client.withConfig({ token });
 
 interface FetchRequestBody {
   query: string;
-  params?: Record<string, any>;
+  params?: Record<string, unknown>;
 }
 
 export async function POST(req: Request) {
diff --git a/src/components/richText/RichText.tsx b/src/components/richText/RichText.tsx
index 918d8817a..a4d991e9e 100644
--- a/src/components/richText/RichText.tsx
+++ b/src/components/richText/RichText.tsx
@@ -1,16 +1,19 @@
 "use client";
 
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
+import { PortableTextObject } from "@sanity/types";
+import { ReactNode } from "react";
 
 import Text from "src/components/text/Text";
 import textStyles from "src/components/text/text.module.css";
 import { useConvertSanityImageToNextImage } from "src/utils/hooks/useConvertImage";
+import { getReactNodeTextContent } from "src/utils/reactNode";
 
 import styles from "./richText.module.css";
 
 type Children = {
   _type: string;
-  marks: any[];
+  marks: string[];
   text: string;
   _key: string;
 };
@@ -27,11 +30,11 @@ export type PortableTextBlock = {
     _type: string;
   };
   alt?: string;
-  markDefs?: any[];
+  markDefs?: PortableTextObject[];
 };
 
-const formatId = (children: any): string => {
-  const text = children.join(" ");
+const formatId = (children: ReactNode): string => {
+  const text = getReactNodeTextContent(children);
 
   return text
     .toLowerCase()
@@ -44,36 +47,32 @@ const SanityImage = ({ value }: { value: PortableTextBlock }) => {
   return <div className={styles.image}>{ImageElement}</div>;
 };
 
-const myPortableTextComponents = {
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
   block: {
-    h2: ({ children }: any) => (
+    h2: ({ children }) => (
       <Text type="h2" id={formatId(children)}>
         {children}
       </Text>
     ),
-    h3: ({ children }: any) => (
+    h3: ({ children }) => (
       <Text type="h3" id={formatId(children)}>
         {children}
       </Text>
     ),
-    normal: ({ children }: any) => <Text type="body">{children}</Text>,
-    blockquote: ({ children }: any) => (
+    normal: ({ children }) => <Text type="body">{children}</Text>,
+    blockquote: ({ children }) => (
       <blockquote className={`${styles.blockquote} ${textStyles.body}`}>
         {children}
       </blockquote>
     ),
   },
   list: {
-    bullet: ({ children }: any) => <ul className={styles.list}>{children}</ul>,
-    number: ({ children }: any) => <ol className={styles.list}>{children}</ol>,
+    bullet: ({ children }) => <ul className={styles.list}>{children}</ul>,
+    number: ({ children }) => <ol className={styles.list}>{children}</ol>,
   },
   listItem: {
-    bullet: ({ children }: any) => (
-      <li className={textStyles.body}>{children}</li>
-    ),
-    number: ({ children }: any) => (
-      <li className={textStyles.body}>{children}</li>
-    ),
+    bullet: ({ children }) => <li className={textStyles.body}>{children}</li>,
+    number: ({ children }) => <li className={textStyles.body}>{children}</li>,
   },
   types: {
     image: SanityImage,
diff --git a/src/components/sections/callout/Callout.tsx b/src/components/sections/callout/Callout.tsx
index 8c2f84f14..850660211 100644
--- a/src/components/sections/callout/Callout.tsx
+++ b/src/components/sections/callout/Callout.tsx
@@ -1,4 +1,4 @@
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
@@ -10,8 +10,8 @@ interface CalloutProps {
   callout: CalloutSection;
 }
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodySuperLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
 };
 
 const Callout = ({ callout }: CalloutProps) => {
diff --git a/src/components/sections/grid/Grid.tsx b/src/components/sections/grid/Grid.tsx
index c35b28586..c0815f396 100644
--- a/src/components/sections/grid/Grid.tsx
+++ b/src/components/sections/grid/Grid.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
@@ -54,6 +54,6 @@ const Element = ({
   );
 };
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="small">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="small">{children}</Text>,
 };
diff --git a/src/components/sections/logoSalad/LogoSalad.tsx b/src/components/sections/logoSalad/LogoSalad.tsx
index 94da98028..639a84884 100644
--- a/src/components/sections/logoSalad/LogoSalad.tsx
+++ b/src/components/sections/logoSalad/LogoSalad.tsx
@@ -1,4 +1,4 @@
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import Text from "src/components/text/Text";
 import { LogoSaladSection } from "studio/lib/interfaces/pages";
@@ -10,8 +10,8 @@ interface LogoSaladProps {
   logoSalad: LogoSaladSection;
 }
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodySuperLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodySuperLarge">{children}</Text>,
 };
 
 export const LogoSalad = ({ logoSalad }: LogoSaladProps) => {
diff --git a/src/post/lead/Lead.tsx b/src/post/lead/Lead.tsx
index 2e081b64a..131e1d845 100644
--- a/src/post/lead/Lead.tsx
+++ b/src/post/lead/Lead.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { PortableText } from "@portabletext/react";
+import { PortableText, PortableTextReactComponents } from "@portabletext/react";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
@@ -8,8 +8,8 @@ import { IImage } from "studio/lib/interfaces/media";
 
 import styles from "./lead.module.css";
 
-const myPortableTextComponents = {
-  block: ({ children }: any) => <Text type="bodyLarge">{children}</Text>,
+const myPortableTextComponents: Partial<PortableTextReactComponents> = {
+  block: ({ children }) => <Text type="bodyLarge">{children}</Text>,
 };
 
 const Lead = ({
diff --git a/src/utils/reactNode.ts b/src/utils/reactNode.ts
new file mode 100644
index 000000000..f2eef11b7
--- /dev/null
+++ b/src/utils/reactNode.ts
@@ -0,0 +1,20 @@
+import { ReactNode, isValidElement } from "react";
+
+export function getReactNodeTextContent(node: ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return node.toString();
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getReactNodeTextContent).join("");
+  }
+
+  if (isValidElement(node)) {
+    const children = node.props.children;
+    if (children) {
+      return getReactNodeTextContent(children);
+    }
+  }
+
+  return "";
+}
diff --git a/src/utils/seo.ts b/src/utils/seo.ts
index d1ad7457e..bdd5140ad 100644
--- a/src/utils/seo.ts
+++ b/src/utils/seo.ts
@@ -1,4 +1,5 @@
 import { toPlainText } from "@portabletext/toolkit";
+import type { QueryParams } from "@sanity/client";
 import { Metadata } from "next";
 
 import { PortableTextBlock } from "src/components/richText/RichText";
@@ -32,7 +33,7 @@ export const OPEN_GRAPH_IMAGE_DIMENSIONS = {
 
 export async function fetchSeoData(
   query: string,
-  variables?: any,
+  variables?: QueryParams | undefined,
 ): Promise<SeoData | null> {
   try {
     const { data } = await loadQuery<SeoData>(query, variables);
@@ -45,7 +46,7 @@ export async function fetchSeoData(
 
 export async function fetchPostSeoData(
   query: string,
-  variables?: any,
+  variables?: QueryParams | undefined,
 ): Promise<SeoData | null> {
   try {
     const { data } = await loadQuery<PostSeoData>(query, variables);
diff --git a/studio/components/AnchorSelect.tsx b/studio/components/AnchorSelect.tsx
index 1d68f3d97..3d878f266 100644
--- a/studio/components/AnchorSelect.tsx
+++ b/studio/components/AnchorSelect.tsx
@@ -1,17 +1,9 @@
 import { Button, Select, Stack } from "@sanity/ui";
 import React, { useEffect, useState } from "react";
-import { PatchEvent, set, unset, useFormValue } from "sanity";
+import { PatchEvent, StringInputProps, set, unset, useFormValue } from "sanity";
 
 import { fetchWithToken } from "studio/lib/fetchWithToken";
 
-interface AnchorSelectProps {
-  value?: string;
-  type: any;
-  onChange: (event: PatchEvent) => void;
-  path: any[];
-  schemaType: any;
-}
-
 interface AnchorItem {
   basicTitle?: string;
   value: string;
@@ -30,7 +22,7 @@ function fromCamelCase(value?: string) {
     }); // Capitalize the first letter
 }
 
-const AnchorSelect = ({ value, onChange, path }: AnchorSelectProps) => {
+const AnchorSelect = ({ value, onChange, path }: StringInputProps) => {
   const [listItems, setListItems] = useState<AnchorItem[]>([]);
 
   // Extract the internal link reference from the form value
diff --git a/studio/components/SoMeInputs.tsx b/studio/components/SoMeInputs.tsx
index 322bbbb6c..3707786fe 100644
--- a/studio/components/SoMeInputs.tsx
+++ b/studio/components/SoMeInputs.tsx
@@ -2,6 +2,8 @@ import { Box, Label, Select, Stack, TextInput } from "@sanity/ui";
 import React from "react";
 import { ObjectInputProps, set } from "sanity";
 
+import { SocialMediaLink } from "studio/lib/interfaces/socialMedia";
+
 export const SoMePlatforms: { [key: string]: string } = {
   facebook: "Facebook",
   x: "X",
@@ -23,10 +25,28 @@ const detectPlatformFromUrl = (url: string): string | null => {
   return null;
 };
 
-const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
+function isSocialMediaLinkType(value: unknown): value is SocialMediaLink {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "_type" in value &&
+    typeof value._type === "string" &&
+    "url" in value &&
+    typeof value.url === "string" &&
+    "platform" in value &&
+    typeof value.platform === "string"
+  );
+}
+
+const SoMeInputs: React.FC<ObjectInputProps<Record<string, unknown>>> = ({
   value = {},
   onChange,
 }) => {
+  if (!isSocialMediaLinkType(value)) {
+    console.error("Unexpected value type for SoMeInputs");
+    return;
+  }
+
   const handleUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (!onChange) return;
     const newUrl = event.target.value;
@@ -58,7 +78,7 @@ const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
           <TextInput
             id={urlInputName}
             name={urlInputName}
-            value={value.url}
+            value={value && value.url}
             onChange={handleUrlChange}
             placeholder="Enter URL"
           />
@@ -72,7 +92,7 @@ const SoMeInputs: React.FC<ObjectInputProps<Record<string, any>>> = ({
           <Select
             id={platformInputName}
             name={platformInputName}
-            value={value.platform}
+            value={value && value.platform}
             onChange={handlePlatformChange}
           >
             <option value="">Select Platform</option>
diff --git a/studio/components/slug/ReferenceSlugInput.tsx b/studio/components/slug/ReferenceSlugInput.tsx
deleted file mode 100644
index d37adb775..000000000
--- a/studio/components/slug/ReferenceSlugInput.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-// components/ReferenceSlugInput.tsx
-
-import { TextInput } from "@sanity/ui";
-import React, { useEffect, useState } from "react";
-import { PatchEvent, set, unset, useClient } from "sanity";
-
-interface ReferenceSlugInputProps {
-  value?: string;
-  readOnly?: boolean;
-  schemaType: {
-    title: string;
-    name: string;
-    description?: string;
-  };
-  onChange: (event: PatchEvent) => void;
-  renderDefault: (props: any) => React.ReactNode;
-  elementProps: {
-    id: string;
-    ref: React.Ref<HTMLInputElement>;
-    onBlur: () => void;
-    onFocus: () => void;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  };
-  document: {
-    internalLink?: {
-      _ref: string;
-    };
-  };
-}
-
-const ReferenceSlugInput: React.FC<ReferenceSlugInputProps> = (props) => {
-  const { value, readOnly, onChange, elementProps, document } = props;
-  const [slug, setSlug] = useState<string | null>(value || null);
-  const client = useClient();
-
-  useEffect(() => {
-    if (document?.internalLink?._ref) {
-      client
-        .fetch<
-          string | null
-        >("*[_id == $id][0].slug.current", { id: document.internalLink._ref })
-        .then((fetchedSlug) => {
-          setSlug(fetchedSlug || null);
-          onChange(PatchEvent.from(fetchedSlug ? set(fetchedSlug) : unset()));
-        });
-    }
-  }, [document?.internalLink?._ref, client, onChange]);
-
-  return (
-    <TextInput
-      readOnly={readOnly}
-      value={slug || ""}
-      ref={elementProps.ref}
-      onBlur={elementProps.onBlur}
-      onFocus={elementProps.onFocus}
-      onChange={(event) => {
-        setSlug(event.currentTarget.value);
-        onChange(
-          PatchEvent.from(
-            event.currentTarget.value
-              ? set(event.currentTarget.value)
-              : unset(),
-          ),
-        );
-      }}
-    />
-  );
-};
-
-export default ReferenceSlugInput;
diff --git a/studio/lib/fetchWithToken.ts b/studio/lib/fetchWithToken.ts
index c101c8b79..ddff1f946 100644
--- a/studio/lib/fetchWithToken.ts
+++ b/studio/lib/fetchWithToken.ts
@@ -20,7 +20,7 @@
  */
 export const fetchWithToken = async <T>(
   query: string,
-  params?: Record<string, any>,
+  params?: Record<string, unknown>,
 ): Promise<T> => {
   const response = await fetch("/api/fetchData", {
     method: "POST",
diff --git a/studio/schemas/objects/link.ts b/studio/schemas/objects/link.ts
index 41c16d11d..efa9844aa 100644
--- a/studio/schemas/objects/link.ts
+++ b/studio/schemas/objects/link.ts
@@ -71,7 +71,7 @@ export const link = defineField({
         { type: lazyCompensationsID() },
       ],
       validation: (rule) =>
-        rule.custom((value: any, context: any) => {
+        rule.custom((value, context) => {
           const parent = context.parent as Parent;
           if (
             parent?.linkTitle &&
diff --git a/studio/utils/validations.ts b/studio/utils/validations.ts
deleted file mode 100644
index 8c24b304f..000000000
--- a/studio/utils/validations.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface Link {
-  [key: string]: any;
-  linkType?: string;
-  _type?: string;
-}
-
-export const isFieldVisible = (
-  link: Link,
-  linkTypeField: string,
-  expectedType: string,
-): boolean => {
-  return link[linkTypeField] === expectedType;
-};