use component hooks

webclient/src/components/UserDisplay/useUserDisplay.ts

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+import { useWebClient } from '@app/hooks';
+import { ServerSelectors, useAppSelector } from '@app/store';
+
+export interface UserDisplay {
+  position: { x: number; y: number } | null;
+  isABuddy: boolean;
+  isIgnored: boolean;
+  handleClick: (event: React.MouseEvent) => void;
+  handleClose: () => void;
+  onAddBuddy: () => void;
+  onRemoveBuddy: () => void;
+  onAddIgnore: () => void;
+  onRemoveIgnore: () => void;
+}
+
+export function useUserDisplay(userName: string): UserDisplay {
+  const buddyList = useAppSelector((state) => ServerSelectors.getBuddyList(state));
+  const ignoreList = useAppSelector((state) => ServerSelectors.getIgnoreList(state));
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(null);
+  const webClient = useWebClient();
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setPosition({ x: event.clientX + 2, y: event.clientY + 4 });
+  };
+
+  const handleClose = () => setPosition(null);
+
+  const isABuddy = Boolean(buddyList[userName]);
+  const isIgnored = Boolean(ignoreList[userName]);
+
+  const onAddBuddy = () => {
+    webClient.request.session.addToBuddyList(userName);
+    handleClose();
+  };
+  const onRemoveBuddy = () => {
+    webClient.request.session.removeFromBuddyList(userName);
+    handleClose();
+  };
+  const onAddIgnore = () => {
+    webClient.request.session.addToIgnoreList(userName);
+    handleClose();
+  };
+  const onRemoveIgnore = () => {
+    webClient.request.session.removeFromIgnoreList(userName);
+    handleClose();
+  };
+
+  return {
+    position,
+    isABuddy,
+    isIgnored,
+    handleClick,
+    handleClose,
+    onAddBuddy,
+    onRemoveBuddy,
+    onAddIgnore,
+    onRemoveIgnore,
+  };
+}