Functional cleanup

.github/workflows/azure-static-web-apps-icy-tree-070bd9f0f.yml

@@ -24,6 +24,7 @@ jobs:
       VITE_SEARCH_ENGINE_ID: ${{ vars.VITE_SEARCH_ENGINE_ID }}
       VITE_MAP_SEARCH_URL: ${{ vars.VITE_MAP_SEARCH_URL }}
       VITE_MYUCF_API_URL: ${{ vars.VITE_MYUCF_API_URL }}
+      FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
     name: Build and Deploy Job
     steps:
       - uses: actions/checkout@v3

.npmrc

@@ -0,0 +1,3 @@
+@awesome.me:registry=https://npm.fontawesome.com/
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

package.json

@@ -14,6 +14,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@awesome.me/kit-850d323291": "^1.0.4",
+    "@fortawesome/react-fontawesome": "^3.1.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.4",

src/App.tsx

@@ -14,7 +14,7 @@ function App() {
   useEffect(() => {
     const script = document.createElement('script');
     script.src = `https://cse.google.com/cse.js?cx=${SEARCH_ENGINE_ID}`;
-    script.async = true;
+    script.defer = true;
     document.body.appendChild(script);
   }, []);
 

src/components/LocationResults.scss

@@ -0,0 +1,14 @@
+.location-result-heading {
+    border-bottom: 1px solid #ccc;
+    font-size: 1.25rem;
+    font-weight: 400;
+    padding-bottom: 1rem;
+}
+
+.location-heading {
+    font-size: .95rem;
+}
+
+.sidebar-result a {
+    font-size: .8rem;
+}

src/components/LocationResults.tsx

@@ -3,6 +3,9 @@ import './LocationResults.scss'
 import { SearchQueryContext } from '../SearchContext';
 import type { LocationResultSet } from '../types/LocationTypes';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { byPrefixAndName } from '@awesome.me/kit-850d323291/icons';
+
 const MAP_SEARCH_URL = import.meta.env.VITE_MAP_SEARCH_URL;
 
 function LocationResults() {
@@ -39,24 +42,32 @@ function LocationResults() {
 
   return (
     <div className='location-results'>
-      {typeof locationResults !== 'undefined' ? (
+      {typeof locationResults !== 'undefined' && (
         <div className="results">
           {locationResults.results.locations.length > 0 && locationResults.results.locations.map((loc) => {
-            <h2>Locations</h2>
             return (
-              <div className='sidebar-result'>
-                <h3>{loc.name}</h3>
-                <div className='media pt-1'>
-                  <div className='media-body'>
-                    <a className='mb-2 d-block' href={loc.profile_link} target="_blank">More Information</a>
-                    <a className='mb-2 d-block' href={`https://www.google.com/maps/dir/Current+Location/${loc.googlemap_point}`} target='_blank'>Directions</a>
+              <div key={loc.name}>
+                <h2 className='location-result-heading'>
+                  <FontAwesomeIcon icon={byPrefixAndName.fas['map-location-dot']} className='fa-fw' /> Locations
+                </h2>
+                <div className='sidebar-result'>
+                  <h3 className='location-heading'>{loc.name}</h3>
+                  <div className='media pt-1'>
+                    <div className='media-body'>
+                      <a className='mb-2 d-block' href={loc.profile_link} target="_blank">
+                        <FontAwesomeIcon icon={byPrefixAndName.fas['circle-info']} className='fa-fw mr-1' /> More Information
+                      </a>
+                      <a className='mb-2 d-block' href={`https://www.google.com/maps/dir/Current+Location/${loc.googlemap_point}`} target='_blank'>
+                        <FontAwesomeIcon icon={byPrefixAndName.fas['location-arrow']} className='fa-fw mr-1' /> Directions
+                      </a>
+                    </div>
                   </div>
                 </div>
               </div>
             )
           })}
         </div>
-      ): ( <p>No Results for "{searchQuery}". </p>)}
+      )}
     </div>
   )
 }

src/components/SearchBar.tsx

@@ -39,15 +39,16 @@ function SearchBar() {
         }
 
         debounceTimerRef.current = setTimeout(() => {
-          if (element.value.length < 3) {
-            setSearchParams();
+          if (element.value === "") {
             searchElement.clearAllResults();
+            setSearchParams({});
+          } else {
+            setSearchParams({
+              q: element.value
+            });
           }
 
           setSearchQuery(element.value);
-          setSearchParams({
-            q: element.value !== "" ? element.value : ""
-          });
 
           searchElement.execute();