Removed rendering problem in home page

KaranSiddhu · Aug 1, 2021 · 8ea2ca1 · 8ea2ca1
1 parent b6594d3
commit 8ea2ca1
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 49 deletions.
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+config.env
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/src/api/backendApi.js b/src/api/backendApi.js
@@ -1,3 +1,4 @@
 export const API =process.env.REACT_APP_BACKEND;
+// export const API_IMG =process.env.REACT_APP_BACKEND_IMG;
 
 export const QuotesAPI = process.env.REACT_APP_QUOTES_API;
diff --git a/src/components/header/Header.js b/src/components/header/Header.js
@@ -23,9 +23,12 @@ const Header = ({ history }) => {
     <section className="header">
       <section className="header-top">
         <section className="header-top__logo">
-          <NavLink to="/" exact activeClassName="active-class">
+          {/* <NavLink to="/" exact activeClassName="active-class"> */}
+          <a href="/">
             <img src={logo} alt="LOGO" />
-          </NavLink>
+          </a>  
+
+          {/* </NavLink> */}
         </section>
 
         <section 

diff --git a/src/components/posts/Posts.js b/src/components/posts/Posts.js
@@ -1,15 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { API } from "../../api/backendApi";
+import { API_IMG } from "../../api/backendApi";
 
 import "./posts.css";
 
 const Posts = ({ posts }) => {
   return (
     <div className="posts">
       {posts.map((post, index) => {
+
         let imageUrl = post.photo
-          ? `${API}/blog/photo/${post._id}`
+          ? post.photo
           : "https://redzonekickboxing.com/wp-content/uploads/2017/04/default-image.jpg";
 
         {/* console.log(post); */}

diff --git a/src/components/posts/posts.css b/src/components/posts/posts.css
@@ -35,6 +35,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
 }
 
 .postCat {
@@ -58,6 +59,7 @@
   margin-top: 15px;
   cursor: pointer;
   color: black;
+
 }
 .postTitle:hover{
   color: #2ecc72; 

diff --git a/src/pages/Home/HomeScreen.js b/src/pages/Home/HomeScreen.js
@@ -12,12 +12,13 @@ const HomeScreen = ({ history }) => {
   const [loading, setLoading] = useState(false);
   const [blogs, setBlogs] = useState([]);
   const { search } = useLocation();
-
+
+
   // const {  } = useContext(AuthContext);
 
   const getQuotes = async () => {
     try {
-      setLoading(true);
+      // setLoading(true);
 
       const { data } = await axios.get(QuotesAPI, { withCredentials: false });
 
@@ -36,11 +37,11 @@ const HomeScreen = ({ history }) => {
 
   useEffect(() => {
     const fetchBlogs = async () => {
-      console.log("LOCATION - ",search);
+      // console.log("LOCATION - ",search);
       try {
         setLoading(true);
         const { data } = await axios.get(`${API}/blogs/${search}`);
-        console.log("BLOG DATA ", data);
+        // console.log("BLOG DATA ", data);
         setLoading(false);
 
         setBlogs(data);
@@ -65,16 +66,19 @@ const HomeScreen = ({ history }) => {
 
   const showBlogs = () => {
     console.log("USE STATE", blogs);
-    return <div className="blogs__container">
-      { (blogs.length === 0) ? "" : <Posts posts={blogs.blogs}/>  }
-    </div>;
+    return (
+      <div className="blogs__container">
+        {blogs.length === 0 ? "" : <Posts posts={blogs.blogs} />}
+      </div>
+    );
   };
 
   const homePageContent = () => {
     return (
       <>
         {quote(quotes.text, quotes.author)}
         {showBlogs()}
+
       </>
     );
   };

diff --git a/src/pages/Single Post/DisplayPost.js b/src/pages/Single Post/DisplayPost.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import React, { useState, useEffect, useContext } from "react";
 import { Link } from "react-router-dom";
-import { API } from "../../api/backendApi";
+import { API, API_IMG } from "../../api/backendApi";
 import AuthContext from "../../context/AuthContext";
 
 import { FaEdit } from "react-icons/fa";
@@ -16,7 +16,7 @@ const DisplayPost = ({ match, history }) => {
   const [loading, setLoading] = useState(false);
 
   const { userData } = useContext(AuthContext);
-
+  console.log("SINGLE POST - ", post);
   useEffect(() => {
     const getPost = async () => {
       setLoading(true);
@@ -58,7 +58,7 @@ const DisplayPost = ({ match, history }) => {
       await axios.put(
         `${API}/blog/update/${post._id}`,
         {
-          userEmail: userData.email,
+          user: userData._id,
           title,
           desc
         },
@@ -72,7 +72,7 @@ const DisplayPost = ({ match, history }) => {
   };
 
   let imageUrl = post.photo
-    ? `${API}/blog/photo/${post._id}`
+    ? post.photo
     : "https://redzonekickboxing.com/wp-content/uploads/2017/04/default-image.jpg";
 
   const displayPostContent = () => {
@@ -92,8 +92,11 @@ const DisplayPost = ({ match, history }) => {
           ) : (
             <h1 className="singlePostTitle">
               {title}
-              {console.log("CHEKC🔥 - ", post.userEmail === userData.email)}
-              {post.userEmail === userData.email && (
+
+              {
+                (post.user === undefined 
+                  ? "" 
+                  : post.user.email) === userData.email && (
                 <div className="singlePostEdit">
                   <FaEdit
                     className="singlePostIcon far fa-edit"
@@ -107,8 +110,11 @@ const DisplayPost = ({ match, history }) => {
           <div className="singlePostInfo">
             <span className="singlePostAuthor">
               Author:
-              <Link to={`/?user=${post.userEmail}`} className="link_query">
-                <b> {post.userEmail}</b>
+              <Link
+                to={`/?user=${post.user === undefined ? "" : post.user._id}`}
+                className="link_query"
+              >
+                <b>{post.user === undefined ? "" : post.user.email}</b>
               </Link>
             </span>
             <span className="singlePostDate">{new Date(post.createdAt).toDateString()}</span>

diff --git a/src/pages/create post/Createpost.js b/src/pages/create post/Createpost.js
@@ -16,31 +16,34 @@ const Createpost = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const newPost = {
-      userEmail: userData.email,
-      title,
-      desc
-    };
 
-    if (file) {
-      const data = new FormData();
-      const filename = Date.now() + file.name;
-      data.append("name", filename);
-      data.append("file", file);
-      newPost.photo = filename;
-      try {
-        await axios.post("/upload", data);
-      } catch (err) {
-        console.log("ERROR - ", err);
-      }
-    }
 
-    try {
-      const res = await axios.post("/posts", newPost);
-      window.location.replace("/post/" + res.data._id);
-    } catch (err) {
-      console.log("ERROR - ", err);
-    }
+
+    // const newPost = {
+    //   userEmail: userData.email,
+    //   title,
+    //   desc
+    // };
+
+    // if (file) {
+    //   const data = new FormData();
+    //   const filename = Date.now() + file.name;
+    //   data.append("name", filename);
+    //   data.append("file", file);
+    //   newPost.photo = filename;
+    //   try {
+    //     await axios.post("/upload", data);
+    //   } catch (err) {
+    //     console.log("ERROR - ", err);
+    //   }
+    // }
+
+    // try {
+    //   const res = await axios.post("/posts", newPost);
+    //   window.location.replace("/post/" + res.data._id);
+    // } catch (err) {
+    //   console.log("ERROR - ", err);
+    // }
   };
 
   return (

diff --git a/src/pages/profile/ProfilePage.js b/src/pages/profile/ProfilePage.js
@@ -187,7 +187,7 @@ const ProfilePage = ({ history }) => {
                 <TiTick />
                 <button 
                   className="btn btn-primary" 
-                  onClick={() => history.push(`/?user=${userData.email}`)}
+                  onClick={() => history.push(`/?user=${userData._id}`)}
                 >
                   Manage your blogs
                 </button>
@@ -368,7 +368,7 @@ const ProfilePage = ({ history }) => {
 
   const handleBlogSubmit = async (e) => {
     e.preventDefault();
-    file.set("userEmail", userData.email);
+    file.set("user", userData._id);
 
     try{
 
@@ -482,7 +482,7 @@ const ProfilePage = ({ history }) => {
         </div>
       </Modal>
 
-      {/* NOTE edit progile modal */}
+      {/* NOTE edit profile modal */}
       <Modal
         isOpen={isProfileModalOpen}
         onRequestClose={() => setIsProfileModalOpen(false)}