From 316818da01f3550789d28bf27764a5076e1a26ee Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Sat, 22 Apr 2023 18:49:04 -0400
Subject: [PATCH 1/5] Feat: new component for the cards of the posts and styles

---
 src/components/PostCard.js |  9 +++++++++
 src/pages/HomePage.js      | 11 ++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/components/PostCard.js

diff --git a/src/components/PostCard.js b/src/components/PostCard.js
new file mode 100644
index 0000000..9cef8f8
--- /dev/null
+++ b/src/components/PostCard.js
@@ -0,0 +1,9 @@
+export function PostCard({ post }) {
+    return (
+        <div className="bg-zinc-800 text-white rounded-sm shadow-md shadow-black hover:bg-zinc-700
+        hover:cursor-pointer">
+            <h3>{post.title}</h3>
+            <p>{post.description}</p>
+        </div>
+    );
+}
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 0417673..a76c2af 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,7 +1,7 @@
 import { usePosts } from "../context/postContext";
 import {VscEmptyWindow} from 'react-icons/vsc'
 import { Link } from "react-router-dom"; 
-
+import { PostCard } from "../components/PostCard";
 export function HomePage() {
  
     const { posts } = usePosts()
@@ -17,11 +17,12 @@ export function HomePage() {
     <div className='text-white'>
 
       <Link to="/new">Create new Post</Link>
-     {posts.map(post => (
-        <div key={post._id}>
-            {post.title}          
-        </div>
+
+    <div className="grid  gap-4">
+    {posts.map(post => (
+        <PostCard post={post} key={post._id}/>
      ))}
     </div>
+    </div>
   );
 }

From f6129ea001ec8158023d840f903ebda941871277 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Sun, 23 Apr 2023 01:09:32 -0400
Subject: [PATCH 2/5] Feat: functionality to delete posts by id and styles

---
 src/App.js                 |  3 +-
 src/api/posts.js           |  4 ++-
 src/components/PostCard.js | 62 ++++++++++++++++++++++++++++++++++----
 src/context/postContext.js | 12 ++++++--
 4 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8eed4fd..6f84c2f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import { HomePage, PostForm, NotFoundPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
-
+import { Toaster } from "react-hot-toast";
 function App() {
   return (
     <div className="bg-neutral-900 min-h-screen flex items-center">
@@ -12,6 +12,7 @@ function App() {
       <Route path="/new" element={<PostForm />} />
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
+    <Toaster/>
     </PostProvider>
     
       </div>
diff --git a/src/api/posts.js b/src/api/posts.js
index 2e434c8..cb99bb2 100644
--- a/src/api/posts.js
+++ b/src/api/posts.js
@@ -2,4 +2,6 @@ import axios from 'axios';
 
 export const getPostsRequests = async () => await axios.get('http://localhost:4000/api/posts')
 
-export const createPostsRequests = async (post) => await axios.post('http://localhost:4000/api/posts', post)
\ No newline at end of file
+export const createPostsRequests = async (post) => await axios.post('http://localhost:4000/api/posts', post)
+
+export const deletePostRequests = async id => await axios.delete("http://localhost:4000/api/posts/" + id)
\ No newline at end of file
diff --git a/src/components/PostCard.js b/src/components/PostCard.js
index 9cef8f8..c7795a2 100644
--- a/src/components/PostCard.js
+++ b/src/components/PostCard.js
@@ -1,9 +1,59 @@
+import toast from "react-hot-toast";
+import { usePosts } from "../context/postContext";
+
+
 export function PostCard({ post }) {
-    return (
-        <div className="bg-zinc-800 text-white rounded-sm shadow-md shadow-black hover:bg-zinc-700
-        hover:cursor-pointer">
-            <h3>{post.title}</h3>
-            <p>{post.description}</p>
+
+      const {deletePost} = usePosts()
+
+  const handleDelete = (id) => {
+    toast((t) => (
+      <div>
+        <p className="text-white"> Do you want to Delete? <strong>{id}</strong></p>
+        <div>
+          <button className="bg-red-500 hover:bg-red-400 px-3 py-2 text-sm text-white rounded-sm mx-2" 
+          onClick={() =>{
+
+            deletePost(id);
+            toast.dismiss(t.id);
+          }
+            
+            
+          }
+            >Delete</button>
+          
+          <button
+            className="bg-slate-400 hover:bg-slate-500 px-3 py-2 text-white rounded-sm mx-2"
+            onClick={() => toast.dismiss(t.id)}
+          >
+            Cancel
+          </button>
         </div>
-    );
+      </div>
+    ), {
+      style: {
+        background: "#202020"
+      }
+    });
+  };
+
+  return (
+    <div
+      className="bg-zinc-800 text-white rounded-sm shadow-md shadow-black hover:bg-zinc-700
+        hover:cursor-pointer"
+    >
+      <div className="px-4 py-7">
+        <div className="flex justify-between">
+          <h3>{post.title}</h3>
+          <button
+            className="bg-red-600 text-sm px-2 py-1 rounded-sm"
+            onClick={() => handleDelete(post._id)}
+          >
+            Delete
+          </button>
+        </div>
+        <p>{post.description}</p>
+      </div>
+    </div>
+  );
 }
diff --git a/src/context/postContext.js b/src/context/postContext.js
index 16addc1..d0fa8af 100644
--- a/src/context/postContext.js
+++ b/src/context/postContext.js
@@ -1,5 +1,5 @@
 import { useState, createContext, useContext, useEffect } from "react";
-import { getPostsRequests, createPostsRequests } from "../api/posts";
+import { getPostsRequests, createPostsRequests, deletePostRequests } from "../api/posts";
 export const postContext = createContext();
 
 export const usePosts = () => {
@@ -23,7 +23,12 @@ export const PostProvider = ({ children }) => {
       setPosts([...posts, res.data])
     }
 
-  useEffect(()=>{
+      const deletePost = async (id) =>{
+        await deletePostRequests(id)
+       setPosts(posts.filter((post)=> post._id !==id));
+      };
+  
+      useEffect(()=>{
     getPosts()
   }, [])
 
@@ -33,7 +38,8 @@ export const PostProvider = ({ children }) => {
       value={{
         posts,
         getPosts,
-        createPost
+        createPost,
+        deletePost
       }}
     >
       {children}

From 6adba683d8c365a7c514ff6c8867915b9d4953c7 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 24 Apr 2023 00:07:26 -0400
Subject: [PATCH 3/5] Feat: functionality to edit a post on click and styles

---
 src/App.js                 |  1 +
 src/api/posts.js           |  8 +++--
 src/components/PostCard.js |  8 ++---
 src/context/postContext.js | 36 +++++++++++--------
 src/pages/PostForm.js      | 73 ++++++++++++++++++++++++++++++--------
 5 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/src/App.js b/src/App.js
index 6f84c2f..a19d285 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ function App() {
       <Routes>
       <Route path="/" element={<HomePage />} />
       <Route path="/new" element={<PostForm />} />
+      <Route path="/posts/:id" element={<PostForm />} />
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
     <Toaster/>
diff --git a/src/api/posts.js b/src/api/posts.js
index cb99bb2..53f6705 100644
--- a/src/api/posts.js
+++ b/src/api/posts.js
@@ -1,7 +1,9 @@
 import axios from 'axios';
 
-export const getPostsRequests = async () => await axios.get('http://localhost:4000/api/posts')
+export const getPostsRequest = async () => await axios.get('http://localhost:4000/api/posts')
 
-export const createPostsRequests = async (post) => await axios.post('http://localhost:4000/api/posts', post)
+export const createPostRequest = async (post) => await axios.post('http://localhost:4000/api/posts', post)
 
-export const deletePostRequests = async id => await axios.delete("http://localhost:4000/api/posts/" + id)
\ No newline at end of file
+export const deletePostRequest = async id => await axios.delete("http://localhost:4000/api/posts/" + id)
+
+export const getPostRequest = async id => await axios.get("http://localhost:4000/api/posts/" + id)
\ No newline at end of file
diff --git a/src/components/PostCard.js b/src/components/PostCard.js
index c7795a2..5b6e5e4 100644
--- a/src/components/PostCard.js
+++ b/src/components/PostCard.js
@@ -1,10 +1,10 @@
 import toast from "react-hot-toast";
 import { usePosts } from "../context/postContext";
-
+import { useNavigate } from "react-router-dom";
 
 export function PostCard({ post }) {
-
-      const {deletePost} = usePosts()
+  const {deletePost} = usePosts()
+  const navigate = useNavigate()
 
   const handleDelete = (id) => {
     toast((t) => (
@@ -40,7 +40,7 @@ export function PostCard({ post }) {
   return (
     <div
       className="bg-zinc-800 text-white rounded-sm shadow-md shadow-black hover:bg-zinc-700
-        hover:cursor-pointer"
+        hover:cursor-pointer" onClick={()=> navigate(`/posts/${post._id}`)}
     >
       <div className="px-4 py-7">
         <div className="flex justify-between">
diff --git a/src/context/postContext.js b/src/context/postContext.js
index d0fa8af..eaba730 100644
--- a/src/context/postContext.js
+++ b/src/context/postContext.js
@@ -1,5 +1,5 @@
 import { useState, createContext, useContext, useEffect } from "react";
-import { getPostsRequests, createPostsRequests, deletePostRequests } from "../api/posts";
+import { getPostsRequest, createPostRequest, deletePostRequest, getPostRequest} from "../api/posts";
 export const postContext = createContext();
 
 export const usePosts = () => {
@@ -10,36 +10,42 @@ export const usePosts = () => {
 export const PostProvider = ({ children }) => {
   const [posts, setPosts] = useState([]);
 
-
-
-
-  const getPosts = async () => {
-    const res = await getPostsRequests();
-    setPosts(res.data)
-  };
+  useEffect(() => {
+    (async () => {
+      const res = await getPostsRequest();
+      setPosts(res.data);
+    })();
+  }, []);
 
     const createPost = async (post) =>{
-      const res = await createPostsRequests(post)
+      const res = await createPostRequest(post)
       setPosts([...posts, res.data])
     }
 
       const deletePost = async (id) =>{
-        await deletePostRequests(id)
+        await deletePostRequest(id)
        setPosts(posts.filter((post)=> post._id !==id));
       };
   
-      useEffect(()=>{
-    getPosts()
-  }, [])
+      const getPost = async (id) => {
+        try {
+          const res = await getPostRequest(id);
+          return res.data;
+        } catch (error) {
+          console.error(error);
+        }
+      };
+
+     
 
 
   return (
     <postContext.Provider
       value={{
         posts,
-        getPosts,
         createPost,
-        deletePost
+        deletePost,
+        getPost
       }}
     >
       {children}
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index 5fe19f7..8f30917 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -1,18 +1,41 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { usePosts } from "../context/postContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams, } from "react-router-dom";
 import * as Yup from "yup";
+import { useEffect, useState } from "react";
 
 export function PostForm() {
-  const { createPost } = usePosts();
+  const { createPost, getPost,  } = usePosts();
   const navigate = useNavigate();
+  const [post, setPost] = useState({
+    title: "",
+    description: "",
+    image: null,
+  });
+  const params = useParams();
+
+  useEffect(() => {
+    (async () => {
+      if (params.id) {
+        const post = await getPost(params.id);
+        setPost({
+          title: post.title,
+          description: post.description,
+        });
+      }
+    })();
+  }, [params.id, getPost]);
+
   return (
-    <div>
+    <div className="flex items-center justify-center">
+      <div className="bg-zinc-800 p-10 shadow-md shadow-black">
+        <header className="flex justify-between items-center py-4 text-white">
+          <h3 className="text-xl">New Post</h3>
+          
+        </header>
+
       <Formik
-        initialValues={{
-          title: "",
-          description: "",
-        }}
+        initialValues={post}
         validationSchema={Yup.object({
           title: Yup.string().required("Title is Required"),
           description: Yup.string().required("Description is Required"),
@@ -21,34 +44,54 @@ export function PostForm() {
           await createPost(values);
           navigate("/");
         }}
+        enableReinitialize
       >
         {({ handleSubmit }) => (
           <Form onSubmit={handleSubmit}>
+            <label
+              htmlFor="title"
+              className="text-sm block font-bold text-gray-400"
+            >
+              Title
+            </label>
             <Field
               name="title"
               placeholder="Title"
-              className='px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full'
+              className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
             />
             <ErrorMessage
-              compone="p"
+              component="p"
               name="title"
               className="text-red-400 text-sm"
             />
-
+            <label
+              htmlFor="description"
+              className="text-sm block font-bold text-gray-400"
+            >
+              Description
+            </label>
             <Field
-              name='description'
+              component="textarea"
+              name="description"
               placeholder="Description"
-              className='px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full'
+              className="px-3 py-2 focus:outline-none rounded bg-gray-600 text-white w-full"
+              rows={5}
             />
             <ErrorMessage
               component="p"
-              name='description'
-              className='text-red-400 text-sm'
+              name="description"
+              className="text-red-400 text-sm"
             />
-            <button type="submit">Save</button>
+            <button
+              type="submit"
+              className="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded mt-2 text-white focus:outline-none disabled:bg-indigo-400"
+            >
+              Save
+            </button>
           </Form>
         )}
       </Formik>
+      </div>
     </div>
   );
 }

From 23b8ddc7fb1cb0869c6dc185e2320000ff08c8f0 Mon Sep 17 00:00:00 2001
From: edwin6666 <edwinmendoza0620@gmail.com>
Date: Mon, 24 Apr 2023 14:24:17 -0400
Subject: [PATCH 4/5] Feat: button edit and page update

---
 public/index.html          |  2 +-
 src/api/posts.js           |  4 ++-
 src/components/PostCard.js | 65 ++++++++++++++++++++++----------------
 src/context/postContext.js | 51 ++++++++++++++++++------------
 src/pages/PostForm.js      | 24 +++++++++++---
 5 files changed, 92 insertions(+), 54 deletions(-)

diff --git a/public/index.html b/public/index.html
index aa069f2..c838ff5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>TechTalk</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/api/posts.js b/src/api/posts.js
index 53f6705..113ab27 100644
--- a/src/api/posts.js
+++ b/src/api/posts.js
@@ -6,4 +6,6 @@ export const createPostRequest = async (post) => await axios.post('http://localh
 
 export const deletePostRequest = async id => await axios.delete("http://localhost:4000/api/posts/" + id)
 
-export const getPostRequest = async id => await axios.get("http://localhost:4000/api/posts/" + id)
\ No newline at end of file
+export const getPostRequest = async id => await axios.get("http://localhost:4000/api/posts/" + id)
+
+export const updatePostRequest = async (id, newFields) => await axios.put(`http://localhost:4000/api/posts/${id}`, newFields)
\ No newline at end of file
diff --git a/src/components/PostCard.js b/src/components/PostCard.js
index 5b6e5e4..2fcd33d 100644
--- a/src/components/PostCard.js
+++ b/src/components/PostCard.js
@@ -3,48 +3,59 @@ import { usePosts } from "../context/postContext";
 import { useNavigate } from "react-router-dom";
 
 export function PostCard({ post }) {
-  const {deletePost} = usePosts()
-  const navigate = useNavigate()
+  const { deletePost } = usePosts();
+  const navigate = useNavigate();
 
   const handleDelete = (id) => {
-    toast((t) => (
-      <div>
-        <p className="text-white"> Do you want to Delete? <strong>{id}</strong></p>
+    toast(
+      (t) => (
         <div>
-          <button className="bg-red-500 hover:bg-red-400 px-3 py-2 text-sm text-white rounded-sm mx-2" 
-          onClick={() =>{
+          <p className="text-white">
+            {" "}
+            Do you want to Delete? <strong>{id}</strong>
+          </p>
+          <div>
+            <button
+              className="bg-red-500 hover:bg-red-400 px-3 py-2 text-sm text-white rounded-sm mx-2"
+              onClick={() => {
+                deletePost(id);
+                toast.dismiss(t.id);
+              }}
+            >
+              Delete
+            </button>
 
-            deletePost(id);
-            toast.dismiss(t.id);
-          }
-            
-            
-          }
-            >Delete</button>
-          
-          <button
-            className="bg-slate-400 hover:bg-slate-500 px-3 py-2 text-white rounded-sm mx-2"
-            onClick={() => toast.dismiss(t.id)}
-          >
-            Cancel
-          </button>
+            <button
+              className="bg-slate-400 hover:bg-slate-500 px-3 py-2 text-white rounded-sm mx-2"
+              onClick={() => toast.dismiss(t.id)}
+            >
+              Cancel
+            </button>
+          </div>
         </div>
-      </div>
-    ), {
-      style: {
-        background: "#202020"
+      ),
+      {
+        style: {
+          background: "#202020",
+        },
       }
-    });
+    );
   };
 
   return (
     <div
       className="bg-zinc-800 text-white rounded-sm shadow-md shadow-black hover:bg-zinc-700
-        hover:cursor-pointer" onClick={()=> navigate(`/posts/${post._id}`)}
+        hover:cursor-pointer"
     >
       <div className="px-4 py-7">
         <div className="flex justify-between">
           <h3>{post.title}</h3>
+          <button
+            className="bg-sky-400 text-sm px-2 py-1 rounded-sm"
+            onClick={() => navigate(`/posts/${post._id}`)}
+          >
+            Edit
+          </button>
           <button
             className="bg-red-600 text-sm px-2 py-1 rounded-sm"
             onClick={() => handleDelete(post._id)}
diff --git a/src/context/postContext.js b/src/context/postContext.js
index eaba730..6370d96 100644
--- a/src/context/postContext.js
+++ b/src/context/postContext.js
@@ -1,5 +1,11 @@
 import { useState, createContext, useContext, useEffect } from "react";
-import { getPostsRequest, createPostRequest, deletePostRequest, getPostRequest} from "../api/posts";
+import {
+  getPostsRequest,
+  createPostRequest,
+  deletePostRequest,
+  getPostRequest,
+  updatePostRequest,
+} from "../api/posts";
 export const postContext = createContext();
 
 export const usePosts = () => {
@@ -17,27 +23,29 @@ export const PostProvider = ({ children }) => {
     })();
   }, []);
 
-    const createPost = async (post) =>{
-      const res = await createPostRequest(post)
-      setPosts([...posts, res.data])
+  const createPost = async (post) => {
+    const res = await createPostRequest(post);
+    setPosts([...posts, res.data]);
+  };
+
+  const deletePost = async (id) => {
+    await deletePostRequest(id);
+    setPosts(posts.filter((post) => post._id !== id));
+  };
+
+  const getPost = async (id) => {
+    try {
+      const res = await getPostRequest(id);
+      return res.data;
+    } catch (error) {
+      console.error(error);
     }
+  };
 
-      const deletePost = async (id) =>{
-        await deletePostRequest(id)
-       setPosts(posts.filter((post)=> post._id !==id));
-      };
-  
-      const getPost = async (id) => {
-        try {
-          const res = await getPostRequest(id);
-          return res.data;
-        } catch (error) {
-          console.error(error);
-        }
-      };
-
-     
-
+  const updatePost = async (id, post) => {
+    const res = await updatePostRequest(id, post);
+    setPosts(post.map((post) => (post.id === id ? res.data : post)));
+  };
 
   return (
     <postContext.Provider
@@ -45,7 +53,8 @@ export const PostProvider = ({ children }) => {
         posts,
         createPost,
         deletePost,
-        getPost
+        getPost,
+        updatePost,
       }}
     >
       {children}
diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js
index 8f30917..1b5a85b 100644
--- a/src/pages/PostForm.js
+++ b/src/pages/PostForm.js
@@ -1,11 +1,11 @@
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import { usePosts } from "../context/postContext";
-import { useNavigate, useParams, } from "react-router-dom";
+import { useNavigate, useParams, Link} from "react-router-dom";
 import * as Yup from "yup";
 import { useEffect, useState } from "react";
 
 export function PostForm() {
-  const { createPost, getPost,  } = usePosts();
+  const { createPost, getPost, updatePost } = usePosts();
   const navigate = useNavigate();
   const [post, setPost] = useState({
     title: "",
@@ -31,7 +31,9 @@ export function PostForm() {
       <div className="bg-zinc-800 p-10 shadow-md shadow-black">
         <header className="flex justify-between items-center py-4 text-white">
           <h3 className="text-xl">New Post</h3>
-          
+          <Link to="/" className="text-gray-400 text-sm hover:text-gray-300">
+            Go Back
+          </Link>
         </header>
 
       <Formik
@@ -41,13 +43,20 @@ export function PostForm() {
           description: Yup.string().required("Description is Required"),
         })}
         onSubmit={async (values, actions) => {
-          await createPost(values);
+
+          if(params.id){
+              await updatePost(params.id, values)
+          }else{
+            await createPost(values);
+          }
           navigate("/");
         }}
         enableReinitialize
       >
         {({ handleSubmit }) => (
           <Form onSubmit={handleSubmit}>
+           
+            
             <label
               htmlFor="title"
               className="text-sm block font-bold text-gray-400"
@@ -82,6 +91,13 @@ export function PostForm() {
               name="description"
               className="text-red-400 text-sm"
             />
+            <label
+              htmlFor="title"
+              className="text-sm block font-bold text-gray-400"
+            >
+              Imagen
+            </label>
+            <input type="file" name="image" className=""/>
             <button
               type="submit"
               className="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded mt-2 text-white focus:outline-none disabled:bg-indigo-400"

From 62d5202a4585bd383729a710708429f093c0dbcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20David=20S=C3=A1nchez?=
 <49158320+Arzoid29@users.noreply.github.com>
Date: Tue, 25 Apr 2023 13:16:28 -0400
Subject: [PATCH 5/5] Update App.js

adding indentation to a import
---
 src/App.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.js b/src/App.js
index a19d285..6b7386c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import { HomePage, PostForm, NotFoundPage } from "./pages/index";
 import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
+
 function App() {
   return (
     <div className="bg-neutral-900 min-h-screen flex items-center">