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.

1 files changed, 8 insertions, 7 deletions

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