styled compose post

Author: aadityarajkumawat

client/src/actions/getPostAction.js

@@ -15,6 +15,7 @@ import {
   RESET_IMAGE_UPLOAD,
   CLEAN_POST_ACTION,
   REALLY_GET_ALL_POSTS,
+  SAVE_POST_TOAST,
 } from "../actions/types";
 import axios from "axios";
 import { loadUser } from "./authAction";
@@ -100,6 +101,10 @@ export const savePost = (post_id) => async (dispatch) => {
     if (post_id !== undefined) {
       const res = await axios.post(`/api/save/${post_id}`);
       dispatch({ type: TOGGLE_SAVE_POST, payload: res.data });
+      dispatch({ type: SAVE_POST_TOAST, payload: true });
+      setTimeout(() => {
+        dispatch({ type: SAVE_POST_TOAST, payload: false });
+      }, 5000);
     }
   } catch (err) {
     console.log(err);

client/src/actions/types.js

@@ -47,3 +47,4 @@ export const GET_COMMENTS = "GET_COMMENTS";
 export const DISPATCH_POPUP = "DISPATCH_POPUP";
 export const REMOVE_POPUP = "REMOVE_POPUP";
 export const COMMENT_TOAST = "COMMENT_TOAST";
+export const SAVE_POST_TOAST = "SAVE_POST_TOAST";

client/src/components/layout components/Post/Post.js

@@ -53,17 +53,6 @@ const Post = ({
     // eslint-disable-next-line
   }, [currentPost, openedPost]);
 
-  /*
-    * The effect will get the like info from backend upon
-    * any change in liked status when liked: -- Likes47658936478563,
-    * else Unliked834658946873, and also when the postID is recieved,
-    * the postID is required to make the req to the backend
-    ! Both dependencies are important and completly tested
-    ? The [likedPost.length] is required bcoz ->> this handels the
-    ? setLik when we actually get the filled array, else the array
-    ? is empty tough the request id already been made, the liked post
-    ? array the [lik] was still empty ;) 
-    */
   useEffect(() => {
     if (auth !== undefined && auth.user !== null) {
       getLikedPosts(auth.user._id, post._id);
@@ -86,13 +75,6 @@ const Post = ({
     }
   }, [comment.commentToast]);
 
-  /*
-     * This onClick Function, request the backend to
-     * register the like by user and save it to DB
-     ? I have used the if check on post just to be sure
-     ? whether we have got the post and handel preload
-     ? events
-  */
   const likeThisPost = () => {
     if (post && auth.isAuthenticated) {
       likePost(post._id);

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

@@ -1,5 +1,5 @@
-import { Flex } from "@chakra-ui/react";
 import React, { useState, useEffect, Fragment } from "react";
+import { Flex, useToast } from "@chakra-ui/react";
 import { connect } from "react-redux";
 import { getTrendingPosts } from "../../../actions/trendingAction";
 import TrendingItem from "./TrendingItem/TrendingItem";
@@ -11,6 +11,7 @@ const Trending = ({
   post,
 }) => {
   const [posts, setPosts] = useState([]);
+  const toast = useToast();
 
   useEffect(() => {
     if (trendingPosts.length === 0) {
@@ -23,6 +24,8 @@ const Trending = ({
     // eslint-disable-next-line
   }, []);
 
+  console.log("cool");
+
   useEffect(() => {
     if (trendingPosts.length === 0) {
       getTrendingPosts();
@@ -33,9 +36,24 @@ const Trending = ({
 
     // eslint-disable-next-line
   }, [trendingPosts.length, post.uploadedStatus]);
+  useEffect(() => {
+    if (post.savedToast) {
+      toast({
+        position: "bottom-left",
+        title: post.status[2] === "s" ? "Saved Post" : "Unsaved Post",
+        description:
+          post.status[2] == "s"
+            ? "Post has been saved"
+            : "Post has been removed from saved collection",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+      });
+    }
+  }, [post.savedToast]);
 
   return (
-    <Flex justifyContent='center' mt='0rem'>
+    <Flex justifyContent="center" mt="0rem">
       {posts.length > 0 ? (
         posts.map((post) => (
           <TrendingItem

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

@@ -8,15 +8,23 @@ import {
 import PostPlaceHolder from "../../PostPlaceHolder";
 import { getAdminPrivilages } from "../../../../actions/adminPrivilagesAction";
 import OptionsMenu from "../../OptionsMenu";
-import { Avatar, AvatarBadge, Box, Flex, Image, Text } from "@chakra-ui/react";
+import {
+  Avatar,
+  AvatarBadge,
+  Box,
+  Flex,
+  Image,
+  Text,
+  useToast,
+} from "@chakra-ui/react";
 
 const TrendingItem = ({
   post,
   setCurrentPost,
   trending: { loading },
   routing,
   by,
-  postRedu: { loadingUserPosts, savedPosts, status },
+  postRedu: { loadingUserPosts, savedPosts, status, savedToast },
   getAdminPrivilages,
   adminPrivilages,
   savePost,
@@ -86,6 +94,7 @@ const TrendingItem = ({
     // eslint-disable-next-line
   }, [loadingUNI, loadingUserPosts, loading]);
 
+
   const openOptionsMenu = () => {
     setOpenOptions((prev) => !prev);
   };

client/src/components/layout components/editor/PostEditor.js

@@ -7,6 +7,8 @@ import {
 } from "../../../actions/getPostAction";
 import { convertToRaw, Editor, EditorState, RichUtils } from "draft-js";
 import { dispatchPopup } from "../../../actions/popupAction";
+import * as S from "@chakra-ui/react";
+import styled from "styled-components";
 
 const PostEditor = ({
   uploadPost,
@@ -76,45 +78,64 @@ const PostEditor = ({
   };
 
   return (
-    <div className="d-flex flex-column editor-container-compose">
-      <div className="img-upload">
-        <input
+    <S.Flex flexDir="column" px="300px" w="100%">
+      <S.Flex>
+        <S.Input
           type="file"
           name="file"
           id="file"
           className="custom-file-input"
           onChange={addFile}
+          w="250px"
         />
-        <div className="custom-upload post-post-btn">Upload Image</div>
-        {upload === "Uploading..." && (
-          <div className="img-loader">
-            <div className="the-moving-grad"></div>
-          </div>
-        )}
-      </div>
-      <div className="d-flex justify-content-center compose-heading">
-        <input
+        {upload === "Uploading..." && <div>uploading...</div>}
+      </S.Flex>
+      <S.Flex mt="20px" w="100%">
+        <S.Input
           type="text"
           placeholder="Title"
           spellCheck="false"
           maxLength="100"
           value={heading}
           onChange={handleHeadingChange}
         />
-      </div>
-      <Editor
-        editorState={editorState}
-        onChange={setEditorState}
-        handleKeyCommand={handleKeyCommand}
-        className="the-main-editor"
-      />
-      <button className="post-post-btn" onClick={handleSave}>
-        <span>{post.uploadedStatus ? "" : "Post"}</span>
-      </button>
-    </div>
+      </S.Flex>
+      <S.Box
+        boxShadow="base"
+        my="30px"
+        mt="15px"
+        rounded="md"
+        border="2px solid #00000020"
+      >
+        <EditorWrapper>
+          <Editor
+            editorState={editorState}
+            onChange={setEditorState}
+            handleKeyCommand={handleKeyCommand}
+            className="the-main-editor"
+          />
+        </EditorWrapper>
+      </S.Box>
+      <S.Button w="250px" onClick={handleSave}>
+        <S.Text>{post.uploadedStatus ? "" : "Post"}</S.Text>
+      </S.Button>
+    </S.Flex>
   );
 };
 
+const EditorWrapper = styled.div`
+  .DraftEditor-root {
+    .DraftEditor-editorContainer {
+      .public-DraftEditor-content div {
+        margin: 20px;
+        div {
+          margin: 0;
+        }
+      }
+    }
+  }
+`;
+
 const mapStateToProps = (state) => {
   return {
     auth: state.auth,

client/src/reducers/getPost.js

@@ -16,6 +16,7 @@ import {
   CLEAN_POST_ACTION,
   DELETE_POST,
   REALLY_GET_ALL_POSTS,
+  SAVE_POST_TOAST,
 } from "../actions/types";
 
 const initialState = {
@@ -34,6 +35,7 @@ const initialState = {
   imageUploaded: false,
   arePosts: true, //check weather are there some posts
   deletedStatus: "",
+  savedToast: false,
 };
 
 const postReducer = (state = initialState, action) => {
@@ -142,6 +144,11 @@ const postReducer = (state = initialState, action) => {
         imageUploaded: false,
         arePosts: true,
       };
+    case SAVE_POST_TOAST:
+      return {
+        ...state,
+        savedToast: action.payload,
+      };
     default:
       return state;
   }