Merge pull request #1495 from skaut/default-props-arguments

Using arguments for default props
skaut · Jun 18, 2024 · 0509a29 · 0509a29
2 parents 85e156d + 32c4a48
commit 0509a29
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 31 deletions.
diff --git a/packages/frontend/.eslintrc.json b/packages/frontend/.eslintrc.json
@@ -93,7 +93,7 @@
     "react/no-unstable-nested-components": "error",
     "react/prefer-stateless-function": "error",
     "react/prefer-read-only-props": "error",
-    "react/require-default-props": "error",
+    "react/require-default-props": ["error", { "functions": "defaultArguments" }],
     "react/sort-default-props": "error",
     "react/sort-prop-types": "error",
     "react/style-prop-object": "error",

diff --git a/packages/frontend/src/components/ArticleBox.tsx b/packages/frontend/src/components/ArticleBox.tsx
@@ -7,14 +7,16 @@ import remarkGfm from "remark-gfm";
 import { ColoredTag } from "./ColoredTag";
 import { Article, H2, Paragraph } from "./Typography";
 
+const emptyArray: Array<string> = [];
+
 export const ArticleBox = ({
   title,
-  link,
-  subtitle,
-  subtitleLink,
-  subtitleDescription,
+  link = undefined,
+  subtitle = undefined,
+  subtitleLink = undefined,
+  subtitleDescription = undefined,
   description,
-  tags,
+  tags = emptyArray,
 }: {
   readonly title: string;
   readonly link?: string;
@@ -36,20 +38,12 @@ export const ArticleBox = ({
     <Paragraph>
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{description}</ReactMarkdown>
     </Paragraph>
-    {(tags ?? []).map((tag) => (
+    {tags.map((tag) => (
       <ColoredTag key={tag}>{tag}</ColoredTag>
     ))}
   </ThinArticle>
 );
 
-ArticleBox.defaultProps = {
-  link: undefined,
-  subtitle: undefined,
-  subtitleDescription: undefined,
-  subtitleLink: undefined,
-  tags: [],
-};
-
 const ProjectName = styled("p")`
   margin: 0 0 0.6em;
   * {

diff --git a/packages/frontend/src/components/ExtLink.tsx b/packages/frontend/src/components/ExtLink.tsx
@@ -12,15 +12,15 @@ export interface LinkProps {
 export const ExtLink = ({
   children,
   href,
-  title,
-  targetSelf,
-  className,
+  title = undefined,
+  targetSelf = false,
+  className = undefined,
 }: LinkProps): React.JSX.Element => (
   <a
     className={className}
     href={href}
     title={title}
-    {...(targetSelf !== true
+    {...(!targetSelf
       ? {
           target: "_blank",
           rel: "noreferrer noopener",
@@ -34,9 +34,3 @@ export const ExtLink = ({
     {children}
   </a>
 );
-
-ExtLink.defaultProps = {
-  className: undefined,
-  targetSelf: false,
-  title: undefined,
-};
diff --git a/packages/frontend/src/components/Issue.tsx b/packages/frontend/src/components/Issue.tsx
@@ -7,7 +7,7 @@ import { ArticleBox } from "./ArticleBox";
 
 export const Issue = ({
   issue,
-  hideTags,
+  hideTags = false,
 }: {
   readonly issue: ProjectIssueWithProjectInfo;
   readonly hideTags?: boolean;
@@ -18,11 +18,7 @@ export const Issue = ({
     subtitle={issue.project.name}
     subtitleDescription={issue.project["short-description"]}
     subtitleLink={getProjectLink(issue.project)}
-    tags={hideTags !== true ? issue.project.tags : []}
+    tags={!hideTags ? issue.project.tags : []}
     title={issue.title}
   />
 );
-
-Issue.defaultProps = {
-  hideTags: false,
-};