Added links and redirection to shelf and category details page on click of the respective blocks

src/App.tsx

@@ -6,6 +6,7 @@ import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
 import { AddWord } from "./components/add-word/AddWord";
 import { AddShelf } from "./components/add-shelf/AddShelf";
 import { CategoryDetails } from "./components/category-details/CategoryDetails";
+import { ShelfDetails } from "./components/shelf-details/ShelfDetails";
 
 function App() {
     return (
@@ -16,6 +17,7 @@ function App() {
                 <Route path="/add-shelf" component={AddShelf} />
                 <Route path="/categories" component={Categories} />
                 <Route path="/category-details/" component={CategoryDetails} />
+                <Route path="/shelf-details/" component={ShelfDetails} />
                 <Route path="/revise" component={Revise} />
                 <Redirect from="/" to="/home" />
             </Switch>

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

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

src/components/category-details/CategoryDetails.tsx

@@ -11,12 +11,14 @@ 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";
 
 export const CategoryDetails: React.FC = () => {
     const location = useLocation();
     const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
     const shelfCount: number = userProfileData.categories[category_id].shelves.length;
     const [shelfResult, setShelfResult] = useState<Array<IShelf>>(userProfileData.categories[category_id].shelves);
+    const history = useHistory();
 
     const searchShelf = (text: string) => {
         if (text.length > 0) {
@@ -70,8 +72,10 @@ export const CategoryDetails: React.FC = () => {
 
         <section className={styles.Shelf}>
             <ul>
-                { shelfResult.map(shelf => {
-                    return <li key={shelf.name}>
+                { shelfResult.map((shelf, index) => {
+                    return <li key={shelf.name} onClick={() => {
+                        history.push('/shelf-details/category_id=' + category_id + '&&shelf_id=' + index);
+                    }}>
                         <div className={styles.progress}>
                             <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} 
                                 styles={{

src/components/home/Home.tsx

@@ -19,7 +19,7 @@ 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',
@@ -63,6 +63,7 @@ export var userProfileData : IProfile = {
 
 export const Home: React.FC = () => {
     const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false);
+    const history = useHistory();
 
     return <section className="page">
 
@@ -152,17 +153,16 @@ export const Home: React.FC = () => {
                     <BookShelfIcon />
                     Active Shelves
                 </h4>
-                <button className={styles.expandButton}>
-                    <ExpandIcon />
-                </button>
                 <NavLink to={'/add-shelf'}>
                     <PlusIcon />
                 </NavLink>
             </header>
             <ul>
-                { userProfileData.categories.map(category => {
-                    return category.shelves.map(shelf => {
-                        return <li key={shelf.name}>
+                { userProfileData.categories.map((category, categoryIndex) => {
+                    return category.shelves.map((shelf, shelfIndex) => {
+                        return <li key={shelf.name} onClick={ () => {
+                            history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex);
+                        } }>
                             <div className={styles.progress}>
                                 <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} 
                                     styles={{
@@ -202,14 +202,16 @@ export const Home: React.FC = () => {
             </header>
             <ul>
                 { userProfileData.categories.map((category, index) => {
-                    return <li key={category.name}>
+                    return <li key={category.name} onClick={() => {
+                        history.push('/category-details/category_id=' + index);
+                    }}>
                         <div className={styles.icon}>
                             { category.icon }
                         </div>
-                        <NavLink to={'/category-details/category_id=' + index} className={styles.info}>
+                        <div className={styles.info}>
                             <label> { category.name } </label>
                             <span> { category.shelves.length } Shelves </span>
-                        </NavLink>
+                        </div>
                     </li>
                 })}                
             </ul>

src/components/shelf-details/ShelfDetails.module.scss

@@ -0,0 +1,40 @@
+.navHeader {
+    background-color: transparent;
+    text-align: center;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+
+    button {
+        width: 4rem;
+        text-align: center;
+        background-color: transparent;
+        border: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        svg {
+            width: 1rem;
+            color: var(--black);
+        }
+    }
+
+    h5 {
+        font-size: 1.5rem;
+    }
+
+    figure {
+        display: block;
+                
+        img {
+            display: block;
+            width: 4rem;
+            height: 4rem;
+            border-radius: 50%;
+            border: 1px solid var(--creamy-white);
+        }
+    }
+}

src/components/shelf-details/ShelfDetails.tsx

@@ -0,0 +1,27 @@
+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';
+
+export const ShelfDetails: React.FC = () => {
+    const location = useLocation();
+    const category_id: any = queryString.parse(location.pathname)['/category-details/category_id'];
+    const shelf_id: any = queryString.parse(location.pathname)['shelf_id'];
+    
+    return <section className="modalPage">
+        <header className={styles.navHeader}>
+            <button onClick={() => window.history.back()}>
+                <ChevronLeft />
+            </button>
+            
+            <h5> Shelves </h5>
+
+            <figure>
+                {/* eslint-disable-next-line */}
+                <img src={ userProfileData.image } alt="profile-image" />
+            </figure>
+        </header>
+    </section>
+}