feat: update book data on dashboard

app/package.json

@@ -20,6 +20,7 @@
     "@reduxjs/toolkit": "^2.0.1",
     "@tanstack/react-query": "^5.0.0",
     "axios": "^1.6.2",
+    "date-fns": "^2.30.0",
     "dedent": "^1.5.1",
     "dnum-cjs": "^2.9.0",
     "fabric": "^5.3.0",

app/pnpm-lock.yaml

@@ -35,6 +35,9 @@ dependencies:
   axios:
     specifier: ^1.6.2
     version: 1.6.2
+  date-fns:
+    specifier: ^2.30.0
+    version: 2.30.0
   dedent:
     specifier: ^1.5.1
     version: 1.5.1
@@ -4884,6 +4887,13 @@ packages:
     dev: false
     optional: true
 
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.23.5
+    dev: false
+
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}

app/src/components/Scene.tsx

@@ -199,7 +199,7 @@ const Scene = () => {
       name: wholeStory.title,
       createdAt: new Date().getTime(),
       minted: false,
-      title: "My Story",
+      title: wholeStory.title,
       introduction: wholeStory.introduction,
       coverImage: wholeStory.coverImage,
       rawPrompts: wholeStory.storyProgressPrompts,

app/src/modules/story/utils.ts

@@ -139,8 +139,8 @@ Generate image base on current scene while ensuring the options are in the scene
 };
 
 export const splitDesc = (content: string) => {
-  const [desc, options] = content.split(":1.");
+  const [desc, options] = content.split("1.");
   const [option1, otherOptions] = options.split("2. ");
   const [option2, option3] = otherOptions.split("3. ");
-  return [`${desc}:`, `1.${option1}`, `2. ${option2}`, `3. ${option3}`];
+  return [`${desc}`, `1.${option1}`, `2. ${option2}`, `3. ${option3}`];
 };

app/src/pages/dashboard/index.tsx

@@ -1,12 +1,7 @@
 import { useEffect, useState } from "react";
 import { Project } from "model";
-import {
-  collection,
-  onSnapshot,
-  query,
-  QueryDocumentSnapshot,
-  where,
-} from "firebase/firestore";
+import { format } from "date-fns";
+import { collection, onSnapshot, query, where } from "firebase/firestore";
 import { User } from "firebase/auth";
 import { protectedRoute } from "../../components/protectedRoute";
 import { db } from "../../firebase";
@@ -15,7 +10,6 @@ import {
   PageContainer,
 } from "../../components/Layout/Layout";
 import styled from "styled-components";
-import demoImage from "./_/demo.png";
 import { Link } from "react-router-dom";
 import { Button } from "@radix-ui/themes";
 
@@ -172,16 +166,14 @@ const StyledIndexTag = styled.div`
 `;
 
 const DashboardPage = protectedRoute(({ user }: { user: User }) => {
-  const [projects, setProjects] = useState<QueryDocumentSnapshot<Project>[]>();
+  const [projects, setProjects] = useState<Project[]>();
   useEffect(() => {
     const myProjects = query(
       collection(db, "projects"),
       where("owner", "==", user.uid),
     );
     return onSnapshot(myProjects, (snapshot) => {
-      setProjects(
-        snapshot.docs.map((x) => x as QueryDocumentSnapshot<Project>),
-      );
+      setProjects(snapshot.docs.map((x) => x.data()) as Project[]);
     });
   }, [user.uid]);
   if (projects == null) {
@@ -204,6 +196,7 @@ const DashboardPage = protectedRoute(({ user }: { user: User }) => {
       </PageContainer>
     );
   }
+
   return (
     <PageContainer>
       <StyledContentContainer>
@@ -214,29 +207,16 @@ const DashboardPage = protectedRoute(({ user }: { user: User }) => {
           </Link>
         </StyledTitleContainer>
         <StyledStoryContainer>
-          {[
-            {
-              name: "The Journey to Dragon’s Keep",
-              image: demoImage,
-            },
-            {
-              name: "The Journey to Dragon’s Keep",
-              image: demoImage,
-            },
-          ].map((story, idx) => (
+          {projects.map((story, idx) => (
             <StyledStoryItem>
-              <StyledStoryImage src={story.image} alt="" />
+              <StyledStoryImage src={story.coverImage} alt="" />
               <div>
                 <StyledInfo>
-                  <StyledMintTag>Minted</StyledMintTag>
-                  <DateText>12/12/2023</DateText>
+                  {story.minted && <StyledMintTag>Minted</StyledMintTag>}
+                  <DateText>{format(story.createdAt, "yyy/MM/dd")}</DateText>
                 </StyledInfo>
                 <StyledStoryItemTitle>{story.name}</StyledStoryItemTitle>
-                <StyledDescription>
-                  A playful and bold collage of colors and shapes, blending a
-                  retro feel with modern design principles to evoke creativity
-                  and the joy of building something unique and impactful.
-                </StyledDescription>
+                <StyledDescription>{story.introduction}</StyledDescription>
                 <StyledLink>Read Story</StyledLink>
               </div>
               <StyledIndexTag>#{idx + 1}</StyledIndexTag>