refactor(submit): enable code submission

.changes/refactor-submit.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:refactor
+---
+
+Refactor and enable code submission in monaco editor.

src/components/MonacoEditor.vue

@@ -11,9 +11,10 @@ import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { useThemeStore } from '@/scripts/store';
 import type { SelectChangeEvent } from 'primevue';
+import { Language } from '@/scripts/types';
 
-const code = defineModel<string>('code', { required: true });
-const language = defineModel<string>('language', { default: 'rust' });
+const language = defineModel<Language>('language', { default: Language.Rust });
+const emit = defineEmits(['submit'])
 
 const themeStore = useThemeStore();
 
@@ -55,7 +56,7 @@ onMounted(async () => {
     }
     loader.config({ monaco })
     editor.value = await loader.init().then((monaco) => monaco.editor.create(editorContainer.value, {
-        value: code.value,
+        value: '',
         language: 'rust',
         theme: themeStore.dark ? 'vs-dark' : 'vs',
         fontFamily: 'Cascadia Code, Consolas, Menlo, Monaco, "Courier New", monospace',
@@ -77,10 +78,10 @@ onBeforeUnmount(disposeEditor)
 onBeforeRouteLeave(disposeEditor)
 
 const languageOptions = [
-    { name: 'Rust', value: 'rust' },
-    { name: 'Python', value: 'python' },
-    { name: 'C', value: 'c' },
-    { name: 'C++', value: 'cpp' },
+    { name: 'Rust', value: Language.Rust },
+    { name: 'Python', value: Language.Python },
+    { name: 'C', value: Language.C },
+    { name: 'C++', value: Language.Cpp },
 ]
 
 const onChangeLanguage = (value: SelectChangeEvent) => {
@@ -97,7 +98,8 @@ const onChangeLanguage = (value: SelectChangeEvent) => {
         <div class="flex flex-row m-[6px] justify-between">
             <Select v-model="language" @change="onChangeLanguage" :options="languageOptions" optionLabel="name"
                 optionValue="value" placeholder="Select a Language" />
-            <Button label="Submit" icon="pi pi-send" size="small" severity="contrast" outlined></Button>
+            <Button @click="emit('submit', rawEditor?.getValue(), language)" label="Submit" icon="pi pi-send"
+                size="small" severity="contrast" outlined></Button>
         </div>
         <div class="flex-1" ref="editorContainer"></div>
     </div>

src/scripts/api.ts

@@ -148,15 +148,14 @@ export const listProblems = async (form: ListProblem) => {
 };
 
 interface SubmitCodeForm {
-  id: string;
-  token: string;
-  language: string;
+  auth: Credentials;
   code: string;
+  lang: string;
 }
 
 export const submitCode = async (problem_id: string, form: SubmitCodeForm) => {
   try {
-    const response = await axios.post(`/problem/submit/${problem_id}`, form);
+    const response = await axios.post(`/code/submit/${problem_id}`, form);
     return response.data as Response<undefined>;
   } catch (error) {
     return handleAxiosError(AxiosError.from(error));

src/scripts/types.ts

@@ -55,3 +55,10 @@ export interface ProblemDetail {
   created_at: Date;
   updated_at: Date;
 }
+
+export enum Language {
+  Rust = "Rust",
+  Python = "Python",
+  C = "C",
+  Cpp = "Cpp",
+}

src/views/problem/[id].vue

@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
 import * as api from '@/scripts/api';
 import { useAccountStore, useThemeStore } from '@/scripts/store';
 import { useToast } from 'primevue';
-import type { ProblemDetail } from '@/scripts/types';
+import { Language, ProblemDetail } from '@/scripts/types';
 import { MdPreview } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 
@@ -37,12 +37,14 @@ const formatProblem = (problem: ProblemDetail) => {
 }
 
 const code = ref('');
-const language = ref('rust');
-const onSubmitCode = async (code: string, language: string) => {
+const language = ref(Language.Rust);
+const onSubmit = async (code: string, lang: Language) => {
+    if (!code) {
+        return toast.add({ severity: 'error', summary: 'Error', detail: 'Please enter your code.' });
+    }
     const res = await api.submitCode(id, {
-        id: accountStore.account.id!,
-        token: accountStore.account.token!,
-        language,
+        auth: accountStore.auth!,
+        lang,
         code,
     });
     if (!res.success) {
@@ -89,7 +91,7 @@ onMounted(async () => {
                 </Panel>
             </SplitterPanel>
             <SplitterPanel>
-                <MonacoEditor :code="code" :language="language" :onSubmitCode="onSubmitCode">
+                <MonacoEditor :code="code" :language="language" :onSubmit>
                 </MonacoEditor>
             </SplitterPanel>
         </Splitter>