Beaucoup trop de chose

- Ajout création, édition, suppression catégories & liens - Ajout auth google - Ajout/modification style pour catégories & liens - Ajout component générique pour bouton, inputs, checkbox & selector - Gestion des messages d'erreur/succès/infos via component dédié - Ajout component FormLayout pour les pages création, édition, suppression catégories & liens - Page custom 404, 500 & signin - Modification schéma DB
2025-12-10 15:35:35 +00:00 · 2022-05-06 19:35:12 +02:00
parent 988dc47ecd
commit aee3e6a820
48 changed files with 7164 additions and 1122 deletions
--- a/pages/link/create.tsx
+++ b/pages/link/create.tsx
@@ -1,88 +1,103 @@
 import { useEffect, useState } from 'react';
-import { useSession } from 'next-auth/react';
-import Link from 'next/link';

-import Input from '../../components/input';
+import nProgress from 'nprogress';
+import axios, { AxiosResponse } from 'axios';
+
+import FormLayout from '../../components/FormLayout';
+import TextBox from '../../components/TextBox';
+import Selector from '../../components/Selector';
+import Checkbox from '../../components/Checkbox';
+
 import styles from '../../styles/create.module.scss';

 import { Category } from '../../types';
-import { BuildCategory } from '../../utils/front';
+import { BuildCategory, HandleAxiosError, IsValidURL } from '../../utils/front';

 import { PrismaClient } from '@prisma/client';
-import Selector from '../../components/selector';
-import Head from 'next/head';
 const prisma = new PrismaClient();

