Skip to content

Commit 795b031

Browse files
BasharElmetwaliahmedBasharElmetwaliahmed
committed
refactoring add edit post code
1 parent d2c9731 commit 795b031

File tree

7 files changed

+93
-61
lines changed

7 files changed

+93
-61
lines changed

‎src/Components/Posts/CreatePostModal/CreatePostForm.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* eslint-disable react/prop-types */
2+
import CreatePostModalFooter from './CreatePostModalFooter';
3+
import PostOptions from '../Post/PostOptions';
4+
import UploadImages from './UploadImages';
5+
import EmojisComponent from '../EmojisComponent';
6+
7+
8+
function CreatePostForm({ contentValue, changeHandler, uploadedImage,error,publishHandler,setUploadedImage,closeModal,loading }) {
9+
return (
10+
<form onSubmit={publishHandler} className="bg-[rgba(252,250,248,1)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] py-8 px-12 rounded-3xl w-[700px] max-w-full m-2">
11+
<h3 className="text-4xl font-bold text-center">Create Post</h3>
12+
<div className='w-full bg-white mx-auto my-2'>
13+
<textarea className='w-full min-h-[200px] resize-none outline-none p-2' onChange={changeHandler} value={contentValue} />
14+
<div className='flex justify-between p-2'>
15+
<UploadImages setUploadedImage={setUploadedImage} />
16+
<EmojisComponent />
17+
</div>
18+
</div>
19+
{error ? <p className='text-red-800 font-medium'>*{error}</p> : ''}
20+
<PostOptions uploadedImage={uploadedImage} setUploadedImage={setUploadedImage} />
21+
<CreatePostModalFooter closeModal={closeModal} loading={loading} />
22+
</form>
23+
);
24+
}
25+
26+
export default CreatePostForm;

‎src/Components/Posts/CreatePostModal/CreatePostModal.jsx

+46-43
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,64 @@
1-
/* eslint-disable no-unused-vars */
21
/* eslint-disable react/prop-types */
3-
import { useState } from 'react';
4-
import EmojisComponent from '../EmojisComponent';
5-
import PostOptions from '../Post/PostOptions';
6-
import UploadImages from '../UploadImages';
7-
import { toFormData } from '../../../Functions/toFormData';
8-
import useFetch from '../../../CustomHooks/useFetch';
9-
import CreatePostModalFooter from './CreatePostModalFooter';
10-
import { useNavigate } from 'react-router-dom';
11-
import { postOptions as options } from '../../../options'
2+
import { useState } from 'react';
123
import { useDispatch } from 'react-redux';
4+
import useFetch from '../../../CustomHooks/useFetch';
5+
import { toFormData } from '../../../Functions/toFormData';
6+
import { postOptions } from '../../../options';
137
import { addPost } from '../../../store/posts/postsSlice';
8+
import CreatePostForm from './CreatePostForm';
149

15-
16-
function CreatePostModal({ closeModal, editPost, post }) {
17-
const [uploadedImage, setUploadedImage] = useState(post&&post['image_path'] ?`http://localhost:8000/${post['image_path']}`: null);
10+
function CreatePostModal({ closeModal, editPost, post,editError,editLoading }) {
11+
const [uploadedImage, setUploadedImage] = useState(post && post['image_path'] ? `http://localhost:8000/${post['image_path']}` : null);
1812
const [contentValue, setContentValue] = useState(post ? post.content : '');
13+
const { fetchApi:createPost, error:createError,loading:createLoading } = useFetch('http://localhost:8000/api/posts/create', postOptions);
1914
const dispatch=useDispatch()
20-
const navigate = useNavigate();
21-
const { fetchApi:createPost, loading, error } = useFetch('http://localhost:8000/api/posts/create', options);
2215

2316
const changeHandler = (e) => {
2417
setContentValue(e.target.value);
2518
};
2619

27-
const publishHandler = async (e) => {
28-
e.preventDefault();
29-
console.log(editPost)
30-
let resData;
20+
const publishHandler = async (e) => {
21+
e.preventDefault();
22+
let resData;
23+
if (editPost) {
24+
// If editing an existing post
25+
const formData = toFormData([
26+
{ name: 'content', value: contentValue },
27+
uploadedImage ? { value: uploadedImage, name: 'file_path' } : null,
28+
]);
29+
resData = await editPost(formData);
30+
} else {
31+
// If creating a new post
32+
const formData = toFormData([
33+
{ name: 'content', value: contentValue },
34+
uploadedImage ? { value: uploadedImage, name: 'file_path' } : null,
35+
]);
36+
resData = await createPost(formData);
37+
}
38+
if (resData.ok) {
3139
if (editPost) {
32-
33-
resData = await editPost(toFormData([{ name: 'content', value: contentValue }, uploadedImage ? { value: uploadedImage, name: 'file_path' } : null]));
40+
dispatch(editPost(resData.data.post));
3441
} else {
35-
resData = await createPost(toFormData([{ name: 'content', value: contentValue }, uploadedImage ? { value: uploadedImage, name: 'file_path' } : null]));
36-
}
37-
if (resData.ok) {
38-
dispatch(addPost(resData.data.post))
39-
setUploadedImage(null);
40-
setContentValue('');
41-
closeModal();
42-
}
43-
};
42+
dispatch(addPost(resData.data.post));
4443

44+
}
45+
setUploadedImage(null);
46+
setContentValue('');
47+
closeModal();
48+
}
49+
};
4550
return (
46-
<form onSubmit={publishHandler} className="bg-[rgba(252,250,248,1)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] py-8 px-12 rounded-3xl w-[700px] max-w-full m-2">
47-
<h3 className="text-4xl font-bold text-center">Create Post</h3>
48-
<div className='w-full bg-white mx-auto my-2'>
49-
<textarea className='w-full min-h-[200px] resize-none outline-none p-2' onChange={changeHandler} value={contentValue} />
50-
<div className='flex justify-between p-2'>
51-
<UploadImages setUploadedImage={setUploadedImage} />
52-
<EmojisComponent />
53-
</div>
54-
</div>
55-
{error ? <p className='text-red-800 font-medium'>*{error}</p> : ''}
56-
<PostOptions uploadedImage={uploadedImage} setUploadedImage={setUploadedImage} />
57-
<CreatePostModalFooter closeModal={closeModal} loading={loading} />
58-
</form>
51+
<CreatePostForm
52+
contentValue={contentValue}
53+
changeHandler={changeHandler}
54+
uploadedImage={uploadedImage}
55+
closeModal={closeModal}
56+
publishHandler={publishHandler}
57+
setUploadedImage={setUploadedImage}
58+
error={editError?editError:createError}
59+
loading={editLoading?editLoading:createLoading}
60+
61+
/>
5962
);
6063
}
6164

