fix: text formmating

src/app/(withLayout)/layout.tsx

@@ -61,7 +61,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className="w-1/5 hidden lg:block ">
         <div className="fixed w-1/5 right-0 z-10 overflow-y-auto ">
           <Card className="h-with-navbar overflow-y-auto px-4">
-            <UpcomingEvent />
+            {/*<UpcomingEvent />*/}
             <Recommendations people={recommendations} />
           </Card>
         </div>

src/components/Timeline/Recommendations.tsx

@@ -41,8 +41,8 @@ const UserCard = ({ user }: { user: User }) => {
 
 const Recommendations: React.FC<Props> = ({ people, userItemButtonStyle, containerStyle, itemStyle }) => {
   return (
-    <div className="py-4">
-      <p className="text-neutral-700 text-xs font-semibold py-4">Recommendations</p>
+    <div>
+      <p className="text-neutral-700 text-xs font-semibold pb-4">Recommendations</p>
       <div className="flex flex-col gap-6">
         {people.map((user) => (
           <UserCard user={user} key={`${user?.avatar}${user?.name}`} />

src/components/Timeline/UserListItem.tsx

@@ -47,7 +47,7 @@ const UserListItem: React.FC<FollowingItemProps> = ({
   }
 
   return (
-    <div className="flex items-center p-2 md:p-4 border-b border-border justify-between">
+    <div className="flex items-center px-2 py-4 md:p-4 border-b border-border justify-between ">
       <div onClick={() => handleProfileClicked(id)} className="flex gap-4 items-center cursor-pointer">
         <img src={imageUrl || avatar.src} alt={firstName} className="w-12 h-12 rounded-full flex-none" />
         <div className="">
@@ -64,9 +64,17 @@ const UserListItem: React.FC<FollowingItemProps> = ({
 
       <div className="p-2 bg-primary-50 rounded-md">
         {!isSelfProfile && (
-          <Button onClick={handleFollowClick} variant="shade" size="extra_small">
-            {userFollowingIDs?.includes(id) ? 'UnFollow' : 'Follow'}
-          </Button>
+          <>
+            {!userFollowingIDs?.includes(id) ? (
+              <Button onClick={handleFollowClick} variant="primary" size="extra_small">
+                Follow
+              </Button>
+            ) : (
+              <Button onClick={() => handleProfileClicked(id)} className="whitespace-nowrap" variant="shade" size="extra_small">
+                View Profile
+              </Button>
+            )}
+          </>
         )}
       </div>
     </div>

src/components/molecules/MobileLeftNavbar/index.tsx

@@ -8,7 +8,7 @@ interface Props {
 export default function MobileLeftNavbar({ isOpen, toggleLeftNavbar }: Props) {
   return (
     <div
-      className={`fixed top-[68px] left-0 z-50 h-full w-3/4 md:w-1/2 bg-white transition-transform duration-300 transform ${
+      className={`fixed top-[68px] left-0 z-50 h-full w-full md:w-1/2 bg-white transition-transform duration-300 transform ${
         isOpen ? 'translate-x-0' : '-translate-x-full'
       } lg:hidden`}
     >

src/components/molecules/Tabs/FindPeople.tsx

@@ -1,4 +1,5 @@
 import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton'
+import { Spinner } from '@/components/spinner/Spinner'
 import UserListItem from '@/components/Timeline/UserListItem'
 import { useUsersProfileForConnections } from '@/services/user'
 import { useUniStore } from '@/store/store'
@@ -47,6 +48,10 @@ export default function FindPeople() {
           <UserListItemSkeleton />
           <UserListItemSkeleton />
           <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
         </>
       )
     }
@@ -85,9 +90,15 @@ export default function FindPeople() {
           placeholder="Search People"
         />
       </div>
-      <div ref={ref} className="overflow-y-auto h-[85%]">
+      <div ref={ref} className="overflow-y-auto h-[85%] custom-scrollbar">
         {renderUserProfileList()}
       </div>
+      {isFetchingNextPage && (
+        <div className="text-center pt-2">
+          {' '}
+          <Spinner />
+        </div>
+      )}
     </>
   )
 }

src/components/molecules/Tabs/Followers.tsx

@@ -21,6 +21,11 @@ export default function Followers({ userFollowingIDs }: Props) {
           <UserListItemSkeleton />
           <UserListItemSkeleton />
           <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
         </>
       )
     }

src/components/molecules/Tabs/Following.tsx

@@ -21,6 +21,13 @@ export default function Following({ userFollowingIDs }: Props) {
           <UserListItemSkeleton />
           <UserListItemSkeleton />
           <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
         </>
       )
     }

src/components/organisms/userPostForm/index.tsx

@@ -1,8 +1,7 @@
 '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'
+import { EditorState, Modifier, convertToRaw } from 'draft-js'
 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'
@@ -18,6 +17,7 @@ import { RxCrossCircled } from 'react-icons/rx'
 import { useCreateUserPost } from '@/services/community-timeline'
 import { useCreateGroupPost } from '@/services/community-university'
 import { replaceImage } from '@/services/uploadImage'
+import { Spinner } from '@/components/spinner/Spinner'
 
 type Props = {
   communityID?: string
@@ -30,8 +30,9 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const valueRef = useRef<string | null>(null)
   const [images, setImages] = useState<File[]>([])
-  const { mutate: CreateGroupPost, isPending } = useCreateGroupPost()
+  const { mutate: CreateGroupPost } = useCreateGroupPost()
   const { mutate: CreateTimelinePost } = useCreateUserPost()
+  const [isPostCreating, setIsPostCreating] = useState(false)
 
   const [postAccessType, setPostAccessType] = useState<CommunityPostType | UserPostType>(UserPostType.PUBLIC)
 
@@ -49,22 +50,15 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
 
   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
+    const contentState = editorState.getCurrentContent()
+    const selectionState = editorState.getSelection()
+    const emojiText = `${emoji} `
 
-      // Move the cursor to the right of the inserted emoji
-      textareaRef.current.selectionStart = textareaRef.current.selectionEnd = cursorPosition + emoji.length
+    const newContentState = Modifier.insertText(contentState, selectionState, emojiText)
 
-      // Refocus the textarea after emoji insertion
-      textareaRef.current.focus()
-    }
+    const newEditorState = EditorState.push(editorState, newContentState, 'insert-characters')
+    setEditorState(newEditorState)
   }
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -88,6 +82,7 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
   }
 
   const handleGroupPost = async (inputValue: string) => {
+    setIsPostCreating(true)
     if (images.length) {
       const imagedata = await processImages(images)
       const data: PostInputData = {
@@ -124,30 +119,36 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
         CreateTimelinePost(data)
       }
     }
+    setIsPostCreating(false)
+    setEditorState(EditorState.createEmpty())
   }
 
   // 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')
+
+    if (!rawContent.blocks[0].text) {
+      return
+    }
+
     const draftHtml = draftToHtml(rawContent)
-    console.log(draftHtml, 'draftHtml')
+
     return handleGroupPost(draftHtml)
   }
+  const onEditorStateChange = (state: React.SetStateAction<EditorState>) => {
+    setEditorState(state)
+  }
 
   return (
     <div className="rounded-2xl bg-white shadow-card mt-4 p-4">
       <form onSubmit={handleSubmit}>
         <div className="mb-4">
           <Editor
             editorState={editorState}
-            onEditorStateChange={setEditorState}
+            onEditorStateChange={onEditorStateChange}
             wrapperClassName="wrapper-class"
             editorClassName="editor-class font-poppins max-h-40"
             toolbarClassName="toolbar-class"
@@ -173,7 +174,7 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
               <PopoverTrigger>
                 <HiOutlineEmojiHappy size={24} className="text-neutral-400" />
               </PopoverTrigger>
-              <PopoverContent className="w-auto p-0 border-none shadow-lg shadow-gray-light">
+              <PopoverContent className="w-auto p-0 border-none shadow-lg shadow-gray-light z-10">
                 <div>
                   <EmojiPicker onEmojiClick={handleEmojiClick} />
                 </div>
@@ -214,8 +215,8 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
             </div>
           </div>
           <div>
-            <button onClick={handleSubmit} className="text-xs bg-primary-500 text-white rounded-lg px-4 py-1">
-              Post
+            <button disabled={isPostCreating} onClick={handleSubmit} className="text-xs bg-primary-500 text-white rounded-lg px-4 py-1">
+              {isPostCreating ? <Spinner /> : 'Post'}
             </button>
           </div>
         </div>

src/services/community-timeline.ts

@@ -3,6 +3,7 @@ import { client } from './api-Client'
 import axios from 'axios'
 import useCookie from '@/hooks/useCookie'
 import { AxiosErrorType, PostCommentData, PostType, UserPostData } from '@/types/constants'
+import { showCustomDangerToast, showCustomSuccessToast } from '@/components/atoms/CustomToasts/CustomToasts'
 
 export async function DeleteUserPost(postId: string, token: string) {
   const response = await client(`/userpost/${postId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } })
@@ -228,9 +229,11 @@ export const useCreateUserPost = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['userPosts'] })
       queryClient.invalidateQueries({ queryKey: ['timelinePosts'] })
+      showCustomSuccessToast('Post created successfully')
     },
     onError: (res: AxiosErrorType) => {
       console.log(res.response?.data.message, 'res')
+      showCustomDangerToast(res.response?.data?.message as string)
     },
   })
 }

src/services/community-university.ts

@@ -320,9 +320,11 @@ export const useCreateGroupPost = () => {
 
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['communityGroupsPost'] })
+      showCustomSuccessToast('Post created successfully')
     },
     onError: (res: any) => {
       console.log(res.response.data.message, 'res')
+      showCustomDangerToast(res.response?.data?.message as string)
     },
   })
 }