category details page

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

@@ -24,18 +24,8 @@
 
     h5 {
         font-size: 1.5rem;
-    }
-
-    figure {
-        display: block;
-                
-        img {
-            display: block;
-            width: 4rem;
-            height: 4rem;
-            border-radius: 50%;
-            border: 1px solid var(--creamy-white);
-        }
+        width: calc(100% - 8rem);
+        margin-right: auto;
     }
 }
 

src/components/categories/Categories.tsx

@@ -5,12 +5,12 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s
 import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
 import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
-import { Category } from "../../shared/models/category";
-import { MobileUser, User } from "../../shared/models/user";
+import { MobileCategory } from "../../shared/models/category";
+import { MobileUser } from "../../shared/models/user";
 
 export const Categories: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
-    const [categoryResult, setCategories] = useState<Array<Category>>([]);
+    const [categoryResult, setCategories] = useState<Array<MobileCategory>>([]);
     const [renderKey, setRenderKey] = useState<number>(0);
     
     useEffect(() => {
@@ -18,7 +18,7 @@ export const Categories: React.FC = () => {
             initUserProfile();
         }, 100);
         console.log("rendering categories");
-    }, [renderKey])
+    }, [renderKey]);
 
     const initUserProfile = () => {
         const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
@@ -71,7 +71,7 @@ export const Categories: React.FC = () => {
                         <div className={styles.icon}>
                             {category.icon}
                         </div>
-                        <NavLink to={'/category-details/category_id=' + index} className={styles.info}>
+                        <NavLink to={'/category-details/category_id=' + category._id} className={styles.info}>
                             <label> {category.name} </label>
                             <span> {category.shelves?.length} Shelves </span>
                         </NavLink>

src/components/category-details/CategoryDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from './CategoryDetails.module.scss';
 import { useLocation } from 'react-router';
 import queryString from 'query-string';
@@ -12,27 +12,39 @@ import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg';
 
 import { CircularProgressbar } from "react-circular-progressbar";
 import { NavLink } from "react-router-dom";
-import { IShelf } from "../../structure/shelf";
 import { useHistory } from "react-router-dom";
 import { userProfileData } from "../../App";
 import { PopoverOptions } from "../popover-options/PopoverOptions";
+import { MobileUser } from "../../shared/models/user";
+import { MobileShelf } from "../../shared/models/shelf";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();
-    const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
-    const shelfCount: number = userProfileData.categories[category_id].shelves.length;
-    const [shelfResult, setShelfResult] = useState<Array<IShelf>>(userProfileData.categories[category_id].shelves);
-    const history = useHistory();    
+    const category_id = queryString.parse(location.pathname)['/category-details/category_id'] as string;
+
+    const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
+    const currentCategory = userProfile.categories.find(category => category._id === category_id);
+
+    const [shelfResult, setShelfResult] = useState<Array<MobileShelf>>(currentCategory ? currentCategory.shelves ? currentCategory.shelves : [] : []);
+    const history = useHistory();
+    
+    
+    useEffect(() => {
+        if (currentCategory && currentCategory.shelves) {
+            setShelfResult(currentCategory.shelves);
+        }
+        console.log("Rendering Category details");
+    }, [category_id]);
 
     const searchShelf = (text: string) => {
         if (text.length > 0) {
-            let result = userProfileData.categories[category_id].shelves.filter(shelf => {
+            let result = currentCategory?.shelves?.filter(shelf => {
                 return shelf.name.toLowerCase().includes(text.toLowerCase());
             });
     
-            setShelfResult(result);
+            setShelfResult(result ? result : []);
         } else {
-            setShelfResult(userProfileData.categories[category_id].shelves);
+            setShelfResult(currentCategory ? currentCategory.shelves ? currentCategory.shelves : [] : []);
         }
     }
 
@@ -52,11 +64,11 @@ export const CategoryDetails: React.FC = () => {
 
         <header className={styles.tabHeading}>
             <div className={styles.icon}>
-                { userProfileData.categories[category_id].icon }
+                { currentCategory?.icon }
             </div>
             <div className={styles.headingDetails}>
-                <h4> { userProfileData.categories[category_id].name } </h4>
-                <p> { shelfCount } { shelfCount > 1 ? 'Shelves' : 'Shelf' }  </p>
+                <h4> { currentCategory?.name } </h4>
+                <p> { currentCategory?.shelves ? currentCategory?.shelves.length : 0 } Shelves  </p>
             </div>
 
             <PopoverOptions options={[{
@@ -96,7 +108,7 @@ export const CategoryDetails: React.FC = () => {
                         history.push('/shelf-details/category_id=' + category_id + '&&shelf_id=' + index);
                     }}>
                         <div className={styles.progress}>
-                            <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} 
+                            <CircularProgressbar value={50} strokeWidth={7} 
                                 styles={{
                                     path: {
                                         stroke: 'white',
@@ -108,10 +120,10 @@ export const CategoryDetails: React.FC = () => {
                                     }}
                                 } />
                                 
-                            <span className={styles.text}> { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% </span>
+                            <span className={styles.text}> 50% </span>
                         </div>
                         <h5> { shelf.name } </h5>
-                        <p> { shelf.words.length } words </p>
+                        <p> { shelf.words && shelf.words.length ? shelf.words.length : 0 } words </p>
                     </li>
                 }) }                
             </ul>