Connected to Server

NishikantS578 · Dec 1, 2024 · ff97dc4 · ff97dc4
1 parent af0daf5
commit ff97dc4
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 25 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_SERVER_URL="http://localhost:3001"
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,25 @@
 import './App.css'
 import { BrowserRouter, Routes, Route, Link } from 'react-router'
-import { useState } from 'react'
 import Home from './pages/Home'
 import WriteBlog from './pages/WriteBlog'
 import Blog from './pages/Blog'
 
 function App() {
-  const [blogs, setBlogs] = useState([])
-  console.log(blogs);
-
   return (
     <BrowserRouter>
       <section className='flex my-4 items-center'>
-        <div className='font-bold italic text-5xl font-mono'>DevDiary</div>
+        <div className='font-bold italic text-5xl font-mono'>
+          <Link className='text-white hover:text-white' to="/">DevDiary</Link>
+        </div>
         <nav className='ml-auto flex items-center'>
           <Link className='py-2 px-4 font-bold text-xl' to={"/"}>Home</Link>
           <Link className='py-2 px-4 font-bold text-xl' to={"/write-blog"}>Write</Link>
         </nav>
       </section>
       <Routes>
-        <Route path='/' element={<Home blogs={blogs} />} />
-        <Route path='/write-blog' element={<WriteBlog setBlogs={setBlogs} />} />
-        <Route path='/blog/:blogId' element={<Blog blogs={blogs} />} />
+        <Route path='/' element={<Home />} />
+        <Route path='/write-blog' element={<WriteBlog />} />
+        <Route path='/blog/:blogId' element={<Blog />} />
       </Routes>
     </BrowserRouter>
   )

diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
@@ -1,13 +1,27 @@
+import { useEffect, useState } from "react"
 import { useParams } from "react-router"
 
-export default function Blog(props: any) {
+export default function Blog() {
     const { blogId } = useParams()
+    const [blog, setBlog] = useState<{ id: string, title: string, blogContent: string }>();
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch(import.meta.env.VITE_SERVER_URL + "/api/posts/" + blogId)
+            .then(res => res.json())
+            .then(body => setBlog({ id: body.data.id, title: body.data.title, blogContent: body.data.blogContent }))
+            .catch(err => console.log("Error while retreiving blog", err))
+            .finally(() => setLoading(false));
+    }, []);
+
 
     return <div className="flex flex-col gap-4 max-w-[700px] mx-auto mt-16 items-center">
-        {blogId && !props.blogs[blogId] && <div>There is No such Blog!!!</div>}
+        {loading && <div className="text-4xl text-gray-500">Loading...</div>}
+
+        {!loading && blogId && !blog && <div>There is No such Blog!!!</div>}
 
-        <div className="font-bold text-start text-4xl p-4 rounded-lg w-full" >{blogId && props.blogs[blogId] && props.blogs[blogId].title}</div>
+        <div className="font-bold text-start text-4xl p-4 rounded-lg w-full" >{blogId && blog && blog.title}</div>
 
-        <div className="text-start text-xl p-2 rounded-lg w-full break-words" >{blogId && props.blogs[blogId] && props.blogs[blogId].blog}</div>
+        <div className="text-start text-xl p-2 rounded-lg w-full break-words" >{blogId && blog && blog.blogContent}</div>
     </div >
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,16 +1,31 @@
+import { useEffect, useState } from "react"
 import { Link } from "react-router"
 
-export default function Home(props: any) {
+export default function Home() {
+    const [blogs, setBlogs] = useState<any>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        fetch(import.meta.env.VITE_SERVER_URL + "/api/posts")
+            .then((res) => res.json())
+            .then((data) => setBlogs(data.data))
+            .catch((err) => console.log("Error while retreiving blogs.", err))
+            .finally(() => setLoading(false));
+    }, []);
+
     return <div className="flex flex-col max-w-[720px] mx-auto">
         <h1 className="py-16">Blogs</h1>
-        {!props.blogs.length && <div className="text-4xl text-gray-500">Currently there are no Blogs</div>}
-        {props.blogs && props.blogs.map((blog: any, id: number) => {
-            return <Link className="border border-[#ccc5] rounded-[20px] w-full p-4 mb-8 text-white hover:text-gray-300" key={id} to={"/blog/"+id}>
+        {loading && <div className="text-4xl text-gray-500">Loading...</div>}
+
+        {!loading && !blogs.length && <div className="text-4xl text-gray-500">Currently there are no Blogs</div>}
+
+        {blogs && blogs.map((blog: { id: string, title: string, blogContent: string }) => {
+            return <Link className="border border-[#ccc5] rounded-[20px] w-full p-4 mb-8 text-white hover:text-gray-300" key={blog.id} to={"/blog/" + blog.id}>
                 <div className="text-start font-bold pb-4 text-3xl">
                     {blog.title}
                 </div>
                 <div className="text-start text-ellipsis overflow-hidden break-words max-h-12">
-                    {blog.blog}
+                    {blog.blogContent}
                 </div>
             </Link>
         })}

diff --git a/src/pages/WriteBlog.tsx b/src/pages/WriteBlog.tsx
@@ -1,28 +1,43 @@
 import { useState } from "react"
+import { NavigateFunction, useNavigate } from "react-router";
 
-function handleBlogPublish(title: string, blog: string, setBlogs: any) {
-    setBlogs((prev: any) => { return [...prev, { title, blog }] })
+async function handleBlogPublish(title: string, blog: string, navigate: NavigateFunction) {
+    await fetch(import.meta.env.VITE_SERVER_URL+"/api/posts", {
+        method: "POST",
+        body: JSON.stringify({ title: title, blogContent: blog }),
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    navigate("/");
 }
 
-export default function WriteBlog(props: any) {
+export default function WriteBlog() {
+    const navigate = useNavigate();
     const [title, setTitle] = useState("")
     const [blog, setBlog] = useState("")
 
     return <div className="flex flex-col gap-4 max-w-[700px] mx-auto mt-16 items-center">
         <div
             className="title-input font-bold text-start text-4xl p-4 bg-gray-700 rounded-lg w-full" contentEditable={true}
             onInput={
-                (e: any) => {
-                    setTitle(e.target.textContent);
+                (e: React.FormEvent<HTMLDivElement>) => {
+                    const target = e.target as HTMLDivElement;
+                    if (target.textContent) {
+                        setTitle(target.textContent);
+                    }
                 }}></div>
 
         <div
             className="paragraph-input text-start text-xl p-2 bg-gray-700 rounded-lg min-h-[400px] w-full" contentEditable={true}
             onInput={
-                (e: any) => {
-                    setBlog(e.target.textContent);
+                (e: React.FormEvent<HTMLDivElement>) => {
+                    const target = e.target as HTMLDivElement;
+                    if (target.textContent) {
+                        setBlog(target.textContent);
+                    }
                 }}></div>
 
-        <button className="bg-blue-900 w-[200px] self-start" onClick={() => handleBlogPublish(title, blog, props.setBlogs)}>Publish</button>
+        <button className="bg-blue-900 w-[200px] self-start" onClick={() => handleBlogPublish(title, blog, navigate)}>Publish</button>
     </div >
 }