-
Notifications
You must be signed in to change notification settings - Fork 1
/
view-snippet.tsx
98 lines (87 loc) · 3.32 KB
/
view-snippet.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
import { yupResolver } from '@hookform/resolvers/yup';
import { FormProvider, useForm } from 'react-hook-form';
import Button from '../../../../forms/button';
import { useCodeHighlighter } from '../../../../hooks';
import { useUpdateSnippet } from '../../../../services/snippets/update-snippet';
import { SelectOption } from '../../../../typings/components';
import { SnippetItem } from '../../../../typings/queries';
import { CODE_HIGHLIGHT_OPTIONS, THEME_OPTIONS } from '../../../../utils/constants';
import { extractLanguageFromName, lineHighlightToString } from '../../../../utils/snippets';
import { useToast } from '../../../toast/provider';
import { SnippetTextEditor } from './editor';
import { SnippetFormValues, formSchema } from './form-schema';
import { generateSnippetLanguageOptions } from './utils';
type Props = {
snippet: SnippetItem;
};
const selectCodeHighlightOptionValue = (theme: string) => {
const themeOption = THEME_OPTIONS.find((option) => option.id === theme);
return themeOption ?? THEME_OPTIONS[0];
};
const selectLanguageOptionValue = (options: SelectOption[], language: string) => {
return options.find((option) => option.id === language);
};
const ViewSnippet = ({ snippet }: Props) => {
const { highlighter } = useCodeHighlighter();
const { toastError, toastSuccess } = useToast();
const { isLoading, updateSnippet } = useUpdateSnippet(snippet.folderId);
const languageOptions = generateSnippetLanguageOptions();
const formMethods = useForm<SnippetFormValues>({
defaultValues: {
code: snippet.content,
codeHighlight: CODE_HIGHLIGHT_OPTIONS[0],
codeHighlighted: snippet.contentHighlighted,
description: snippet.description ?? undefined,
isPrivate: snippet.isPrivate,
language: selectLanguageOptionValue(languageOptions, snippet.language),
lineHighlight: snippet.lineHighLight,
name: snippet.name,
theme: selectCodeHighlightOptionValue(snippet.theme),
},
resolver: yupResolver(formSchema),
});
const submitUpdateSnippet = async (values: SnippetFormValues) => {
await updateSnippet({
id: snippet.id,
input: {
content: values.code,
contentHighlighted: values.codeHighlighted,
description: values.description,
language: values.language?.id ?? extractLanguageFromName(values.name),
lineHighlight: lineHighlightToString(values.lineHighlight),
name: values.name,
theme: values.theme.id,
visibility: values.isPrivate ? 'private' : 'public',
},
onError: (message) => {
toastError({ message: `Failed to update: ${message}` });
},
onSuccess: () => {
toastSuccess({ message: 'Snippet updated!' });
},
});
};
return (
<div>
<FormProvider {...formMethods}>
<SnippetTextEditor
highlighter={highlighter}
languageOptions={languageOptions}
codeHighlightOptions={CODE_HIGHLIGHT_OPTIONS}
themeOptions={THEME_OPTIONS}
/>
<div className="mt-5 flex justify-end space-x-6">
<Button
className="w-auto"
onClick={formMethods.handleSubmit(submitUpdateSnippet)}
disabled={isLoading}
isLoading={isLoading}
>
Update
</Button>
</div>
</FormProvider>
</div>
);
};
export { ViewSnippet };