i18n WORKING. It's all improvements from here.

mapachurro · Jul 22, 2024 · 0ba704c · 0ba704c
1 parent a11326a
commit 0ba704c
Show file tree

Hide file tree

Showing 15 changed files with 1,666 additions and 2,878 deletions.
diff --git a/index.html b/index.html
@@ -1,35 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Credibly neutral definitions for web3 and decentralized technologies"
-    />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="/manifest.json" />
-    <!--
-      Notice the use of  in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>The Education DAO Glossary</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Education DAO Glossary</title>
+    <base href="/" /> <!-- Ensure the base URL is correctly set -->
   </head>
   <body>
-    <noscript>These are the explanations you've been looking for.</noscript>
     <div id="root"></div>
-
     <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "csv-parser": "^3.0.0",
+    "dompurify": "^3.1.6",
     "fs": "^0.0.1-security",
     "i18next": "^23.10.0",
     "lunr": "^2.3.9",

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,7 @@ import index from './searchIndex';
 import terms from './terms.json';
 import EntryPage from './EntryPage';
 import Navbar from './components/Navbar';
+import Home from './Home';
 import { useTranslation } from 'react-i18next';
 
 function App() {
@@ -25,6 +26,16 @@ function App() {
 
   const allTerms = Object.keys(terms[0].terms);
 
+  const handleLogoClick = () => {
+    setSearchResults([]);
+    navigate('/');
+  };
+
+  const handleNewSearch = () => {
+    setSearchResults([]);
+    navigate('/');
+  };
+
   useEffect(() => {
     if (searchResults.length > 0) {
       const query = searchResults[0].term; // Reuse the last search query
@@ -34,31 +45,10 @@ function App() {
 
   return (
     <div>
-      <Navbar />
-      <div>
-        <h2>{t('Search the Education DAO Glossary:')}</h2>
-      </div>
-      <Search onSearch={handleSearch} />
+      <Navbar onLogoClick={handleLogoClick} />
       <Routes>
-        <Route
-          path="/"
-          element={
-            <ul>
-              {searchResults.map((result) => (
-                <li
-                  key={result.term}
-                  onClick={() => navigate(`/term/${encodeURIComponent(result.term)}`)}
-                  style={{
-                    cursor: allTerms.includes(result.term) ? 'pointer' : 'default',
-                  }}
-                >
-                  {result.term}
-                </li>
-              ))}
-            </ul>
-          }
-        />
-        <Route path="/term/:termKey" element={<EntryPage />} />
+        <Route path="/" element={<Home onSearch={handleSearch} />} />
+        <Route path="/term/:termKey" element={<EntryPage onNewSearch={handleNewSearch} />} />
       </Routes>
     </div>
   );

diff --git a/src/EntryPage.css b/src/EntryPage.css
@@ -0,0 +1,14 @@
+.new-search-button {
+    background-color: #6a0dad; /* Same purple as the navbar */
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-top: 20px;
+    border-radius: 4px;
+  }
+
+  .new-search-button:hover {
+    background-color: #5b0ca8; /* Slightly darker shade for hover effect */
+  }
+
diff --git a/src/EntryPage.jsx b/src/EntryPage.jsx
@@ -1,30 +1,38 @@
-// src/EntryPage.jsx
-
 import React from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import terms from './terms.json';
 import { linkTermsInDefinition } from './utils/linkTerms';
+import { useTranslation } from 'react-i18next';
+import './EntryPage.css'; // Ensure you have this CSS file for styling
 
-const EntryPage = () => {
+const EntryPage = ({ onNewSearch }) => {
   const { termKey } = useParams();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
   console.log("Term Key:", termKey);
 
   const termData = terms[0]?.terms[termKey];
   console.log("Term Data:", termData);
 
   if (!termData) {
-    return <div>Term not found</div>;
+    return <div>{t('Term not found')}</div>;
   }
 
   const linkedDefinition = linkTermsInDefinition(termData.definition, terms[0].terms);
   console.log("Linked Definition:", linkedDefinition);
 
+  const handleNewSearch = () => {
+    onNewSearch(); // Clear search history
+    navigate('/');
+  };
+
   return (
     <div>
-      <h1>{termData.term}</h1>
+      <h1>{t(termData.term)}</h1>
       <p>{termData.phonetic}</p>
-      <p><strong>Category:</strong> {termData.termCategory}</p>
+      <p><strong>{t('Category')}:</strong> {t(termData.termCategory)}</p>
       <p dangerouslySetInnerHTML={{ __html: linkedDefinition }}></p>
+      <button className="new-search-button" onClick={handleNewSearch}>{t('New search')}</button>
     </div>
   );
 };

diff --git a/src/Home.jsx b/src/Home.jsx
@@ -5,7 +5,7 @@ import index from './searchIndex';
 import terms from './terms.json';
 import { useTranslation } from 'react-i18next';
 
-function Home() {
+function Home({ onSearch }) {
   const [searchResults, setSearchResults] = useState([]);
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -21,7 +21,7 @@ function Home() {
     console.log('Updated searchResults:', formattedResults);
   };
 
-  const allTerms = Object.keys(terms["0"]["terms"]);
+  const allTerms = Object.keys(terms[0].terms);
 
   return (
     <div>

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,15 +1,47 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import LanguageSwitcher from './LanguageSwitcher';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+const Navbar = ({ onLogoClick }) => {
+  const navigate = useNavigate();
+  const { i18n } = useTranslation();
+
+  const handleLogoClick = () => {
+    onLogoClick(); // Clear search history
+    navigate('/');
+  };
+
+  const handleLanguageChange = (e) => {
+    i18n.changeLanguage(e.target.value);
+  };
 
-const Navbar = () => {
   return (
     <nav style={styles.navbar}>
-      <Link to="/" style={styles.logo}>
+      <div onClick={handleLogoClick} style={styles.logo}>
         <img src="./education-dao-circle.png" alt="Logo" style={styles.logoImage} />
         Education DAO Glossary
-      </Link>
-      <LanguageSwitcher />
+      </div>
+      <select onChange={handleLanguageChange} value={i18n.language} style={styles.languageSelector}>
+      <option value="en">English</option>
+      <option value="es">Español</option>
+      <option value="ar">العربية</option>
+      <option value="de">Deutsch</option>
+      <option value="fr">Français</option>
+      <option value="id">Bahasa Indonesia</option>
+      <option value="it">Italiano</option>
+      <option value="ja">日本語</option>
+      <option value="ko">한국어</option>
+      <option value="nl">Nederlands</option>
+      <option value="pt-br">Português (Brasil)</option>
+      <option value="ru">Русский</option>
+      <option value="th">ไทย</option>
+      <option value="tl">Tagalog</option>
+      <option value="tr">Türkçe</option>
+      <option value="uk">Українська</option>
+      <option value="vi">Tiếng Việt</option>
+      <option value="zh-cn">中文 (简体)</option>
+
+      </select>
     </nav>
   );
 };
@@ -21,18 +53,25 @@ const styles = {
     color: '#fff',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between', // Adjust to space items
+    justifyContent: 'space-between',
   },
   logo: {
     textDecoration: 'none',
     color: '#fff',
     display: 'flex',
     alignItems: 'center',
+    cursor: 'pointer',
   },
   logoImage: {
     marginRight: '0.5rem',
     height: '40px',
   },
+  languageSelector: {
+    backgroundColor: '#333',
+    color: '#fff',
+    border: 'none',
+    padding: '5px',
+  },
 };
 
 export default Navbar;
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
@@ -1,30 +1,34 @@
-// src/components/Search.jsx
-
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 const Search = ({ onSearch }) => {
-  const { t } = useTranslation();
   const [query, setQuery] = useState('');
 
   const handleInputChange = (e) => {
     setQuery(e.target.value);
   };
 
-  const handleSearch = () => {
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      onSearch(query);
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
     onSearch(query);
   };
 
   return (
-    <div>
+    <form onSubmit={handleSubmit}>
       <input
         type="text"
         value={query}
         onChange={handleInputChange}
-        placeholder={t('Search')} // Use translation for placeholder
+        onKeyDown={handleKeyDown}
+        placeholder="Search"
       />
-      <button onClick={handleSearch}>{t('Search')}</button> {/* Use translation for button text */}
-    </div>
+      <button type="submit">Search</button>
+    </form>
   );
 };