diff --git a/src/frontend/demo/src/views/meetings/list/index.tsx b/src/frontend/demo/src/views/meetings/list/index.tsx index ac5ce0565..d25abe487 100644 --- a/src/frontend/demo/src/views/meetings/list/index.tsx +++ b/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 ( - - + + ); } diff --git a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/FormikDateTimePicker.tsx b/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/FormikDateTimePicker.tsx index acdae858c..5d86090a4 100644 --- a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/FormikDateTimePicker.tsx +++ b/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 = ({ .. return; } formikContext.setFieldTouched(props.timeName, true); - }, [timeField.value]); + }, [timeField.value, dateField.value]); const suggestionButtons = props.localTimeSuggestions.map((value: string, index: number) => ( = ({ .. )}
- + = ({ .. size: 'small', }} > - = ({ .. + { + return ( + + {msg} + + ); + }} + />
diff --git a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/SuggestionButton.tsx b/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/SuggestionButton.tsx index deb5c46dc..553570368 100644 --- a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/SuggestionButton.tsx +++ b/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/SuggestionButton.tsx @@ -31,7 +31,6 @@ const SuggestionButton: FunctionComponent = ({ ...props } primary={isChosenButton} onClick={() => { props.onClick(props.frenchButtonValue); - console.log(`chosenDateTime : ${chosenDateTime}`); }} > diff --git a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/utils.tsx b/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/utils.tsx index 80ce64964..748bf10c8 100644 --- a/src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/utils.tsx +++ b/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; } }; diff --git a/src/frontend/magnify/src/components/meetings/MeetingRow/MeetingRow.tsx b/src/frontend/magnify/src/components/meetings/MeetingRow/MeetingRow.tsx index 7ba63cacb..69be154bd 100644 --- a/src/frontend/magnify/src/components/meetings/MeetingRow/MeetingRow.tsx +++ b/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 ( @@ -73,7 +74,7 @@ export default function MeetingRow({ meeting }: MeetingRowProps) { {meetingHour} - {convertToHourMinutesFormat(meeting.expectedDuration)} + {`${expectedDuration.hours}h ${Math.floor(expectedDuration.minutes)}min`} @@ -86,7 +87,16 @@ export default function MeetingRow({ meeting }: MeetingRowProps) { -