‎src/Components/Posts/CreatePostModal/CreatePostModalFooter.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12
import ReactLoading from 'react-loading';
23
function CreatePostModalFooter({closeModal,loading}) {
34
return (

‎src/Components/Posts/UploadImages.jsx renamed to ‎src/Components/Posts/CreatePostModal/UploadImages.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import imageIcon from '../../assets/images/posts/image 100.svg'
1+
/* eslint-disable react/prop-types */
2+
import imageIcon from '../../../assets/images/posts/image 100.svg'
23

34
function UploadImages({setUploadedImage}) {
45
const imageChange = (e) => {
56
if (e.target.files && e.target.files.length > 0) {
67
setUploadedImage(e.target.files[0])
8+
console.log(setUploadedImage)
79
}
810
};
911
return (

‎src/Components/Posts/Post/EditPost/EditPost.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { MenuDropdown } from './MenuDropDown';
1313

1414
function EditPost({ post }) {
1515
const { fetchApi: deletePostFetch } = useFetch(`http://localhost:8000/api/posts/delete/${post.id}`, postOptions);
16-
const { fetchApi: editPostFetch } = useFetch(`http://localhost:8000/api/posts/edit/${post.id}`, postOptions);
16+
const { fetchApi: editPostFetch,error:editError,loading:editLoading } = useFetch(`http://localhost:8000/api/posts/edit/${post.id}`, postOptions);
1717
const dispatch = useDispatch();
1818
const [menuOpen, setMenuOpen] = useState(false);
1919
const [modalOpen, setModalOpen] = useState(false);
@@ -55,6 +55,8 @@ function EditPost({ post }) {
5555
post={post}
5656
closeModal={closeEditModal}
5757
open={modalOpen}
58+
editError={editError}
59+
editLoading={editLoading}
5860
/>
5961
</div>
6062
);

‎src/Components/Posts/Post/ModalComponent.jsx

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import CreatePostModal from "../CreatePostModal/CreatePostModal";
2-
import Modal from "react-modal";
1+
/* eslint-disable react/prop-types */
2+
import CreatePostModal from '../CreatePostModal/CreatePostModal';
3+
import Modal from 'react-modal';
4+
35
const customStyles = {
46
content: {
57
top: '50%',
@@ -8,23 +10,19 @@ const customStyles = {
810
bottom: 'auto',
911
marginRight: '-50%',
1012
transform: 'translate(-50%, -50%)',
11-
background:'none',
12-
border:'none'
13+
background: 'none',
14+
border: 'none',
1315
},
1416
};
1517

16-
17-
function ModalComponent({open,closeModal,editPostFetch,post}) {
18+
function ModalComponent({ open, closeModal, editPostFetch, post, editLoading, editError }) {
1819
return (
1920
<>
20-
<Modal
21-
isOpen={open}
22-
onRequestClose={closeModal}
23-
style={customStyles}
24-
>
25-
<CreatePostModal closeModal={closeModal} editPost={editPostFetch} post={post}/>
26-
</Modal></>
27-
)
21+
<Modal isOpen={open} onRequestClose={closeModal} style={customStyles}>
22+
<CreatePostModal closeModal={closeModal} editPost={editPostFetch} editError={editError} editLoading={editLoading} post={post} />
23+
</Modal>
24+
</>
25+
);
2826
}
2927

30-
export default ModalComponent
28+
export default ModalComponent;

‎src/Components/Posts/Post/Post.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function Post({ post }) {
4848
return (
4949
<div className='py-[30px] border-t-[6px] border-t-[rgba(235,235,235,1)] font-medium'>
5050
<PostHeader post={post} />
51-
<div className='px-5'>
51+
<div >
5252
<PostContent post={post} />
5353
<PostDetails post={post} />
5454
<PostActions post={post} usersLikesThisPost={usersLikesThisPost} />

0 commit comments

Comments
 (0)