FIX | CRUD comments

android/.project

@@ -21,7 +21,7 @@
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

android/app/.project

@@ -22,12 +22,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1630909588124</id>
+			<id>1666684195946</id>
 			<name></name>
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

src/api/comments/requests.interfaces.ts

@@ -1,8 +1,14 @@
 export interface ICreateComment {
-    taskId: number | string
-    content: string
+	taskId: number | string
+	content: string
 }
 
 export interface IReadComments {
-    ids: number[]
+	ids: number[]
+}
+export interface IEditComment {
+	content: string
+}
+export interface IReadComment {
+	ids: number[]
 }

src/api/comments/requests.ts

@@ -14,3 +14,12 @@ export const fetchComments = (params: {
 }): ApiResponse<Res.ICommentsList> => {
 	return http.get<Res.ICommentsList>(`tasks-comments`, { params })
 }
+export const editComment = (data: Req.IEditComment, commentId: number) => {
+	return http.put<any>(`tasks-comments/${commentId}`, data)
+}
+export const deleteComment = (commentId: number | string) => {
+	return http.delete<any>(`tasks-comments/${commentId}`)
+}
+export const readComments = (data: Req.IReadComment) => {
+	return http.post<any>('tasks-comments/read', data)
+}

src/modules/comments/configs/comments-menu-options.config.ts

@@ -0,0 +1,26 @@
+import { CommentActionEnum } from '../enums/comment-actions.enum'
+interface IProps {
+	onPress: (actionType: CommentActionEnum) => void
+	canEdit?: boolean
+}
+
+export const getCommentsMenuOptions = ({ onPress, canEdit }: IProps) => {
+	const menuOptions = {
+		delete: {
+			name: 'Видалити',
+			onPress: () => onPress(CommentActionEnum.DELETE),
+		},
+
+		edit: {
+			name: 'Редагувати',
+			onPress: () => onPress(CommentActionEnum.EDIT),
+		},
+	}
+	const optionsKeys = []
+	optionsKeys.push('delete')
+	if (canEdit) optionsKeys.push('edit')
+
+	const options = optionsKeys.map(key => menuOptions[key])
+
+	return options
+}

src/modules/comments/enums/comment-actions.enum.ts

@@ -0,0 +1,4 @@
+export enum CommentActionEnum {
+	DELETE,
+	EDIT,
+}

src/modules/comments/hooks/use-task-comments.hook.ts

@@ -1,16 +1,25 @@
-import { hasImageUrl, ICommentFullInfo } from '@/shared'
+import { MessageType } from './../../../shared/enums/chat.enums'
+import { appEvents, hasImageUrl, IComment, ICommentFullInfo } from '@/shared'
 import { commentsService } from '@/services/domain'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { selectId } from '@/store/account'
 import _ from 'lodash'
 import { GiftedChat } from 'react-native-gifted-chat'
