From 07b4192d3ea5314fb561f7fa45ea4a41a5a56fdf Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Thu, 27 Jun 2024 08:46:30 +0200
Subject: [PATCH 1/3] Change interface to type in props

---
 src/webapp/components/add-new-option/AddNewOption.tsx        | 4 ++--
 src/webapp/components/avatar-card/AvatarCard.tsx             | 4 ++--
 src/webapp/components/button/Button.tsx                      | 4 ++--
 src/webapp/components/date-picker/DatePicker.tsx             | 4 ++--
 src/webapp/components/form-page/FormPage.tsx                 | 4 ++--
 src/webapp/components/form-section/FormSection.tsx           | 4 ++--
 src/webapp/components/icon-button/IconButton.tsx             | 4 ++--
 src/webapp/components/input-field/InputField.tsx             | 4 ++--
 src/webapp/components/layout/Layout.tsx                      | 5 +++--
 src/webapp/components/layout/header-bar/HeaderBar.tsx        | 4 ++--
 src/webapp/components/layout/main-content/MainContent.tsx    | 4 ++--
 src/webapp/components/layout/side-bar/SideBar.tsx            | 4 ++--
 src/webapp/components/layout/side-bar/SideBarContent.tsx     | 4 ++--
 src/webapp/components/multiple-selector/MultipleSelector.tsx | 4 ++--
 src/webapp/components/not-applicable-checkbox/NACheckbox.tsx | 4 ++--
 src/webapp/components/notice-box/NoticeBox.tsx               | 4 ++--
 src/webapp/components/profile-modal/ProfileModal.tsx         | 4 ++--
 .../components/radio-buttons-group/RadioButtonsGroup.tsx     | 4 ++--
 src/webapp/components/search-input/SearchInput.tsx           | 4 ++--
 src/webapp/components/section/Section.tsx                    | 4 ++--
 src/webapp/components/selector/Selector.tsx                  | 4 ++--
 src/webapp/components/separator/Separator.tsx                | 4 ++--
 src/webapp/components/stats-card/StatsCard.tsx               | 4 ++--
 src/webapp/components/text-area/TextArea.tsx                 | 4 ++--
 24 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/webapp/components/add-new-option/AddNewOption.tsx b/src/webapp/components/add-new-option/AddNewOption.tsx
index 7abfa140..26adbd2a 100644
--- a/src/webapp/components/add-new-option/AddNewOption.tsx
+++ b/src/webapp/components/add-new-option/AddNewOption.tsx
@@ -4,11 +4,11 @@ import { AddCircleOutline } from "@material-ui/icons";
 
 import i18n from "../../../utils/i18n";
 
