#12 topbar search (#371)

- added search in topbar
 - added skeleton search results page
 - added tests
 - set personal calendars as default search in and allow to select personal and shared as a search in option

---------

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.tsx

@@ -45,6 +45,7 @@ import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 import frLocale from "@fullcalendar/core/locales/fr";
 import ruLocale from "@fullcalendar/core/locales/ru";
 import viLocale from "@fullcalendar/core/locales/vi";
+import SearchResultsPage from "../../features/Search/SearchResultsPage";
 
 const localeMap: Record<string, any> = {
   fr: frLocale,
@@ -76,7 +77,7 @@ export default function CalendarApp({
       dispatch(push("/"));
     }
   }, [dispatch, tokens, userId]);
-
+  const view = useAppSelector((state) => state.settings.view);
   const calendars = useAppSelector((state) => state.calendars.list);
   const tempcalendars = useAppSelector((state) => state.calendars.templist);
   const [selectedCalendars, setSelectedCalendars] = useState<string[]>([]);
@@ -116,6 +117,14 @@ export default function CalendarApp({
   const [eventErrors, setEventErrors] = useState<string[]>([]);
   const errorHandler = useRef(new EventErrorHandler());
 
+  // useEffect(() => {
+  //   if (view === "search") {
+  //     document.body.classList.add("dialog-expanded");
+  //   } else {
+  //     document.body.classList.remove("dialog-expanded");
+  //   }
+  // }, [view]);
+
   useEffect(() => {
     const handler = errorHandler.current;
     handler.setErrorCallback(setEventErrors);
@@ -628,149 +637,152 @@ export default function CalendarApp({
       </Box>
       <div className="calendar">
         <ImportAlert />
-        <FullCalendar
-          ref={(ref) => {
-            if (ref) {
-              calendarRef.current = ref.getApi();
+        {view === "calendar" && (
+          <FullCalendar
+            ref={(ref) => {
+              if (ref) {
+                calendarRef.current = ref.getApi();
+              }
+            }}
+            plugins={[
+              dayGridPlugin,
+              timeGridPlugin,
+              interactionPlugin,
+              momentTimezonePlugin,
+            ]}
+            initialView="timeGridWeek"
+            firstDay={1}
+            editable={true}
+            locale={localeMap[lang]}
+            selectable={true}
+            timeZone={timezone}
+            height={"100%"}
+            select={eventHandlers.handleDateSelect}
+            nowIndicator
+            slotLabelClassNames={(arg) => [
+              updateSlotLabelVisibility(new Date(), arg, timezone),
+            ]}
+            nowIndicatorContent={viewHandlers.handleNowIndicatorContent}
+            headerToolbar={false}
+            views={{
+              timeGridWeek: { titleFormat: { month: "long", year: "numeric" } },
+            }}
+            dayMaxEvents={true}
+            events={eventToFullCalendarFormat(
+              filteredEvents,
+              filteredTempEvents,
+              userId
+            )}
+            weekNumbers={
+              currentView === "timeGridWeek" || currentView === "timeGridDay"
             }
-          }}
-          plugins={[
-            dayGridPlugin,
-            timeGridPlugin,
-            interactionPlugin,
-            momentTimezonePlugin,
-          ]}
-          initialView="timeGridWeek"
-          firstDay={1}
-          editable={true}
-          locale={localeMap[lang]}
-          selectable={true}
-          timeZone={timezone}
-          height={"100%"}
-          select={eventHandlers.handleDateSelect}
-          nowIndicator
-          slotLabelClassNames={(arg) => [
-            updateSlotLabelVisibility(new Date(), arg, timezone),
-          ]}
-          nowIndicatorContent={viewHandlers.handleNowIndicatorContent}
-          headerToolbar={false}
-          views={{
-            timeGridWeek: { titleFormat: { month: "long", year: "numeric" } },
-          }}
-          dayMaxEvents={true}
-          events={eventToFullCalendarFormat(
-            filteredEvents,
-            filteredTempEvents,
-            userId
-          )}
-          weekNumbers={
-            currentView === "timeGridWeek" || currentView === "timeGridDay"
-          }
-          weekNumberFormat={{ week: "long" }}
-          weekNumberContent={(arg) => {
-            return (
-              <div className="weekSelector">
-                <div>
-                  {t("menubar.views.week")} {arg.num}
-                </div>
-                <TimezoneSelector
-                  value={timezone}
-                  referenceDate={calendarRef.current?.getDate() ?? new Date()}
-                  onChange={(newTimezone: string) =>
-                    dispatch(setTimeZone(newTimezone))
-                  }
-                />
-              </div>
-            );
-          }}
-          dayCellContent={(arg) => {
-            const month = arg.date.toLocaleDateString(t("locale"), {
-              month: "short",
-            });
-            if (arg.view.type === "dayGridMonth") {
+            weekNumberFormat={{ week: "long" }}
+            weekNumberContent={(arg) => {
               return (
-                <span
-                  className={`fc-daygrid-day-number ${
-                    arg.isToday ? "current-date" : ""
-                  }`}
-                >
-                  {arg.dayNumberText === "1" ? month : ""} {arg.dayNumberText}
-                </span>
+                <div className="weekSelector">
+                  <div>
+                    {t("menubar.views.week")} {arg.num}
+                  </div>
+                  <TimezoneSelector
+                    value={timezone}
+                    referenceDate={calendarRef.current?.getDate() ?? new Date()}
+                    onChange={(newTimezone: string) =>
+                      dispatch(setTimeZone(newTimezone))
+                    }
+                  />
+                </div>
               );
-            }
-          }}
-          slotDuration={"00:30:00"}
-          slotLabelInterval={"01:00:00"}
-          scrollTime="12:00:00"
-          unselectAuto={false}
-          allDayText=""
-          slotLabelFormat={{
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: false,
-          }}
-          datesSet={(arg) => {
-            setCurrentView(arg.view.type);
-            const calendarCurrentDate =
-              calendarRef.current?.getDate() || new Date(arg.start);
-
-            if (arg.view.type === "dayGridMonth") {
-              const start = new Date(arg.start).getTime();
-              const end = new Date(arg.end).getTime();
-              const middle = start + (end - start) / 2;
-              setSelectedDate(new Date(middle));
-              setSelectedMiniDate(calendarCurrentDate);
-            } else {
-              setSelectedDate(calendarCurrentDate);
-              setSelectedMiniDate(calendarCurrentDate);
-            }
-
-            // Always use the calendar's current date for consistency
-            if (onDateChange) {
-              onDateChange(calendarCurrentDate);
-            }
-
-            // Notify parent about view change
-            if (onViewChange) {
-              onViewChange(arg.view.type);
-            }
-
-            // Update slot label visibility when view changes
-            setTimeout(() => {
-              updateSlotLabelVisibility(new Date());
-            }, 100);
-          }}
-          dayHeaderContent={(arg) => {
-            const date = arg.date.getDate();
-            const weekDay = arg.date
-              .toLocaleDateString(t("locale"), { weekday: "short" })
-              .toUpperCase();
-            return (
-              <div className="fc-daygrid-day-top">
-                <small>{weekDay}</small>
-                {arg.view.type !== "dayGridMonth" && (
+            }}
+            dayCellContent={(arg) => {
+              const month = arg.date.toLocaleDateString(t("locale"), {
+                month: "short",
+              });
+              if (arg.view.type === "dayGridMonth") {
+                return (
                   <span
                     className={`fc-daygrid-day-number ${
                       arg.isToday ? "current-date" : ""
                     }`}
                   >
-                    {date}
+                    {arg.dayNumberText === "1" ? month : ""} {arg.dayNumberText}
                   </span>
-                )}
-              </div>
-            );
-          }}
-          dayHeaderDidMount={viewHandlers.handleDayHeaderDidMount}
-          dayHeaderWillUnmount={viewHandlers.handleDayHeaderWillUnmount}
-          viewDidMount={viewHandlers.handleViewDidMount}
-          viewWillUnmount={viewHandlers.handleViewWillUnmount}
-          eventClick={eventHandlers.handleEventClick}
-          eventAllow={eventHandlers.handleEventAllow}
-          eventDrop={eventHandlers.handleEventDrop}
-          eventResize={eventHandlers.handleEventResize}
-          eventContent={viewHandlers.handleEventContent}
-          eventDidMount={viewHandlers.handleEventDidMount}
-        />
+                );
+              }
+            }}
+            slotDuration={"00:30:00"}
+            slotLabelInterval={"01:00:00"}
+            scrollTime="12:00:00"
+            unselectAuto={false}
+            allDayText=""
+            slotLabelFormat={{
+              hour: "2-digit",
+              minute: "2-digit",
+              hour12: false,
+            }}
+            datesSet={(arg) => {
+              setCurrentView(arg.view.type);
+              const calendarCurrentDate =
+                calendarRef.current?.getDate() || new Date(arg.start);
+
+              if (arg.view.type === "dayGridMonth") {
+                const start = new Date(arg.start).getTime();
+                const end = new Date(arg.end).getTime();
+                const middle = start + (end - start) / 2;
+                setSelectedDate(new Date(middle));
+                setSelectedMiniDate(calendarCurrentDate);
+              } else {
+                setSelectedDate(calendarCurrentDate);
+                setSelectedMiniDate(calendarCurrentDate);
+              }
+
+              // Always use the calendar's current date for consistency
+              if (onDateChange) {
+                onDateChange(calendarCurrentDate);
+              }
+
+              // Notify parent about view change
+              if (onViewChange) {
+                onViewChange(arg.view.type);
+              }
+
+              // Update slot label visibility when view changes
+              setTimeout(() => {
+                updateSlotLabelVisibility(new Date());
+              }, 100);
+            }}
+            dayHeaderContent={(arg) => {
+              const date = arg.date.getDate();
+              const weekDay = arg.date
+                .toLocaleDateString(t("locale"), { weekday: "short" })
+                .toUpperCase();
+              return (
+                <div className="fc-daygrid-day-top">
+                  <small>{weekDay}</small>
+                  {arg.view.type !== "dayGridMonth" && (
+                    <span
+                      className={`fc-daygrid-day-number ${
+                        arg.isToday ? "current-date" : ""
+                      }`}
+                    >
+                      {date}
+                    </span>
+                  )}
+                </div>
+              );
+            }}
+            dayHeaderDidMount={viewHandlers.handleDayHeaderDidMount}
+            dayHeaderWillUnmount={viewHandlers.handleDayHeaderWillUnmount}
+            viewDidMount={viewHandlers.handleViewDidMount}
+            viewWillUnmount={viewHandlers.handleViewWillUnmount}
+            eventClick={eventHandlers.handleEventClick}
+            eventAllow={eventHandlers.handleEventAllow}
+            eventDrop={eventHandlers.handleEventDrop}
+            eventResize={eventHandlers.handleEventResize}
+            eventContent={viewHandlers.handleEventContent}
+            eventDidMount={viewHandlers.handleEventDidMount}
+          />
+        )}
+        {view === "search" && <SearchResultsPage />}
         <EventPopover
           anchorEl={anchorEl}
           open={Boolean(anchorEl)}

src/components/Calendar/CalendarLayout.tsx

@@ -77,7 +77,7 @@ export default function CalendarLayout() {
   return (
     <div className="App">
       <Menubar {...menubarProps} />
-      {view === "calendar" && (
+      {(view === "calendar" || view === "search") && (
         <CalendarApp
           calendarRef={calendarRef}
           onDateChange={handleDateChange}
@@ -85,7 +85,6 @@ export default function CalendarLayout() {
         />
       )}
       {view === "settings" && <SettingsPage />}
-      {view === "search" && <SearchResultsPage />}
       <ErrorSnackbar error={error} type="calendar" />
     </div>
   );

src/components/Calendar/MiniCalendar.tsx

@@ -11,6 +11,7 @@ import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { getCalendarDetailAsync } from "../../features/Calendars/CalendarSlice";
 import { useEffect, useState } from "react";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
+import { setView } from "../../features/Settings/SettingsSlice";
 
 export function MiniCalendar({
   calendarRef,
@@ -38,10 +39,11 @@ export function MiniCalendar({
     >
       <DateCalendar
         value={moment(visibleDate)}
-        onChange={(dateMoment, selectionState) => {
+        onChange={async (dateMoment, selectionState) => {
           if (!dateMoment) return;
           const date = dateMoment.toDate();
           if (selectionState === "finish") {
+            await dispatch(setView("calendar"));
             setSelectedMiniDate(date);
             calendarRef.current?.gotoDate(date);
           }

src/components/Calendar/TempCalendarsInput.tsx

@@ -6,6 +6,7 @@ import {
   removeTempCal,
 } from "../../features/Calendars/CalendarSlice";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
+import { setView } from "../../features/Settings/SettingsSlice";
 import { User, PeopleSearch } from "../Attendees/PeopleSearch";
 import { getAccessiblePair } from "./utils/calendarColorsUtils";
 
@@ -69,7 +70,7 @@ export function TempCalendarsInput({
           light: lightColor,
           dark: getAccessiblePair(lightColor, theme),
         };
-
+        dispatch(setView("calendar"));
         dispatch(
           getTempCalendarsListAsync(user, { signal: controller.signal })
         );