From c4f075343f557f278b1bacb4b92891e646f8fb2a Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.lan>
Date: Tue, 20 Apr 2021 07:55:53 -0400
Subject: Finished up the front end functionality. Some issues with the backend
 (small NaN issues), and some elements need a little more love (styling)
 before demo.

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