From 23b8c7cd57e993e4c3713c34cbf4dd9f99decd18 Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Fri, 28 Jun 2024 09:38:03 +0200
Subject: [PATCH] Move similar field component to same folder and extract
 repeated code in selector

---
 .../MultipleSelector.tsx                      | 30 ++++++-------------
 src/webapp/components/selector/Selector.tsx   | 19 +++---------
 .../selector/utils/selectorHelper.ts          | 12 ++++++++
 .../{text-area => text-input}/TextArea.tsx    |  2 +-
 .../TextInput.tsx}                            |  6 ++--
 src/webapp/components/utils/selectorHelper.ts |  0
 6 files changed, 29 insertions(+), 40 deletions(-)
 rename src/webapp/components/{multiple-selector => selector}/MultipleSelector.tsx (85%)
 create mode 100644 src/webapp/components/selector/utils/selectorHelper.ts
 rename src/webapp/components/{text-area => text-input}/TextArea.tsx (99%)
 rename src/webapp/components/{input-field/InputField.tsx => text-input/TextInput.tsx} (94%)
 create mode 100644 src/webapp/components/utils/selectorHelper.ts

diff --git a/src/webapp/components/multiple-selector/MultipleSelector.tsx b/src/webapp/components/selector/MultipleSelector.tsx
similarity index 85%
rename from src/webapp/components/multiple-selector/MultipleSelector.tsx
rename to src/webapp/components/selector/MultipleSelector.tsx
index d5c3940c..95f402a8 100644
--- a/src/webapp/components/multiple-selector/MultipleSelector.tsx
+++ b/src/webapp/components/selector/MultipleSelector.tsx
@@ -2,18 +2,13 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 import { Select, InputLabel, MenuItem, FormHelperText, Chip } from "@material-ui/core";
 import { IconChevronDown24, IconCross16 } from "@dhis2/ui";
