connected get all data API to categories and fetching data post add category locally.

src/components/add-category/AddCategory.tsx

@@ -5,8 +5,8 @@ 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 { MobileCategory } from "../../shared/models/category";
 import { addCategory, getCategoryDetails } from "../../services/category";
+import { User } from "../../shared/models/user";
 
 type ownProps = {
     hidePopup: () => void
@@ -17,14 +17,13 @@ const IconSet = [<BrainIcon />, <TimeIcon />, <TimerIcon />, <TextIcon />]
 export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
     const [newCategory, setnewCategory] = useState<string>('');
     const [showIconSet, setShowIconSet] = useState<Boolean>(false);
+    const userProfile: User = JSON.parse(localStorage.getItem('userProfile') || "");
 
-    function addNewCategory() {
-        let currentCategories: Array<MobileCategory> = JSON.parse(localStorage.getItem("categories") || "[]");
-
+    const addNewCategory = () => {
         addCategory(newCategory).then((response: any) => {
             getCategoryDetails(response.data).then((data: any) => {
-                currentCategories.push(data.data);
-                localStorage.setItem("categories", JSON.stringify(currentCategories));
+                userProfile.categories?.push(data.data);
+                localStorage.setItem('userProfile', JSON.stringify(userProfile));
             });
         }, err => {
             console.log("Unable to Add category", err)
@@ -59,7 +58,6 @@ export const AddCategory: React.FC<ownProps> = (props: ownProps) => {
                     // userProfileData.categories.push(newCategory);
                     addNewCategory();
                     props.hidePopup();
-
                 }}>
                     Add
                 </button>

src/components/categories/Categories.tsx

@@ -6,15 +6,26 @@ import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circl
 import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { Category } from "../../shared/models/category";
+import { User } from "../../shared/models/user";
 
 export const Categories: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
     const [categoryResult, setCategories] = useState<Array<Category>>([]);
-    const userCategories = JSON.parse(localStorage.getItem("categories") || "[]");
+    const [renderKey, setRenderKey] = useState<number>(0);
     
     useEffect(() => {
-        setCategories(userCategories);
-    }, [])
+        setTimeout(() => {
+            initUserProfile();
+        }, 100);
+        console.log("rendering categories");
+    }, [renderKey])
+
+    const initUserProfile = () => {
+        const userProfile: User = JSON.parse(localStorage.getItem('userProfile') || "");
+        if (userProfile.categories) {
+            setCategories(userProfile.categories);
+        }
+    }
 
     const filterCategories = (text: string) => {
         if (text.length > 0) {
@@ -24,7 +35,7 @@ export const Categories: React.FC = () => {
             console.log(result)
             setCategories(result);
         } else {
-            setCategories(userCategories);
+            initUserProfile();
         }
     }
 
@@ -40,7 +51,7 @@ export const Categories: React.FC = () => {
 
         <header className={styles.tabHeading}>
             <h4> Categories </h4>
-            <p> {userCategories.length} Types </p>
+            <p> {categoryResult.length} Types </p>
         </header>
 
         <section className={styles.searchHolder}>
@@ -69,6 +80,9 @@ export const Categories: React.FC = () => {
                 })}
             </ul>
         </section>
-        {isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} />}
+        {isAddCategoryPopupOpen && <AddCategory hidePopup={() => {
+                setAddCategoryPopupState(false);
+                setRenderKey(renderKey + 1);
+            }} />}
     </section>
 }

src/components/home/Home.tsx

@@ -16,55 +16,25 @@ import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
-import { getUserProfile } from "../../services/user";
-import { MongoUser } from "../../shared/models/user"
-import { getCategoryDetails } from "../../services/category";
-import { MobileCategory } from "../../shared/models/category";
-
+import { User } from "../../shared/models/user";
+import { getAllData } from "../../services/user";
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
     const history = useHistory();
-    const [userProfile, setUserProfile] = useState<MongoUser>()
-    const [allCatagories, setAllCatagories] = useState<Array<MobileCategory>>([])
-
-    const getUserProfileData = () => {
-        getUserProfile().then((data: any) => {
-            let userData: MongoUser = data.data;
-
-            setUserProfile(userData);
-
-            if (userData.categories) {
-                getUserCategoryDetails(userData.categories)
-            }            
+    const [userProfile, setUserProfile] = useState<User>();
+    const [renderKey, setRenderKey] = useState<number>(0);
+    
+    useEffect(() => {
+        getAllData().then((response: any) => {
+            localStorage.setItem('userProfile', JSON.stringify(response.data));
+            setUserProfile(response.data);
         }, (err) => {
-            console.log(err)
-        })
-    }
-
-    const getUserCategoryDetails = (categoryIds: Array<string>) => {
-        let allCategoryDetails: Array<MobileCategory> = [];
-
-        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))
-                }
-
-            }, (err) => {
-                console.log("Error fetching Category Details", err)
-            });
-            
+            window.alert("Failed to fetch deep copy of user profile");
+            console.log(err);
         });
-    }
-
-    useEffect(() => {
-        getUserProfileData();
         console.log("rendering Home");
-    }, [localStorage.getItem('categories')]);
+    }, [renderKey]);
 
     return <section className="page">
 
@@ -108,7 +78,7 @@ export const Home: React.FC = () => {
             <SearchIcon />
         </NavLink>
 
-        <section className={styles.List}>
+        {/* <section className={styles.List}>
             <header className={styles.blockHeader}>
                 <h4>
                     <BookIcon />
@@ -147,9 +117,9 @@ export const Home: React.FC = () => {
                     </div>
                 </li>
             </ul>
-        </section>
+        </section> */}
 
-        <section className={styles.Shelf}>
+        {/* <section className={styles.Shelf}>
             <header className={styles.blockHeader}>
                 <h4>
                     <BookShelfIcon />
@@ -188,13 +158,13 @@ export const Home: React.FC = () => {
                     })
                 })}
             </ul>
-        </section>
+        </section> */}
 
-        <section className={styles.Grid}>
+        { userProfile && <section className={styles.Grid}>
             <header className={styles.blockHeader}>
                 <h4>
                     <GridIcon />
-                    Categories
+                    Categories { <span>({userProfile.categories?.length})</span> }
                 </h4>
                 <NavLink to={'/categories'} className={styles.expandButton}>
                     <ExpandIcon />
@@ -204,7 +174,7 @@ export const Home: React.FC = () => {
                 </button>
             </header>
             <ul>
-                {allCatagories.map((category, index) => {
+                {userProfile.categories?.map((category: any, index) => {
                     return <li key={index} onClick={() => {
                         history.push('/category-details/category_id=' + index);
                     }}>
@@ -218,8 +188,8 @@ export const Home: React.FC = () => {
                     </li>
                 })}
             </ul>
-        </section>
+        </section> }
 
-        {isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} />}
+        {isAddCategoryPopupOpen && <AddCategory hidePopup={() => { setAddCategoryPopupState(false); setRenderKey(renderKey + 1)} } />}
     </section>
 }

src/services/user.ts

@@ -1,9 +1,17 @@
 import axios from "axios";
 import { SERVER_URL, API_TOKEN } from "../App";
 
-export const getUserProfile = async() =>{
+export const getUserProfile = async() => {
     return await axios.get(SERVER_URL + '/user/profile/',
     {
         headers: API_TOKEN
     })
 }
+
+
+export const getAllData = async() => {
+    return await axios.get(SERVER_URL + '/user/deep-copy/',
+    {
+        headers: API_TOKEN
+    })
+}