diff --git a/src/components/add-word/AddWord.tsx b/src/components/add-word/AddWord.tsx index 0c48eb9..d845f7a 100644 --- a/src/components/add-word/AddWord.tsx +++ b/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>(); @@ -87,7 +88,7 @@ export const AddWord: React.FC = () => {
All Shelves
- {userProfile.categories.map((category) => { + {userProfile.categories.map((category, categoryIndex) => { return category?.shelves?.map((shelf, shelfIndex) => { return
  • { @@ -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); diff --git a/src/components/shelf-details/ShelfDetails.module.scss b/src/components/shelf-details/ShelfDetails.module.scss index 4b784e8..9821e31 100644 --- a/src/components/shelf-details/ShelfDetails.module.scss +++ b/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); } } diff --git a/src/components/shelf-details/ShelfDetails.tsx b/src/components/shelf-details/ShelfDetails.tsx index 58ac59f..5fa62ff 100644 --- a/src/components/shelf-details/ShelfDetails.tsx +++ b/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>(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>(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 = () => { -
    { category.name }
    - -
    - {/* eslint-disable-next-line */} - profile-image -
    +
    { currentCategory?.name }
    @@ -75,13 +73,13 @@ export const ShelfDetails: React.FC = () => { }]} /> -

    { shelf.name }

    -

    { shelf.words.length } Words

    +

    { currentShelf?.name }

    +

    { currentShelf?.words?.length } Words

    - { shelf.words.length > 0 &&
    + { currentShelf?.words && currentShelf?.words.length > 0 &&
    -
    Revision
    { shelf.revisedWords.length * 100/ shelf.words.length }%
    -
    +
    Revision
    50%
    +
    @@ -110,19 +108,18 @@ export const ShelfDetails: React.FC = () => { { selectedSegment === 'WORDS' &&
      { searchWordResult.map((word, index) => { - return
    • { - history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + index); + return
    • { + history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + word.word._id); }}> - { word.tag && {word.tag} }
      -

      { word.name } { word.pronounciation }

      +

      { word.word.name } { word.word.pronounciation }

      - { word.grammaticalDetails[0].typeName } -

      { word.grammaticalDetails[0].description }

      + {word.word.grammaticalDetails[0]?.type} +

      {word.word.grammaticalDetails[0]?.description}

      • }) } @@ -133,10 +130,7 @@ export const ShelfDetails: React.FC = () => { selectedSegment === 'ABOUT' &&

      - { shelf.description } -

      -

      - 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 }

      } diff --git a/src/shared b/src/shared index 7627b89..a7c4faf 160000 --- a/src/shared +++ b/src/shared @@ -1 +1 @@ -Subproject commit 7627b89214ea79eaa139e1dab7e68a88bc322fe4 +Subproject commit a7c4fafc387be611e9c4892dcf1f1ff00d65b31f