-
-export type MultipleSelectorOption<T extends string = string> = {
-    value: T;
-    label: string;
-    disabled?: boolean;
-};
+import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper";
 
 type MultipleSelectorProps<T extends string = string> = {
     id: string;
     selected: T[];
-    onChange: (value: MultipleSelectorOption["value"][]) => void;
-    options: MultipleSelectorOption<T>[];
+    onChange: (value: SelectorOption["value"][]) => void;
+    options: SelectorOption<T>[];
     label?: string;
     placeholder?: string;
     disabled?: boolean;
@@ -26,7 +21,7 @@ type MultipleSelectorProps<T extends string = string> = {
 export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         placeholder = "",
         selected,
         onChange,
@@ -37,13 +32,6 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
         error = false,
         required = false,
     }) => {
-        const getLabelFromValue = useCallback(
-            (value: MultipleSelectorOption["value"]) => {
-                return options.find(option => option.value === value)?.label || "";
-            },
-            [options]
-        );
-
         const handleChange = useCallback(
             (
                 event: React.ChangeEvent<{
@@ -51,7 +39,7 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
                 }>,
                 _child: React.ReactNode
             ) => {
-                const value = event.target.value as MultipleSelectorOption["value"][];
+                const value = event.target.value as SelectorOption["value"][];
                 onChange(value);
             },
             [onChange]
@@ -60,7 +48,7 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
         const handleDelete = useCallback(
             (
                 event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-                value: MultipleSelectorOption["value"]
+                value: SelectorOption["value"]
             ) => {
                 event.stopPropagation();
                 onChange(selected?.filter(selection => selection !== value));
@@ -85,12 +73,12 @@ export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
                     IconComponent={IconChevronDown24}
                     error={error}
                     renderValue={(selected: unknown) =>
-                        (selected as MultipleSelectorOption["value"][])?.length ? (
+                        (selected as SelectorOption["value"][])?.length ? (
                             <div>
-                                {(selected as MultipleSelectorOption["value"][]).map(value => (
+                                {(selected as SelectorOption["value"][]).map(value => (
                                     <SelectedChip
                                         key={value}
-                                        label={getLabelFromValue(value)}
+                                        label={getLabelFromValue(value, options)}
                                         deleteIcon={<IconCross16 />}
                                         onDelete={event => handleDelete(event, value)}
                                         onMouseDown={event => handleDelete(event, value)}
diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx
index 98c0ad41..e7a88c8d 100644
--- a/src/webapp/components/selector/Selector.tsx
+++ b/src/webapp/components/selector/Selector.tsx
@@ -2,12 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 import { Select, InputLabel, MenuItem, FormHelperText } from "@material-ui/core";
 import { IconChevronDown24 } from "@dhis2/ui";
-
-export type SelectorOption<T extends string = string> = {
-    value: T;
-    label: string;
-    disabled?: boolean;
-};
+import { SelectorOption, getLabelFromValue } from "./utils/selectorHelper";
 
 type SelectorProps<T extends string = string> = {
     id: string;
@@ -26,7 +21,7 @@ type SelectorProps<T extends string = string> = {
 export const Selector: React.FC<SelectorProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         placeholder = "",
         selected,
         onChange,
@@ -37,13 +32,6 @@ export const Selector: React.FC<SelectorProps> = React.memo(
         error = false,
         required = false,
     }) => {
-        const getLabelFromValue = useCallback(
-            (value: SelectorOption["value"]) => {
-                return options.find(option => option.value === value)?.label || "";
-            },
-            [options]
-        );
-
         const handleChange = useCallback(
             (
                 event: React.ChangeEvent<{
@@ -74,7 +62,8 @@ export const Selector: React.FC<SelectorProps> = React.memo(
                     IconComponent={IconChevronDown24}
                     error={error}
                     renderValue={(selected: unknown) =>
-                        getLabelFromValue(selected as SelectorOption["value"]) || placeholder
+                        getLabelFromValue(selected as SelectorOption["value"], options) ||
+                        placeholder
                     }
                     displayEmpty
                 >
diff --git a/src/webapp/components/selector/utils/selectorHelper.ts b/src/webapp/components/selector/utils/selectorHelper.ts
new file mode 100644
index 00000000..7b23414f
--- /dev/null
+++ b/src/webapp/components/selector/utils/selectorHelper.ts
@@ -0,0 +1,12 @@
+export type SelectorOption<T extends string = string> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+
+export function getLabelFromValue<T extends string = string>(
+    value: SelectorOption["value"],
+    options: SelectorOption<T>[]
+) {
+    return options.find(option => option.value === value)?.label;
+}
diff --git a/src/webapp/components/text-area/TextArea.tsx b/src/webapp/components/text-input/TextArea.tsx
similarity index 99%
rename from src/webapp/components/text-area/TextArea.tsx
rename to src/webapp/components/text-input/TextArea.tsx
index 8e6342c0..d6f3302b 100644
--- a/src/webapp/components/text-area/TextArea.tsx
+++ b/src/webapp/components/text-input/TextArea.tsx
@@ -17,7 +17,7 @@ type TextAreaProps = {
 export const TextArea: React.FC<TextAreaProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         value,
         onChange,
         disabled = false,
diff --git a/src/webapp/components/input-field/InputField.tsx b/src/webapp/components/text-input/TextInput.tsx
similarity index 94%
rename from src/webapp/components/input-field/InputField.tsx
rename to src/webapp/components/text-input/TextInput.tsx
index c53ac20c..367244bf 100644
--- a/src/webapp/components/input-field/InputField.tsx
+++ b/src/webapp/components/text-input/TextInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { TextField, InputLabel } from "@material-ui/core";
 import styled from "styled-components";
 
-type InputFieldProps = {
+type TextInputProps = {
     id: string;
     label?: string;
     value: string;
@@ -14,10 +14,10 @@ type InputFieldProps = {
     error?: boolean;
 };
 
-export const InputField: React.FC<InputFieldProps> = React.memo(
+export const TextInput: React.FC<TextInputProps> = React.memo(
     ({
         id,
-        label = "",
+        label,
         value,
         onChange,
         helperText = "",
diff --git a/src/webapp/components/utils/selectorHelper.ts b/src/webapp/components/utils/selectorHelper.ts
new file mode 100644
index 00000000..e69de29b