Fix/no results search (#16)

* Distinguish no bookmarks and / no search result * Unify wording * Hide controls if no search results * Fix issue with URLSearchParams
premieroctet · Sep 18, 2023 · f6f7cdf · f6f7cdf · vercel · Sep 18, 2023
1 parent 49eedba
commit f6f7cdf
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 46 deletions.
diff --git a/src/app/(routes)/teams/[teamSlug]/page.tsx b/src/app/(routes)/teams/[teamSlug]/page.tsx
@@ -53,6 +53,7 @@ const TeamPage = async ({ params, searchParams }: TeamPageProps) => {
       linkCount={totalCount}
       bookmarks={bookmarks}
       digests={digests}
+      search={search}
     />
   );
 };

diff --git a/src/components/bookmark/BookmarksListControls.tsx b/src/components/bookmark/BookmarksListControls.tsx
@@ -9,14 +9,14 @@ export const BookmarksListControls = ({
   linkCount,
 }: { linkCount: number } & PropsWithChildren) => {
   const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams?.toString());
   const path = usePathname();
   let [isPending, startTransition] = useTransition();
   const { replace } = useRouter();
 
   const handleCheckboxChange = () => {
     if (!searchParams) return;
 
-    const params = new URLSearchParams(searchParams);
     if (params.get('all') === 'true') {
       params.delete('all');
     } else {
@@ -28,6 +28,8 @@ export const BookmarksListControls = ({
     });
   };
 
+  if (params?.get('search') && !linkCount) return null;
+
   return (
     <div className="flex items-center justify-end gap-3 max-sm:w-full max-sm:justify-between">
       <Switch

diff --git a/src/components/bookmark/BookmarksTeamList.tsx b/src/components/bookmark/BookmarksTeamList.tsx
@@ -1,16 +1,8 @@
 'use client';
 
-import useCustomToast from '@/hooks/useCustomToast';
-import useTransitionRefresh from '@/hooks/useTransitionRefresh';
-import api from '@/lib/api';
 import { TeamBookmarksResult } from '@/lib/queries';
-import { ApiBookmarkResponseSuccess } from '@/pages/api/teams/[teamId]/bookmark';
 import { BsFillBookmarkFill } from '@react-icons/all-files/bs/BsFillBookmarkFill';
-import { AxiosError, AxiosResponse } from 'axios';
-import clsx from 'clsx';
-import { useMutation } from 'react-query';
 import NoContent from '../layout/NoContent';
-import message from '../../messages/en';
 import { BookmarkItem } from './BookmarkItem';
 import Link from 'next/link';
 import SearchInput from '../digests/SearchInput';
@@ -22,38 +14,35 @@ type Props = {
 };
 
 export const BookmarksTeamList = ({ bookmarks, teamId, teamSlug }: Props) => {
-  if (bookmarks.length < 1) {
-    return (
-      <NoContent
-        icon={<BsFillBookmarkFill />}
-        title="No bookmark"
-        subtitle="Start bookmarking links to share them with your team"
-      />
-    );
-  }
-
   return (
     <div className="w-full">
       <SearchInput className="mb-4" />
-
-      <div className="flex flex-col gap-2">
-        {bookmarks.map((bookmark) => (
-          <Link
-            key={bookmark?.id}
-            href={bookmark.link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <BookmarkItem
-              bookmark={bookmark}
-              teamSlug={teamSlug}
-              teamId={teamId}
-              digestId={bookmark.digestBlocks[0]?.digest.id}
-              nbOfTimesUsed={bookmark.digestBlocks.length}
-            />
-          </Link>
-        ))}
-      </div>
+      {bookmarks.length < 1 ? (
+        <NoContent
+          icon={<BsFillBookmarkFill />}
+          title="No bookmark"
+          subtitle="No bookmark matched your search"
+        />
+      ) : (
+        <div className="flex flex-col gap-2">
+          {bookmarks.map((bookmark) => (
+            <Link
+              key={bookmark?.id}
+              href={bookmark.link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <BookmarkItem
+                bookmark={bookmark}
+                teamSlug={teamSlug}
+                teamId={teamId}
+                digestId={bookmark.digestBlocks[0]?.digest.id}
+                nbOfTimesUsed={bookmark.digestBlocks.length}
+              />
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/digests/SearchInput.tsx b/src/components/digests/SearchInput.tsx
@@ -18,7 +18,7 @@ const SearchInput = ({
   /* eslint-disable react-hooks/exhaustive-deps */
   const onSearch = useCallback(
     debounce((e: React.ChangeEvent<HTMLInputElement>) => {
-      const params = new URLSearchParams(searchParams);
+      const params = new URLSearchParams(searchParams.toString());
       params.set('search', e.target.value);
 
       startTransition(() => {

diff --git a/src/components/list/Pagination.tsx b/src/components/list/Pagination.tsx
@@ -28,7 +28,7 @@ const Pagination = ({
     totalItems < itemsPerPage ? 1 : Math.ceil(totalItems / itemsPerPage);
 
   const handlePageChange = (page: number) => {
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     params.set('page', page.toString());
 
     startTransition(() => {

diff --git a/src/components/pages/DigestEditPage.tsx b/src/components/pages/DigestEditPage.tsx
@@ -286,6 +286,7 @@ export const DigestEditPage = ({
                   <NoContent
                     icon={<BsFillBookmarkFill />}
                     title="No bookmark"
+                    subtitle="No bookmark matched your search"
                   />
                 )}
               </div>

diff --git a/src/components/pages/Team.tsx b/src/components/pages/Team.tsx
@@ -14,15 +14,18 @@ import { Digests } from '../digests/Digests';
 import PageContainer from '../layout/PageContainer';
 import { Tooltip } from '../Tooltip';
 import { BookmarksListControls } from '../bookmark/BookmarksListControls';
+import NoContent from '../layout/NoContent';
+import { BsFillBookmarkFill } from '@react-icons/all-files/bs/BsFillBookmarkFill';
 
 type Props = {
   linkCount: number;
   bookmarks: TeamBookmarksResult[];
   digests: TeamDigestsResult[];
   team: Awaited<ReturnType<typeof getTeamBySlug>>;
+  search?: string;
 };
 
-const Team = ({ team, linkCount, bookmarks, digests }: Props) => {
+const Team = ({ team, linkCount, bookmarks, digests, search }: Props) => {
   return (
     <PageContainer title={team.name}>
       <div className="flex max-lg:flex-col gap-5 pb-4">
@@ -43,11 +46,19 @@ const Team = ({ team, linkCount, bookmarks, digests }: Props) => {
             </div>
           }
         >
-          <BookmarksTeamList
-            teamId={team.id}
-            teamSlug={team.slug}
-            bookmarks={bookmarks}
-          />
+          {!search && !bookmarks?.length ? (
+            <NoContent
+              icon={<BsFillBookmarkFill />}
+              title="No bookmark"
+              subtitle="Start bookmarking links to share them with your team"
+            />
+          ) : (
+            <BookmarksTeamList
+              teamId={team.id}
+              teamSlug={team.slug}
+              bookmarks={bookmarks}
+            />
+          )}
         </Card>
         <Card
           className="w-full lg:w-1/3"