From 629c77c110042d5160f5218bee54f76b81c4dad2 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.lan>
Date: Tue, 20 Apr 2021 03:37:05 -0400
Subject: Multiple state changes and efficiency fixes.

---
 react-frontend/src/components/Hub.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

(limited to 'react-frontend/src/components/Hub.js')

diff --git a/react-frontend/src/components/Hub.js b/react-frontend/src/components/Hub.js
index 8a3ac1c..94830fa 100644
--- a/react-frontend/src/components/Hub.js
+++ b/react-frontend/src/components/Hub.js
@@ -10,12 +10,24 @@ import '../css/UserCheckin.css';
  * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
  */
 function Hub(props) {
-    // State - toggled
+    const [isHover, setIsHover] = useState(false);
+
+    const formatName = name => {
+        if (name.length > 12) {
+            return props.name.substring(0, 15) + '...';
+        }
+        return props.name;
+    }
 
     return (
-        <li className='Checkin'>
+        <li 
+        className='Checkin'
+        onMouseOver = {() => setIsHover(true)}
+        onMouseLeave = {() => setIsHover(false)}>
             <div className="Img-flex">
-                <span className="Clickable-name" onClick= {() => console.log(props.id)}>{props.name}</span>
+                <span 
+                className="Clickable-name" 
+                onClick = {() => console.log(props.id)}>{isHover ? props.name : formatName(props.name)}</span>
                 <span>{props.value.toFixed(3)}</span>
             </div>
         </li>);
-- 
cgit v1.2.3-70-g09d2