From 20fc6bc41226d09b169f6ce9d99adb1a3f1966f4 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 14 May 2024 17:04:17 +0200
Subject: [PATCH] Remove usage of defaultProps in Search

---
 .changelog/1414.internal.md                        |  1 +
 .../components/Search/SearchSuggestionsButtons.tsx | 12 ++++++------
 src/app/components/Search/index.tsx                | 12 ++++++------
 .../pages/SearchResultsPage/ResultsGroupByType.tsx | 14 ++------------
 src/stories/ButtonsShowroom.stories.tsx            |  2 --
 5 files changed, 15 insertions(+), 26 deletions(-)
 create mode 100644 .changelog/1414.internal.md

diff --git a/.changelog/1414.internal.md b/.changelog/1414.internal.md
new file mode 100644
index 0000000000..877daeab07
--- /dev/null
+++ b/.changelog/1414.internal.md
@@ -0,0 +1 @@
+Remove usage of deprecated React API
diff --git a/src/app/components/Search/SearchSuggestionsButtons.tsx b/src/app/components/Search/SearchSuggestionsButtons.tsx
index 16684a0e26..c465c4deda 100644
--- a/src/app/components/Search/SearchSuggestionsButtons.tsx
+++ b/src/app/components/Search/SearchSuggestionsButtons.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import { Trans, useTranslation } from 'react-i18next'
 import { COLORS } from '../../../styles/theme/colors'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -12,7 +12,7 @@ import { searchSuggestionTerms } from './search-utils'
 import { OptionalBreak } from '../OptionalBreak'
 import { SearchScope } from '../../../types/searchScope'
 
-const PlainTextButton = styled(Button)({
+const StyledPlainTextButton = styled(Button)({
   fontSize: 'inherit',
   textTransform: 'none',
   paddingLeft: 0,
@@ -20,10 +20,10 @@ const PlainTextButton = styled(Button)({
   minWidth: 0,
   height: '1em',
 })
-PlainTextButton.defaultProps = {
-  variant: 'text',
-  color: 'inherit',
-}
+
+const PlainTextButton = (props: ButtonProps) => (
+  <StyledPlainTextButton variant="text" color="inherit" {...props} />
+)
 
 export const SuggestionButton = styled(PlainTextButton)({
   gap: '0.2ch', // Space after icon
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
index 897fc99695..7887208f69 100644
--- a/src/app/components/Search/index.tsx
+++ b/src/app/components/Search/index.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import TextField, { textFieldClasses } from '@mui/material/TextField'
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { styled } from '@mui/material/styles'
-import Button from '@mui/material/Button'
+import Button, { ButtonProps } from '@mui/material/Button'
 import Box from '@mui/material/Box'
 import SearchIcon from '@mui/icons-material/Search'
 import { useTranslation } from 'react-i18next'
@@ -70,7 +70,7 @@ const SearchForm = styled('form', {
 
 interface SearchButtonProps extends StyledBaseProps {}
 
-export const SearchButton = styled(Button, {
+export const StyledSearchButton = styled(Button, {
   shouldForwardProp: (prop: PropertyKey) =>
     !(['searchVariant'] as (keyof SearchButtonProps)[]).includes(prop as keyof SearchButtonProps),
 })<SearchButtonProps>(({ theme, searchVariant }) => ({
@@ -90,10 +90,10 @@ export const SearchButton = styled(Button, {
       }
     : {}),
 }))
-SearchButton.defaultProps = {
-  variant: 'contained',
-  color: 'primary',
-}
+
+export const SearchButton = (props: ButtonProps & SearchButtonProps) => (
+  <StyledSearchButton variant="contained" color="primary" {...props} />
+)
 
 export interface SearchProps {
   scope?: SearchScope
diff --git a/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx b/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx
index c4804d58ba..109993985a 100644
--- a/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx
+++ b/src/app/pages/SearchResultsPage/ResultsGroupByType.tsx
@@ -14,16 +14,6 @@ interface Props<T> {
   linkLabel: string
 }
 
-export const ViewResultButton = (() => {
-  const ViewResultButton = styled(Button)({})
-  ViewResultButton.defaultProps = {
-    variant: 'contained',
-    color: 'primary',
-  }
-  // Type cast is needed because styled type breaks `<ViewResultButton component={RouterLink}`
-  return ViewResultButton as typeof Button
-})()
-
 /**
  * Component for displaying search results of the same type, from the same network.
  *
@@ -51,9 +41,9 @@ export function ResultsGroupByType<T>({ title, results, resultComponent, link, l
         <div key={i}>
           {resultComponent(item)}
           <Box sx={{ display: 'flex', justifyContent: 'center', mt: 5 }}>
-            <ViewResultButton component={RouterLink} to={link(item)}>
+            <Button variant="contained" color="primary" component={RouterLink} to={link(item)}>
               {linkLabel}
-            </ViewResultButton>
+            </Button>
           </Box>
           {i < results.length - 1 && <Divider variant="card" />}
         </div>
diff --git a/src/stories/ButtonsShowroom.stories.tsx b/src/stories/ButtonsShowroom.stories.tsx
index b2b1244327..5b2f6461ff 100644
--- a/src/stories/ButtonsShowroom.stories.tsx
+++ b/src/stories/ButtonsShowroom.stories.tsx
@@ -3,7 +3,6 @@ import { SearchButton } from '../app/components/Search'
 import { SuggestionButton } from '../app/components/Search/SearchSuggestionsButtons'
 import { Select } from '../app/components/Select'
 import { ExploreBtn, ZoomOutBtn } from '../app/pages/HomePage/Graph/ParaTimeSelector'
-import { ViewResultButton } from '../app/pages/SearchResultsPage/ResultsGroupByType'
 import { LoadMoreButton } from '../app/components/LoadMoreButton'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import WidgetsIcon from '@mui/icons-material/Widgets'
@@ -17,7 +16,6 @@ const Template: StoryFn = () => {
   return (
     <div>
       <SearchButton searchVariant="button">SearchButton</SearchButton>
-      <ViewResultButton>ViewResultButton</ViewResultButton>
       <SuggestionButton>
         <WidgetsIcon sx={{ fontSize: '18px' }} /> SuggestionButton
       </SuggestionButton>