chore: improve All tab for search results (#823)

* chore: improve `All` tab for search results * chore: change data structure * chore: cleanup * chore: remove unused props
near · Jun 4, 2024 · d089c7f · d089c7f
1 parent 4c58264
commit d089c7f
Showing 1 changed file with 102 additions and 65 deletions.
diff --git a/src/Search/TypeAheadDropdown.jsx b/src/Search/TypeAheadDropdown.jsx
@@ -5,9 +5,6 @@ const API_URL = props.apiUrl ?? `https://${APPLICATION_ID}-dsn.algolia.net/1/ind
 const INITIAL_PAGE = props.initialPage ?? 0;
 const facets = props.facets ?? ["All", "People", "Apps", "Components", "Posts"];
 const tab = props.tab ?? "All";
-const showHeader = props.showHeader ?? true;
-const showSearchBar = props.showSearchBar ?? true;
-const showPagination = props.showPagination ?? true;
 const userId = props.accountId ?? context.accountId;
 const searchPageUrl = "/${REPL_ACCOUNT}/widget/Search.IndexPage";
 const topmostCount = props.topmostCount ?? 3;
@@ -16,14 +13,6 @@ State.init({
   currentPage: 0,
   selectedTab: tab,
   facet: tab,
-  isFiltersPanelVisible: false,
-  numColumns: 3,
-  selectedTags: [],
-  searchResults: [], // Assuming search results are stored here
-  allTags: [],
-  activeTags: [],
-  showFollowed: false,
-  showNotFollowed: false,
 });
 
 // Styling Specifications
@@ -231,6 +220,15 @@ const ScrollableContent = styled.div`
 
 const Item = styled.div``;
 
+const _parceDataByFacet = (facet, arr) => {
+  if (!arr || arr.length === 0) return [];
+  return arr.slice(0, topmostCount).map((item) => ({
+    ...item,
+    variant: item.variant ?? facet,
+    relevance: item.searchPosition,
+  }));
+};
+
 const DisplayResultsByFacet = ({ title, count, items }) => (
   <Group>
     <GroupHeader>
@@ -249,6 +247,98 @@ const DisplayResultsByFacet = ({ title, count, items }) => (
   </Group>
 );
 
+const DisplayAllResults = () => {
+  const profiles = _parceDataByFacet("profile", state.profiles.hits);
+  const apps = _parceDataByFacet("apps", state.apps.hits);
+  const components = _parceDataByFacet("components", state.components.hits);
+  const postsAndComments = _parceDataByFacet("postsAndComments", state.postsAndComments.hits);
+  const allResults = [...apps, ...profiles, ...components, ...postsAndComments];
+  const sortedResults = allResults?.sort((a, b) => a.relevance - b.relevance);
+  return (
+    <DisplayResultsByFacet
+      title="All"
+      count={sortedResults.length}
+      items={sortedResults.map((item, index) => (
+        <ResultByFacet key={`${item.accountId}-${index}`} {...item} />
+      ))}
+    />
+  );
+};
+
+const ResultByFacet = (record) => {
+  switch (record.variant) {
+    case "profile":
+      return (
+        <Item key={record.accountId} onClick={handleCloseSearchMenu}>
+          <Widget
+            src="${REPL_ACCOUNT}/widget/Search.DropdownAccountCard"
+            props={{
+              accountId: record.accountId,
+              profile_name: props.profile_name,
+              onClick: () =>
+                onSearchResultClick({
+                  queryID: record.queryID,
+                  searchPosition: record.searchPosition,
+                  objectID: `${record.accountId}/profile`,
+                  eventName: "Clicked Profile After Search",
+                }),
+            }}
+          />
+        </Item>
+      );
+    case "apps":
+    case "components":
+    case "nearcatalog":
+      const isNearCatalogItem = record.variant === "nearcatalog";
+      const componentSrc = isNearCatalogItem
+        ? `${record.accountId}/widget/${record.widgetName}?id=${record.slug}`
+        : `${record.accountId}/widget/${record.widgetName}`;
+      const componentProps = isNearCatalogItem
+        ? { image: record.image, name: record.name, variant: record.variant }
+        : {};
+      return (
+        <Item key={componentSrc} onClick={handleCloseSearchMenu}>
+          <Widget
+            src="${REPL_ACCOUNT}/widget/Search.ComponentCard"
+            props={{
+              src: componentSrc,
+              ...componentProps,
+              onClick: () =>
+                onSearchResultClick({
+                  queryID: record.queryID,
+                  searchPosition: record.searchPosition,
+                  objectID: `${record.accountId}/widget/${record.widgetName}`,
+                  eventName: "Clicked App After Search",
+                }),
+            }}
+          />
+        </Item>
+      );
+    case "postsAndComments":
+      return (
+        <Item key={`${record.accountId}/${record.postType}/${record.blockHeight}`} onClick={handleCloseSearchMenu}>
+          <Widget
+            src="${REPL_ACCOUNT}/widget/Search.PostCard"
+            props={{
+              accountId: record.accountId,
+              blockHeight: record.blockHeight,
+              content: record.postContent,
+              term: props.term,
+              snipContent: true,
+              onClick: () =>
+                onSearchResultClick({
+                  queryID: record.queryID,
+                  searchPosition: record.searchPosition,
+                  objectID: `${record.accountId}/${record.postType}/${record.blockHeight}`,
+                  eventName: "Clicked Post After Search",
+                }),
+            }}
+          />
+        </Item>
+      );
+  }
+};
+
 const TextMessage = ({ message, ...props }) => (
   <H2
     $display="flex"
@@ -668,36 +758,6 @@ const topmostComponents = (apps) => {
   });
 };
 
-const topmostNEARCatalogComponents = () => {
-  let output = state.nearcatalog.hits.slice(0, 5);
-
-  const queryID = state.nearcatalog.queryID;
-  const eventName = "Component";
-  return output.map((component, i) => (
-    <Item
-      key={`${component.accountId}/widget/${component.widgetName}/${component.slug}`}
-      onClick={handleCloseSearchMenu}
-    >
-      <Widget
-        src="${REPL_ACCOUNT}/widget/Search.ComponentCard"
-        props={{
-          src: `${component.accountId}/widget/${component.widgetName}?id=${component.slug}`,
-          variant: "nearcatalog",
-          name: component.name,
-          image: component.image,
-          onClick: () =>
-            onSearchResultClick({
-              queryID,
-              searchPosition: component.searchPosition,
-              objectID: `${component.accountId}/widget/${component.widgetName}?id=${component.slug}`,
-              eventName: `Clicked ${eventName} After Search`,
-            }),
-        }}
-      />
-    </Item>
-  ));
-};
-
 const topmostPosts = () => {
   let output = [];
 
@@ -781,30 +841,7 @@ const displayResultsByFacet = (selectedTab) => {
         <TextMessage message={`No Post matches were found for "${state.term}".`} />
       );
     case "All":
-      return (
-        <>
-          {state.profiles.hits?.length > 0 && (
-            <DisplayResultsByFacet title="People" count={state.profiles.hitsTotal} items={topmostAccounts()} />
-          )}
-          {state.apps.hits?.length > 0 && (
-            <DisplayResultsByFacet title="Apps" count={state.apps.hitsTotal} items={topmostComponents(true)} />
-          )}
-          {state.components.hits?.length > 0 && (
-            <DisplayResultsByFacet
-              title="Components"
-              count={state.components.hitsTotal}
-              items={topmostComponents(false)}
-            />
-          )}
-          {state.postsAndComments.hits?.length > 0 && (
-            <DisplayResultsByFacet
-              title="Posts and Comments"
-              count={state.postsAndComments.hitsTotal}
-              items={topmostPosts()}
-            />
-          )}
-        </>
-      );
+      return <DisplayAllResults />;
   }
 };