From 817dd55cefabc832abc86cedc33d365e33733b34 Mon Sep 17 00:00:00 2001 From: Lukas Boll Date: Mon, 15 Apr 2024 15:54:40 +0200 Subject: [PATCH] apply suggestions from code review 2 --- content/docs/tutorial/dynamic-enum.mdx | 16 ++++++++-- src/components/common/{api.ts => api.js} | 6 ++-- .../{Country.tsx => CountryControl.js} | 28 ++++++++--------- .../common/country/CountryControl.tsx | 18 ----------- ...ntrolTester.ts => countryControlTester.js} | 0 .../region/{Region.tsx => RegionControl.js} | 31 +++++++++---------- .../common/region/RegionControl.tsx | 18 ----------- ...ontrolTester.ts => regionControlTester.js} | 0 8 files changed, 45 insertions(+), 72 deletions(-) rename src/components/common/{api.ts => api.js} (93%) rename src/components/common/country/{Country.tsx => CountryControl.js} (56%) delete mode 100644 src/components/common/country/CountryControl.tsx rename src/components/common/country/{countryControlTester.ts => countryControlTester.js} (100%) rename src/components/common/region/{Region.tsx => RegionControl.js} (56%) delete mode 100644 src/components/common/region/RegionControl.tsx rename src/components/common/region/{regionControlTester.ts => regionControlTester.js} (100%) diff --git a/content/docs/tutorial/dynamic-enum.mdx b/content/docs/tutorial/dynamic-enum.mdx index 88b3f2a5..a343754f 100644 --- a/content/docs/tutorial/dynamic-enum.mdx +++ b/content/docs/tutorial/dynamic-enum.mdx @@ -68,7 +68,7 @@ const url = schema['x-url']; #### Initializing the React Context Now that we have access to the API URL, we can use React Context to make this data available across our renderers. -React Context allows you to share data deep in the component tree to access data without needing to pass additional properties through the component hierarchy. +[React Context](https://react.dev/learn/passing-data-deeply-with-context) allows you to share data deep in the component tree to access data without needing to pass additional properties through the component hierarchy. To set up the React Context for your API service, create it in your application as follows: ```js @@ -127,7 +127,7 @@ type JsonSchemaWithDependenciesAndEndpoint = JsonSchema & { dependent: string[]; endpoint: string; }; -export const Country = ( +const CountryControl = ( props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps ) => { ... @@ -193,6 +193,11 @@ const CountryControl = ( /> ); }; + +export default withJsonFormsEnumProps( + withTranslateProps(React.memo(CountryControl)), + false +); ``` Now all that´s left to do is to [create a tester](./custom-renderers#2-create-a-tester) and [register](./custom-renderers#3-register-the-renderer) the new custom renderer in our application. @@ -214,7 +219,7 @@ type JsonSchemaWithDependenciesAndEndpont = JsonSchema & { endpoint: string; }; -export const Region = ( +const RegionControl = ( props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps ) => { const schema = props.schema as JsonSchemaWithDependenciesAndEndpont; @@ -254,5 +259,10 @@ export const Region = ( /> ); }; + +export default withJsonFormsEnumProps( + withTranslateProps(React.memo(RegionControl)), + false +); ``` Again we need to create a [create a tester](./custom-renderers#2-create-a-tester) and [register](./custom-renderers#3-register-the-renderer) the new custom renderer. \ No newline at end of file diff --git a/src/components/common/api.ts b/src/components/common/api.js similarity index 93% rename from src/components/common/api.ts rename to src/components/common/api.js index a32746ef..05667214 100644 --- a/src/components/common/api.ts +++ b/src/components/common/api.js @@ -1,11 +1,11 @@ export class API { - private url: string; + url; - constructor(url: string) { + constructor(url) { this.url = url; } - async get(endpoint: string): Promise { + async get(endpoint){ switch (this.url + '/' + endpoint) { case 'www.api.com/regions/Germany': return germanStates; diff --git a/src/components/common/country/Country.tsx b/src/components/common/country/CountryControl.js similarity index 56% rename from src/components/common/country/Country.tsx rename to src/components/common/country/CountryControl.js index 478ca09e..0eb87d7f 100644 --- a/src/components/common/country/Country.tsx +++ b/src/components/common/country/CountryControl.js @@ -1,28 +1,23 @@ import React, { useEffect } from 'react'; import { useState } from 'react'; -import { ControlProps, JsonSchema, OwnPropsOfEnum } from '@jsonforms/core'; -import { TranslateProps } from '@jsonforms/react'; +import { withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react'; import { CircularProgress } from '@mui/material'; -import { Unwrapped, WithOptionLabel } from '@jsonforms/material-renderers'; +import { Unwrapped } from '@jsonforms/material-renderers'; import { APIContext } from '../../docs/tutorials/dynamic-enum'; const { MaterialEnumControl } = Unwrapped; -type JsonSchemaWithDependenciesAndEndpoint = JsonSchema & { - dependent: string[]; - endpoint: string; -}; -export const Country = ( - props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps +const CountryControl = ( + props ) => { const { handleChange } = props; - const [options, setOptions] = useState([]); + const [options, setOptions] = useState([]); const api = React.useContext(APIContext); - const schema = props.schema as JsonSchemaWithDependenciesAndEndpoint; + const schema = props.schema ; const endponit = schema.endpoint; - const dependent: string[] = schema.dependent ? schema.dependent : []; + const dependent = schema.dependent ? schema.dependent : []; useEffect(() => { setOptions([]); @@ -38,7 +33,7 @@ export const Country = ( return ( { + handleChange={(path, value) => { handleChange(path, value); dependent.forEach((path) => { handleChange(path, undefined); @@ -49,4 +44,9 @@ export const Country = ( })} /> ); -}; \ No newline at end of file +}; + +export default withJsonFormsEnumProps( + withTranslateProps(React.memo(CountryControl)), + false +); \ No newline at end of file diff --git a/src/components/common/country/CountryControl.tsx b/src/components/common/country/CountryControl.tsx deleted file mode 100644 index 306005ba..00000000 --- a/src/components/common/country/CountryControl.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { - TranslateProps, - withTranslateProps, - withJsonFormsEnumProps, -} from '@jsonforms/react'; -import { Country } from './Country'; -import { ControlProps, OwnPropsOfEnum } from '@jsonforms/core'; -import { WithOptionLabel } from '@jsonforms/material-renderers'; -import React from 'react'; - -export const CountryControl = ( - props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps -) => ; - -export default withJsonFormsEnumProps( - withTranslateProps(React.memo(CountryControl)), - false -); diff --git a/src/components/common/country/countryControlTester.ts b/src/components/common/country/countryControlTester.js similarity index 100% rename from src/components/common/country/countryControlTester.ts rename to src/components/common/country/countryControlTester.js diff --git a/src/components/common/region/Region.tsx b/src/components/common/region/RegionControl.js similarity index 56% rename from src/components/common/region/Region.tsx rename to src/components/common/region/RegionControl.js index 664f9d46..6c5ce02b 100644 --- a/src/components/common/region/Region.tsx +++ b/src/components/common/region/RegionControl.js @@ -1,29 +1,23 @@ import React from 'react'; import { useState } from 'react'; -import { ControlProps, JsonSchema, OwnPropsOfEnum } from '@jsonforms/core'; -import { TranslateProps, useJsonForms } from '@jsonforms/react'; +import { useJsonForms, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react'; import { CircularProgress } from '@mui/material'; -import { Unwrapped, WithOptionLabel } from '@jsonforms/material-renderers'; +import { Unwrapped } from '@jsonforms/material-renderers'; import { APIContext } from '../../docs/tutorials/dynamic-enum'; const { MaterialEnumControl } = Unwrapped; -type JsonSchemaWithDependenciesAndEndpont = JsonSchema & { - dependent: string[]; - endpoint: string; -}; - -export const Region = ( - props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps +const RegionControl = ( + props ) => { - const schema = props.schema as JsonSchemaWithDependenciesAndEndpont; + const schema = props.schema; const { handleChange } = props; - const [options, setOptions] = useState([]); + const [options, setOptions] = useState([]); const api = React.useContext(APIContext); const country = useJsonForms().core?.data.country; - const [previousCountry, setPreviousCountry] = useState(); + const [previousCountry, setPreviousCountry] = useState(); const endponit = schema.endpoint; - const dependent: string[] = schema.dependent ? schema.dependent : []; + const dependent = schema.dependent ? schema.dependent : []; if (previousCountry !== country) { setOptions([]); @@ -40,7 +34,7 @@ export const Region = ( return ( { + handleChange={(path, value) => { handleChange(path, value); dependent.forEach((path) => { handleChange(path, undefined); @@ -51,4 +45,9 @@ export const Region = ( })} /> ); -}; \ No newline at end of file +}; + +export default withJsonFormsEnumProps( + withTranslateProps(React.memo(RegionControl)), + false +); \ No newline at end of file diff --git a/src/components/common/region/RegionControl.tsx b/src/components/common/region/RegionControl.tsx deleted file mode 100644 index 0b1665ec..00000000 --- a/src/components/common/region/RegionControl.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { - TranslateProps, - withJsonFormsEnumProps, - withTranslateProps, -} from '@jsonforms/react'; -import { Region } from './Region'; -import { ControlProps, OwnPropsOfEnum } from '@jsonforms/core'; -import { WithOptionLabel } from '@jsonforms/material-renderers'; -import React from 'react'; - -export const RegionControl = ( - props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps -) => ; - -export default withJsonFormsEnumProps( - withTranslateProps(React.memo(RegionControl)), - false -); diff --git a/src/components/common/region/regionControlTester.ts b/src/components/common/region/regionControlTester.js similarity index 100% rename from src/components/common/region/regionControlTester.ts rename to src/components/common/region/regionControlTester.js