diff --git a/packages/web/components/Conversations/PriorityConvoRow.tsx b/packages/web/components/Conversations/PriorityConvoRow.tsx new file mode 100644 index 0000000..4882d5a --- /dev/null +++ b/packages/web/components/Conversations/PriorityConvoRow.tsx @@ -0,0 +1,51 @@ +import { Avatar } from "antd"; +import { useRecoilValue } from "recoil"; +import { selectedPriorityConvoAtom } from "../../recoil/main"; +import Conversation from "../../../common/models/conversation"; +import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup"; +import moment from "moment"; + +export default function PriorityConvoRow(props: { + conversation: Conversation; + itemIndex: number; +}) { + // figure out if this is a selectedConvo + const selectedConvo = useRecoilValue(selectedPriorityConvoAtom); + + const isSelected = selectedConvo == props.conversation.id ? true : false; + + // who was the last sender based on the lastInteractionDate etc. + const myTurn = false; + + // todo: implement method in conversation + // const isOneonOne = + + return ( + + + + + + {props.conversation.name} + + {props.itemIndex} + + + + + {moment(props.conversation.lastActivityDate.toDate()).fromNow()} + + + + ); +} diff --git a/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx b/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx index 2bfa2d1..eda46ed 100644 --- a/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx +++ b/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx @@ -1,6 +1,8 @@ import { QueryRoutes } from "@nirvana/common/helpers/routes"; import { useRouter } from "next/router"; import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys"; +import { selectedPriorityConvoAtom } from "../../recoil/main"; +import { useSetRecoilState } from "recoil"; configure({ ignoreTags: [], @@ -9,9 +11,13 @@ configure({ export default function KeyboardShortcutHandler() { const router = useRouter(); + const setSelectedPriorityConvo = useSetRecoilState(selectedPriorityConvoAtom); + const handleEscape = () => { console.log("woah"); router.push({ query: { page: QueryRoutes.convos } }); + + setSelectedPriorityConvo(null); }; const keyMap: KeyMap = { diff --git a/packages/web/components/MainTabsOrPages/Priority.tsx b/packages/web/components/MainTabsOrPages/Priority.tsx index fff075b..8e1de0c 100644 --- a/packages/web/components/MainTabsOrPages/Priority.tsx +++ b/packages/web/components/MainTabsOrPages/Priority.tsx @@ -1,20 +1,111 @@ +import { Avatar, Tooltip, Badge } from "antd"; import React from "react"; -import { FaRocket } from "react-icons/fa"; +import { useRecoilValue, useSetRecoilState } from "recoil"; +import { + FaCircle, + FaMicrophone, + FaPlay, + FaRocket, + FaUser, +} from "react-icons/fa"; +import { + priorityConvosSelector, + selectedPriorityConvoAtom, +} from "../../recoil/main"; +import PriorityConvoRow from "../Conversations/PriorityConvoRow"; +import { GlobalHotKeys, HotKeys } from "react-hotkeys"; +import { useEffect, useState } from "react"; +import toast from "react-hot-toast"; + +const MAX_SHORTCUT_MAPPINGS_PRIORITY = 8; export default function Priority() { - return ( -
- + const priorityConvos = useRecoilValue(priorityConvosSelector); + const [mapShortcutsToConvoId, setmapShortcutsToConvoId] = useState< + Map + >(new Map()); - - - One place for your most important -

people and items .

- Keep this clean at all costs. - -
+ const setSelectedConversationId = useSetRecoilState( + selectedPriorityConvoAtom + ); + + // set keyboard shortcuts for 1->8, but only if this component is shown, and not in stuff like + // convo view + useEffect(() => { + // reset entire map of shortcuts now with new list of priority convos + + const newMap = new Map(); + + priorityConvos.map((convo, i) => { + if (i < MAX_SHORTCUT_MAPPINGS_PRIORITY) { + const shortcut = (i + 1).toString(); + newMap.set(shortcut, convo.id); + } + }); + setmapShortcutsToConvoId(newMap); + }, [priorityConvos]); + + const selectingPriorityConvoHandler = (event) => { + const key = event.key; + console.log(mapShortcutsToConvoId); + console.log(key); + + // select the convo based on the right convo + + if (!mapShortcutsToConvoId.has(key)) { + toast.error("Not a valid conversation selected"); + return; + } + + const selectedConvoId = mapShortcutsToConvoId.get(key); + + if (selectedConvoId) { + setSelectedConversationId(selectedConvoId); + } + }; + + const keyMap = { + SELECT_PRIORITY_CONVO: ["1", "2", "3", "4", "5", "6", "7", "8"], + }; + + const handlers = { + SELECT_PRIORITY_CONVO: selectingPriorityConvoHandler, + }; + + return ( + <> + {priorityConvos?.length > 0 ? ( + <> + + + {priorityConvos.map((convo, i) => ( + + ))} + + ) : ( +
+ + + + + One place for your +

important conversations . +

+ Keep this clean at all costs. + +
+ )} + ); } diff --git a/packages/web/components/MainTabsOrPages/Sidebar.tsx b/packages/web/components/MainTabsOrPages/Sidebar.tsx index 70f52b0..9cd498e 100644 --- a/packages/web/components/MainTabsOrPages/Sidebar.tsx +++ b/packages/web/components/MainTabsOrPages/Sidebar.tsx @@ -15,6 +15,7 @@ import { FaCircle, } from "react-icons/fa"; import { HiSpeakerphone } from "react-icons/hi"; +import Priority from "./Priority"; function Sidebar() { const router = useRouter(); @@ -167,169 +168,7 @@ function Sidebar() { {/* list of pinned convos */} - - - - - - - Josh - - engineer - - - - - - - - - - - - - - - - - - - Mark - - architect - - - - 2 - - - - - - - - - - - - - Sydney - - - designer - - - - - - 3 - - - - - - - - - - - - Jessica - - recruiter - - - - 4 - - - - - - - - - - - - - - - - - - - General - - - - 5 - - - - - - - K - } /> - } /> - } /> - } /> - - - - Engineering - - - - 5 - - + ); diff --git a/packages/web/components/UserDetails/MasterAvatarGroup.tsx b/packages/web/components/UserDetails/MasterAvatarGroup.tsx index 5281be2..131c914 100644 --- a/packages/web/components/UserDetails/MasterAvatarGroup.tsx +++ b/packages/web/components/UserDetails/MasterAvatarGroup.tsx @@ -5,7 +5,7 @@ import { allRelevantContactsAtom } from "../../recoil/main"; import { userService } from "@nirvana/common/services"; import { Avatar } from "antd"; -const AVATAR_SHAPE = "square"; +const AVATAR_SHAPE = "circle"; export default function MasterAvatarGroup(props: { listOfUsers: User[]; @@ -69,12 +69,10 @@ export default function MasterAvatarGroup(props: { maxCount={2} size="default" maxStyle={{ - color: "rgb(203 213 225)", + color: "rgb(148 163 184)", fontSize: "10px", backgroundColor: "rgb(248 250 252)", - borderRadius: 0, }} - className="bg-slate-50 text-slate-300" > {finalistUsers.map((oUser) => ( ({ @@ -152,6 +154,8 @@ export const priorityConvosSelector = selector({ return false; }); + // todo: sort by createdDate, not lastActivityDate + return priorityConvos; }, }); @@ -305,3 +309,15 @@ export const allRelevantContactsAtom = atom>({ // todo: useful selector where a component can pass in a list of users // and return their full information...either get from cache if there or fetch from database if not and update cache + +// RECORDING, SHORTCUTS, PLAYING, MIC, HEADPHONES, etc. +export const isRecording = atom({ + key: "haha", + default: false, +}); + +export const selectedPriorityConvoAtom = atom({ + // convoId + key: RecoilActions.SELECTED_CONVERSATION_ATOM, + default: null, +});