fix: introduce useDisplayOverrideCode (#447)

alanpoulain · web-flow · commit 142d9c13f1d5 · 2022-04-15T17:34:13.000+02:00
This hook is used to avoid displaying the code message if the guesser component is rendered multiple times.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.2
+
+* Introduce `useDisplayOverrideCode` hook to avoid displaying the code message if the guesser component is rendered multiple times
+
 ## 3.0.1
 
 * Make sure columns can be sorted when there is an order filter in `ListGuesser`
diff --git a/src/AdminGuesser.tsx b/src/AdminGuesser.tsx
@@ -19,10 +19,11 @@ import IntrospectionContext from './IntrospectionContext';
 import ResourceGuesser from './ResourceGuesser';
 import SchemaAnalyzerContext from './SchemaAnalyzerContext';
 import { Error as DefaultError, Layout, LoginPage, lightTheme } from './layout';
-import type { ApiPlatformAdminDataProvider, SchemaAnalyzer } from './types';
 import getRoutesAndResourcesFromNodes, {
   isSingleChildFunction,
 } from './getRoutesAndResourcesFromNodes';
+import useDisplayOverrideCode from './useDisplayOverrideCode';
+import type { ApiPlatformAdminDataProvider, SchemaAnalyzer } from './types';
 
 export interface AdminGuesserProps extends AdminProps {
   dataProvider: ApiPlatformAdminDataProvider;
@@ -42,17 +43,15 @@ interface AdminResourcesGuesserProps extends Omit<AdminProps, 'loading'> {
   resources: Resource[];
 }
 
-const displayOverrideCode = (resources: Resource[]) => {
-  if (process.env.NODE_ENV === 'production') return;
-
+const getOverrideCode = (resources: Resource[]) => {
   let code =
     'If you want to override at least one resource, paste this content in the <AdminGuesser> component of your app:\n\n';
 
   resources.forEach((r) => {
     code += `<ResourceGuesser name={"${r.name}"} />\n`;
   });
-  // eslint-disable-next-line no-console
-  console.info(code);
+
+  return code;
 };
 
 /**
@@ -71,6 +70,8 @@ export const AdminResourcesGuesser = ({
   loading,
   ...rest
 }: AdminResourcesGuesserProps) => {
+  const displayOverrideCode = useDisplayOverrideCode();
+
   if (loading) {
     return <LoadingPage />;
   }
@@ -92,7 +93,7 @@ export const AdminResourcesGuesser = ({
         <ResourceGuesser name={r.name} key={r.name} />
       )),
     ];
-    displayOverrideCode(guessResources);
+    displayOverrideCode(getOverrideCode(guessResources));
   }
 
   return (
diff --git a/src/CreateGuesser.tsx b/src/CreateGuesser.tsx
@@ -14,14 +14,13 @@ import type { Field, Resource } from '@api-platform/api-doc-parser';
 
 import InputGuesser from './InputGuesser';
 import Introspecter from './Introspecter';
+import useDisplayOverrideCode from './useDisplayOverrideCode';
 import type {
   CreateGuesserProps,
   IntrospectedCreateGuesserProps,
 } from './types';
 
-const displayOverrideCode = (schema: Resource, fields: Field[]) => {
-  if (process.env.NODE_ENV === 'production') return;
-
+const getOverrideCode = (schema: Resource, fields: Field[]) => {
   let code =
     'If you want to override at least one input, paste this content in the <CreateGuesser> component of your resource:\n\n';
 
@@ -36,8 +35,8 @@ const displayOverrideCode = (schema: Resource, fields: Field[]) => {
   code += `\n`;
   code += `And don't forget update your <ResourceGuesser> component:\n`;
   code += `<ResourceGuesser name={"${schema.name}"} create={${schema.title}Create} />`;
-  // eslint-disable-next-line no-console
-  console.info(code);
+
+  return code;
 };
 
 export const IntrospectedCreateGuesser = ({
@@ -62,12 +61,14 @@ export const IntrospectedCreateGuesser = ({
   const notify = useNotify();
   const redirect = useRedirect();
 
+  const displayOverrideCode = useDisplayOverrideCode();
+
   let inputChildren = React.Children.toArray(children);
   if (inputChildren.length === 0) {
     inputChildren = writableFields.map((field) => (
       <InputGuesser key={field.name} source={field.name} />
     ));
-    displayOverrideCode(schema, writableFields);
+    displayOverrideCode(getOverrideCode(schema, writableFields));
   }
 
   const hasFileField = inputChildren.some(
diff --git a/src/EditGuesser.tsx b/src/EditGuesser.tsx
@@ -16,11 +16,10 @@ import type { Field, Resource } from '@api-platform/api-doc-parser';
 import InputGuesser from './InputGuesser';
 import Introspecter from './Introspecter';
 import useMercureSubscription from './useMercureSubscription';
+import useDisplayOverrideCode from './useDisplayOverrideCode';
 import type { EditGuesserProps, IntrospectedEditGuesserProps } from './types';
 
-const displayOverrideCode = (schema: Resource, fields: Field[]) => {
-  if (process.env.NODE_ENV === 'production') return;
-
+const getOverrideCode = (schema: Resource, fields: Field[]) => {
   let code =
     'If you want to override at least one input, paste this content in the <EditGuesser> component of your resource:\n\n';
 
@@ -35,8 +34,8 @@ const displayOverrideCode = (schema: Resource, fields: Field[]) => {
   code += `\n`;
   code += `And don't forget update your <ResourceGuesser> component:\n`;
   code += `<ResourceGuesser name={"${schema.name}"} edit={${schema.title}Edit} />`;
-  // eslint-disable-next-line no-console
-  console.info(code);
+
+  return code;
 };
 
 export const IntrospectedEditGuesser = ({
@@ -66,12 +65,14 @@ export const IntrospectedEditGuesser = ({
   const notify = useNotify();
   const redirect = useRedirect();
 
+  const displayOverrideCode = useDisplayOverrideCode();
+
   let inputChildren = React.Children.toArray(children);
   if (inputChildren.length === 0) {
     inputChildren = writableFields.map((field) => (
       <InputGuesser key={field.name} source={field.name} />
     ));
-    displayOverrideCode(schema, writableFields);
+    displayOverrideCode(getOverrideCode(schema, writableFields));
   }
 
   const hasFileField = inputChildren.some(
diff --git a/src/ListGuesser.tsx b/src/ListGuesser.tsx
@@ -16,15 +16,14 @@ import FieldGuesser from './FieldGuesser';
 import FilterGuesser from './FilterGuesser';
 import Introspecter from './Introspecter';
 import useMercureSubscription from './useMercureSubscription';
+import useDisplayOverrideCode from './useDisplayOverrideCode';
 import type {
   ApiPlatformAdminRecord,
   IntrospectedListGuesserProps,
   ListGuesserProps,
 } from './types';
 
-const displayOverrideCode = (schema: Resource, fields: Field[]) => {
-  if (process.env.NODE_ENV === 'production') return;
-
+const getOverrideCode = (schema: Resource, fields: Field[]) => {
   let code =
     'If you want to override at least one field, paste this content in the <ListGuesser> component of your resource:\n\n';
 
@@ -39,8 +38,8 @@ const displayOverrideCode = (schema: Resource, fields: Field[]) => {
   code += `\n`;
   code += `And don't forget update your <ResourceGuesser> component:\n`;
   code += `<ResourceGuesser name={"${schema.name}"} list={${schema.title}List} />`;
-  // eslint-disable-next-line no-console
-  console.info(code);
+
+  return code;
 };
 
 export const DatagridBodyWithMercure = (props: DatagridBodyProps) => {
@@ -77,9 +76,7 @@ export const IntrospectedListGuesser = ({
   ...props
 }: IntrospectedListGuesserProps) => {
   const { hasShow, hasEdit } = useResourceDefinition(props);
-  const [orderParameters, setOrderParameters] = useState<
-    string[] | undefined
-  >();
+  const [orderParameters, setOrderParameters] = useState<string[]>([]);
 
   useEffect(() => {
     if (schema) {
@@ -89,10 +86,12 @@ export const IntrospectedListGuesser = ({
     }
   }, [schema, schemaAnalyzer]);
 
+  const displayOverrideCode = useDisplayOverrideCode();
+
   let fieldChildren = children;
   if (!fieldChildren) {
     fieldChildren = readableFields.map((field) => {
-      const orderField = (orderParameters ?? []).find(
+      const orderField = orderParameters.find(
         (orderParameter) => orderParameter.split('.')[0] === field.name,
       );
 
@@ -106,9 +105,8 @@ export const IntrospectedListGuesser = ({
         />
       );
     });
-    if (orderParameters !== undefined) {
-      displayOverrideCode(schema, readableFields);
-    }
+
+    displayOverrideCode(getOverrideCode(schema, readableFields));
   }
 
   return (
diff --git a/src/ShowGuesser.tsx b/src/ShowGuesser.tsx
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import { Show, SimpleShowLayout, useResourceContext } from 'react-admin';
 import { useParams } from 'react-router-dom';
 import type { Field, Resource } from '@api-platform/api-doc-parser';
+
 import FieldGuesser from './FieldGuesser';
 import Introspecter from './Introspecter';
 import useMercureSubscription from './useMercureSubscription';
+import useDisplayOverrideCode from './useDisplayOverrideCode';
 import type { IntrospectedShowGuesserProps, ShowGuesserProps } from './types';
 
-const displayOverrideCode = (schema: Resource, fields: Field[]) => {
-  if (process.env.NODE_ENV === 'production') return;
-
+const getOverrideCode = (schema: Resource, fields: Field[]) => {
   let code =
     'If you want to override at least one field, paste this content in the <ShowGuesser> component of your resource:\n\n';
 
@@ -25,8 +25,8 @@ const displayOverrideCode = (schema: Resource, fields: Field[]) => {
   code += `\n`;
   code += `And don't forget update your <ResourceGuesser> component:\n`;
   code += `<ResourceGuesser name={"${schema.name}"} show={${schema.title}Show} />`;
-  // eslint-disable-next-line no-console
-  console.info(code);
+
+  return code;
 };
 
 export const IntrospectedShowGuesser = ({
@@ -42,12 +42,14 @@ export const IntrospectedShowGuesser = ({
   const id = decodeURIComponent(routeId ?? '');
   useMercureSubscription(props.resource, id);
 
+  const displayOverrideCode = useDisplayOverrideCode();
+
   let fieldChildren = children;
   if (!fieldChildren) {
     fieldChildren = readableFields.map((field) => (
       <FieldGuesser key={field.name} source={field.name} />
     ));
-    displayOverrideCode(schema, readableFields);
+    displayOverrideCode(getOverrideCode(schema, readableFields));
   }
 
   return (
diff --git a/src/useDisplayOverrideCode.ts b/src/useDisplayOverrideCode.ts
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+const useDisplayOverrideCode = () => {
+  const [displayed, setDisplayed] = useState(false);
+
+  return (code: string) => {
+    if (process.env.NODE_ENV === 'production') return;
+
+    if (!displayed) {
+      // eslint-disable-next-line no-console
+      console.info(code);
+      setDisplayed(true);
+    }
+  };
+};
+
+export default useDisplayOverrideCode;
