From dddd8308aa96dfb422f13320aac61df3bbb0f7d1 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 28 Oct 2021 18:16:32 +0530 Subject: [PATCH] connected get all data API to categories and fetching data post add category locally. --- src/components/add-category/AddCategory.tsx | 12 ++-- src/components/categories/Categories.tsx | 26 ++++++-- src/components/home/Home.tsx | 72 ++++++--------------- src/services/user.ts | 10 ++- 4 files changed, 55 insertions(+), 65 deletions(-) diff --git a/src/components/add-category/AddCategory.tsx b/src/components/add-category/AddCategory.tsx index bf1d2e3..5c281f3 100644 --- a/src/components/add-category/AddCategory.tsx +++ b/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 = [, , , ] export const AddCategory: React.FC = (props: ownProps) => { const [newCategory, setnewCategory] = useState(''); const [showIconSet, setShowIconSet] = useState(false); + const userProfile: User = JSON.parse(localStorage.getItem('userProfile') || ""); - function addNewCategory() { - let currentCategories: Array = 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 = (props: ownProps) => { // userProfileData.categories.push(newCategory); addNewCategory(); props.hidePopup(); - }}> Add diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx index 59bfc5a..831bfb3 100644 --- a/src/components/categories/Categories.tsx +++ b/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(false); const [categoryResult, setCategories] = useState>([]); - const userCategories = JSON.parse(localStorage.getItem("categories") || "[]"); + const [renderKey, setRenderKey] = useState(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 = () => {

Categories

-

{userCategories.length} Types

+

{categoryResult.length} Types

@@ -69,6 +80,9 @@ export const Categories: React.FC = () => { })}
- {isAddCategoryPopupOpen && setAddCategoryPopupState(false)} />} + {isAddCategoryPopupOpen && { + setAddCategoryPopupState(false); + setRenderKey(renderKey + 1); + }} />} } \ No newline at end of file diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index 69e5f7c..88fc008 100644 --- a/src/components/home/Home.tsx +++ b/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(false); const history = useHistory(); - const [userProfile, setUserProfile] = useState() - const [allCatagories, setAllCatagories] = useState>([]) - - const getUserProfileData = () => { - getUserProfile().then((data: any) => { - let userData: MongoUser = data.data; - - setUserProfile(userData); - - if (userData.categories) { - getUserCategoryDetails(userData.categories) - } + const [userProfile, setUserProfile] = useState(); + const [renderKey, setRenderKey] = useState(0); + + useEffect(() => { + getAllData().then((response: any) => { + localStorage.setItem('userProfile', JSON.stringify(response.data)); + setUserProfile(response.data); }, (err) => { - console.log(err) - }) - } - - const getUserCategoryDetails = (categoryIds: Array) => { - let allCategoryDetails: Array = []; - - 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
@@ -108,7 +78,7 @@ export const Home: React.FC = () => { -
+ {/*

@@ -147,9 +117,9 @@ export const Home: React.FC = () => { -

+
*/} -
+ {/*

@@ -188,13 +158,13 @@ export const Home: React.FC = () => { }) })} -

+
*/} -
+ { userProfile &&

- Categories + Categories { ({userProfile.categories?.length}) }

@@ -204,7 +174,7 @@ export const Home: React.FC = () => {
    - {allCatagories.map((category, index) => { + {userProfile.categories?.map((category: any, index) => { return
  • { history.push('/category-details/category_id=' + index); }}> @@ -218,8 +188,8 @@ export const Home: React.FC = () => {
    • })}
-
+
} - {isAddCategoryPopupOpen && setAddCategoryPopupState(false)} />} + {isAddCategoryPopupOpen && { setAddCategoryPopupState(false); setRenderKey(renderKey + 1)} } />}
} \ No newline at end of file diff --git a/src/services/user.ts b/src/services/user.ts index cfabbf6..9db2541 100644 --- a/src/services/user.ts +++ b/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 + }) +} \ No newline at end of file