From b9a53a6fde2bce8db773123301b89465e3fc6b12 Mon Sep 17 00:00:00 2001 From: Timur Carpeev Date: Wed, 13 Jul 2022 11:13:58 +0200 Subject: [PATCH] Add rules of hooks (#2131) * Fix conditional hooks * Add rules of hooks lint * Install dependencies with node 14 --- .eslintrc.json | 5 ++++- package-lock.json | 12 ++++++------ package.json | 1 + src/apps/views/CustomAppDetails/CustomAppDetails.tsx | 8 ++++---- src/categories/views/CategoryDetails.tsx | 8 ++++---- src/collections/views/CollectionDetails.tsx | 7 ++++--- .../GiftCardEnableDisableSection.tsx | 8 ++++---- .../OrderFulfillStockExceededDialogLine.tsx | 8 ++++---- src/products/views/ProductVariantCreate.tsx | 8 ++++---- 9 files changed, 35 insertions(+), 30 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index e2a18d0e2..66dbfcc26 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -14,7 +14,8 @@ "simple-import-sort", "cypress", "chai-friendly", - "formatjs" + "formatjs", + "react-hooks" ], "rules": { "@typescript-eslint/adjacent-overload-signatures": "error", @@ -171,6 +172,8 @@ "prefer-object-spread": "error", "quote-props": "off", "radix": "error", + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", "simple-import-sort/sort": ["error"], "sort-imports": "off", // imports are handled by simple-import-sort/sort "sort-keys": "off", diff --git a/package-lock.json b/package-lock.json index b067e8e0a..d6b5fb163 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6228,12 +6228,6 @@ "@svgr/plugin-jsx": "^4.3.3", "camelcase": "^5.3.1", "cosmiconfig": "^5.2.1" - }, - "dependencies": { - "uuid": { - "version": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" - } } }, "@svgr/hast-util-to-babel-ast": { @@ -14715,6 +14709,12 @@ "integrity": "sha512-J9I5PKCOJretVuiZRGvPQxCbllxGAV/viI20JO3LYblAodofBxyMnZAJ+WGeClHgANnSJberTNoFWWjrWKBuXQ==", "dev": true }, + "eslint-plugin-react-hooks": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", + "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", + "dev": true + }, "eslint-plugin-simple-import-sort": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-5.0.3.tgz", diff --git a/package.json b/package.json index a4503703a..544f11724 100644 --- a/package.json +++ b/package.json @@ -163,6 +163,7 @@ "eslint-plugin-import": "^2.19.1", "eslint-plugin-local-rules": "^0.1.1", "eslint-plugin-prefer-arrow": "^1.1.6", + "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^5.0.3", "file-loader": "^5.0.2", "fork-ts-checker-webpack-plugin": "^3.1.1", diff --git a/src/apps/views/CustomAppDetails/CustomAppDetails.tsx b/src/apps/views/CustomAppDetails/CustomAppDetails.tsx index 358ebf05e..645929d38 100644 --- a/src/apps/views/CustomAppDetails/CustomAppDetails.tsx +++ b/src/apps/views/CustomAppDetails/CustomAppDetails.tsx @@ -145,10 +145,6 @@ export const CustomAppDetails: React.FC = ({ }; const customApp = data?.app; - if (customApp === null) { - return ; - } - const onTokenCreate = (data: AppTokenCreateMutation) => { if (data?.appTokenCreate?.errors.length === 0) { refetch(); @@ -216,6 +212,10 @@ export const CustomAppDetails: React.FC = ({ const currentToken = data?.app?.tokens?.find(token => token.id === params.id); + if (customApp === null) { + return ; + } + return ( <> diff --git a/src/categories/views/CategoryDetails.tsx b/src/categories/views/CategoryDetails.tsx index 44a9f06ea..a27b21427 100644 --- a/src/categories/views/CategoryDetails.tsx +++ b/src/categories/views/CategoryDetails.tsx @@ -90,10 +90,6 @@ export const CategoryDetails: React.FC = ({ const category = data?.category; - if (category === null) { - return navigate(categoryListUrl())} />; - } - const handleCategoryDelete = (data: CategoryDeleteMutation) => { if (data.categoryDelete.errors.length === 0) { notify({ @@ -208,6 +204,10 @@ export const CategoryDetails: React.FC = ({ variables => updatePrivateMetadata({ variables }), ); + if (category === null) { + return navigate(categoryListUrl())} />; + } + return ( data.category.name)} /> diff --git a/src/collections/views/CollectionDetails.tsx b/src/collections/views/CollectionDetails.tsx index c18716537..279430a3b 100644 --- a/src/collections/views/CollectionDetails.tsx +++ b/src/collections/views/CollectionDetails.tsx @@ -173,9 +173,6 @@ export const CollectionDetails: React.FC = ({ }); const collection = data?.collection; - if (collection === null) { - return ; - } const allChannels = createCollectionChannels( availableChannels, )?.sort((channel, nextChannel) => @@ -261,6 +258,10 @@ export const CollectionDetails: React.FC = ({ paginationState, ); + if (collection === null) { + return ; + } + return ( diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx index 069a3d718..a49254ce9 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx +++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardEnableDisableSection.tsx @@ -14,10 +14,6 @@ const GiftCardEnableDisableSection: React.FC = () => { giftCard: { id, isActive, isExpired }, } = useGiftCardDetails(); - if (isExpired) { - return null; - } - const { giftCardActivate, giftCardDeactivate, @@ -35,6 +31,10 @@ const GiftCardEnableDisableSection: React.FC = () => { ? buttonMessages.disableLabel : buttonMessages.enableLabel; + if (isExpired) { + return null; + } + return ( = props => { const { line: genericLine, warehouseId, formsetData } = props; - if (!genericLine) { - return null; - } - const line = "orderLine" in genericLine ? genericLine.orderLine : genericLine; const classes = useStyles(props); @@ -31,6 +27,10 @@ const OrderFulfillStockExceededDialogLine: React.FC stock.warehouse.id === warehouseId, ); + if (!genericLine) { + return null; + } + return ( = ({ const [updateMetadata] = useUpdateMetadataMutation({}); const [updatePrivateMetadata] = useUpdatePrivateMetadataMutation({}); - if (product === null) { - return navigate(productListUrl())} />; - } - const [ reorderProductVariants, reorderProductVariantsOpts, @@ -214,6 +210,10 @@ export const ProductVariant: React.FC = ({ variantCreateResult.loading || reorderProductVariantsOpts.loading; + if (product === null) { + return navigate(productListUrl())} />; + } + return ( <>