Remove url-based navigation in favor of client states

apps/web/app/(base-org)/ecosystem/page.tsx

@@ -2,7 +2,6 @@ import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import EcosystemHeroLogos from 'apps/web/public/images/ecosystem-hero-logos-new.png';
 import { Divider } from 'apps/web/src/components/Divider/Divider';
 import type { Metadata } from 'next';
-
 import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
 import Content from 'apps/web/src/components/Ecosystem/Content';
 
@@ -44,16 +43,12 @@ async function EcosystemHero() {
   );
 }
 
-export type EcosystemProps = {
-  searchParams: { tag?: string; search?: string; showCount: number };
-};
-
-export default async function Ecosystem(page: EcosystemProps) {
+export default async function Ecosystem() {
   return (
     <main className="flex w-full flex-col items-center bg-black">
       <EcosystemHero />
       <Divider />
-      <Content searchParams={page.searchParams} />
+      <Content />
     </main>
   );
 }

apps/web/src/components/Ecosystem/Card.tsx

@@ -1,3 +1,4 @@
+'use client';
 import ImageWithLoading from 'apps/web/src/components/ImageWithLoading';
 
 type Props = {
@@ -12,7 +13,7 @@ function getNiceDomainDisplayFromUrl(url: string) {
   return url.replace('https://', '').replace('http://', '').replace('www.', '').split('/')[0];
 }
 
-export async function Card({ name, url, description, imageUrl, tags }: Props) {
+export function Card({ name, url, description, imageUrl, tags }: Props) {
   return (
     <a
       href={url}

apps/web/src/components/Ecosystem/Content.tsx

@@ -3,7 +3,7 @@
 import ecosystemApps from 'apps/web/src/data/ecosystem.json';
 import { TagChip } from 'apps/web/src/components/Ecosystem/TagChip';
 import { SearchBar } from 'apps/web/src/components/Ecosystem/SearchBar';
-import { Suspense } from 'react';
+import { useState } from 'react';
 import { List } from 'apps/web/src/components/Ecosystem/List';
 
 export type EcosystemApp = {
@@ -42,14 +42,10 @@ const decoratedEcosystemApps: EcosystemApp[] = orderedEcosystemAppsAsc().map((d)
   searchName: d.name.toLowerCase(),
 }));
 
-export type EcosystemProps = {
-  searchParams: { tag?: string; search?: string; showCount: number };
-};
-
-export default function Content({ searchParams }: EcosystemProps) {
-  const selectedTag = searchParams.tag ?? tags[0];
-  const search = searchParams.search ?? '';
-  const showCount = searchParams.showCount ? Number(searchParams.showCount) : 16;
+export default function Content() {
+  const [selectedTag, setSelectedTag] = useState(tags[0]);
+  const [search, setSearch] = useState('');
+  const [showCount, setShowCount] = useState(16);
 
   const filteredEcosystemApps = decoratedEcosystemApps.filter((app) => {
     const isTagged = selectedTag === 'all' || app.tags.includes(selectedTag);
@@ -62,20 +58,24 @@ export default function Content({ searchParams }: EcosystemProps) {
       <div className="flex flex-col justify-between gap-8 lg:flex-row lg:gap-12">
         <div className="flex flex-row flex-wrap gap-3">
           {tags.map((tag) => (
-            <TagChip tag={tag} isSelected={selectedTag === tag} key={tag} />
+            <TagChip
+              tag={tag}
+              isSelected={selectedTag === tag}
+              key={tag}
+              setSelectedTag={setSelectedTag}
+            />
           ))}
         </div>
         <div className="order-first grow lg:order-last">
-          <Suspense>
-            <SearchBar value={search} />
-          </Suspense>
+          <SearchBar search={search} setSearch={setSearch} />
         </div>
       </div>
       <List
         selectedTag={selectedTag}
         searchText={search}
         apps={filteredEcosystemApps}
         showCount={showCount}
+        setShowCount={setShowCount}
       />
     </div>
   );

apps/web/src/components/Ecosystem/List.tsx

@@ -1,30 +1,35 @@
+'use client';
 import ErrorImg from 'apps/web/public/images/error.png';
 import { Button } from '../Button/Button';
 import { Card } from './Card';
 import { EcosystemApp } from 'apps/web/src/components/Ecosystem/Content';
-import Link from 'next/link';
-import { Url } from 'next/dist/shared/lib/router/router';
 import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
+import { Dispatch, SetStateAction, useCallback } from 'react';
 
-export async function List({
+export function List({
   selectedTag,
   searchText,
   apps,
   showCount,
+  setShowCount,
 }: {
   selectedTag: string;
   searchText: string;
   apps: EcosystemApp[];
   showCount: number;
+  setShowCount: Dispatch<SetStateAction<number>>;
 }) {
   const canShowMore = showCount < apps.length;
   const showEmptyState = apps.length === 0;
   const truncatedApps = apps.slice(0, showCount);
-  // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
-  const tagHref: Url = {
-    pathname: '/ecosystem',
-    query: { tag: selectedTag, search: searchText, showCount: showCount + 16 },
-  };
+
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      setShowCount(showCount + 16);
+    },
+    [setShowCount, showCount],
+  );
 
   return (
     <>
@@ -45,9 +50,7 @@ export async function List({
       )}
       {canShowMore && (
         <div className="mt-12 flex justify-center">
-          <Link href={tagHref} scroll={false}>
-            <Button>VIEW MORE</Button>
-          </Link>
+          <Button onClick={onClick}>VIEW MORE</Button>
         </div>
       )}
     </>

apps/web/src/components/Ecosystem/SearchBar.tsx

@@ -1,6 +1,5 @@
 'use client';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useRef, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback, useRef } from 'react';
 
 function SearchIcon() {
   return (
@@ -38,45 +37,28 @@ function XIcon() {
   );
 }
 
-const DEBOUNCE_LENGTH_MS = 300;
-
-export function SearchBar({ value }: { value: string }) {
-  const [text, setText] = useState(value);
+export function SearchBar({
+  search,
+  setSearch,
+}: {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+}) {
   const debounced = useRef<number>();
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const tag = searchParams?.get('tag');
-
-  const updateRoute = useCallback(
-    (search: string) => {
-      const params = new URLSearchParams(searchParams?.toString());
-      if (tag) params.set('tag', tag);
-      if (search) params.set('search', search);
-      if (!search) params.delete('search');
-      router.push(pathname + '?' + params.toString(), { scroll: false });
-    },
-    [pathname, router, searchParams, tag],
-  );
 
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       clearTimeout(debounced.current);
 
-      const val = e.target.value;
-      setText(val);
-      updateRoute(val);
-
-      debounced.current = window.setTimeout(() => {}, DEBOUNCE_LENGTH_MS);
+      const value = e.target.value;
+      setSearch(value);
     },
-    [updateRoute],
+    [setSearch],
   );
 
   const clearInput = useCallback(() => {
-    setText('');
-
-    updateRoute('');
-  }, [updateRoute]);
+    setSearch('');
+  }, [setSearch]);
 
   return (
     <div className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-gray-60 p-2 md:w-full lg:w-80">
@@ -85,13 +67,13 @@ export function SearchBar({ value }: { value: string }) {
       <input
         type="text"
         id="appsSearchBar"
-        value={text}
+        value={search}
         onChange={onChange}
         className="w-full bg-black font-sans text-base text-white placeholder:text-gray-muted focus:outline-none"
         placeholder="Search"
         aria-label="Search for apps and integrations in the Base ecosystem"
       />
-      {text && (
+      {search && (
         <button type="button" onClick={clearInput} aria-label="clear input">
           <XIcon />
         </button>

apps/web/src/components/Ecosystem/TagChip.tsx

@@ -1,26 +1,31 @@
-import { Url } from 'next/dist/shared/lib/router/router';
-import Link from 'next/link';
+'use client';
+
+import { Dispatch, SetStateAction, useCallback } from 'react';
 
 type Props = {
   tag: string;
   isSelected: boolean;
+  setSelectedTag: Dispatch<SetStateAction<string>>;
 };
 
-export async function TagChip({ tag, isSelected }: Props) {
-  // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
-  const tagHref: Url = {
-    pathname: '/ecosystem',
-    query: { tag },
-  };
+export function TagChip({ tag, isSelected, setSelectedTag }: Props) {
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      setSelectedTag(tag);
+    },
+    [setSelectedTag, tag],
+  );
+
   return (
-    <Link href={tagHref} scroll={false}>
-      <div
-        className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-muted px-8 hover:border-white ${
-          isSelected ? 'bg-gray-muted' : ''
-        }`}
-      >
-        <span className="text-center font-mono text-base uppercase text-white">{tag}</span>
-      </div>
-    </Link>
+    <button
+      onClick={onClick}
+      type="button"
+      className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-muted px-8 hover:border-white ${
+        isSelected ? 'bg-gray-muted' : ''
+      }`}
+    >
+      <span className="text-center font-mono text-base uppercase text-white">{tag}</span>
+    </button>
   );
 }