112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import { Avatar, Tooltip, Badge } from "antd";
|
|
import React from "react";
|
|
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() {
|
|
const priorityConvos = useRecoilValue(priorityConvosSelector);
|
|
const [mapShortcutsToConvoId, setmapShortcutsToConvoId] = useState<
|
|
Map<string, string>
|
|
>(new Map<string, string>());
|
|
|
|
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<string, string>();
|
|
|
|
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 ? (
|
|
<>
|
|
<GlobalHotKeys
|
|
keyMap={keyMap}
|
|
handlers={handlers}
|
|
allowChanges={true}
|
|
/>
|
|
|
|
{priorityConvos.map((convo, i) => (
|
|
<PriorityConvoRow
|
|
key={convo.id}
|
|
conversation={convo}
|
|
itemIndex={i + 1}
|
|
/>
|
|
))}
|
|
</>
|
|
) : (
|
|
<div className="mx-auto my-auto flex flex-col">
|
|
<img
|
|
src="/illustrations/undraw_absorbed_in_xahs.svg"
|
|
className="h-[15rem] mx-auto my-auto"
|
|
/>
|
|
|
|
<span></span>
|
|
<span className="text-slate-400 text-center mt-5">
|
|
One place for your
|
|
<br></br> important conversations <FaRocket className="inline" />.
|
|
<br></br>
|
|
<span className="text-red-600">Keep this clean at all costs.</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|