feat: Add scholarship search with Algolia Autocomplete (#23)

package.json

@@ -24,7 +24,10 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "^5.0.0",
     "react-spinners": "^0.6.1",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "@algolia/autocomplete-js": "^1.17.0",
+    "@algolia/autocomplete-theme-classic": "^1.17.0",
+    "algoliasearch": "^4.24.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -52,4 +55,4 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0"
   }
-}
+}

src/algoliaConfig.js

@@ -0,0 +1,7 @@
+// Algolia configuration for Atila Scholarships
+// These are placeholder values - replace with actual Algolia credentials
+export const algoliaConfig = {
+  appId: 'YOUR_ALGOLIA_APP_ID',
+  apiKey: 'YOUR_ALGOLIA_SEARCH_API_KEY',
+  indexName: 'atila_scholarships',
+};

src/components/ScholarshipSearch.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef } from 'react';
+import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
+import '@algolia/autocomplete-theme-classic/dist/theme.css';
+import { algoliaConfig } from '../algoliaConfig';
+import algoliasearch from 'algoliasearch';
+
+const searchClient = algoliasearch(algoliaConfig.appId, algoliaConfig.apiKey);
+
+function ScholarshipSearch({ onSearch, initialValue = '' }) {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const search = autocomplete({
+      container: containerRef.current,
+      placeholder: 'Search scholarships...',
+      initialState: { query: initialValue },
+      openOnFocus: true,
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'scholarships',
+            getItems() {
+              return getAlgoliaResults({
+                searchClient,
+                queries: [
+                  {
+                    indexName: algoliaConfig.indexName,
+                    query,
+                    params: {
+                      hitsPerPage: 5,
+                    },
+                  },
+                ],
+              });
+            },
+            getItemInputValue({ item }) {
+              return item.name || item.title || '';
+            },
+            onSelect({ item }) {
+              if (onSearch) {
+                onSearch(item.name || item.title || '');
+              }
+            },
+            templates: {
+              item({ item, components }) {
+                return (
+                  <div className="aa-ItemWrapper">
+                    <div className="aa-ItemContent">
+                      <div className="aa-ItemContentBody">
+                        <div className="aa-ItemContentTitle">
+                          <components.Highlight hit={item} attribute="name" />
+                        </div>
+                        {item.deadline && (
+                          <div className="aa-ItemContentDescription">
+                            Deadline: {item.deadline}
+                          </div>
+                        )}
+                        {item.amount && (
+                          <div className="aa-ItemContentDescription">
+                            Amount: {item.amount}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    return () => {
+      search.destroy();
+    };
+  }, [initialValue, onSearch]);
+
+  return <div ref={containerRef} className="scholarship-search" />;
+}
+
+export default ScholarshipSearch;

src/scenes/Scholarship/ScholarshipsList/ScholarshipsList.js

@@ -4,6 +4,7 @@ import BarLoader from 'react-spinners/BarLoader';
 import {toTitleCase} from "../../../services/utils";
 import ScholarshipCard from "../ScholarshipCard";
 import ScholarshipsAPI from "../../../services/ScholarshipsAPI";
+import ScholarshipSearch from "../../../components/ScholarshipSearch";
 class ScholarshipsList extends React.Component {
 
     constructor(props) {
@@ -91,6 +92,14 @@ class ScholarshipsList extends React.Component {
 
         return (
             <div>
+                <div className="mb-4">
+                    <ScholarshipSearch 
+                        onSearch={(query) => {
+                            this.props.history.push(`/scholarship/s/${query}`);
+                        }}
+                        initialValue={searchQuery || ''}
+                    />
+                </div>
                 <h1>
                     {searchQuery && `Scholarships for ${toTitleCase(searchQuery)}`}
                     {!searchQuery && 'Scholarships'}