Upgrade to React 18

This commit is contained in:
Defectink
2022-04-22 15:25:03 +08:00
parent bdd56b52d0
commit 2b001973a7
12 changed files with 18 additions and 22 deletions

View File

@ -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

View File

@ -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">

View File

@ -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);

View File

@ -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>

View File

@ -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;

View File

@ -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()

View File

@ -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;

View File

@ -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>

View File

@ -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);

View File

@ -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 />

View File

@ -23,7 +23,6 @@ const composedConfig = composePlugins([
reactStrictMode: true,
experimental: {
runtime: 'nodejs',
reactMode: 'concurrent',
outputStandalone: true,
},
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],

View File

@ -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"],