✨(frontend) add meeting register form

add a form which enables the user to register the meeting. On success,
the meeting is saved to local storage. Since changes to local storage do
not cause react to rerender anything, you need to refresh the page for
the meeting to appear in the meeting list view.

src/frontend/demo/src/views/meetings/list/index.tsx

@@ -3,9 +3,15 @@ import * as React from 'react';
 import { DefaultPage } from '../../../components/DefaultPage';
 
 export function MeetingsListView() {
+  const myMeetings: string | null = localStorage.getItem('meetings');
+  const myMeetingsList: any = myMeetings ? JSON.parse(myMeetings) : [];
+  const mySortedMeetingsList = myMeetingsList.sort(
+    (a: any, b: any) => new Date(a.startDateTime).getTime() - new Date(b.startDateTime).getTime(),
+  );
+
   return (
-    <DefaultPage title={'test'}>
-      <MyMeetings meetings={[createRandomMeeting(), createRandomMeeting()]} />
+    <DefaultPage title={'Meetings'}>
+      <MyMeetings meetings={mySortedMeetingsList} />
     </DefaultPage>
   );
 }

src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/FormikDateTimePicker.tsx

@@ -6,6 +6,7 @@ import React, { FunctionComponent, useState } from 'react';
 import { useIntl } from 'react-intl';
 import TimePicker, { TimePickerValue } from 'react-time-picker';
 import SuggestionButton from './SuggestionButton';
+import { mergeDateTime } from './utils';
 
 export interface formikDateTimePickerProps {
   dateName: string;
@@ -59,7 +60,7 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
       return;
     }
     formikContext.setFieldTouched(props.timeName, true);
-  }, [timeField.value]);
+  }, [timeField.value, dateField.value]);
 
   const suggestionButtons = props.localTimeSuggestions.map((value: string, index: number) => (
     <SuggestionButton
@@ -83,7 +84,7 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
         </label>
       )}
       <div>
-        <Box align="center" basis="1" direction="column" gap="small">
+        <Box align="start" basis="1" direction="column" gap="small">
           <DateInput
             {...dateField}
             format={intl.locale === 'fr' ? 'jj/mm/aaaa' : 'yyyy/mm/dd'}
@@ -94,7 +95,6 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
               size: 'small',
             }}
           ></DateInput>
-
           <Box align="center" direction="row" gap="small">
             <TimePicker
               {...timeField}
@@ -121,6 +121,16 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
               <CaretDown size="15px" />
             </DropButton>
           </Box>
+          <ErrorMessage
+            name={props.dateName}
+            render={(msg: string) => {
+              return (
+                <Text color={'accent-1'} size={'xsmall'}>
+                  {msg}
+                </Text>
+              );
+            }}
+          />
         </Box>
       </div>
     </Box>

src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/SuggestionButton.tsx

@@ -31,7 +31,6 @@ const SuggestionButton: FunctionComponent<suggestionButtonProps> = ({ ...props }
       primary={isChosenButton}
       onClick={() => {
         props.onClick(props.frenchButtonValue);
-        console.log(`chosenDateTime : ${chosenDateTime}`);
       }}
     >
       <Box alignContent="center" alignSelf="center">

src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/utils.tsx

@@ -12,11 +12,11 @@ export const splitDateTime = (dateTimeISO: string | null): { date: string; time:
 };
 
 export const mergeDateTime = (
-  dateString: string | null,
-  timeString: string | null,
-): string | null => {
+  dateString: string | undefined,
+  timeString: string | undefined,
+): string | undefined => {
   if (!dateString || !timeString) {
-    return null;
+    return undefined;
   }
   try {
     const time = Duration.fromISOTime(timeString);
@@ -26,6 +26,6 @@ export const mergeDateTime = (
     });
     return dateTime.toISO();
   } catch (e) {
-    return null;
+    return undefined;
   }
 };

src/frontend/magnify/src/components/meetings/MeetingRow/MeetingRow.tsx

@@ -1,12 +1,13 @@
 import { defineMessage } from '@formatjs/intl';
 import { Box, Button, ButtonExtendedProps, Card, Menu, Notification, Spinner, Text } from 'grommet';
 import { MoreVertical } from 'grommet-icons';
+import { Interval } from 'luxon';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { useRouting } from '../../../context';
 
 import { useIsSmallSize } from '../../../hooks/useIsMobile';
 import { Meeting } from '../../../types/entities/meeting';
