home Page and Category --Partial commit + pull shared module

src/components/add-category/AddCategory.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, 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';
 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 { ICategory } from "../../structure/category";
-import { userProfileData } from "../../App";
+import { MobileCategory } from "../../shared/models/category";
+import { addCategory, categoryDetails } from "../../services/category";
 
 type ownProps = {
     hidePopup: () => void
@@ -15,14 +15,25 @@ type ownProps = {
 const IconSet = [<BrainIcon />, <TimeIcon />, <TimerIcon />, <TextIcon />]
 
 export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
-    const [newCategory, setnewCategory] = useState<ICategory>({
-        name: '',
-        icon: <BrainIcon />,
-        shelves: []
-    });
-
+    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)
+        }, err => {
+            console.log("Unable to Add category", err)
+        })
+    }
+    console.log(newCategory)
+
+
     return <div className={styles.popupHolder}>
         <div className={styles.background} onClick={props.hidePopup}></div>
         <section className={styles.popup}>
@@ -33,29 +44,25 @@ export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
             <section className={styles.form}>
                 <div className={styles.inputHolder}>
                     <div className={styles.icon + ' ' + (showIconSet ? styles.active : '')} onClick={() => setShowIconSet(!showIconSet)}>
-                        { newCategory.icon }
+                        {/* {newCategory.icon} */}
                     </div>
                     <input type="text" placeholder={'Category Name'} onInput={(event) => {
-                        setnewCategory({
-                            ...newCategory,
-                            name: event.currentTarget.value
-                        });
+                        setnewCategory(event.currentTarget.value);
                     }} />
                 </div>
-                
-                { showIconSet && <ul className={styles.iconHolder}>
-                    { IconSet.map(iconSample => <li onClick={() => {
-                        setnewCategory({
-                            ...newCategory,
-                            icon: iconSample
-                        });
+
+                {showIconSet && <ul className={styles.iconHolder}>
+                    {IconSet.map(iconSample => <li onClick={() => {
+                        setnewCategory(newCategory);
                         setShowIconSet(false);
-                    }}> {iconSample} </li>) }
-                </ul> }
+                    }}> {iconSample} </li>)}
+                </ul>}
 
                 <button className={styles.addButton} onClick={() => {
-                    userProfileData.categories.push(newCategory);
+                    // userProfileData.categories.push(newCategory);
+                    addNewCategory();
                     props.hidePopup();
+
                 }}>
                     Add
                 </button>

src/components/add-word/AddWord.tsx

@@ -5,29 +5,40 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
 import { ReactComponent as AddIcon } from '../../assets/icons/plus.svg';
 
