From 27961983ec49779537c37a24534a880812a92124 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhi.kr.2100@gmail.com>
Date: Sun, 19 May 2024 01:23:33 +0530
Subject: [PATCH] Extract anchor element and associated controls into a
 separate hook

Signed-off-by: Abhishek Kumar <abhi.kr.2100@gmail.com>
---
 webapp/src/PlayPage/Word.tsx | 39 ++++++++++++++++++++++--------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/webapp/src/PlayPage/Word.tsx b/webapp/src/PlayPage/Word.tsx
index c699cfb..24ed10c 100644
--- a/webapp/src/PlayPage/Word.tsx
+++ b/webapp/src/PlayPage/Word.tsx
@@ -15,25 +15,14 @@ import { updateWordEasinessFactor } from '../queries';
 
 export default function Word({ wordText, wordScore }: WordProps) {
   const { color, setEF } = useWordColor(wordScore);
-
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const open = Boolean(anchorEl);
+  const { anchorEl, isOpen, onOpen, onClose } = useAnchorEl();
 
   return (
     <>
       <Chip
         clickable
         component={Typography}
-        onClick={handleClick}
+        onClick={onOpen}
         color={color}
         size="small"
         label={wordText || wordScore.word!.wordText!}
@@ -42,9 +31,9 @@ export default function Word({ wordText, wordScore }: WordProps) {
         wordScore={wordScore}
         setEF={setEF}
         PopoverProps={{
-          open,
+          open: isOpen,
           anchorEl,
-          onClose: handleClose,
+          onClose,
           anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'left',
@@ -156,6 +145,26 @@ function useWordColor(wordScore: CorrectedWordScoreType) {
   };
 }
 
+function useAnchorEl() {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const isOpen = Boolean(anchorEl);
+
+  const onOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onClose = () => {
+    setAnchorEl(null);
+  };
+
+  return {
+    anchorEl,
+    isOpen,
+    onOpen,
+    onClose,
+  };
+}
+
 interface WordPopoverProps {
   wordScore: CorrectedWordScoreType;
   setEF: (ef: number) => void;