Snagging | NAVIGATION / Search

src/components/attendee/NavOverlay/NavOverlay.tsx

@@ -121,7 +121,7 @@ export const NavOverlay: React.FC<NavOverlayProps> = ({
               <ScheduleOverlay />
             )}
             {selectedNavMenu === NavOverlayTabType.search && (
-              <SearchOverlay onClose={onClose} />
+              <SearchOverlay onClose={onClose} setNavMenu={setNavMenu} />
             )}
             {selectedNavMenu === NavOverlayTabType.profile && (
               <ProfileOverlay onOverlayClose={onClose} />

src/components/attendee/SearchOverlay/EventItem/EventItem.tsx

@@ -0,0 +1,98 @@
+import { useCallback } from "react";
+import { useHistory } from "react-router-dom";
+import { Button } from "components/attendee/Button";
+import { NavOverlayTabType } from "components/attendee/NavOverlay/NavOverlay";
+import { differenceInCalendarDays, isToday } from "date-fns";
+
+import { SPACE_TAXON, STRING_DASH_SPACE, STRING_SPACE } from "settings";
+
+import { ScheduledEvent } from "types/venues";
+
+import { eventEndTime, eventStartTime } from "utils/event";
+import {
+  formatDateRelativeToNow,
+  formatTimeLocalised,
+  getDateDayMonth,
+} from "utils/time";
+import { enterSpace } from "utils/url";
+
+import { useSpaceById } from "hooks/spaces/useSpaceById";
+import { useWorldById } from "hooks/worlds/useWorldById";
+
+import CN from "../SearchOverlay.module.scss";
+
+export type EventItemProps = {
+  event: ScheduledEvent;
+  onClick: () => void;
+  setNavMenu: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+
+export const EventItem: React.FC<EventItemProps> = ({
+  event,
+  onClick,
+  setNavMenu,
+}) => {
+  const { space } = useSpaceById({ spaceId: event.spaceId });
+  const { world } = useWorldById({ worldId: event.worldId });
+
+  const { push: openUrlUsingRouter } = useHistory();
+
+  const handleEnterSpace = useCallback(() => {
+    enterSpace(world?.slug, space?.slug, {
+      customOpenRelativeUrl: openUrlUsingRouter,
+    });
+    onClick();
+  }, [world?.slug, openUrlUsingRouter, onClick, space?.slug]);
+
+  const showDate =
+    Boolean(
+      differenceInCalendarDays(
+        eventEndTime({ event }),
+        eventStartTime({ event })
+      )
+    ) || !isToday(eventStartTime({ event }));
+
+  const handleEnterSchedule = () => {
+    setNavMenu(NavOverlayTabType.schedule);
+  };
+
+  return (
+    <div>
+      <div className={CN.searchItemResultHeader}>
+        <h3 className={CN.searchItemResultTitle}>
+          {event.name}
+          <span>Experience</span>
+        </h3>
+      </div>
+      <div className={CN.searchItemResultSubtitle}>
+        <span>
+          {formatTimeLocalised(eventStartTime({ event })) + STRING_DASH_SPACE}
+        </span>
+        <span>
+          {showDate && formatDateRelativeToNow(eventEndTime({ event }))}
+        </span>
+        {STRING_SPACE}
+        <span>{formatTimeLocalised(eventEndTime({ event }))}</span>
+        <span> in {space?.name}</span>
+      </div>
+      <p className={CN.searchItemResultSubtitle}>{event.description}</p>
+      <div className={CN.actionContainer}>
+        <Button
+          variant="alternative"
+          border="alternative"
+          onClick={handleEnterSpace}
+          marginless
+        >
+          Go to {SPACE_TAXON.lower}
+        </Button>
+        <Button
+          variant="alternative"
+          border="alternative"
+          onClick={handleEnterSchedule}
+        >
+          See all experiences on {getDateDayMonth(eventStartTime({ event }))}
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/attendee/SearchOverlay/PortalItem/PortalItem.tsx

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { Button } from "components/attendee/Button";
 
 import { SPACE_TAXON } from "settings";
 
@@ -8,7 +9,7 @@ import { useWorldAndSpaceByParams } from "hooks/spaces/useWorldAndSpaceByParams"
 import { useAnalytics } from "hooks/useAnalytics";
 import { usePortal } from "hooks/usePortal";
 
-import CN from "./PortalItem.module.scss";
+import CN from "../SearchOverlay.module.scss";
 
 export type PortalItemProps = {
   portal: Room;
@@ -32,13 +33,21 @@ export const PortalItem: React.FC<PortalItemProps> = ({ portal, onClick }) => {
 
   return (
     <div>
-      <div className={CN.portalItemResultHeader} onClick={enter}>
-        <h3 className={CN.portalItemResultTitle}>
+      <div className={CN.searchItemResultHeader}>
+        <h3 className={CN.searchItemResultTitle}>
           {portal.title}
           <span>{SPACE_TAXON.title}</span>
         </h3>
       </div>
-      <p className={CN.portalItemResultSubtitle}>{portal.subtitle}</p>
+      <p className={CN.searchItemResultSubtitle}>{portal.subtitle}</p>
+      <Button
+        onClick={enter}
+        variant="alternative"
+        border="alternative"
+        marginless
+      >
+        Go to {SPACE_TAXON.lower}
+      </Button>
     </div>
   );
 };

src/components/attendee/SearchOverlay/SearchOverlay.module.scss

@@ -1,4 +1,4 @@
-@use "scss/attendee/font.scss";
+@use "scss/attendee/font";
 @use "scss/attendee/space";
 @use "scss/attendee/theme";
 @use "scss/attendee/breakpoint";
@@ -48,3 +48,29 @@
 .searchOverlayCount {
   @include font.core;
 }
+
+.searchItemResultHeader {
+  cursor: pointer;
+  span {
+    @include font.core;
+    margin-left: space.$xs;
+  }
+}
+
+.searchItemResultSubtitle {
+  @include font.core;
+  margin-top: 0;
+  margin-bottom: space.empty(1);
+}
+
+.searchItemResultTitle {
+  margin-bottom: space.empty(1);
+}
+
+.actionContainer {
+  display: flex;
+
+  > button {
+    margin-right: space.empty(1);
+  }
+}

src/components/attendee/SearchOverlay/SearchOverlay.tsx

@@ -1,37 +1,44 @@
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { Hit } from "@algolia/client-search";
 import { Input } from "components/attendee/Input";
+import { EventItem } from "components/attendee/SearchOverlay/EventItem/EventItem";
+import { PortalItem } from "components/attendee/SearchOverlay/PortalItem/PortalItem";
+import { SpaceItem } from "components/attendee/SearchOverlay/SpaceItem/SpaceItem";
+import { UserItem } from "components/attendee/SearchOverlay/UserItem/UserItem";
 
-import {
-  ALWAYS_EMPTY_ARRAY,
-  COVERT_ROOM_TYPES,
-  DEFAULT_PARTY_NAME,
-  PERSON_TAXON,
-  SPACE_TAXON,
-} from "settings";
+import { ALWAYS_EMPTY_ARRAY, COVERT_ROOM_TYPES } from "settings";
 
 import { AlgoliaSearchIndex } from "types/algolia";
+import { SpaceWithId } from "types/id";
 import { Room } from "types/rooms";
 import { UserWithLocation } from "types/User";
+import { ScheduledEvent } from "types/venues";
 
 import { isDefined } from "utils/types";
 
 import { useAlgoliaSearch } from "hooks/algolia/useAlgoliaSearch";
 import { useWorldAndSpaceByParams } from "hooks/spaces/useWorldAndSpaceByParams";
 import { useDebounceSearch } from "hooks/useDebounceSearch";
 import { useRelatedVenues } from "hooks/useRelatedVenues";
+import useVenueScheduleEvents from "hooks/useVenueScheduleEvents";
 
 import { Loading } from "components/molecules/Loading";
 
-import { PortalItem } from "./PortalItem/PortalItem";
-
 import CN from "./SearchOverlay.module.scss";
 
 type SearchOverlayProps = {
   onClose: () => void;
+  setNavMenu: React.Dispatch<React.SetStateAction<string | undefined>>;
 };
-export const SearchOverlay: React.FC<SearchOverlayProps> = ({ onClose }) => {
-  const { space, worldId } = useWorldAndSpaceByParams();
+export const SearchOverlay: React.FC<SearchOverlayProps> = ({
+  onClose,
+  setNavMenu,
+}) => {
+  const {
+    world,
+    worldId,
+    isLoaded: hasWorldLoaded,
+  } = useWorldAndSpaceByParams();
   const [searchValue, setSearchValue] = useState("");
 
   const { searchQuery, setSearchInputValue } = useDebounceSearch();
@@ -66,17 +73,38 @@ export const SearchOverlay: React.FC<SearchOverlayProps> = ({ onClose }) => {
     [worldSpaces]
   );
 
+  const { liveAndFutureEvents } = useVenueScheduleEvents();
+
+  const foundEvents = useMemo<ScheduledEvent[]>(() => {
+    if (!searchQuery) return ALWAYS_EMPTY_ARRAY;
+
+    return (
+      liveAndFutureEvents.filter((event) =>
+        event.name.toLowerCase().includes(searchQuery)
+      ) ?? []
+    );
+  }, [searchQuery, liveAndFutureEvents]);
+
   const foundPortals = useMemo<Room[]>(() => {
     if (!searchQuery) return ALWAYS_EMPTY_ARRAY;
 
-    /* @debt we really shouldn't be using the index as part of the key here, it's unstable.. but portals don't have a unique identifier */
     return (
       enabledRelatedPortals.filter((portal) =>
         portal.title.toLowerCase().includes(searchQuery)
       ) ?? []
     );
   }, [searchQuery, enabledRelatedPortals]);
 
+  const foundSpaces = useMemo<SpaceWithId[]>(() => {
+    if (!searchQuery) return ALWAYS_EMPTY_ARRAY;
+
+    return (
+      worldSpaces.filter((portal) =>
+        portal.name.toLowerCase().includes(searchQuery)
+      ) ?? []
+    );
+  }, [searchQuery, worldSpaces]);
+
   const algoliaSearchState = useAlgoliaSearch(
     searchQuery,
     worldId && {
@@ -95,12 +123,16 @@ export const SearchOverlay: React.FC<SearchOverlayProps> = ({ onClose }) => {
     return usersResults.hits;
   }, [algoliaSearchState.value]);
 
-  const totalResultNumber = foundPortals.length + foundUsers.length;
+  const totalResultNumber =
+    foundPortals.length +
+    foundUsers.length +
+    foundEvents.length +
+    foundSpaces.length;
 
   return (
     <div className={CN.searchOverlayWrapper}>
       <div className={CN.searchOverlayHeader}>
-        {`Search ${space?.name ?? SPACE_TAXON.title}`}
+        {hasWorldLoaded && `Search ${world?.name}`}
       </div>
       <div className={CN.searchOverlaySearch}>
         <Input
@@ -129,14 +161,23 @@ export const SearchOverlay: React.FC<SearchOverlayProps> = ({ onClose }) => {
                 <PortalItem portal={portal} onClick={onClose} />
               </div>
             ))}
+            {foundSpaces.map((space, index) => (
+              <div key={`portal-${space.name}-${index}`}>
+                <SpaceItem space={space} onClick={onClose} />
+              </div>
+            ))}
             {foundUsers.map((user) => (
               <div key={`user-${user.objectID}`}>
-                <div className={CN.searchOverlayResultHeader}>
-                  <h3>
-                    {user?.partyName ?? DEFAULT_PARTY_NAME}
-                    <span>{PERSON_TAXON.title}</span>
-                  </h3>
-                </div>
+                <UserItem user={user} onClick={onClose} />
+              </div>
+            ))}
+            {foundEvents.map((event, index) => (
+              <div key={`portal-${event.name}-${index}`}>
+                <EventItem
+                  event={event}
+                  onClick={onClose}
+                  setNavMenu={setNavMenu}
+                />
               </div>
             ))}
           </div>