Merge branch 'master' of github.com:cs0320-2021/term-project-cohwille-jmccaul3-mfoiani-rhunt2

# Conflicts:
#	react-frontend/src/components/Visualization.js

1 files changed, 15 insertions, 2 deletions

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