feat: add nearcatalog records to improve search ux (#819)

* feat: add nearcatalog records to improve search ux * chore: remove unnecessary category
near · May 29, 2024 · 4c58264 · 4c58264
1 parent 7d35986
commit 4c58264
Show file tree

Hide file tree

Showing 5 changed files with 221 additions and 244 deletions.
diff --git a/src/Search/ComponentCard.jsx b/src/Search/ComponentCard.jsx
@@ -1,7 +1,14 @@
 const [accountId, widget, widgetName] = props.src.split("/");
-const metadata = Social.get(`${accountId}/widget/${widgetName}/metadata/**`, "final");
-const detailsUrl = `/${REPL_ACCOUNT}/widget/ComponentDetailsPage?src=${accountId}/widget/${widgetName}`;
+const variant = props.variant ?? "default";
+const metadata =
+  variant === "nearcatalog"
+    ? { image: props.image, name: props.name }
+    : Social.get(`${accountId}/widget/${widgetName}/metadata/**`, "final");
 const appUrl = `/${accountId}/widget/${widgetName}`;
+const detailsUrl =
+  variant === "nearcatalog"
+    ? appUrl
+    : `/${REPL_ACCOUNT}/widget/ComponentDetailsPage?src=${accountId}/widget/${widgetName}`;
 const accountUrl = `/${REPL_ACCOUNT}/widget/ProfilePage?accountId=${accountId}`;
 const onPointerUp =
   props.onClick ??

diff --git a/src/Search/FullPage/ComponentCard.jsx b/src/Search/FullPage/ComponentCard.jsx
@@ -1,8 +1,15 @@
 const [accountId, widget, widgetName] = props.src.split("/");
-const metadata = Social.get(`${accountId}/widget/${widgetName}/metadata/**`, "final");
-const tags = Object.keys(metadata.tags || {});
-const detailsUrl = `/${REPL_ACCOUNT}/widget/ComponentDetailsPage?src=${accountId}/widget/${widgetName}`;
+const variant = props.variant ?? "default";
+const metadata =
+  variant === "nearcatalog"
+    ? { image: props.image, name: props.name, tags: props.tags }
+    : Social.get(`${accountId}/widget/${widgetName}/metadata/**`, "final");
+const tags = metadata.tags && Array.isArray(metadata.tags) ? metadata.tags : Object.keys(metadata.tags || {});
 const appUrl = `/${accountId}/widget/${widgetName}`;
+const detailsUrl =
+  variant === "nearcatalog"
+    ? appUrl
+    : `/${REPL_ACCOUNT}/widget/ComponentDetailsPage?src=${accountId}/widget/${widgetName}`;
 const accountUrl = `/${REPL_ACCOUNT}/widget/ProfilePage?accountId=${accountId}`;
 const onPointerUp =
   props.onClick ??
@@ -153,7 +160,7 @@ const ButtonLink = styled("Link")`
 
 return (
   <Card>
-    {
+    {variant !== "nearcatalog" && (
       <CardTag>
         <i className="bi bi-clock"></i>{" "}
         <Widget
@@ -165,7 +172,7 @@ return (
         />{" "}
         ago
       </CardTag>
-    }
+    )}
 
     <CardBody>
       <Thumbnail href={detailsUrl} onPointerUp={onPointerUp}>

diff --git a/src/Search/IndexPage.jsx b/src/Search/IndexPage.jsx
@@ -1,6 +1,6 @@
-const SEARCH_API_KEY = props.searchApiKey ?? "0e42c01107b8f555a41bcc0fa7f2a4df";
+const SEARCH_API_KEY = props.searchApiKey ?? "fc7644a5da5306311e8e9418c24fddc4";
 const APPLICATION_ID = props.appId ?? "B6PI9UKKJT";
-const INDEX = props.index ?? "prod_near-social-feed";
+const INDEX = props.index ?? "replica_prod_near-social-feed";
 const API_URL = props.apiUrl ?? `https://${APPLICATION_ID}-dsn.algolia.net/1/indexes/${INDEX}/query?`;
 const INITIAL_PAGE = props.initialPage ?? 0;
 const facets = props.facets ?? ["All", "People", "Apps", "Components", "Posts"];
@@ -14,6 +14,7 @@ const userId = props.accountId ?? context.accountId;
 
 const componentsUrl = `/${REPL_ACCOUNT}/widget/ComponentsPage`;
 const peopleUrl = `/${REPL_ACCOUNT}/widget/PeoplePage`;
+const nearcatalogUrl = `/${REPL_NEARCATALOG}/widget/Index`;
 
 State.init({
   facet: tab,
@@ -209,6 +210,26 @@ const components = (records) => {
   return components;
 };
 
+// creates an array of components
+const nearcatalog = (records) => {
+  const components = [];
+  for (const [i, component] of records || []) {
+    const widgetName = "Index";
+    const accountId = "nearcatalog.near";
+    components.push({
+      accountId,
+      widgetName,
+      slug: component.slug,
+      image: component.image,
+      name: component.name,
+      tags: component.tags,
+      variant: "nearcatalog",
+      searchPosition: i,
+    });
+  }
+  return components;
+};
+
 const categorizeSearchHits = (rawResp) => {
   const results = {};
   for (const [i, result] of rawResp.hits?.entries()) {
@@ -243,6 +264,7 @@ const fetchSearchHits = (query, { pageNumber, configs, optionalFilters }) => {
     query,
     page: pageNumber ?? 0,
     optionalFilters: optionalFilters ?? [
+      "categories:nearcatalog<score=4>",
       "categories:profile<score=3>",
       "categories:widget<score=2>",
       "categories:post<score=1>",
@@ -269,7 +291,9 @@ const updateSearchHits = debounce(({ term, pageNumber, configs }) => {
     State.update({
       search: {
         profiles: profiles(results["profile"]),
-        components: components(results["app, widget"]).concat(components(results["widget"])),
+        components: components(results["app, widget, nearcatalog"])
+          .concat(components(results["widget"]))
+          .concat(nearcatalog(results["nearcatalog"])),
         postsAndComments: posts(results["post"], "post").concat(posts(results["comment, post"], "post-comment")),
       },
       currentPage: pageNumber,
@@ -316,7 +340,7 @@ const searchFilters = (facet) => {
     filters = `(${filters} OR categories:comment)`;
   }
   if (category === "app") {
-    filters = `(${filters} OR tags:app)`;
+    filters = `(${filters} OR tags:app OR categories:nearcatalog)`;
   }
   if (filters) {
     filters = `${filters} AND `;
@@ -461,22 +485,32 @@ return (
         </GroupHeader>
 
         <Items>
-          {state.search.components.map((component, i) => (
-            <Item key={component.accountId + component.widgetName}>
-              <Widget
-                src="${REPL_ACCOUNT}/widget/Search.FullPage.ComponentCard"
-                props={{
-                  src: `${component.accountId}/widget/${component.widgetName}`,
-                  onClick: () =>
-                    onSearchResultClick({
-                      searchPosition: component.searchPosition,
-                      objectID: `${component.accountId}/widget/${component.widgetName}`,
-                      eventName: "Clicked Component After Search",
-                    }),
-                }}
-              />
-            </Item>
-          ))}
+          {state.search.components.map((component, i) => {
+            const isNearCatalogItem = component.variant && component.variant === "nearcatalog";
+            const componentSrc = isNearCatalogItem
+              ? `${component.accountId}/widget/${component.widgetName}?id=${component.slug}`
+              : `${component.accountId}/widget/${component.widgetName}`;
+            const componentProps = isNearCatalogItem
+              ? { image: component.image, name: component.name, tags: component.tags, variant: component.variant }
+              : {};
+            return (
+              <Item key={componentSrc}>
+                <Widget
+                  src="${REPL_ACCOUNT}/widget/Search.FullPage.ComponentCard"
+                  props={{
+                    src: componentSrc,
+                    ...componentProps,
+                    onClick: () =>
+                      onSearchResultClick({
+                        searchPosition: component.searchPosition,
+                        objectID: `${component.accountId}/widget/${component.widgetName}`,
+                        eventName: "Clicked Component After Search",
+                      }),
+                  }}
+                />
+              </Item>
+            );
+          })}
         </Items>
       </Group>
     )}

diff --git a/src/Search/Insights.jsx b/src/Search/Insights.jsx
@@ -43,7 +43,7 @@ window.addEventListener("message", (message) => {
 return (
   <iframe
     srcDoc={code}
-    style={{ position: absolute, width: 0, height: 0, border: 0 }}
+    style={{ position: "absolute", width: 0, height: 0, border: 0 }}
     message={{ event: props.event }}
     onMessage={(resp) => onChange(resp)}
   />