From 396836deddae750f7cb8de7b464fdac1a47feb19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BF=BD=E5=A6=82=E5=AF=84?= <huruji3@foxmail.com>
Date: Fri, 25 Mar 2022 08:45:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20del=20children?=
 =?UTF-8?q?=20type=20(#3283)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 🔧 del unnecessary children type

Change-Id: I3dea5e07f5401bdbdd168eb959fe361c57784167

* feat: 💄 eslint

Change-Id: Ie173adeca9e3112d8cdfc1f85964332105dcb424

* feat: 🔧 add css type

Change-Id: I8850c4d09b152f4d9c4d98e6eebca58bd9eecd37

* fix: 💄 ci lint

Change-Id: I69ff89c7a30e2bdcd26475ec83f3f5ec143121b6
---
 app/components/Analytics.ts                   |  6 +---
 app/components/AuthenticatedLayout.tsx        |  5 +--
 app/components/Breadcrumb.tsx                 |  8 +++--
 app/components/ButtonLink.tsx                 |  3 +-
 app/components/CenteredContent.tsx            |  3 +-
 app/components/DocumentBreadcrumb.tsx         |  7 ++--
 app/components/ErrorBoundary.tsx              |  1 -
 app/components/EventBoundary.tsx              |  7 ++--
 app/components/Guide.tsx                      |  5 ++-
 app/components/Labeled.tsx                    |  3 +-
 app/components/Layout.tsx                     |  5 ++-
 app/components/Modal.tsx                      |  5 ++-
 app/scenes/Settings/components/SettingRow.tsx | 25 +++++++++-----
 server/emails/components/Body.tsx             | 32 ++++++++---------
 server/emails/components/Button.tsx           | 34 +++++++++----------
 server/emails/components/EmailLayout.tsx      | 10 +++---
 server/emails/components/Heading.tsx          |  7 ++--
 17 files changed, 80 insertions(+), 86 deletions(-)

diff --git a/app/components/Analytics.ts b/app/components/Analytics.ts
index 1bf1e5d94..044c6718f 100644
--- a/app/components/Analytics.ts
+++ b/app/components/Analytics.ts
@@ -2,11 +2,7 @@
 import * as React from "react";
 import env from "~/env";
 
-type Props = {
-  children?: React.ReactNode;
-};
-
-export default class Analytics extends React.Component<Props> {
+export default class Analytics extends React.Component {
   componentDidMount() {
     if (!env.GOOGLE_ANALYTICS_ID) {
       return;
diff --git a/app/components/AuthenticatedLayout.tsx b/app/components/AuthenticatedLayout.tsx
index 11ad15b11..50d9c1c96 100644
--- a/app/components/AuthenticatedLayout.tsx
+++ b/app/components/AuthenticatedLayout.tsx
@@ -34,10 +34,7 @@ const CommandBar = React.lazy(
     )
 );
 
-type Props = WithTranslation &
-  RootStore & {
-    children?: React.ReactNode;
-  };
+type Props = WithTranslation & RootStore;
 
 @observer
 class AuthenticatedLayout extends React.Component<Props> {
diff --git a/app/components/Breadcrumb.tsx b/app/components/Breadcrumb.tsx
index 7ad14c482..b0c3d205e 100644
--- a/app/components/Breadcrumb.tsx
+++ b/app/components/Breadcrumb.tsx
@@ -9,11 +9,15 @@ import { MenuInternalLink } from "~/types";
 type Props = {
   items: MenuInternalLink[];
   max?: number;
-  children?: React.ReactNode;
   highlightFirstItem?: boolean;
 };
 
-function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
   const totalItems = items.length;
   const topLevelItems: MenuInternalLink[] = [...items];
   let overflowItems;
diff --git a/app/components/ButtonLink.tsx b/app/components/ButtonLink.tsx
index 4c14c1664..4d3463928 100644
--- a/app/components/ButtonLink.tsx
+++ b/app/components/ButtonLink.tsx
@@ -3,10 +3,9 @@ import styled from "styled-components";
 
 type Props = {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
 };
 
-const ButtonLink = React.forwardRef(
+const ButtonLink: React.FC<Props> = React.forwardRef(
   (props: Props, ref: React.Ref<HTMLButtonElement>) => {
     return <Button {...props} ref={ref} />;
   }
diff --git a/app/components/CenteredContent.tsx b/app/components/CenteredContent.tsx
index 2582d4a68..59e0973b5 100644
--- a/app/components/CenteredContent.tsx
+++ b/app/components/CenteredContent.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
 type Props = {
-  children?: React.ReactNode;
   withStickyHeader?: boolean;
 };
 
@@ -27,7 +26,7 @@ const Content = styled.div`
   `};
 `;
 
-const CenteredContent = ({ children, ...rest }: Props) => {
+const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
   return (
     <Container {...rest}>
       <Content>{children}</Content>
diff --git a/app/components/DocumentBreadcrumb.tsx b/app/components/DocumentBreadcrumb.tsx
index 46ac07848..167c6e1e5 100644
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -12,7 +12,6 @@ import { collectionUrl } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
-  children?: React.ReactNode;
   onlyText?: boolean;
 };
 
@@ -49,7 +48,11 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-const DocumentBreadcrumb = ({ document, children, onlyText }: Props) => {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}) => {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index 286711bc2..1698bed47 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -12,7 +12,6 @@ import Text from "~/components/Text";
 import env from "~/env";
 
 type Props = WithTranslation & {
-  children: React.ReactNode;
   reloadOnChunkMissing?: boolean;
 };
 
diff --git a/app/components/EventBoundary.tsx b/app/components/EventBoundary.tsx
index 41ae1878c..5eb0c6722 100644
--- a/app/components/EventBoundary.tsx
+++ b/app/components/EventBoundary.tsx
@@ -1,11 +1,10 @@
 import * as React from "react";
 
 type Props = {
-  children: React.ReactNode;
   className?: string;
 };
 
-export default function EventBoundary({ children, className }: Props) {
+const EventBoundary: React.FC<Props> = ({ children, className }) => {
   const handleClick = React.useCallback((event: React.SyntheticEvent) => {
     event.preventDefault();
     event.stopPropagation();
@@ -16,4 +15,6 @@ export default function EventBoundary({ children, className }: Props) {
       {children}
     </span>
   );
-}
+};
+
+export default EventBoundary;
diff --git a/app/components/Guide.tsx b/app/components/Guide.tsx
index 9d2727ab0..f945c1eaf 100644
--- a/app/components/Guide.tsx
+++ b/app/components/Guide.tsx
@@ -6,19 +6,18 @@ import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";
 
 type Props = {
-  children?: React.ReactNode;
   isOpen: boolean;
   title?: string;
   onRequestClose: () => void;
 };
 
-const Guide = ({
+const Guide: React.FC<Props> = ({
   children,
   isOpen,
   title = "Untitled",
   onRequestClose,
   ...rest
-}: Props) => {
+}) => {
   const dialog = useDialogState({
     animated: 250,
   });
diff --git a/app/components/Labeled.tsx b/app/components/Labeled.tsx
index 6c90c7fef..145957630 100644
--- a/app/components/Labeled.tsx
+++ b/app/components/Labeled.tsx
@@ -5,10 +5,9 @@ import Flex from "~/components/Flex";
 
 type Props = {
   label: React.ReactNode | string;
-  children?: React.ReactNode;
 };
 
-const Labeled = ({ label, children, ...props }: Props) => (
+const Labeled: React.FC<Props> = ({ label, children, ...props }) => (
   <Flex column {...props}>
     <Label>{label}</Label>
     {children}
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index a0f6303e2..fd54f542b 100644
--- a/app/components/Layout.tsx
+++ b/app/components/Layout.tsx
@@ -14,12 +14,11 @@ import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   title?: string;
-  children?: React.ReactNode;
   sidebar?: React.ReactNode;
   rightRail?: React.ReactNode;
 };
 
-function Layout({ title, children, sidebar, rightRail }: Props) {
+const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
 
@@ -65,7 +64,7 @@ function Layout({ title, children, sidebar, rightRail }: Props) {
       </Container>
     </Container>
   );
-}
+};
 
 const Container = styled(Flex)`
   background: ${(props) => props.theme.background};
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index d5903905a..3f81ecc16 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -15,18 +15,17 @@ import { fadeAndScaleIn } from "~/styles/animations";
 
 let openModals = 0;
 type Props = {
-  children?: React.ReactNode;
   isOpen: boolean;
   title?: React.ReactNode;
   onRequestClose: () => void;
 };
 
-const Modal = ({
+const Modal: React.FC<Props> = ({
   children,
   isOpen,
   title = "Untitled",
   onRequestClose,
-}: Props) => {
+}) => {
   const dialog = useDialogState({
     animated: 250,
   });
diff --git a/app/scenes/Settings/components/SettingRow.tsx b/app/scenes/Settings/components/SettingRow.tsx
index 79d29584e..04df5bf51 100644
--- a/app/scenes/Settings/components/SettingRow.tsx
+++ b/app/scenes/Settings/components/SettingRow.tsx
@@ -9,7 +9,6 @@ type Props = {
   label: React.ReactNode;
   description: React.ReactNode;
   name: string;
-  children: React.ReactNode;
   visible?: boolean;
   border?: boolean;
 };
@@ -53,20 +52,28 @@ const Label = styled(Text)`
   margin-bottom: 4px;
 `;
 
-export default function SettingRow(props: Props) {
-  if (props.visible === false) {
+const SettingRow: React.FC<Props> = ({
+  visible,
+  description,
+  name,
+  label,
+  border,
+  children,
+}) => {
+  if (visible === false) {
     return null;
   }
-
   return (
-    <Row gap={32} $border={props.border}>
+    <Row gap={32} $border={border}>
       <Column>
         <Label as="h3">
-          <label htmlFor={props.name}>{props.label}</label>
+          <label htmlFor={name}>{label}</label>
         </Label>
-        <Text type="secondary">{props.description}</Text>
+        <Text type="secondary">{description}</Text>
       </Column>
-      <Column>{props.children}</Column>
+      <Column>{children}</Column>
     </Row>
   );
-}
+};
+
+export default SettingRow;
diff --git a/server/emails/components/Body.tsx b/server/emails/components/Body.tsx
index b7771a20c..f65abf5cb 100644
--- a/server/emails/components/Body.tsx
+++ b/server/emails/components/Body.tsx
@@ -2,22 +2,18 @@ import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import EmptySpace from "./EmptySpace";
 
-type Props = {
-  children: React.ReactNode;
-};
+const Body: React.FC = ({ children }) => (
+  <Table width="100%">
+    <TBody>
+      <TR>
+        <TD>
+          <EmptySpace height={10} />
+          {children}
+          <EmptySpace height={40} />
+        </TD>
+      </TR>
+    </TBody>
+  </Table>
+);
 
-export default ({ children }: Props) => {
-  return (
-    <Table width="100%">
-      <TBody>
-        <TR>
-          <TD>
-            <EmptySpace height={10} />
-            {children}
-            <EmptySpace height={40} />
-          </TD>
-        </TR>
-      </TBody>
-    </Table>
-  );
-};
+export default Body;
diff --git a/server/emails/components/Button.tsx b/server/emails/components/Button.tsx
index 3bdc9ec15..605f886dd 100644
--- a/server/emails/components/Button.tsx
+++ b/server/emails/components/Button.tsx
@@ -2,23 +2,23 @@ import * as React from "react";
 
 type Props = {
   href: string;
-  children: React.ReactNode;
 };
 
-export default (props: Props) => {
-  const style = {
-    display: "inline-block",
-    padding: "10px 20px",
-    color: "#FFFFFF",
-    background: "#000000",
-    borderRadius: "4px",
-    fontWeight: 500,
-    textDecoration: "none",
-    cursor: "pointer",
-  };
-  return (
-    <a {...props} style={style}>
-      {props.children}
-    </a>
-  );
+const style: React.CSSProperties = {
+  display: "inline-block",
+  padding: "10px 20px",
+  color: "#FFFFFF",
+  background: "#000000",
+  borderRadius: "4px",
+  fontWeight: 500,
+  textDecoration: "none",
+  cursor: "pointer",
 };
+
+const Button: React.FC<Props> = (props) => (
+  <a {...props} style={style}>
+    {props.children}
+  </a>
+);
+
+export default Button;
diff --git a/server/emails/components/EmailLayout.tsx b/server/emails/components/EmailLayout.tsx
index 4c4ca9c93..bd21fb1fd 100644
--- a/server/emails/components/EmailLayout.tsx
+++ b/server/emails/components/EmailLayout.tsx
@@ -2,20 +2,18 @@ import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import theme from "@shared/theme";
 
-type Props = {
-  children: React.ReactNode;
-};
-
-export default (props: Props) => (
+const EmailLayout: React.FC = ({ children }) => (
   <Table width="550" padding="40">
     <TBody>
       <TR>
-        <TD align="left">{props.children}</TD>
+        <TD align="left">{children}</TD>
       </TR>
     </TBody>
   </Table>
 );
 
+export default EmailLayout;
+
 export const baseStyles = `
   #__bodyTable__ {
     font-family: ${theme.fontFamily};
diff --git a/server/emails/components/Heading.tsx b/server/emails/components/Heading.tsx
index c190a2e3a..a7e49af2a 100644
--- a/server/emails/components/Heading.tsx
+++ b/server/emails/components/Heading.tsx
@@ -4,12 +4,11 @@ const style = {
   fontWeight: 500,
   fontSize: "18px",
 };
-type Props = {
-  children: React.ReactNode;
-};
 
-export default ({ children }: Props) => (
+const Heading: React.FC = ({ children }) => (
   <p>
     <span style={style}>{children}</span>
   </p>
 );
+
+export default Heading;