+
)
diff --git a/src/assets/bold.svg b/src/assets/bold.svg
new file mode 100644
index 0000000..33c1626
--- /dev/null
+++ b/src/assets/bold.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/bulletList.svg b/src/assets/bulletList.svg
new file mode 100644
index 0000000..0028c51
--- /dev/null
+++ b/src/assets/bulletList.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/centerAlign.svg b/src/assets/centerAlign.svg
new file mode 100644
index 0000000..8491da6
--- /dev/null
+++ b/src/assets/centerAlign.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/code.svg b/src/assets/code.svg
new file mode 100644
index 0000000..f4b2cf2
--- /dev/null
+++ b/src/assets/code.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/italic.svg b/src/assets/italic.svg
new file mode 100644
index 0000000..bddb10e
--- /dev/null
+++ b/src/assets/italic.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/leftAlign.svg b/src/assets/leftAlign.svg
new file mode 100644
index 0000000..677be9b
--- /dev/null
+++ b/src/assets/leftAlign.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/numList.svg b/src/assets/numList.svg
new file mode 100644
index 0000000..fba8b95
--- /dev/null
+++ b/src/assets/numList.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/assets/rightAlign.svg b/src/assets/rightAlign.svg
new file mode 100644
index 0000000..dc19364
--- /dev/null
+++ b/src/assets/rightAlign.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/strikeThrough.svg b/src/assets/strikeThrough.svg
new file mode 100644
index 0000000..c0caa80
--- /dev/null
+++ b/src/assets/strikeThrough.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/molecules/PostCard/index.tsx b/src/components/molecules/PostCard/index.tsx
index 1e95f29..aa93c78 100644
--- a/src/components/molecules/PostCard/index.tsx
+++ b/src/components/molecules/PostCard/index.tsx
@@ -4,14 +4,13 @@ import avatar from '@assets/avatar.svg'
import Image from 'next/image'
import PostCartOption from '@/components/atoms/PostCardOption/PostCartOption'
import PostCardImageGrid from '@/components/atoms/PostCardImagesGrid'
-import { FiMessageCircle, FiRepeat, FiShare2, FiThumbsUp } from 'react-icons/fi'
+import { FiMessageCircle, FiShare2, FiThumbsUp } from 'react-icons/fi'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import PostCommentBox from '../PostCommentBox'
import { useUniStore } from '@/store/store'
import { useLikeUnilikeGroupPost } from '@/services/community-university'
import { useLikeUnlikeTimelinePost } from '@/services/community-timeline'
-import { FaUser, FaUsers } from 'react-icons/fa'
import { PostType } from '@/types/constants'
import {
FacebookIcon,
@@ -174,10 +173,12 @@ const PostCard = ({
+
diff --git a/src/components/organisms/UserPostContainer/index.tsx b/src/components/organisms/UserPostContainer/index.tsx
index 2011e35..3b0b26f 100644
--- a/src/components/organisms/UserPostContainer/index.tsx
+++ b/src/components/organisms/UserPostContainer/index.tsx
@@ -1,9 +1,8 @@
'use client'
-import React, { ChangeEvent, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
import { GoFileMedia } from 'react-icons/go'
import { HiOutlineEmojiHappy } from 'react-icons/hi'
import { MdOutlineGifBox } from 'react-icons/md'
-import { VscSettings } from 'react-icons/vsc'
import avatar from '@assets/avatar.svg'
import Image from 'next/image'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
@@ -15,6 +14,7 @@ import { replaceImage } from '@/services/uploadImage'
import { useUniStore } from '@/store/store'
import { Skeleton } from '@/components/ui/Skeleton'
import SelectDropdown from '@/components/atoms/SelectDropdown/SelectDropdown'
+import { RxCrossCircled } from 'react-icons/rx'
type props = {
communityID?: string
@@ -22,7 +22,7 @@ type props = {
type: PostInputType.Community | PostInputType.Timeline
}
-function UserPostContainer({ communityID, communityGroupID, type }: props) {
+export const UserPostContainer = ({ communityID, communityGroupID, type }: props) => {
const textareaRef = useRef(null)
const valueRef = useRef(null)
const [images, setImages] = useState([])
@@ -208,19 +208,17 @@ function UserPostContainer({ communityID, communityGroupID, type }: props) {
{/* Display selected images */}
- {images.map((image, index) => (
-
-
})
- {/* Remove image button */}
-
-
- ))}
+
+ {images.map((image, index) => (
+
+
+ {/* Remove image button */}
+
handleImageRemove(index)} className="absolute top-1 right-1 cursor-pointer text-sm">
+
+
+
+ ))}
+
)
}
diff --git a/src/components/organisms/userPostForm/index.css b/src/components/organisms/userPostForm/index.css
new file mode 100644
index 0000000..c225753
--- /dev/null
+++ b/src/components/organisms/userPostForm/index.css
@@ -0,0 +1,28 @@
+.rdw-editor-toolbar {
+ border: none;
+ padding: 0px 0px 0px -8px;
+}
+.rdw-option-wrapper {
+ border: none;
+}
+
+.rdw-option-active {
+ border: none;
+ background: #f3f2ff;
+ box-shadow: none;
+}
+
+.rdw-option-wrapper:hover {
+ box-shadow: none;
+ background: #f3f2ff;
+}
+
+.rdw-text-align-wrapper {
+ display: flex;
+}
+
+@media only screen and (max-width: 480px) {
+ .rdw-text-align-wrapper {
+ display: none;
+ }
+}
diff --git a/src/components/organisms/userPostForm/index.tsx b/src/components/organisms/userPostForm/index.tsx
new file mode 100644
index 0000000..49e479c
--- /dev/null
+++ b/src/components/organisms/userPostForm/index.tsx
@@ -0,0 +1,239 @@
+'use client'
+import dynamic from 'next/dynamic'
+import React, { useRef, useState } from 'react'
+import { EditorState, convertToRaw } from 'draft-js'
+//import { Editor } from 'react-draft-wysiwyg'
+const Editor = dynamic(() => import('react-draft-wysiwyg').then((mod) => mod.Editor), { ssr: false })
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+import './index.css'
+import draftToHtml from 'draftjs-to-html'
+import { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover'
+import { HiOutlineEmojiHappy } from 'react-icons/hi'
+import EmojiPicker, { EmojiClickData } from 'emoji-picker-react'
+import { MdOutlineGifBox } from 'react-icons/md'
+import { GoFileMedia } from 'react-icons/go'
+import SelectDropdown from '@/components/atoms/SelectDropdown/SelectDropdown'
+import { CommunityPostData, CommunityPostType, PostInputData, PostInputType, UserPostType } from '@/types/constants'
+import { RxCrossCircled } from 'react-icons/rx'
+import { useCreateUserPost } from '@/services/community-timeline'
+import { useCreateGroupPost } from '@/services/community-university'
+import { replaceImage } from '@/services/uploadImage'
+
+type Props = {
+ communityID?: string
+ communityGroupID?: string
+ type: PostInputType.Community | PostInputType.Timeline
+}
+
+const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
+ const [editorState, setEditorState] = useState(() => EditorState.createEmpty())
+ const textareaRef = useRef
(null)
+ const valueRef = useRef(null)
+ const [images, setImages] = useState([])
+ const { mutate: CreateGroupPost, isPending } = useCreateGroupPost()
+ const { mutate: CreateTimelinePost } = useCreateUserPost()
+
+ const [postAccessType, setPostAccessType] = useState(UserPostType.PUBLIC)
+
+ const userPostTypeKey = Object.values(UserPostType)
+ const communityPostTypeKey = Object.values(CommunityPostType)
+
+ const handleInput = () => {
+ const textarea = textareaRef.current
+ if (textarea) {
+ valueRef.current = textareaRef.current.value
+ textarea.style.height = 'auto'
+ textarea.style.height = `${textarea.scrollHeight}px`
+ }
+ }
+
+ const handleEmojiClick = (emojiData: EmojiClickData) => {
+ const emoji = emojiData.emoji
+ if (textareaRef.current) {
+ const cursorPosition = textareaRef.current.selectionStart
+ const text = textareaRef.current.value
+ const newText = text.slice(0, cursorPosition) + emoji + text.slice(cursorPosition)
+
+ // Update the textarea value
+ textareaRef.current.value = newText
+ valueRef.current = newText // Update ref value
+ handleInput() // Call input handler to update the ref value
+
+ // Move the cursor to the right of the inserted emoji
+ textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition + emoji.length
+
+ // Refocus the textarea after emoji insertion
+ textareaRef.current.focus()
+ }
+ }
+
+ const handleImageChange = (e: React.ChangeEvent) => {
+ const files = e.target.files
+ if (files) {
+ const fileArray = Array.from(files)
+ setImages((prevImages) => [...prevImages, ...fileArray]) // Store the actual files
+ }
+ }
+
+ const handleImageRemove = (index: number) => {
+ setImages((prevImages) => prevImages.filter((_, i) => i !== index))
+ }
+ const processImages = async (imagesData: File[]) => {
+ const promises = imagesData.map((image) => replaceImage(image, ''))
+ const results = await Promise.all(promises)
+ return results.map((result) => ({
+ imageUrl: result?.imageUrl || null,
+ publicId: result?.publicId || null,
+ }))
+ }
+
+ const handleGroupPost = async (inputValue: string) => {
+ if (images.length) {
+ const imagedata = await processImages(images)
+ const data: PostInputData = {
+ content: inputValue,
+ imageUrl: imagedata,
+ ...(type == PostInputType.Timeline ? { PostType: postAccessType } : { communityPostsType: postAccessType }),
+ }
+
+ //if type is community , add communityId field to data
+ if (type === PostInputType.Community) {
+ const communityData: CommunityPostData = {
+ ...data,
+ communityId: communityID,
+ ...(communityGroupID && communityGroupID?.length > 0 && { communiyGroupId: communityGroupID }),
+ }
+ CreateGroupPost(communityData)
+ } else if (type === PostInputType.Timeline) {
+ CreateTimelinePost(data)
+ }
+ } else {
+ const data: PostInputData = {
+ content: inputValue,
+ ...(type == PostInputType.Timeline ? { PostType: postAccessType } : { communityPostsType: postAccessType }),
+ }
+
+ if (type === PostInputType.Community) {
+ const communityData: CommunityPostData = {
+ ...data,
+ communityId: communityID,
+ ...(communityGroupID && communityGroupID?.length > 0 && { communiyGroupId: communityGroupID }),
+ }
+ CreateGroupPost(communityData)
+ } else if (type === PostInputType.Timeline) {
+ CreateTimelinePost(data)
+ }
+ }
+ }
+
+ // Handle form submission
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ // You can do something with the value here, like an API call
+ //if (!textareaRef.current?.value) {
+ // return alert('Please enter')
+ //}
+ const contentState = editorState.getCurrentContent()
+ const rawContent = convertToRaw(contentState)
+ console.log(rawContent, 'rawContent')
+ const draftHtml = draftToHtml(rawContent)
+ console.log(draftHtml, 'draftHtml')
+ return handleGroupPost(draftHtml)
+ }
+
+ return (
+
+ )
+}
+
+export default UserPostForm