Merge pull request #9909 from CitizenLabDotCo/replace-date-time-picker

Replace date time picker

front/app/api/event_files/useEventFiles.ts

@@ -7,14 +7,14 @@ import { isNilOrError } from 'utils/helperUtils';
 import eventFilesKeys from './keys';
 import { IEventFiles, EventFilesKeys } from './types';
 
-const fetchEvents = ({ eventId }: { eventId: string }) => {
+const fetchEvents = ({ eventId }: { eventId: string | undefined }) => {
   return fetcher<IEventFiles>({
     path: `/events/${eventId}/files`,
     action: 'get',
   });
 };
 
-const useEventFiles = (eventId: string) => {
+const useEventFiles = (eventId: string | undefined) => {
   return useQuery<IEventFiles, CLErrors, IEventFiles, EventFilesKeys>({
     queryKey: eventFilesKeys.list({ eventId }),
     queryFn: () => fetchEvents({ eventId }),

front/app/api/events/types.ts

@@ -72,6 +72,8 @@ export interface IEvents {
 }
 
 export interface IEventProperties {
+  start_at?: string;
+  end_at?: string;
   project_id?: string;
   title_multiloc?: Multiloc;
   description_multiloc?: Multiloc;
@@ -80,8 +82,6 @@ export interface IEventProperties {
   address_1?: string | null;
   location_point_geojson?: GeoJSON.Point | null;
   online_link?: string;
-  start_at?: string;
-  end_at?: string;
   attend_button_multiloc?: Multiloc;
   using_url?: RouteType;
 }

front/app/component-library/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import Tippy from '@tippyjs/react';
@@ -29,7 +29,7 @@ const useActiveElement = () => {
     return () => {
       document.removeEventListener('click', handleOutsideClick);
     };
-  });
+  }, []);
 
   useEffect(() => {
     document.addEventListener('focusin', handleFocusIn);
@@ -41,6 +41,29 @@ const useActiveElement = () => {
   return active;
 };
 
+const PLUGINS = [
+  {
+    name: 'hideOnEsc',
+    defaultValue: true,
+    fn({ hide }) {
+      function onKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+          hide();
+        }
+      }
+
+      return {
+        onShow() {
+          document.addEventListener('keydown', onKeyDown);
+        },
+        onHide() {
+          document.removeEventListener('keydown', onKeyDown);
+        },
+      };
+    },
+  },
+];
+
 const TippyComponent = ({
   children,
   theme,
@@ -50,6 +73,7 @@ const TippyComponent = ({
   setIsFocused,
   setKey,
   tooltipId,
+  onHidden,
   ...rest
 }: {
   children: React.ReactNode;
@@ -61,39 +85,26 @@ const TippyComponent = ({
   setKey: React.Dispatch<React.SetStateAction<number>>;
   tooltipId: React.MutableRefObject<string>;
 } & TooltipProps) => {
+  // This component sometimes crashes because of re-renders.
+  // This useCallback slightly improves the situation (i.e. it makes it
+  // slightly less likely for the component to crash).
+  // But in the end we just need to completely rewrite this whole component
+  // to fix the issue properly.
+  // https://www.notion.so/govocal/Fix-Tooltip-component-16f9663b7b2680a48aebdf2ace15d1f8
+  const handleOnHidden = useCallback(() => {
+    setIsFocused(undefined);
+    setKey((prev) => prev + 1);
+  }, [setIsFocused, setKey]);
+
   return (
     <Tippy
       key={componentKey}
-      plugins={[
-        {
-          name: 'hideOnEsc',
-          defaultValue: true,
-          fn({ hide }) {
-            function onKeyDown(event: KeyboardEvent) {
-              if (event.key === 'Escape') {
-                hide();
-              }
-            }
-
-            return {
-              onShow() {
-                document.addEventListener('keydown', onKeyDown);
-              },
-              onHide() {
-                document.removeEventListener('keydown', onKeyDown);
-              },
-            };
-          },
-        },
-      ]}
+      plugins={PLUGINS}
       interactive={true}
       role="tooltip"
       visible={isFocused}
       // Ensures tippy works with both keyboard and mouse
-      onHidden={() => {
-        setIsFocused(undefined);
-        setKey((prev) => prev + 1);
-      }}
+      onHidden={onHidden ?? handleOnHidden}
       theme={theme}
       {...rest}
     >

front/app/components/admin/DatePickers/DateSinglePicker/Calendar/index.tsx

@@ -46,7 +46,7 @@ const Calendar = ({
         locale={getLocale(locale)}
         startMonth={startMonth}
         endMonth={endMonth}
-        defaultMonth={defaultMonth}
+        defaultMonth={defaultMonth ?? selectedDate}
         selected={selectedDate}
         onSelect={onChange}
         timeZone={userTimezone}

front/app/components/admin/DatePickers/DateSinglePicker/DateSinglePicker.stories.tsx

@@ -17,11 +17,7 @@ const WrapperStandard = () => {
   const [selectedDate, setSelectedDate] = useState<Date>();
 
   return (
-    <DateSinglePicker
-      selectedDate={selectedDate}
-      defaultMonth={new Date(2024, 9, 1)}
-      onChange={setSelectedDate}
-    />
+    <DateSinglePicker selectedDate={selectedDate} onChange={setSelectedDate} />
   );
 };
 

front/app/components/admin/DatePickers/DateSinglePicker/index.tsx

@@ -17,6 +17,7 @@ const DateSinglePicker = ({
   startMonth,
   endMonth,
   defaultMonth,
+  placement = 'bottom',
   onChange,
 }: Props) => {
   const [calendarOpen, setCalendarOpen] = useState(false);
@@ -44,7 +45,7 @@ const DateSinglePicker = ({
             />
           </Box>
         }
-        placement="bottom"
+        placement={placement}
         visible={calendarOpen}
       >
         <Input

front/app/components/admin/DatePickers/DateSinglePicker/typings.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line no-restricted-imports
+import Tippy from '@tippyjs/react';
+
 export interface CalendarProps {
   startMonth?: Date;
   endMonth?: Date;
@@ -9,4 +12,5 @@ export interface CalendarProps {
 export interface Props extends CalendarProps {
   id?: string;
   disabled?: boolean;
+  placement?: React.ComponentProps<typeof Tippy>['placement'];
 }