Add rules of hooks (#2131)

* Fix conditional hooks

* Add rules of hooks lint

* Install dependencies with node 14

.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",

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",

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",

src/apps/views/CustomAppDetails/CustomAppDetails.tsx

@@ -145,10 +145,6 @@ export const CustomAppDetails: React.FC<OrderListProps> = ({
   };
   const customApp = data?.app;
 
-  if (customApp === null) {
-    return <NotFoundPage backHref={appsListUrl()} />;
-  }
-
   const onTokenCreate = (data: AppTokenCreateMutation) => {
     if (data?.appTokenCreate?.errors.length === 0) {
       refetch();
@@ -216,6 +212,10 @@ export const CustomAppDetails: React.FC<OrderListProps> = ({
 
   const currentToken = data?.app?.tokens?.find(token => token.id === params.id);
 
+  if (customApp === null) {
+    return <NotFoundPage backHref={appsListUrl()} />;
+  }
+
   return (
     <>
       <WindowTitle title={getStringOrPlaceholder(customApp?.name)} />

src/categories/views/CategoryDetails.tsx

@@ -90,10 +90,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
 
   const category = data?.category;
 
-  if (category === null) {
-    return <NotFoundPage onBack={() => navigate(categoryListUrl())} />;
-  }
-
   const handleCategoryDelete = (data: CategoryDeleteMutation) => {
     if (data.categoryDelete.errors.length === 0) {
       notify({
@@ -208,6 +204,10 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
     variables => updatePrivateMetadata({ variables }),
   );
 
+  if (category === null) {
+    return <NotFoundPage onBack={() => navigate(categoryListUrl())} />;
+  }
+
   return (
     <PaginatorContext.Provider value={{ ...pageInfo, ...paginationFunctions }}>
       <WindowTitle title={maybe(() => data.category.name)} />

src/collections/views/CollectionDetails.tsx

@@ -173,9 +173,6 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
   });
 
   const collection = data?.collection;
-  if (collection === null) {
-    return <NotFoundPage backHref={collectionListUrl()} />;
-  }
   const allChannels = createCollectionChannels(
     availableChannels,
   )?.sort((channel, nextChannel) =>
@@ -261,6 +258,10 @@ export const CollectionDetails: React.FC<CollectionDetailsProps> = ({
     paginationState,
   );
 
+  if (collection === null) {
+    return <NotFoundPage backHref={collectionListUrl()} />;
+  }
+
   return (
     <PaginatorContext.Provider value={{ ...pageInfo, ...paginationValues }}>
       <WindowTitle title={data?.collection?.name} />

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 (
     <ConfirmButton
       data-test-id="enable-button"

src/orders/components/OrderFulfillStockExceededDialogLine/OrderFulfillStockExceededDialogLine.tsx

@@ -20,10 +20,6 @@ export interface OrderFulfillStockExceededDialogLineProps {
 const OrderFulfillStockExceededDialogLine: React.FC<OrderFulfillStockExceededDialogLineProps> = 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<OrderFulfillStockExceededDia
     stock => stock.warehouse.id === warehouseId,
   );
 
+  if (!genericLine) {
+    return null;
+  }
+
   return (
     <TableRow key={line?.id}>
       <TableCellAvatar

src/products/views/ProductVariantCreate.tsx

@@ -90,10 +90,6 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
   const [updateMetadata] = useUpdateMetadataMutation({});
   const [updatePrivateMetadata] = useUpdatePrivateMetadataMutation({});
 
-  if (product === null) {
-    return <NotFoundPage onBack={() => navigate(productListUrl())} />;
-  }
-
   const [
     reorderProductVariants,
     reorderProductVariantsOpts,
@@ -214,6 +210,10 @@ export const ProductVariant: React.FC<ProductVariantCreateProps> = ({
     variantCreateResult.loading ||
     reorderProductVariantsOpts.loading;
 
+  if (product === null) {
+    return <NotFoundPage onBack={() => navigate(productListUrl())} />;
+  }
+
   return (
     <>
       <WindowTitle