EditPost

taisforsini · Jul 30, 2021 · 6cb60a4 · 6cb60a4
1 parent 8eeb4d7
commit 6cb60a4
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -14,6 +14,7 @@ import Signup from "../routeComponents/auth/Signup";
 import NewPost from "../routeComponents/auth/NewPost";
 import Profile from "../routeComponents/auth/Profile";
 import EditProfile from "../routeComponents/auth/EditProfile";
+import EditPost from "../routeComponents/auth/EditPost";
 import DeletePost from "../routeComponents/auth/DeletePost";
 import PostDetails from "../routeComponents/auth/PostDetails";
 
@@ -29,6 +30,7 @@ function App() {
           <ProtectedRoute path="/profile/edit" component={EditProfile} />
           <ProtectedRoute path="/profile" component={Profile} />
           <Route exact path="/post/:id" component={PostDetails} />
+          <ProtectedRoute path="/post/:id/EditPost" component={EditPost} />
           <ProtectedRoute path="/post/:id/DeletePost" component={DeletePost} />
           <ProtectedRoute path="/feed" component={Feed} />
           <ProtectedRoute path="/new-post" component={NewPost} />

diff --git a/src/routeComponents/auth/EditPost.js b/src/routeComponents/auth/EditPost.js
@@ -1,9 +1,10 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import api from "../../apis/api";
+import { useParams } from "react-router-dom";
 
 import { AuthContext } from "../../contexts/authContext";
 
-function NewPost(props) {
+function EditPost(props) {
   const authContext = useContext(AuthContext);
 
   const [state, setState] = useState({
@@ -22,34 +23,53 @@ function NewPost(props) {
     cons: null,
     image: null,
   });
-
-  function handleChange(event) {
-    if (event.target.files) {
-      return setState({
-        ...state,
-        [event.currentTarget.name]: event.currentTarget.files[0],
-      });
+  const { id } = useParams();
+  useEffect(() => {
+    async function fetchPost() {
+      try {
+        const post = await api.get(`/post/${id}`);
+        setState({
+          ...post.data,
+          //   title: post.data.title,
+          //   content: post.data.content,
+          //   tripCost: post.data.tripCost,
+          //   pros: post.data.pros,
+          //   cons: post.data.cons,
+          //   image: post.data.image,
+        });
+      } catch (error) {
+        console.log(error);
+      }
     }
+    fetchPost();
+  }, []);
+  function handleChange(event) {
+    // if (event.target.files) {
+    //   return setState({
+    //     ...state,
+    //     [event.currentTarget.name]: //event.currentTarget.files[0],
+    //   });
+    // }
     setState({
       ...state,
       [event.currentTarget.name]: event.currentTarget.value,
     });
   }
 
-  async function handleFileUpload(file) {
-    const uploadData = new FormData();
-    uploadData.append("image", file);
-    const response = await api.post("/image-post-upload", uploadData);
-    return response.data.url;
-  }
+  //   async function handleFileUpload(file) {
+  //     const uploadData = new FormData();
+  //     uploadData.append("image", file);
+  //     const response = await api.post("/image-post-upload", uploadData);
+  //     return response.data.url;
+  //   }
 
   async function handleSubmit(event) {
     event.preventDefault();
 
     try {
-      const imageUrl = await handleFileUpload(state.image);
+      //   const imageUrl = await handleFileUpload(state.image);
 
-      const response = await api.post("/post", { ...state, image: imageUrl });
+      const response = await api.put(`/post/${id}`, { ...state });
       console.log(response);
 
       setErrors({
@@ -60,7 +80,7 @@ function NewPost(props) {
         cons: "",
         image: "",
       });
-      props.history.push("/");
+      props.history.push("/post");
     } catch (err) {
       console.error(err);
       setErrors({ ...err.response });
@@ -70,7 +90,7 @@ function NewPost(props) {
   return (
     <div style={{ backgroundColor: "#fffdf0" }}>
       <form className="container md-me-5 mt-5" onSubmit={handleSubmit}>
-        <h1 className="pt-4">Novo Post</h1>
+        <h1 className="pt-4">Editar Post</h1>
         <hr />
 
         <div className="form-group mt-4">
@@ -143,7 +163,7 @@ function NewPost(props) {
           />
         </div>
 
-        <div className="mt-3">
+        {/*<div className="mt-3">
           <label htmlFor="postFormImage">Imagem:</label>
           <input
             className="ml-2"
@@ -153,16 +173,16 @@ function NewPost(props) {
             error={errors.image}
             onChange={handleChange}
           />
-        </div>
+  </div>*/}
 
         <div className="mt-3 pb-5">
           <button className="btn btn-primary mt-2" type="submit">
-            Publicar
+            Concluir
           </button>
         </div>
       </form>
     </div>
   );
 }
 
-export default NewPost;
+export default EditPost;
diff --git a/src/routeComponents/auth/EditProfile.js b/src/routeComponents/auth/EditProfile.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import api from "../../apis/api";
 
+
 function EditProfile(props) {
   const [state, setState] = useState({
     name: "",
@@ -14,6 +15,7 @@ function EditProfile(props) {
     lastName: null,
     image: null,
   });
+
   useEffect(() => {
     async function fetchUser() {
       try {

diff --git a/src/routeComponents/auth/Profile.js b/src/routeComponents/auth/Profile.js
@@ -113,9 +113,18 @@ function Profile() {
                               post.createdAt
                             ).getFullYear()}`}</small>
                           </p>
-                          <Link className="btn btn-primary mt-3 mb-3" to={`/post/${post._id}/DeletePost`}>
-          Deletar Post
-        </Link>
+                          <Link
+                            className="btn btn-primary mt-3 mb-3 mr-2"
+                            to={`/post/${post._id}/EditPost`}
+                          >
+                            Editar Post
+                          </Link>
+                          <Link
+                            className="btn btn-primary mt-3 mb-3"
+                            to={`/post/${post._id}/DeletePost`}
+                          >
+                            Deletar Post
+                          </Link>
                         </div>
                       </div>
                     </div>