Merge branch 'main' of github.com:placeholder-soft/storytime

app/src/App.tsx

@@ -1,4 +1,3 @@
-import { Suspense } from "react";
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
 import { Provider } from "react-redux";
 import routes from "~react-pages";
@@ -17,9 +16,7 @@ export default function App() {
       <GlobalStyles />
       <ThemeProvider theme={theme}>
         <Router>
-          <Suspense fallback={<p>Loading...</p>}>
-            <Content />
-          </Suspense>
+          <Content />
         </Router>
       </ThemeProvider>
     </Provider>

app/src/components/Scene.tsx

@@ -6,6 +6,9 @@ import { currentSceneSelector } from "../modules/story/selectors";
 import { updateStory, toScene } from "../modules/story/actions";
 import { StoryProgressPromptRole } from "../types/story";
 import Loader from "../components/Loader";
+import { Project } from "model";
+import { auth, db } from "../firebase.ts";
+import { addDoc, collection } from "firebase/firestore";
 
 const BackgroundImageContainer = styled.div<{ backgroundImageUrl: string }>`
   background-image: url(${(props) => props.backgroundImageUrl});
@@ -154,10 +157,24 @@ const Scene = () => {
     setLoading(true);
   };
 
-  const onStoryEnd = () => {
+  const onStoryEnd = async () => {
     // TODO: upload book to firebase
+    const project: Project = {
+      owner: auth.currentUser!.uid,
+      name: "My Story",
+      title: "My Story",
+      character: {
+        type: "human",
+      },
+      coverImage: "https://app.storytime.one/assets/poster-FQgx4hzK.png",
+      createdAt: new Date().getTime(),
+      minted: false,
+      introduction: "This is my story",
+      rawPrompts: [],
+    };
+    const newProject = await addDoc(collection(db, "projects"), project);
     // go to mint page
-    navigate("/mint");
+    navigate("/mint?projectId=" + newProject.id);
   };
 
   if (loading) {

app/src/pages/dashboard/index.tsx

@@ -3,7 +3,9 @@ import { Project } from "model";
 import {
   collection,
   onSnapshot,
+  query,
   QueryDocumentSnapshot,
+  where,
 } from "firebase/firestore";
 import { User } from "firebase/auth";
 import { protectedRoute } from "../../components/protectedRoute";
@@ -172,7 +174,11 @@ const StyledIndexTag = styled.div`
 const DashboardPage = protectedRoute(({ user }: { user: User }) => {
   const [projects, setProjects] = useState<QueryDocumentSnapshot<Project>[]>();
   useEffect(() => {
-    onSnapshot(collection(db, `users/${user.uid}/projects`), (snapshot) => {
+    const myProjects = query(
+      collection(db, "projects"),
+      where("owner", "==", user.uid),
+    );
+    return onSnapshot(myProjects, (snapshot) => {
       setProjects(
         snapshot.docs.map((x) => x as QueryDocumentSnapshot<Project>),
       );

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

@@ -20,6 +20,10 @@ import {
   insertSalt,
 } from "../../components/zklogin.store";
 import { EVM } from "../../components/evm";
+import { useParams } from "react-router";
+import { Project } from "model";
+import { doc, onSnapshot, DocumentSnapshot } from "firebase/firestore";
+import { db } from "../../firebase.ts";
 
 const StyledInfoContainer = styled.div`
   display: flex;
@@ -57,6 +61,13 @@ const StyledCreateButtonContainer = styled.div`
 `;
 
 const MinStoryPage: FC = () => {
+  const projectId = useParams().projectId!;
+  const [project, setProject] = useState<DocumentSnapshot<Project>>();
+  useEffect(() => {
+    return onSnapshot(doc(db, "projects", projectId), (doc) =>
+      setProject(doc as any as DocumentSnapshot<Project>),
+    );
+  }, [projectId]);
   return (
     <PageContainer>
       <StyledContentContainer>
@@ -65,15 +76,21 @@ const MinStoryPage: FC = () => {
         </StyledTitleContainer>
         <StyledStoryContainer>
           <StyledStoryItem>
-            <StyledStoryImage src={storyImg} alt="" />
+            <StyledStoryImage
+              src={project?.data()?.coverImage ?? storyImg}
+              alt=""
+            />
             <StyledInfoContainer>
               <StyledStoryItemTitle>
-                The Journey to Dragon’s Keep
+                {project?.data()?.title ?? "The Journey to Dragon’s Keep"}
               </StyledStoryItemTitle>
               <StyledDescription>
+                {project?.data()?.introduction ??
+                  `
                 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>
               <StyledCreateButtonContainer>
                 <SuiMintButton />

model/model.d.ts

@@ -24,6 +24,7 @@ export type RawPrompt = {
 
 // note: Project = Story from FE
 export type Project = {
+  owner: string;
   character: Character;
   name: string;
   createdAt: number;