Added search button to get word results, code clean up, home page render once only after all the categories are set

src/App.tsx

@@ -21,11 +21,10 @@ import { Calendar } from "./components/calendar/Calendar";
 import { Login } from "./components/auth/Login";
 import { Signup } from "./components/auth/Signup";
 
-export const SERVER_URL = 'http://localhost:8001';
+export const SERVER_URL = 'https://anamnesis.webtrigon.com';
 export const API_TOKEN = { "Authorization": `Bearer ${localStorage.anamnesisToken}` }
 
-
-export var userProfileData: IProfile = {
+export const userProfileData: IProfile = {
     name: 'Neymar Jr',
     image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU',
     medal: {

src/components/add-category/AddCategory.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import styles from './AddCategory.module.scss';
 import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
 import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
@@ -6,7 +6,7 @@ import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
 import { ReactComponent as TimerIcon } from '../../assets/icons/timer.svg';
 import { ReactComponent as TextIcon } from '../../assets/icons/text.svg';
 import { MobileCategory } from "../../shared/models/category";
-import { addCategory, categoryDetails } from "../../services/category";
+import { addCategory, getCategoryDetails } from "../../services/category";
 
 type ownProps = {
     hidePopup: () => void
@@ -18,21 +18,18 @@ export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
     const [newCategory, setnewCategory] = useState<string>('');
     const [showIconSet, setShowIconSet] = useState<Boolean>(false);
 
-    let temp: Array<MobileCategory> = JSON.parse(localStorage.getItem("catagories") || "[]")
-
     function addNewCategory() {
-        console.log(temp)
-        addCategory(newCategory).then((category: any) => {
-            categoryDetails(category.data).then((category: any) => {
-                temp.push(category.data)
-            })
-            console.log(category.data)
+        let currentCategories: Array<MobileCategory> = JSON.parse(localStorage.getItem("categories") || "[]");
+
+        addCategory(newCategory).then((response: any) => {
+            getCategoryDetails(response.data).then((data: any) => {
+                currentCategories.push(data.data);
+                localStorage.setItem("categories", JSON.stringify(currentCategories));
+            });
         }, err => {
             console.log("Unable to Add category", err)
-        })
+        });
     }
-    console.log(newCategory)
-
 
     return <div className={styles.popupHolder}>
         <div className={styles.background} onClick={props.hidePopup}></div>

src/components/add-word/AddWord.module.scss

@@ -64,10 +64,22 @@
             padding-left: 2rem;
             font-size: 1.4rem;
         }
+
+        button {
+            height: 50px;
+            width: 50px;
+            border-radius: 50%;
+            border: none;
+            transform: scale(0.8);
+            background-color: var(--teal);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     
         svg {
             width: 5rem;
-            fill: var(--red);
+            fill: white;
         }
     }
 }

src/components/add-word/AddWord.tsx

@@ -11,30 +11,20 @@ import { getWordResult } from "../../services/words";
 import { Word } from "../../shared/models/word";
 
 export const AddWord: React.FC = () => {
-    const [searchWordResult, setSearchResult] = useState<Array<Word>>();
+    const [searchResult, setSearchResult] = useState<Array<Word>>();
     const [selectedWord, setSelectedWord] = useState<Word>();
+    const [searchWord, setSearchWord] = useState<string>('');
     const history = useHistory();
 
-    const searchWords = (searchWord: string) => {
-        console.log(searchWord.length)
-
-        setTimeout(() => {
-            if (searchWord.length > 0) {
-                getWordResult(searchWord).then((wordResult: any) => {
-                    let result: Array<Word> = wordResult.data
-                    console.log(result.slice(0,10))
-                    setSearchResult(result);
-                }, err => {
-                    console.log("Unable to search Words", err)
-                })
-
-            } else {
-                getWordResult("Aa").then((wordResult: any) => {
-                    let result: Array<Word> = wordResult.data
-                    setSearchResult(result);
-                })
-            }
-        }, 1000)
+    const searchWords = () => {
+        if (searchWord.length > 0) {
+            getWordResult(searchWord).then((wordResult: any) => {
+                let result: Array<Word> = wordResult.data;
+                setSearchResult(result);
+            }, err => {
+                console.log("Unable to search Words", err)
+            });
+        }
     }
 
     return <section className="modalPage">
@@ -61,13 +51,15 @@ export const AddWord: React.FC = () => {
         {!selectedWord && <section>
             <div className={styles.searchBarHolder}>
                 <div className={styles.searchBar}>
-                    <input type="text" autoFocus={true} placeholder={'Search and add a word'} onChange={(event) => searchWords(event.currentTarget.value)} />
-                    <SearchIcon />
+                    <input type="text" autoFocus={true} placeholder={'Search and add a word'} onChange={(event) => setSearchWord(event.currentTarget.value)} />
+                    <button onClick={() => searchWords()}>
+                        <SearchIcon />
+                    </button>
                 </div>
             </div>
 
-            <ul className={styles.searchResult}>
-                {searchWordResult?.map((word) => {
+            { searchResult && <ul className={styles.searchResult}>
+                {searchResult.map((word) => {
                     return <li key={word.name}>
                         <header>
                             <h4> {word.name} <span> {word.pronounciation} </span> </h4>
@@ -82,7 +74,7 @@ export const AddWord: React.FC = () => {
                         <button className={styles.addButton} onClick={() => setSelectedWord(word)}> <AddIcon />  Add </button>
                     </li>
                 })}
-            </ul>
+            </ul> }
         </section>}
 
 

src/components/categories/Categories.tsx

@@ -9,12 +9,11 @@ import { Category } from "../../shared/models/category";
 
 export const Categories: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
-    const [categoryResult, setCategories] = useState<Array<Category>>([])
-    
-    let userCategories = JSON.parse(localStorage.getItem("catagories") || "[]")
+    const [categoryResult, setCategories] = useState<Array<Category>>([]);
+    const userCategories = JSON.parse(localStorage.getItem("categories") || "[]");
     
     useEffect(() => {
-        getUserCategory();
+        setCategories(userCategories);
     }, [])
 
     const filterCategories = (text: string) => {
@@ -29,10 +28,6 @@ export const Categories: React.FC = () => {
         }
     }
 
-    function getUserCategory() {
-        setCategories(userCategories)
-    }
-
     return <section className="page">
         <header className={styles.pageHeader}>
             <LogoIcon />
@@ -62,7 +57,7 @@ export const Categories: React.FC = () => {
         <section className={styles.Grid}>
             <ul>
                 {categoryResult.map((category, index) => {
-                    return <li key={category.name}>
+                    return <li key={index}>
                         <div className={styles.icon}>
                             {category.icon}
                         </div>

src/components/home/Home.tsx

@@ -17,55 +17,54 @@ import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
 import { getUserProfile } from "../../services/user";
-import { User } from "../../shared/models/user"
-import { categoryDetails } from "../../services/category";
+import { MongoUser } from "../../shared/models/user"
+import { getCategoryDetails } from "../../services/category";
 import { MobileCategory } from "../../shared/models/category";
 
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
     const history = useHistory();
-    const [userProfile, setUserProfile] = useState<User>()
+    const [userProfile, setUserProfile] = useState<MongoUser>()
     const [allCatagories, setAllCatagories] = useState<Array<MobileCategory>>([])
 
-
-    useEffect(() => {
-        User();
-    }, [])
-
-    function User() {
+    const getUserProfileData = () => {
         getUserProfile().then((data: any) => {
+            let userData: MongoUser = data.data;
+
+            setUserProfile(userData);
 
-            let userData = data.data
-            localStorage.setItem("catagoryIds", JSON.stringify(userData.categories))
-            setUserProfile(userData)
-            getUserCategory();
+            if (userData.categories) {
+                getUserCategoryDetails(userData.categories)
+            }            
         }, (err) => {
             console.log(err)
         })
     }
 
-    let allCategoryDetails: Array<MobileCategory> = []
+    const getUserCategoryDetails = (categoryIds: Array<string>) => {
+        let allCategoryDetails: Array<MobileCategory> = [];
 
-    function getUserCategory() {
-        let categoryIds: Array<string> = JSON.parse(localStorage.getItem("catagoryIds") || "[]")
-        let catagoryDetails: Array<MobileCategory> = JSON.parse(localStorage.getItem("catagories") || "[]")
+        categoryIds.forEach((catagoryId) => {
+            getCategoryDetails(catagoryId).then((categoryDetails: any) => {
+                allCategoryDetails.push(categoryDetails.data);
 
+                if (categoryIds.length === allCategoryDetails.length) {
+                    setAllCatagories(allCategoryDetails);
+                    localStorage.setItem("categories", JSON.stringify(allCategoryDetails))
+                }
 
-        categoryIds.map((catagories: any) => {
-            categoryDetails(catagories).then((categoryDetails: any) => {
-                allCategoryDetails.push(categoryDetails.data)
-                localStorage.setItem("catagories", JSON.stringify(allCategoryDetails))
             }, (err) => {
                 console.log("Error fetching Category Details", err)
-            })
-        })
-
-        console.log(catagoryDetails)
-        setAllCatagories(catagoryDetails)
+            });
+            
+        });
     }
 
-    console.log(allCatagories)
+    useEffect(() => {
+        getUserProfileData();
+        console.log("rendering Home");
+    }, [localStorage.getItem('categories')]);
 
     return <section className="page">
 
@@ -163,7 +162,7 @@ export const Home: React.FC = () => {
             <ul>
                 {userProfileData.categories.map((category, categoryIndex) => {
                     return category.shelves.map((shelf, shelfIndex) => {
-                        return <li key={shelf.name} onClick={() => {
+                        return <li key={shelfIndex} onClick={() => {
                             history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex);
                         }}>
                             <div className={styles.progress}>
@@ -205,8 +204,8 @@ export const Home: React.FC = () => {
                 </button>
             </header>
             <ul>
-                {allCatagories.map((category: any, index: any) => {
-                    return <li key={category.name} onClick={() => {
+                {allCatagories.map((category, index) => {
+                    return <li key={index} onClick={() => {
                         history.push('/category-details/category_id=' + index);
                     }}>
                         <div className={styles.icon}>
@@ -214,7 +213,7 @@ export const Home: React.FC = () => {
                         </div>
                         <div className={styles.info}>
                             <label> {category.name} </label>
-                            <span> {category.shelves?.length > 0 ? category.shelves?.length : 0} Shelves </span>
+                            <span> {category.shelves && category.shelves?.length > 0 ? category.shelves.length : 0} Shelves </span>
                         </div>
                     </li>
                 })}

src/components/shelf-details/ShelfDetails.tsx

@@ -6,7 +6,6 @@ import { ICategory } from "../../structure/category";
 import { IShelf } from "../../structure/shelf";
 import { userProfileData } from "../../App";
 import { ReactComponent as BookIcon } from '../../assets/icons/book-sharp.svg';
-import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
 import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';

src/services/category.ts

@@ -12,7 +12,7 @@ export const addCategory = async (name: string) => {
 
 //Need to be changed
 
-export const categoryDetails = async (id: string) => {
+export const getCategoryDetails = async (id: string) => {
     return await axios.get(SERVER_URL + '/category/details/', {
         params: { _id: id },
         headers: API_TOKEN