From 18db8b6a1ac6be0b932c85cd5661703d5800011b Mon Sep 17 00:00:00 2001
From: Eric Cabrel TIOGO <tericcabrel@yahoo.com>
Date: Fri, 11 Nov 2022 15:58:09 +0100
Subject: [PATCH] feat(snippet): set the current language as the default when
 editing

---
 apps/web/src/styles/code-editor.css                   |  1 -
 .../directory/snippets/form/create-snippet.tsx        | 11 ++---------
 .../directory/snippets/form/view-snippet.tsx          | 11 ++++++++---
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/styles/code-editor.css b/apps/web/src/styles/code-editor.css
index 2c5cfbb7..a5e6079c 100644
--- a/apps/web/src/styles/code-editor.css
+++ b/apps/web/src/styles/code-editor.css
@@ -4,7 +4,6 @@
 
 .code-editor-container textarea {
   outline: 0;
-  caret-color: white;
   font-family: 'Inter', monospace !important;
   font-size: 14px;
   padding-left: 50px !important;
diff --git a/packages/front/src/components/directory/snippets/form/create-snippet.tsx b/packages/front/src/components/directory/snippets/form/create-snippet.tsx
index 8b6c9ba4..17b8d8a3 100644
--- a/packages/front/src/components/directory/snippets/form/create-snippet.tsx
+++ b/packages/front/src/components/directory/snippets/form/create-snippet.tsx
@@ -27,12 +27,7 @@ const CreateSnippetContainer = ({ closeModal, folderId, open }: Props) => {
 
   const formMethods = useForm<SnippetFormValues>({
     defaultValues: {
-      code: `import fs from "fs";
-import path from "path";
-
-const content= fs.readFileSync(path.resolve(__dirname, 'file.json'), { encoding: "utf-8" });
-
-console.log(content);`,
+      code: `// Write your code here...\n`,
       codeHighlight: CODE_HIGHLIGHT_OPTIONS[0],
       codeHighlighted: '',
       isPrivate: true,
@@ -45,7 +40,7 @@ console.log(content);`,
   const handleCloseModal = () => {
     closeModal();
     formMethods.reset({
-      code: '',
+      code: '// Write your code here...\n',
       codeHighlight: CODE_HIGHLIGHT_OPTIONS[0],
       codeHighlighted: '',
       description: '',
@@ -58,8 +53,6 @@ console.log(content);`,
   };
 
   const submitCreateSnippet = async (values: SnippetFormValues) => {
-    console.log('Values => ', values);
-
     await createSnippet({
       input: {
         content: values.code,
diff --git a/packages/front/src/components/directory/snippets/form/view-snippet.tsx b/packages/front/src/components/directory/snippets/form/view-snippet.tsx
index 1894301c..8a5fabdf 100644
--- a/packages/front/src/components/directory/snippets/form/view-snippet.tsx
+++ b/packages/front/src/components/directory/snippets/form/view-snippet.tsx
@@ -4,6 +4,7 @@ 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';
@@ -22,11 +23,16 @@ const selectCodeHighlightOptionValue = (theme: string) => {
   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: {
@@ -35,6 +41,7 @@ const ViewSnippet = ({ snippet }: Props) => {
       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),
@@ -43,8 +50,6 @@ const ViewSnippet = ({ snippet }: Props) => {
   });
 
   const submitUpdateSnippet = async (values: SnippetFormValues) => {
-    console.log('Values => ', values);
-
     await updateSnippet({
       id: snippet.id,
       input: {
@@ -71,7 +76,7 @@ const ViewSnippet = ({ snippet }: Props) => {
       <FormProvider {...formMethods}>
         <SnippetTextEditor
           highlighter={highlighter}
-          languageOptions={generateSnippetLanguageOptions()}
+          languageOptions={languageOptions}
           codeHighlightOptions={CODE_HIGHLIGHT_OPTIONS}
           themeOptions={THEME_OPTIONS}
         />