add new story

[DarkoKrezic]

US3

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
capstone-projekt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2023 2:22pm

[mbosselmann]

Hi Darko, good job in trying to implement all my remarks! 💪 For the implementation of your local storage I would recommend to change the structure of your code. I tried something out and will leave a guide for your. 🗡️

1. _app.js
   • As you want to display the stories on your index page and you want to add a new story via your NewStoryPage I recommend to lift your stories state to the _app.js

import GlobalStyle from "../styles";
import { useImmerLocalStorageState } from "@/lib/hook/useImmerLocalStorageState";
import initialStories from "@/db.js";

export default function App({ Component, pageProps }) {
  const [stories, setStories] = useImmerLocalStorageState("stories", {
    defaultValue: initialStories,
  });

  function addStory(newStory) {
    setStories([newStory, ...stories]);
  }
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} stories={stories} addStory={addStory} />
    </>
  );
}

• and there will also be the addStory function which will add the new story to your stories data (that will be saved in your local storage too via the useImmerLocalStorageState)

2. index.js - HomePage component

   • here you will hand over the prop stories to your StoryList component that then handles the data

3. [id].js - you can also here use the stories prop directly. It is not necessary to get the data again from the local storage. :)

import { useRouter } from "next/router";
import StoryDetailCard from "@/components/Story";

function StoryDetailPage({ stories }) {
  const router = useRouter();
  const { id } = router.query;
  const story = stories.find((story) => story.id === id);

  if (!story) {
    return <p>Story not found</p>;
  }

  return <StoryDetailCard story={story} />;
}

export default StoryDetailPage;

4. NewStoryPage

• here you can work with the addStory function to send the data to the _app.js where the state will be updated

import NewStoryForm from "@/components/NewStoryForm";
import { useRouter } from "next/router";

export default function NewStoryPage({ addStory }) {
  const router = useRouter();
  function handleStorySubmit(newStory) {
    addStory(newStory);
    router.push("/");
  }

  return <NewStoryForm onSubmit={handleStorySubmit} />;
}

• Note: I would rename this page as the name of the route is also NewStoryPage. MAybe add-story or just create is better. :)

5. NewStoryFormcomponent
   • does not need setStories anymore
   • does not need to work with the local storage on this point
   • you can use crypto.randomUUID() to generate a unique id
   • your handleSubmit function should look liks this then:

  function handleSubmit(event) {
    event.preventDefault();

    const newStory = {
      id: crypto.randomUUID(),
      title: title,
      coverImage: URL.createObjectURL(coverImage),
      textContent: textContent,
      dateCreated: new Date().toLocaleDateString(),
    };

    onSubmit(newStory);
  }

6. db.js
   • you may have observed that i changed your find method in your StoryDetailPage
   • instead of setting number as ids you can use strings and as crypto.randomUUID also created unique ids as strings, you do not need to think about two cases of id types
   • example object of one of your stories

     {
     id: "1",
     title: "Hanni und Hasi",
     textContent:
     "Hanni liebte ihren Kuschelhasen Hasi über alles. Eines sonnigen Tages beschloss sie, mit ihm in den Park zu gehen. Als sie im Park ankamen, sah Hanni, dass ihre Freunde dort spielten. Sie rannte zu ihnen und stellte Hasi vor. 'Hasi möchte gerne mitspielen', sagte Hanni. Ihre Freunde waren begeistert und bald spielten sie alle zusammen. Sie rannten, lachten und hatten eine Menge Spaß. Doch dann fiel Hanni auf, dass ihr kleiner Bruder, der ebenfalls im Park war, alleine auf einer Bank saß und weinte. Sie rannte zu ihm und fragte, was los war. Ihr Bruder hatte sein Spielzeug verloren und war traurig. Hanni dachte einen Moment nach und sagte dann: 'Ich habe eine Idee. Wie wäre es, wenn wir das Spielzeug teilen und gemeinsam spielen?' Ihr Bruder lächelte und sie gingen zurück zu den anderen Kindern. Hanni erklärte die Situation und bald spielten alle zusammen mit dem Spielzeug. Als es Zeit war, nach Hause zu gehen, sagte einer von Hannis Freunden: 'Danke, dass du uns das Teilen beigebracht hast. Wir hatten eine großartige Zeit!' Hanni lächelte und Hasi knuddelte sie. Sie war glücklich, dass sie eine gute Zeit hatte und ihren Freunden das Teilen beibringen konnte.",
     coverImage: "/images/hanni-und-hasi-im-park.png",
     dateCreated: "01.05.2023",
     }

   • I would also recommend to move the db.js to the root of your folder (means one level higher in the folder structure) as it is not necessary to have your db.js in your public folder

❗️When working with local storage it is important to delete the local storage values every time after changing how the local storage data handling in your app. Try this out if something does not work. :)

Think about my remark as these would improve your code! 💪 I hope I did no forget anything. 👀 Feel free to ask me if you have further questions.

[DarkoKrezic]

Hey Mareike, i did some changes, please feel free to take a look . 😅