Ajout de PrismaDB pour les catégories + liens

components/Categories/Categories.js

@@ -5,11 +5,11 @@ export default function Categories({ categories, favorites, handleSelectCategory
         <div className={`${styles['block-wrapper']} ${styles['favorites']}`}>
             <h4>Favoris</h4>
             <ul className={styles['items']}>
-                {favorites.map(({ name, link, category }, key) => {
-                    const catName = categories.find(c => c.id === category).name;
+                {favorites.map((link, key) => {
+                    const { name, url, categoryName } = link;
                     return <li key={key} className={styles['item']}>
-                        <a href={link} target={'_blank'} rel={'noreferrer'}>
-                            {name} <span className={styles['category']}>- {catName}</span>
+                        <a href={url} target={'_blank'} rel={'noreferrer'}>
+                            {name} <span className={styles['category']}>- {categoryName}</span>
                         </a>
                     </li>;
                 })}

components/Links/Link.js

@@ -3,8 +3,8 @@ import styles from '../../styles/links.module.scss';
 export default function Link({ link }) {
     return (
         <li className={styles['link']}>
-            <a href={link?.link} target={'_blank'} rel={'noreferrer'}>
-                <span className={styles['link-name']}>{link?.name}</span> <span className={styles['link-url']}>{link?.link}</span>
+            <a href={link?.url} target={'_blank'} rel={'noreferrer'}>
+                <span className={styles['link-name']}>{link?.name} <span className={styles['link-category']}>— {link?.categoryName}</span></span> <span className={styles['link-url']}>{link?.url}</span>
             </a>
         </li>
     );

package.json

@@ -8,6 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^3.7.0",
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -16,6 +17,7 @@
   },
   "devDependencies": {
     "eslint": "7",
-    "eslint-config-next": "12.0.7"
+    "eslint-config-next": "12.0.7",
+    "prisma": "^3.7.0"
   }
 }

pages/index.js

@@ -1,8 +1,12 @@
-import styles from '../styles/Home.module.scss';
+import { createRef, useRef, useState } from 'react';
 
 import Categories from '../components/Categories/Categories';
 import Links from '../components/Links/Links';
-import { createRef, useRef, useState } from 'react';
+
+import styles from '../styles/Home.module.scss';
+
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
 
 export default function Home({ categories, favorites }) {
 	const [categoryActive, setCategoryActive] = useState(categories?.[0]?.id);
@@ -36,42 +40,30 @@ export default function Home({ categories, favorites }) {
 }
 
 export async function getStaticProps(context) {
-	const categories = [];
-	for (let i = 0; i < 20; i++) {
-		const links = [];
-		for (let y = 0; y < randomIntFromInterval(5, 25); y++) {
-			links.push({
-				id: y,
-				name: 'Lien #' + (y + 1),
-				category: i,
-				link: `https://google.com/search?q=${y}`
-			});
+	const categories = await prisma.category.findMany({
+		include: {
+			links: true
 		}
-
-		categories.push({
-			id: i,
-			name: 'Catégorie #' + (i + 1),
-			links,
-			ref: createRef()
 	});
-	}
 
 	const favorites = [];
-	for (let i = 0; i < 5; i++) {
-		const category = categories[Math.floor(Math.random() * categories.length)];
-		const link = category.links[Math.floor(Math.random() * category.links.length)]
+	categories.map((category) => {
+		category['ref'] = createRef();
+		category['links'] = category.links.map((link) => {
+			if (link.favorite)
 				favorites.push(link);
-	}
 
-	console.log(favorites);
+			link['categoryName'] = category.name;
+			return link;
+		});
+
+		return category;
+	});
+
 	return {
 		props: {
-			categories,
-			favorites
+			categories: JSON.parse(JSON.stringify(categories)),
+			favorites: JSON.parse(JSON.stringify(favorites))
 		}
 	}
 }
-
-function randomIntFromInterval(min, max) {
-	return Math.floor(Math.random() * (max - min + 1) + min);
-}

prisma/schema.prisma

@@ -6,12 +6,35 @@ generator client {
 }
 
 datasource db {
-  provider = "postgresql"
+  provider = "mysql"
   url      = env("DATABASE_URL")
 }
 
-model user {
+model User {
   id Int @id @default(autoincrement())
   email String @unique
   password String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Category {
+  id Int @id @default(autoincrement())
+  name String @unique
+  links Link[] 
+  order Int
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Link {
+  id Int @id @default(autoincrement())
+  name String
+  url String
+  category Category @relation(fields: [categoryId], references: [id])
+  categoryId Int
+  order Int
+  favorite Boolean @default(false)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }

styles/categories.module.scss

@@ -26,7 +26,7 @@
         & .items .item {
             user-select: none;
             cursor: pointer;
-            padding: 10px;
+            padding: 5px 10px;
             border: 1px solid #dadce0;
             border-bottom: 2px solid #dadce0;
             border-radius: 3px;

styles/links.module.scss

@@ -39,16 +39,25 @@
                 margin-bottom: 10px;
                 display: flex;
                 flex-direction: column;
-                transition: .15s;
+                transition: .05s;
 
                 &:hover {
                     border-bottom-color: #3f88c5;
                     transform: scale(1.01);
                 }
 
-                & .link-url {
+                & .link-name .link-category {
                     color: #bbb;
-                    font-size: .80em;
+                    font-size: .9em;
+                }
+
+                & .link-url {
+                    width: 100%;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    color: #bbb;
+                    font-size: .8em;
                 }
             }
         }