From 3cb074550037bbafed0898aaa38150bea1993d86 Mon Sep 17 00:00:00 2001 From: talksik Date: Tue, 18 Jan 2022 01:56:03 -0800 Subject: [PATCH] nice showing if incoming message from user or not --- components/Dashboard/TeamVoiceLine.tsx | 43 ++++++++++++++++++++++---- contexts/keyboardContext.tsx | 4 +-- 2 files changed, 39 insertions(+), 8 deletions(-) diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx index 70eb7f9..5769308 100644 --- a/components/Dashboard/TeamVoiceLine.tsx +++ b/components/Dashboard/TeamVoiceLine.tsx @@ -1,5 +1,11 @@ import { useRouter } from "next/router"; -import { FaPlus, FaExternalLinkAlt, FaLink, FaBackward } from "react-icons/fa"; +import { + FaPlus, + FaExternalLinkAlt, + FaLink, + FaBackward, + FaArrowCircleDown, +} from "react-icons/fa"; import { IoPulseOutline, IoRemoveOutline, IoTimer } from "react-icons/io5"; import { MdScreenShare } from "react-icons/md"; import { BsThreeDots } from "react-icons/bs"; @@ -43,7 +49,7 @@ export default function TeamVoiceLine() { } = useKeyboardContext(); const router = useRouter(); const { teamid } = router.query; - const { team, user, userTeamMember, teamMembers, teamUsers } = + const { userTeamMember, teamUsers, messagesByTeamMate } = useTeamDashboardContext(); // todo use a global is loading @@ -99,13 +105,26 @@ export default function TeamVoiceLine() { } return teamUsers.map((tmember, i) => { + var isMessageIncoming: boolean = false; + if (tmember.id in messagesByTeamMate) { + console.log(messagesByTeamMate[tmember.id][0]); + if (messagesByTeamMate[tmember.id][0].receiverUserId == currUser.uid) { + isMessageIncoming = true; + } + } + + var customSelectClasses: string = ""; + if (tmember.id == selectedTeammate) { + customSelectClasses = "bg-white scale-150 z-20"; + } else if (isMessageIncoming) { + customSelectClasses = "bg-orange-500 bg-opacity-20"; + } + return ( selectTeamMember(tmember.id)} key={i} - className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${ - tmember.id == selectedTeammate ? "bg-white scale-150 z-20" : "" - }`} + className={`rounded flex flex-row items-center py-2 px-2 justify-items-start ease-in-out duration-300 hover:cursor-pointer ${customSelectClasses}`} > @@ -126,10 +145,16 @@ export default function TeamVoiceLine() { {tmember.nickName} + + {isMessageIncoming ? ( + + ) : ( + "" + )} - {tmember.teamRole} + {tmember.teamRole}{" "} ) : ( @@ -139,6 +164,12 @@ export default function TeamVoiceLine() { {tmember.nickName} + {isMessageIncoming ? ( + + ) : ( + "" + )} + {/* keyboard shortcuts start from 1 */} {i + 1} diff --git a/contexts/keyboardContext.tsx b/contexts/keyboardContext.tsx index b625d68..1cd58a8 100644 --- a/contexts/keyboardContext.tsx +++ b/contexts/keyboardContext.tsx @@ -397,7 +397,6 @@ export default function KeyboardContextProvider({ children }) { handleResetView(); setCtrlDown(true); - toast("control down"); } else if (event.keyCode == KeyCode.Q && ctrlDown) { toast("navigating to create google meet"); @@ -432,7 +431,8 @@ export default function KeyboardContextProvider({ children }) { toast.error("Please enable permissions for clipboard"); }); } else { - toast("Invalid keyboard shortcut."); + // toast("Invalid keyboard shortcut."); + console.log("no shortcut logged"); } // todo play message if pressing space