✨(frontend) add meeting register form

add a form which enables the user to register the meeting

Author: karabij

src/frontend/magnify/package.json

@@ -36,6 +36,7 @@
     "@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",
@@ -57,6 +58,7 @@
     "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",

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

@@ -0,0 +1,30 @@
+import withFormik from '@bbbtech/storybook-formik';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getSuggestions } from '../../../meetings/RegisterMeetingForm/utils';
+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({});
+const intl = useIntl();
+
+basicDateTimePicker.args = {
+  timeName: 'time',
+  dateName: 'date',
+  frenchSuggestions: getSuggestions('fr'),
+  localTimeSuggestions: getSuggestions(intl.locale),
+};

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

@@ -0,0 +1,152 @@
+import { ErrorMessage, useField, useFormikContext } from 'formik';
+import { DateInput, DropButton, Box, Text } from 'grommet';
+import { DateTime, Settings } from 'luxon';
+import React, { FunctionComponent, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import TimePicker, { TimePickerValue } from 'react-time-picker';
+import SuggestionButton from './SuggestionButton';
+import { mergeDateTime } from './utils';
+
+const messages = defineMessages({
+  invalidTime: {
+    defaultMessage: 'Input time is not valid: Starting time should be set in the future.',
+    description: 'Error message when event scheduling date time update is in the past.',
+    id: 'components.design-system.Formik.FormikDateTimePicker.invalidTime',
+  },
+});
+
+export interface formikDateTimePickerProps {
+  dateName: string;
+  timeName: string;
+  frenchSuggestions: string[];
+  localTimeSuggestions: 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 [timeError, setTimeError] = useState(false);
+
+  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 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);
+  };
+
+  const onTimeChange = (value: TimePickerValue | string) => {
+    formikContext.setFieldValue(props.timeName, value.toString());
+    console.log(formikContext.errors, formikContext.values);
+  };
+
+  const determineIfTimeError = () => {
+    const chosenDateTime = mergeDateTime(dateField.value, timeField.value);
+    if (
+      timeField.value == undefined
+        ? new Date(dateField.value).setHours(0, 0, 0, 0) < new Date().setHours(0, 0, 0, 0)
+        : timeField.value == null
+        ? true
+        : chosenDateTime
+        ? chosenDateTime < DateTime.local().toISO()
+        : false
+    ) {
+      console.log('coucou');
+      formikContext.setFieldError(props.timeName, 'nein !!');
+    }
+  };
+
+  const onTimeSelectChange = (value: string) => {
+    onTimeChange(value);
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    determineIfTimeError();
+    console.log(`date: ${dateField.value}`);
+    console.log(`time:${timeField.value}`);
+    console.log(`dateTime: ${mergeDateTime(dateField.value, timeField.value)}`);
+    console.log(formikContext);
+  }, [dateField.value, timeField.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={onTimeSelectChange}
+    />
+  ));
+
+  return (
+    <Box>
+      <DateInput
+        format={intl.locale === 'fr' ? 'jj/mm/aaaa' : 'yyyy/mm/dd'}
+        name={props.dateName}
+        onChange={onDateChange}
+        value={dateField.value ? new Date(dateField.value).toISOString() : ''}
+        calendarProps={{
+          bounds: [new Date().toISOString(), nextYear.toISOString()],
+          size: 'small',
+        }}
+      ></DateInput>
+      <Box align="start" pad="small">
+        <DropButton
+          dropAlign={{ top: 'bottom' }}
+          onClose={() => setOpen(false)}
+          open={open}
+          dropContent={
+            <Box align="center" basis="small" direction="column" gap="5px">
+              {suggestionButtons}
+            </Box>
+          }
+          onOpen={() => {
+            setOpen(true);
+          }}
+        >
+          <TimePicker
+            disableClock
+            locale={intl.locale}
+            onChange={onTimeChange}
+            value={timeField.value}
+          ></TimePicker>
+        </DropButton>
+      </Box>
+      <ErrorMessage
+        name={props.timeName}
+        render={(msg: string) => {
+          return (
+            <Text color={'accent-1'} size={'xsmall'}>
+              {msg}
+            </Text>
+          );
+        }}
+      ></ErrorMessage>
+    </Box>
+  );
+};
+
+export default FormikDateTimePicker;

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

@@ -0,0 +1,44 @@
+import { Box, Button, Text } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
+import React, { FunctionComponent, ReactElement } from 'react';
+import { useTheme } from 'styled-components';
+import { mergeDateTime } from './utils';
+
+const today = new Date().toISOString();
+
+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.buttonValue == props.choiceValue;
+  const chosenDateTime = mergeDateTime(today, props.buttonValue);
+  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/FormikDateTimePicker.stories.tsx

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