-interface AddNewOptionProps {
+type AddNewOptionProps = {
     id: string;
     label?: string;
     onAddNewOption: () => void;
-}
+};
 
 export const AddNewOption: React.FC<AddNewOptionProps> = React.memo(
     ({ id, label = "", onAddNewOption }) => {
diff --git a/src/webapp/components/avatar-card/AvatarCard.tsx b/src/webapp/components/avatar-card/AvatarCard.tsx
index 55a19945..c3996df6 100644
--- a/src/webapp/components/avatar-card/AvatarCard.tsx
+++ b/src/webapp/components/avatar-card/AvatarCard.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import { CardContent, Card, Avatar } from "@material-ui/core";
 import styled from "styled-components";
 
-interface AvatarCardProps {
+type AvatarCardProps = {
     children: React.ReactNode;
     avatarSize?: "small" | "medium";
     alt?: string;
     src?: string;
-}
+};
 
 export const AvatarCard: React.FC<AvatarCardProps> = React.memo(
     ({ children, src, alt, avatarSize = "small" }) => {
diff --git a/src/webapp/components/button/Button.tsx b/src/webapp/components/button/Button.tsx
index 10436e2e..00621876 100644
--- a/src/webapp/components/button/Button.tsx
+++ b/src/webapp/components/button/Button.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import { Button as MUIButton } from "@material-ui/core";
 import styled from "styled-components";
 
-interface ButtonProps {
+type ButtonProps = {
     children?: React.ReactNode;
     variant?: "contained" | "outlined";
     color?: "primary" | "secondary" | "dark-secondary";
     disabled?: boolean;
     startIcon?: React.ReactNode;
     onClick: () => void;
-}
+};
 
 export const Button: React.FC<ButtonProps> = React.memo(
     ({
diff --git a/src/webapp/components/date-picker/DatePicker.tsx b/src/webapp/components/date-picker/DatePicker.tsx
index 9402d505..c46191bf 100644
--- a/src/webapp/components/date-picker/DatePicker.tsx
+++ b/src/webapp/components/date-picker/DatePicker.tsx
@@ -6,7 +6,7 @@ import { DatePicker as DatePickerMUI } from "@mui/x-date-pickers/DatePicker";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { IconCalendar24 } from "@dhis2/ui";
 
-interface DatePickerProps {
+type DatePickerProps = {
     id: string;
     label?: string;
     value: Date | null;
@@ -15,7 +15,7 @@ interface DatePickerProps {
     errorText?: string;
     disabled?: boolean;
     error?: boolean;
-}
+};
 
 export const DatePicker: React.FC<DatePickerProps> = React.memo(
     ({
diff --git a/src/webapp/components/form-page/FormPage.tsx b/src/webapp/components/form-page/FormPage.tsx
index 17a22e43..300784ad 100644
--- a/src/webapp/components/form-page/FormPage.tsx
+++ b/src/webapp/components/form-page/FormPage.tsx
@@ -5,7 +5,7 @@ import i18n from "../../../utils/i18n";
 import { Button } from "../button/Button";
 import { Separator } from "../separator/Separator";
 
-interface FormPageProps {
+type FormPageProps = {
     title?: string;
     subtitle?: string;
     saveLabel?: string;
@@ -13,7 +13,7 @@ interface FormPageProps {
     children: React.ReactNode;
     onSave: () => void;
     onCancel: () => void;
-}
+};
 
 export const FormPage: React.FC<FormPageProps> = React.memo(
     ({ title, subtitle = "", saveLabel = "", cancelLabel = "", children, onSave, onCancel }) => {
diff --git a/src/webapp/components/form-section/FormSection.tsx b/src/webapp/components/form-section/FormSection.tsx
index ccd5b11e..2d2178f6 100644
--- a/src/webapp/components/form-section/FormSection.tsx
+++ b/src/webapp/components/form-section/FormSection.tsx
@@ -5,13 +5,13 @@ import { IconInfo24 } from "@dhis2/ui";
 import { Separator } from "../separator/Separator";
 import { IconButton } from "../icon-button/IconButton";
 
-interface FormSectionProps {
+type FormSectionProps = {
     title: string;
     children: React.ReactNode;
     hasSeparator?: boolean;
     onClickInfo?: () => void;
     direction?: "row" | "column";
-}
+};
 
 export const FormSection: React.FC<FormSectionProps> = React.memo(
     ({ title, hasSeparator = false, children, onClickInfo, direction = "row" }) => {
diff --git a/src/webapp/components/icon-button/IconButton.tsx b/src/webapp/components/icon-button/IconButton.tsx
index 160985cb..bdce855d 100644
--- a/src/webapp/components/icon-button/IconButton.tsx
+++ b/src/webapp/components/icon-button/IconButton.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { IconButton as MUIIconButton } from "@material-ui/core";
 import styled from "styled-components";
 
-interface IconButtonProps {
+type IconButtonProps = {
     icon: React.ReactNode;
     disabled?: boolean;
     onClick: () => void;
-}
+};
 
 export const IconButton: React.FC<IconButtonProps> = React.memo(
     ({ icon, disabled = false, onClick }) => {
diff --git a/src/webapp/components/input-field/InputField.tsx b/src/webapp/components/input-field/InputField.tsx
index 96d2cf4a..87f333ca 100644
--- a/src/webapp/components/input-field/InputField.tsx
+++ b/src/webapp/components/input-field/InputField.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { TextField, InputLabel } from "@material-ui/core";
 import styled from "styled-components";
 
-interface InputFieldProps {
+type InputFieldProps = {
     id: string;
     label?: string;
     value: string;
@@ -12,7 +12,7 @@ interface InputFieldProps {
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
-}
+};
 
 export const InputField: React.FC<InputFieldProps> = React.memo(
     ({
diff --git a/src/webapp/components/layout/Layout.tsx b/src/webapp/components/layout/Layout.tsx
index 5e1b3d04..0ce3f570 100644
--- a/src/webapp/components/layout/Layout.tsx
+++ b/src/webapp/components/layout/Layout.tsx
@@ -5,13 +5,14 @@ import { Menu } from "@material-ui/icons";
 
 import { MainContent } from "./main-content/MainContent";
 import { Button } from "../button/Button";
-interface LayoutProps {
+
+type LayoutProps = {
     children?: React.ReactNode;
     title?: string;
     subtitle?: string;
     hideSideBarOptions?: boolean;
     showCreateEvent?: boolean;
-}
+};
 
 export const Layout: React.FC<LayoutProps> = React.memo(
     ({
diff --git a/src/webapp/components/layout/header-bar/HeaderBar.tsx b/src/webapp/components/layout/header-bar/HeaderBar.tsx
index 45abeca4..c47a2e3c 100644
--- a/src/webapp/components/layout/header-bar/HeaderBar.tsx
+++ b/src/webapp/components/layout/header-bar/HeaderBar.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { HeaderBar as D2HeaderBar } from "@dhis2/ui";
 
-interface HeaderBarProps {
+type HeaderBarProps = {
     name: string;
-}
+};
 
 export const HeaderBar: React.FC<HeaderBarProps> = React.memo(({ name }) => {
     return (
diff --git a/src/webapp/components/layout/main-content/MainContent.tsx b/src/webapp/components/layout/main-content/MainContent.tsx
index 19f391a2..8ae223a5 100644
--- a/src/webapp/components/layout/main-content/MainContent.tsx
+++ b/src/webapp/components/layout/main-content/MainContent.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { SideBar } from "../side-bar/SideBar";
 
-interface MainContentProps {
+type MainContentProps = {
     children?: React.ReactNode;
     title?: string;
     subtitle?: string;
@@ -11,7 +11,7 @@ interface MainContentProps {
     sideBarOpen: boolean;
     toggleSideBar: (isOpen: boolean) => void;
     showCreateEvent?: boolean;
-}
+};
 
 export const MainContent: React.FC<MainContentProps> = React.memo(
     ({
diff --git a/src/webapp/components/layout/side-bar/SideBar.tsx b/src/webapp/components/layout/side-bar/SideBar.tsx
index a7a3f66f..35e2c8d0 100644
--- a/src/webapp/components/layout/side-bar/SideBar.tsx
+++ b/src/webapp/components/layout/side-bar/SideBar.tsx
@@ -4,13 +4,13 @@ import styled from "styled-components";
 
 import { SideBarContent } from "./SideBarContent";
 
-interface SideBarProps {
+type SideBarProps = {
     children?: React.ReactNode;
     hideOptions?: boolean;
     open: boolean;
     toggleSideBar: (isOpen: boolean) => void;
     showCreateEvent?: boolean;
-}
+};
 
 export const SideBar: React.FC<SideBarProps> = React.memo(
     ({ children, hideOptions = false, toggleSideBar, open = false, showCreateEvent = false }) => {
diff --git a/src/webapp/components/layout/side-bar/SideBarContent.tsx b/src/webapp/components/layout/side-bar/SideBarContent.tsx
index b5192d6d..39f22d7f 100644
--- a/src/webapp/components/layout/side-bar/SideBarContent.tsx
+++ b/src/webapp/components/layout/side-bar/SideBarContent.tsx
@@ -7,11 +7,11 @@ import { AddCircleOutline } from "@material-ui/icons";
 import i18n from "../../../../utils/i18n";
 import { Button } from "../../button/Button";
 
-interface SideBarContentProps {
+type SideBarContentProps = {
     children?: React.ReactNode;
     hideOptions?: boolean;
     showCreateEvent?: boolean;
-}
+};
 
 type SideBarOption = {
     text: string;
diff --git a/src/webapp/components/multiple-selector/MultipleSelector.tsx b/src/webapp/components/multiple-selector/MultipleSelector.tsx
index 3533e4e1..38d06a4d 100644
--- a/src/webapp/components/multiple-selector/MultipleSelector.tsx
+++ b/src/webapp/components/multiple-selector/MultipleSelector.tsx
@@ -9,7 +9,7 @@ export type MultipleSelectorOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface MultipleSelectorProps<T extends string = string> {
+type MultipleSelectorProps<T extends string = string> = {
     id: string;
     selected: T[];
     onChange: (value: MultipleSelectorOption["value"][]) => void;
@@ -20,7 +20,7 @@ interface MultipleSelectorProps<T extends string = string> {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const MultipleSelector: React.FC<MultipleSelectorProps> = React.memo(
     ({
diff --git a/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx b/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx
index 92ee63ea..e0026b50 100644
--- a/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx
+++ b/src/webapp/components/not-applicable-checkbox/NACheckbox.tsx
@@ -4,7 +4,7 @@ import styled from "styled-components";
 
 import i18n from "../../../utils/i18n";
 
-interface NACheckboxProps {
+type NACheckboxProps = {
     id: string;
     label?: string;
     checked: boolean;
@@ -12,7 +12,7 @@ interface NACheckboxProps {
     helperText?: string;
     disabled?: boolean;
     indeterminate?: boolean;
-}
+};
 
 export const NACheckbox: React.FC<NACheckboxProps> = React.memo(
     ({
diff --git a/src/webapp/components/notice-box/NoticeBox.tsx b/src/webapp/components/notice-box/NoticeBox.tsx
index 621ed9fb..ce7d56e1 100644
--- a/src/webapp/components/notice-box/NoticeBox.tsx
+++ b/src/webapp/components/notice-box/NoticeBox.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import { IconInfo24 } from "@dhis2/ui";
 import styled from "styled-components";
 
-interface NoticeBoxProps {
+type NoticeBoxProps = {
     title: string;
     children: React.ReactNode;
-}
+};
 
 export const NoticeBox: React.FC<NoticeBoxProps> = React.memo(({ title, children }) => {
     return (
diff --git a/src/webapp/components/profile-modal/ProfileModal.tsx b/src/webapp/components/profile-modal/ProfileModal.tsx
index edf8884e..dcb71e50 100644
--- a/src/webapp/components/profile-modal/ProfileModal.tsx
+++ b/src/webapp/components/profile-modal/ProfileModal.tsx
@@ -5,7 +5,7 @@ import styled from "styled-components";
 import i18n from "../../../utils/i18n";
 import { Button } from "../button/Button";
 
-interface ProfileModalProps {
+type ProfileModalProps = {
     name: string;
     children: React.ReactNode;
     avatarSize?: "small" | "medium";
@@ -13,7 +13,7 @@ interface ProfileModalProps {
     src?: string;
     open: boolean;
     onClose: () => void;
-}
+};
 
 export const ProfileModal: React.FC<ProfileModalProps> = React.memo(
     ({ children, src, alt, open = false, onClose, name }) => {
diff --git a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
index e37631d5..b1659f52 100644
--- a/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
+++ b/src/webapp/components/radio-buttons-group/RadioButtonsGroup.tsx
@@ -8,7 +8,7 @@ export type RadioOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface RadioButtonsGroupProps {
+type RadioButtonsGroupProps = {
     id: string;
     selected: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -17,7 +17,7 @@ interface RadioButtonsGroupProps {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = React.memo(
     ({
diff --git a/src/webapp/components/search-input/SearchInput.tsx b/src/webapp/components/search-input/SearchInput.tsx
index fc4c675a..3e0bac51 100644
--- a/src/webapp/components/search-input/SearchInput.tsx
+++ b/src/webapp/components/search-input/SearchInput.tsx
@@ -6,12 +6,12 @@ import _ from "lodash";
 
 import i18n from "../../../utils/i18n";
 
-interface SearchInputProps {
+type SearchInputProps = {
     value: string;
     onChange: (event: string) => void;
     placeholder?: string;
     disabled?: boolean;
-}
+};
 
 export const SearchInput: React.FC<SearchInputProps> = React.memo(
     ({ value, onChange, placeholder = "", disabled = false }) => {
diff --git a/src/webapp/components/section/Section.tsx b/src/webapp/components/section/Section.tsx
index 83f3fae6..2d3b9637 100644
--- a/src/webapp/components/section/Section.tsx
+++ b/src/webapp/components/section/Section.tsx
@@ -4,14 +4,14 @@ import styled from "styled-components";
 import i18n from "../../../utils/i18n";
 import { Separator } from "../separator/Separator";
 
-interface SectionProps {
+type SectionProps = {
     title?: string;
     lastUpdated?: string;
     children: React.ReactNode;
     headerButtom?: React.ReactNode;
     hasSeparator?: boolean;
     titleVariant?: "primary" | "secondary";
-}
+};
 
 export const Section: React.FC<SectionProps> = React.memo(
     ({
diff --git a/src/webapp/components/selector/Selector.tsx b/src/webapp/components/selector/Selector.tsx
index e2969dfd..fde41143 100644
--- a/src/webapp/components/selector/Selector.tsx
+++ b/src/webapp/components/selector/Selector.tsx
@@ -9,7 +9,7 @@ export type SelectorOption<T extends string = string> = {
     disabled?: boolean;
 };
 
-interface SelectorProps<T extends string = string> {
+type SelectorProps<T extends string = string> = {
     id: string;
     selected: T;
     onChange: (value: SelectorOption["value"]) => void;
@@ -20,7 +20,7 @@ interface SelectorProps<T extends string = string> {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const Selector: React.FC<SelectorProps> = React.memo(
     ({
diff --git a/src/webapp/components/separator/Separator.tsx b/src/webapp/components/separator/Separator.tsx
index f8f685e5..b78ada27 100644
--- a/src/webapp/components/separator/Separator.tsx
+++ b/src/webapp/components/separator/Separator.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-interface SeparatorProps {
+type SeparatorProps = {
     margin?: string;
-}
+};
 
 export const Separator: React.FC<SeparatorProps> = React.memo(({ margin = "" }) => {
     return <StyledSeparator margin={margin} />;
diff --git a/src/webapp/components/stats-card/StatsCard.tsx b/src/webapp/components/stats-card/StatsCard.tsx
index 576d8f68..b265db9c 100644
--- a/src/webapp/components/stats-card/StatsCard.tsx
+++ b/src/webapp/components/stats-card/StatsCard.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { CardContent, Card } from "@material-ui/core";
 import styled from "styled-components";
 
-interface StatsCardProps {
+type StatsCardProps = {
     color?: "normal" | "green" | "red";
     stat: string;
     pretitle?: string;
@@ -10,7 +10,7 @@ interface StatsCardProps {
     subtitle?: string;
     isPercentage?: boolean;
     error?: boolean;
-}
+};
 
 export const StatsCard: React.FC<StatsCardProps> = React.memo(
     ({
diff --git a/src/webapp/components/text-area/TextArea.tsx b/src/webapp/components/text-area/TextArea.tsx
index 4e7afaa4..ae779da6 100644
--- a/src/webapp/components/text-area/TextArea.tsx
+++ b/src/webapp/components/text-area/TextArea.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 import { FormHelperText, TextareaAutosize } from "@material-ui/core";
 
-interface TextAreaProps {
+type TextAreaProps = {
     id: string;
     label?: string;
     value: string;
@@ -11,7 +11,7 @@ interface TextAreaProps {
     helperText?: string;
     errorText?: string;
     error?: boolean;
-}
+};
 
 export const TextArea: React.FC<TextAreaProps> = React.memo(
     ({

From 8fe5ab0a10e3b9e01aab65f8072aafbd52522c24 Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Thu, 27 Jun 2024 08:54:36 +0200
Subject: [PATCH 2/3] Cancel not mandatory in forms

---
 src/webapp/components/form-page/FormPage.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/webapp/components/form-page/FormPage.tsx b/src/webapp/components/form-page/FormPage.tsx
index 300784ad..6fa37af9 100644
--- a/src/webapp/components/form-page/FormPage.tsx
+++ b/src/webapp/components/form-page/FormPage.tsx
@@ -12,7 +12,7 @@ type FormPageProps = {
     cancelLabel?: string;
     children: React.ReactNode;
     onSave: () => void;
-    onCancel: () => void;
+    onCancel?: () => void;
 };
 
 export const FormPage: React.FC<FormPageProps> = React.memo(
@@ -31,9 +31,11 @@ export const FormPage: React.FC<FormPageProps> = React.memo(
                     <Separator margin="12px" />
                     <ButtonsFooter>
                         <Button onClick={onSave}>{saveLabel || i18n.t("Save")}</Button>
-                        <Button onClick={onCancel} variant="outlined" color="secondary">
-                            {cancelLabel || i18n.t("Cancel")}
-                        </Button>
+                        {onCancel && (
+                            <Button onClick={onCancel} variant="outlined" color="secondary">
+                                {cancelLabel || i18n.t("Cancel")}
+                            </Button>
+                        )}
                     </ButtonsFooter>
                 </Footer>
             </StyledFormPage>

From 2338b34c988e20dd662e896af6bdc2b2bfd5e9c8 Mon Sep 17 00:00:00 2001
From: Ana Garcia <ana@eyeseetea.com>
Date: Thu, 27 Jun 2024 09:37:27 +0200
Subject: [PATCH 3/3] Clean create event component sections that were an
 example

---
 .../pages/create-event/CreateEventPage.tsx    | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/webapp/pages/create-event/CreateEventPage.tsx b/src/webapp/pages/create-event/CreateEventPage.tsx
index 07b576d0..fb08a60f 100644
--- a/src/webapp/pages/create-event/CreateEventPage.tsx
+++ b/src/webapp/pages/create-event/CreateEventPage.tsx
@@ -2,27 +2,7 @@ import React from "react";
 
 import { Layout } from "../../components/layout/Layout";
 import i18n from "../../../utils/i18n";
-import { FormPage } from "../../components/form-page/FormPage";
-import { FormSection } from "../../components/form-section/FormSection";
-import { useHistory } from "react-router-dom";
 
 export const CreateEventPage: React.FC = React.memo(() => {
-    const history = useHistory();
-
-    const goBack = () => {
-        history.goBack();
-    };
-
-    return (
-        <Layout title={i18n.t("Create Event")} hideSideBarOptions>
-            <FormPage onCancel={goBack} onSave={() => {}}>
-                <FormSection title={i18n.t("Event Name")} hasSeparator>
-                    <div>test</div>
-                </FormSection>
-                <FormSection title={i18n.t("Hazard Type")} hasSeparator>
-                    <div>test</div>
-                </FormSection>
-            </FormPage>
-        </Layout>
-    );
+    return <Layout title={i18n.t("Create Event")} hideSideBarOptions></Layout>;
 });