From 25afd02ba5861c21bd1faf03ee2adc514994656a Mon Sep 17 00:00:00 2001 From: Tom Hacohen Date: Thu, 24 Oct 2019 11:20:43 +0300 Subject: [PATCH] Remove recompose dep and use React.memo instead. --- package.json | 2 -- src/Pim/index.tsx | 3 +-- src/components/AddressBook.tsx | 3 +-- src/components/TaskList.tsx | 3 +-- src/widgets/Avatar.tsx | 3 +-- src/widgets/ConfirmationDialog.tsx | 4 +--- src/widgets/ExternalLink.tsx | 3 +-- src/widgets/List.tsx | 11 +++++------ src/widgets/PrettyError.tsx | 3 +-- src/widgets/withSpin.tsx | 3 +-- yarn.lock | 9 +-------- 11 files changed, 14 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 1dac18e..451295c 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-scripts": "3.2.0", - "recompose": "^0.30.0", "redux": "^4.0.1", "redux-actions": "^2.6.4", "redux-logger": "^3.0.6", @@ -46,7 +45,6 @@ "@types/react-redux": "^5.0.14", "@types/react-router": "^4.4.4", "@types/react-router-dom": "^4.3.1", - "@types/recompose": "^0.27.0", "@types/redux": "^3.6.0", "@types/redux-actions": "^2.3.2", "@types/redux-logger": "^3.0.5", diff --git a/src/Pim/index.tsx b/src/Pim/index.tsx index 14f7c83..220356f 100644 --- a/src/Pim/index.tsx +++ b/src/Pim/index.tsx @@ -12,7 +12,6 @@ import { Action } from 'redux-actions'; import * as EteSync from '../api/EteSync'; import { createSelector } from 'reselect'; -import { pure } from 'recompose'; import { History } from 'history'; @@ -78,7 +77,7 @@ const itemsSelector = createSelector( } ); -const ItemChangeLog = pure((props: any) => { +const ItemChangeLog = React.memo((props: any) => { const { syncInfo, paramItemUid, diff --git a/src/components/AddressBook.tsx b/src/components/AddressBook.tsx index 5514b00..e8811b1 100644 --- a/src/components/AddressBook.tsx +++ b/src/components/AddressBook.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { pure } from 'recompose'; import { createSelector } from 'reselect'; import * as colors from '@material-ui/core/colors'; @@ -39,7 +38,7 @@ function getContactColor(contact: ContactType) { return colorOptions[sum % colorOptions.length]; } -const AddressBookItem = pure((_props: any) => { +const AddressBookItem = React.memo((_props: any) => { const { entry, onClick, diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx index 1b6e33b..80b4f3d 100644 --- a/src/components/TaskList.tsx +++ b/src/components/TaskList.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; -import { pure } from 'recompose'; import { createSelector } from 'reselect'; import { List, ListItem } from '../widgets/List'; import { TaskType } from '../pim-types'; -const TaskListItem = pure((_props: any) => { +const TaskListItem = React.memo((_props: any) => { const { entry, onClick, diff --git a/src/widgets/Avatar.tsx b/src/widgets/Avatar.tsx index bec1d2c..ad2aa0f 100644 --- a/src/widgets/Avatar.tsx +++ b/src/widgets/Avatar.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { pure } from 'recompose'; -export const Avatar = pure((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => { +export const Avatar = React.memo((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => { const size = (props.size) ? props.size : 40; return ( diff --git a/src/widgets/ConfirmationDialog.tsx b/src/widgets/ConfirmationDialog.tsx index e49412d..13120c7 100644 --- a/src/widgets/ConfirmationDialog.tsx +++ b/src/widgets/ConfirmationDialog.tsx @@ -6,9 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent'; import DialogActions from '@material-ui/core/DialogActions'; import Button from '@material-ui/core/Button'; -import { pure } from 'recompose'; - -export default pure((_props: any) => { +export default React.memo((_props: any) => { const { title, children, diff --git a/src/widgets/ExternalLink.tsx b/src/widgets/ExternalLink.tsx index 046adaa..18ec1bf 100644 --- a/src/widgets/ExternalLink.tsx +++ b/src/widgets/ExternalLink.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { pure } from 'recompose'; -export const ExternalLink = pure(({children, ...props}: any) => ( +export const ExternalLink = React.memo(({children, ...props}: any) => ( {children} diff --git a/src/widgets/List.tsx b/src/widgets/List.tsx index d6db912..696a915 100644 --- a/src/widgets/List.tsx +++ b/src/widgets/List.tsx @@ -1,17 +1,16 @@ import * as React from 'react'; -import { pure } from 'recompose'; import ExternalLink from './ExternalLink'; import './List.css'; -export const List = pure((props: { children: React.ReactNode[] | React.ReactNode }) => ( +export const List = React.memo((props: { children: React.ReactNode[] | React.ReactNode }) => ( )); -export const ListItemRaw = pure((_props: any) => { +export const ListItemRaw = React.memo((_props: any) => { const { href, children, @@ -53,7 +52,7 @@ export const ListItemRaw = pure((_props: any) => { ); }); -export const ListSubheader = pure((props: any) => ( +export const ListSubheader = React.memo((props: any) => (
  • (
    • )); -export const ListDivider = pure((_props: any) => { +export const ListDivider = React.memo((_props: any) => { const { inset, ...props @@ -74,7 +73,7 @@ export const ListDivider = pure((_props: any) => { ); }); -export const ListItem = pure((_props: any) => { +export const ListItem = React.memo((_props: any) => { const { leftIcon, rightIcon, diff --git a/src/widgets/PrettyError.tsx b/src/widgets/PrettyError.tsx index c62ccc0..d095ce1 100644 --- a/src/widgets/PrettyError.tsx +++ b/src/widgets/PrettyError.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { pure } from 'recompose'; -export const PrettyError = pure((props: any) => ( +export const PrettyError = React.memo((props: any) => (

    Something went wrong!

    diff --git a/src/widgets/withSpin.tsx b/src/widgets/withSpin.tsx
index 65a2037..73dbfdc 100644
--- a/src/widgets/withSpin.tsx
+++ b/src/widgets/withSpin.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import './withSpin.css';
 
 const withSpin = (Component: any) => {
-  return pure((_props: any) => {
+  return React.memo((_props: any) => {
     const {
       spin,
       ...props
diff --git a/yarn.lock b/yarn.lock
index 35aed8e..ac7fbf2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1450,13 +1450,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/recompose@^0.27.0":
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.27.1.tgz#eafe5a80b6bdce2108c025bbf19d030136aad894"
-  integrity sha512-5bT3OMz9HHHwvRSMQaDGN8tWbpCxQfsZXlcy5HLexEEqkSJ9PBZfVMA6HANDbshOvn4kNS75SjQSJLJv5LJHxw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/redux-actions@^2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.3.2.tgz#a141515f280d19fd53be7e8a9994985847423540"
@@ -8871,7 +8864,7 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
-"recompose@0.28.0 - 0.30.0", recompose@^0.30.0:
+"recompose@0.28.0 - 0.30.0":
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
   integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==