Active shelves integrated + Pull shared module

src/components/home/Home.tsx

@@ -15,9 +15,9 @@ import { CircularProgressbar } from 'react-circular-progressbar';
 import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
-import { userProfileData } from "../../App";
 import { MobileUser } from "../../shared/models/user";
 import { getAllData } from "../../services/user";
+import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg';
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
@@ -58,7 +58,7 @@ export const Home: React.FC = () => {
                     } />
                 {/* eslint-disable-next-line */}
                 <img src="https://www.lakecountyin.org/images/user-icon-placeholder.png" alt="profile-image" />
-                {userProfileData.medal.icon}
+                <InternBadge />
             </div>
             <div className={styles.userDetails}>
                 <h2> {userProfile?.name} </h2>
@@ -78,7 +78,7 @@ export const Home: React.FC = () => {
             <SearchIcon />
         </NavLink>
 
-        {/* <section className={styles.List}>
+        <section className={styles.List}>
             <header className={styles.blockHeader}>
                 <h4>
                     <BookIcon />
@@ -117,7 +117,7 @@ export const Home: React.FC = () => {
                     </div>
                 </li>
             </ul>
-        </section> */}
+        </section>
 
         <section className={styles.Shelf}>
             <header className={styles.blockHeader}>
@@ -130,13 +130,13 @@ export const Home: React.FC = () => {
                 </NavLink>
             </header>
             <ul>
-                {userProfileData.categories.map((category, categoryIndex) => {
-                    return category.shelves.map((shelf, shelfIndex) => {
+                {userProfile && userProfile.categories.map((category, categoryIndex) => {
+                    return category?.shelves?.map((shelf, shelfIndex) => {
                         return <li key={shelfIndex} onClick={() => {
-                            history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex);
+                            history.push('/shelf-details/category_id=' + category._id + '&&shelf_id=' + shelf._id);
                         }}>
                             <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',
@@ -149,10 +149,10 @@ export const Home: 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>
+                            { shelf.words && <p> {shelf.words.length} words </p> }
                             <p> {category.name} </p>
                         </li>
                     })

src/shared

@@ -1 +1 @@
-Subproject commit d222fdf4c43980569323c9d50371c2d9be6b03b0
+Subproject commit a3da6aa10843c3f2ecdd324879561c6bbdf257d0