Multiple state changes and efficiency fixes.

1 files changed, 15 insertions, 3 deletions

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>);