-import { Room } from '../../../types/entities/room';
 
 export interface MeetingRowProps {
   meeting: Meeting;
@@ -24,24 +25,24 @@ export default function MeetingRow({ meeting }: MeetingRowProps) {
   const intl = useIntl();
   const isSmallSize = useIsSmallSize();
   const menuItems: ButtonExtendedProps[] = [];
+  const startDateTime: Date = new Date(meeting.startDateTime);
+  const endDateTime: Date = new Date(meeting.endDateTime);
+  const routing = useRouting();
 
-  const convertToHourMinutesFormat = (numberMinutes: number): string => {
-    const nbHours = Math.floor(numberMinutes / 60);
-    const nbMinutes = numberMinutes - 60 * nbHours;
-    return nbHours > 0 ? `${nbHours} h ${nbMinutes} min` : `${nbMinutes} min`;
-  };
+  const meetingDay = startDateTime.toLocaleDateString(intl.locale, {
+    year: '2-digit',
+    month: '2-digit',
+    day: '2-digit',
+  });
 
-  const zeroFormatNumber = (number: number): string => {
-    return number < 10 ? '0' + number.toString() : number.toString();
-  };
+  const meetingHour = startDateTime.toLocaleTimeString(intl.locale, {
+    timeStyle: 'short',
+  });
 
-  const meetingDay = `${zeroFormatNumber(meeting.startDateTime.getDay())}/${zeroFormatNumber(
-    meeting.startDateTime.getMonth() + 1,
-  )}/${meeting.startDateTime.getFullYear()}`;
-
-  const meetingHour = `${zeroFormatNumber(meeting.startDateTime.getHours())}:${zeroFormatNumber(
-    meeting.startDateTime.getMinutes(),
-  )}`;
+  const expectedDuration = Interval.fromDateTimes(startDateTime, endDateTime).toDuration([
+    'hours',
+    'minutes',
+  ]);
 
   return (
     <Card background="light-2" elevation="0" pad="small" style={{ position: 'relative' }}>
@@ -73,7 +74,7 @@ export default function MeetingRow({ meeting }: MeetingRowProps) {
               {meetingHour}
             </Text>
             <Text color="brand" size="small">
-              {convertToHourMinutesFormat(meeting.expectedDuration)}
+              {`${expectedDuration.hours}h ${Math.floor(expectedDuration.minutes)}min`}
             </Text>
           </Box>
         </Box>
@@ -86,7 +87,16 @@ export default function MeetingRow({ meeting }: MeetingRowProps) {
         </Box>
         <Box align={'center'} direction="row" fill={isSmallSize} margin="auto 0px">
           <Box flex={{ grow: 1 }}>
-            <Button primary fill={isSmallSize} label={intl.formatMessage(messages.join)} />
+            <Button
+              primary
+              fill={isSmallSize}
+              label={intl.formatMessage(messages.join)}
+              onClick={() =>
+                meeting.room
+                  ? routing.goToJitsiRoom(meeting.room.slug)
+                  : routing.goToJitsiRoom(meeting.name)
+              }
+            />
           </Box>
           <Menu
             dropProps={{ align: { top: 'bottom', left: 'left' } }}

src/frontend/magnify/src/components/meetings/MyMeetings/MyMeetings.stories.tsx

@@ -1,15 +1,21 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-import { createRandomMeeting } from '../../../factories/meetings';
+import { Meeting } from '../../../types';
 import { MyMeetings } from './MyMeetings';
 
 export default {
   title: 'Meetings/MyMeetings',
   component: MyMeetings,
 } as ComponentMeta<typeof MyMeetings>;
 
+const myMeetings: string | null = localStorage.getItem('meetings');
+const myMeetingsList: Meeting[] = myMeetings ? JSON.parse(myMeetings) : [];
+const mySortedMeetingsList = myMeetingsList.sort(
+  (a, b) => new Date(a.startDateTime).getTime() - new Date(b.startDateTime).getTime(),
+);
+
 const Template: ComponentStory<typeof MyMeetings> = (args) => (
-  <MyMeetings meetings={[createRandomMeeting(), createRandomMeeting()]} />
+  <MyMeetings meetings={mySortedMeetingsList} />
 );
 
 // create the template and stories