From 4f6fa1d5c3230de3f3300e3a518dcd606bc53bfa Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Mon, 29 Jul 2024 19:20:28 +0600
Subject: [PATCH] fix: search

---
 .../DiscoverRoadmaps/DiscoverRoadmaps.tsx     | 235 +++++++++---------
 1 file changed, 120 insertions(+), 115 deletions(-)

diff --git a/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx b/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx
index 9bc520c2c..62805fe1a 100644
--- a/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx
+++ b/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx
@@ -111,125 +111,130 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
   const loadingIndicator = isLoading && <LoadingRoadmaps />;
 
   return (
-      <>
-          {isCreatingRoadmap && (
-              <CreateRoadmapModal
-                  onClose={() => {
-                      setIsCreatingRoadmap(false);
-                  }}
-              />
-          )}
-
-          <div className="border-b bg-white py-7">
-              <div className="container text-left">
-                  <div className="flex flex-col items-start bg-white">
-                      <h1 className="mb-1 text-2xl font-bold sm:text-3xl">
-                          Community Roadmaps
-                      </h1>
-                      <p className="text-base text-gray-500">
-                          Browse the roadmaps created by the community or{' '}
-                          <button
-                              onClick={() => {
-                                  setIsCreatingRoadmap(true);
-                              }}
-                              className="rounded text-blue-600 underline"
-                          >
-                              create your own roadmap
-                          </button>
-                      </p>
-                  </div>
-              </div>
+    <>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+          }}
+        />
+      )}
+
+      <div className="border-b bg-white py-7">
+        <div className="container text-left">
+          <div className="flex flex-col items-start bg-white">
+            <h1 className="mb-1 text-2xl font-bold sm:text-3xl">
+              Community Roadmaps
+            </h1>
+            <p className="text-base text-gray-500">
+              Browse the roadmaps created by the community or{' '}
+              <button
+                onClick={() => {
+                  setIsCreatingRoadmap(true);
+                }}
+                className="rounded text-blue-600 underline"
+              >
+                create your own roadmap
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-50 py-3">
+        <section className="container mx-auto py-3">
+          <div className="mb-3.5 flex items-stretch justify-between gap-2.5">
+            <SearchRoadmap
+              total={roadmapsResponse?.totalCount || 0}
+              value={pageState.searchTerm}
+              isLoading={isLoading}
+              onValueChange={(value) => {
+                setPageState({
+                  ...pageState,
+                  searchTerm: value,
+                  currentPage: 1,
+                });
+              }}
+            />
+
+            <DiscoverRoadmapSorting
+              sortBy={pageState.sortBy}
+              onSortChange={(sortBy) => {
+                setPageState({
+                  ...pageState,
+                  sortBy,
+                });
+              }}
+            />
           </div>
