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; + +const Template: ComponentStory = () => ; + +// 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 ( + <> +