diff --git a/src/components/AddComment.tsx b/src/components/AddComment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4b43ead2e05bab388e3be966d32862d951c1945f
--- /dev/null
+++ b/src/components/AddComment.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import useAppDispatch from '../hooks/useAppDispatch';
+import { postNewCommentAsync } from '../redux/post/thunks';
+
+type commentProps = {
+ idPost: number;
+};
+
+const AddComment = ({ idPost }: commentProps) => {
+ const [isPickerVisible, setPickerVisible] = useState(false);
+ const dispatch = useAppDispatch();
+ const [comment, setComment] = useState('');
+ return (
+ <>
+ <div className="flex justify-center px-4 gap-4">
+ <input
+ type="text"
+ value={comment}
+ onChange={(event) => {
+ setComment(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ dispatch(postNewCommentAsync(comment, idPost));
+ setComment('');
+ }
+ }}
+ className="border border-gray-400 p-2 rounded-md w-full"
+ ></input>
+ <button
+ onClick={() => {
+ dispatch(postNewCommentAsync(comment, idPost));
+ setComment('');
+ }}
+ >
+ <div className="bg-gray-500 text-white font-bold h-10 rounded-md flex items-center px-4">Publier</div>
+ </button>
+ </div>
+ </>
+ );
+};
+
+export default AddComment;
\ No newline at end of file
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 0b55868548070839c46cf0b17e3cd218cda39573..01ff3805cb8a2f2d1198496531d00d08bdda7ba4 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Instalike } from '@jmetterrothan/instalike';
import { Media } from '@jmetterrothan/instalike/dist/types/Instalike';
@@ -17,6 +17,7 @@ import { addLikePostAsync, deleteLikePostAsync, followUserPostAsync, unfollowUse
// COMPOSANTS
import Comment from './Comment';
+import AddComment from './AddComment';
type PostProps = {
@@ -32,10 +33,12 @@ type PostProps = {
comments: number;
comment_post: Instalike.Comment[];
inFeed: boolean;
+ canCommment: boolean;
};
-const Post = ({ post, postid, username, location, time_post, img, caption, isLiked, likes, comments, comment_post, inFeed }: PostProps) => {
+
+const Post = ({ post, postid, username, location, time_post, img, caption, isLiked, likes, comments, comment_post, inFeed, canCommment }: PostProps) => {
const dispatch = useAppDispatch();
const [dropdownOpen, setDropdownOpen] = useState(false);
const [navigateToPost, setnavigateToPost] = useState(false);
@@ -176,6 +179,10 @@ const Post = ({ post, postid, username, location, time_post, img, caption, isLik
</button>
</div>
</div>
+ {/* ADD COMMENT */}
+ <div>
+ <AddComment idPost={post.id} key={post.id}></AddComment>
+ </div>
{/* COMMENTS POST */}
<div className={`border-t-${comments > 0 ? '[0.8px] p-4' : '0' } flex flex-col gap-4`}>
<Comment tab_comments={comment_post}></Comment>
diff --git a/src/redux/post/actions.ts b/src/redux/post/actions.ts
index 1e3d14b520f7f8236032d882ea262cc2490a26b0..c077b8c34d63be01923e6b7bb6f232a5803506ed 100644
--- a/src/redux/post/actions.ts
+++ b/src/redux/post/actions.ts
@@ -9,6 +9,7 @@ export const REQUEST_POST_FAILURE = 'POST/REQUEST_FEED_FAILURE';
export const UNFOLLOW_USER_POST = 'POST/UNFOLLOW_USER_POST';
export const FOLLOW_USER_POST = 'POST/FOLLOW_USER_POST';
export const DELETE_POST = 'POST/DELETE_POST';
+export const COMMENT_POST = 'POST/COMMENT_POST';
export type setPostAction = AppAction<typeof SET_POST, Instalike.Post>;
@@ -18,10 +19,11 @@ export type LoadPostEndFailureAction = AppAction<typeof REQUEST_POST_FAILURE>;
export type unfollowUserPostAction = AppAction<typeof UNFOLLOW_USER_POST>;
export type followUserPostAction = AppAction<typeof FOLLOW_USER_POST>;
export type deletePostAction = AppAction<typeof DELETE_POST>;
+export type commentPostAction = AppAction<typeof COMMENT_POST>;
-export type PostAction = setPostAction | LoadPostStartAction | LoadPostEndSucessAction | LoadPostEndFailureAction | followUserPostAction | unfollowUserPostAction | deletePostAction;
+export type PostAction = setPostAction | LoadPostStartAction | LoadPostEndSucessAction | LoadPostEndFailureAction | followUserPostAction | unfollowUserPostAction | deletePostAction | commentPostAction;
export const setPost = (data: Instalike.Post): setPostAction => ({
@@ -58,3 +60,8 @@ export const deletePostAction = (): deletePostAction => ({
type: DELETE_POST,
payload: undefined,
});
+
+export const postCommentAction = (data: Instalike.Comment): commentPostAction => ({
+ type: COMMENT_POST,
+ payload: data,
+});
diff --git a/src/redux/post/reducer.ts b/src/redux/post/reducer.ts
index 8ea9cf3789c9e39a819d665030ea9bb80554aea3..bcee9bab142ffa2c998a1c097c9b1e45cc955b08 100644
--- a/src/redux/post/reducer.ts
+++ b/src/redux/post/reducer.ts
@@ -1,7 +1,7 @@
import { Instalike } from '@jmetterrothan/instalike';
import { Reducer } from 'redux';
-import { PostAction, SET_POST, DELETE_POST } from './actions';
+import { PostAction, SET_POST, DELETE_POST, COMMENT_POST } from './actions';
import { SetLikeFeedAction, SetUnlikeFeedAction, LIKE_POST_FEED, UNLIKE_POST_FEED, UNFOLLOW_USER_FEED, FOLLOW_USER_FEED } from '../feed/actions'
type PostState = {
@@ -12,7 +12,7 @@ const intialState: PostState = {
data: undefined,
};
-const postReducer: Reducer<PostState, PostAction | SetLikeFeedAction | SetUnlikeFeedAction | unfollowUserFeedAction | followUserFeedAction> = (state = intialState, action) => {
+const postReducer: Reducer<PostState, PostAction | SetLikeFeedAction | SetUnlikeFeedAction | unfollowUserFeedAction | followUserFeedAction | commentPostAction> = (state = intialState, action) => {
switch (action.type) {
case SET_POST:
return { ...state, data: action.payload };
@@ -38,6 +38,11 @@ const postReducer: Reducer<PostState, PostAction | SetLikeFeedAction | SetUnlike
return state;
case DELETE_POST:
return { ...state, data: { ...state.data, id: -1 } };
+ case COMMENT_POST:
+ if (state.data) {
+ return { ...state, previewComments: state.data.previewComments.push(action.payload), };
+ }
+ return state;
default:
return state;
}
diff --git a/src/redux/post/thunks.ts b/src/redux/post/thunks.ts
index 94d545a8d22592410d31a5ec408e14d2b635569e..fb0432dfafd1bc269655605b0ecedcc984f121f5 100644
--- a/src/redux/post/thunks.ts
+++ b/src/redux/post/thunks.ts
@@ -3,7 +3,7 @@ import { data } from 'autoprefixer';
// AUTRES FICHIERS
import { AppThunkAction } from '../types';
-import { failurePostAction, loadPostAction, setPost, sucessPostAction, followUserPostAction, unfollowUserPostAction } from './actions';
+import { failurePostAction, loadPostAction, setPost, sucessPostAction, followUserPostAction, unfollowUserPostAction, postCommentAction } from './actions';
// Calcul temps de publication d'un post / commentaire
@@ -98,3 +98,16 @@ export const deletePostAsync = (postId: number): AppThunkAction<Promise<void>> =
}
};
};
+
+// Add comment
+export const postNewCommentAsync = (comment: string, postId: number): AppThunkAction<Promise<void>> => {
+ return async (dispatch, getState, api) => {
+ try {
+ const { data } = await api.posts.find(postId).comments.create({ text: comment, mentions: [] });
+ dispatch(postCommentAction(data));
+ //dispatch(addOneCounterCommentAction());
+ } catch (e) {
+ throw e;
+ }
+ };
+};
\ No newline at end of file