feat: [SC-25978] 🎨 Improve code format and reduce interfaces needs

namehash · Dec 23, 2024 · 986dedc · 986dedc
1 parent fd83509
commit 986dedc
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 157 deletions.
diff --git a/apps/namegraph.dev/app/explore-collections/page.tsx b/apps/namegraph.dev/app/explore-collections/page.tsx
@@ -12,23 +12,38 @@ import {
 import { getCollectionsForQuery } from "@/lib/utils";
 import { DebounceInput } from "react-debounce-input";
 import { useEffect, useState } from "react";
-import lodash from "lodash";
+import lodash, { debounce } from "lodash";
 
 const SUGGESTION_CATEGORY_CLASSNAME = "suggestionCategory";
 
 export default function ExploreCollectionsPage() {
-  const [nameIdeas, setNameIdeas] =
-    useState<null | NameGraphGroupedByCategoryResponse>(null);
+  /**
+   * nameIdeas state:
+   *
+   * undefined is set when component never tried querying name ideas
+   * null is set when component tried querying name ideas but failed
+   * NameGraphGroupedByCategoryResponse is set when name ideas were successfully queried
+   */
+  const [nameIdeas, setNameIdeas] = useState<
+    undefined | null | NameGraphGroupedByCategoryResponse
+  >(undefined);
+
   const [nameIdeasLoading, setNameIdeasLoading] = useState(true);
 
   const [debouncedValue, setDebouncedValue] = useState("");
 
   useEffect(() => {
     if (debouncedValue) {
-      setNameIdeas(null);
+      let query = debouncedValue;
+      if (debouncedValue.includes(".")) {
+        query = debouncedValue.split(".")[0];
+      }
+
+      setNameIdeas(undefined);
       setNameIdeasLoading(true);
-      getCollectionsForQuery(debouncedValue)
+      getCollectionsForQuery(query)
         .then((res) => setNameIdeas(res))
+        .catch(() => setNameIdeas(null))
         .finally(() => setNameIdeasLoading(false));
     } else {
       setNameIdeasLoading(false);

diff --git a/apps/namegraph.dev/components/mini-apps/explore-collections/arrow-navigation-bar.tsx b/apps/namegraph.dev/components/mini-apps/explore-collections/arrow-navigation-bar.tsx
@@ -5,7 +5,7 @@ import lodash from "lodash";
 import cc from "classcat";
 
 interface ArrowNavigationBarProps {
-  centerID?: string | null;
+  centerID?: string;
   skeletonMarkup: JSX.Element;
   barContentMarkup: JSX.Element;
 }
@@ -44,11 +44,11 @@ export const ArrowNavigationBar = ({
   skeletonMarkup,
   barContentMarkup,
 }: ArrowNavigationBarProps) => {
-  const navigationBarWrapper = useRef<HTMLDivElement | null>(null);
+  const navigationBarWrapper = useRef<HTMLDivElement | undefined>(undefined);
 
-  const [showNavButtons, setShowNavButtons] = useState<ShowNavButtons | null>(
-    null,
-  );
+  const [showNavButtons, setShowNavButtons] = useState<
+    ShowNavButtons | undefined
+  >(undefined);
 
   useEffect(() => {
     setDisplayOfInfiniteShadowsAndNavigationButtons();
@@ -166,7 +166,7 @@ export const ArrowNavigationBar = ({
 
   return (
     <div
-      className={`relative flex ${showNavButtons !== null ? "space-x-1 z-20" : null}`}
+      className={`relative flex ${showNavButtons !== undefined ? "space-x-1 z-20" : null}`}
     >
       <div
         className={cc([
@@ -199,9 +199,11 @@ export const ArrowNavigationBar = ({
           arrows. Later, only the action of scrolling, which is user
           triggered, will make changes to 'showNavButtons'.
         */}
-        {showNavButtons === null && skeletonMarkup}
+        {showNavButtons === undefined && skeletonMarkup}
         {
-          <div className={`${showNavButtons === null ? "opacity-0" : null}`}>
+          <div
+            className={`${showNavButtons === undefined ? "opacity-0" : null}`}
+          >
             {barContentMarkup}
           </div>
         }

diff --git a/apps/namegraph.dev/components/mini-apps/explore-collections/quick-jumps-by-category.tsx b/apps/namegraph.dev/components/mini-apps/explore-collections/quick-jumps-by-category.tsx
@@ -5,27 +5,37 @@ import {
   NameGraphFetchTopCollectionMembersResponse,
   NameGraphGroupedByCategoryResponse,
   NameGraphGroupingCategory,
+  NameGraphRelatedCollectionResponse,
 } from "@namehash/namegraph-sdk/utils";
 import { ArrowNavigationBar } from "./arrow-navigation-bar";
-import {
-  NameGraphRelatedCollection,
-  NameGraphSuggestionCategory,
-} from "@/lib/utils";
+import { NameGraphSuggestionCategoryTypes } from "@/lib/utils";
 
 interface QuickJumpsByCategoryProps {
   search: string;
   activeCategoryID: string;
-  nameIdeas: null | NameGraphGroupedByCategoryResponse;
+  /**
+   * undefined is set when component never tried querying name ideas
+   * null is set when component tried querying name ideas but failed
+   * NameGraphGroupedByCategoryResponse is set when name ideas were successfully queried
+   */
+  nameIdeas: undefined | null | NameGraphGroupedByCategoryResponse;
 }
 
 export const QuickJumpsByCategory = ({
   search,
   nameIdeas,
   activeCategoryID,
 }: QuickJumpsByCategoryProps) => {
+  /**
+   * quickJumpCategories state:
+   *
+   * undefined is set when nameIdeas was not yet parsed
+   * null is set if nameIdeas was parsed but does not contain an array of categories
+   * NameGraphFetchTopCollectionMembersResponse[] is set if nameIdeas categories were parsed into quickJumpCategories
+   */
   const [quickJumpCategories, setQuickJumpCategories] = useState<
-    NameGraphSuggestionCategory[] | null
-  >(null);
+    undefined | null | NameGraphFetchTopCollectionMembersResponse[]
+  >(undefined);
   const [loadingQuickJumpPills, setLoadingQuickJumpPills] =
     useState<boolean>(true);
 
@@ -44,10 +54,10 @@ export const QuickJumpsByCategory = ({
     }
   };
 
-  const quickJumpTo = (category: NameGraphSuggestionCategory | null) => {
-    if (category) {
-      scrollToNameIdeasCategory(category);
-    }
+  const quickJumpTo = (
+    category: NameGraphFetchTopCollectionMembersResponse,
+  ) => {
+    scrollToNameIdeasCategory(category);
   };
 
   useEffect(() => {
@@ -71,7 +81,8 @@ export const QuickJumpsByCategory = ({
   return (
     <div className="w-full px-3 relative bg-white border-b border-gray-300 pt-3 border-t">
       <h2 className="text-lg font-regular mb-4 text-center">
-        📚 Collections and name ideas found for <b>{search}</b> ⬇️
+        📚 Collections and name ideas found for{" "}
+        <b>{search.includes(".") ? search.split(".")[0] : search}</b> ⬇️
       </h2>
       {!quickJumpCategories || loadingQuickJumpPills ? (
         <div className="mx-3 px-2 mb-3 md:px-7 lg:px-12">
@@ -84,7 +95,7 @@ export const QuickJumpsByCategory = ({
         >
           <ArrowNavigationBar
             skeletonMarkup={<QuickJumpPillsSkeleton />}
-            centerID={activeCategoryID || null}
+            centerID={activeCategoryID}
             barContentMarkup={
               <div className="flex space-x-2">
                 {/* Quick jump pills */}
@@ -120,14 +131,16 @@ export const QuickJumpsByCategory = ({
 
 const QuickJumpPillsSkeleton = () => {
   return (
-    <div className="flex space-x-2">
-      {[...Array(3).fill(0)].map((idx) => (
-        <Skeleton
-          roundedClass="rounded-[20px]"
-          className="h-9 w-32"
-          key={idx}
-        />
-      ))}
+    <div className="flex space-x-2 overflow-hidden">
+      {[...Array(NameGraphSuggestionCategoryTypes.length).fill(0)].map(
+        (idx) => (
+          <Skeleton
+            roundedClass="rounded-[20px]"
+            className="h-9 min-w-32 max-w-32"
+            key={idx}
+          />
+        ),
+      )}
     </div>
   );
 };
@@ -138,35 +151,33 @@ export const getCategoryID = (
   const postfix =
     category.type === NameGraphGroupingCategory.related
       ? `${category.name}-${
-          (category as NameGraphRelatedCollection).collection_id
+          (category as NameGraphRelatedCollectionResponse).collection_id
         }`
       : `${category.name}`;
 
   return `${category.type}-category-${postfix}`;
 };
 
 export const scrollToNameIdeasCategory = (
-  category: NameGraphSuggestionCategory | null,
+  category: NameGraphFetchTopCollectionMembersResponse,
 ) => {
-  if (category) {
-    const categoryID = getCategoryID(category);
-
-    if (categoryID) {
-      const scrollableContainer = document.getElementById("scrollable-elm");
-      const categoryElm = document.getElementById(categoryID);
-
-      const categoryElmTopPosition = Number(
-        categoryElm?.getAttribute("data-category-top"),
-      );
-      console.log(categoryElmTopPosition, categoryElm, scrollableContainer);
-      if (scrollableContainer && categoryElm && categoryElmTopPosition) {
-        setTimeout(() => {
-          scrollableContainer.scrollTo({
-            top: categoryElmTopPosition - 375,
-            behavior: "smooth",
-          });
-        }, 100);
-      }
+  const categoryID = getCategoryID(category);
+
+  if (categoryID) {
+    const scrollableContainer = document.getElementById("scrollable-elm");
+    const categoryElm = document.getElementById(categoryID);
+
+    const categoryElmTopPosition = Number(
+      categoryElm?.getAttribute("data-category-top"),
+    );
+    console.log(categoryElmTopPosition, categoryElm, scrollableContainer);
+    if (scrollableContainer && categoryElm && categoryElmTopPosition) {
+      setTimeout(() => {
+        scrollableContainer.scrollTo({
+          top: categoryElmTopPosition - 375,
+          behavior: "smooth",
+        });
+      }, 100);
     }
   }
 };
diff --git a/...graph.dev/components/mini-apps/explore-collections/recursive-related-collection-pills.tsx b/...graph.dev/components/mini-apps/explore-collections/recursive-related-collection-pills.tsx
@@ -1,10 +1,11 @@
-import { NameGraphRelatedCollection } from "@/lib/utils";
+import Skeleton from "@/components/skeleton";
 import { ArrowNavigationBar } from "./arrow-navigation-bar";
 import { RelatedCollectionPill } from "./related-collection-pill";
-import Skeleton from "@/components/skeleton";
+import { NameGraphRelatedCollectionResponse } from "@namehash/namegraph-sdk/utils";
+import { RELATED_COLLECTION_PILLS_RESULTS_NUMBER } from "@/lib/utils";
 
 interface RecursiveRelatedCollectionPillsProps {
-  recursiveRelatedCollections: NameGraphRelatedCollection[];
+  recursiveRelatedCollections: NameGraphRelatedCollectionResponse[];
 }
 
 export const RecursiveRelatedCollectionPills = ({
@@ -17,7 +18,7 @@ export const RecursiveRelatedCollectionPills = ({
   const RelatedCollectionPillsSkeleton = (
     <div className="ml-1 flex flex-wrap items-center text-sm mt-3 gap-2">
       <p className="font-light min-w-[128px]">Check out related collections:</p>
-      {Array(3).map((idx) => (
+      {Array(RELATED_COLLECTION_PILLS_RESULTS_NUMBER).map((idx) => (
         <Skeleton key={idx} />
       ))}
     </div>

diff --git a/apps/namegraph.dev/components/mini-apps/explore-collections/related-collection-pill.tsx b/apps/namegraph.dev/components/mini-apps/explore-collections/related-collection-pill.tsx
@@ -1,8 +1,8 @@
-import { NameGraphRelatedCollection } from "@/lib/utils";
+import { NameGraphRelatedCollectionResponse } from "@namehash/namegraph-sdk/utils";
 import { TruncatedText } from "@namehash/namekit-react/client";
 
 interface RelatedCollectionPillProps {
-  relatedCollection: NameGraphRelatedCollection;
+  relatedCollection: NameGraphRelatedCollectionResponse;
 }
 
 export const RelatedCollectionPill = ({

diff --git a/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category-header.tsx b/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category-header.tsx
@@ -2,7 +2,7 @@ import Skeleton from "@/components/skeleton";
 import { NameGraphFetchTopCollectionMembersResponse } from "@namehash/namegraph-sdk/utils";
 
 interface SuggestionCategoryHeaderProps {
-  category: NameGraphFetchTopCollectionMembersResponse | null;
+  category: NameGraphFetchTopCollectionMembersResponse;
 }
 
 export const SuggestionCategoryHeader = ({