-          <div className="py-3 bg-gray-50">
-              <section className="container mx-auto py-3">
-                  <div className="mb-3.5 flex items-stretch justify-between gap-2.5">
-                      <SearchRoadmap
-                          total={roadmapsResponse?.totalCount || 0}
-                          value={pageState.searchTerm}
-                          isLoading={isLoading}
-                          onValueChange={(value) => {
-                          }}
-                      />
-
-                      <DiscoverRoadmapSorting
-                          sortBy={pageState.sortBy}
-                          onSortChange={(sortBy) => {
-                              setPageState({
-                                  ...pageState,
-                                  sortBy,
-                              });
-                          }}
-                      />
-                  </div>
-
-                  {loadingIndicator}
-                  {roadmaps.length === 0 && !isLoading && <EmptyDiscoverRoadmaps/>}
-                  {roadmaps.length > 0 && !isLoading && (
-                      <>
-                          <ul className="mb-4 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
-                              {roadmaps.map((roadmap) => {
-                                  const roadmapLink = `/r/${roadmap.slug}`;
-                                  const totalRatings = Object.keys(
-                                      roadmap.ratings?.breakdown || [],
-                                  ).reduce(
-                                      (acc: number, key: string) =>
-                                          acc + roadmap.ratings.breakdown[key as any],
-                                      0,
-                                  );
-                                  return (
-                                      <li key={roadmap._id} className="h-full min-h-[175px]">
-                                          <a
-                                              key={roadmap._id}
-                                              href={roadmapLink}
-                                              className="flex h-full flex-col rounded-lg border bg-white p-3.5 transition-colors hover:border-gray-300 hover:bg-gray-50"
-                                              target={'_blank'}
-                                          >
-                                              <div className="grow">
-                                                  <h2 className="text-balance text-base font-bold leading-tight">
-                                                      {roadmap.title}
-                                                  </h2>
-                                                  <p className="mt-2 text-sm text-gray-500">
-                                                      {roadmap.description}
-                                                  </p>
-                                              </div>
-
-                                              <div className="flex items-center justify-between gap-2">
+
+          {loadingIndicator}
+          {roadmaps.length === 0 && !isLoading && <EmptyDiscoverRoadmaps />}
+          {roadmaps.length > 0 && !isLoading && (
+            <>
+              <ul className="mb-4 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {roadmaps.map((roadmap) => {
+                  const roadmapLink = `/r/${roadmap.slug}`;
+                  const totalRatings = Object.keys(
+                    roadmap.ratings?.breakdown || [],
+                  ).reduce(
+                    (acc: number, key: string) =>
+                      acc + roadmap.ratings.breakdown[key as any],
+                    0,
+                  );
+                  return (
+                    <li key={roadmap._id} className="h-full min-h-[175px]">
+                      <a
+                        key={roadmap._id}
+                        href={roadmapLink}
+                        className="flex h-full flex-col rounded-lg border bg-white p-3.5 transition-colors hover:border-gray-300 hover:bg-gray-50"
+                        target={'_blank'}
+                      >
+                        <div className="grow">
+                          <h2 className="text-balance text-base font-bold leading-tight">
+                            {roadmap.title}
+                          </h2>
+                          <p className="mt-2 text-sm text-gray-500">
+                            {roadmap.description}
+                          </p>
+                        </div>
+
+                        <div className="flex items-center justify-between gap-2">
                           <span className="flex items-center gap-1 text-xs text-gray-400">
-                            <Shapes size={15} className="inline-block"/>
-                              {Intl.NumberFormat('en-US', {
-                                  notation: 'compact',
-                              }).format(roadmap.topicCount)}{' '}
+                            <Shapes size={15} className="inline-block" />
+                            {Intl.NumberFormat('en-US', {
+                              notation: 'compact',
+                            }).format(roadmap.topicCount)}{' '}
                           </span>
 
-                                                  <Rating
-                                                      rating={roadmap?.ratings?.average || 0}
-                                                      readOnly={true}
-                                                      starSize={16}
-                                                      total={totalRatings}
-                                                  />
-                                              </div>
-                                          </a>
-                                      </li>
-                                  );
-                              })}
-                          </ul>
-
-                          <Pagination
-                              currPage={roadmapsResponse?.currPage || 1}
-                              totalPages={roadmapsResponse?.totalPages || 1}
-                              perPage={roadmapsResponse?.perPage || 0}
-                              totalCount={roadmapsResponse?.totalCount || 0}
-                              onPageChange={(page) => {
-                                  setPageState({
-                                      ...pageState,
-                                      currentPage: page,
-                                  });
-                              }}
+                          <Rating
+                            rating={roadmap?.ratings?.average || 0}
+                            readOnly={true}
+                            starSize={16}
+                            total={totalRatings}
                           />
-                      </>
-                  )}
-              </section>
-          </div>
-      </>
+                        </div>
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+
+              <Pagination
+                currPage={roadmapsResponse?.currPage || 1}
+                totalPages={roadmapsResponse?.totalPages || 1}
+                perPage={roadmapsResponse?.perPage || 0}
+                totalCount={roadmapsResponse?.totalCount || 0}
+                onPageChange={(page) => {
+                  setPageState({
+                    ...pageState,
+                    currentPage: page,
+                  });
+                }}
+              />
+            </>
+          )}
+        </section>
+      </div>
+    </>
   );
 }