-import { IWord } from "../../structure/word";
-import { ALL_WORDS } from "../../data/all-words";
 import { NavLink, useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
+import { getWordResult } from "../../services/words";
+import { Word } from "../../shared/models/word";
 
 export const AddWord: React.FC = () => {
-    const [searchWordResult, setSearchResult] = useState<Array<IWord>>(ALL_WORDS);
-    const [selectedWord, setSelectedWord] = useState<IWord>();
+    const [searchWordResult, setSearchResult] = useState<Array<Word>>();
+    const [selectedWord, setSelectedWord] = useState<Word>();
     const history = useHistory();
 
     const searchWords = (searchWord: string) => {
-        if (searchWord.length > 0) {
-            let result = ALL_WORDS.filter((word) => {
-                return word.name.toLowerCase().includes(searchWord.toLowerCase());
-            });
-            
-            setSearchResult(result);
-        } else {
-            setSearchResult(ALL_WORDS);
-        }
+        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)
     }
 
     return <section className="modalPage">
+
         <header className={styles.navHeader}>
             <button onClick={() => {
                 if (selectedWord) {
@@ -38,16 +49,16 @@ export const AddWord: React.FC = () => {
             }}>
                 <ChevronLeft />
             </button>
-            { !selectedWord && <h5> Add a Word </h5> }
-            { selectedWord && <h5> Add to Shelf </h5> }
-            
+            {!selectedWord && <h5> Add a Word </h5>}
+            {selectedWord && <h5> Add to Shelf </h5>}
+
             <figure style={{ opacity: selectedWord ? 0 : 1 }}>
                 {/* eslint-disable-next-line */}
-                <img src={ userProfileData.image } alt="profile-image" />
+                <img src={userProfileData.image} alt="profile-image" />
             </figure>
         </header>
 
-        { !selectedWord && <section>
+        {!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)} />
@@ -56,29 +67,29 @@ export const AddWord: React.FC = () => {
             </div>
 
             <ul className={styles.searchResult}>
-                { searchWordResult.map((word) => {
+                {searchWordResult?.map((word) => {
                     return <li key={word.name}>
                         <header>
-                            <h4> { word.name } <span> { word.pronounciation } </span> </h4>
+                            <h4> {word.name} <span> {word.pronounciation} </span> </h4>
                             <button>
                                 <SpeakerIcon />
                             </button>
                         </header>
                         <div className={styles.description}>
-                            <span> { word.grammaticalDetails[0].typeName } </span>
-                            <p> { word.grammaticalDetails[0].description } </p>
+                            <span> {word.grammaticalDetails[0]?.type} </span>
+                            <p> {word.grammaticalDetails[0]?.description} </p>
                         </div>
                         <button className={styles.addButton} onClick={() => setSelectedWord(word)}> <AddIcon />  Add </button>
                     </li>
-                }) }
+                })}
             </ul>
-        </section> }
+        </section>}
 
 
-        { selectedWord && <section>
+        {selectedWord && <section>
             <div className={styles.searchBarHolder}>
                 <div className={styles.searchBar}>
-                    <input type="text" placeholder={'Search shelves'}/>
+                    <input type="text" placeholder={'Search shelves'} />
                     <SearchIcon />
                 </div>
             </div>
@@ -87,7 +98,7 @@ export const AddWord: React.FC = () => {
                 <header>
                     <h5> All Shelves </h5>
                 </header>
-                { userProfileData.categories.map((category, categoryIndex) => {
+                {userProfileData.categories.map((category, categoryIndex) => {
                     return category.shelves.map((shelf, shelfIndex) => {
                         return <li key={shelf.name} onClick={() => {
                             let findWord = userProfileData.categories[categoryIndex].shelves[shelfIndex].words.find(word => word.name.toLowerCase().includes(selectedWord.name.toLowerCase()));
@@ -95,24 +106,24 @@ export const AddWord: React.FC = () => {
                             if (findWord) {
                                 alert("Word already Present!");
                             } else {
-                                userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord);
+                                // userProfileData.categories[categoryIndex].shelves[shelfIndex].words.push(selectedWord);
                                 history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex);
-                            }                            
+                            }
                         }}>
                             <div className={styles.icon}>
-                                { category.icon }
+                                {category.icon}
                             </div>
                             <div className={styles.info}>
-                                <label> { shelf.name } </label>
-                                <span> { category.name } </span>
+                                <label> {shelf.name} </label>
+                                <span> {category.name} </span>
                             </div>
                         </li>
                     })
-                }) }
+                })}
 
                 <NavLink to={'/add-shelf'} className={styles.AddShelfButton}> <span> <AddIcon /> </span> Create New Shelf </NavLink>
             </ul>
-        </section> }
-        
+        </section>}
+
     </section>
 }

src/components/categories/Categories.tsx

@@ -1,28 +1,38 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from './Categories.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
 import { NavLink } from "react-router-dom";
-import { ICategory } from "../../structure/category";
 import { AddCategory } from "../add-category/AddCategory";
