Implement edit page (#24)

* Add navigation to edit card page. * Display card not found result, in case card is not found. * Implement CardNotFoundPage component. * Cleanup * Move app state to context. * Move app-state folder to ui folder * Update plan * Implement edit-card-form.tsx * Move scanner to ui folder * Implement card-form. Use in edit card detail. * Use card-form in CreateCardForm. * Move card-form-reducer. * Cleanup * Use grouped export. * Update buttons width. * Update buttons width 2.
lukasbicus · Nov 13, 2024 · 730c60b · 730c60b
1 parent 5dba12b
commit 730c60b
Show file tree

Hide file tree

Showing 26 changed files with 568 additions and 391 deletions.
diff --git a/app/(homescreens)/my-cards/cards-list.tsx b/app/(homescreens)/my-cards/cards-list.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AppActions, AppActionTypes, Card } from '@/app/lib/app-state/reducer';
+import { AppActions, AppActionTypes, Card } from '@/app/ui/app-state';
 import { Routes } from '@/app/lib/shared';
 import { CompanyIcon } from '@/app/ui/company-icon';
 import { IconStar, IconStarFilled } from '@tabler/icons-react';

diff --git a/app/(homescreens)/my-cards/my-cards-page.tsx b/app/(homescreens)/my-cards/my-cards-page.tsx
@@ -1,8 +1,12 @@
 'use client';
 
 import { CardsList } from '@/app/(homescreens)/my-cards/cards-list';
-import useAppState from '@/app/lib/app-state/app-state';
-import { AppActionTypes, AppState, Card } from '@/app/lib/app-state/reducer';
+import {
+  AppActionTypes,
+  AppState,
+  Card,
+  useAppState,
+} from '@/app/ui/app-state';
 import { favoriteFilter, getNameFilter } from '@/app/lib/filters';
 import { Routes } from '@/app/lib/shared';
 import { MainMessage } from '@/app/ui/main-message';
@@ -77,10 +81,16 @@ export default function MyCardsPage() {
           description="Looks like you haven't added any loyalty cards yet. Get started by adding your first cards! You can manually add card details or import them if you have a digital file."
         >
           <div className="flex justify-center justify-self-center gap-4 px-4 w-full">
-            <Link href={Routes.AddCards} className="btn btn-primary w-1/4">
+            <Link
+              href={Routes.AddCards}
+              className="btn btn-primary w-1/3 max-w-36"
+            >
               Add cards
             </Link>
-            <Link href={Routes.ImportData} className="btn btn-primary w-1/4">
+            <Link
+              href={Routes.ImportData}
+              className="btn btn-primary w-1/3 max-w-36"
+            >
               Import cards
             </Link>
           </div>

diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { AppActionTypes } from '@/app/lib/app-state/reducer';
+import { CardNotFoundPage } from '@/app/ui/card-not-found-page';
 import { CodePicture } from '@/app/ui/code-picture';
 import { ConfirmDialog } from '@/app/ui/confirm-dialog';
-import useAppState from '@/app/lib/app-state/app-state';
+import { useAppState, AppActionTypes } from '@/app/ui/app-state';
 import { Routes } from '@/app/lib/shared';
 import { CompanyIcon } from '@/app/ui/company-icon';
-import { MainMessage } from '@/app/ui/main-message';
 import { PageTemplate } from '@/app/ui/page-template';
 import { SecondaryHeader } from '@/app/ui/secondary-header';
-import { IconCards, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useRef } from 'react';
@@ -22,25 +21,7 @@ export function CardDetailPage() {
   const deleteDialogRef = useRef<HTMLDialogElement>(null);
   const router = useRouter();
   if (!card) {
-    return (
-      <PageTemplate
-        header={<SecondaryHeader title="Card detail" href={Routes.MyCards} />}
-      >
-        <div className="flex h-2/3 w-full items-center justify-center">
-          <MainMessage
-            title="Card not found"
-            description={`Something went wrong. Found with id ${id} not found.`}
-          >
-            <Link href={Routes.MyCards} replace>
-              <button className="btn btn-primary">
-                <IconCards className="w-6 h-6" />
-                My cards
-              </button>
-            </Link>
-          </MainMessage>
-        </div>
-      </PageTemplate>
-    );
+    return <CardNotFoundPage id={id} title="Card detail" />;
   }
   return (
     <PageTemplate
@@ -58,10 +39,15 @@ export function CardDetailPage() {
               >
                 <IconTrash />
               </button>
-              <Link href={Routes.MyCards} replace>
-                <button className="btn btn-square btn-ghost">
-                  <IconEdit />
-                </button>
+              <Link
+                href={{
+                  pathname: Routes.EditCard,
+                  query: { id: card.id },
+                }}
+                replace
+                className="btn btn-square btn-ghost"
+              >
+                <IconEdit />
               </Link>
             </div>
           }