Shelf details page

src/components/add-word/AddWord.tsx

@@ -10,6 +10,7 @@ import { getWordResult } from "../../services/words";
 import { MobileWord } from "../../shared/models/word";
 import { MobileUser } from "../../shared/models/user";
 import { updateShelf } from "../../services/shelf";
+import { getAllData } from "../../services/user";
 
 export const AddWord: React.FC = () => {
     const [searchResult, setSearchResult] = useState<Array<MobileWord>>();
@@ -87,7 +88,7 @@ export const AddWord: React.FC = () => {
                 <header>
                     <h5> All Shelves </h5>
                 </header>
-                {userProfile.categories.map((category) => {
+                {userProfile.categories.map((category, categoryIndex) => {
                     return category?.shelves?.map((shelf, shelfIndex) => {
                         return <li key={shelfIndex} onClick={() => {
 
@@ -114,7 +115,15 @@ export const AddWord: React.FC = () => {
                                 });
 
                                 updateShelf(shelf._id, updatedWords).then(() => {
-                                    history.push('/shelf-details/category_id=' + category._id + '&&shelf_id=' + shelf._id);
+                                    
+                                    getAllData().then((response: any) => {
+                                        localStorage.setItem('userProfile', JSON.stringify(response.data));
+                                        history.push('/shelf-details/category_id=' + category._id + '&&shelf_id=' + shelf._id);
+                                    }, (err) => {
+                                        window.alert("Failed to fetch deep copy of user profile");
+                                        console.log(err);
+                                    });
+                                    
                                 }, (err) => {
                                     window.alert("Failed to update");
                                     console.log(err);

src/components/shelf-details/ShelfDetails.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);
-        }
+        margin-right: auto;
+        width: calc(100% - 8rem);
     }
 }
 

src/components/shelf-details/ShelfDetails.tsx

@@ -2,9 +2,6 @@ import React, { useState } from "react";
 import styles from './ShelfDetails.module.scss';
 import { NavLink, useHistory, useLocation } from "react-router-dom";
 import queryString from 'query-string';
-import { ICategory } from "../../structure/category";
-import { IShelf } from "../../structure/shelf";
-import { userProfileData } from "../../App";
 import { ReactComponent as BookIcon } from '../../assets/icons/book-sharp.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
@@ -15,28 +12,34 @@ import { ReactComponent as ExportLine } from '../../assets/icons/export-line.svg
 import { ReactComponent as ShareIcon } from '../../assets/icons/share.svg';
 import { ReactComponent as DeleteIcon } from '../../assets/icons/delete.svg';
 
-import { IWord } from "../../structure/word";
 import { PopoverOptions } from "../popover-options/PopoverOptions";
+import { MobileShelfWord, ShelfWord } from "../../shared/models/shelf";
+import { MobileUser } from "../../shared/models/user";
 
 export const ShelfDetails: React.FC = () => {
     const location = useLocation();
-    const category_id: any = queryString.parse(location.pathname)['/shelf-details/category_id'];
-    const shelf_id: any = queryString.parse(location.pathname)['shelf_id'];
-    const category: ICategory = userProfileData.categories[category_id];
-    const shelf: IShelf = category.shelves[shelf_id];
-    const [searchWordResult, setSearchResult] = useState<Array<IWord>>(shelf.words);
-    const [selectedSegment, setSelectedSegment] = useState<'WORDS' | 'ABOUT'>('WORDS');
     const history = useHistory();
 
+    const category_id = queryString.parse(location.pathname)['/shelf-details/category_id'] as string;
+    const shelf_id = queryString.parse(location.pathname)['shelf_id'] as string;
+
+    
+    const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
+    const currentCategory = userProfile.categories.find(category => category._id === category_id);
+    const currentShelf = currentCategory?.shelves?.find(shelf => shelf._id === shelf_id);
+    
+    const [searchWordResult, setSearchResult] = useState<Array<MobileShelfWord>>(currentShelf?.words ? currentShelf.words : []);
+    const [selectedSegment, setSelectedSegment] = useState<'WORDS' | 'ABOUT'>('WORDS');
+
     const searchWords = (searchWord: string) => {
         if (searchWord.length > 0) {
-            let result = shelf.words.filter((word) => {
-                return word.name.toLowerCase().includes(searchWord.toLowerCase());
+            let result = currentShelf?.words?.filter((word) => {
+                return word.word.name.toLowerCase().includes(searchWord.toLowerCase());
             });
             
-            setSearchResult(result);
+            setSearchResult(result ? result : []);
         } else {
-            setSearchResult(shelf.words);
+            setSearchResult(currentShelf?.words ? currentShelf.words : []);
         }
     }
     
@@ -46,12 +49,7 @@ export const ShelfDetails: React.FC = () => {
                 <ChevronLeft />
             </button>
             
-            <h5> { category.name } </h5>
-
-            <figure>
-                {/* eslint-disable-next-line */}
-                <img src={ userProfileData.image } alt="profile-image" />
-            </figure>
+            <h5> { currentCategory?.name } </h5>
         </header>
         
         <header className={styles.tabHeading}>
@@ -75,13 +73,13 @@ export const ShelfDetails: React.FC = () => {
                 }]} />
             </div>
 
-            <h4> { shelf.name } </h4>
-            <p> { shelf.words.length } Words </p>
+            <h4> { currentShelf?.name } </h4>
+            <p> { currentShelf?.words?.length } Words </p>
 
-            { shelf.words.length > 0 && <div className={styles.progressHolder}>                
+            { currentShelf?.words && currentShelf?.words.length > 0 && <div className={styles.progressHolder}>                
                 <div className={styles.progressBarHolder}>
-                    <div className={styles.info}> <h6> Revision </h6> <span> { shelf.revisedWords.length * 100/ shelf.words.length }% </span> </div>
-                    <div className={styles.progressBar}> <span className={styles.progress} style={{ width: shelf.revisedWords.length * 100/ shelf.words.length + '%' }}></span> </div>
+                    <div className={styles.info}> <h6> Revision </h6> <span> 50% </span> </div>
+                    <div className={styles.progressBar}> <span className={styles.progress} style={{ width: 50 + '%' }}></span> </div>
                 </div>
                 <NavLink to={'/revise'} className={styles.reviseButton}>
                     <BookIcon />
@@ -110,19 +108,18 @@ export const ShelfDetails: React.FC = () => {
         {   selectedSegment === 'WORDS' &&
             <ul className={styles.searchResult}>
                 { searchWordResult.map((word, index) => {
-                    return <li key={word.name} onClick={() => {
-                        history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + index);
+                    return <li key={index} onClick={() => {
+                        history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + word.word._id);
                     }}>
-                        { word.tag && <span className={styles.tag}> {word.tag} </span> }
                         <header>
-                            <h4> { word.name } <span> { word.pronounciation } </span> </h4>
+                            <h4> { word.word.name } <span> { word.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.word.grammaticalDetails[0]?.type} </span>
+                            <p> {word.word.grammaticalDetails[0]?.description} </p>
                         </div>
                     </li>
                 }) }
@@ -133,10 +130,7 @@ export const ShelfDetails: React.FC = () => {
             selectedSegment === 'ABOUT' &&
             <div className={styles.about}>
                 <p>
-                    { shelf.description }
-                </p>
-                <p>
-                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum quam eius corporis magnam velit debitis dignissimos, est a laudantium sapiente possimus omnis quis, voluptates quae praesentium expedita repellat modi optio!
+                    { currentShelf?.description }
                 </p>
             </div>
         }

src/shared

@@ -1 +1 @@
-Subproject commit 7627b89214ea79eaa139e1dab7e68a88bc322fe4
+Subproject commit a7c4fafc387be611e9c4892dcf1f1ff00d65b31f