Addressed feedback from PR comments

nepalcodes · Jul 18, 2024 · 3b3d1b9 · 3b3d1b9
1 parent b32afe9
commit 3b3d1b9
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 3,410 deletions.
diff --git a/nepalingo-web/package-lock.json b/nepalingo-web/package-lock.json
diff --git a/nepalingo-web/package.json b/nepalingo-web/package.json
@@ -18,12 +18,14 @@
     "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
     "react-router-dom": "^6.24.1",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
     "@vitejs/plugin-react": "^4.3.1",

diff --git a/nepalingo-web/src/App.tsx b/nepalingo-web/src/App.tsx
@@ -49,7 +49,7 @@ const App: React.FC = () => {
           element={isAuthenticated ? <Home /> : <Navigate to="/login" />}
         />
         <Route path="/" element={<Navigate to="/login" />} />
-        <Route path="/learn" element={<SearchBarPage />} />
+        <Route path="/dictionary" element={<SearchBarPage />} />
       </Routes>
     </Router>
   );

diff --git a/nepalingo-web/src/components/SearchBar/SearchBar.tsx b/nepalingo-web/src/components/SearchBar/SearchBar.tsx
@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import useDictionary, { DictionaryProps, DictionaryResponse } from '../../hooks/useDictionary';
+import useDictionary, { DictionaryProps} from '../../hooks/useDictionary';
+import { v4 as uuidv4 } from 'uuid';
 
-const SearchBar: React.FC = () => {
-  const [searchTerm, setSearchTerm] = useState<string>('');
-  const language: DictionaryProps['language'] = 'newari'; 
+interface DictionarySearchBarProps {
+  language: DictionaryProps['language']; // Define language as a prop
+}
 
+const DictionarySearchBar: React.FC<DictionarySearchBarProps> = ({ language }) => {
+  const [searchTerm, setSearchTerm] = useState<string>('');
   const { data, isLoading, error } = useDictionary({ language, word: searchTerm });
-  console.log('Fetched data:', data);
-
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value);
   };
@@ -44,17 +45,12 @@ const SearchBar: React.FC = () => {
       </div>
 
       {error && <p className="mt-2 text-red-600">{error.message}</p>}
-
-
-
-
-
       <ul className="list-none p-0 mt-5 w-3/4">
   {isLoading && <p className="mt-2 text-gray-600">Loading...</p>}
   {data && data.meanings ? (
     data.meanings.length > 0 ? (
-      data.meanings.map((meaning, index) => (
-        <li key={index} className="bg-gray-100 p-4 mb-2 rounded-md shadow transition-all duration-300 hover:bg-gray-200">
+      data.meanings.map((meaning) => (
+        <li key={uuidv4()} className="bg-gray-100 p-4 mb-2 rounded-md shadow transition-all duration-300 hover:bg-gray-200">
           <h2 className="m-0 mb-2 text-xl text-gray-900">{data.word}</h2>
           <p className="my-1 text-sm text-gray-700">{meaning.meaningEn}</p>
           {meaning.meaningNp && <p className="my-1 text-sm text-gray-700">{meaning.meaningNp}</p>}
@@ -77,4 +73,4 @@ const SearchBar: React.FC = () => {
   );
 };
 
-export default SearchBar;
+export default DictionarySearchBar;
diff --git a/nepalingo-web/src/pages/SearchBarPage.tsx b/nepalingo-web/src/pages/SearchBarPage.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import Header from '../components/Header'; 
-import SearchBar from '../components/SearchBar/SearchBar';
+import DictionarySearchBar from '../components/SearchBar/SearchBar';
 
 const SearchBarPage: React.FC = () => {
   return (
     <>
       <Header />  
       <h1 className="text-center text-4xl mt-4">Search Dictionary</h1>  
-      <SearchBar/>     
+      <DictionarySearchBar language="english"/>     
     </>
   );
 }