Merge pull request #14 from ContentLedger/feat-ui-polish

Final UI for Project Day

app/app/collection/[id]/page.tsx

@@ -2,76 +2,67 @@
 
 import { useAppState } from "@/hooks/useAppState";
 import { redirect } from "next/navigation";
-import { CollectionImageCard } from "@/components/collection/collection-image-card";
-import { Button } from "@/components/ui/button";
-import { bid, claim } from "@/lib/solanaHubProgram";
-import { useAnchorProvider } from "@/components/anchor-wallet-provider";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import { CollectionFullCard } from "@/components/collection/collection-full-card";
 
-type ViewProps = {
+type CollectionProps = {
   params: {
     id: string;
   };
 };
 
-export default function View({ params }: ViewProps) {
+export default function Collection({ params }: CollectionProps) {
   const collection = useAppState(
     (state) => state.collections.published[params.id]
   );
   if (!collection) redirect("/");
 
-  const provider = useAnchorProvider();
-
-  const onBidClick = (index: number) => {
-    const collectionName = `collection-${collection.id}`;
-    const nftId = index + 1;
-    let amount = prompt("Please enter your bid amount", "0.1");
-    const bidAmount = parseFloat(amount || "0.1") * 10 ** 9;
-    console.log("Bid amount", bidAmount);
-    bid(collectionName, nftId, bidAmount, provider).then((value: string) => {
-      console.log("Transaction sent", value);
-    });
-  };
-
-  const onClaimClick = (index: number) => {
-    const collectionName = `collection-${collection.id}`;
-    const nftId = index + 1;
-    claim(collectionName, nftId, provider).then((value: string) => {
-      console.log("Transaction sent", value);
-    });
-    console.log("Claim clicked", {
-      collectionName,
-      nftId,
-    });
-  };
-
   return (
-    <div className="flex justify-stretch">
-      <main className="flex-1 p-8">
-        <h1 className="text-2xl font-bold">{collection?.name}</h1>
-        <div className="flex gap-8 mt-8">
-          {collection?.items.map((item, idx) => (
-            <div className="flex flex-col gap-1">
-              <CollectionImageCard key={idx} item={item} />
-              <Button
-                className="bg-background text-foreground"
-                onClick={() => {
-                  onBidClick(idx);
-                }}
-              >
-                Bid
-              </Button>
-              <Button
-                className="bg-background text-foreground"
-                onClick={() => {
-                  onClaimClick(idx);
-                }}
-              >
-                Claim
-              </Button>
-            </div>
-          ))}
-        </div>
-      </main>
+    <div className="flex flex-col p-8">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem className="text-2xl font-bold">
+            <BreadcrumbLink asChild>
+              <Link href="/">Collections</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem className="text-2xl font-bold">
+            <BreadcrumbLink asChild>
+              <Link href={`/collection/${collection.id}`}>
+                {collection.name}
+              </Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="flex gap-8">
+        <main className="flex-1">
+          <div className="flex flex-col gap-8 mt-8">
+            {collection?.items.map((item, idx) => (
+              <div key={idx} className="flex gap-1 h-[500px]">
+                <CollectionFullCard
+                  index={idx}
+                  id={collection.id}
+                  name={collection.name}
+                  duration={collection.duration}
+                  txHash={collection.txHash}
+                  meta={collection.meta[idx]}
+                  publishedAt={collection.publishedAt}
+                  item={item}
+                />
+              </div>
+            ))}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }

app/app/create/page.tsx → app/app/create/[id]/page.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+} from "@/components/ui/breadcrumb";
 import {
   CharacterCard,
   CharacterCardData,
@@ -13,23 +19,24 @@ import {
 } from "@/components/create/create-collection-dialog";
 import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { CreateCollectionDetails } from "@/components/create/create-collection-details";
+import { redirect, useRouter } from "next/navigation";
+import Link from "next/link";
 
-export default function Create() {
-  const { drafts, activeDraft } = useAppState((state) => state.collections);
-  const { create, update, destroy, publish } = useAppState(
-    (state) => state.actions.collection
-  );
-  const [submit, setSubmit] = useState(false);
+type CreateProps = {
+  params: {
+    id: string;
+  };
+};
 
-  useEffect(() => {
-    return () => destroy(activeDraft);
-  }, [create, destroy, activeDraft]);
+export default function Collection({ params }: CreateProps) {
+  const router = useRouter();
+  const collection = useAppState(
+    (state) => state.collections.drafts[params.id]
+  );
+  if (!collection) redirect("/");
 
-  const collection = useMemo(() => {
-    if (activeDraft && drafts[activeDraft]) return drafts[activeDraft];
-    create("New Collection");
-    return { name: "", id: "", items: [] };
-  }, [activeDraft, create, drafts]);
+  const { update, publish } = useAppState((state) => state.actions.collection);
+  const [submit, setSubmit] = useState(false);
 
   const createEnabled = useMemo(
     () =>
@@ -40,37 +47,62 @@ export default function Create() {
   );
 
   const handleAdd = useCallback(() => {
-    update(collection.id, { name: "", description: "", image: "" });
+    update(collection.id, collection.name, collection.duration, {
+      name: "",
+      description: "",
+      image: "",
+    });
   }, [update, collection]);
 
-  const handleChange = useCallback(
+  const handleItemChange = useCallback(
     (data: CharacterCardData) => {
-      update(collection.id, data, collection.items.length - 1);
+      update(
+        collection.id,
+        collection.name,
+        collection.duration,
+        data,
+        collection.items.length - 1
+      );
+    },
+    [update, collection]
+  );
+
+  const handleCollectionChange = useCallback(
+    (name: string, duration: number) => {
+      update(collection.id, name, duration);
     },
     [update, collection]
   );
 
   const handleCompleted = useCallback(
-    (id: string, results: CreateCollectionResults) => {
+    (id: string, txHash: string, results: CreateCollectionResults) => {
       console.log("Collection created", id, results);
-      publish(id, results);
-      setSubmit(false);
+      publish(id, txHash, results);
+      setTimeout(() => router.push(`/collection/${id}`), 1);
     },
-    [publish]
+    [publish, router]
   );
 
   return (
     <div className="flex flex-col p-8">
-      <h1 className="text-2xl font-bold">New Collection</h1>
-      <div className="flex">
-        <main className="flex-1">
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem className="text-2xl font-bold">
+            <BreadcrumbLink asChild>
+              <Link href="/create">{collection.name || "New Collection"}</Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+      <div className="flex gap-8">
+        <main className="basis-3/4">
           <div className="flex flex-col gap-4 mt-8">
             {collection.items.map((data, index) => (
               <CharacterCard
-                key={index}
+                key={`${collection.id}-${index}`}
                 {...data}
                 editable={index === collection.items.length - 1}
-                onChange={handleChange}
+                onChange={handleItemChange}
                 onAdd={handleAdd}
               />
             ))}
@@ -94,8 +126,12 @@ export default function Create() {
             </AlertDialog>
           </div>
         </main>
-        <aside className="p-8 flex-2">
-          <CreateCollectionDetails name={collection.name} />
+        <aside className="mt-8 basis-1/4">
+          <CreateCollectionDetails
+            name={collection.name}
+            duration={collection.duration}
+            onChange={handleCollectionChange}
+          />
         </aside>
       </div>
     </div>

app/app/layout.tsx

@@ -32,7 +32,7 @@ export default function RootLayout({
                 <div className="min-h-screen">
                   <Header className="sticky top-0 z-50" />
                   <main>{children}</main>
-                  <footer className="flex gap-6 flex-wrap items-center justify-center py-4 sticky top-[100vh]">
+                  <footer className="flex gap-8 flex-wrap items-center justify-center py-4 sticky top-[100vh] text-muted-foreground">
                     2024 © Content Ledger
                   </footer>
                 </div>

app/app/page.tsx

@@ -1,23 +1,37 @@
 "use client";
 
 import { CollectionImageCard } from "@/components/collection/collection-image-card";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+} from "@/components/ui/breadcrumb";
 import { useAppState } from "@/hooks/useAppState";
 import Link from "next/link";
 
 export default function Home() {
   const collections = useAppState((state) => state.collections.published);
 
   return (
-    <div className="flex justify-stretch">
+    <div className="flex">
       <main className="flex-1 p-8">
-        <h1 className="text-2xl font-bold">Collections</h1>
-        <div className="flex gap-8 mt-8">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="text-2xl font-bold">
+              <BreadcrumbLink asChild>
+                <Link href="/">Collections</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="flex flex-wrap gap-8 mt-8">
           {Object.values(collections)
             .filter((c) => c !== undefined)
             .map((collection) => (
               <Link key={collection.id} href={`/collection/${collection.id}`}>
                 <CollectionImageCard
-                  item={collection.items[0]}
+                  item={{ ...collection.items[0], name: collection.name }}
                   count={collection.items.length}
                 />
               </Link>