Merge pull request #49 from Sicnecher/seangah8-branch

chat update v3
Sicnecher · Jan 22, 2025 · 754fbce · 754fbce
2 parents 1f642b9 + 9dabb4e
commit 754fbce
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 17 deletions.
diff --git a/src/cmps/BoardDetails.jsx b/src/cmps/BoardDetails.jsx
@@ -50,6 +50,10 @@ const BoardDetails = () => {
     boardService.saveTempChatInfo(cellId, width, newComment)
   }
 
+  function openChat(id){
+    boardService.openChat(id)
+  }
+
   // function that set groups with each task update
   const onTaskUpdate = async (changeInfo) =>
     await updateTask(currentBoard.id, changeInfo);
@@ -145,6 +149,7 @@ const BoardDetails = () => {
             boardId={boardId}
             users={users}
             chatTempInfoUpdate={chatTempInfoUpdate}
+            openChat={openChat}
           />
         ))}
         <button className="modal-save-btn" onClick={handleAddGroup}>

diff --git a/src/cmps/GroupPreview.jsx b/src/cmps/GroupPreview.jsx
@@ -33,6 +33,8 @@ export const GroupPreview = ({
   boardId,
   users,
   chatTempInfoUpdate,
+  openChat,
+
 }) => {
   const [expanded, setExpanded] = useState(true);
   const [groupTitle, setGroupTitle] = useState(group.title);
@@ -132,6 +134,7 @@ export const GroupPreview = ({
                       chat={task.chat} // temporary for demo data
                       users={users}
                       chatTempInfoUpdate={chatTempInfoUpdate}
+                      openChat={openChat}
                       checkedBoxes={checkedBoxes}
                       handleCheckBoxClick={handleCheckBoxClick}
                     />
@@ -176,6 +179,7 @@ const DynamicCmp = ({
   loggedinUser,
   users,
   chatTempInfoUpdate,
+  openChat,
   checkedBoxes,
   handleCheckBoxClick
 }) => {
@@ -206,6 +210,7 @@ const DynamicCmp = ({
           text={info}
           onTaskUpdate={onTaskUpdate}
           chatTempInfoUpdate={chatTempInfoUpdate}
+          openChat={openChat}
           checkedBoxes={checkedBoxes}
           handleCheckBoxClick={handleCheckBoxClick}
         />

diff --git a/src/cmps/dynamicCmps/TaskTitle.jsx b/src/cmps/dynamicCmps/TaskTitle.jsx
@@ -16,6 +16,7 @@ export function TaskTitle({ cellId,
   text,
   onTaskUpdate,
   chatTempInfoUpdate,
+  openChat,
   checkedBoxes,
   handleCheckBoxClick
 }) {
@@ -31,12 +32,12 @@ export function TaskTitle({ cellId,
   const modalRef = useRef(null)
   const ChatButtonRef = useRef(null)
 
-  let chatInfo = boardService.getChatTempInfo()
-
+  const chatPrevInfo = boardService.getChatTempInfo(cellId)
+  const isChatWasOpen = boardService.getOpenChat()
 
   useEffect(()=>{
     // when user refresh the page while modal was open
-    if(!modal && chatInfo && chatInfo.id === cellId){
+    if(!modal && isChatWasOpen === cellId){
       modalToggle()
     }
   },[])
@@ -182,7 +183,8 @@ export function TaskTitle({ cellId,
             modalToggle={modalToggle}
             chatTempInfoUpdate={chatTempInfoUpdate}
             cellId={cellId}
-            chatInfo={chatInfo} />
+            chatPrevInfo={chatPrevInfo} 
+            openChat={openChat}/>
         </div>
       }
 

diff --git a/src/cmps/dynamicCmps/modals/ChatModal.jsx b/src/cmps/dynamicCmps/modals/ChatModal.jsx
@@ -14,23 +14,32 @@ export function ChatModal({
     modalToggle,
     chatTempInfoUpdate,
     cellId,
-    chatInfo}) 
+    chatPrevInfo,
+    openChat}) 
 
     {
 
     const [onEditMode, setOnEditMode] = useState(false)
     const [textToEdit, setTextToEdit] = useState(text)
 
+    // chatInfo = boardService.getChatTempInfo(cellId)
+
     const [newComment, setNewComment] = useState(
-        (chatInfo?.newComment?.id === cellId) ? chatInfo.newComment.comment : '')
+        chatPrevInfo?.comment ? chatPrevInfo.comment : '')
+
     const [newReplies, setNewReplies] = useState(
         chat.map(comment => ({ id: comment.sentAt, text: "" })))
 
-    const [width, setWidth] = useState(chatInfo ? chatInfo.width : 700)
+    const [width, setWidth] = useState(chatPrevInfo?.width ? chatPrevInfo.width : 700)
     const [isDragging, setIsDragging] = useState(false)
 
     useEffect(()=>{
-        chatTempInfoUpdate(cellId, width, {id: cellId ,comment: newComment})
+        chatTempInfoUpdate(cellId, width, newComment)
+        openChat(cellId)
+    },[])
+
+    useEffect(()=>{
+        chatTempInfoUpdate(cellId, width, newComment)
     },[newComment])
 
     useEffect(() => {
@@ -133,11 +142,11 @@ export function ChatModal({
 
       const handleMouseUp = () => {
         setIsDragging(false)
-        chatTempInfoUpdate(cellId, width, {id: cellId ,comment: newComment})
+        chatTempInfoUpdate(cellId, width, newComment)
       }
 
       function closeChat(){
-        chatTempInfoUpdate(null, width, {id: cellId ,comment: newComment})
+        openChat(null)
         modalToggle()
       }
 

diff --git a/src/services/board.service.js b/src/services/board.service.js
@@ -29,6 +29,8 @@ export const boardService = {
   saveTempChatInfo,
   getChatTempInfo,
   getDefaultFilter,
+  openChat,
+  getOpenChat,
 }
 
 async function addBoard() {
@@ -365,14 +367,61 @@ async function makeFirstBoard() {
     console.log('First board created successfully')
   }
 }
-
+// newComments = [width: xxx, open: xxx, comments: [{id: xxx, comment: xxx}, ...]]
 function saveTempChatInfo(id, width, newComment){
-  sessionStorage.setItem(CHAT_KEY, JSON.stringify({id, width, newComment}))
+  const newCommentsStr = sessionStorage.getItem(CHAT_KEY)
+
+  // in case no newComments exists
+  if(!newCommentsStr) return sessionStorage.setItem(
+    CHAT_KEY, JSON.stringify({width, open: id, comments: [{id, comment: newComment}]}))
+
+  const newComments = JSON.parse(newCommentsStr)
+  newComments.width = width
+  const commentIndex = newComments.comments.findIndex(comment=> comment.id === id)
+
+  // if comment already in commends array
+  if(commentIndex !== -1)
+    newComments.comments[commentIndex].comment = newComment
+  // if not
+  else newComments.comments.push({id, comment: newComment})
+
+  sessionStorage.setItem(CHAT_KEY, JSON.stringify(newComments))
+}
+
+function getChatTempInfo(id) {
+  const newCommentsStr = sessionStorage.getItem(CHAT_KEY)
+  // in case no newComments exists
+  if(!newCommentsStr) return null
+
+  else{
+    const newComments = JSON.parse(newCommentsStr)
+    const commentIndex = newComments.comments.findIndex(comment=> comment.id === id)
+
+    // in case comment exists
+    if(commentIndex !== -1) 
+      return {id, width: newComments.width, 
+        comment: newComments.comments[commentIndex].comment}
+    // in case it's not
+    else return null
+  }
 }
 
-function getChatTempInfo() {
-  const chatInfo = sessionStorage.getItem(CHAT_KEY)
-  return chatInfo ? JSON.parse(chatInfo) : null
+function openChat(id){
+  const newCommentsStr = sessionStorage.getItem(CHAT_KEY)
+  if(newCommentsStr){
+    const newComments = JSON.parse(newCommentsStr)
+    newComments.open = id
+    sessionStorage.setItem(CHAT_KEY, JSON.stringify(newComments))
+  }
+}
+
+function getOpenChat(){
+  const newCommentsStr = sessionStorage.getItem(CHAT_KEY)
+  if(newCommentsStr){
+    const newComments = JSON.parse(newCommentsStr)
+    return newComments.open
+  }
+  else return null
 }
 
 

diff --git a/src/styles/dynamicCmps/modals/_ChatModal.scss b/src/styles/dynamicCmps/modals/_ChatModal.scss
@@ -1,11 +1,11 @@
 .chat-modal {
   z-index: 1000; // this z-index bs has to be solved..
   position: fixed; // unfortunately since absolute sticks with group-list element
-  top: 46px; // probably will change later
+  top: 44px; // probably will change later
   right: 0px;
   height: 100vh;
   background-color: white;
-  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
 
 
   .expand-line{