✨(frontend) add meetings component

src/frontend/.eslintrc

@@ -3,9 +3,9 @@
                 "eslint:recommended",
                 "plugin:jsx-a11y/recommended",
                 "plugin:prettier/recommended",
-                "plugin:react/recommended"
+
         ],
-        "plugins": ["@typescript-eslint","import","jsx-a11y","react"],
+        "plugins": ["@typescript-eslint","import","jsx-a11y"],
         "rules": {
                 "prettier/prettier": "error",
                 "arrow-body-style": "off",

src/frontend/demo/package.json

@@ -8,7 +8,7 @@
     "@jitsi-magnify/core": "0.1.0",
     "@jitsi/react-sdk": "1.1.0",
     "@tanstack/react-query": "4.7.2",
-    "@tanstack/react-query-devtools": "^4.8.0",
+    "@tanstack/react-query-devtools": "4.8.0",
     "axios": "0.27.2",
     "grommet": "2.25.3",
     "polished": "4.2.2",
@@ -21,7 +21,9 @@
     "stream-browserify": "3.0.0",
     "styled-components": "5.3.5",
     "validator": "13.7.0",
-    "web-vitals": "2.1.0"
+    "web-vitals": "2.1.0",
+    "@types/react-time-picker": "4.0.2",
+    "react-time-picker": "5.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "5.16.4",

src/frontend/demo/src/components/AppRouter/index.tsx

@@ -10,6 +10,7 @@ import {
 import { getAccountRoutes } from '../../utils/routes/account';
 import { getAuthRoute } from '../../utils/routes/auth';
 import { getJitsiRoutes } from '../../utils/routes/jitsi';
+import { getMeetingsRoutes } from '../../utils/routes/meetings';
 import { getRoomsRoutes, RoomsPath } from '../../utils/routes/rooms';
 import { getRootRoute } from '../../utils/routes/root';
 import { DefaultProvider } from '../DefaultProvider';
@@ -31,6 +32,7 @@ export const AppRouter = () => {
             { path: '/app/meetings', element: <Navigate to={RoomsPath.ROOMS} /> },
             { ...getAccountRoutes(intl) },
             { ...getRoomsRoutes(intl) },
+            { ...getMeetingsRoutes(intl) },
           ]),
         },
         { ...getAuthRoute() },

src/frontend/demo/src/components/DefaultProvider/index.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { AccountPath } from '../../utils/routes/account';
 import { AuthPath } from '../../utils/routes/auth';
 import { JitsiPath } from '../../utils/routes/jitsi';
+import { MeetingsPath } from '../../utils/routes/meetings';
 import { RoomsPath } from '../../utils/routes/rooms';
 import { RootPath } from '../../utils/routes/root';
 
@@ -26,6 +27,7 @@ export const DefaultProvider = ({ ...props }: DefaultProviderProps) => {
           navigate(JitsiPath.WEB_CONF.replace(':id', roomId));
         },
         goToRoomsList: () => navigate(RoomsPath.ROOMS),
+        goToMeetingList: () => navigate(MeetingsPath.MEETINGS),
         goToRoomSettings: (roomId?: string) => {
           if (roomId) {
             navigate(RoomsPath.ROOMS_SETTINGS.replace(':id', roomId));

src/frontend/demo/src/utils/routes/meetings/index.tsx

@@ -0,0 +1,32 @@
+import { defineMessages, IntlShape } from 'react-intl';
+import { Link, RouteObject } from 'react-router-dom';
+import { MeetingsListView } from '../../../views/meetings/list';
+import { RoomsListView } from '../../../views/rooms/list';
+import { RoomSettingsView } from '../../../views/rooms/settings';
+
+export enum MeetingsPath {
+  MEETINGS = '/app/meetings',
+  MEETINGS_SETTINGS = '/app/meetings/:id/settings',
+}
+
+const meetingsRouteLabels = defineMessages({
+  [MeetingsPath.MEETINGS]: {
+    defaultMessage: 'Meeting',
+    description: 'The label of the mettings view.',
+    id: 'utils.routes.meetings.meetings.label',
+  },
+});
+
+export const getMeetingsRoutes = (intl: IntlShape): RouteObject => {
+  return {
+    path: MeetingsPath.MEETINGS,
+    handle: {
+      crumb: () => (
+        <Link to={MeetingsPath.MEETINGS}>
+          {intl.formatMessage(meetingsRouteLabels[MeetingsPath.MEETINGS])}
+        </Link>
+      ),
+    },
+    children: [{ element: <MeetingsListView />, index: true }],
+  };
+};

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

@@ -0,0 +1,17 @@
+import { MyMeetings, createRandomMeeting } from '@jitsi-magnify/core';
+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={'Meetings'}>
+      <MyMeetings meetings={mySortedMeetingsList} />
+    </DefaultPage>
+  );
+}

