moved data to app.tsx for better usage and centralization

src/App.tsx

@@ -8,6 +8,56 @@ import { AddShelf } from "./components/add-shelf/AddShelf";
 import { CategoryDetails } from "./components/category-details/CategoryDetails";
 import { ShelfDetails } from "./components/shelf-details/ShelfDetails";
 
+import { ReactComponent as BookMarkIcon } from './assets/icons/bookmark.svg';
+import { ReactComponent as PersonSpeakerIcon } from './assets/icons/user-speaker.svg';
+import { ReactComponent as BrainIcon } from './assets/icons/bx-brain.svg';
+import { ReactComponent as InternBadge } from './assets/icons/intern-badge.svg';
+import { ReactComponent as TimeIcon } from './assets/icons/time.svg';
+
+import { IProfile } from "./structure/profile";
+import { ALL_WORDS } from "./data/all-words";
+
+
+export var userProfileData : IProfile = {
+    name: 'Neymar Jr',
+    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU',
+    medal: {
+        name: 'Intern badge',
+        minValue: 0,
+        maxValue: 100,
+        icon: <InternBadge />
+    },
+    categories: [{
+        name: 'Vocabulary',
+        icon: <TimeIcon />,
+        shelves: [{
+            name: 'All Words',
+            words: [ALL_WORDS[0], ALL_WORDS[1], ALL_WORDS[2], ALL_WORDS[3]],
+            revisedWords: [ALL_WORDS[1]],
+            description: 'All Words that I use on a daily basis',
+            viewPermission: 'PUBLIC'
+        }]
+    }, {
+        name: 'Books',
+        icon: <BookMarkIcon />,
+        shelves: [{
+            name: 'Sapiens',
+            words: [ALL_WORDS[3]],
+            revisedWords: [ALL_WORDS[3]],
+            description: 'Sapiens book complex words',
+            viewPermission: 'PUBLIC'
+        }]
+    }, {
+        name: 'GRE',
+        icon: <BrainIcon />,
+        shelves: []
+    }, {
+        name: 'ELTS',
+        icon: <PersonSpeakerIcon />,
+        shelves: []
+    }]
+};
+
 function App() {
     return (
         <BrowserRouter>

src/components/add-category/AddCategory.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
 import { ReactComponent as TimerIcon } from '../../assets/icons/timer.svg';
 import { ReactComponent as TextIcon } from '../../assets/icons/text.svg';
 import { ICategory } from "../../structure/category";
-import { userProfileData } from "../home/Home";
+import { userProfileData } from "../../App";
 
 type ownProps = {
     hidePopup: () => void

src/components/add-shelf/AddShelf.module.scss

@@ -149,19 +149,19 @@
             }
         }
 
-        &:nth-child(5n - 4) .icon {
+        &:nth-child(4n - 4) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 3) .icon {
+        &:nth-child(4n - 3) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 2) .icon {
+        &:nth-child(4n - 2) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 1) .icon {
+        &:nth-child(4n - 1) .icon {
             background-color: var(--teal);
         }
     }

src/components/add-shelf/AddShelf.tsx

@@ -3,8 +3,8 @@ import styles from './AddShelf.module.scss';
 import { ReactComponent as CloseIcon } from '../../assets/icons/close.svg';
 import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
 import { ReactComponent as CheckCircle } from '../../assets/icons/check.svg';
-import { userProfileData } from "../home/Home";
 import { IShelf } from "../../structure/shelf";
+import { userProfileData } from "../../App";
 
 export const AddShelf: React.FC = () => {
     const [selectedCategoryIndex, setCategoryIndex] = useState<number>();

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

@@ -233,19 +233,19 @@
         align-items: center;
         margin: 0 0 2rem;
 
-        &:nth-child(5n - 4) .icon {
+        &:nth-child(4n - 4) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 3) .icon {
+        &:nth-child(4n - 3) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 2) .icon {
+        &:nth-child(4n - 2) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 1) .icon {
+        &:nth-child(4n - 1) .icon {
             background-color: var(--teal);
         }
     }

src/components/add-word/AddWord.tsx

@@ -7,8 +7,8 @@ import { ReactComponent as AddIcon } from '../../assets/icons/plus.svg';
 
 import { IWord } from "../../structure/word";
 import { ALL_WORDS } from "../../data/all-words";
-import { userProfileData } from "../home/Home";
 import { NavLink } from "react-router-dom";
+import { userProfileData } from "../../App";
 
 export const AddWord: React.FC = () => {
     const [searchWordResult, setSearchResult] = useState<Array<IWord>>([]);

src/components/categories/Categories.module.scss

@@ -145,19 +145,19 @@ $block-padding: 2.5rem 2rem;
         justify-content: space-between;
         align-items: center;
 
-        &:nth-child(5n - 4) .icon {
+        &:nth-child(4n - 4) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 3) .icon {
+        &:nth-child(4n - 3) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 2) .icon {
+        &:nth-child(4n - 2) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 1) .icon {
+        &:nth-child(4n - 1) .icon {
             background-color: var(--teal);
         }
     }

src/components/categories/Categories.tsx

@@ -3,11 +3,10 @@ import styles from './Categories.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
-
-import { userProfileData } from "../home/Home";
 import { NavLink } from "react-router-dom";
 import { ICategory } from "../../structure/category";
 import { AddCategory } from "../add-category/AddCategory";
+import { userProfileData } from "../../App";
 
 export const Categories: React.FC = () => {
     const [categoryResult, setCategories] = useState<Array<ICategory>>(userProfileData.categories);
@@ -36,7 +35,7 @@ export const Categories: React.FC = () => {
         
         <header className={styles.tabHeading}>
             <h4> Categories </h4>
-            <p> 4 Types </p>
+            <p> { userProfileData.categories.length } Types </p>
         </header>
         
         <section className={styles.searchHolder}>

src/components/category-details/CategoryDetails.module.scss

@@ -80,19 +80,19 @@
         border-radius: 3rem;
         padding: 1.5rem;
 
-        &:nth-child(5n - 1) {
+        &:nth-child(4n - 1) {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 2) {
+        &:nth-child(4n - 2) {
             background-color: var(--blue);
         }        
 
-        &:nth-child(5n - 3) {
+        &:nth-child(4n - 3) {
             background-color: var(--teal);
         }
 
-        &:nth-child(5n - 4) {
+        &:nth-child(4n - 4) {
             background-color: var(--red);
         }
     }

src/components/category-details/CategoryDetails.tsx

@@ -7,11 +7,11 @@ import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.s
 import { ReactComponent as MoreIcon } from '../../assets/icons/more-alt.svg';
 import { ReactComponent as PlusCircledIcon } from '../../assets/icons/plus-circle.svg';
 
-import { userProfileData } from "../home/Home";
 import { CircularProgressbar } from "react-circular-progressbar";
 import { NavLink } from "react-router-dom";
 import { IShelf } from "../../structure/shelf";
 import { useHistory } from "react-router-dom";
+import { userProfileData } from "../../App";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();

src/components/home/Home.module.scss

@@ -161,19 +161,19 @@ $block-padding: 0 2rem;
         align-items: center;
         margin: 2rem 0;
 
-        &:nth-child(5n - 4) .icon {
+        &:nth-child(4n - 4) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 3) .icon {
+        &:nth-child(4n - 3) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 2) .icon {
+        &:nth-child(4n - 2) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 1) .icon {
+        &:nth-child(4n - 1) .icon {
             background-color: var(--teal);
         }
     }
@@ -255,19 +255,19 @@ $block-padding: 0 2rem;
         border-radius: 3rem;
         padding: 1.5rem;
 
-        &:nth-child(5n - 4) {
+        &:nth-child(4n - 4) {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 3) {
+        &:nth-child(4n - 3) {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 2) {
+        &:nth-child(4n - 2) {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 1) {
+        &:nth-child(4n - 1) {
             background-color: var(--teal);
         }       
     }
@@ -305,19 +305,19 @@ $block-padding: 0 2rem;
         align-items: center;
         margin: 2rem 0;
 
-        &:nth-child(5n - 4) .icon {
+        &:nth-child(4n - 4) .icon {
             background-color: var(--orange);
         }
 
-        &:nth-child(5n - 3) .icon {
+        &:nth-child(4n - 3) .icon {
             background-color: var(--blue);
         }
 
-        &:nth-child(5n - 2) .icon {
+        &:nth-child(4n - 2) .icon {
             background-color: var(--red);
         }
 
-        &:nth-child(5n - 1) .icon {
+        &:nth-child(4n - 1) .icon {
             background-color: var(--teal);
         }
     }

src/components/home/Home.tsx

@@ -3,7 +3,6 @@ import styles from './Home.module.scss';
 import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
 import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
 import { ReactComponent as BookIcon } from '../../assets/icons/readme.svg';
-import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
 import { ReactComponent as BookShelfIcon } from '../../assets/icons/bookshelf.svg';
 import { ReactComponent as CalendarIcon } from '../../assets/icons/bx-calendar.svg';
 import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
@@ -12,54 +11,11 @@ import { ReactComponent as CheckCircleIcon } from '../../assets/icons/check-circ
 import { ReactComponent as ExpandIcon } from '../../assets/icons/expand.svg';
 import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
 import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg';
-import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
-import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
-import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg';
 import { CircularProgressbar } from 'react-circular-progressbar';
-import { IProfile } from "../../structure/profile";
 import { NavLink } from "react-router-dom";
 import { AddCategory } from "../add-category/AddCategory";
 import { useHistory } from "react-router-dom";
-
-export var userProfileData : IProfile = {
-    name: 'Neymar Jr',
-    image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU',
-    medal: {
-        name: 'Intern badge',
-        minValue: 0,
-        maxValue: 100,
-        icon: <InternBadge />
-    },
-    categories: [{
-        name: 'Vocabulary',
-        icon: <TimeIcon />,
-        shelves: [{
-            name: 'All Words',
-            words: [],
-            revisedWords: [],
-            description: 'All Words that I use on a daily basis',
-            viewPermission: 'PUBLIC'
-        }]
-    }, {
-        name: 'Books',
-        icon: <BookMarkIcon />,
-        shelves: [{
-            name: 'Sapiens',
-            words: [],
-            revisedWords: [],
-            description: 'Sapiens book complex words',
-            viewPermission: 'PUBLIC'
-        }]
-    }, {
-        name: 'GRE',
-        icon: <BrainIcon />,
-        shelves: []
-    }, {
-        name: 'ELTS',
-        icon: <PersonSpeakerIcon />,
-        shelves: []
-    }]
-};
+import { userProfileData } from "../../App";
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);

src/components/shelf-details/ShelfDetails.tsx

@@ -1,14 +1,18 @@
 import React from "react";
 import styles from './ShelfDetails.module.scss';
 import { ReactComponent as ChevronLeft } from '../../assets/icons/chevron-left.svg';
-import { userProfileData } from "../home/Home";
 import { useLocation } from "react-router-dom";
 import queryString from 'query-string';
+import { ICategory } from "../../structure/category";
+import { IShelf } from "../../structure/shelf";
+import { userProfileData } from "../../App";
 
 export const ShelfDetails: React.FC = () => {
     const location = useLocation();
-    const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
+    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];
     
     return <section className="modalPage">
         <header className={styles.navHeader}>
@@ -16,12 +20,18 @@ export const ShelfDetails: React.FC = () => {
                 <ChevronLeft />
             </button>
             
-            <h5> Shelves </h5>
+            <h5> { category.name } </h5>
 
             <figure>
                 {/* eslint-disable-next-line */}
                 <img src={ userProfileData.image } alt="profile-image" />
             </figure>
         </header>
+        
+        <header className={styles.tabHeading}>
+            <h4> { shelf.name } </h4>
+            <p> { shelf.words.length } </p>
+        </header>
+
     </section>
 }

src/data/all-words.ts

@@ -24,4 +24,28 @@ export const ALL_WORDS: Array<IWord> = [{
         description: 'used in polite requests or questions.'
     }],
     similarWords: ['Nice', 'Agreeable', 'Pleasant', 'Satisfying', 'Gratifying'],
+}, {
+    name: 'Prudent',
+    pronounciation: '/ˈpruːd(ə)nt/',
+    audioPronounciationURL: '',
+    grammaticalDetails: [{
+        typeName: 'ADJECTIVE',
+        description: 'acting with or showing care and thought for the future.'
+    }],
+    similarWords: ['Wise', 'Well judged', 'Judicious', 'Sage', 'Shrewd'],
+}, {
+    name: 'Ping',
+    pronounciation: '/pɪŋ/',
+    audioPronounciationURL: '',
+    grammaticalDetails: [{
+        typeName: 'NOUN',
+        description: 'a short, high-pitched ringing sound.'
+    }, {
+        typeName: 'VERB',
+        description: 'query (another computer on a network) to determine whether there is a connection to it.'
+    }, {
+        typeName: 'VERB',
+        description: 'make or cause to make a short, high-pitched ringing sound.'
+    }],
+    similarWords: [''],
 }]