From 2b001973a7bc5c2388cea85ed7f870839cc522ea Mon Sep 17 00:00:00 2001
From: Defectink <i@defect.ink>
Date: Fri, 22 Apr 2022 15:25:03 +0800
Subject: [PATCH] Upgrade to React 18

---
 components/DarkModeBtn.tsx      | 4 ++--
 components/Footer.tsx           | 3 +--
 components/NavBar.tsx           | 4 ++--
 components/PostCard.tsx         | 3 +--
 components/RUA/RUASandpack.tsx  | 3 +--
 components/gists/GistsCode.tsx  | 3 +--
 components/post/PostComment.tsx | 3 +--
 components/post/PostTOC.tsx     | 3 +--
 layouts/MDXLayout.tsx           | 4 ++--
 layouts/MainLayout.tsx          | 7 +++++--
 next.config.mjs                 | 1 -
 tsconfig.json                   | 2 +-
 12 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/components/DarkModeBtn.tsx b/components/DarkModeBtn.tsx
index 41a2ba2..ecdf3ce 100644
--- a/components/DarkModeBtn.tsx
+++ b/components/DarkModeBtn.tsx
@@ -1,8 +1,8 @@
 import { useTheme } from 'next-themes';
-import { FC, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FiMoon, FiSun } from 'react-icons/fi';
 
-const DarkModeBtn: FC = () => {
+const DarkModeBtn = () => {
   const [mounted, setMounted] = useState(false);
   const { systemTheme, theme, setTheme } = useTheme();
   // When mounted on client, now we can show the UI
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 6f4b2d0..2ad7706 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,9 +1,8 @@
-import { FC } from 'react';
 import { FiGithub } from 'react-icons/fi';
 
 const nowDay = new Date().getFullYear();
 
-const Footer: FC = () => {
+const Footer = () => {
   return (
     <>
       <footer className="max-w-6xl px-4 mx-auto xl:px-0">
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 1662891..fb063b2 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import Link from 'next/link';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import dynamic from 'next/dynamic';
 import { DocSearch } from '@docsearch/react';
@@ -31,7 +31,7 @@ const txtMenu = [
   },
 ];
 
-const HeadBar: FC = () => {
+const HeadBar = () => {
   const [showMenu, setShowMenu] = useState(false);
   const handleClick = useCallback(() => {
     setShowMenu((showMenu) => !showMenu);
diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index 543d5ac..bc5bfde 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { FC } from 'react';
 import { Post } from 'types';
 import cn from 'classnames';
 
@@ -7,7 +6,7 @@ interface Props {
   post: Post;
 }
 
-const PostCard: FC<Props> = ({ post }) => {
+const PostCard = ({ post }: Props) => {
   return (
     <>
       <Link href={`/p/${post.slug}`} passHref>
diff --git a/components/RUA/RUASandpack.tsx b/components/RUA/RUASandpack.tsx
index cd81fc2..95f0257 100644
--- a/components/RUA/RUASandpack.tsx
+++ b/components/RUA/RUASandpack.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { Sandpack, SandpackProps } from '@codesandbox/sandpack-react';
 import '@codesandbox/sandpack-react/dist/index.css';
 import { useTheme } from 'next-themes';
@@ -6,7 +5,7 @@ import useInView from 'lib/hooks/useInView';
 
 interface Props extends SandpackProps {}
 
-const RUASandpack: FC<Props> = ({ ...rest }) => {
+const RUASandpack = ({ ...rest }: Props) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
diff --git a/components/gists/GistsCode.tsx b/components/gists/GistsCode.tsx
index 260c27c..817d593 100644
--- a/components/gists/GistsCode.tsx
+++ b/components/gists/GistsCode.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { Gist } from 'types';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
@@ -12,7 +11,7 @@ interface Props {
   f: string;
 }
 
-const GistsCode: FC<Props> = ({ gist, f }) => {
+const GistsCode = ({ gist, f }: Props) => {
   const file = gist.files;
 
   const test = unified()
diff --git a/components/post/PostComment.tsx b/components/post/PostComment.tsx
index 5ff23ce..00080aa 100644
--- a/components/post/PostComment.tsx
+++ b/components/post/PostComment.tsx
@@ -1,10 +1,9 @@
-import { FC } from 'react';
 import Giscus from '@giscus/react';
 import { useTheme } from 'next-themes';
 import useInView from 'lib/hooks/useInView';
 import Image from 'next/image';
 
-const PostComment: FC = () => {
+const PostComment = () => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
diff --git a/components/post/PostTOC.tsx b/components/post/PostTOC.tsx
index 07504c7..879d373 100644
--- a/components/post/PostTOC.tsx
+++ b/components/post/PostTOC.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { getHeadings } from 'lib/utils';
 import Anchor from 'components/mdx/Anchor';
 
@@ -6,7 +5,7 @@ interface Props {
   headings: ReturnType<typeof getHeadings>;
 }
 
-const PostTOC: FC<Props> = ({ headings }) => {
+const PostTOC = ({ headings }: Props) => {
   return (
     <>
       <h2>What&apos;s inside?</h2>
diff --git a/layouts/MDXLayout.tsx b/layouts/MDXLayout.tsx
index 6020208..2799d4c 100644
--- a/layouts/MDXLayout.tsx
+++ b/layouts/MDXLayout.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import dynamic from 'next/dynamic';
 import { MyMatters } from 'types';
 import { renderToString } from 'react-dom/server';
@@ -11,9 +10,10 @@ const PostComment = dynamic(() => import('components/post/PostComment'));
 
 interface Props extends MyMatters {
   showTOC?: boolean;
+  children: React.ReactNode;
 }
 
-const MainLayout: FC<Props> = ({ title, date, showTOC = true, children }) => {
+const MainLayout = ({ title, date, showTOC = true, children }: Props) => {
   const contentString = renderToString(children as any);
   const headings = getHeadings(contentString);
 
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index 889c218..ffeebfd 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -1,10 +1,13 @@
-import { FC } from 'react';
 import dynamic from 'next/dynamic';
 
 const Footer = dynamic(() => import('components/Footer'));
 const HeadBar = dynamic(() => import('components/NavBar'));
 
-const MainLayout: FC = ({ children }) => {
+type Props = {
+  children: React.ReactNode;
+};
+
+const MainLayout = ({ children }: Props) => {
   return (
     <>
       <HeadBar />
diff --git a/next.config.mjs b/next.config.mjs
index ff49fac..afddc83 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -23,7 +23,6 @@ const composedConfig = composePlugins([
     reactStrictMode: true,
     experimental: {
       runtime: 'nodejs',
-      reactMode: 'concurrent',
       outputStandalone: true,
     },
     pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
diff --git a/tsconfig.json b/tsconfig.json
index 13ba9e5..7b6abf7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "typeRoots": ["./types", "./node_modules/@types"],
+    // "typeRoots": ["./types", "./node_modules/@types"],
     "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],