rework sidemenu + fix no categories / links

components/Categories/Categories.tsx

@@ -1,37 +1,13 @@
-import { signOut } from "next-auth/react"
-import { Session } from 'next-auth';
-import LinkTag from "next/link";
-import Image from "next/image";
-
 import styles from '../../styles/home/categories.module.scss';
-import { Category, Link } from '../../types';
+import { Category } from '../../types';
 
-interface CategoryProps {
+interface CategoriesProps {
     categories: Category[];
-    favorites: Link[];
-    handleSelectCategory: (category: Category) => void;
     categoryActive: Category;
-    session: Session;
+    handleSelectCategory: (category: Category) => void;
 }
-export default function Categories({
-    categories,
-    favorites,
-    handleSelectCategory,
-    categoryActive,
-    session
-}: CategoryProps) {
-    return (<div className={styles['categories-wrapper']}>
-        <div className={`${styles['block-wrapper']} ${styles['favorites']}`}>
-            <h4>Favoris</h4>
-            <ul className={styles['items']}>
-                {favorites.map((link, key) => (
-                    <LinkFavorite
-                        link={link}
-                        key={key}
-                    />
-                ))}
-            </ul>
-        </div>
+export default function Categories({ categories, categoryActive, handleSelectCategory }: CategoriesProps) {
+    return (
         <div className={`${styles['block-wrapper']} ${styles['categories']}`}>
             <h4>Catégories</h4>
             <ul className={styles['items']}>
@@ -45,39 +21,6 @@ export default function Categories({
                 ))}
             </ul>
         </div>
-        <div className={styles['controls']}>
-            <LinkTag href={'/category/create'}>
-                <a>Créer categorie</a>
-            </LinkTag>
-            <LinkTag href={'/link/create'}>
-                <a>Créer lien</a>
-            </LinkTag>
-        </div>
-        <div className={styles['user-card-wrapper']}>
-            <div className={styles['user-card']}>
-                <Image
-                    src={session.user.image}
-                    width={28}
-                    height={28}
-                    alt={`${session.user.name}'s avatar`}
-                />
-                {session.user.name}
-            </div>
-            <button onClick={() => signOut()} className={styles['disconnect-btn']}>
-                Se déconnecter
-            </button>
-        </div>
-    </div>);
-}
-
-function LinkFavorite({ link }: { link: Link; }): JSX.Element {
-    const { name, url, category } = link;
-    return (
-        <li className={styles['item']}>
-            <a href={url} target={'_blank'} rel={'noreferrer'}>
-                {name} <span className={styles['category']}>- {category.name}</span>
-            </a>
-        </li>
     )
 }
 

components/Categories/Favorites.tsx

@@ -0,0 +1,36 @@
+import styles from '../../styles/home/categories.module.scss';
+import { Link } from '../../types';
+
+export default function Favorites({ favorites }: { favorites: Link[]; }) {
+    return (
+        <div className={`${styles['block-wrapper']} ${styles['favorites']}`}>
+            <h4>Favoris</h4>
+            <ul className={styles['items']}>
+                {favorites.length === 0
+                    ? <NoFavLink />
+                    : favorites.map((link, key) => (
+                        <LinkFavorite link={link} key={key} />
+                    ))}
+            </ul>
+        </div>
+    )
+}
+
+function NoFavLink(): JSX.Element {
+    return (
+        <li className={styles['no-fav-link']}>
+            Aucun favoris
+        </li>
+    )
+}
+
+function LinkFavorite({ link }: { link: Link; }): JSX.Element {
+    const { name, url, category } = link;
+    return (
+        <li className={styles['item']}>
+            <a href={url} target={'_blank'} rel={'noreferrer'}>
+                {name}<span className={styles['category']}> - {category.name}</span>
+            </a>
+        </li>
+    )
+}

components/Categories/ModalAddCategory.js

@@ -1,34 +0,0 @@
-import Modal from 'react-modal';
-
-import styles from '../../styles/categories.module.scss';
-
-Modal.setAppElement('#__next');
-
-const customStyles = {
-    content: {
-        top: '50%',
-        left: '50%',
-        right: 'auto',
-        bottom: 'auto',
-        marginRight: '-50%',
-        transform: 'translate(-50%, -50%)',
-    },
-};
-
-export default function ModalAddCategory({ categories, isOpen, closeModal }) {
-    function handleAddCategory() {
-
-    }
-
-    return (
-        <Modal
-            className={styles['modal-overlay']}
-            isOpen={isOpen}
-            onRequestClose={closeModal}
-            style={customStyles}
-        >
-            <h2>Ajouter une catégorie</h2>
-            <button onClick={closeModal}>close</button>
-        </Modal>
-    );
-}

components/Categories/SideMenu.tsx

@@ -0,0 +1,47 @@
+import { Session } from 'next-auth';
+import LinkTag from 'next/link';
+
+import styles from '../../styles/home/categories.module.scss';
+import { Category, Link } from '../../types';
+import Categories from './Categories';
+import Favorites from './Favorites';
+import UserCard from './UserCard';
+
+interface SideMenuProps {
+    categories: Category[];
+    favorites: Link[];
+    handleSelectCategory: (category: Category) => void;
+    categoryActive: Category;
+    session: Session;
+}
+export default function SideMenu({
+    categories,
+    favorites,
+    handleSelectCategory,
+    categoryActive,
+    session
+}: SideMenuProps) {
+    return (<div className={styles['categories-wrapper']}>
+        <Favorites favorites={favorites} />
+        <Categories
+            categories={categories}
+            categoryActive={categoryActive}
+            handleSelectCategory={handleSelectCategory}
+        />
+        <MenuControls />
+        <UserCard session={session} />
+    </div>);
+}
+
+function MenuControls() {
+    return (
+        <div className={styles['controls']}>
+            <LinkTag href={'/category/create'}>
+                <a>Créer categorie</a>
+            </LinkTag>
+            <LinkTag href={'/link/create'}>
+                <a>Créer lien</a>
+            </LinkTag>
+        </div>
+    )
+}

components/Categories/UserCard.tsx

@@ -0,0 +1,23 @@
+import { Session } from 'next-auth';
+import { signOut } from 'next-auth/react';
+import Image from 'next/image';
+import styles from '../../styles/home/categories.module.scss';
+
+export default function UserCard({ session }: { session: Session; }) {
+    return (
+        <div className={styles['user-card-wrapper']}>
+            <div className={styles['user-card']}>
+                <Image
+                    src={session.user.image}
+                    width={28}
+                    height={28}
+                    alt={`${session.user.name}'s avatar`}
+                />
+                {session.user.name}
+            </div>
+            <button onClick={() => signOut()} className={styles['disconnect-btn']}>
+                Se déconnecter
+            </button>
+        </div>
+    )
+}