Recreated PR2: Added search UI (replaced PR #1716)

src/Components/ShortcutKeyModal/SearchModal.css

@@ -0,0 +1,65 @@
+.shortcut-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;
+}
+
+.shortcut-search-modal .input-wrapper {
+    padding: 8px;
+    background: white;
+    border-radius: 8px;
+    /* height: auto; */
+}
+
+.shortcut-search-modal input {
+    border: 1.5px solid darkgray;
+    width: 35rem;
+    border-radius: 0.25rem;
+    padding: 0.75rem;
+    height: 2.5rem;
+    font-size: 1.2rem;
+}
+
+.shortcut-search-modal .active {
+    background: #3B82F6;
+    color: white;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+}
+
+.shortcut-search-modal .suggestion-list {
+    background: #f1f5f9;
+    font-size: 1.2rem;
+}
+
+.shortcut-search-modal .suggestion-item {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.shortcut-search-modal .hidden-tab {
+    font-size: medium;
+    color: white;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    .shortcut-search-modal .active {
+        background: lightslategray;
+    }
+
+    .shortcut-search-modal .input-wrapper,
+    .shortcut-search-modal .suggestion-list {
+        background-color: #1e293b;
+    }
+}

src/Components/ShortcutKeyModal/SearchModal.js

@@ -0,0 +1,201 @@
+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 modalRef = useRef(null);
+  const [keyword, setKeyword] = useState('');
+  const [suggestions, setSuggestions] = useState([...signedOutRoutes]);
+  const [selectItem, setSelectItem] = useState(0);
+  const { user } = useUser();
+  const [errorMsg, setErrorMsg] = useState('');
+
+  /**
+   * Returns the appropriate routes array based on the user's access level.
+   * @dependencies user.accessLevel, appProps.authenticated
+   */
+  const routes = useMemo(() => {
+    if (user.accessLevel === membershipState.MEMBER)
+      return [
+        ...memberRoutes.filter(r => r.pageName !== 'Edit User Info'),
+        ...signedOutRoutes
+      ];
+    if (user.accessLevel >= membershipState.OFFICER)
+      return [
+        ...officerOrAdminRoutes.filter(r => r.pageName !== 'Edit User Info'),
+        ...signedOutRoutes
+      ];
+    if (!appProps.authenticated)
+      return [
+        ...notAuthenticatedRoutes,
+        ...signedOutRoutes
+      ];
+    return [...signedOutRoutes];
+  }, [user.accessLevel, appProps.authenticated]);
+
+  /**
+   * Helper function updates the keyword when the user types
+   * @param e - The input change event
+   */
+  const handleChanges = (e) => {
+    setKeyword(e.target.value);
+    setSelectItem(0);
+  };
+
+  /** This helper function clears search box and all suggestions */
+  const clearSearchModal = () => {
+    setSuggestions([...signedOutRoutes]);
+    setKeyword('');
+  };
+
+  const SuggestionsList = () => {
+    if (suggestions.length === 0) return <></>;
+
+    const topFiveItems = suggestions.slice(0, 5);
+    return (
+      <ul className='suggestion-list'>
+        {topFiveItems.map((r, index) => ( // Still keep index to keep track of the selected item
+          <li
+            key={r.path} // Use r.path as key
+            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>
+            <div className='text-wrapper'>
+              {r.pageName}
+              <div className='hidden-tab'>
+                {selectItem === index && `${window.location.origin}${r.path}`}
+              </div>
+            </div>
+          </li>
+        ))}
+      </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([...signedOutRoutes]);
+      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);
+      clearSearchModal();
+    }
+  }, [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);
+        if (!open) {
+          clearSearchModal();
+        }
+      } else if (e.key === 'Escape') {
+        setOpen(false);
+        clearSearchModal();
+      } 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]);
+
+  /**
+   * Listens for mouse input and closes the search modal when the user clicks outside the modal content.
+   * @dependencies open
+   */
+  useEffect(() => {
+    const clickOut = (e) => {
+      if (modalRef.current && !modalRef.current?.contains(e.target)) {
+        setOpen(false);
+        clearSearchModal();
+      }
+    };
+
+    if (open) {
+      window.addEventListener('mousedown', clickOut);
+    }
+
+    return () => {
+      window.removeEventListener('mousedown', clickOut);
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className='shortcut-search-modal'>
+      <div ref={modalRef}>
+        <div className='input-wrapper'>
+          <input
+            ref={inputRef}
+            placeholder="Search here... (Ctrl + k)"
+            value={keyword}
+            onChange={handleChanges} />
+          <SuggestionsList />
+        </div>
+        <div>
+          {errorMsg && <p>{errorMsg}</p>}
+        </div>
+      </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>