mirror of
https://github.com/Sonny93/my-links.git
synced 2025-12-10 07:25:35 +00:00
feat: first form field auto focused
This commit is contained in:
Sonny
@@ -1,64 +1,68 @@
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'next/router';
|
||||
import nProgress from 'nprogress';
|
||||
import { useMemo, useState } from 'react';
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/router";
|
||||
import nProgress from "nprogress";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import { redirectWithoutClientCache } from '../../utils/client';
|
||||
import { HandleAxiosError } from '../../utils/front';
|
||||
import FormLayout from "../../components/FormLayout";
|
||||
import TextBox from "../../components/TextBox";
|
||||
|
||||
import FormLayout from '../../components/FormLayout';
|
||||
import TextBox from '../../components/TextBox';
|
||||
import { redirectWithoutClientCache } from "../../utils/client";
|
||||
import { HandleAxiosError } from "../../utils/front";
|
||||
|
||||
import styles from '../../styles/create.module.scss';
|
||||
import styles from "../../styles/create.module.scss";
|
||||
|
||||
function CreateCategory() {
|
||||
const router = useRouter();
|
||||
const info = useRouter().query?.info as string;
|
||||
const [name, setName] = useState<string>('');
|
||||
const router = useRouter();
|
||||
const info = useRouter().query?.info as string;
|
||||
const [name, setName] = useState<string>("");
|
||||
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
const canSubmit = useMemo<boolean>(() => name.length !== 0 && !submitted, [name.length, submitted]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setSuccess(null);
|
||||
setError(null);
|
||||
setSubmitted(false);
|
||||
nProgress.start();
|
||||
const canSubmit = useMemo<boolean>(
|
||||
() => name.length !== 0 && !submitted,
|
||||
[name.length, submitted]
|
||||
);
|
||||
|
||||
try {
|
||||
await axios.post('/api/category/create', { name });
|
||||
redirectWithoutClientCache(router, '');
|
||||
router.push('/')
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setSubmitted(true);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSubmitted(true);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
const { data } = await axios.post("/api/category/create", { name });
|
||||
redirectWithoutClientCache(router, "");
|
||||
router.push(`/?categoryId=${data?.categoryId}`);
|
||||
setSubmitted(true);
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setSubmitted(false);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
</>);
|
||||
return (
|
||||
<>
|
||||
<FormLayout
|
||||
title="Créer une catégorie"
|
||||
errorMessage={error}
|
||||
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;
|
||||
|
||||
@@ -1,92 +1,99 @@
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import nProgress from 'nprogress';
|
||||
import { useEffect, useState } from 'react';
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/router";
|
||||
import nProgress from "nprogress";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import FormLayout from '../../../components/FormLayout';
|
||||
import TextBox from '../../../components/TextBox';
|
||||
import FormLayout from "../../../components/FormLayout";
|
||||
import TextBox from "../../../components/TextBox";
|
||||
|
||||
import { Category } from '../../../types';
|
||||
import { prisma } from '../../../utils/back';
|
||||
import { BuildCategory, HandleAxiosError } from '../../../utils/front';
|
||||
import useAutoFocus from "../../../hooks/useAutoFocus";
|
||||
|
||||
import styles from '../../../styles/create.module.scss';
|
||||
import { Category } from "../../../types";
|
||||
import { prisma } from "../../../utils/back";
|
||||
import { BuildCategory, HandleAxiosError } from "../../../utils/front";
|
||||
|
||||
function EditCategory({ category }: { category: Category; }) {
|
||||
const [name, setName] = useState<string>(category.name);
|
||||
import styles from "../../../styles/create.module.scss";
|
||||
|
||||
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
function EditCategory({ category }: { category: Category }) {
|
||||
const autoFocusRef = useAutoFocus();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (name !== category.name && name !== '') {
|
||||
setCanSubmit(true);
|
||||
} else {
|
||||
setCanSubmit(false);
|
||||
}
|
||||
}, [category, name]);
|
||||
const [name, setName] = useState<string>(category.name);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setSuccess(null);
|
||||
setError(null);
|
||||
setCanSubmit(false);
|
||||
nProgress.start();
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
|
||||
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();
|
||||
}
|
||||
const canSubmit = useMemo<boolean>(
|
||||
() => name !== category.name && name !== "" && !submitted,
|
||||
[category.name, name, submitted]
|
||||
);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSubmitted(true);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
const payload = { name };
|
||||
const { data } = await axios.put(
|
||||
`/api/category/edit/${category.id}`,
|
||||
payload
|
||||
);
|
||||
router.push(`/?categoryId=${data?.categoryId}`);
|
||||
setSubmitted(true);
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setSubmitted(false);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
</>);
|
||||
return (
|
||||
<>
|
||||
<FormLayout
|
||||
title="Modifier une catégorie"
|
||||
errorMessage={error}
|
||||
canSubmit={canSubmit}
|
||||
handleSubmit={handleSubmit}
|
||||
>
|
||||
<TextBox
|
||||
name="name"
|
||||
label="Nom"
|
||||
onChangeCallback={(value) => setName(value)}
|
||||
value={name}
|
||||
fieldClass={styles["input-field"]}
|
||||
placeholder={`Nom original : ${category.name}`}
|
||||
innerRef={autoFocusRef}
|
||||
/>
|
||||
</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 }
|
||||
});
|
||||
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);
|
||||
if (!categoryDB) {
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category))
|
||||
}
|
||||
}
|
||||
}
|
||||
redirect: {
|
||||
destination: "/",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const category = BuildCategory(categoryDB);
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category)),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,96 +1,103 @@
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import nProgress from 'nprogress';
|
||||
import { useEffect, useState } from 'react';
|
||||
import axios from "axios";
|
||||
import { useRouter } from "next/router";
|
||||
import nProgress from "nprogress";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import FormLayout from '../../../components/FormLayout';
|
||||
import TextBox from '../../../components/TextBox';
|
||||
import Checkbox from "../../../components/Checkbox";
|
||||
import FormLayout from "../../../components/FormLayout";
|
||||
import TextBox from "../../../components/TextBox";
|
||||
|
||||
import { Category } from '../../../types';
|
||||
import { BuildCategory, HandleAxiosError } from '../../../utils/front';
|
||||
import { prisma } from '../../../utils/back';
|
||||
import { Category } from "../../../types";
|
||||
import { prisma } from "../../../utils/back";
|
||||
import { BuildCategory, HandleAxiosError } from "../../../utils/front";
|
||||
|
||||
import styles from '../../../styles/create.module.scss';
|
||||
import styles from "../../../styles/create.module.scss";
|
||||
|
||||
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);
|
||||
function RemoveCategory({ category }: { category: Category }) {
|
||||
const router = useRouter();
|
||||
const [error, setError] = useState<string | null>(
|
||||
category.links.length > 0
|
||||
? "Vous devez supprimer tous les liens de cette catégorie avant de pouvoir supprimer cette catégorie"
|
||||
: null
|
||||
);
|
||||
const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
|
||||
const [submitted, setSubmitted] = useState<boolean>(false);
|
||||
|
||||
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]);
|
||||
const canSubmit = useMemo<boolean>(
|
||||
() => category.links.length === 0 && confirmDelete && !submitted,
|
||||
[category.links.length, confirmDelete, submitted]
|
||||
);
|
||||
|
||||
if (status === 'loading') {
|
||||
return (<p>Chargement de la session en cours</p>)
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setSubmitted(true);
|
||||
nProgress.start();
|
||||
|
||||
try {
|
||||
await axios.delete(`/api/category/remove/${category.id}`);
|
||||
router.push("/");
|
||||
setSubmitted(true);
|
||||
} catch (error) {
|
||||
setError(HandleAxiosError(error));
|
||||
setSubmitted(false);
|
||||
} finally {
|
||||
nProgress.done();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
</>);
|
||||
return (
|
||||
<>
|
||||
<FormLayout
|
||||
title="Supprimer une catégorie"
|
||||
categoryId={category.id.toString()}
|
||||
errorMessage={error}
|
||||
canSubmit={canSubmit}
|
||||
handleSubmit={handleSubmit}
|
||||
classBtnConfirm="red-btn"
|
||||
textBtnConfirm="Supprimer"
|
||||
>
|
||||
<TextBox
|
||||
name="name"
|
||||
label="Nom"
|
||||
value={category.name}
|
||||
fieldClass={styles["input-field"]}
|
||||
disabled={true}
|
||||
/>
|
||||
<Checkbox
|
||||
name="confirm-delete"
|
||||
label="Confirmer la suppression ?"
|
||||
isChecked={confirmDelete}
|
||||
disabled={!!error}
|
||||
onChangeCallback={(checked) => setConfirmDelete(checked)}
|
||||
/>
|
||||
</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 }
|
||||
});
|
||||
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);
|
||||
if (!categoryDB) {
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category))
|
||||
}
|
||||
}
|
||||
}
|
||||
redirect: {
|
||||
destination: "/",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const category = BuildCategory(categoryDB);
|
||||
return {
|
||||
props: {
|
||||
category: JSON.parse(JSON.stringify(category)),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user