add shelf data connection

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

@@ -145,6 +145,30 @@
         justify-content: space-between;
         align-items: center;
         margin: 1rem 0;
+        position: relative;
+        transition: opacity 0.3s;
+
+        &.inactive {
+            opacity: 0.5;
+        }
+        
+        .checkmark {
+            position: absolute;
+            left: 3.5rem;
+            top: -0.3rem;
+            width: 1.5rem;
+            height: 1.5rem;
+            background-color: var(--teal);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            svg {   
+                width: 0.8rem;             
+                fill: white;
+            }
+        }
 
         &:nth-child(1) .icon {
             background-color: var(--orange);
@@ -217,14 +241,27 @@
         height: 2rem;
         border-radius: 3rem;
         box-shadow: 0px 0px 10px -5px inset var(--light-grey);
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        &.on span {
+            transform: translateX(2.2rem);
+            background-color: var(--teal);
+        }
+
+        &.off span {
+            transform: translateX(0.2rem);            
+        }
 
         span {
-            width: 2rem;
-            height: 2rem;
+            cursor: pointer;
+            width: 1.6rem;
+            height: 1.6rem;
             background-color: var(--red);
             border-radius: 50%;
             display: block;
-            transform: scale(0.8);
+            transition: transform 0.3s, background-color 0.3s;
         }
     }
 }

src/components/add-shelf/AddShelf.tsx

@@ -1,10 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 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";
 
 export const AddShelf: React.FC = () => {
+    const [selectedCategoryIndex, setCategoryIndex] = useState<number>();
+    const [newShelf, setnewSelf] = useState<IShelf>({
+        name: '',
+        words: [],
+        revisedWords: [],
+        description: '',
+        viewPermission: 'PRIVATE'
+    });
+
     return <section className={styles.createShelfModal}>
 
         <header className={styles.modalHeader}>
@@ -15,8 +26,18 @@ export const AddShelf: React.FC = () => {
         </header>
 
         <section className={styles.form}>
-            <input type="text" placeholder={'Shelf Name'} />
-            <textarea placeholder={'Add description'}></textarea>
+            <input type="text" placeholder={'Shelf Name'} onInput={ (event) => {
+                setnewSelf({
+                    ...newShelf,
+                    name: event.currentTarget.value,
+                });
+            } } />
+            <textarea placeholder={'Add description'} onInput={ (event) => {
+                setnewSelf({
+                    ...newShelf,
+                    description: event.currentTarget.value,
+                });
+            } }></textarea>
 
             <section className={styles.Grid}>
                 <header className={styles.blockHeader}>
@@ -28,8 +49,10 @@ export const AddShelf: React.FC = () => {
                     </button>
                 </header>
                 <ul>
-                    { userProfileData.categories.map(category => {
-                        return <li key={category.name}>
+                    { userProfileData.categories.map((category, index) => {
+                        return <li key={category.name} onClick={() => setCategoryIndex(index)}
+                        className={index === selectedCategoryIndex ? '' : styles.inactive}>
+                            { index === selectedCategoryIndex && <span className={styles.checkmark}> <CheckCircle /> </span> }
                             <div className={styles.icon}>
                                 { category.icon }
                             </div>
@@ -44,12 +67,24 @@ export const AddShelf: React.FC = () => {
 
             <section className={styles.toggleHolder}>
                 <label> Public </label>
-                <div className={styles.toggle}>
+                <div className={styles.toggle + ' ' + (newShelf.viewPermission === 'PUBLIC' ? styles.on : styles.off)} onClick={ () => {
+                        setnewSelf({
+                            ...newShelf,
+                            viewPermission: newShelf.viewPermission === 'PRIVATE' ? 'PUBLIC' : 'PRIVATE',
+                        });
+                    } }>
                     <span></span>
                 </div>
             </section>
 
-            <button className={styles.publishButton}> Publish </button>
+            <button className={styles.publishButton} onClick={() => {
+                if (selectedCategoryIndex !== undefined) {
+                    userProfileData.categories[selectedCategoryIndex].shelves.push(newShelf);
+                    window.history.back();
+                } else {
+                    alert("select category");
+                }
+            }}> Publish </button>
         </section>
     </section>
 }

src/components/home/Home.tsx

@@ -190,9 +190,9 @@ export const Home: React.FC = () => {
                     <GridIcon />
                     Categories
                 </h4>
-                <button className={styles.expandButton}>
+                <NavLink to={'/categories'} className={styles.expandButton}>
                     <ExpandIcon />
-                </button>
+                </NavLink>
                 <button>
                     <PlusIcon />
                 </button>
@@ -208,7 +208,7 @@ export const Home: React.FC = () => {
                             <span> { category.shelves.length } Shelves </span>
                         </div>
                     </li>
-                })}
+                })}                
             </ul>
         </section>
     </section>