✨(frontend) add meeting list page in demo

With the new meetings feature, we need to add a meetings page in the
demo as well as in the router and navigation bar.

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,11 @@
+import { MyMeetings, createRandomMeeting } from '@jitsi-magnify/core';
+import * as React from 'react';
+import { DefaultPage } from '../../../components/DefaultPage';
+
+export function MeetingsListView() {
+  return (
+    <DefaultPage title={'test'}>
+      <MyMeetings meetings={[createRandomMeeting(), createRandomMeeting()]} />
+    </DefaultPage>
+  );
+}

src/frontend/magnify/package.json

@@ -36,9 +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/luxon": "3.1.0",
     "@types/react": "18.0.12",
-    "@types/react-time-picker": "^4.0.2",
+    "@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",
@@ -58,17 +58,17 @@
     "jest": "28.1.1",
     "jest-css-modules": "2.1.0",
     "jest-environment-jsdom": "28.1.1",
-    "luxon": "^3.1.1",
+    "luxon": "3.1.1",
     "msw": "0.47.4",
     "postcss": "8.4.14",
     "prettier": "2.7.0",
-    "react-time-picker": "^5.1.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",
@@ -97,10 +97,11 @@
     "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",
+    "@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.tsx

@@ -24,6 +24,7 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
   const [timeField] = useField(props.timeName);
 
   const formikContext = useFormikContext();
+
   const intl = useIntl();
   Settings.defaultLocale = intl.locale;
 
@@ -36,6 +37,7 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
 
   const onTimeChange = (value: string | undefined) => {
     formikContext.setFieldValue(props.timeName, value ? value.toString() : undefined);
+
     setOpen(false);
   };
 
@@ -53,8 +55,11 @@ const FormikDateTimePicker: FunctionComponent<formikDateTimePickerProps> = ({ ..
   };
 
   React.useEffect(() => {
-    console.log(formikContext.errors, formikContext.values);
-  }, [formikContext.values, formikContext.errors]);
+    if (timeField.value === undefined || timeField.value.length === 0) {
+      return;
+    }
+    formikContext.setFieldTouched(props.timeName, true);
+  }, [timeField.value]);
 
   const suggestionButtons = props.localTimeSuggestions.map((value: string, index: number) => (
     <SuggestionButton

src/frontend/magnify/src/components/design-system/Layout/Header/Nav/ResponsiveLayoutHeaderNav.tsx

@@ -1,5 +1,5 @@
 import { Box } from 'grommet';
-import { AppsRounded } from 'grommet-icons';
+import { AppsRounded, Calendar } from 'grommet-icons';
 import * as React from 'react';
 import { FunctionComponent } from 'react';
 import { useRouting } from '../../../../../context/routing';
@@ -23,6 +23,11 @@ export const ResponsiveLayoutHeaderNav: FunctionComponent<ResponsiveLayoutHeader
       label: 'Rooms',
       goToRoute: routing.goToRoomsList,
     },
+    {
+      icon: <Calendar aria-label={''} color={'plain'} size={'18px'} />,
+      label: 'Meetings',
+      goToRoute: routing.goToMeetingList,
+    },
   ];
 
   return (

src/frontend/magnify/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './profile';
 export * from './rooms';
 export * from './jitsi';
 export * from './app';
+export * from './meetings';

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

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 import { withRouter } from 'storybook-addon-react-router-v6';
-import createRandomMeeting from '../../../factories/meetings';
+import {createRandomMeeting} from '../../../factories/meetings';
 import createRandomRoom from '../../../factories/rooms';
 import { Meeting } from '../../../types/entities/meeting';
 import MeetingRow, { MeetingRowProps } from './MeetingRow';

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

@@ -1,7 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
-import createRandomMeeting from '../../../factories/meetings';
-import MyMeetings from './MyMeetings';
+import { createRandomMeeting } from '../../../factories/meetings';
+import { MyMeetings } from './MyMeetings';
 
 export default {
   title: 'Meetings/MyMeetings',

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

@@ -24,7 +24,7 @@ export interface MyMeetingsProps {
   meetings: Meeting[] | undefined;
 }
 
-const MyMeetings = ({ meetings = [] }: MyMeetingsProps) => {
+export const MyMeetings = ({ meetings = [] }: MyMeetingsProps) => {
   const intl = useTranslations();
   return (
     <Card background={'white'} gap={'small'} pad={'medium'}>
@@ -49,5 +49,3 @@ const MyMeetings = ({ meetings = [] }: MyMeetingsProps) => {
     </Card>
   );
 };
-
-export default MyMeetings;

src/frontend/magnify/src/components/meetings/MyMeetings/index.ts

@@ -0,0 +1 @@
+export * from './MyMeetings';

src/frontend/magnify/src/components/meetings/index.ts

@@ -0,0 +1 @@
+export * from './MyMeetings';

src/frontend/magnify/src/context/routing/index.tsx

@@ -9,6 +9,7 @@ export interface RoutingContextInterface {
   goToAccount: () => void;
   goToJitsiRoom: (roomId: string) => void;
   goToRoomsList: () => void;
+  goToMeetingList: () => void;
   goToRoomSettings: (roomId?: string) => void;
 }
 

src/frontend/magnify/src/factories/index.ts

@@ -0,0 +1 @@
+export * from './meetings';

src/frontend/magnify/src/factories/meetings/index.ts

@@ -2,7 +2,7 @@ import { faker } from '@faker-js/faker';
 import { Room } from '../../types';
 import { Meeting, defaultRecurrenceConfiguration } from '../../types/entities/meeting';
 
-export default function createRandomMeeting(isReccurent = false, room?: Room): Meeting {
+export const createRandomMeeting = (isReccurent = false, room?: Room): Meeting => {
   const id = faker.datatype.uuid();
   const name = faker.lorem.slug();
   const startDate = faker.date.between(new Date().toLocaleDateString(), '2030-01-01T00:00:00.000Z');
@@ -20,4 +20,4 @@ export default function createRandomMeeting(isReccurent = false, room?: Room): M
     },
     recurrenceConfiguration: isReccurent ? defaultRecurrenceConfiguration : undefined,
   };
-}
+};

src/frontend/magnify/src/index.ts

@@ -6,3 +6,4 @@ export * from './context';
 export * from './utils';
 export * from './services';
 export * from './types';
+export * from './factories';