some more corrections

Author: aadityarajkumawat

client/src/App.css

@@ -1,41 +1,43 @@
-import React, { useEffect } from 'react';
-import './App.css';
+import React, { useEffect } from "react";
+import "./App.css";
 
 // Router
-import { BrowserRouter as Router, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Switch } from "react-router-dom";
 
 // Redux
-import { Provider } from 'react-redux';
-import store from './store';
+import { Provider } from "react-redux";
+import store from "./store";
 
 // Import Routes
-import Routes from './Routes';
+import Routes from "./Routes";
 
 // Import Utilities
-import setAuthToken from './utils/setAuthToken';
-import { loadUser } from './actions/authAction';
-import Navbar from './components/navbar/Navbar';
+import setAuthToken from "./utils/setAuthToken";
+import { loadUser } from "./actions/authAction";
+import Navbar from "./components/navbar/Navbar";
+import PopupModal from "./components/popup-modal/PopupModal";
 
-if (localStorage.getItem('token')) {
-    setAuthToken(localStorage.getItem('token'));
+if (localStorage.getItem("token")) {
+  setAuthToken(localStorage.getItem("token"));
 }
 
 function App() {
-    useEffect(() => {
-        store.dispatch(loadUser());
-    }, []);
-    return (
-        <Provider store={store}>
-            <Router>
-                <Navbar />
-                <div className='d-flex justify-content-center container-fluid'>
-                    <Switch>
-                        <Routes />
-                    </Switch>
-                </div>
-            </Router>
-        </Provider>
-    );
+  useEffect(() => {
+    store.dispatch(loadUser());
+  }, []);
+  return (
+    <Provider store={store}>
+      <Router>
+        <Navbar />
+        <PopupModal />
+        <div className="d-flex justify-content-center container-fluid">
+          <Switch>
+            <Routes />
+          </Switch>
+        </div>
+      </Router>
+    </Provider>
+  );
 }
 
 export default App;

client/src/App.css.map

@@ -1,6 +1,5 @@
 @import "./components/auth/auth";
 @import "./components/navbar/navbar";
-// @import "./components/pages/Home";
 @import "./components/layout components/Trending/trending";
 @import "./components/layout components/Trending/TrendingItem/trendingitem";
 @import "./components/layout components/Post/post";
@@ -11,6 +10,7 @@
 @import "./components/pages/profile/profile";
 @import "./components/pages/user-profile/that-user";
 @import "./components/comment/comment";
+@import "./components/popup-modal/popup-modal";
 
 .container-fluid {
   display: flex;

client/src/App.js

@@ -67,7 +67,6 @@ export const uploadImage = (fData) => async (dispatch) => {
   try {
     dispatch({ type: RESET_IMAGE_UPLOAD });
     const res = await axios.post("/api/upload", fData);
-    console.log("Working... ... ...");
     dispatch({ type: GET_POST_ID, payload: res.data._id });
   } catch (err) {
     console.log("Upload ERR: ->>", err);

client/src/App.scss

@@ -0,0 +1,9 @@
+import { DISPATCH_POPUP, REMOVE_POPUP } from "./types";
+
+export const dispatchPopup = (heading, message) => (dispatch) => {
+  dispatch({ type: DISPATCH_POPUP, payload: { heading, message } });
+};
+
+export const removePopup = () => (dispatch) => {
+  dispatch({ type: REMOVE_POPUP });
+};

client/src/actions/getPostAction.js

@@ -44,3 +44,5 @@ export const GET_THAT_PROFILE = "GET_THAT_PROFILE";
 export const REALLY_GET_ALL_POSTS = "REALLY_GET_ALL_POSTS";
 export const POST_COMMENT = "POST_COMMENT";
 export const GET_COMMENTS = "GET_COMMENTS";
+export const DISPATCH_POPUP = "DISPATCH_POPUP";
+export const REMOVE_POPUP = "REMOVE_POPUP";

client/src/actions/popupAction.js

@@ -1,65 +1,67 @@
-import React, { useState, useEffect, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { getTrendingPosts } from '../../../actions/trendingAction';
-import TrendingItem from './TrendingItem/TrendingItem';
+import React, { useState, useEffect, Fragment } from "react";
+import { connect } from "react-redux";
+import { getTrendingPosts } from "../../../actions/trendingAction";
+import TrendingItem from "./TrendingItem/TrendingItem";
 
 const Trending = ({
-    getTrendingPosts,
-    trending: { loading, trendingPosts },
-    routing,
+  getTrendingPosts,
+  trending: { loading, trendingPosts },
+  routing,
+  post,
 }) => {
-    const [posts, setPosts] = useState([]);
+  const [posts, setPosts] = useState([]);
 
-    useEffect(() => {
-        if (trendingPosts.length === 0) {
-            getTrendingPosts();
-        }
-        if (posts.length === 0) {
-            setPosts(trendingPosts);
-        }
+  useEffect(() => {
+    if (trendingPosts.length === 0) {
+      getTrendingPosts();
+    }
+    if (posts.length === 0) {
+      setPosts(trendingPosts);
+    }
 
-        // eslint-disable-next-line
-    }, []);
+    // eslint-disable-next-line
+  }, []);
 
-    useEffect(() => {
-        if (trendingPosts.length === 0) {
-            getTrendingPosts();
-        }
-        if (posts.length === 0) {
-            setPosts(trendingPosts);
-        }
+  useEffect(() => {
+    if (trendingPosts.length === 0) {
+      getTrendingPosts();
+    }
+    if (posts.length === 0) {
+      setPosts(trendingPosts);
+    }
 
-        // eslint-disable-next-line
-    }, [trendingPosts.length]);
+    // eslint-disable-next-line
+  }, [trendingPosts.length, post.uploadedStatus]);
 
-    return (
-        <div className='container trending d-flex justify-content-around'>
-            {posts.length > 0 ? (
-                posts.map((post) => (
-                    <TrendingItem
-                        key={post._id}
-                        post={post}
-                        routing={routing}
-                        by={'home'}
-                        forComp='home-trend'
-                    />
-                ))
-            ) : (
-                <Fragment>
-                    <TrendingItem />
-                    <TrendingItem />
-                    <TrendingItem />
-                    <TrendingItem />
-                </Fragment>
-            )}
-        </div>
-    );
+  return (
+    <div className="container trending d-flex justify-content-around">
+      {posts.length > 0 ? (
+        posts.map((post) => (
+          <TrendingItem
+            key={post._id}
+            post={post}
+            routing={routing}
+            by={"home"}
+            forComp="home-trend"
+          />
+        ))
+      ) : (
+        <Fragment>
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+          <TrendingItem />
+        </Fragment>
+      )}
+    </div>
+  );
 };
 
 const mapStateToProps = (state) => {
-    return {
-        trending: state.trending,
-    };
+  return {
+    trending: state.trending,
+    post: state.post,
+  };
 };
 
 export default connect(mapStateToProps, { getTrendingPosts })(Trending);

client/src/actions/types.js

@@ -6,6 +6,7 @@ import {
   clearPostID,
 } from "../../../actions/getPostAction";
 import { convertToRaw, Editor, EditorState, RichUtils } from "draft-js";
+import { dispatchPopup } from "../../../actions/popupAction";
 
 const PostEditor = ({
   uploadPost,
@@ -14,6 +15,7 @@ const PostEditor = ({
   history,
   uploadImage,
   clearPostID,
+  dispatchPopup,
 }) => {
   const [heading, setHeading] = useState("");
   const [upload, setUpload] = useState("");
@@ -28,6 +30,12 @@ const PostEditor = ({
     }
   }, [post.imageUploaded]);
 
+  useEffect(() => {
+    if (upload === "Uploaded!") {
+      dispatchPopup("Post Image", "Post image has been uploaded successfully!");
+    }
+  }, [upload]);
+
   const handleSave = async () => {
     if (isAuthenticated) {
       const postRawContent = convertToRaw(editorState.getCurrentContent())
@@ -43,7 +51,6 @@ const PostEditor = ({
       }
       clearPostID();
       history.push("/");
-      console.log(JSON.stringify(postRawContent));
     }
   };
 
@@ -61,12 +68,10 @@ const PostEditor = ({
 
   const handleKeyCommand = (command, editorState) => {
     const newState = RichUtils.handleKeyCommand(editorState, command);
-
     if (newState) {
       setEditorState(newState);
       return "handled";
     }
-
     return "not-handled";
   };
 
@@ -121,4 +126,5 @@ export default connect(mapStateToProps, {
   uploadPost,
   uploadImage,
   clearPostID,
+  dispatchPopup,
 })(PostEditor);

client/src/components/layout components/Trending/Trending.js

@@ -0,0 +1,27 @@
+import React, { Fragment } from "react";
+import { connect } from "react-redux";
+import { removePopup } from "../../actions/popupAction";
+
+const PopupModal = ({ popup, removePopup }) => {
+  return (
+    <Fragment>
+      {popup.mounted ? (
+        <div className="popup-modal-container">
+          <h4>{popup.heading}</h4>
+          <div className="popup-msg">{popup.message}</div>
+          <div className="confirm-act">
+            <button onClick={removePopup}>Ok</button>
+          </div>
+        </div>
+      ) : (
+        <Fragment></Fragment>
+      )}
+    </Fragment>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  popup: state.popup,
+});
+
+export default connect(mapStateToProps, { removePopup })(PopupModal);