From 21f6707da2700429b044b1b7b8cbd559dd6e26cf Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 15:59:40 +0700
Subject: [PATCH 1/9] feat: add react-wrap-balancer provider

---
 app/providers.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/providers.tsx b/app/providers.tsx
index 8969fbe..e805b43 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 
+import { Provider as ReactWrapBalancerProvider } from 'react-wrap-balancer';
+
 import { TooltipProvider } from '~/components/ui/tooltip';
 
 interface ProvidersProps {
@@ -9,5 +11,9 @@ interface ProvidersProps {
 }
 
 export function Providers({ children }: ProvidersProps) {
-  return <TooltipProvider>{children}</TooltipProvider>;
+  return (
+    <TooltipProvider>
+      <ReactWrapBalancerProvider>{children}</ReactWrapBalancerProvider>
+    </TooltipProvider>
+  );
 }

From 652bc6968e28c9747276296d4de14375bd5cd7d4 Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 16:00:34 +0700
Subject: [PATCH 2/9] refactor(ui): responsive header description

---
 components/header.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/components/header.tsx b/components/header.tsx
index a713425..1e58190 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-import { Balancer } from 'react-wrap-balancer';
-
 interface HeaderProps {
   title: string;
   subTitle: React.ReactNode;
@@ -10,12 +8,8 @@ interface HeaderProps {
 export function Header({ title, subTitle }: HeaderProps) {
   return (
     <header className="my-3 rounded-md border px-4 py-3">
-      <h1 className="font-bold">
-        <Balancer>{title}</Balancer>
-      </h1>
-      <p className="text-sm text-muted-foreground">
-        <Balancer>{subTitle}</Balancer>
-      </p>
+      <h1 className="font-bold">{title}</h1>
+      <p className="text-xs text-muted-foreground sm:text-sm">{subTitle}</p>
     </header>
   );
 }

From f8b135e09d2ce4852ce0ed6538a01f34136b4a4e Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 16:01:19 +0700
Subject: [PATCH 3/9] feat: add text balancer in alert dialog title

---
 app/analyze/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/analyze/page.tsx b/app/analyze/page.tsx
index 921de21..c6da804 100644
--- a/app/analyze/page.tsx
+++ b/app/analyze/page.tsx
@@ -3,6 +3,8 @@
 import * as React from 'react';
 import Link from 'next/link';
 
+import { Balancer } from 'react-wrap-balancer';
+
 import { analyzeFoodImageAction } from '~/app/analyze/actions';
 import { Header } from '~/components/header';
 import { Icons } from '~/components/icons';
@@ -184,7 +186,7 @@ export default function AnalyzePage() {
           <AlertDialogContent>
             <AlertDialogHeader>
               <AlertDialogTitle>
-                Failed to Access Device Camera!
+                <Balancer>Failed to Access Device Camera!</Balancer>
               </AlertDialogTitle>
               <AlertDialogDescription>
                 Please make sure you have granted access to your device camera

From f35a312d46b1bb634c3ee5cdd79231f0f056dc72 Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 16:30:37 +0700
Subject: [PATCH 4/9] feat: add loading indicator in search bar

---
 components/search-bar.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/components/search-bar.tsx b/components/search-bar.tsx
index d9b4e2c..f231981 100644
--- a/components/search-bar.tsx
+++ b/components/search-bar.tsx
@@ -15,6 +15,8 @@ export function SearchBar() {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [query, setQuery] = React.useState(searchParams.get('q') ?? '');
 
+  const [isPending, startTransition] = React.useTransition();
+
   const isEmptyQuery = query === '';
 
   React.useEffect(() => {
@@ -50,7 +52,10 @@ export function SearchBar() {
     if (!query) return;
 
     inputRef.current?.blur();
-    router.push(`/search?q=${query}`);
+
+    startTransition(() => {
+      router.push(`/search?q=${query}`);
+    });
   };
 
   return (
@@ -74,6 +79,14 @@ export function SearchBar() {
           <kbd className="pointer-events-none absolute bottom-1/2 right-2 flex h-7 translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-2 font-mono text-[10px] font-medium">
             <span className="text-xs">⌘</span>K
           </kbd>
+        ) : isPending ? (
+          <div
+            className={
+              'absolute bottom-1/2 right-1.5 grid h-7 w-7 translate-y-1/2 place-items-center text-muted-foreground'
+            }
+          >
+            <Icons.Loader size={20} className="animate-spin" />
+          </div>
         ) : (
           <Button
             type="reset"

From 60ac20833caa0f42aab670184ffaaa3bbad88b4d Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 16:36:52 +0700
Subject: [PATCH 5/9] feat: disable input when pending

---
 components/search-bar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/search-bar.tsx b/components/search-bar.tsx
index f231981..57fcaa6 100644
--- a/components/search-bar.tsx
+++ b/components/search-bar.tsx
@@ -67,6 +67,7 @@ export function SearchBar() {
         />
         <Input
           ref={inputRef}
+          disabled={isPending}
           className={cn('truncate px-11', {
             'pr-14': isEmptyQuery,
           })}

From 1e6921989b53ba8a2dd4c64144d40321eb14c174 Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Fri, 21 Jul 2023 16:44:59 +0700
Subject: [PATCH 6/9] refactor(ui): repetitive search end item position styles

---
 components/search-bar.tsx | 45 +++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/components/search-bar.tsx b/components/search-bar.tsx
index 57fcaa6..b5f5555 100644
--- a/components/search-bar.tsx
+++ b/components/search-bar.tsx
@@ -76,29 +76,28 @@ export function SearchBar() {
           onChange={handleChangeQuery}
         />
 
-        {isEmptyQuery ? (
-          <kbd className="pointer-events-none absolute bottom-1/2 right-2 flex h-7 translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-2 font-mono text-[10px] font-medium">
-            <span className="text-xs">⌘</span>K
-          </kbd>
-        ) : isPending ? (
-          <div
-            className={
-              'absolute bottom-1/2 right-1.5 grid h-7 w-7 translate-y-1/2 place-items-center text-muted-foreground'
-            }
-          >
-            <Icons.Loader size={20} className="animate-spin" />
-          </div>
-        ) : (
-          <Button
-            type="reset"
-            variant="secondary"
-            className="absolute bottom-1/2 right-1.5 h-7 w-7 translate-y-1/2 border p-1"
-            onClick={handleClearSearch}
-          >
-            <Icons.Cancel size={16} />
-            <span className="sr-only">Clear search</span>
-          </Button>
-        )}
+        <div className="absolute bottom-1/2 right-1.5 grid translate-y-1/2 place-items-center">
+          {isEmptyQuery ? (
+            <kbd className="pointer-events-none flex h-7 select-none items-center gap-1 rounded border bg-muted px-2 font-mono text-[10px] font-medium">
+              <span className="text-xs">⌘</span>K
+            </kbd>
+          ) : isPending ? (
+            <Icons.Loader
+              size={20}
+              className="mr-1 animate-spin text-muted-foreground"
+            />
+          ) : (
+            <Button
+              type="reset"
+              variant="secondary"
+              className="h-7 w-7 border p-1"
+              onClick={handleClearSearch}
+            >
+              <Icons.Cancel size={16} />
+              <span className="sr-only">Clear search</span>
+            </Button>
+          )}
+        </div>
       </div>
     </form>
   );

From 22c568ce1e43ff766562ae7afc50c927567564a4 Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Wed, 26 Jul 2023 09:20:35 +0700
Subject: [PATCH 7/9] fix: stuck on not found page

---
 app/search/not-found.tsx | 28 ----------------------------
 app/search/page.tsx      | 31 +++++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 30 deletions(-)
 delete mode 100644 app/search/not-found.tsx

diff --git a/app/search/not-found.tsx b/app/search/not-found.tsx
deleted file mode 100644
index 9bf1b87..0000000
--- a/app/search/not-found.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from 'next/link';
-
-import { Balancer } from 'react-wrap-balancer';
-
-import { constant } from '~/app/search/constant';
-import { Icons } from '~/components/icons';
-import { Button } from '~/components/ui/button';
-
-export default function Notfound() {
-  return (
-    <main className="container flex flex-1 items-center py-4">
-      <div className="flex w-full flex-col items-center rounded-lg border p-6 text-center">
-        <Icons.NotFound size={50} className="mb-2" />
-
-        <h1 className="mb-1 text-xl font-bold">{constant.notFound.title}</h1>
-        <p className="mb-4 text-sm text-muted-foreground">
-          <Balancer>{constant.notFound.description}</Balancer>
-        </p>
-
-        <Button asChild className="w-full gap-2">
-          <Link href="/">
-            <Icons.Back size={20} /> Back To Home
-          </Link>
-        </Button>
-      </div>
-    </main>
-  );
-}
diff --git a/app/search/page.tsx b/app/search/page.tsx
index 6419803..955353e 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
 import { Metadata } from 'next';
-import { notFound, redirect } from 'next/navigation';
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { Balancer } from 'react-wrap-balancer';
 
 import { constant } from '~/app/search/constant';
+import { Icons } from '~/components/icons';
 import { RecipeCard } from '~/components/recipe-card';
+import { Button } from '~/components/ui/button';
 import { spoonacular } from '~/lib/spoonacular';
 import { getRecipeImageById } from '~/lib/utils';
 
@@ -39,7 +44,29 @@ export default async function SearchPage({ searchParams }: SearchPageProps) {
 
   const recipes = await spoonacular.searchRecipesByQuery(searchParams.q);
 
-  if (recipes.length === 0) return notFound();
+  // related to this issue https://github.com/edwintantawi/foodsery/issues/5
+  // if the search result is empty, we will show a not found page here
+  // instead of using not-found.tsx page
+  if (recipes.length === 0) {
+    return (
+      <main className="container flex flex-1 items-center py-4">
+        <div className="flex w-full flex-col items-center rounded-lg border p-6 text-center">
+          <Icons.NotFound size={50} className="mb-2" />
+
+          <h1 className="mb-1 text-xl font-bold">{constant.notFound.title}</h1>
+          <p className="mb-4 text-sm text-muted-foreground">
+            <Balancer>{constant.notFound.description}</Balancer>
+          </p>
+
+          <Button asChild className="w-full gap-2">
+            <Link href="/">
+              <Icons.Back size={20} /> Back To Home
+            </Link>
+          </Button>
+        </div>
+      </main>
+    );
+  }
 
   return (
     <main className="container flex-1">

From e2e3dcaa1a6fd9fafd1be91ab0fcbfcc9641a548 Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Wed, 26 Jul 2023 09:22:54 +0700
Subject: [PATCH 8/9] feat: add opengraph title and description

---
 app/search/page.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/search/page.tsx b/app/search/page.tsx
index 955353e..28fae3e 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -28,11 +28,18 @@ export async function generateMetadata({
       return {
         title: constant.notFound.title,
         description: constant.notFound.description,
+        openGraph: {
+          title: constant.notFound.title,
+          description: constant.notFound.description,
+        },
       };
     }
 
     return {
       title: `Search results for ${searchParams.q}`,
+      openGraph: {
+        title: `Search results for ${searchParams.q}`,
+      },
     };
   } catch (error) {
     return {};

From e987e67a79e1e92e58523403ed18a4dc9358891e Mon Sep 17 00:00:00 2001
From: edwintantawi <edwintantawi.workspace@gmail.com>
Date: Wed, 26 Jul 2023 09:31:28 +0700
Subject: [PATCH 9/9] refactor(ui): remove desktop large text size

---
 components/section.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/section.tsx b/components/section.tsx
index 06aa1b2..1a2e6a6 100644
--- a/components/section.tsx
+++ b/components/section.tsx
@@ -14,11 +14,9 @@ export function Section({ children, icon, title, subtitle }: SectionProps) {
         <div className="flex aspect-square w-10 shrink-0 items-center justify-center rounded-lg border bg-slate-100 text-primary">
           {icon}
         </div>
-        <div className="sm:-mt-1">
-          <h2 className="font-bold sm:text-lg">{title}</h2>
-          <p className="text-xs text-muted-foreground sm:-mt-1 sm:text-sm">
-            {subtitle}
-          </p>
+        <div>
+          <h2 className="font-bold">{title}</h2>
+          <p className="text-xs text-muted-foreground">{subtitle}</p>
         </div>
       </header>
       {children}