Merge pull request #22 from placeholder-soft/feat/able-read-old-story

feat: able read old story

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import styled from "styled-components";
 import {
   currentSceneSelector,
@@ -145,6 +145,7 @@ const Scene = () => {
   } = useSelector(currentSceneSelector);
   const navigate = useNavigate();
   const dispatch = useDispatch();
+  const [searchParams] = useSearchParams();
 
   useEffect(() => {
     if (sceneNumber) {
@@ -180,12 +181,16 @@ const Scene = () => {
   }, [descriptions, sceneDescription]);
 
   const onOptionClick = (val: string) => {
-    dispatch(
-      updateStory({
-        message: { role: StoryProgressPromptRole.User, content: val },
-      }),
-    );
-    setLoading(true);
+    if (searchParams.get("read") === "true") {
+      dispatch(toScene({ index: sceneNumber + 1 }));
+    } else {
+      dispatch(
+        updateStory({
+          message: { role: StoryProgressPromptRole.User, content: val },
+        }),
+      );
+      setLoading(true);
+    }
   };
 
   const onStoryEnd = async () => {
@@ -199,7 +204,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,
@@ -211,7 +216,11 @@ const Scene = () => {
       convertUndefinedToNull(project),
     );
     // go to mint page
-    navigate("/mint?projectId=" + newProject.id);
+    const to =
+      searchParams.get("read") === "true"
+        ? `/mint/${newProject.id}?read=true`
+        : `/mint/${newProject.id}`;
+    navigate(to);
   };
 
   if (loading) {

app/src/modules/story/actions.ts

@@ -1,5 +1,5 @@
 import { Action } from "redux";
-import { StoryProgress } from "../../types/story";
+import { StoryProgress, Scene } from "../../types/story";
 
 // Action Types
 export const TO_SCENE = "Story/TO_SCENE";
@@ -7,6 +7,8 @@ export const INIT_STORY = "Story/INIT_STORY";
 export const INIT_STORY_SUCCESS = "Story/INIT_STORY_SUCCESS";
 export const UPDATE_STORY = "Story/UPDATE_STORY";
 export const UPDATE_STORY_SUCCESS = "Story/UPDATE_STORY_SUCCESS";
+export const LOAD_STORY = "Story/LOAD_STORY";
+export const LOAD_STORY_SUCCESS = "Story/LOAD_STORY_SUCCESS";
 
 // Action Creators
 type ToSceneBody = { index: number };
@@ -52,6 +54,19 @@ export const updateStorySuccess = (data: UpdateStorySuccessBody) => ({
   data,
 });
 
+type LoadStoryBody = {
+  storyProgressPrompts: StoryProgress[];
+  title: string;
+  introduction: string;
+  coverImage: string;
+  scenes: Scene[];
+};
+export type LoadStoryAction = Action & { data: LoadStoryBody };
+export const loadStory = (data: LoadStoryBody): LoadStoryAction => ({
+  type: LOAD_STORY,
+  data,
+});
+
 export type StoryAction =
   | ToSceneAction
   | InitStoryAction

app/src/modules/story/reducers.ts

@@ -6,6 +6,7 @@ import {
   INIT_STORY_SUCCESS,
   UPDATE_STORY,
   UPDATE_STORY_SUCCESS,
+  LOAD_STORY,
 } from "./actions";
 import { parseStoryGuideline } from "./utils";
 import { STORY_MOCK } from "../../mock";
@@ -79,6 +80,19 @@ const storyReducer = (state = initialState, action: StoryAction) => {
         storyProgressPrompts: [...state.storyProgressPrompts, progress],
       };
     }
+    case LOAD_STORY: {
+      // when users fires their prompt to open AI, add the user role prompt into prompt list
+      const { storyProgressPrompts, title, introduction, coverImage, scenes } =
+        action.data;
+      return {
+        ...state,
+        storyProgressPrompts,
+        title,
+        introduction,
+        coverImage,
+        scenes,
+      };
+    }
     default:
       return state;
   }

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,9 @@
 import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 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,9 +12,13 @@ import {
   PageContainer,
 } from "../../components/Layout/Layout";
 import styled from "styled-components";
-import demoImage from "./_/demo.png";
-import { Link } from "react-router-dom";
+import { Link, Navigate } from "react-router-dom";
 import { Button } from "@radix-ui/themes";
+import {
+  createCharacterName,
+  createCharacterType,
+} from "../../modules/character/actions";
+import { loadStory } from "../../modules/story/actions";
 
 export const StyledContentContainer = styled(ContentContainer)`
   display: flex;
@@ -172,18 +173,42 @@ const StyledIndexTag = styled.div`
 `;
 
 const DashboardPage = protectedRoute(({ user }: { user: User }) => {
-  const [projects, setProjects] = useState<QueryDocumentSnapshot<Project>[]>();
+  const [projects, setProjects] = useState<Project[]>();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   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]);
+
+  const openBook = (value: Project) => {
+    const { character, rawPrompts, title, introduction, coverImage, scenes } =
+      value;
+    dispatch(createCharacterName({ characterName: character.name }));
+    dispatch(
+      createCharacterType({
+        characterType: character.type,
+        customCharacterType: character.customType,
+      }),
+    );
+    dispatch(
+      loadStory({
+        storyProgressPrompts: rawPrompts,
+        title,
+        introduction,
+        coverImage,
+        scenes,
+      }),
+    );
+    navigate("/story?read=true");
+  };
+
   if (projects == null) {
     return null;
   }
@@ -204,6 +229,7 @@ const DashboardPage = protectedRoute(({ user }: { user: User }) => {
       </PageContainer>
     );
   }
+
   return (
     <PageContainer>
       <StyledContentContainer>
@@ -214,29 +240,20 @@ 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) => (
-            <StyledStoryItem>
-              <StyledStoryImage src={story.image} alt="" />
+          {projects.map((story, idx) => (
+            <StyledStoryItem
+              onClick={() => {
+                openBook(story);
+              }}
+            >
+              <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>

app/src/pages/mint/[projectId].tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
+// import { useSearchParams } from "react-router-dom";
 import { PageContainer } from "../../components/Layout/Layout";
 import storyImg from "./_/story.png";
 import styled from "styled-components";
@@ -65,6 +66,10 @@ const StyledCreateButtonContainer = styled.div`
 const MinStoryPage: FC = () => {
   const projectId = useParams().projectId!;
   const [project, setProject] = useState<DocumentSnapshot<Project>>();
+  // const [searchParams] = useSearchParams();
+
+  // const readMode = searchParams.get("read") === "true";
+
   useEffect(() => {
     return onSnapshot(doc(db, "projects", projectId), (doc) =>
       setProject(doc as any as DocumentSnapshot<Project>),
@@ -96,9 +101,20 @@ const MinStoryPage: FC = () => {
               </StyledDescription>
               <StyledCreateButtonContainer>
                 <SuiMintButton projectId={projectId} />
-                <EVM projectId={projectId}>
-                  <StyledCreateButton>Mint Story (Avax)</StyledCreateButton>
-                </EVM>
+                {project?.data()?.minted ? (
+                  <StyledCreateButton
+                    style={{
+                      color: "white",
+                      backgroundColor: "green",
+                    }}
+                  >
+                    Minted! (Avax)
+                  </StyledCreateButton>
+                ) : (
+                  <EVM projectId={projectId}>
+                    <StyledCreateButton>Mint Story (Avax)</StyledCreateButton>
+                  </EVM>
+                )}
               </StyledCreateButtonContainer>
             </StyledInfoContainer>
           </StyledStoryItem>

model/model.d.ts

@@ -1,4 +1,4 @@
-export type Character = { type: string; name: string };
+export type Character = { type: string; name: string; customType: string };
 
 // user/{uid}/projects/{projectId}