-export default function CreateLink({ categories }: { categories: Category[]; }) {
-    const { status } = useSession({ required: true });
+function CreateLink({ categories }: { categories: Category[]; }) {
    const [name, setName] = useState<string>('');
    const [url, setUrl] = useState<string>('');
+    const [favorite, setFavorite] = useState<boolean>(false);
    const [categoryId, setCategoryId] = useState<number | null>(categories?.[0].id || null);
+
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
    const [canSubmit, setCanSubmit] = useState<boolean>(false);

    useEffect(() => {
-        const regex = new RegExp('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,}');
-        if (name !== '' && url.match(regex) && categoryId !== null) {
-            setCanSubmit(false);
-        } else {
+        if (name !== '' && IsValidURL(url) && favorite !== null && categoryId !== null) {
            setCanSubmit(true);
+        } else {
+            setCanSubmit(false);
        }
-    }, [name, url, categoryId]);
+    }, [name, url, favorite, categoryId]);

-    if (status === 'loading') {
-        return (<p>Chargement de la session en cours</p>)
-    }
-
-    const handleSubmit = (event) => {
+    const handleSubmit = async (event) => {
        event.preventDefault();
-        console.log('On peut envoyer la requête pour créer un lien');
+        setSuccess(null);
+        setError(null);
+        setCanSubmit(false);
+        nProgress.start();
+
+        try {
+            const payload = { name, url, favorite, categoryId };
+            const { data }: AxiosResponse<any> = await axios.post('/api/link/create', payload);
+            setSuccess(data?.success || 'Lien modifié avec succès');
+        } catch (error) {
+            setError(HandleAxiosError(error));
+        } finally {
+            setCanSubmit(true);
+            nProgress.done();
+        }
    }

    return (<>
-        <Head>
-            <title>Superpipo — Créer un lien</title>
-        </Head>
-        <div className={`App ${styles['create-app']}`}>
-            <h2>Créer un lien</h2>
-            <form onSubmit={handleSubmit}>
-                <Input
-                    name='name'
-                    label='Label'
-                    onChangeCallback={({ target }, value) => setName(value)}
-                    value={name}
-                    fieldClass={styles['input-field']}
-                    placeholder='Label du lien'
-                />
-                <Input
-                    name='url'
-                    label='URL'
-                    onChangeCallback={({ target }, value) => setUrl(value)}
-                    value={name}
-                    fieldClass={styles['input-field']}
-                    placeholder='URL du lien'
-                />
-                <Selector
-                    name='category'
-                    label='Catégorie'
-                    value={categoryId}
-                    onChangeCallback={({ target }, value) => setCategoryId(value)}
-                >
-                    {categories.map((category, key) => (
-                        <option key={key} value={category.id}>{category.name}</option>
-                    ))}
-                </Selector>
-                <button type='submit' disabled={canSubmit}>
-                    Valider
-                </button>
-            </form>
-            <Link href='/'>
-                <a>← Revenir à l'accueil</a>
-            </Link>
-        </div>
+        <FormLayout
+            title='Créer un lien'
+            errorMessage={error}
+            successMessage={success}
+            canSubmit={canSubmit}
+            handleSubmit={handleSubmit}
+        >
+            <TextBox
+                name='name'
+                label='Nom'
+                onChangeCallback={(value) => setName(value)}
+                value={name}
+                fieldClass={styles['input-field']}
+                placeholder='Nom du lien'
+            />
+            <TextBox
+                name='url'
+                label='URL'
+                onChangeCallback={(value) => setUrl(value)}
+                value={url}
+                fieldClass={styles['input-field']}
+                placeholder='https://www.example.org/'
+            />
+            <Selector
+                name='category'
+                label='Catégorie'
+                value={categoryId}
+                onChangeCallback={(value: number) => setCategoryId(value)}
+                options={categories.map(({ id, name }) => ({ label: name, value: id }))}
+            />
+            <Checkbox
+                name='favorite'
+                isChecked={favorite}
+                onChangeCallback={(value) => setFavorite(value)}
+                label='Favoris'
+            />
+        </FormLayout>
    </>);
 }

-export async function getStaticProps() {
+CreateLink.authRequired = true;
+export default CreateLink;
+
+export async function getServerSideProps() {
    const categoriesDB = await prisma.category.findMany();
    const categories = categoriesDB.map((categoryDB) => BuildCategory(categoryDB));

--- a/pages/link/edit/[lid].tsx
+++ b/pages/link/edit/[lid].tsx
@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+
+import axios, { AxiosResponse } from 'axios';
+import nProgress from 'nprogress';
+
+import FormLayout from '../../../components/FormLayout';
+import TextBox from '../../../components/TextBox';
+import Selector from '../../../components/Selector';
+import Checkbox from '../../../components/Checkbox';
+
+import styles from '../../../styles/create.module.scss';
+
+import { Category, Link } from '../../../types';
+import { BuildCategory, BuildLink, HandleAxiosError, IsValidURL } from '../../../utils/front';
+
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+function EditLink({ link, categories }: { link: Link; categories: Category[]; }) {
+    const [name, setName] = useState<string>(link.name);
+    const [url, setUrl] = useState<string>(link.url);
+    const [favorite, setFavorite] = useState<boolean>(link.favorite);
+    const [categoryId, setCategoryId] = useState<number | null>(link.category?.id || null);
+
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+    const [canSubmit, setCanSubmit] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (name !== link.name || url !== link.url || favorite !== link.favorite || categoryId !== link.category.id) {
+            if (name !== '' && IsValidURL(url) && favorite !== null && categoryId !== null) {
+                setCanSubmit(true);
+            } else {
+                setCanSubmit(false);
+            }
+        } else {
+            setCanSubmit(false);
+        }
+    }, [name, url, favorite, categoryId, link]);
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setSuccess(null);
+        setError(null);
+        setCanSubmit(false);
+        nProgress.start();
+
+        try {
+            const payload = { name, url, favorite, categoryId };
+            const { data }: AxiosResponse<any> = await axios.put(`/api/link/edit/${link.id}`, payload);
+            setSuccess(data?.success || 'Lien modifié avec succès');
+        } catch (error) {
+            setError(HandleAxiosError(error));
+        } finally {
+            setCanSubmit(true);
+            nProgress.done();
+        }
+    }
+
+    return (<>
+        <FormLayout
+            title='Modifier un lien'
+            errorMessage={error}
+            successMessage={success}
+            canSubmit={canSubmit}
+            handleSubmit={handleSubmit}
+        >
+            <TextBox
+                name='name'
+                label='Nom'
+                onChangeCallback={(value) => setName(value)}
+                value={name}
+                fieldClass={styles['input-field']}
+                placeholder={`Nom original : ${link.name}`}
+            />
+            <TextBox
+                name='url'
+                label='URL'
+                onChangeCallback={(value) => setUrl(value)}
+                value={url}
+                fieldClass={styles['input-field']}
+                placeholder={`URL original : ${link.url}`}
+            />
+            <Selector
+                name='category'
+                label='Catégorie'
+                value={categoryId}
+                onChangeCallback={(value: number) => setCategoryId(value)}
+                options={categories.map(({ id, name }) => ({ label: name, value: id }))}
+            />
+            <Checkbox
+                name='favorite'
+                isChecked={favorite}
+                onChangeCallback={(value) => setFavorite(value)}
+                label='Favoris'
+            />
+        </FormLayout>
+    </>);
+}
+
+EditLink.authRequired = true;
+export default EditLink;
+
+export async function getServerSideProps({ query }) {
+    const { lid } = query;
+
+    const categoriesDB = await prisma.category.findMany();
+    const categories = categoriesDB.map((categoryDB) => BuildCategory(categoryDB));
+
+    const linkDB = await prisma.link.findFirst({
+        where: { id: Number(lid) },
+        include: { category: true }
+    });
+
+    if (!linkDB) {
+        return {
+            redirect: {
+                destination: '/'
+            }
+        }
+    }
+
+    const link = BuildLink(linkDB, { categoryId: linkDB.categoryId, categoryName: linkDB.category.name });
+    return {
+        props: {
+            link: JSON.parse(JSON.stringify(link)),
+            categories: JSON.parse(JSON.stringify(categories))
+        }
+    }
+}
--- a/pages/link/remove/[lid].tsx
+++ b/pages/link/remove/[lid].tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react';
+
+import axios, { AxiosResponse } from 'axios';
+import nProgress from 'nprogress';
+
+import { confirmAlert } from 'react-confirm-alert';
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+import FormLayout from '../../../components/FormLayout';
+import TextBox from '../../../components/TextBox';
+import Checkbox from '../../../components/Checkbox';
+
+import styles from '../../../styles/create.module.scss';
+
+import { Link } from '../../../types';
+import { BuildLink, HandleAxiosError } from '../../../utils/front';
+
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+function RemoveLink({ link }: { link: Link; }) {
+
+    const [canSubmit, setCanSubmit] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        confirmAlert({
+            message: `Confirmer la suppression du lien "${link.name}"`,
+            buttons: [{
+                label: 'Confirmer',
+                onClick: async () => {
+                    setSuccess(null);
+                    setError(null);
+                    setCanSubmit(false);
+                    nProgress.start();
+
+                    try {
+                        const { data }: AxiosResponse<any> = await axios.delete(`/api/link/remove/${link.id}`);
+                        setSuccess(data?.success || 'Lien supprimé avec succès');
+                        setCanSubmit(false);
+                    } catch (error) {
+                        setError(HandleAxiosError(error));
+                        setCanSubmit(true);
+                    } finally {
+                        nProgress.done();
+                    }
+                }
+            }, {
+                label: 'Annuler',
+                onClick: () => { }
+            }]
+        });
+    }
+
+    return (<>
+        <FormLayout
+            title='Supprimer un lien'
+            errorMessage={error}
+            successMessage={success}
+            canSubmit={canSubmit}
+            handleSubmit={handleSubmit}
+            classBtnConfirm='red-btn'
+            textBtnConfirm='Supprimer'
+        >
+            <TextBox
+                name='name'
+                label='Nom'
+                value={link.name}
+                fieldClass={styles['input-field']}
+                disabled={true}
+            />
+            <TextBox
+                name='url'
+                label='URL'
+                value={link.url}
+                fieldClass={styles['input-field']}
+                disabled={true}
+            />
+            <TextBox
+                name='category'
+                label='Catégorie'
+                value={link.category.name}
+                fieldClass={styles['input-field']}
+                disabled={true}
+            />
+            <Checkbox
+                name='favorite'
+                label='Favoris'
+                isChecked={link.favorite}
+                disabled={true}
+            />
+        </FormLayout>
+    </>);
+}
+
+RemoveLink.authRequired = true;
+export default RemoveLink;
+
+export async function getServerSideProps({ query }) {
+    const { lid } = query;
+    const linkDB = await prisma.link.findFirst({
+        where: { id: Number(lid) },
+        include: { category: true }
+    });
+
+    if (!linkDB) {
+        return {
+            redirect: {
+                destination: '/'
+            }
+        }
+    }
+
+    const link = BuildLink(linkDB, { categoryId: linkDB.categoryId, categoryName: linkDB.category.name });
+    return {
+        props: {
+            link: JSON.parse(JSON.stringify(link))
+        }
+    }
+}