-import { userProfileData } from "../../App";
+import { Category } from "../../shared/models/category";
 
 export const Categories: React.FC = () => {
-    const [categoryResult, setCategories] = useState<Array<ICategory>>(userProfileData.categories);
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
+    const [categoryResult, setCategories] = useState<Array<Category>>([])
     
+    let userCategories = JSON.parse(localStorage.getItem("catagories") || "[]")
+    
+    useEffect(() => {
+        getUserCategory();
+    }, [])
+
     const filterCategories = (text: string) => {
         if (text.length > 0) {
-            let result = userProfileData.categories.filter(category => {
+            let result: any = categoryResult.filter(category => {
                 return category.name.toLowerCase().includes(text.toLowerCase());
             });
+            console.log(result)
             setCategories(result);
         } else {
-            setCategories(userProfileData.categories);
+            setCategories(userCategories);
         }
     }
 
+    function getUserCategory() {
+        setCategories(userCategories)
+    }
+
     return <section className="page">
         <header className={styles.pageHeader}>
             <LogoIcon />
@@ -32,12 +42,12 @@ export const Categories: React.FC = () => {
                 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
             </figure>
         </header>
-        
+
         <header className={styles.tabHeading}>
             <h4> Categories </h4>
-            <p> { userProfileData.categories.length } Types </p>
+            <p> {userCategories.length} Types </p>
         </header>
-        
+
         <section className={styles.searchHolder}>
             <div className={styles.searchBar}>
                 <input type="text" placeholder={'Search Category'} onInput={(event) => filterCategories(event.currentTarget.value)} />
@@ -51,20 +61,19 @@ export const Categories: React.FC = () => {
 
         <section className={styles.Grid}>
             <ul>
-                { categoryResult.map((category, index) => {
+                {categoryResult.map((category, index) => {
                     return <li key={category.name}>
                         <div className={styles.icon}>
-                            { category.icon }
+                            {category.icon}
                         </div>
                         <NavLink to={'/category-details/category_id=' + index} className={styles.info}>
-                            <label> { category.name } </label>
-                            <span> { category.shelves.length } Shelves </span>
+                            <label> {category.name} </label>
+                            <span> {category.shelves?.length} Shelves </span>
                         </NavLink>
                     </li>
-                })}                
+                })}
             </ul>
         </section>
-
-        { isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} /> }
+        {isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} />}
     </section>
 }

src/components/home/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from './Home.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
@@ -16,26 +16,56 @@ import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
-import { addCategory, getCategory, updateCategory } from "../../services/category";
 import { getUserProfile } from "../../services/user";
-import { getWordResult } from "../../services/words";
+import { User } from "../../shared/models/user"
+import { categoryDetails } 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 [allCatagories, setAllCatagories] = useState<Array<MobileCategory>>([])
 
-    getUserProfile().then((data) => {
-        console.log("UserProfile", data)
-    }, (err) => {
-        console.log(err)
-    })   
-    
-    getWordResult('Ple').then((data) => {
-        console.log("Words", data.data)
-    }, (err) => {
-        console.log(err)
-    })
+
+    useEffect(() => {
+        User();
+    }, [])
+
+    function User() {
+        getUserProfile().then((data: any) => {
+
+            let userData = data.data
+            localStorage.setItem("catagoryIds", JSON.stringify(userData.categories))
+            setUserProfile(userData)
+            getUserCategory();
+        }, (err) => {
+            console.log(err)
+        })
+    }
+
+    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.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)
 
     return <section className="page">
 
@@ -62,7 +92,7 @@ export const Home: React.FC = () => {
                 {userProfileData.medal.icon}
             </div>
             <div className={styles.userDetails}>
-                <h2> Neymar Junior </h2>
+                <h2> {userProfile?.name} </h2>
                 <div className={styles.stat}>
                     <h5> 1.2K </h5>
                     <label> Words </label>
@@ -175,7 +205,7 @@ export const Home: React.FC = () => {
                 </button>
             </header>
             <ul>
-                {userProfileData.categories.map((category, index) => {
+                {allCatagories.map((category: any, index: any) => {
                     return <li key={category.name} onClick={() => {
                         history.push('/category-details/category_id=' + index);
                     }}>
@@ -184,7 +214,7 @@ export const Home: React.FC = () => {
                         </div>
                         <div className={styles.info}>
                             <label> {category.name} </label>
-                            <span> {category.shelves.length} Shelves </span>
+                            <span> {category.shelves?.length > 0 ? category.shelves?.length : 0} Shelves </span>
                         </div>
                     </li>
                 })}

src/services/category.ts

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

src/shared

@@ -1 +1 @@
-Subproject commit 7dc8d39f1be0f5159aa473de31620a72c77b98af
+Subproject commit f4b5742e27cf554dc922fa1af415bafea7214b30