src/frontend/magnify/package.json

@@ -36,7 +36,9 @@
     "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.2.1",
     "@types/jest": "28.1.1",
+    "@types/luxon": "3.1.0",
     "@types/react": "18.0.12",
+    "@types/react-time-picker": "4.0.2",
     "@types/styled-components": "5.1.25",
     "@types/validator": "13.7.3",
     "@typescript-eslint/eslint-plugin": "5.36.2",
@@ -56,15 +58,17 @@
     "jest": "28.1.1",
     "jest-css-modules": "2.1.0",
     "jest-environment-jsdom": "28.1.1",
+    "luxon": "3.1.1",
     "msw": "0.47.4",
     "postcss": "8.4.14",
     "prettier": "2.7.0",
+    "react-time-picker": "5.1.0",
     "rollup": "2.75.6",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
-    "storybook-addon-react-router-v6": "^0.2.1",
+    "storybook-addon-react-router-v6": "0.2.1",
     "ts-jest": "28.0.4",
     "ts-node": "10.8.1",
     "tslib": "2.4.0",
@@ -93,11 +97,12 @@
     "react-router-dom": "6.3.0",
     "styled-components": "5.3.5",
     "validator": "13.7.0",
-    "yup": "0.32.11"
+    "yup": "0.32.11", 
+    "react-time-picker": "5.1.0"
   },
   "dependencies": {
-    "@tanstack/react-query-devtools": "^4.8.0",
-    "react-router-dom": "6.4.1",
+    "@tanstack/react-query-devtools": "4.8.0",
+    "react-router-dom": "6.3.0",
     "use-debounce": "8.0.4"
   }
 }

src/frontend/magnify/src/components/app/MagnifyTestingProvider/index.tsx

@@ -41,15 +41,16 @@ export const MagnifyTestingProvider = (props: MagnifyTestingProviderProps) => {
       goToAccount: () => console.log('goToAccount'),
       goToJitsiRoom: () => console.log('goToJitsiRoom'),
       goToRoomsList: () => console.log('goToRoomsList'),
+      goToMeetingList: () => console.log('goToRoomsList'),
       goToRoomSettings: () => console.log('goToRoomSettings'),
     };
   };
 
   return (
-    <TranslationProvider defaultLocale="en-US" initTranslation={false} locale={locale}>
+    <TranslationProvider defaultLocale="en" initTranslation={false} locale={'en'}>
       <FormErrors />
       <RoutingContextProvider routes={getRouter()}>
-        <Grommet full theme={defaultTheme}>
+        <Grommet theme={defaultTheme}>
           <QueryClientProvider client={queryClient}>
             <ReactQueryDevtools initialIsOpen={false} />
             <AuthContextProvider

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

@@ -0,0 +1,27 @@
+import withFormik from '@bbbtech/storybook-formik';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import FormikDateTimePicker from './FormikDateTimePicker';
+
+export default {
+  title: 'Formik/DateTimePicker',
+  component: FormikDateTimePicker,
+  decorators: [withFormik],
+  initialValues: { date: new Date() },
+} as ComponentMeta<typeof FormikDateTimePicker>;
+
+const Template: ComponentStory<typeof FormikDateTimePicker> = (args, context) => (
+  <div>
+    {context.parameters.title}
+    <FormikDateTimePicker {...args} />
+  </div>
+);
+
+export const basicDateTimePicker = Template.bind({});
+
+basicDateTimePicker.args = {
+  timeName: 'time',
+  dateName: 'date',
+  frenchSuggestions: ['14:00', '15:00'],
+  localTimeSuggestions: ['2:00 PM', '3:00 PM'],
+};

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

@@ -0,0 +1,140 @@
+import { ErrorMessage, useField, useFormikContext } from 'formik';
+import { DateInput, DropButton, Box, Text } from 'grommet';
+import { CaretDown } from 'grommet-icons';
+import { DateTime, Settings } from 'luxon';
+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;
+  timeName: string;
+  frenchSuggestions: string[];
+  localTimeSuggestions: string[];
+  label: string;
+}
+
+const nextYear = new Date();
+nextYear.setFullYear(new Date().getFullYear() + 1);
+
+const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ...props }) => {
+  const [open, setOpen] = useState<boolean | undefined>(undefined);
+  const [dateField] = useField(props.dateName);
+  const [timeField] = useField(props.timeName);
+
+  const formikContext = useFormikContext();
+
+  const intl = useIntl();
+  Settings.defaultLocale = intl.locale;
+
+  const isToday =
+    DateTime.fromISO(dateField.value).toFormat('MM-dd-yyyy') ==
+    DateTime.now().toFormat('MM-dd-yyyy');
+  const beforeToday =
+    DateTime.fromISO(dateField.value).toFormat('MM-dd-yyyy') <
+    DateTime.now().toFormat('MM-dd-yyyy');
+
+  const onTimeChange = (value: string | undefined) => {
+    formikContext.setFieldValue(props.timeName, value ? value.toString() : undefined);
+
+    setOpen(false);
+  };
+
+  const onDateChange = (event: { value: string | string[] }) => {
+    let value: string;
+    if (Array.isArray(event.value)) {
+      value = '';
+      if (event.value.length > 0) {
+        value = event.value[0];
+      }
+    } else {
+      value = event.value;
+    }
+    formikContext.setFieldValue(props.dateName, value);
+  };
+
+  React.useEffect(() => {
+    if (timeField.value === undefined || timeField.value.length === 0) {
+      return;
+    }
+    formikContext.setFieldTouched(props.timeName, true);
+  }, [timeField.value, dateField.value]);
+
+  const suggestionButtons = props.localTimeSuggestions.map((value: string, index: number) => (
+    <SuggestionButton
+      key={value}
+      beforeToday={beforeToday}
+      buttonValue={value}
+      choiceValue={timeField.value}
+      frenchButtonValue={props.frenchSuggestions[index]}
+      isToday={isToday}
+      onClick={onTimeChange}
+    />
+  ));
+
+  return (
+    <Box gap={'5px'}>
+      {props.label != '' && (
+        <label htmlFor={props.dateName}>
+          <Text size={'xsmall'} weight={'bold'}>
+            {props.label}
+          </Text>
+        </label>
+      )}
+      <div>
+        <Box align="start" basis="1" direction="column" gap="small">
+          <DateInput
+            {...dateField}
+            format={intl.locale === 'fr' ? 'jj/mm/aaaa' : 'yyyy/mm/dd'}
+            name={props.dateName}
+            onChange={onDateChange}
+            calendarProps={{
+              bounds: [new Date().toISOString(), nextYear.toISOString()],
+              size: 'small',
+            }}
+          ></DateInput>
+          <Box align="center" direction="row" gap="small">
+            <TimePicker
+              {...timeField}
+              disableClock
+              locale={intl.locale}
+              name={props.timeName}
+              onChange={(value: TimePickerValue) =>
+                onTimeChange(value ? value.toString() : undefined)
+              }
+            ></TimePicker>
+            <DropButton
+              dropAlign={{ top: 'bottom' }}
+              onClose={() => setOpen(false)}
+              open={open}
+              dropContent={
+                <Box align="center" basis="small" direction="column" gap="5px">
+                  {suggestionButtons}
+                </Box>
+              }
+              onOpen={() => {
+                setOpen(true);
+              }}
+            >
+              <CaretDown size="15px" />
+            </DropButton>
+          </Box>
+          <ErrorMessage
+            name={props.dateName}
+            render={(msg: string) => {
+              return (
+                <Text color={'accent-1'} size={'xsmall'}>
+                  {msg}
+                </Text>
+              );
+            }}
+          />
+        </Box>
+      </div>
+    </Box>
+  );
+};
+
+export default FormikDateTimePicker;

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

