From 3031a13ca1a72f64a0e4c160d3f47d90f3223141 Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Thu, 4 Jul 2024 15:29:45 +0200
Subject: [PATCH] Separate components at same level for more redeability and
 avoid re-render because inputProps object

---
 src/webapp/components/avatar-card/AvatarCard.tsx  |  1 +
 src/webapp/components/checkbox/Checkbox.tsx       |  8 ++++++--
 src/webapp/components/date-picker/DatePicker.tsx  |  1 +
 src/webapp/components/form/FormLayout.tsx         |  4 ++++
 src/webapp/components/form/FormSection.tsx        |  3 +++
 src/webapp/components/layout/Layout.tsx           |  1 +
 .../components/layout/header-bar/HeaderBar.tsx    |  4 ++++
 .../layout/main-content/MainContent.tsx           |  3 +++
 src/webapp/components/notice-box/NoticeBox.tsx    |  1 +
 .../components/profile-modal/ProfileModal.tsx     |  3 +++
 .../radio-buttons-group/RadioButtonsGroup.tsx     |  2 ++
 .../components/search-input/SearchInput.tsx       | 15 +++++++++------
 src/webapp/components/section/Section.tsx         |  4 ++++
 .../components/selector/MultipleSelector.tsx      |  2 ++
 src/webapp/components/selector/Selector.tsx       |  2 ++
 src/webapp/components/stats-card/StatsCard.tsx    |  3 +++
 src/webapp/components/text-input/TextArea.tsx     |  2 ++
 src/webapp/components/text-input/TextInput.tsx    |  1 +
 18 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/webapp/components/avatar-card/AvatarCard.tsx b/src/webapp/components/avatar-card/AvatarCard.tsx
index c3996df6..b2e61747 100644
--- a/src/webapp/components/avatar-card/AvatarCard.tsx
+++ b/src/webapp/components/avatar-card/AvatarCard.tsx
@@ -16,6 +16,7 @@ export const AvatarCard: React.FC<AvatarCardProps> = React.memo(
                 <AvatarContainer $size={avatarSize}>
                     <Avatar alt={alt} src={src} />
                 </AvatarContainer>
+
                 <StyledCardContent>{children}</StyledCardContent>
             </StyledCard>
         );
diff --git a/src/webapp/components/checkbox/Checkbox.tsx b/src/webapp/components/checkbox/Checkbox.tsx
index 811615d3..47634f61 100644
--- a/src/webapp/components/checkbox/Checkbox.tsx
+++ b/src/webapp/components/checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Checkbox as MUICheckbox, InputLabel, FormHelperText } from "@material-ui/core";
 import styled from "styled-components";
 
@@ -32,6 +32,8 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
             [onChange]
         );
 
