DN-6: Fixed updated types for next v15.

dereckmezquita · Dec 28, 2024 · aa1fb34 · aa1fb34
1 parent d4ef3cf
commit aa1fb34
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 58 deletions.
diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
@@ -9,8 +9,32 @@ const compat = new FlatCompat({
     baseDirectory: __dirname
 });
 
-const eslintConfig = [
-    ...compat.extends('next/core-web-vitals', 'next/typescript')
+// Pull in Next.js + TypeScript recommended rules:
+const nextAndTsConfigs = compat.extends(
+    'next/core-web-vitals',
+    'next/typescript'
+);
+
+/**
+ * We can push additional "flat config" objects that override or disable rules.
+ */
+const overrides = [
+    {
+        files: ['**/*.{ts,tsx,js,jsx}'],
+        rules: {
+            // Turn off or relax the rules that are blocking your build:
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-unused-vars': 'off',
+            '@typescript-eslint/no-unused-vars-experimental': 'off', // if present
+            'prefer-const': 'off',
+            '@typescript-eslint/ban-types': 'off', // sometimes is also triggered
+            '@next/next/no-img-element': 'warn' // or 'off' if you want to allow <img>
+        }
+    }
 ];
 
+// Combine the Next + TS config with our overrides:
+const eslintConfig = [...nextAndTsConfigs, ...overrides];
+
 export default eslintConfig;
diff --git a/client/src/app/blog/[...slug]/page.tsx b/client/src/app/blog/[...slug]/page.tsx
@@ -55,13 +55,9 @@ export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string[] };
-}
-
-async function Page({ params }: PageProps) {
+async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
     // Decode each segment
-    const decodedSegments = params.slug.map(decodeSlug);
+    const decodedSegments = (await params).slug.map(decodeSlug);
     // Join segments to form the relative path to the file
     const absPath: string = path.join(absDir, ...decodedSegments) + '.mdx';
 
@@ -111,8 +107,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSegments = params.slug.map(decodeSlug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string[] }>;
+}): Promise<Metadata> {
+    const decodedSegments = (await params).slug.map(decodeSlug);
     const filePath: string = path.join(absDir, ...decodedSegments) + '.mdx';
     const post: PostMetadata = extractSinglePostMetadata(filePath);
 

diff --git a/client/src/app/courses/[...slug]/page.tsx b/client/src/app/courses/[...slug]/page.tsx
@@ -55,13 +55,9 @@ export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string[] };
-}
-
-async function Page({ params }: PageProps) {
+async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
     // Decode each segment
-    const decodedSegments = params.slug.map(decodeSlug);
+    const decodedSegments = (await params).slug.map(decodeSlug);
     // Join segments to form the relative path to the file
     const absPath: string = path.join(absDir, ...decodedSegments) + '.mdx';
 
@@ -111,8 +107,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSegments = params.slug.map(decodeSlug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string[] }>;
+}): Promise<Metadata> {
+    const decodedSegments = (await params).slug.map(decodeSlug);
     const filePath: string = path.join(absDir, ...decodedSegments) + '.mdx';
     const post: PostMetadata = extractSinglePostMetadata(filePath);
 

diff --git a/client/src/app/dictionaries/biology/[slug]/page.tsx b/client/src/app/dictionaries/biology/[slug]/page.tsx
@@ -34,12 +34,8 @@ export async function generateStaticParams(): Promise<{ slug: string }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string };
-}
-
-async function Page({ params }: PageProps) {
-    const decodedSlug = decodeSlug(params.slug);
+async function Page({ params }: { params: Promise<{ slug: string }> }) {
+    const decodedSlug = decodeSlug((await params).slug);
 
     const absPath: string = path.join(absDir, decodedSlug + '.mdx');
     const markdown = await accessReadFile(absPath);
@@ -78,8 +74,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSlug = decodeSlug(params.slug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+    const decodedSlug = decodeSlug((await params).slug);
     const filename: string = decodedSlug + '.mdx';
     const filePath: string = path.join(absDir, filename);
     const definition: DefinitionMetadata =

diff --git a/client/src/app/dictionaries/chemistry/[slug]/page.tsx b/client/src/app/dictionaries/chemistry/[slug]/page.tsx
@@ -34,12 +34,8 @@ export async function generateStaticParams(): Promise<{ slug: string }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string };
-}
-
-async function Page({ params }: PageProps) {
-    const decodedSlug = decodeSlug(params.slug);
+async function Page({ params }: { params: Promise<{ slug: string }> }) {
+    const decodedSlug = decodeSlug((await params).slug);
 
     const absPath: string = path.join(absDir, decodedSlug + '.mdx');
     const markdown = await accessReadFile(absPath);
@@ -78,8 +74,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSlug = decodeSlug(params.slug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+    const decodedSlug = decodeSlug((await params).slug);
     const filename: string = decodedSlug + '.mdx';
     const filePath: string = path.join(absDir, filename);
     const definition: DefinitionMetadata =

diff --git a/client/src/app/dictionaries/mathematics/[slug]/page.tsx b/client/src/app/dictionaries/mathematics/[slug]/page.tsx
@@ -34,12 +34,8 @@ export async function generateStaticParams(): Promise<{ slug: string }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string };
-}
-
-async function Page({ params }: PageProps) {
-    const decodedSlug = decodeSlug(params.slug);
+async function Page({ params }: { params: Promise<{ slug: string }> }) {
+    const decodedSlug = decodeSlug((await params).slug);
 
     const absPath: string = path.join(absDir, decodedSlug + '.mdx');
     const markdown = await accessReadFile(absPath);
@@ -78,8 +74,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSlug = decodeSlug(params.slug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+    const decodedSlug = decodeSlug((await params).slug);
     const filename: string = decodedSlug + '.mdx';
     const filePath: string = path.join(absDir, filename);
     const definition: DefinitionMetadata =

diff --git a/client/src/app/references/[...slug]/page.tsx b/client/src/app/references/[...slug]/page.tsx
@@ -55,13 +55,9 @@ export async function generateStaticParams(): Promise<{ slug: string[] }[]> {
     });
 }
 
-interface PageProps {
-    params: { slug: string[] };
-}
-
-async function Page({ params }: PageProps) {
+async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
     // Decode each segment
-    const decodedSegments = params.slug.map(decodeSlug);
+    const decodedSegments = (await params).slug.map(decodeSlug);
     // Join segments to form the relative path to the file
     const absPath: string = path.join(absDir, ...decodedSegments) + '.mdx';
 
@@ -111,8 +107,12 @@ async function Page({ params }: PageProps) {
 
 export default Page;
 
-export function generateMetadata({ params }: PageProps): Metadata {
-    const decodedSegments = params.slug.map(decodeSlug);
+export async function generateMetadata({
+    params
+}: {
+    params: Promise<{ slug: string[] }>;
+}): Promise<Metadata> {
+    const decodedSegments = (await params).slug.map(decodeSlug);
     const filePath: string = path.join(absDir, ...decodedSegments) + '.mdx';
     const post: PostMetadata = extractSinglePostMetadata(filePath);
 

diff --git a/client/src/components/pages/SideBar.tsx b/client/src/components/pages/SideBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import path from 'path';
 import {
     SideBarContainer,
@@ -45,7 +45,7 @@ function renderSideBarContent(posts: any) {
     }
 
     // ---- 2. Render each group. ----
-    const renderedContent: JSX.Element[] = [];
+    const renderedContent: ReactElement[] = [];
     const titleKeys = Object.keys(groupedPosts);
 
     for (let i = 0; i < titleKeys.length; i++) {
@@ -83,7 +83,7 @@ function renderSideBarContent(posts: any) {
 
 // Helper function for definitions:
 function renderAllDefinitions(defs: DefinitionMetadata[]) {
-    const items: JSX.Element[] = [];
+    const items: ReactElement[] = [];
     for (let i = 0; i < defs.length; i++) {
         items.push(renderDefinition(defs[i]));
     }
@@ -120,7 +120,7 @@ function renderPost(post: PostMetadata) {
 //  * Subsequent items: “Chapter i: title”
 function renderSeriesList(series: PostMetadata[]) {
     const firstPost = series[0];
-    const listItems: JSX.Element[] = [];
+    const listItems: ReactElement[] = [];
 
     // Top item
     listItems.push(

diff --git a/client/src/components/pages/posts-dictionaries.tsx b/client/src/components/pages/posts-dictionaries.tsx
@@ -1,5 +1,5 @@
-// components that are common between displaying a post and dictionaries
 'use client';
+import { ReactElement } from 'react';
 import styled, { css } from 'styled-components';
 import Link from 'next/link';
 
@@ -91,7 +91,7 @@ export const SideBarAboutH2 = styled.h2`
         props.theme.text.colour.light_grey(undefined, undefined, 50)};
 `;
 
-export function SideBarAbout(): JSX.Element {
+export function SideBarAbout(): ReactElement {
     return (
         <SideBarAboutContainer>
             <SideBarAboutH2>About</SideBarAboutH2>

diff --git a/client/src/components/ui/Footer.tsx b/client/src/components/ui/Footer.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { NEXT_PUBLIC_APP_VERSION, NEXT_PUBLIC_BUILD_ENV } from '@lib/env';
 import Link from 'next/link';
+import { ReactElement } from 'react';
 
 const minWidthSnapUp = (props: any) =>
     props.theme.container.widths.min_width_snap_up;
@@ -29,7 +30,7 @@ function getCurrentYear(): number {
     return new Date().getFullYear();
 }
 
-function Footer(): JSX.Element {
+function Footer(): ReactElement {
     return (
         <FooterContainer>
             <FooterText>

diff --git a/client/src/utils/remark-rehype/remarkToc.ts b/client/src/utils/remark-rehype/remarkToc.ts
@@ -1,7 +1,6 @@
 // https://github.com/ShuntaH/remark-toc-collapse/blob/main/index.js
 import { toc, Options as TocOptions } from 'mdast-util-toc';
 import { Root } from 'mdast';
-import { Node } from 'mdast-util-toc/lib';
 import { Plugin } from 'unified';
 
 interface RemarkTocOptions extends TocOptions {