implement real time suggestion

frontend/Makefile

@@ -18,4 +18,4 @@ shell-frontend:
 
 test-frontend:
 	@docker build -f frontend/Dockerfile.test frontend -t nest-frontend-test
-	@docker run nest-frontend-test npm run test
+	@docker run --env-file frontend/.env.example nest-frontend-test npm run test

frontend/__tests__/src/pages/Chapters.test.tsx

@@ -77,7 +77,7 @@ describe('ChaptersPage Component', () => {
     })
   })
 
-  test('renders SearchBar, data, and pagination component concurrently after data is loaded', async () => {
+  test('renders  data, and pagination component concurrently after data is loaded', async () => {
     window.scrollTo = jest.fn()
     ;(fetchAlgoliaData as jest.Mock).mockResolvedValue({
       hits: mockChapterData.chapters,
@@ -88,12 +88,10 @@ describe('ChaptersPage Component', () => {
     const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
       expect(loadingSpinner.length).toBeGreaterThan(0)
-      expect(screen.queryByPlaceholderText('Search for OWASP chapters...')).not.toBeInTheDocument()
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
     await waitFor(() => {
       expect(screen.getByPlaceholderText('Search for OWASP chapters...')).toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Search for OWASP chapters...')).toHaveFocus()
       expect(screen.getByText('Chapter 1')).toBeInTheDocument()
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })

frontend/__tests__/src/pages/Committees.test.tsx

@@ -53,15 +53,12 @@ describe('Committees Component', () => {
     const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
       expect(loadingSpinner.length).toBeGreaterThan(0)
-      expect(
-        screen.queryByPlaceholderText('Search for OWASP committees...')
-      ).not.toBeInTheDocument()
+
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
 
     await waitFor(() => {
       expect(screen.getByPlaceholderText('Search for OWASP committees...')).toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Search for OWASP committees...')).toHaveFocus()
       expect(screen.getByText('Committee 1')).toBeInTheDocument()
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })

frontend/__tests__/src/pages/Contribute.test.tsx

@@ -12,14 +12,6 @@ jest.mock('lib/api', () => ({
   fetchAlgoliaData: jest.fn(),
 }))
 
-jest.mock('lib/utils', () => ({
-  getFilteredIcons: jest.fn(),
-}))
-
-jest.mock('utils/credentials', () => ({
-  API_URL: 'https://mock-api.com',
-}))
-
 jest.mock('components/Pagination', () =>
   jest.fn(({ currentPage, onPageChange, totalPages }) =>
     totalPages > 1 ? (

frontend/__tests__/src/pages/Projects.test.tsx

@@ -51,12 +51,10 @@ describe('ProjectPage Component', () => {
     const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
       expect(loadingSpinner.length).toBeGreaterThan(0)
-      expect(screen.queryByPlaceholderText('Search for OWASP projects...')).not.toBeInTheDocument()
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
     await waitFor(() => {
       expect(screen.getByPlaceholderText('Search for OWASP projects...')).toBeInTheDocument()
-      expect(screen.getByPlaceholderText('Search for OWASP projects...')).toHaveFocus()
       expect(screen.getByText('Project 1')).toBeInTheDocument()
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })

frontend/jest.config.ts

@@ -33,6 +33,7 @@ export default {
   moduleNameMapper: {
     '^@tests/(.*)$': '<rootDir>/__tests__/src/$1',
     '^@/(.*)$': '<rootDir>/src/$1',
+    '\\.(scss|sass|css)$': 'identity-obj-proxy',
   },
   moduleDirectories: ['node_modules', 'src'],
 }

frontend/jest.setup.ts

@@ -1,4 +1,22 @@
 import '@testing-library/jest-dom'
 import { TextEncoder } from 'util'
+import dotenv from 'dotenv'
+dotenv.config()
+beforeEach(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  })
+})
+jest.mock('@algolia/autocomplete-theme-classic', () => ({}))
 
 global.TextEncoder = TextEncoder

frontend/package.json

@@ -33,6 +33,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.3",
+    "dotenv": "^16.4.7",
     "lodash": "^4.17.21",
     "lucide-react": "^0.469.0",
     "markdown-it": "^14.1.0",
@@ -44,6 +45,9 @@
     "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
+    "@algolia/autocomplete-js": "^1.17.8",
+    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.8",
+    "@algolia/autocomplete-theme-classic": "^1.17.8",
     "@eslint/js": "^9.15.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -67,6 +71,7 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.11",