Merge branch 'BAC-4' into BAC-1

src/components/Modal/index.css

@@ -0,0 +1,50 @@
+.modalContainer {
+    position: fixed;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* left: 13%; */
+    /* right: 13%; */
+    top: 50px;
+    background-color: white;
+    width: 100%;
+    height: calc(100vh - 50px);
+    border-radius: 7px;
+    /* margin: 20px; */
+}
+
+.modalWrapper {
+    width: 100%;
+}
+
+.postUpdateBtn {
+    float: right;
+    width: 100px;
+    align-self: center;
+    border: none;
+    border-radius: 10px;
+    color: white;
+    background-color: teal;
+    padding: 10px;
+    margin-top: 20px;
+    font-family: 'Josefin Sans', sans-serif;
+    cursor: pointer;
+}
+
+.upPost>label {
+    font-size: 20px;
+    margin-top: 20px;
+}
+
+.upPost>input {
+    color: gray;
+    margin: 10px 0;
+    height: 30px;
+    border: none;
+    width: 60%;
+    border-bottom: 1px solid lightgray;
+}
+.upPost>input:focus{
+    outline: none;
+    border-bottom: 1px solid grey;
+}

src/components/Modal/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import './index.css'
+
+
+export default function Modal() {
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+    }
+    return (
+        <div className='modalContainer'>
+            <div className='modalWrapper'>
+
+                <form className='upPost' onSubmit={handleSubmit}>
+                    {/* <label for="title">
+                        Title
+                    </label> */}
+                    <input className='postUpInp' type="text" id="title" placeholder='Title of your post' />
+                    <br />
+                    {/* <label for="desc">
+                        Description
+                    </label> */}
+                    <input className='postUpInp' type="text" id="desc" placeholder='Write detailed description of your post...' />
+                    <br />
+                    <button className='postUpdateBtn' type='submit'>Update</button>
+                </form>
+            </div>
+        </div>
+    )
+}

src/components/singlePost/SinglePost.jsx

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import axios from 'axios';
 import moment from 'moment';
 import { Context } from '../../context/Context';
+import Modal from '../Modal';
 
 
 export default function SinglePost() {
@@ -15,6 +16,10 @@ export default function SinglePost() {
     const [post, setPost] = useState([]);
     const [username, setUsername] = useState('');
 
+    const [title, setTitle] = useState('');
+    const [desc, setDesc] = useState('')
+    const [updateMode, setUpdateMode] = useState(false)
+
     useEffect(() => {
         const getPost = async () => {
             const result = await axios.get(location.pathname);
@@ -43,7 +48,7 @@ export default function SinglePost() {
                     src={post.postThumbnail ? `http://localhost:3000/images/${post.postThumbnail}` : `https://dummyimage.com/250/ffffff/000000`} alt="" />
                 <h1 className='singlePostTitle'>{post.title}
                     <div className="singlePostEdit">
-                        <i className="singlePostIcon far fa-edit" ></i>
+                        <i className="singlePostIcon far fa-edit" onClick={()=>setUpdateMode(true)}></i>
                         <i className="singlePostIcon far fa-trash-alt" onClick={handleDelete}></i>
                     </div>
                 </h1>
@@ -55,6 +60,9 @@ export default function SinglePost() {
                     {post.description}
                 </p>
             </div>
+            { updateMode &&
+            <Modal />
+            }
         </div>
     )
 }

src/components/singlePost/singlePost.css

@@ -1,5 +1,6 @@
 .singlePost {
     flex: 9;
+    /* position: relative; */
 }
 
 .singlePostWraper {

src/context/Actions.js

@@ -9,16 +9,17 @@ export const LoginSuccessfull = (user) => ({
 })
 
 export const LoginFailure = () => ({
-    tyep: actionTypes.LOGIN_FAILURE
+    type: actionTypes.LOGIN_FAILURE
 })
 
 export const Logout = () => ({
-    tyep: actionTypes.LOGOUT
+    type: actionTypes.LOGOUT
 })
 
 
-export const FetchPosts = () => ({
-    tyep: actionTypes.FETCH_POSTS
+export const UpdatePostModal = () => ({
+    type: actionTypes.UPDATE_POST_MODAL,
+    payload: true
 })
 
 

src/context/Context.js

@@ -4,7 +4,8 @@ import Reducer from "./Reducer";
 const INITIAL_STATE = {
     user: JSON.parse(localStorage.getItem("user")) || null,
     isFetching: false,
-    error: false
+    error: false,
+    updatePostModal: false
 }
 
 export const Context = createContext(INITIAL_STATE);
@@ -21,7 +22,8 @@ export const ContextProvider = ({ children }) => {
                 user: state.user,
                 isFetching: state.isFetching,
                 error: state.error,
-                dispatch
+                dispatch,
+                updatePostModal:state.updatePostModal
             }}
         >
             {children}

src/context/Reducer.js

@@ -35,19 +35,8 @@ const Reducer = (state, action) => {
                 isFetching: false,
                 error: false
             };
-        // case actionTypes.REGISTER_SUCCESS:
-        //     return {
-        //         user: payload,
-        //         isFetching: false,
-        //         error: false
-        //     };
-        // case actionTypes.REGISTER_FAILURE:
-        //     return {
-        //         user: null,
-        //         isFetching: false,
-        //         error: true
-        //     };
-
+        case actionTypes.UPDATE_POST_MODAL:
+            return payload;
 
         default:
             return state

src/context/constants.js

@@ -4,7 +4,6 @@ export const LOGIN_FAILURE = 'LOGIN_FAILURE';
 export const LOGOUT = 'LOGOUT';
 
 export const FETCH_POSTS = 'FETCH_POSTS';
-export const REGISTER_SUCCESS = 'LOGIN_SUCCESS';
+export const UPDATE_POST_MODAL = 'UPDATE_POST_MODAL';
 export const REGISTER_FAILURE = 'LOGIN_FAILURE';
 
-

src/pages/settings/settings.css

@@ -81,4 +81,6 @@ cursor: pointer;
 .settingSubmit:disabled{
     background-color: rgb(97, 134, 134);
     cursor: not-allowed;
-}
+}
+
+