Search in spaces and in inbox #2294

src/pages/OldCommon/store/selectors.tsx

@@ -33,6 +33,8 @@ export const selectUserProposalList = () =>
   createSelector(selectCommons, (state) => state.userProposals);
 export const selectCommonActiveTab = () =>
   createSelector(selectCommons, (state) => state.activeTab);
+export const selectCommonStates = () =>
+  createSelector(selectCommons, (state) => state.commonStates);
 export const selectCommonStateById = (commonId: string) =>
   createSelector(
     selectCommons,

src/pages/commonFeed/CommonFeed.tsx

@@ -52,6 +52,7 @@ import {
   cacheActions,
   commonActions,
   selectCommonAction,
+  selectIsSearchingFeedItems,
   selectRecentStreamId,
   selectSharedFeedItem,
 } from "@/store/states";
@@ -101,6 +102,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   const user = useSelector(selectUser());
   const userId = user?.uid;
   const recentStreamId = useSelector(selectRecentStreamId);
+  const isSearchingFeedItems = useSelector(selectIsSearchingFeedItems);
   const [feedLayoutRef, setFeedLayoutRef] = useState<FeedLayoutRef | null>(
     null,
   );
@@ -228,7 +230,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   };
 
   const fetchMoreCommonFeedItems = (feedItemId?: string) => {
-    if (hasMoreCommonFeedItems) {
+    if (hasMoreCommonFeedItems && !isSearchingFeedItems) {
       fetchCommonFeedItems(feedItemId);
     }
   };
@@ -527,7 +529,12 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
         commonMember={commonMember}
         topFeedItems={topFeedItems}
         feedItems={commonFeedItems}
-        loading={areCommonFeedItemsLoading}
+        loading={areCommonFeedItemsLoading || isSearchingFeedItems}
+        emptyText={
+          hasMoreCommonFeedItems
+            ? ""
+            : "Looks like there are no matches for your query."
+        }
         batchNumber={batchNumber}
         onFetchNext={fetchMoreCommonFeedItems}
         renderFeedItemBaseContent={renderFeedItemBaseContent}

src/pages/commonFeed/components/HeaderContent/HeaderContent.module.scss

@@ -4,6 +4,8 @@
 .actionButtonsWrapper {
   display: flex;
   align-items: center;
+  justify-content: end;
+  flex-grow: 1;
 
   & > * {
     margin-right: 1rem;

src/pages/commonFeed/components/HeaderContent/HeaderContent.tsx

@@ -7,13 +7,15 @@ import {
   CommonMember,
   Governance,
 } from "@/shared/models";
+import { SearchButton, SearchInput } from "@/shared/ui-kit";
 import { checkIsProject } from "@/shared/utils";
 import {
   ActionsButton,
   HeaderCommonContent,
   HeaderContentWrapper,
   NewStreamButton,
 } from "./components";
+import { useSearchFeedItems } from "./hooks";
 import styles from "./HeaderContent.module.scss";
 
 interface HeaderContentProps {
@@ -27,6 +29,8 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
   const { className, common, commonMember, governance } = props;
   const isMobileVersion = useIsTabletView();
   const commonFollow = useCommonFollow(common.id, commonMember);
+  const { searchValue, searchInputToggle, onChangeSearchValue, onCloseSearch } =
+    useSearchFeedItems();
   const showFollowIcon =
     !isMobileVersion &&
     (commonFollow.isFollowInProgress
@@ -45,11 +49,28 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
         showFollowIcon={showFollowIcon}
       />
       <div className={styles.actionButtonsWrapper}>
+        {!isMobileVersion && (
+          <>
+            {searchInputToggle.isToggledOn && (
+              <SearchInput
+                value={searchValue}
+                placeholder="Search space"
+                onChange={onChangeSearchValue}
+                onClose={onCloseSearch}
+                autoFocus
+              />
+            )}
+            {!searchInputToggle.isToggledOn && (
+              <SearchButton onClick={searchInputToggle.setToggleOn} />
+            )}
+          </>
+        )}
         <NewStreamButton
           commonId={common.id}
           commonMember={commonMember}
           governance={governance}
           isMobileVersion={isMobileVersion}
+          onClick={onCloseSearch}
         />
         <ActionsButton
           common={common}

src/pages/commonFeed/components/HeaderContent/components/HeaderCommonContent/HeaderCommonContent.module.scss

@@ -4,6 +4,7 @@
 .container {
   display: flex;
   overflow: hidden;
+  max-width: 400px;
 }
 
 .openSidenavButton {

src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.tsx

@@ -4,11 +4,7 @@ import { useMenuItems } from "@/pages/common/components/CommonTabPanels/componen
 import { useRoutesContext } from "@/shared/contexts";
 import { PlusIcon } from "@/shared/icons";
 import { CirclesPermissions, CommonMember, Governance } from "@/shared/models";
-import {
-  ButtonIcon,
-  DesktopMenu,
-  MobileMenu,
-} from "@/shared/ui-kit";
+import { ButtonIcon, DesktopMenu, MobileMenu } from "@/shared/ui-kit";
 import styles from "./NewStreamButton.module.scss";
 
 interface NewStreamButtonProps {
@@ -17,6 +13,7 @@ interface NewStreamButtonProps {
   commonId: string;
   commonMember: (CommonMember & CirclesPermissions) | null;
   governance: Pick<Governance, "circles">;
+  onClick?: () => void;
 }
 
 const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
@@ -26,6 +23,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
     commonId,
     commonMember,
     governance,
+    onClick,
   } = props;
   const history = useHistory();
   const { getProjectCreationPagePath } = useRoutesContext();
@@ -42,7 +40,7 @@ const NewStreamButton: FC<NewStreamButtonProps> = (props) => {
   }
 
   const triggerEl = (
-    <ButtonIcon className={styles.buttonIcon}>
+    <ButtonIcon className={styles.buttonIcon} onClick={onClick}>
       <PlusIcon className={styles.icon} />
     </ButtonIcon>
   );

src/pages/commonFeed/components/HeaderContent/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useSearchFeedItems";

src/pages/commonFeed/components/HeaderContent/hooks/useSearchFeedItems.ts

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { debounce } from "lodash";
+import { QueryParamKey } from "@/shared/constants";
+import { ToggleState, useQueryParams, useToggle } from "@/shared/hooks";
+import { addQueryParam, deleteQueryParam } from "@/shared/utils";
+import { commonActions } from "@/store/states";
+
+interface Return {
+  searchValue: string;
+  searchInputToggle: ToggleState;
+  onChangeSearchValue: (value: string) => void;
+  onCloseSearch: () => void;
+}
+
+export const useSearchFeedItems = (): Return => {
+  const dispatch = useDispatch();
+  const params = useQueryParams();
+  const searchParam = params[QueryParamKey.Search];
+  const [searchValue, setSearchValue] = useState("");
+  const searchInputToggle = useToggle(false);
+
+  const searchFeedItems = debounce((value: string) => {
+    if (value) {
+      addQueryParam(QueryParamKey.Search, value);
+    } else {
+      deleteQueryParam(QueryParamKey.Search);
+    }
+
+    dispatch(commonActions.searchFeedItems(value));
+  }, 300);
+
+  useEffect(() => {
+    if (typeof searchParam === "string") {
+      searchInputToggle.setToggleOn();
+      onChangeSearchValue(searchParam);
+    }
+
+    return () => {
+      dispatch(commonActions.resetSearchState());
+    };
+  }, []);
+
+  const onChangeSearchValue = useCallback((value: string) => {
+    setSearchValue(value);
+    searchFeedItems(value);
+  }, []);
+
+  const onCloseSearch = useCallback(() => {
+    searchInputToggle.setToggleOff();
+    onChangeSearchValue("");
+  }, []);
+
+  return {
+    searchValue,
+    searchInputToggle,
+    onChangeSearchValue,
+    onCloseSearch,
+  };
+};

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/DirectMessageModal.tsx

@@ -12,10 +12,10 @@ import { Modal } from "@/shared/components";
 import { KeyboardKeys } from "@/shared/constants";
 import { useDMUserChatChannel } from "@/shared/hooks/useCases";
 import { DMUser } from "@/shared/interfaces";
-import { Loader } from "@/shared/ui-kit";
+import { Loader, SearchInput } from "@/shared/ui-kit";
 import { emptyFunction } from "@/shared/utils";
 import { inboxActions } from "@/store/states";
-import { DirectMessageUserItem, SearchInput } from "./components";
+import { DirectMessageUserItem } from "./components";
 import { useDMUsers } from "./hooks";
 import styles from "./DirectMessageModal.module.scss";
 

src/pages/inbox/components/DirectMessageButton/components/DirectMessageModal/components/index.ts

@@ -1,2 +1 @@
 export * from "./DirectMessageUserItem";
-export * from "./SearchInput";

src/pages/inbox/components/HeaderContent/HeaderContent.module.scss

@@ -16,6 +16,7 @@
 .content {
   display: flex;
   align-items: center;
+  margin-right: 50px;
 }
 
 .inboxIcon {
@@ -34,6 +35,8 @@
 .actionButtonsWrapper {
   display: flex;
   align-items: center;
+  justify-content: end;
+  flex-grow: 1;
 
   & > * {
     margin-right: 1rem;

src/pages/inbox/components/HeaderContent/HeaderContent.tsx

@@ -1,7 +1,9 @@
 import React, { FC } from "react";
 import classNames from "classnames";
+import { useSearchFeedItems } from "@/pages/commonFeed/components/HeaderContent/hooks";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { InboxIcon } from "@/shared/icons";
+import { SearchButton, SearchInput } from "@/shared/ui-kit";
 import { DirectMessageButton } from "../DirectMessageButton";
 import { HeaderContent_v04 } from "../HeaderContent_v04";
 import { InboxFilterButton } from "../InboxFilterButton";
@@ -16,6 +18,8 @@ interface HeaderContentProps {
 const HeaderContent: FC<HeaderContentProps> = (props) => {
   const { className, streamsWithNotificationsAmount } = props;
   const isMobileVersion = useIsTabletView();
+  // const { searchValue, searchInputToggle, onChangeSearchValue, onCloseSearch } =
+  //   useSearchFeedItems();
 
   if (isMobileVersion) {
     return (
@@ -33,7 +37,19 @@ const HeaderContent: FC<HeaderContentProps> = (props) => {
         <h1 className={styles.title}>Inbox</h1>
       </div>
       <div className={styles.actionButtonsWrapper}>
+        {/* {searchInputToggle.isToggledOn && (
+          <SearchInput
+            value={searchValue}
+            placeholder="Search spaces"
+            onChange={onChangeSearchValue}
+            onClose={onCloseSearch}
+            autoFocus
+          />
+        )} */}
         {/* <InboxFilterButton /> */}
+        {/* {!searchInputToggle.isToggledOn && (
+          <SearchButton onClick={searchInputToggle.setToggleOn} />
+        )} */}
         <DirectMessageButton
           isMobileVersion={isMobileVersion}
           ButtonComponent={PlusButton}

src/services/Discussion.ts

@@ -8,6 +8,7 @@ import { Collection, Discussion } from "@/shared/models";
 import {
   convertObjectDatesToFirestoreTimestamps,
   firestoreDataConverter,
+  transformFirebaseDataList,
 } from "@/shared/utils";
 import firebase, { isFirestoreCacheError } from "@/shared/utils/firebase";
 import Api from "./Api";
@@ -54,6 +55,25 @@ class DiscussionService {
     }
   };
 
+  public getDiscussionsByIds = async (
+    ids: string[],
+  ): Promise<Array<Discussion | null>> => {
+    const queries: firebase.firestore.Query[] = [];
+
+    // Firebase allows to use at most 10 items per query for `in` option
+    for (let i = 0; i < ids.length; i += 10) {
+      queries.push(
+        this.getDiscussionCollection().where("id", "in", ids.slice(i, i + 10)),
+      );
+    }
+
+    const results = await Promise.all(queries.map((query) => query.get()));
+
+    return results
+      .map((result) => transformFirebaseDataList<Discussion | null>(result))
+      .reduce((acc, items) => [...acc, ...items], []);
+  };
+
   public createDiscussion = async (
     payload: CreateDiscussionDto,
   ): Promise<Discussion> => {

src/services/Proposal.ts

@@ -52,6 +52,25 @@ class ProposalService {
     );
   };
 
+  public getProposalsByIds = async (
+    ids: string[],
+  ): Promise<Array<Proposal | null>> => {
+    const queries: firebase.firestore.Query[] = [];
+
+    // Firebase allows to use at most 10 items per query for `in` option
+    for (let i = 0; i < ids.length; i += 10) {
+      queries.push(
+        this.getProposalCollection().where("id", "in", ids.slice(i, i + 10)),
+      );
+    }
+
+    const results = await Promise.all(queries.map((query) => query.get()));
+
+    return results
+      .map((result) => transformFirebaseDataList<Proposal | null>(result))
+      .reduce((acc, items) => [...acc, ...items], []);
+  };
+
   public checkActiveProposalsExistenceInCommon = async (
     commonId: string,
   ): Promise<boolean> => {

src/shared/constants/queryParamKey.ts

@@ -8,4 +8,5 @@ export enum QueryParamKey {
   ChatItem = "chatItem",
   Message = "message",
   Unread = "unread",
+  Search = "search",
 }

src/shared/hooks/index.tsx

@@ -28,3 +28,4 @@ export { useIsMounted } from "./useIsMounted";
 export * from "./usePreventReload";
 export { default as useImageSizeCheck } from "./useImageSizeCheck";
 export { default as useLightThemeOnly } from "./useLightThemeOnly";
+export * from "./useToggle";

src/shared/hooks/useCases/useCommonFeedItems.ts

@@ -1,7 +1,12 @@
 import { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { CommonFeedService } from "@/services";
-import { commonActions, FeedItems, selectFeedItems } from "@/store/states";
+import {
+  commonActions,
+  FeedItems,
+  selectFeedItems,
+  selectFilteredFeedItems,
+} from "@/store/states";
 
 interface Return
   extends Pick<FeedItems, "data" | "loading" | "hasMore" | "batchNumber"> {
@@ -15,6 +20,7 @@ export const useCommonFeedItems = (
 ): Return => {
   const dispatch = useDispatch();
   const feedItems = useSelector(selectFeedItems);
+  const filteredFeedItems = useSelector(selectFilteredFeedItems);
   const idsForNotListeningRef = useRef<string[]>(idsForNotListening || []);
 
   const fetch = (feedItemId?: string) => {
@@ -74,6 +80,7 @@ export const useCommonFeedItems = (
 
   return {
     ...feedItems,
+    data: filteredFeedItems || feedItems.data,
     fetch,
   };
 };