@@ -0,0 +1,45 @@
+import { Box, Button, Text } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
+import { DateTime } from 'luxon';
+import React, { FunctionComponent, ReactElement } from 'react';
+import { useTheme } from 'styled-components';
+import { mergeDateTime } from './utils';
+
+const today = DateTime.now().toISO();
+
+export interface suggestionButtonProps {
+  buttonValue: string;
+  frenchButtonValue: string;
+  choiceValue: string;
+  onClick: (value: string) => void;
+  isToday: boolean;
+  beforeToday: boolean;
+}
+
+const SuggestionButton: FunctionComponent<suggestionButtonProps> = ({ ...props }): ReactElement => {
+  const isChosenButton: boolean = props.frenchButtonValue == props.choiceValue;
+  const chosenDateTime = mergeDateTime(today, props.frenchButtonValue);
+  const isButtonBeforeNow: boolean = chosenDateTime ? chosenDateTime < today : false;
+  const theme = useTheme();
+  return (
+    <Button
+      color={isChosenButton ? `${normalizeColor('light-2', theme)}` : 'black'}
+      disabled={props.beforeToday || (props.isToday && isButtonBeforeNow)}
+      fill={isChosenButton ? 'horizontal' : false}
+      justify="center"
+      margin={{ top: 'xsmall' }}
+      primary={isChosenButton}
+      onClick={() => {
+        props.onClick(props.frenchButtonValue);
+      }}
+    >
+      <Box alignContent="center" alignSelf="center">
+        <Text color="black" textAlign="center">
+          {props.buttonValue}
+        </Text>
+      </Box>
+    </Button>
+  );
+};
+
+export default SuggestionButton;

src/frontend/magnify/src/components/design-system/Formik/FormikDateTimePicker/index.ts

@@ -0,0 +1 @@
+export { default, formikDateTimePickerProps } from '../FormikDateTimePicker/FormikDateTimePicker';