Merge pull request #19 from placeholder-soft/fix/filling-firebase-data

fix: fill in project data

app/src/components/Scene.tsx

@@ -2,7 +2,10 @@ import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { currentSceneSelector } from "../modules/story/selectors";
+import {
+  currentSceneSelector,
+  storyBaseSelector,
+} from "../modules/story/selectors";
 import { updateStory, toScene } from "../modules/story/actions";
 import { StoryProgressPromptRole } from "../types/story";
 import Loader from "../components/Loader";
@@ -10,6 +13,7 @@ import { Project } from "model";
 import { auth, db } from "../firebase.ts";
 import { addDoc, collection } from "firebase/firestore";
 import { splitDesc } from "../modules/story/utils";
+import { characterBaseSelector } from "../modules/character/selectors";
 
 const BackgroundImageContainer = styled.div<{ backgroundImageUrl: string }>`
   background-image: url(${(props) => props.backgroundImageUrl});
@@ -116,6 +120,8 @@ const Scene = () => {
   const [descriptions, setDescriptions] = useState<string[]>([]); // html description
   const [loading, setLoading] = useState(false);
   const [dots, setDots] = useState("");
+  const wholeStory = useSelector(storyBaseSelector);
+  const character = useSelector(characterBaseSelector);
   const {
     type,
     sceneNumber,
@@ -173,16 +179,18 @@ const Scene = () => {
     // TODO: upload book to firebase
     const project: Project = {
       owner: auth.currentUser!.uid,
-      name: "My Story",
-      title: "My Story",
       character: {
-        type: "human",
+        type: character.characterType,
+        name: character.characterName,
       },
-      coverImage: "https://app.storytime.one/assets/poster-FQgx4hzK.png",
+      name: wholeStory.title,
       createdAt: new Date().getTime(),
       minted: false,
-      introduction: "This is my story",
-      rawPrompts: [],
+      title: "My Story",
+      introduction: wholeStory.introduction,
+      coverImage: wholeStory.coverImage,
+      rawPrompts: wholeStory.storyProgressPrompts,
+      scenes: wholeStory.scenes,
     };
     const newProject = await addDoc(collection(db, "projects"), project);
     // go to mint page

app/src/modules/character/selectors.ts

@@ -4,17 +4,22 @@ import { RootState } from "..";
 // Assuming your state structure has a counter object
 const getCharacterBase = (state: RootState) => state.character;
 
+export const characterBaseSelector = createSelector(
+  [getCharacterBase],
+  (character) => character,
+);
+
 export const characterImageSelector = createSelector(
   [getCharacterBase],
-  ({ characterImage }) => characterImage
+  ({ characterImage }) => characterImage,
 );
 
 export const characterNameSelector = createSelector(
   [getCharacterBase],
-  ({ characterName }) => characterName
+  ({ characterName }) => characterName,
 );
 
 export const characterTypeSelector = createSelector(
   [getCharacterBase],
-  ({ characterType }) => characterType
+  ({ characterType }) => characterType,
 );

app/src/modules/story/selectors.ts

@@ -5,6 +5,11 @@ import { RootState } from "..";
 // Assuming your state structure has a counter object
 const getStoryBase = (state: RootState) => state.story;
 
+export const storyBaseSelector = createSelector(
+  [getStoryBase],
+  (story) => story,
+);
+
 export const storySelector = createSelector(
   [getStoryBase],
   ({ title, introduction, coverImage, currentSceneIndex }) => ({

app/src/modules/story/utils.ts

@@ -59,14 +59,11 @@ export const parseStoryGuideline = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let cont: any = {};
   try {
-    console.log(content);
     const markdownStripped = escapeJsonBug(stripMarkdown(content));
-    console.log(markdownStripped);
     cont = JSON.parse(markdownStripped) as RawScene;
   } catch (e) {
     console.log(e);
   }
-  console.log(cont);
   return {
     title: cont.title,
     introduction: cont.introduction,

app/src/types/story.ts

@@ -20,8 +20,6 @@ export type RawScene = {
 };
 
 export type Scene = {
-  //   title: string; // project
-  //   introduction: string; // project
   type: "story-introduction" | "story-followup" | "story-ending";
   sceneNumber: number;
   sceneTitle: string;

model/model.d.ts

@@ -1,11 +1,4 @@
-export type Character =
-  | {
-      type: "human" | "dog" | "cat";
-    }
-  | {
-      type: "custom";
-      name: string;
-    };
+export type Character = { type: string; name: string };
 
 // user/{uid}/projects/{projectId}
 
@@ -33,6 +26,7 @@ export type Project = {
   introduction: string;
   coverImage: string;
   rawPrompts: RawPrompt[];
+  scenes: Scene[];
 };
 
 // content is to display, value is what user give prompt to
@@ -40,13 +34,7 @@ export type SceneOption = { content: string; value: string };
 
 // not sure if we should just put this under Project Model or use relation, all works for me
 export type Scene = {
-  id: string;
-  projectId: string;
-  title: string; // project
-  introduction: string; // project
   type: "story-introduction" | "story-followup" | "story-ending";
-  character: string;
-  setting: string;
   sceneNumber: number;
   sceneTitle: string;
   sceneImage: string;