add addPost to posts slice

Author: BasharElmetwaliahmed

src/Components/Posts/CreatePostModal/CreatePostModal.jsx

@@ -9,11 +9,14 @@ import useFetch from '../../../CustomHooks/useFetch';
 import CreatePostModalFooter from './CreatePostModalFooter';
 import { useNavigate } from 'react-router-dom';
 import { postOptions as options } from '../../../options'
+import { useDispatch } from 'react-redux';
+import { addPost } from '../../../store/posts/postsSlice';
 
 
 function CreatePostModal({ closeModal, editPost, post }) {
   const [uploadedImage, setUploadedImage] = useState(post&&post['image_path'] ?`http://localhost:8000/${post['image_path']}`: null);
   const [contentValue, setContentValue] = useState(post ? post.content : '');
+  const dispatch=useDispatch()
   const navigate = useNavigate();
   const { fetchApi:createPost, loading, error } = useFetch('http://localhost:8000/api/posts/create', options);
 
@@ -32,10 +35,10 @@ function CreatePostModal({ closeModal, editPost, post }) {
       resData = await createPost(toFormData([{ name: 'content', value: contentValue }, uploadedImage ? { value: uploadedImage, name: 'file_path' } : null]));
     }
     if (resData.ok) {
+     dispatch(addPost(resData.data.post))
       setUploadedImage(null);
       setContentValue('');
       closeModal();
-      navigate(0);
     }
   };
 

src/CustomHooks/useFetch.js

@@ -9,7 +9,7 @@ function useFetch(url, options) {
   const fetchApi = async (data) => {
     setLoading(true);
     try {
-      const response = await fetch(url, { ...options('37|7Q91EnaQrAhQQQ6YZKHQjsUJNdrMeYkiNXsRW2Jp'), body: data });
+      const response = await fetch(url, { ...options('38|sum7kFXDl4oezUHHh6BgP6RhKAmdKPJ7YKGKK8bC'), body: data });
       const resData = await response.json();
       console.log(resData)
 

src/Pages/Home/Home.jsx

@@ -32,7 +32,7 @@ export  const  loader=async()=>{
   const response=await fetch('http://localhost:8000/api/posts',{
     method:'GET',
     headers:{
-      "Authorization": "Bearer 35|vwM5NalCjgX4Gz0PHv6kTGvW63lV0SY0lzIfYvOF"
+      "Authorization": "Bearer 38|sum7kFXDl4oezUHHh6BgP6RhKAmdKPJ7YKGKK8bC"
     }
   })
   if(!response.ok){

src/store/posts/postsSlice.js

@@ -9,6 +9,10 @@ const postsSlice=createSlice({
         setPosts:(state,action)=>{
           state.posts=action.payload  
         },
+        addPost:(state,action)=>{
+            const newPost=action.payload
+            state.posts.unshift(newPost)
+        },
         deletePost:(state,action)=>{
             const allPosts=state.posts
             state.posts=allPosts.filter(post=>post.id!=action.payload.id)
@@ -31,4 +35,4 @@ const postsSlice=createSlice({
 })
 
 export const postsReducer=postsSlice.reducer
-export const {deletePost,setPosts,editPost}=postsSlice.actions
+export const {deletePost,setPosts,editPost,addPost}=postsSlice.actions