caching

README.md

@@ -124,3 +124,6 @@ await prisma.post.create({
 make sure in package.json script you have
 
 > "postinstall": "prisma generate"
+
+17. there is a function in nextjs notFound() from next/navigation . used in server comp where if there is no data show this.
+18. we can modify this file by not-found.tsx

prisma/schema.prisma

@@ -5,10 +5,13 @@ generator client {
   provider = "prisma-client-js"
 }
 
+// for local
 // datasource db {
 //   provider = "sqlite"
 //   url      = env("DATABASE_URL")
 // }
+
+//for dev
 datasource db {
   provider = "postgresql"
   url = env("POSTGRES_PRISMA_URL") // uses connection pooling

src/actions/actions.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import prisma from "@/lib/db";
+import { revalidatePath } from "next/cache";
 
 export async function createpostla(formData: FormData) {
   const title = formData.get("title") as string;
@@ -13,4 +14,7 @@ export async function createpostla(formData: FormData) {
       body,
     },
   });
+
+  //revalidate
+  revalidatePath("/posts");
 }

src/app/create-post/page.tsx

@@ -1,30 +1,10 @@
-import { createpostla } from "@/actions/actions";
+import Forms from "@/components/form";
+
 const CreatePost = () => {
   return (
     <main className=" text-center pt-16">
       <h1 className=" text-4xl md:text-5xl font-bold mb-5">Create Post</h1>
-      <form
-        action={createpostla}
-        className=" mx-auto space-y-4 max-w-[400px] flex flex-col  my-10"
-      >
-        <input
-          required
-          placeholder=" title for new post"
-          name="title"
-          type="text"
-          className=" outline-none border rounded px-3 h-10"
-        />
-        <textarea
-          name="body"
-          required
-          className=" py-2 outline-none border rounded px-3"
-          placeholder="Body for new post"
-          rows={6}
-        />
-        <button className="  h-10  px-2  py-1 text-sm rounded bg-green-500 text-white">
-          Submit
-        </button>
-      </form>
+      <Forms />
     </main>
   );
 };

src/app/posts/[id]/not-found.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import React from "react";
+
+const Notfound = () => {
+  return (
+    <div className="flex flex-col items-center w-full justify-center pt-28">
+      <h1 className=" font-bold text-4xl">Notfound</h1>
+      <p>the page that you are searching is not there </p>
+      <Link href="/">
+        {" "}
+        <div className=" mt-10 border rounded-lg p-3 shadow cursor-pointer transition hover:shadow-none hover:text-gray-500 ">
+          GO HOME
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default Notfound;

src/app/posts/[id]/page.tsx

@@ -1,16 +1,26 @@
 import Upvote from "@/components/upvote";
+import prisma from "@/lib/db";
+import { notFound } from "next/navigation";
 import React from "react";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const response = await fetch(
-    `https://jsonplaceholder.typicode.com/users/${params.id}`,
-  );
-  const data = await response.json();
+  // const response = await fetch(
+  //   `https://jsonplaceholder.typicode.com/users/${params.id}`,
+  // );
+  // const data = await response.json();
 
+  const data = await prisma.post.findUnique({
+    where: {
+      id: parseInt(params.id),
+    },
+  });
+  if (!data) {
+    notFound();
+  }
   return (
     <main className=" pt-28 text-center px-7">
-      <h1 className=" text-5xl font-semibold mb-7">{data.name}</h1>
-      <p className=" max-w-[700px] mx-auto"> {data.email}</p>
+      <h1 className=" text-5xl font-semibold mb-7">{data?.title}</h1>
+      <p className=" max-w-[700px] mx-auto"> {data?.body}</p>
 
       <Upvote />
     </main>

src/app/posts/page.tsx

@@ -1,3 +1,4 @@
+// import Forms from "@/components/form";
 import Postlist from "@/components/post-list";
 import { Suspense } from "react";
 
@@ -8,6 +9,7 @@ export default function Posts() {
       <Suspense fallback="Loading..........">
         <Postlist />
       </Suspense>
+      {/* <Forms/> //we can create here and it will auto refresh when new data are inserted*/}
     </main>
   );
 }

src/components/form.tsx

@@ -0,0 +1,31 @@
+import { createpostla } from "@/actions/actions";
+import React from "react";
+
+const Forms = () => {
+  return (
+    <form
+      action={createpostla}
+      className=" mx-auto space-y-4 max-w-[400px] flex flex-col  my-10"
+    >
+      <input
+        required
+        placeholder=" title for new post"
+        name="title"
+        type="text"
+        className=" outline-none border rounded px-3 h-10"
+      />
+      <textarea
+        name="body"
+        required
+        className=" py-2 outline-none border rounded px-3"
+        placeholder="Body for new post"
+        rows={6}
+      />
+      <button className="  h-10  px-2  py-1 text-sm rounded bg-green-500 text-white">
+        Submit
+      </button>
+    </form>
+  );
+};
+
+export default Forms;

src/components/post-list.tsx

@@ -1,3 +1,4 @@
+import prisma from "@/lib/db";
 import Link from "next/link";
 import React from "react";
 interface Post {
@@ -7,15 +8,19 @@ interface Post {
 const Postlist = async () => {
   // await new Promise((resolve)=>setTimeout(resolve,1000));
   //so we stop 1sec and then continue
-  const response = await fetch(
-    "https://jsonplaceholder.typicode.com/users?limit:10",
-  );
-  const data = await response.json(); // converting to json
+
+  //for api call
+  // const response = await fetch(
+  //   "https://jsonplaceholder.typicode.com/users?limit:10",
+  // );
+  // const data = await response.json(); // converting to json
+
+  const data = await prisma.post.findMany();
   return (
     <ul>
-      {data.map((post: Post) => (
+      {data.map((post) => (
         <li key={post.id} className=" mb-2">
-          <Link href={`/posts/${post.id}`}>{post.name}</Link>
+          <Link href={`/posts/${post.id}`}>{post.title}</Link>
         </li>
       ))}
     </ul>