PR2: Added search UI

src/Components/ShortcutKeyModal/SearchModal.css

@@ -0,0 +1,47 @@
+.search-modal {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    /* semi-transparent dark overlay */
+    backdrop-filter: blur(4px);
+    /* blurred background */
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 33vh;
+    z-index: 9999;
+}
+
+.search-modal .input-wrapper {
+    padding: 8px;
+    background: white;
+    border-radius: 8px;
+    /* height: auto; */
+}
+
+.search-modal input {
+    border: 1.5px solid darkgray;
+    width: 35rem;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    height: 2.25rem;
+    font-size: 1rem;
+}
+
+/* .suggestion-item:hover, */
+.search-modal .active {
+    background: #3B82F6;
+    color: white;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+}
+
+.search-modal .suggestion-list {
+    background: lightcyan;
+}
+
+.search-modal .hidden-tab {
+    font-size: small;
+    color: white;
+}

src/Components/ShortcutKeyModal/SearchModal.js

@@ -0,0 +1,142 @@
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import './SearchModal.css';
+import { officerOrAdminRoutes, signedOutRoutes, memberRoutes, notAuthenticatedRoutes } from '../../Routes';
+import { membershipState } from '../../Enums';
+import { useUser } from '../context/UserContext';
+
+export default function SearchModal({ appProps }) {
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const [keyword, setKeyword] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const [selectItem, setSelectItem] = useState(0);
+  const { user } = useUser();
+  const [errorMsg, setErrorMsg] = useState('');
+
+  const routes = useMemo(() => {
+    if (user.accessLevel === membershipState.MEMBER) return [...memberRoutes, ...signedOutRoutes];
+    if (user.accessLevel >= membershipState.OFFICER) return [...officerOrAdminRoutes, ...signedOutRoutes];
+    if (!appProps.authenticated) return [...notAuthenticatedRoutes, ...signedOutRoutes];
+    return [...signedOutRoutes];
+  }, [user.accessLevel]);
+
+  function handleChanges(e) {
+    setKeyword(e.target.value);
+    setSelectItem(0);
+  }
+
+  function getSuggestions() {
+    if (suggestions.length === 0) return <></>;
+
+    return (
+      <ul className='suggestion-list'>
+        {suggestions.map((r, index) => (
+          <li
+            key={index}
+            className={`suggestion-item ${index === selectItem ? 'active' : ''}`}
+            onMouseEnter={() => setSelectItem(index)}
+            onClick={() => {
+              window.location.href = r.path;
+              setOpen(false);
+            }}
+          >
+            <span style={{ marginRight: '0.5rem' }}>
+              {r.type === 'user' ? '👤' : '📄'}
+            </span>
+            {r.pageName}
+            <div className='hidden-tab'>{selectItem === index && `${window.location.origin}${r.path}`}</div>
+          </li>
+        )).slice(0, 5)}
+      </ul>
+    );
+  }
+
+  /**
+   * An effect that instantly shows all hardcoded routes.
+   * @dependencies keyword, routes, open
+   */
+  useEffect(() => {
+    if (!open) return;
+
+    // Return if keyword is blank
+    if (!keyword) {
+      setSuggestions([]);
+      return;
+    }
+
+    // Instantly display for the hardcoded page recommendations
+    const routeMatches = routes.filter((r) =>
+      r.pageName?.toLowerCase().includes(keyword.toLowerCase())
+    );
+    setSuggestions(routeMatches);
+  }, [open, keyword, routes]);
+
+  /**
+   * Executes a search when Enter is pressed
+   * @dependencies selectItem, suggestions
+   */
+  const handleSearch = useCallback(() => {
+    if (suggestions.length === 0) return; // Check if suggestions is empty
+
+    const target = suggestions[selectItem];
+    if (target && target.path) {
+      window.location.href = target.path;
+      setOpen(false);
+    }
+  }, [suggestions, selectItem]);
+
+  /**
+   * Listens for keyboard input and executes shortcut actions.
+   * @dependencies open, suggestions, selectItem
+   */
+  useEffect(() => {
+    const listener = (e) => {
+      if ((e.ctrlKey || e.metaKey) && (e.key.toLowerCase() === 'k')) {
+        e.preventDefault();
+        setOpen(prev => !prev);
+      } else if (e.key === 'Escape') {
+        setOpen(false);
+      } else if (e.key === 'Enter' && open) {
+        e.preventDefault();
+        handleSearch();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (suggestions.length > 0) {
+          const minLength = Math.min(suggestions.length - 1, 4);
+          setSelectItem(prev => Math.min(prev + 1, minLength));
+        }
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectItem(prev => Math.max(prev - 1, 0));
+      }
+    };
+
+    window.addEventListener('keydown', listener);
+    return () => window.removeEventListener('keydown', listener);
+  }, [open, suggestions, selectItem]);
+
+  useEffect(() => {
+    if (open && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="search-modal">
+      <div className='input-wrapper'>
+        <input
+          ref={inputRef}
+          placeholder="Search here"
+          value={keyword}
+          onChange={handleChanges} />
+
+        {getSuggestions()}
+      </div>
+      <div>
+        {errorMsg && <p>{errorMsg}</p>}
+      </div>
+    </div>
+  );
+}

src/index.js

@@ -6,6 +6,7 @@ import './index.css';
 import Routing from './Routing';
 import { checkIfUserIsSignedIn } from './APIFunctions/Auth';
 import { UserContext } from './Components/context/UserContext';
+import SearchModal from './Components/ShortcutKeyModal/SearchModal';
 
 function App(props) {
   const [authenticated, setAuthenticated] = useState(false);
@@ -29,6 +30,7 @@ function App(props) {
     !isAuthenticating && (
       <UserContext.Provider value={{ user, setUser }}>
         <BrowserRouter>
+          <SearchModal appProps={{ authenticated }} />
           <Routing appProps={{ authenticated, setAuthenticated, user }} />
         </BrowserRouter>
       </UserContext.Provider>