From ba42198304c6faa7f32c31921ceff6f85af53483 Mon Sep 17 00:00:00 2001
From: bacpactech <bacpactech@gmail.com>
Date: Tue, 24 Dec 2024 20:57:34 +0530
Subject: [PATCH] fix: text formmating

---
 src/app/(withLayout)/layout.tsx               |  2 +-
 src/app/[id]/page.tsx                         | 51 ------------------
 src/components/Timeline/Recommendations.tsx   |  4 +-
 src/components/Timeline/UserListItem.tsx      | 16 ++++--
 .../molecules/MobileLeftNavbar/index.tsx      |  2 +-
 src/components/molecules/Tabs/FindPeople.tsx  | 13 ++++-
 src/components/molecules/Tabs/Followers.tsx   |  5 ++
 src/components/molecules/Tabs/Following.tsx   |  7 +++
 .../organisms/userPostForm/index.tsx          | 53 ++++++++++---------
 src/services/community-timeline.ts            |  3 ++
 src/services/community-university.ts          |  2 +
 11 files changed, 72 insertions(+), 86 deletions(-)
 delete mode 100644 src/app/[id]/page.tsx

diff --git a/src/app/(withLayout)/layout.tsx b/src/app/(withLayout)/layout.tsx
index 46a5af4..09ad1db 100644
--- a/src/app/(withLayout)/layout.tsx
+++ b/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>
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
deleted file mode 100644
index 45f7cc0..0000000
--- a/src/app/[id]/page.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-import Footer from '@/components/Footer/Footer'
-import Modal from '@/components/Timeline/Modal'
-import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
-import ProfileCard from '@/components/Timeline/ProfileCard'
-import CommunityProfileContainer from '@/components/communityProfile/CommunityProfileContainer'
-import { ModalContentType } from '@/types/global'
-import React, { useState } from 'react'
-import { useUniStore } from '@/store/store'
-import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
-import { userProfileType } from '@/store/userProfileSlice/userProfileType'
-import { userType } from '@/store/userSlice/userType'
-
-const Profile = () => {
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [modalContentType, setModalContentType] = useState<ModalContentType>()
-  const { userData, userProfileData } = useUniStore()
-
-  const modalContent = (modalContentType: string) => {
-    switch (modalContentType) {
-      case 'EditProfileModal':
-        return <EditProfileModal />
-      case 'ConnectionsModal':
-        return <ConnectionsModal />
-      default:
-        return null
-    }
-  }
-  return (
-    <>
-      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
-        {modalContentType && modalContent(modalContentType)}
-      </Modal>
-      <div className="flex justify-center w-full gap-6 mt-20 max-md:flex-col max-md:items-center pb-10  ">
-        <ProfileCard
-          userProfileData={userProfileData as userProfileType}
-          userData={userData as userType}
-          setModalContentType={setModalContentType}
-          setIsModalOpen={setIsModalOpen}
-          isUserProfile={true}
-          following={userProfileData?.following?.length || 0}
-          followers={userProfileData?.followers?.length || 0}
-        />
-        <CommunityProfileContainer />
-      </div>
-      <Footer />
-    </>
-  )
-}
-
-export default Profile
diff --git a/src/components/Timeline/Recommendations.tsx b/src/components/Timeline/Recommendations.tsx
index 4c51800..5570550 100644
--- a/src/components/Timeline/Recommendations.tsx
+++ b/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}`} />
diff --git a/src/components/Timeline/UserListItem.tsx b/src/components/Timeline/UserListItem.tsx
index fa0552d..0c9f0e7 100644
--- a/src/components/Timeline/UserListItem.tsx
+++ b/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>
diff --git a/src/components/molecules/MobileLeftNavbar/index.tsx b/src/components/molecules/MobileLeftNavbar/index.tsx
index efb4781..a9adf6a 100644
--- a/src/components/molecules/MobileLeftNavbar/index.tsx
+++ b/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`}
     >
diff --git a/src/components/molecules/Tabs/FindPeople.tsx b/src/components/molecules/Tabs/FindPeople.tsx
index 2c81313..84dc79a 100644
--- a/src/components/molecules/Tabs/FindPeople.tsx
+++ b/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>
+      )}
     </>
   )
 }
diff --git a/src/components/molecules/Tabs/Followers.tsx b/src/components/molecules/Tabs/Followers.tsx
index 3b57da3..9d7fa5c 100644
--- a/src/components/molecules/Tabs/Followers.tsx
+++ b/src/components/molecules/Tabs/Followers.tsx
@@ -21,6 +21,11 @@ export default function Followers({ userFollowingIDs }: Props) {
           <UserListItemSkeleton />
           <UserListItemSkeleton />
           <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
+          <UserListItemSkeleton />
         </>
       )
     }
diff --git a/src/components/molecules/Tabs/Following.tsx b/src/components/molecules/Tabs/Following.tsx
index 8cd44fb..05d269b 100644
--- a/src/components/molecules/Tabs/Following.tsx
+++ b/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 />
         </>
       )
     }
diff --git a/src/components/organisms/userPostForm/index.tsx b/src/components/organisms/userPostForm/index.tsx
index 49e479c..5d02ad4 100644
--- a/src/components/organisms/userPostForm/index.tsx
+++ b/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,22 +119,28 @@ 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">
@@ -147,7 +148,7 @@ const UserPostForm = ({ communityID, communityGroupID, type }: Props) => {
         <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>
diff --git a/src/services/community-timeline.ts b/src/services/community-timeline.ts
index d6bf756..1fed8e4 100644
--- a/src/services/community-timeline.ts
+++ b/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)
     },
   })
 }
diff --git a/src/services/community-university.ts b/src/services/community-university.ts
index 94e2efe..374b1b7 100644
--- a/src/services/community-university.ts
+++ b/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)
     },
   })
 }