+        const inputProps = useMemo(() => ({ "aria-label": label || `${id}-label` }), [id, label]);
+
         return (
             <Container>
                 <CheckboxWrapper>
@@ -42,12 +44,14 @@ export const Checkbox: React.FC<CheckboxProps> = React.memo(
                         onChange={handleChange}
                         disabled={disabled}
                         size="small"
-                        inputProps={{ "aria-label": label || `${id}-label` }}
+                        inputProps={inputProps}
                     />
+
                     <Label htmlFor={id} disabled={disabled}>
                         {label}
                     </Label>
                 </CheckboxWrapper>
+
                 <StyledFormHelperText id={`${id}-helper-text`}>{helperText}</StyledFormHelperText>
             </Container>
         );
diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
index 7942ab72..d91eb55f 100644
--- a/src/webapp/components/date-picker/DatePicker.tsx
+++ b/src/webapp/components/date-picker/DatePicker.tsx
@@ -37,6 +37,7 @@ export const DatePicker: React.FC<DatePickerProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <StyledDatePicker
                         value={value}
diff --git a/src/webapp/components/form/FormLayout.tsx b/src/webapp/components/form/FormLayout.tsx
index a01eeba6..79b8124f 100644
--- a/src/webapp/components/form/FormLayout.tsx
+++ b/src/webapp/components/form/FormLayout.tsx
@@ -24,11 +24,15 @@ export const FormLayout: React.FC<FormLayoutProps> = React.memo(
                         {title && <Title>{title}</Title>}
                         {subtitle && <Subtitle>{subtitle}</Subtitle>}
                     </TitleContainer>
+
                     <RequiredText>{i18n.t("Indicates required")}</RequiredText>
                 </Header>
+
                 <Content>{children}</Content>
+
                 <Footer>
                     <Separator margin="12px" />
+
                     <ButtonsFooter>
                         <Button onClick={onSave}>{saveLabel || i18n.t("Save")}</Button>
                         {onCancel && (
diff --git a/src/webapp/components/form/FormSection.tsx b/src/webapp/components/form/FormSection.tsx
index cc28e8a0..f5e7fae0 100644
--- a/src/webapp/components/form/FormSection.tsx
+++ b/src/webapp/components/form/FormSection.tsx
@@ -26,17 +26,20 @@ export const FormSection: React.FC<FormSectionProps> = React.memo(
         return (
             <FormSectionContainer>
                 {hasSeparator && <Separator margin="12px" />}
+
                 <Container direction={direction}>
                     {title && (
                         <TitleContainer direction={direction}>
                             <RequiredText className={required ? "required" : ""}>
                                 {title}
                             </RequiredText>
+
                             {onClickInfo && (
                                 <IconButton icon={<IconInfo24 />} onClick={onClickInfo} />
                             )}
                         </TitleContainer>
                     )}
+
                     <FormContainer fulWidth={!title}>{children}</FormContainer>
                 </Container>
             </FormSectionContainer>
diff --git a/src/webapp/components/layout/Layout.tsx b/src/webapp/components/layout/Layout.tsx
index 0ce3f570..a46edc49 100644
--- a/src/webapp/components/layout/Layout.tsx
+++ b/src/webapp/components/layout/Layout.tsx
@@ -33,6 +33,7 @@ export const Layout: React.FC<LayoutProps> = React.memo(
                         <Button onClick={() => setSideBarOpen(!sideBarOpen)} startIcon={<Menu />} />
                     </OpenMenuContainer>
                 ) : null}
+
                 <MainContent
                     sideBarOpen={sideBarOpen}
                     toggleSideBar={setSideBarOpen}
diff --git a/src/webapp/components/layout/header-bar/HeaderBar.tsx b/src/webapp/components/layout/header-bar/HeaderBar.tsx
index c47a2e3c..a32ae629 100644
--- a/src/webapp/components/layout/header-bar/HeaderBar.tsx
+++ b/src/webapp/components/layout/header-bar/HeaderBar.tsx
@@ -10,9 +10,13 @@ export const HeaderBar: React.FC<HeaderBarProps> = React.memo(({ name }) => {
     return (
         <Container>
             <FlagBar color="red" />
+
             <FlagBar color="black" />
+
             <FlagBar color="orange" />
+
             <AppName>{name}</AppName>
+
             <StyledHeaderBar className="app-header" appName="ZEBRA App" />
         </Container>
     );
diff --git a/src/webapp/components/layout/main-content/MainContent.tsx b/src/webapp/components/layout/main-content/MainContent.tsx
index 8ae223a5..696557a2 100644
--- a/src/webapp/components/layout/main-content/MainContent.tsx
+++ b/src/webapp/components/layout/main-content/MainContent.tsx
@@ -31,9 +31,12 @@ export const MainContent: React.FC<MainContentProps> = React.memo(
                     toggleSideBar={toggleSideBar}
                     showCreateEvent={showCreateEvent}
                 />
+
                 <Main>
                     {title && <Title>{title}</Title>}
+
                     {subtitle && <SubTitle>{subtitle}</SubTitle>}
+
                     <PageContent>{children}</PageContent>
                 </Main>
             </Container>
diff --git a/src/webapp/components/notice-box/NoticeBox.tsx b/src/webapp/components/notice-box/NoticeBox.tsx
index ce7d56e1..cc959a00 100644
--- a/src/webapp/components/notice-box/NoticeBox.tsx
+++ b/src/webapp/components/notice-box/NoticeBox.tsx
@@ -14,6 +14,7 @@ export const NoticeBox: React.FC<NoticeBoxProps> = React.memo(({ title, children
                 <IconInfo24 />
                 {title}
             </TitleContainer>
+
             <Content>{children}</Content>
         </Container>
     );
diff --git a/src/webapp/components/profile-modal/ProfileModal.tsx b/src/webapp/components/profile-modal/ProfileModal.tsx
index dcb71e50..b3b4f0c3 100644
--- a/src/webapp/components/profile-modal/ProfileModal.tsx
+++ b/src/webapp/components/profile-modal/ProfileModal.tsx
@@ -27,12 +27,15 @@ export const ProfileModal: React.FC<ProfileModalProps> = React.memo(
             >
                 <StyledCard variant="outlined">
                     <Name>{name}</Name>
+
                     <Content>
                         <AvatarContainer>
                             <Avatar alt={alt} src={src} />
                         </AvatarContainer>
+
                         <StyledCardContent>{children}</StyledCardContent>
                     </Content>
+
                     <Footer>
                         <Button onClick={onClose}>{i18n.t("Close")}</Button>
                     </Footer>
diff --git a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
index a9d1e3f6..da9c44a8 100644
--- a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
+++ b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
@@ -38,6 +38,7 @@ export function RadioButtonsGroup<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledRadioGroup
                 aria-label={id}
                 name={id}
@@ -56,6 +57,7 @@ export function RadioButtonsGroup<Value extends string>({
                     />
                 ))}
             </StyledRadioGroup>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>
diff --git a/src/webapp/components/search-input/SearchInput.tsx b/src/webapp/components/search-input/SearchInput.tsx
index d8820949..1ee7e43a 100644
--- a/src/webapp/components/search-input/SearchInput.tsx
+++ b/src/webapp/components/search-input/SearchInput.tsx
@@ -12,17 +12,19 @@ type SearchInputProps = {
     disabled?: boolean;
 };
 
+const INPUT_PROPS = { "aria-label": "search" };
+
 export const SearchInput: React.FC<SearchInputProps> = React.memo(
     ({ value, onChange, placeholder = "", disabled = false }) => {
         const [stateValue, updateStateValue] = useState(value);
 
         useEffect(() => updateStateValue(value), [value]);
 
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        const onChangeDebounced = useCallback(
-            debounce((value: string) => {
-                if (onChange) onChange(value);
-            }, 400),
+        const onChangeDebounced = React.useMemo(
+            () =>
+                debounce((value: string) => {
+                    if (onChange) onChange(value);
+                }, 400),
             [onChange]
         );
 
@@ -44,6 +46,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
                 <IconContainer $disabled={disabled}>
                     <IconSearch24 />
                 </IconContainer>
+
                 <StyledTextField
                     onChange={handleChange}
                     placeholder={placeholder || i18n.t("Search")}
@@ -52,7 +55,7 @@ export const SearchInput: React.FC<SearchInputProps> = React.memo(
                     onKeyDown={handleKeydown}
                     disabled={disabled}
                     variant="outlined"
-                    inputProps={{ "aria-label": "search" }}
+                    inputProps={INPUT_PROPS}
                 />
             </Container>
         );
diff --git a/src/webapp/components/section/Section.tsx b/src/webapp/components/section/Section.tsx
index 2d3b9637..3c830442 100644
--- a/src/webapp/components/section/Section.tsx
+++ b/src/webapp/components/section/Section.tsx
@@ -25,9 +25,11 @@ export const Section: React.FC<SectionProps> = React.memo(
         return (
             <SectionContainer $hasSeparator={hasSeparator}>
                 {hasSeparator && <Separator />}
+
                 <Header>
                     <TitleContainer>
                         {title ? <Title $titleVariant={titleVariant}>{title}</Title> : null}
+
                         {lastUpdated ? (
                             <LastUpdatedContainer>
                                 <LastUpdatedTitle>
@@ -37,8 +39,10 @@ export const Section: React.FC<SectionProps> = React.memo(
                             </LastUpdatedContainer>
                         ) : null}
                     </TitleContainer>
+
                     {headerButtom ? <div>{headerButtom}</div> : null}
                 </Header>
+
                 <Content>{children}</Content>
             </SectionContainer>
         );
diff --git a/src/webapp/components/selector/MultipleSelector.tsx b/src/webapp/components/selector/MultipleSelector.tsx
index fc0ff41b..12ae7c00 100644
--- a/src/webapp/components/selector/MultipleSelector.tsx
+++ b/src/webapp/components/selector/MultipleSelector.tsx
@@ -60,6 +60,7 @@ export function MultipleSelector<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledSelect
                 labelId={label || `${id}-label`}
                 id={id}
@@ -95,6 +96,7 @@ export function MultipleSelector<Value extends string>({
                     </MenuItem>
                 ))}
             </StyledSelect>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>
diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx
index cb2914f4..e2aedd36 100644
--- a/src/webapp/components/selector/Selector.tsx
+++ b/src/webapp/components/selector/Selector.tsx
@@ -52,6 +52,7 @@ export function Selector<Value extends string>({
                     {label}
                 </Label>
             )}
+
             <StyledSelect
                 labelId={label || `${id}-label`}
                 id={id}
@@ -72,6 +73,7 @@ export function Selector<Value extends string>({
                     </MenuItem>
                 ))}
             </StyledSelect>
+
             <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                 {error && !!errorText ? errorText : helperText}
             </StyledFormHelperText>
diff --git a/src/webapp/components/stats-card/StatsCard.tsx b/src/webapp/components/stats-card/StatsCard.tsx
index b265db9c..de706cc8 100644
--- a/src/webapp/components/stats-card/StatsCard.tsx
+++ b/src/webapp/components/stats-card/StatsCard.tsx
@@ -26,8 +26,11 @@ export const StatsCard: React.FC<StatsCardProps> = React.memo(
             <StyledCard $error={error}>
                 <StyledCardContent>
                     <Stat color={color}>{`${stat}${isPercentage ? " %" : ""}`}</Stat>
+
                     <PreTitle>{pretitle}</PreTitle>
+
                     <Title>{title}</Title>
+
                     <SubTitle>{subtitle}</SubTitle>
                 </StyledCardContent>
             </StyledCard>
diff --git a/src/webapp/components/text-input/TextArea.tsx b/src/webapp/components/text-input/TextArea.tsx
index d6f3302b..576ebaa5 100644
--- a/src/webapp/components/text-input/TextArea.tsx
+++ b/src/webapp/components/text-input/TextArea.tsx
@@ -40,6 +40,7 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <StyledTextareaAutosize
                     id={id}
                     aria-label={label || `${id}-label`}
@@ -49,6 +50,7 @@ export const TextArea: React.FC<TextAreaProps> = React.memo(
                     disabled={disabled}
                     $hasError={error}
                 />
+
                 <StyledFormHelperText id={`${id}-helper-text`} error={error && !!errorText}>
                     {error && !!errorText ? errorText : helperText}
                 </StyledFormHelperText>
diff --git a/src/webapp/components/text-input/TextInput.tsx b/src/webapp/components/text-input/TextInput.tsx
index 367244bf..5e4e0c44 100644
--- a/src/webapp/components/text-input/TextInput.tsx
+++ b/src/webapp/components/text-input/TextInput.tsx
@@ -33,6 +33,7 @@ export const TextInput: React.FC<TextInputProps> = React.memo(
                         {label}
                     </Label>
                 )}
+
                 <StyledTextField
                     id={id}
                     value={value}