anamnesis/src/components/word-details/WordDetails.tsx

import React, { 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';

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 [showAddWord, setShowAddWord] = useState<Boolean>(false);
    const [newNote, setNewNote] = useState<string>('');
    
    return <section className="modalPage">
        <header className={styles.navHeader}>
            <button onClick={() => window.history.back()}>
                <ChevronLeft />
            </button>
            
            <h5> { shelf.name } </h5>

            <figure>
                {/* eslint-disable-next-line */}
                <img src={ userProfileData.image } alt="profile-image" />
            </figure>
        </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>                    
                <button className={styles.moreButton}>
                    <MoreIcon />
                </button>
            </div>

            <ul className={styles.multipleMeaningList}>
                { word.grammaticalDetails.map((detail, index) => {
                    return <li key={index}>
                        <h6> { detail.typeName } </h6>
                        <p> { detail.description } </p>
                        { detail.sentence && <p className={styles.sentence}> "{ detail.sentence }" </p> }
                    </li>
                }) }
                { word.similarWords.length > 0 && <li>
                    <h6> Similar: </h6>
                    <div className={styles.wordLinks}>
                        { word.similarWords.map((similarWord, index) => <button key={index}> { similarWord } </button>) }
                    </div>
                </li> }
            </ul>
        </section>

        <section className={styles.notes}>
            <header>
                <h5> My Notes: </h5>
                <button onClick={() => setShowAddWord(true)}> Add Notes </button>
            </header>
            { word.notes && <ol>
                { word.notes.map((note, index) => <li> {note} </li>) }
            </ol> }
        </section>


        { showAddWord && <div className={styles.popupHolder}>
            <div className={styles.background} onClick={() => setShowAddWord(false)}></div>
            <section className={styles.popup}>
                <header>
                    <PlusIcon />
                    <h5> Add Category </h5>
                </header>
                <section className={styles.form}>
                    <textarea 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);
                    }}>
                        Add
                    </button>
                </section>
            </section>
        </div> }

    </section>
}