-import { transformComments } from '../transforms'
+import { transformComment, transformComments } from '../transforms'
+import { CommentActionEnum } from '../enums/comment-actions.enum'
+import { getCommentsMenuOptions } from '../configs/comments-menu-options.config'
+import {
+	deleteComment,
+	editComment,
+	readComments,
+} from '@/api/comments/requests'
 
 export const useTaskComments = (taskId: number) => {
 	const accountId = useSelector(selectId)
 	const [comments, setComments] = useState([])
 	const [commentText, setCommentText] = useState('')
+	const [editableComment, setEditableComment] = useState(null)
 	const [isLoading, setLoad] = useState<boolean>(true)
 	const [isSending, setSending] = useState(false)
 
@@ -33,25 +42,94 @@ export const useTaskComments = (taskId: number) => {
 	useEffect(() => {
 		if (taskId) loadComments()
 	}, [taskId])
-
+	const onEditComment = (comment: IComment) => {
+		setEditableComment({
+			...comment,
+			type: MessageType.Text,
+		})
+		setCommentText((comment.content as any)?.message)
+	}
 	const sendComment = async () => {
+		if (_.isEmpty(commentText)) return
 		setSending(true)
 		try {
-			const comment = await commentsService.addTaskComment({
-				taskId,
-				content: commentText.trim(),
-			})
+			if (editableComment) {
+				const respEdit = await editComment(
+					{ content: commentText },
+					editableComment.id,
+				)
+				console.log('respEdit', respEdit)
+				setComments(prev => {
+					return [...prev].map(it => {
+						if (it.id !== editableComment.id) return it
+						return transformComment(
+							{
+								...it,
+								content: commentText,
+							},
+							accountId,
+						)
+					})
+				})
+				setCommentText('')
+				setEditableComment(null)
+			} else {
+				const comment = await commentsService.addTaskComment({
+					taskId,
+					content: commentText.trim(),
+				})
 
-			setComments(prev => {
-				return [...prev, ...transformComments([comment], accountId)]
-			})
-			setCommentText(null)
+				setComments(prev => {
+					return [...prev, ...transformComments([comment], accountId)]
+				})
+				setCommentText(null)
+			}
 		} catch (e) {
 			console.log('ADD COMMENT ERROR', e)
 		} finally {
 			setSending(false)
 		}
 	}
+	const onDeleteComment = (item: IComment) => {
+		setTimeout(
+			() =>
+				appEvents.emit('openConfirmModal', {
+					title: 'Ви впевнені, що хочете \n видалити  коментар?',
+					buttonToHighlight: 'allow',
+					allowBtnAction: async () => {
+						const temp = comments.filter(el => el.id !== item.id)
+						setComments(temp)
+						await deleteComment(item.id)
+					},
+					notAllowBtnAction: () => {},
+				}),
+			300,
+		)
+	}
+
+	const actions = {
+		[CommentActionEnum.DELETE]: onDeleteComment,
+		[CommentActionEnum.EDIT]: onEditComment,
+	}
+
+	const onLongPress = useCallback(
+		(id: any) => {
+			const item = comments.find(el => el.id === id)
+			if (!item?.isMy) return
+			appEvents.emit('openActionSheet', {
+				items: getCommentsMenuOptions({
+					canEdit: item?.isMy,
+					onPress: (actionType: CommentActionEnum) =>
+						actions[actionType](item),
+				}),
+			})
+		},
+		[comments, taskId],
+	)
+	const cancelEdit = () => {
+		setEditableComment(null)
+		setCommentText('')
+	}
 
 	return {
 		isLoading,
@@ -60,5 +138,8 @@ export const useTaskComments = (taskId: number) => {
 		setCommentText,
 		sendComment,
 		isSending,
+		onLongPress,
+		editableComment,
+		cancelEdit,
 	}
 }

src/modules/comments/screens/comments.screen.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useRef } from 'react'
+import React, { FC, useCallback, useRef } from 'react'
 import {
 	$size,
 	Avatar,
@@ -37,9 +37,18 @@ export const Comments: FC<IProps> = ({ navigation, route }) => {
 	const { taskId } = route.params
 	const accountId = useSelector(selectId)
 
-	const { comments, commentText, setCommentText, sendComment, isSending } =
-		useTaskComments(taskId)
-
+	const {
+		comments,
+		commentText,
+		setCommentText,
+		sendComment,
+		isSending,
+		editableComment,
+		cancelEdit,
+		onLongPress,
+	} = useTaskComments(taskId)
+	const clearReplyTo = () => setCommentText('')
+	//console.log('comments', comments)
 	return (
 		<CommentsLayout title="Коментарі" goBack={navigation.goBack}>
 			<View style={{ flex: 1 }}>
@@ -49,6 +58,7 @@ export const Comments: FC<IProps> = ({ navigation, route }) => {
 					loadPrev={() => {}}
 					loadNext={() => {}}
 					lastMessageLoaded={true}
+					onLongPressMessage={id => onLongPress(id)}
 				/>
 			</View>
 			<ChatBar
@@ -56,6 +66,9 @@ export const Comments: FC<IProps> = ({ navigation, route }) => {
 				onChangeMessage={val => setCommentText(val)}
 				onPressSend={() => sendComment()}
 				isSending={isSending}
+				clearReplyTo={clearReplyTo}
+				editedMessage={editableComment}
+				onPressClearEdited={cancelEdit}
 			/>
 		</CommentsLayout>
 	)

src/shared/components/action-sheet/action-sheet.component.tsx

@@ -30,7 +30,8 @@ export const ActionSheet = () => {
 		return items.map((it, i, arr) => {
 			return (
 				<ActionSheetItem
-					name={it.name}
+					key={it?.name}
+					name={it?.name}
 					onPress={() => {
 						close()
 						if (it.onPress) setTimeout(() => it.onPress(), 100)

src/shared/interfaces/comments.interfaces.ts

@@ -5,6 +5,7 @@ export interface IComment {
 	readByUsersId: number[]
 	createdAt: string
 	updatedAt: string
+	isMy?: boolean
 }
 
 export interface IUserInComment {