Group overlay review

Kiyozz · Mar 14, 2022 · d2ff6f8 · d2ff6f8
1 parent 3354c28
commit d2ff6f8
Showing 1 changed file with 13 additions and 19 deletions.
diff --git a/src/renderer/pages/groups/groups-list-item.tsx b/src/renderer/pages/groups/groups-list-item.tsx
@@ -21,21 +21,21 @@ type Props = {
 const GroupsListItem = ({ group, onDelete, onEdit }: Props) => {
   const { t } = useTranslation()
   const [isDisplayPreview, setDisplayPreview] = useState(false)
-  const [isEnter, setEnter] = useState(false)
+  const [isHoveringItem, setHoveringItem] = useState(false)
 
   const onMouseEnter = useCallback(() => {
-    setEnter(true)
+    setHoveringItem(true)
   }, [])
 
   const onMouseLeave = useCallback(() => {
-    setEnter(false)
+    setHoveringItem(false)
   }, [])
 
   useEffect(() => {
     let timerDisplay: NodeJS.Timeout
 
     if (!group.isEmpty) {
-      if (isEnter) {
+      if (isHoveringItem) {
         timerDisplay = setTimeout(() => {
           setDisplayPreview(true)
         }, 500)
@@ -51,32 +51,26 @@ const GroupsListItem = ({ group, onDelete, onEdit }: Props) => {
         clearTimeout(timerDisplay)
       }
     }
-  }, [isEnter, group.isEmpty])
+  }, [isHoveringItem, group.isEmpty])
 
   return (
     <div
       className="paper relative flex items-center"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      {/* Group review */}
+      {/* Group preview */}
       <Fade in={isDisplayPreview} timeout={200}>
         <div className="absolute top-0 left-0 right-16 z-10 rounded bg-light-300 px-4 py-2 dark:bg-black-400 dark:text-white">
-          <div className="mb-6 flex">
-            <h3 className="flex-grow text-center text-xl">
-              {t('page.groups.group', { name: group.name })}
-            </h3>
-          </div>
+          <h3 className="flex-grow text-center text-xl">
+            {t('page.groups.group', { name: group.name })}
+          </h3>
 
           {/* Group list in preview */}
-          <div className="flex flex-col text-sm">
-            {group.isEmpty ? (
-              <div>{t('page.groups.noScripts')}</div>
-            ) : (
-              group.scripts.map(script => {
-                return <div key={script.id}>{script.name}</div>
-              })
-            )}
+          <div className="mt-6 flex flex-col text-sm">
+            {group.scripts.map(script => {
+              return <div key={script.id}>{script.name}</div>
+            })}
           </div>
         </div>
       </Fade>