\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CommentInput;\r\n","import React from \"react\";\r\nimport moment from \"moment\";\r\nimport classNames from \"classnames\";\r\n\r\nimport ConditionalWrapper from \"./ConditionalWrapper\";\r\nimport CommentInput from \"./components/CommentInput\";\r\nimport useTranslations from \"../hooks/useTranslations\";\r\nimport { ROLES } from \"../services/constants/roles\";\r\n\r\nconst Post = ({\r\n avatar,\r\n comment,\r\n isChild = false,\r\n parent,\r\n defaultValues,\r\n render = () => {},\r\n onChange = () => {},\r\n onEdit = () => {},\r\n onDelete = () => {},\r\n onSubmit = () => {},\r\n onRemoveFile = () => {},\r\n addReply = () => {},\r\n onFileDownload = () => {},\r\n uploadProgress,\r\n toggleReply = false,\r\n validations,\r\n editing,\r\n editorRef,\r\n inputRef,\r\n currentId,\r\n commentInputRef,\r\n authenticatedUser\r\n}) => {\r\n const t = useTranslations();\r\n const getReplyLinkClasses = () => {\r\n return classNames({\r\n reply: true,\r\n selected: toggleReply\r\n });\r\n };\r\n const canBeDeleted =\r\n (comment.canDeleteComment && !comment.children.length) ||\r\n authenticatedUser.roleId === ROLES.Administrators;\r\n\r\n return (\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n {validations && (\r\n \r\n {!validations.type\r\n ? t.errors.fileType\r\n : !validations.size\r\n ? t.errors.fileSize\r\n : null}\r\n \r\n )}\r\n \r\n \r\n {`${t.comments.uploadingFile} ${uploadProgress}%` ||\r\n (uploadProgress === 100 &&\r\n `${t.comments.fileUploaded} ${uploadProgress}%`)}\r\n
\r\n \r\n
\r\n )}\r\n >\r\n - {children}
\r\n \r\n
\r\n \r\n {\" \"}\r\n
\r\n {comment.fileName && (\r\n \r\n {comment.userName}\r\n {isChild && (\r\n {parent.userName}\r\n )}\r\n {` - ${moment(comment.createdOnDate)\r\n .locale(t.getLanguage())\r\n .fromNow()}`}\r\n {comment.canEditComment && (\r\n <>\r\n – \r\n onEdit(e, comment.id)}\r\n >\r\n {t.comments.edit}\r\n \r\n \r\n )}\r\n {canBeDeleted && (\r\n <>\r\n – \r\n \r\n {t.comments.delete}\r\n \r\n \r\n )}\r\n {comment.modifiedOnDate && (\r\n - (edited)\r\n )}\r\n
\r\n \r\n Attachment: \r\n \r\n {comment.fileName}\r\n \r\n
\r\n )}\r\n \r\n {comment.level < 5 && (\r\n \r\n {t.comments.reply}\r\n \r\n )}\r\n
\r\n {toggleReply ? (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DeleteModal;\r\n","import React, { useEffect, useState, useRef } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\n\r\nimport useTranslations from \"../hooks/useTranslations\";\r\n\r\nimport {\r\n getCommentsFromState,\r\n getFileUrl,\r\n getAuthenticatedUser,\r\n getUploadProgressPercentage\r\n} from \"./state/commentSelectors\";\r\nimport {\r\n getComments,\r\n deleteCommentAndUpdateState,\r\n createCommentAndUpdateState,\r\n updateCommentAndUpdateState,\r\n getFileLinkForDownload,\r\n sendEmailNotificationOnReply,\r\n resetCommentState\r\n} from \"./state/commentActions\";\r\n\r\nimport avatar from \"../assets/img/icons/avatar.png\";\r\nimport Post from \"./Post\";\r\nimport CommentInput from \"./components/CommentInput\";\r\nimport {\r\n validateFileType,\r\n validateFileSize\r\n} from \"./helpers/validateUploadedFile\";\r\nimport useTransformList from \"../hooks/useTransformList\";\r\nimport DeleteModal from \"./components/DeleteModal\";\r\n\r\nconst initialState = {\r\n id: null,\r\n text: \"\",\r\n fileName: \"\",\r\n file: null,\r\n uploadProgress: 0\r\n};\r\n\r\nconst List = ({ staticPageLanguageId = null, lectureLanguageId = null }) => {\r\n const dispatch = useDispatch();\r\n const t = useTranslations();\r\n let commentInputRef = useRef();\r\n let editorRef = useRef([]);\r\n let inputRef = useRef([]);\r\n const currentId = useRef();\r\n const idToDelete = useRef();\r\n const comments = useSelector(getCommentsFromState);\r\n const authenticatedUser = useSelector(getAuthenticatedUser);\r\n const selectedFile = useSelector(getFileUrl);\r\n const uploadProgress = useSelector(getUploadProgressPercentage);\r\n const [validations, setValidations] = useState({});\r\n\r\n const [toggleReply, setToggleReply] = useState({});\r\n const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);\r\n const [values, setValues] = useState({ 0: { ...initialState } });\r\n\r\n const [toggleEdit, setToggleEdit] = useState({});\r\n useEffect(() => {\r\n dispatch(\r\n getComments({\r\n data: { staticPageLanguageId, lectureLanguageId }\r\n })\r\n );\r\n }, [dispatch, staticPageLanguageId, lectureLanguageId]);\r\n\r\n useEffect(() => {\r\n if (selectedFile) {\r\n setTimeout(() => {\r\n window.location.href = selectedFile;\r\n }, 100);\r\n dispatch(resetCommentState());\r\n }\r\n }, [dispatch, selectedFile]);\r\n\r\n useEffect(() => {\r\n function handleClickOutside(event) {\r\n if (\r\n commentInputRef.current &&\r\n !commentInputRef.current.contains(event.target)\r\n ) {\r\n if (Object.keys(toggleEdit).length > 0) {\r\n setToggleEdit({});\r\n }\r\n }\r\n }\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, [commentInputRef, toggleEdit]);\r\n\r\n const { getNestedList } = useTransformList({ list: comments.list });\r\n\r\n const handleReplyClick = (e, id) => {\r\n e.preventDefault();\r\n setToggleReply(prevState => {\r\n return {\r\n ...prevState,\r\n [id]: !prevState[id]\r\n };\r\n });\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n [id]: initialState\r\n };\r\n });\r\n };\r\n\r\n const handleChange = (e, id) => {\r\n e.preventDefault();\r\n const { name, value, files } = e.target;\r\n if (name === \"file\") {\r\n let type = validateFileType(files[0]);\r\n let size = validateFileSize(files[0]);\r\n if (!type || !size) {\r\n setValidations(prevState => {\r\n return {\r\n ...prevState,\r\n [id || 0]: { type, size }\r\n };\r\n });\r\n e.target.value = null;\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n [id || 0]: {\r\n ...prevState[id || 0],\r\n file: \"\",\r\n fileName: \"\"\r\n }\r\n };\r\n });\r\n return;\r\n } else {\r\n setValidations({});\r\n }\r\n }\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n [id || 0]: {\r\n ...prevState[id || 0],\r\n [name]: name === \"file\" ? files[0] : value\r\n }\r\n };\r\n });\r\n };\r\n\r\n const handleEdit = (e, id) => {\r\n e.preventDefault();\r\n setToggleEdit(prevState => {\r\n return {\r\n ...prevState,\r\n [id]: !prevState[id]\r\n };\r\n });\r\n let comment = comments.list.find(x => x.id === id);\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n [id]: comment\r\n };\r\n });\r\n if (!toggleEdit[id] && validations[id]) {\r\n setValidations({});\r\n }\r\n };\r\n\r\n const closeModal = e => {\r\n e.preventDefault();\r\n setIsDeleteModalVisible(false);\r\n idToDelete.current = null;\r\n };\r\n const confirmDelete = e => {\r\n dispatch(\r\n deleteCommentAndUpdateState({\r\n id: idToDelete.current,\r\n data: { staticPageLanguageId, lectureLanguageId }\r\n })\r\n );\r\n\r\n closeModal(e);\r\n };\r\n\r\n const handleDelete = (e, id) => {\r\n e.preventDefault();\r\n idToDelete.current = id;\r\n setIsDeleteModalVisible(true);\r\n };\r\n\r\n const onRemoveFile = (e, id) => {\r\n e.preventDefault();\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n [id || 0]: {\r\n ...prevState[id || 0],\r\n file: \"\",\r\n fileName: \"\"\r\n }\r\n };\r\n });\r\n inputRef.current[`file-${id || 0}`].value = \"\";\r\n };\r\n\r\n const onFileDownload = (e, id) => {\r\n e.preventDefault();\r\n dispatch(getFileLinkForDownload(id));\r\n };\r\n\r\n const handlePostComment = parentOrSelf => {\r\n let commentText =\r\n editorRef.current[`editor-${parentOrSelf?.id || 0}`].value;\r\n\r\n if (!commentText) {\r\n return;\r\n }\r\n const formData = new FormData();\r\n\r\n let newComment = toggleReply[parentOrSelf.id] === true;\r\n // let editComment = toggleEdit[parentOrSelf.id] === true;\r\n\r\n formData.append(\"text\", commentText);\r\n if (newComment || parentOrSelf === 0) {\r\n const { fileName, uploadProgress, ...rest } = values[\r\n parentOrSelf?.id || 0\r\n ];\r\n let payload = {\r\n ...rest,\r\n parentCommentId: parentOrSelf?.id || null,\r\n level: parentOrSelf ? parentOrSelf.level + 1 : null,\r\n staticPageLanguageId,\r\n lectureLanguageId,\r\n userId: 4\r\n };\r\n Object.entries(payload).forEach(([key, value]) => {\r\n if (value !== null) {\r\n formData.append(key, value);\r\n }\r\n });\r\n dispatch(\r\n createCommentAndUpdateState({\r\n data: formData,\r\n pageData: { staticPageLanguageId, lectureLanguageId }\r\n })\r\n ).then(x => {\r\n if (parentOrSelf !== 0) {\r\n dispatch(\r\n sendEmailNotificationOnReply({\r\n data: {\r\n LanguageCode: t.getLanguage(),\r\n userName: parentOrSelf.userName,\r\n content:\r\n editorRef.current[`editor-${parentOrSelf?.id || 0}`].value,\r\n replyUrl: window.location.href\r\n }\r\n })\r\n );\r\n inputRef.current[`file-${parentOrSelf.id}`].value = \"\";\r\n editorRef.current[`editor-${parentOrSelf.id}`].value = \"\";\r\n\r\n setToggleReply(prevState => {\r\n return {\r\n ...prevState,\r\n [parentOrSelf.id]: !prevState[parentOrSelf.id]\r\n };\r\n });\r\n } else {\r\n inputRef.current[`file-${0}`].value = \"\";\r\n editorRef.current[`editor-${0}`].value = \"\";\r\n setValues(prevState => {\r\n return {\r\n ...prevState,\r\n 0: { ...initialState }\r\n };\r\n });\r\n }\r\n });\r\n } else {\r\n const { uploadProgress, parentCommentId, level, ...rest } = values[\r\n parentOrSelf?.id\r\n ];\r\n let payload = {\r\n ...rest,\r\n parentCommentId: parentCommentId,\r\n level: level,\r\n staticPageLanguageId,\r\n lectureLanguageId,\r\n userId: 1\r\n };\r\n Object.entries(payload).forEach(([key, value]) => {\r\n if (value !== null) {\r\n formData.append(key, value);\r\n }\r\n });\r\n formData.append(\"id\", values[parentOrSelf.id].id);\r\n dispatch(\r\n updateCommentAndUpdateState({\r\n data: formData,\r\n pageData: { staticPageLanguageId, lectureLanguageId }\r\n })\r\n ).then(x => {\r\n inputRef.current[`file-${parentOrSelf ? parentOrSelf.id : 0}`].value =\r\n \"\";\r\n editorRef.current[\r\n `editor-${parentOrSelf ? parentOrSelf.id : 0}`\r\n ].value = \"\";\r\n setToggleEdit(prevState => {\r\n return {\r\n ...prevState,\r\n [values[parentOrSelf.id || 0].id]: !prevState[\r\n values[parentOrSelf.id || 0].id\r\n ]\r\n };\r\n });\r\n });\r\n }\r\n currentId.current = parentOrSelf.id || 0;\r\n };\r\n const renderComments = posts => {\r\n return posts?.map((post, index) => {\r\n let parent = post.parentCommentId\r\n ? comments.list.find(x => x.id === post.parentCommentId)\r\n : null;\r\n return (\r\n \r\n \r\n Yes\r\n \r\n \r\n {null}\r\n \r\n
\r\n \r\n Warning
\r\nAre you sure that you want to delete your comment?
\r\n\r\n \r\n {comments.count || 0} {t.comments.comments}\r\n \r\n handlePostComment(0)}\r\n onRemove={onRemoveFile}\r\n validations={validations[0]}\r\n uploadProgress={uploadProgress}\r\n id={0}\r\n currentId={currentId}\r\n commentInputRef={commentInputRef}\r\n />\r\n {comments.list && comments.list.length ? (\r\n
\r\n {isDeleteModalVisible && (\r\n - {renderComments(getNestedList())}
\r\n {t.comments.noPosts}\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n {t.welcome}
\r\n{title}
\r\n{subtitle}
\r\n\r\n\r\n {isAuthenticated === false && (\r\n <>\r\n \r\n {t.login}\r\n \r\n\r\n \r\n {t.register}\r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{subtitle}
\r\n\r\n
\r\n {t.slogan}
\r\n\r\n \r\n
\r\n \r\n {username ? (\r\n <>\r\n {username}\r\n \r\n {t.logout}\r\n \r\n \r\n ) : (\r\n <>\r\n \r\n {t.login}\r\n \r\n\r\n \r\n {t.register}\r\n \r\n \r\n )}\r\n
\r\n\r\n \r\n \r\n {languages.map(lang => (\r\n \r\n \r\n \r\n ))}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{subtitle}
\r\n