First attempt at creating a search bar

i18n/locales/src/i18n/locales/en/translation.json

@@ -0,0 +1 @@
+{}

i18n/locales/src/i18n/locales/es/translation.json

@@ -0,0 +1 @@
+{}

i18next-scanner.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  input: ['src/**/*.{js,jsx}'], // Specify the input files to scan
+  output: 'src/i18n/locales/', // Specify the output directory for the translation files
+  options: {
+    debug: true, // Enable debugging
+    removeUnusedKeys: false, // Remove unused translation keys
+    func: {
+      list: ['i18next.t', 'i18n.t'], // List of functions to scan for translation keys
+      extensions: ['.js', '.jsx'] // File extensions to scan
+    },
+    lngs: ['en', 'es', 'ar', 'de', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pt-br', 'ru', 'th', 'tl', 'tr', 'uk', 'vi', 'zh-cn'], // List of languages to generate translation files for
+    ns: ['translation'], // Namespace to use for translation keys
+    defaultLng: 'en', // Default language
+    resource: {
+      loadPath: 'src/i18n/locales/{{lng}}/{{ns}}.json', // Path to load existing translation files
+      savePath: 'src/i18n/locales/{{lng}}/{{ns}}.json', // Path to save updated translation files
+      jsonIndent: 2 // Indentation for the JSON files
+    }
+  }
+};

package.json

@@ -1,22 +1,26 @@
 {
+  "name": "education-dao-glossary",
+  "version": "0.9",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "i18next": "^23.10.0",
+    "lunr": "^2.3.9",
+    "lunr-languages": "^1.14.0",
     "react-i18next": "^14.1.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.1",
-    "web-vitals": "^3.0.4"
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "test": "vitest",
-    "test:coverage": "vitest run --coverage --watch=false"
+    "test:coverage": "vitest run --coverage --watch=false",
+    "extract": "i18next-scanner --config i18next-scanner.config.js"
   },
   "eslintConfig": {
     "extends": [
@@ -45,6 +49,7 @@
     "@svgr/webpack": "^8.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.3.1",
+    "i18next-scanner": "^4.4.0",
     "jsdom": "^24.0.0",
     "nth-check": "^2.1.1",
     "postcss": "^8.4.31",

src/App.jsx

@@ -1,45 +1,47 @@
+import React, { useState, useEffect } from "react";
+import Search from './components/Search';
+import index from './searchIndex';
 import terms from "./terms";
 import Term from "./termStruct";
-import { useState, useEffect } from "react";
 import { urlToPath } from "./Link";
 import { Breadcrumbs } from "./Breadcrumbs";
-
-const DEFAULT = "permissionless distribution";
+import './i18n/config';
+import './reset.css';
+import './index.css';
+import EntryPage from './entryPage';
 
 function App() {
-  const [currentPath, setCurrentPath] = useState(urlToPath());
-  useEffect(() => {
-    const onLocationChange = () => {
-      setCurrentPath(urlToPath());
-    };
-    window.addEventListener("navigate", onLocationChange);
-    window.addEventListener("popstate", onLocationChange);
-
-    return () => {
-      window.removeEventListener("navigate", onLocationChange);
-      window.removeEventListener("popstate", onLocationChange);
-    };
-  }, []);
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedTerm, setSelectedTerm] = useState(null);
 
-  let word = currentPath.length > 0 ? currentPath.at(-1) : DEFAULT;
-  if (!(word in terms) || currentPath.length === 0) {
-    word = DEFAULT;
-    window.location.pathname = `/${DEFAULT}`;
-  }
-  const term = terms[word];
+  const handleSearch = (query) => {
+    console.log('Searching for:', query); // Log the search query
+    const results = index.search(query);
+    console.log('Search results:', results); // Log the search results
+    const formattedResults = results.map((result) => ({
+      term: result.ref,
+      // Add any additional information you want to display in the search results list
+    }));
+    setSearchResults(formattedResults);
+    console.log('Updated searchResults:', formattedResults); // Log the updated searchResults
+  };  
 
   return (
-    <>
-      <Breadcrumbs segments={currentPath} />
-
-      <Term
-        word={word}
-        definition={term.definition} 
-        phonetic={term.phonetic}
-        partOfSpeech={term.partOfSpeech}
-      />
-    </>
+    <div>
+      <Search onSearch={handleSearch} />
+      {selectedTerm ? (
+        <EntryPage term={selectedTerm} /> // Render the EntryPage component with the selected term
+      ) : (
+        <ul>
+          {searchResults.map((result) => (
+            <li key={result.term} onClick={() => setSelectedTerm(result.term)}>
+              {result.term}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
   );
 }
 
-export default App;
+export default App;

src/components/Search.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+const Search = ({ onSearch }) => {
+  const [query, setQuery] = useState('');
+
+  const handleSearch = () => {
+    console.log('Search query:', query); // Log the search query
+    onSearch(query); // Call the onSearch prop with the search query
+  };
+
+  const handleInputChange = (event) => {
+    setQuery(event.target.value);
+  };
+
+  return (
+    <div>
+      <input type="text" value={query} onChange={handleInputChange} placeholder="Search..." />
+      <button onClick={handleSearch}>Search</button>
+    </div>
+  );
+};
+
+export default Search;

src/entryPage.jsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import terms from './terms';
+import Term from './termStruct';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const EntryPage = ({ term }) => {
+  const [definition, setDefinition] = useState(null);
+
+  useEffect(() => {
+    const fetchDefinition = () => {
+      const termDefinition = terms[term];
+      setDefinition(termDefinition);
+    };
+
+    fetchDefinition();
+  }, [term]);
+
+  if (!definition) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <>
+      <Breadcrumbs segments={[term]} />
+      <Term
+        term={term}
+        definition={definition.definition}
+        phonetic={definition.phonetic}
+        partOfSpeech={definition.partOfSpeech}
+      />
+    </>
+  );
+};
+
+export default EntryPage;

src/i18n/config.jsx

@@ -18,6 +18,7 @@ i18n
       // Add other languages here
     },
     lng: 'en', // default language
+    lngs: ['en', 'es', 'ar', 'de', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pt-br', 'ru', 'th', 'tl', 'tr', 'uk', 'vi', 'zh-cn'], // List of languages to generate translation files for
     fallbackLng: 'en', // fallback language
     interpolation: {
       escapeValue: false, // react already safes from xss