From 2caec79a652ae39ec1555be090ddbe49335184b9 Mon Sep 17 00:00:00 2001
From: karabij <blobfish@helloworld.com>
Date: Fri, 9 Dec 2022 14:27:40 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20register=20meeting?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

add a register meeting button and form, the same as for rooms
---
 .../RegisterMeeting.stories.tsx               | 13 ++++
 .../RegisterMeeting/RegisterMeeting.tsx       | 69 +++++++++++++++++++
 .../meetings/RegisterMeetingForm/index.tsx    |  1 +
 3 files changed, 83 insertions(+)
 create mode 100644 src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.stories.tsx
 create mode 100644 src/frontend/magnify/src/components/meetings/RegisterMeetingForm/index.tsx

diff --git a/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.stories.tsx b/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.stories.tsx
new file mode 100644
index 000000000..82b9837ed
--- /dev/null
+++ b/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.stories.tsx
@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
+import RegisterMeeting from './RegisterMeeting';
+
+export default {
+  title: 'Meetings/RegisterMeeting',
+  component: RegisterMeeting,
+} as ComponentMeta<typeof RegisterMeeting>;
+
+const Template: ComponentStory<typeof RegisterMeeting> = () => <RegisterMeeting />;
+
+// create the template and stories
+export const basicRegisterMeeting = Template.bind({});
diff --git a/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.tsx b/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.tsx
index e69de29bb..fe9994e99 100644
--- a/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.tsx
+++ b/src/frontend/magnify/src/components/meetings/RegisterMeeting/RegisterMeeting.tsx
@@ -0,0 +1,69 @@
+import { Box, Button, Layer } from 'grommet';
+import { Add } from 'grommet-icons';
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Meeting } from '../../../types/entities/meeting';
+import RegisterMeetingForm from '../RegisterMeetingForm';
+
+const messages = defineMessages({
+  registerNewMeetingLabel: {
+    id: 'components.meetings.registerMeeting.registerNewMeetingLabel',
+    defaultMessage: 'Register new meeting',
+    description: 'Label for the button to register a new meeting',
+  },
+  addNewMeetingLabel: {
+    id: 'components.meetings.registerMeeting.addNewMeetingLabel',
+    defaultMessage: 'Meeting',
+    description: 'Label for the button to register a new meeting',
+  },
+});
+
+export interface RegisterMeetingProps {
+  onAddMeeting?: (meeting: Meeting) => void;
+}
+
+const RegisterMeeting = ({ ...props }: RegisterMeetingProps) => {
+  const intl = useIntl();
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setOpen(true);
+  };
+
+  const handleClose = (event?: React.MouseEvent | React.KeyboardEvent) => {
+    event?.preventDefault();
+    setOpen(false);
+  };
+
+  const onAddSuccess = (meeting?: Meeting): void => {
+    handleClose();
+  };
+
+  return (
+    <>
+      <Button
+        primary
+        icon={<Add size="15px" />}
+        label={intl.formatMessage(messages.addNewMeetingLabel)}
+        onClick={handleOpen}
+      />
+      {open && (
+        <Layer
+          id="confirmDelete"
+          onClickOutside={handleClose}
+          onEsc={handleClose}
+          position="center"
+          role="dialog"
+        >
+          <Box pad="medium" width={'medium'}>
+            <RegisterMeetingForm onSuccess={onAddSuccess} />
+          </Box>
+        </Layer>
+      )}
+    </>
+  );
+};
+
+export default RegisterMeeting;
diff --git a/src/frontend/magnify/src/components/meetings/RegisterMeetingForm/index.tsx b/src/frontend/magnify/src/components/meetings/RegisterMeetingForm/index.tsx
new file mode 100644
index 000000000..23b58ab7c
--- /dev/null
+++ b/src/frontend/magnify/src/components/meetings/RegisterMeetingForm/index.tsx
@@ -0,0 +1 @@
+export { default, RegisterMeetingFormProps } from './RegisterMeetingForm';