fix edit message
This commit is contained in:
parent
e559cb88c6
commit
9fad765c50
|
|
@ -1,6 +1,6 @@
|
|||
import { FaThumbsUp } from 'react-icons/fa';
|
||||
import Avatar from '@components/Avatar';
|
||||
import PopupMessage from './PopupMessage';
|
||||
import PopupMenu from './PopupMenu';
|
||||
|
||||
const Image = ({ image }: {image: string}) => {
|
||||
if (image === '' || image === null) {
|
||||
|
|
@ -39,7 +39,7 @@ const Message = ({ message }: any) => {
|
|||
<div className="text-red-light text-xl username">
|
||||
{message.author.firstName} {message.author.lastName}
|
||||
</div>
|
||||
<PopupMessage message={message} />
|
||||
<PopupMenu message={message} />
|
||||
</div>
|
||||
<Text text={message.content} />
|
||||
<Image image={message.image} />
|
||||
|
|
|
|||
|
|
@ -1,19 +1,6 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Cookies } from "react-cookie";
|
||||
import Message from "./Message";
|
||||
|
||||
const getMessages = async () => {
|
||||
const token = new Cookies().get("token");
|
||||
const response = await fetch("/api/posts", {
|
||||
method: "GET",
|
||||
mode: "cors",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
return response.json();
|
||||
};
|
||||
import { getMessages } from "@controllers/MessageController";
|
||||
|
||||
const MessageWrapper = () => {
|
||||
const messages = useQuery(["messages"], getMessages, {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,14 @@
|
|||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { Cookies } from 'react-cookie';
|
||||
import { FaPlus } from 'react-icons/fa';
|
||||
|
||||
const sendMessage = async (data: FormData) => {
|
||||
const token = new Cookies().get('token');
|
||||
let contentType = 'application/json';
|
||||
let body: FormData | string | undefined = undefined;
|
||||
|
||||
if (data.get('image')) {
|
||||
contentType = 'multipart/form-data';
|
||||
body = data;
|
||||
} else {
|
||||
body = JSON.stringify(data);
|
||||
}
|
||||
const response = await fetch('/api/posts/new', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body,
|
||||
});
|
||||
return response.json();
|
||||
};
|
||||
import {newMessage} from '@controllers/MessageController';
|
||||
|
||||
const NewMessage = () => {
|
||||
const [message, setMessage] = useState('');
|
||||
const [image, setImage] = useState('');
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate: send } = useMutation(sendMessage, {
|
||||
const { mutate: send } = useMutation(newMessage, {
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(['messages']);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { FaEllipsisH } from 'react-icons/fa';
|
||||
import DeleteMessage from '@components/Popups/DeleteMessage';
|
||||
import EditMessage from '@components/Popups/EditMessage';
|
||||
|
||||
const PopupMenu = ({ message }: { message: any }) => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClick = (e: any) => {
|
||||
if (e.target.closest('#messageId' + message.id) === null) {
|
||||
setShow(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClick);
|
||||
}, [message.id]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-grey-dark">
|
||||
<div
|
||||
className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
|
||||
onClick={() => setShow(!show)}
|
||||
>
|
||||
<FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' +
|
||||
(show ? '' : ' hidden')
|
||||
}
|
||||
>
|
||||
<div className="popup-content space-y-2">
|
||||
<button
|
||||
className="popup-item block text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
|
||||
onClick={() => {
|
||||
setShowEdit(!showEdit);
|
||||
setShow(!show);
|
||||
}}
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
className="popup-item block text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red"
|
||||
onClick={() => {
|
||||
setShowDelete(!showDelete);
|
||||
setShow(!show);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<EditMessage message={message} showEdit={showEdit} setShowEdit={setShowEdit} />
|
||||
<DeleteMessage
|
||||
authorId={message.author.id}
|
||||
messageId={message.id}
|
||||
showDelete={showDelete}
|
||||
setShowDelete={setShowDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopupMenu;
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
import { FaEllipsisH } from 'react-icons/fa';
|
||||
import Modal from './Modal';
|
||||
import { deleteMessage } from '@controllers/MessageController';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const DeleteModal = ({
|
||||
authorId,
|
||||
messageId,
|
||||
showDelete,
|
||||
setShowDelete,
|
||||
}: {
|
||||
authorId: string;
|
||||
messageId: string;
|
||||
showDelete: boolean;
|
||||
setShowDelete: (showDelete: boolean) => void;
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handleDelete = async () => {
|
||||
const response = await deleteMessage(messageId);
|
||||
queryClient.invalidateQueries(['messages']);
|
||||
setShowDelete(false);
|
||||
if (response.error) {
|
||||
toast.error(response.error, {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
} else {
|
||||
toast.success(response.message, {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
setShowDelete(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal show={showDelete}>
|
||||
<div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
|
||||
<button
|
||||
className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<button
|
||||
className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
|
||||
onClick={() => setShowDelete(!showDelete)}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const EditModal = ({
|
||||
authorId,
|
||||
messageId,
|
||||
showEdit,
|
||||
setShowEdit,
|
||||
}: {
|
||||
authorId: string;
|
||||
messageId: string;
|
||||
showEdit: boolean;
|
||||
setShowEdit: (showEdit: boolean) => void;
|
||||
}) => {
|
||||
return (
|
||||
<Modal show={showEdit}>
|
||||
<div className="text-white">Modifier</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const PopupMessage = ({ message }: { message: any }) => {
|
||||
const [show, setShow] = useState(false);
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showDelete, setShowDelete] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClick = (e: any) => {
|
||||
if (e.target.closest('#messageId' + message.id) === null) {
|
||||
setShow(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', handleClick);
|
||||
}, [message.id]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="bg-grey-dark">
|
||||
<div
|
||||
className="popup-btn cursor-pointer rounded-full hover:bg-grey-light transition-all"
|
||||
onClick={() => setShow(!show)}
|
||||
>
|
||||
<FaEllipsisH className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'popup absolute z-10 right-0 top-8 bg-grey-dark shadow-lg shadow-slate-900 rounded-xl p-2' +
|
||||
(show ? '' : ' hidden')
|
||||
}
|
||||
>
|
||||
<div className="popup-content space-y-2">
|
||||
<button
|
||||
className="popup-item block text-white rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
|
||||
onClick={() => {
|
||||
setShowEdit(!showEdit);
|
||||
setShow(!show);
|
||||
}}
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
className="popup-item block text-red rounded-xl p-2 transition-all hover:cursor-pointer hover:text-white hover:bg-red"
|
||||
onClick={() => {
|
||||
setShowDelete(!showDelete);
|
||||
setShow(!show);
|
||||
}}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<EditModal authorId={message.author.id} messageId={message.id} showEdit={showEdit} setShowEdit={setShowEdit} />
|
||||
<DeleteModal
|
||||
authorId={message.author.id}
|
||||
messageId={message.id}
|
||||
showDelete={showDelete}
|
||||
setShowDelete={setShowDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PopupMessage;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { deleteMessage } from "@controllers/MessageController";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { toast } from "react-toastify";
|
||||
import Modal from "../Modal";
|
||||
|
||||
const DeleteMessage = ({
|
||||
authorId,
|
||||
messageId,
|
||||
showDelete,
|
||||
setShowDelete,
|
||||
}: {
|
||||
authorId: string;
|
||||
messageId: string;
|
||||
showDelete: boolean;
|
||||
setShowDelete: (showDelete: boolean) => void;
|
||||
}) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handleDelete = async () => {
|
||||
const response = await deleteMessage(messageId);
|
||||
queryClient.invalidateQueries(['messages']);
|
||||
setShowDelete(false);
|
||||
if (response.error) {
|
||||
toast.error(response.error, {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
} else {
|
||||
toast.success(response.message, {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
setShowDelete(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal show={showDelete}>
|
||||
<div className="text-white mb-2">Voulez vous vraiment supprimer ce message ?</div>
|
||||
<button
|
||||
className="popup-item bg-red text-white border-red border-2 rounded-xl p-2 mr-2 transition-all hover:cursor-pointer hover:bg-white hover:text-red"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
<button
|
||||
className="popup-item text-grey-light rounded-xl p-2 transition-all hover:cursor-pointer hover:bg-grey-light hover:text-grey-dark"
|
||||
onClick={() => setShowDelete(!showDelete)}
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteMessage;
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import Modal from '@components/Modal';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { FaTimes } from 'react-icons/fa';
|
||||
import { editMessage } from '@controllers/MessageController';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const EditMessage = ({
|
||||
message,
|
||||
showEdit,
|
||||
setShowEdit,
|
||||
}: {
|
||||
message: any;
|
||||
showEdit: boolean;
|
||||
setShowEdit: (showEdit: boolean) => void;
|
||||
}) => {
|
||||
const [messageContent, setMessageContent] = useState(message.content);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const data = new FormData(e.target as HTMLFormElement);
|
||||
const response = await editMessage(message.id, data);
|
||||
|
||||
if (response.error) {
|
||||
toast.error(response.error, {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast.success('Message édité avec succès!', {
|
||||
position: 'top-right',
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
queryClient.invalidateQueries(['messages']);
|
||||
setShowEdit(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={showEdit}>
|
||||
<div className="title flex justify-between items-center border-b border-b-grey-light">
|
||||
<div className="text-white mb-2">Modifier votre message</div>
|
||||
<FaTimes
|
||||
className="fill-grey-light hover:fill-grey-dark hover:bg-grey-light cursor-pointer transition-all text-xl w-10 h-10 p-2.5 rounded-md"
|
||||
onClick={() => setShowEdit(!showEdit)}
|
||||
/>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={messageContent}
|
||||
onChange={(e) => setMessageContent(e.target.value)}
|
||||
placeholder="Message"
|
||||
className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
|
||||
id="content"
|
||||
name="content"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
|
||||
>
|
||||
Envoyer
|
||||
</button>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditMessage;
|
||||
|
|
@ -14,18 +14,9 @@ const getMessages = async () => {
|
|||
|
||||
const newMessage = async (data: FormData) => {
|
||||
const token = new Cookies().get('token');
|
||||
let body;
|
||||
if (data.get('image')) {
|
||||
body = data;
|
||||
} else {
|
||||
body = JSON.stringify({
|
||||
content: data.get('content'),
|
||||
});
|
||||
}
|
||||
|
||||
const response = await fetch('/api/posts/new', {
|
||||
method: 'POST',
|
||||
body,
|
||||
body: data,
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
|
|
@ -47,18 +38,10 @@ const deleteMessage = async (id: string) => {
|
|||
|
||||
const editMessage = async (id: string, data: FormData) => {
|
||||
const token = new Cookies().get('token');
|
||||
let body;
|
||||
if (data.get('image')) {
|
||||
body = data;
|
||||
} else {
|
||||
body = JSON.stringify({
|
||||
content: data.get('content'),
|
||||
});
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/posts/${id}`, {
|
||||
const response = await fetch(`/api/posts/edit/${id}`, {
|
||||
method: 'PUT',
|
||||
body,
|
||||
body: data,
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue