mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-10 07:25:35 +00:00
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
This commit is contained in:
Sonny
@@ -1,45 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import nProgress from 'nprogress';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
|
||||
import FormLayout from '../../components/FormLayout';
|
||||
import TextBox from '../../components/TextBox';
|
||||
|
||||
import Input from '../../components/input';
|
||||
import styles from '../../styles/create.module.scss';
|
||||
import Head from 'next/head';
|
||||
import { HandleAxiosError } from '../../utils/front';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export default function CreateCategory() {
|
||||
const { data: session, status } = useSession({ required: true });
|
||||
function CreateCategory() {
|
||||
const info = useRouter().query?.info as string;
|
||||
const [name, setName] = useState<string>('');
|
||||
|
||||
if (status === 'loading') {
|
||||
return (<p>Chargement de la session en cours</p>)
|
||||
}
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
useEffect(() => setCanSubmit(name.length !== 0), [name]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
console.log('On peut envoyer la requête pour créer une catégorie');
|
||||
setSuccess(null);
|
||||
setError(null);
|
||||
setCanSubmit(false);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
const payload = { name };
|
||||
const { data }: AxiosResponse<any> = await axios.post('/api/category/create', payload);
|
||||
setSuccess(data?.success || 'Categorie créée avec succès');
|
||||
setCanSubmit(false);
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setCanSubmit(true);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`App ${styles['create-app']}`}>
|
||||
<Head>
|
||||
<title>Superpipo — Créer une categorie</title>
|
||||
</Head>
|
||||
<h2>Créer une categorie</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
name='name'
|
||||
label='Nom de la catégorie'
|
||||
onChangeCallback={({ target }, value) => setName(value)}
|
||||
value={name}
|
||||
fieldClass={styles['input-field']}
|
||||
/>
|
||||
<button type='submit' disabled={name.length < 1}>
|
||||
Valider
|
||||
</button>
|
||||
</form>
|
||||
<Link href='/'>
|
||||
<a>← Revenir à l'accueil</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
return (<>
|
||||
<FormLayout
|
||||
title='Créer une catégorie'
|
||||
errorMessage={error}
|
||||
successMessage={success}
|
||||
infoMessage={info}
|
||||
canSubmit={canSubmit}
|
||||
handleSubmit={handleSubmit}
|
||||
>
|
||||
<TextBox
|
||||
name='name'
|
||||
label='Nom de la catégorie'
|
||||
onChangeCallback={(value) => setName(value)}
|
||||
value={name}
|
||||
fieldClass={styles['input-field']}
|
||||
placeholder='Nom...'
|
||||
/>
|
||||
</FormLayout>
|
||||
</>);
|
||||
}
|
||||
|
||||
CreateCategory.authRequired = true;
|
||||
export default CreateCategory;
|
||||
|
||||
109
pages/category/edit/[cid].tsx
Normal file
109
pages/category/edit/[cid].tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import nProgress from 'nprogress';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
|
||||
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 styles from '../../../styles/create.module.scss';
|
||||
|
||||
import { Category } from '../../../types';
|
||||
import { BuildCategory, HandleAxiosError } from '../../../utils/front';
|
||||
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
function EditCategory({ category }: { category: Category; }) {
|
||||
const [name, setName] = useState<string>(category.name);
|
||||
|
||||
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (name !== category.name && name !== '') {
|
||||
setCanSubmit(true);
|
||||
} else {
|
||||
setCanSubmit(false);
|
||||
}
|
||||
}, [category, name]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
confirmAlert({
|
||||
message: `Confirmer l'édition de la catégorie "${category.name}"`,
|
||||
buttons: [{
|
||||
label: 'Yes',
|
||||
onClick: async () => {
|
||||
setSuccess(null);
|
||||
setError(null);
|
||||
setCanSubmit(false);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
const payload = { name };
|
||||
const { data }: AxiosResponse<any> = await axios.put(`/api/category/edit/${category.id}`, payload);
|
||||
setSuccess(data?.success || 'Catégorie modifiée avec succès');
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
} finally {
|
||||
setCanSubmit(true);
|
||||
nProgress.done();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
label: 'No',
|
||||
onClick: () => { }
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
return (<>
|
||||
<FormLayout
|
||||
title='Modifier une catégorie'
|
||||
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 : ${category.name}`}
|
||||
/>
|
||||
</FormLayout>
|
||||
</>);
|
||||
}
|
||||
|
||||
EditCategory.authRequired = true;
|
||||
export default EditCategory;
|
||||
|
||||
export async function getServerSideProps({ query }) {
|
||||
const { cid } = query;
|
||||
const categoryDB = await prisma.category.findFirst({
|
||||
where: { id: Number(cid) },
|
||||
include: { links: true }
|
||||
});
|
||||
|
||||
if (!categoryDB) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const category = BuildCategory(categoryDB);
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category))
|
||||
}
|
||||
}
|
||||
}
|
||||
113
pages/category/remove/[cid].tsx
Normal file
113
pages/category/remove/[cid].tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import nProgress from 'nprogress';
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
|
||||
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 styles from '../../../styles/create.module.scss';
|
||||
|
||||
import { Category } from '../../../types';
|
||||
import { BuildCategory, HandleAxiosError } from '../../../utils/front';
|
||||
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
function RemoveCategory({ category }: { category: Category; }) {
|
||||
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (category.links.length > 0) {
|
||||
setError('Vous devez supprimer tous les liens de cette catégorie avant de pouvoir supprimer cette catégorie')
|
||||
setCanSubmit(false);
|
||||
} else {
|
||||
setCanSubmit(true);
|
||||
}
|
||||
}, [category]);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (<p>Chargement de la session en cours</p>)
|
||||
}
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
confirmAlert({
|
||||
message: `Confirmer la suppression du lien "${category.name}"`,
|
||||
buttons: [{
|
||||
label: 'Yes',
|
||||
onClick: async () => {
|
||||
setSuccess(null);
|
||||
setError(null);
|
||||
setCanSubmit(false);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
const { data }: AxiosResponse<any> = await axios.delete(`/api/category/remove/${category.id}`);
|
||||
setSuccess(data?.success || 'Categorie supprimée avec succès');
|
||||
setCanSubmit(false);
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setCanSubmit(true);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
label: 'No',
|
||||
onClick: () => { }
|
||||
}]
|
||||
});
|
||||
}
|
||||
|
||||
return (<>
|
||||
<FormLayout
|
||||
title='Supprimer une catégorie'
|
||||
errorMessage={error}
|
||||
successMessage={success}
|
||||
canSubmit={canSubmit}
|
||||
handleSubmit={handleSubmit}
|
||||
classBtnConfirm='red-btn'
|
||||
textBtnConfirm='Supprimer'
|
||||
>
|
||||
<TextBox
|
||||
name='name'
|
||||
label='Nom'
|
||||
value={category.name}
|
||||
fieldClass={styles['input-field']}
|
||||
disabled={true}
|
||||
/>
|
||||
</FormLayout>
|
||||
</>);
|
||||
}
|
||||
|
||||
RemoveCategory.authRequired = true;
|
||||
export default RemoveCategory;
|
||||
|
||||
export async function getServerSideProps({ query }) {
|
||||
const { cid } = query;
|
||||
const categoryDB = await prisma.category.findFirst({
|
||||
where: { id: Number(cid) },
|
||||
include: { links: true }
|
||||
});
|
||||
|
||||
if (!categoryDB) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const category = BuildCategory(categoryDB);
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category))
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user