Add word page modal UI bug fix

src/components/add-word/AddWord.module.scss

@@ -373,7 +373,7 @@
 }
 
 .AddShelfButton {
-    position: fixed;
+    position: sticky;
     bottom: 0;
     left: 0;
     padding: 2rem 3rem;

src/components/home/Home.tsx

@@ -130,9 +130,9 @@ export const Home: React.FC = () => {
                 </NavLink>
             </header>
             <ul>
-                {userProfile && userProfile.categories.map((category, categoryIndex) => {
+                {userProfile && userProfile.categories.map((category) => {
                     return category?.shelves?.map((shelf, shelfIndex) => {
-                        return <li key={shelfIndex} onClick={() => {
+                        return shelf.words && <li key={shelfIndex} onClick={() => {
                             history.push('/shelf-details/category_id=' + category._id + '&&shelf_id=' + shelf._id);
                         }}>
                             <div className={styles.progress}>
@@ -164,7 +164,7 @@ export const Home: React.FC = () => {
             <header className={styles.blockHeader}>
                 <h4>
                     <GridIcon />
-                    Categories { <span>({userProfile.categories.length})</span> }
+                    Active Categories
                 </h4>
                 <NavLink to={'/categories'} className={styles.expandButton}>
                     <ExpandIcon />
@@ -175,7 +175,7 @@ export const Home: React.FC = () => {
             </header>
             <ul>
                 {userProfile.categories?.map((category, index) => {
-                    return <li key={index} onClick={() => {
+                    return category.shelves && <li key={index} onClick={() => {
                         history.push('/category-details/category_id=' + category._id);
                     }}>
                         <div className={styles.icon}>

src/components/word-details/WordDetails.tsx

@@ -14,7 +14,7 @@ import { getAllData } from "../../services/user";
 
 export const WordDetails: React.FC = () => {
     const location = useLocation();
-    
+
     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;
@@ -32,62 +32,63 @@ export const WordDetails: React.FC = () => {
     useEffect(() => {
         console.log("Rendering Word details");
     }, [notes])
-    
-    return <section className="modalPage">
-        <header className={styles.navHeader}>
-            <button onClick={() => window.history.back()}>
-                <ChevronLeft />
-            </button>
-            
-            <h5> { currentShelf?.name } </h5>
-        </header>
-
-        <section className={styles.cardDetails}>
-            <div className={styles.container}>
-                <button className={styles.audioButton}>
-                    <SpeakerIcon />
-                </button>
-                <h2> { currentWord?.word.name } <span> { currentWord?.word.pronounciation?.text } </span> </h2>
-                <button className={styles.moreButton}>
-                    <MoreIcon />
+
+    return <div>
+        <section className="modalPage">
+            <header className={styles.navHeader}>
+                <button onClick={() => window.history.back()}>
+                    <ChevronLeft />
                 </button>
-            </div>
-
-            <ul className={styles.multipleMeaningList}>
-                { currentWord?.word.grammaticalDetails.map((detail, index) => {
-                    return <li key={index}>
-                        <h6> { detail.type } </h6>
-                        <p> { detail.description } </p>
-                        { detail.examples?.map((example, index) => <p key={index} className={styles.sentence}> "{ example }" <span> - { detail.context } </span> </p>) }
-                    </li>
-                }) }
-                { currentWord?.word.similarWords && <li>
-                    <h6> Synonyms: </h6>
-                    <div className={styles.wordLinks}>
-                        { 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>
-        </section>
 
-        <section className={styles.notes}>
-            <header>
-                <h5> My Notes: </h5>
-                <button onClick={() => setShowAddWord(true)}> Add Notes </button>
+                <h5> {currentShelf?.name} </h5>
             </header>
-            { notes && <ol>
-                { notes.map((note, index) => <li key={index}> {note} </li>) }
-            </ol> }
-        </section>
 
+            <section className={styles.cardDetails}>
+                <div className={styles.container}>
+                    <button className={styles.audioButton}>
+                        <SpeakerIcon />
+                    </button>
+                    <h2> {currentWord?.word.name} <span> {currentWord?.word.pronounciation?.text} </span> </h2>
+                    <button className={styles.moreButton}>
+                        <MoreIcon />
+                    </button>
+                </div>
+
+                <ul className={styles.multipleMeaningList}>
+                    {currentWord?.word.grammaticalDetails.map((detail, index) => {
+                        return <li key={index}>
+                            <h6> {detail.type} </h6>
+                            <p> {detail.description} </p>
+                            {detail.examples?.map((example, index) => <p key={index} className={styles.sentence}> "{example}" <span> - {detail.context} </span> </p>)}
+                        </li>
+                    })}
+                    {currentWord?.word.similarWords && <li>
+                        <h6> Synonyms: </h6>
+                        <div className={styles.wordLinks}>
+                            {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>
+            </section>
+
+            <section className={styles.notes}>
+                <header>
+                    <h5> My Notes: </h5>
+                    <button onClick={() => setShowAddWord(true)}> Add Notes </button>
+                </header>
+                {notes && <ol>
+                    {notes.map((note, index) => <li key={index}> {note} </li>)}
+                </ol>}
+            </section>
+        </section>
 
-        { showAddWord && <div className={styles.popupHolder}>
+        {showAddWord && <div className={styles.popupHolder}>
             <div className={styles.background} onClick={() => setShowAddWord(false)}></div>
             <section className={styles.popup}>
                 <header>
@@ -100,48 +101,47 @@ export const WordDetails: React.FC = () => {
                     }}></textarea>
 
                     <button className={styles.addButton} disabled={!newNote}
-                    onClick={() => {
-                        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);
+                        onClick={() => {
+                            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,
+                                    }
                                 });
 
-                            },(e) => {
-                                alert("failed to update");
-                                console.log(e);
-                            });
-                            
-                            setShowAddWord(false);
-                        }                        
-                    }}>
+                                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>
                 </section>
             </section>
-        </div> }
-
-    </section>
+        </div>}
+    </div>
 }