Word details page + notes

src/components/shelf-details/ShelfDetails.tsx

@@ -112,7 +112,7 @@ export const ShelfDetails: React.FC = () => {
                         history.push('/word-details/category_id=' + category_id + '&&shelf_id=' + shelf_id + '&&word_id=' + word.word._id);
                     }}>
                         <header>
-                            <h4> { word.word.name } <span> { word.word.pronounciation } </span> </h4>
+                            <h4> { word.word.name } <span> { word.word.pronounciation?.text } </span> </h4>
                             <button>
                                 <SpeakerIcon />
                             </button>

src/components/word-details/WordDetails.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);
     }
 }
 
@@ -146,6 +136,11 @@
 
                 &.sentence {
                     opacity: 0.7;
+
+                    span {
+                        font-style: italic;
+                        font-size: 1.2rem;
+                    }
                 }
             }
 

src/components/word-details/WordDetails.tsx

@@ -1,25 +1,37 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from './WordDetails.module.scss';
 
-import { userProfileData } from "../../App";
 import queryString from 'query-string';
 import { useLocation } from "react-router-dom";
-import { IShelf } from "../../structure/shelf";
-import { IWord } from "../../structure/word";
+
 import { ReactComponent as SpeakerIcon } from '../../assets/icons/speaker.svg';
 import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
 import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
 import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
+import { MobileUser } from "../../shared/models/user";
+import { updateShelf } from "../../services/shelf";
+import { getAllData } from "../../services/user";
 
 export const WordDetails: React.FC = () => {
     const location = useLocation();
-    const category_id: any = queryString.parse(location.pathname)['/word-details/category_id'];
-    const shelf_id: any = queryString.parse(location.pathname)['shelf_id'];
-    const word_id: any = queryString.parse(location.pathname)['word_id'];
-    const shelf: IShelf = userProfileData.categories[category_id].shelves[shelf_id];
-    const word: IWord = shelf.words[word_id];
+    
+    const category_id = queryString.parse(location.pathname)['/word-details/category_id'] as string;
+    const shelf_id = queryString.parse(location.pathname)['shelf_id'] as string;
+    const word_id = queryString.parse(location.pathname)['word_id'] as string;
+
+    const userProfile: MobileUser = JSON.parse(localStorage.getItem('userProfile') || "");
+    const currentCategory = userProfile.categories.find(category => category._id === category_id);
+    let currentShelf = currentCategory?.shelves?.find(shelf => shelf._id === shelf_id);
+    const currentWord = currentShelf?.words?.find(word => word.word._id === word_id);
+
+    const [notes, setNotes] = useState<Array<string>>(currentWord?.notes ? currentWord.notes : []);
+
     const [showAddWord, setShowAddWord] = useState<Boolean>(false);
     const [newNote, setNewNote] = useState<string>('');
+
+    useEffect(() => {
+        console.log("Rendering Word details");
+    }, [notes])
     
     return <section className="modalPage">
         <header className={styles.navHeader}>
@@ -27,38 +39,38 @@ export const WordDetails: React.FC = () => {
                 <ChevronLeft />
             </button>
             
-            <h5> { shelf.name } </h5>
-
-            <figure>
-                {/* eslint-disable-next-line */}
-                <img src={ userProfileData.image } alt="profile-image" />
-            </figure>
+            <h5> { currentShelf?.name } </h5>
         </header>
 
         <section className={styles.cardDetails}>
-            { word.tag && <span className={styles.tag}> { word.tag } </span> }
             <div className={styles.container}>
                 <button className={styles.audioButton}>
                     <SpeakerIcon />
                 </button>
-                <h2> { word.name } <span> { word.pronounciation } </span> </h2>                    
+                <h2> { currentWord?.word.name } <span> { currentWord?.word.pronounciation?.text } </span> </h2>
                 <button className={styles.moreButton}>
                     <MoreIcon />
                 </button>
             </div>
 
             <ul className={styles.multipleMeaningList}>
-                { word.grammaticalDetails.map((detail, index) => {
+                { currentWord?.word.grammaticalDetails.map((detail, index) => {
                     return <li key={index}>
-                        <h6> { detail.typeName } </h6>
+                        <h6> { detail.type } </h6>
                         <p> { detail.description } </p>
-                        { detail.sentence && <p className={styles.sentence}> "{ detail.sentence }" </p> }
+                        { detail.examples?.map((example, index) => <p key={index} className={styles.sentence}> "{ example }" <span> - { detail.context } </span> </p>) }
                     </li>
                 }) }
-                { word.similarWords.length > 0 && <li>
-                    <h6> Similar: </h6>
+                { currentWord?.word.similarWords && <li>
+                    <h6> Synonyms: </h6>
                     <div className={styles.wordLinks}>
-                        { word.similarWords.map((similarWord, index) => <button key={index}> { similarWord } </button>) }
+                        { currentWord.word.similarWords.map((similarWord, index) => <button key={index}> { similarWord } </button>) }
+                    </div>
+                </li> }
+                { currentWord?.word.oppositeWords && <li>
+                    <h6> Antonyms: </h6>
+                    <div className={styles.wordLinks}>
+                        { currentWord.word.oppositeWords.map((similarWord, index) => <button key={index}> { similarWord } </button>) }
                     </div>
                 </li> }
             </ul>
@@ -69,8 +81,8 @@ export const WordDetails: React.FC = () => {
                 <h5> My Notes: </h5>
                 <button onClick={() => setShowAddWord(true)}> Add Notes </button>
             </header>
-            { word.notes && <ol>
-                { word.notes.map((note, index) => <li> {note} </li>) }
+            { notes && <ol>
+                { notes.map((note, index) => <li key={index}> {note} </li>) }
             </ol> }
         </section>
 
@@ -83,14 +95,47 @@ export const WordDetails: React.FC = () => {
                     <h5> Add Category </h5>
                 </header>
                 <section className={styles.form}>
-                    <textarea placeholder={'Enter your notes here'} onInput={(e) => {
+                    <textarea defaultValue={newNote} placeholder={'Enter your notes here'} onInput={(e) => {
                         setNewNote(e.currentTarget.value);
                     }}></textarea>
 
                     <button className={styles.addButton} disabled={!newNote}
                     onClick={() => {
-                        userProfileData.categories[category_id].shelves[shelf_id].words[word_id].notes?.push(newNote);
-                        setShowAddWord(false);
+                        let index = currentShelf?.words?.findIndex(word => word.word._id === word_id);
+                        
+                        if (index !== undefined && index !== -1 && currentShelf?.words) {
+                            console.log(index);
+                        
+                            let temp = notes;
+                            temp.push(newNote);
+
+                            currentShelf.words[index].notes = notes;
+
+                            let updatedWords = currentShelf.words.map((word: any) => {
+                                return {
+                                    ...word,
+                                    word: word.word._id,
+                                }
+                            });
+        
+                            updateShelf(shelf_id, updatedWords).then(() => {
+                                setNotes(temp);
+                                setNewNote('');
+
+                                getAllData().then((response: any) => {
+                                    localStorage.setItem('userProfile', JSON.stringify(response.data));
+                                }, (err) => {
+                                    window.alert("Failed to fetch deep copy of user profile");
+                                    console.log(err);
+                                });
+
+                            },(e) => {
+                                alert("failed to update");
+                                console.log(e);
+                            });
+                            
+                            setShowAddWord(false);
+                        }                        
                     }}>
                         Add
                     </button>