generated from theodorusclarence/ts-nextjs-tailwind-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 60
/
new.tsx
117 lines (105 loc) · 3.51 KB
/
new.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import axios from 'axios';
import { useRouter } from 'next/router';
import * as React from 'react';
import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
import Accent from '@/components/Accent';
import Button from '@/components/buttons/Button';
import Input from '@/components/forms/Input';
import Layout from '@/components/layout/Layout';
import Seo from '@/components/Seo';
import { DEFAULT_TOAST_MESSAGE } from '@/constant/toast';
type NewLinkFormData = {
slug: string;
link: string;
};
export default function NewLinkPage() {
const router = useRouter();
//#region //*=========== Form ===========
const methods = useForm<NewLinkFormData>({
mode: 'onTouched',
});
const { handleSubmit, setValue } = methods;
//#endregion //*======== Form ===========
//#region //*=========== Form Submit ===========
const onSubmit: SubmitHandler<NewLinkFormData> = (data) => {
toast.promise(
axios.post('/api/new', data).then(() => {
router.replace(`/${data.slug}/detail`);
}),
{
...DEFAULT_TOAST_MESSAGE,
success: 'Link successfully shortened',
}
);
};
//#endregion //*======== Form Submit ===========
//#region //*=========== Set Slug Query ===========
React.useEffect(() => {
if (!router.isReady) return;
const query = router.query;
if (query.slug) {
setValue('slug', query.slug as string);
}
}, [router.isReady, router.query, setValue]);
//#endregion //*======== Set Slug Query ===========
return (
<Layout>
<Seo templateTitle='Shorten!' />
<main>
<section>
<div className='layout flex flex-col justify-center items-center py-20 min-h-screen'>
<h1 className='h0'>
<Accent>Shorten New Link</Accent>
</h1>
<FormProvider {...methods}>
<form
onSubmit={handleSubmit(onSubmit)}
className='mt-8 w-full max-w-sm'
>
<div className='space-y-4'>
<Input
id='slug'
label='Slug'
placeholder='slug'
validation={{
required: 'Slug must be filled',
pattern: {
value: /^\S+$/,
message: 'Cannot include whitespace',
},
}}
/>
<Input
id='link'
label='Link'
helperText='Must include http or https'
placeholder='https://google.com'
validation={{
required: 'Link must be filled',
pattern: {
value:
/^(?:https?:\/\/|s?ftps?:\/\/)(?!www | www\.)[A-Za-z0-9_-]+\.+[A-Za-z0-9./%#*&=?_:;-]+$/,
message: 'Please input a valid link',
},
}}
/>
</div>
<div className='flex flex-col mt-5'>
<Button
className='justify-center w-full md:ml-auto md:w-auto'
variant='outline'
isDarkBg
type='submit'
>
Shorten!
</Button>
</div>
</form>
</FormProvider>
</div>
</section>
</main>
</Layout>
);
}