refactor: Seperated MetadataSelect into own component.

equinor · Dec 7, 2023 · b0f6e8b · b0f6e8b
1 parent 41ac7d8
commit b0f6e8b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 48 deletions.
diff --git a/src/features/AddModel/ModelMetadata/MetadataSelect/MetadataSelect.tsx b/src/features/AddModel/ModelMetadata/MetadataSelect/MetadataSelect.tsx
@@ -0,0 +1,48 @@
+import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
+import { MetadataDto } from '../../../../api/generated';
+
+export const MetadataSelect = ({
+  type,
+  errors,
+  data,
+  metadata,
+  isLoading,
+  handleAddMetadata,
+}: {
+  type: string;
+  errors: string | undefined;
+  data: MetadataDto[];
+  metadata: MetadataDto[];
+  isLoading: boolean;
+  handleAddMetadata: (
+    e: AutocompleteChanges<MetadataDto>,
+    type: string,
+  ) => void;
+}) => {
+  const setSelectedMetadataOptions = (type: string) => {
+    if (!isLoading && data) {
+      const dataProps = data.filter((z) => z.metadataType === type);
+
+      const selectedProps = metadata.filter((m) => m.metadataType === type);
+
+      return dataProps.filter(
+        (c) =>
+          selectedProps.findIndex((x: MetadataDto) => x.value === c.value) > -1,
+      );
+    }
+  };
+
+  return (
+    <Autocomplete
+      variant={errors ? 'error' : undefined}
+      label={type}
+      options={data.filter((d) => d.metadataType === type)}
+      optionLabel={(option) => option.value}
+      selectedOptions={setSelectedMetadataOptions(type)}
+      multiple
+      onOptionsChange={(e: AutocompleteChanges<MetadataDto>) =>
+        handleAddMetadata(e, type)
+      }
+    ></Autocomplete>
+  );
+};
diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -17,6 +17,7 @@ import {
   OpenAPI,
 } from '../../../api/generated';
 import { useAccessToken } from '../../../hooks/useAccessToken';
+import { MetadataSelect } from './MetadataSelect/MetadataSelect';
 import * as Styled from './ModelMetadata.styled';
 
 export const ModelMetadata = ({
@@ -69,8 +70,12 @@ export const ModelMetadata = ({
     });
   }
 
-  if (isLoading || !data?.success) return <p>Loading ...</p>;
-  if (analougeData.isLoading || !analougeData?.data?.success)
+  if (
+    isLoading ||
+    !data?.success ||
+    analougeData.isLoading ||
+    !analougeData?.data?.success
+  )
     return <p>Loading ...</p>;
 
   return (
@@ -169,49 +174,3 @@ export const ModelMetadata = ({
     </Styled.ModelMetadata>
   );
 };
-
-const MetadataSelect = ({
-  type,
-  errors,
-  data,
-  metadata,
-  isLoading,
-  handleAddMetadata,
-}: {
-  type: string;
-  errors: string | undefined;
-  data: MetadataDto[];
-  metadata: MetadataDto[];
-  isLoading: boolean;
-  handleAddMetadata: (
-    e: AutocompleteChanges<MetadataDto>,
-    type: string,
-  ) => void;
-}) => {
-  const setSelectedMetadataOptions = (type: string) => {
-    if (!isLoading && data) {
-      const dataProps = data.filter((z) => z.metadataType === type);
-
-      const selectedProps = metadata.filter((m) => m.metadataType === type);
-
-      return dataProps.filter(
-        (c) =>
-          selectedProps.findIndex((x: MetadataDto) => x.value === c.value) > -1,
-      );
-    }
-  };
-
-  return (
-    <Autocomplete
-      variant={errors ? 'error' : undefined}
-      label={type}
-      options={data.filter((d) => d.metadataType === type)}
-      optionLabel={(option) => option.value}
-      selectedOptions={setSelectedMetadataOptions(type)}
-      multiple
-      onOptionsChange={(e: AutocompleteChanges<MetadataDto>) =>
-        handleAddMetadata(e, type)
-      }
-    ></Autocomplete>
-  );
-};