removed useEffect

Altinn · Dec 11, 2024 · 4312785 · 4312785
1 parent 2d1a26f
commit 4312785
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 25 deletions.
diff --git a/...EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx b/...EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/CreateNewSubformSection.tsx
@@ -12,6 +12,11 @@ import { SubformDataModel } from './SubformDataModel';
 import { CreateNewSubformButtons } from './CreateNewSubformButtons';
 import { SubformInstructions } from './SubformInstructions';
 import { useCreateSubform } from '@altinn/ux-editor/hooks/useCreateSubform';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
+import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
+import { useAppMetadataQuery } from 'app-shared/hooks/queries';
+import { extractDataTypeNamesFromAppMetadata } from 'app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/utils/validationUtils';
+import { useValidateSchemaName } from 'app-shared/hooks/useValidateSchemaName';
 
 type CreateNewSubformSectionProps = {
   layoutSets: LayoutSets;
@@ -37,7 +42,16 @@ export const CreateNewSubformSection = ({
   const [selectedDataModel, setSelectedDataModel] = useState<string>('');
   const [displayDataModelInput, setDisplayDataModelInput] = useState(false);
   const { createSubform, isPendingNewSubformMutation } = useCreateSubform();
-  const [newDataModelNameError, setNewDataModelNameError] = useState<string>();
+  const [isTextfieldEmpty, setIsTextfieldEmpty] = useState(true);
+
+  const { org, app } = useStudioEnvironmentParams();
+  const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false);
+  const { data: appMetadata } = useAppMetadataQuery(org, app);
+  const dataTypeNames = extractDataTypeNamesFromAppMetadata(appMetadata);
+  const { validateName, nameError: dataModelNameError } = useValidateSchemaName(
+    dataModelIds,
+    dataTypeNames,
+  );
 
   const handleSubformName = (subformName: string) => {
     const subformNameValidation = validateLayoutSetName(subformName, layoutSets);
@@ -68,7 +82,7 @@ export const CreateNewSubformSection = ({
 
   const hasInvalidSubformName = newSubformNameError === undefined || Boolean(newSubformNameError);
   const hasInvalidDataModel = displayDataModelInput
-    ? Boolean(newDataModelNameError) || newDataModelNameError === undefined
+    ? Boolean(dataModelNameError) || isTextfieldEmpty
     : !selectedDataModel;
   const disableSaveButton = hasInvalidSubformName || hasInvalidDataModel;
 
@@ -102,7 +116,10 @@ export const CreateNewSubformSection = ({
             setDisplayDataModelInput={setDisplayDataModelInput}
             displayDataModelInput={displayDataModelInput}
             setSelectedDataModel={setSelectedDataModel}
-            setDataModelError={setNewDataModelNameError}
+            dataModelIds={dataModelIds}
+            validateName={validateName}
+            dataModelNameError={dataModelNameError}
+            setIsTextfieldEmpty={setIsTextfieldEmpty}
           />
           <CreateNewSubformButtons
             isPendingNewSubformMutation={isPendingNewSubformMutation}

diff --git a/...r/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx b/...r/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.test.tsx
@@ -95,7 +95,10 @@ const defaultProps: SubformDataModelProps = {
   setDisplayDataModelInput: jest.fn(),
   displayDataModelInput: false,
   setSelectedDataModel: jest.fn(),
-  setDataModelError: jest.fn(),
+  dataModelIds: mockDataModelIds,
+  validateName: jest.fn(),
+  dataModelNameError: '',
+  setIsTextfieldEmpty: jest.fn(),
 };
 
 const renderSubformDataModelSelect = (props: Partial<SubformDataModelProps> = {}) => {

diff --git a/...Header/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx b/...Header/EditLayoutSetForSubform/EditLayoutSet/CreateNewSubformSection/SubformDataModel.tsx
@@ -1,50 +1,39 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StudioTextfield, StudioNativeSelect, StudioProperty } from '@studio/components';
 import { LinkIcon } from '@studio/icons';
 import { useTranslation } from 'react-i18next';
-import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { useAppMetadataModelIdsQuery } from 'app-shared/hooks/queries/useAppMetadataModelIdsQuery';
 import classes from './SubformDataModel.module.css';
-import { useValidateSchemaName } from 'app-shared/hooks/useValidateSchemaName';
-import { extractDataTypeNamesFromAppMetadata } from 'app-development/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/utils/validationUtils';
-import { useAppMetadataQuery } from 'app-shared/hooks/queries';
 
 export type SubformDataModelProps = {
   setDisplayDataModelInput: (setDisplayDataModelInput: boolean) => void;
   displayDataModelInput: boolean;
   setSelectedDataModel: (dataModelId: string) => void;
-  setDataModelError?: (error: string | undefined) => void;
+  dataModelIds?: string[] | undefined;
+  validateName?: (name: string) => void;
+  dataModelNameError: string | undefined;
+  setIsTextfieldEmpty?: (isEmpty: boolean) => void;
 };
 
 export const SubformDataModel = ({
   setDisplayDataModelInput,
   setSelectedDataModel,
   displayDataModelInput,
-  setDataModelError,
+  dataModelIds,
+  validateName,
+  dataModelNameError,
+  setIsTextfieldEmpty,
 }: SubformDataModelProps): React.ReactElement => {
   const { t } = useTranslation();
-  const { org, app } = useStudioEnvironmentParams();
-  const { data: dataModelIds } = useAppMetadataModelIdsQuery(org, app, false);
-
-  const { data: appMetadata } = useAppMetadataQuery(org, app);
-  const dataTypeNames = extractDataTypeNamesFromAppMetadata(appMetadata);
-  const { validateName, nameError: dataModelNameError } = useValidateSchemaName(
-    dataModelIds,
-    dataTypeNames,
-  );
 
   const handleNewDataModel = (dataModelId: string) => {
     validateName(dataModelId);
+    setIsTextfieldEmpty(dataModelId === '');
   };
 
   const handleDisplayInput = () => {
     setDisplayDataModelInput(true);
   };
 
-  useEffect(() => {
-    if (setDataModelError) setDataModelError(dataModelNameError);
-  }, [dataModelNameError, setDataModelError]);
-
   return (
     <>
       <StudioNativeSelect