feat: add compile and execute code mutation

Author: rahulpeacock

.env.example

@@ -0,0 +1,3 @@
+RAPIDAPI_HOST = 'your-rapidapi-host'
+RAPIDAPI_KEY = 'your-rapidapi-key'
+SUBMISSIONS_URL = 'your-rapidapi-submissions-url'

package.json

@@ -22,6 +22,7 @@
 		"@trpc/client": "^10.45.0",
 		"@trpc/react-query": "^10.45.0",
 		"@trpc/server": "^10.45.0",
+		"axios": "^1.6.5",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"cmdk": "^0.2.0",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import Header from '@/components/global/header';
-import { CodeEditor, CodeOutput, CustomInput } from '@/components/pages/home/client';
+import { CodeEditor, CodeOutput, CompileCodeBtn, CustomInput } from '@/components/pages/home/client';
 import { Fragment } from 'react';
 
 export default function Home() {
@@ -18,6 +18,7 @@ export default function Home() {
 							<h3 className='scroll-m-20 text-xl font-semibold tracking-tight'>Output</h3>
 							<CodeOutput />
 							<CustomInput />
+							<CompileCodeBtn />
 						</div>
 					</div>
 				</section>

src/app/page.tsx

@@ -2,7 +2,7 @@ import { create } from 'zustand';
 
 type State = {
 	code: string;
-	customInput: string | undefined;
+	customInput: string;
 	backgroundColor: string;
 };
 
@@ -14,7 +14,7 @@ type Action = {
 
 export const useEditor = create<State & Action>((set) => ({
 	code: `console.log('Hello world')`,
-	customInput: undefined,
+	customInput: '',
 	backgroundColor: '#000000',
 	setcode: (code) => set((state) => ({ code })),
 	setcustominput: (input) => set((state) => ({ customInput: input })),

src/client/store/editor.ts

@@ -2,6 +2,8 @@
 
 import { useEditor } from '@/client/store/editor';
 import { useEditorOptions } from '@/client/store/editor-options';
+import { api } from '@/client/trpc';
+import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { languageOptions } from '@/constants/app';
 import Editor from '@monaco-editor/react';
@@ -47,3 +49,27 @@ export function CustomInput() {
 		</div>
 	);
 }
+
+export function CompileCodeBtn() {
+	const code = useEditor((state) => state.code);
+	const input = useEditor((state) => state.customInput);
+	const language = useEditorOptions((state) => state.language);
+	const mutation = api.code.compileCode.useMutation({
+		onSuccess: () => {
+			console.log('hello world');
+		},
+		onError: () => {
+			console.log('error');
+		},
+	});
+
+	function handleClick() {
+		mutation.mutate({ language, code, input });
+	}
+
+	return (
+		<Button type='button' className='mt-3 ml-auto w-auto' onClick={handleClick}>
+			Compile and Execute
+		</Button>
+	);
+}

src/components/pages/home/client.tsx

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+const processEnvSchema = z.object({
+	RAPIDAPI_HOST: z.string(),
+	RAPIDAPI_KEY: z.string(),
+	SUBMISSIONS_URL: z.string(),
+});
+processEnvSchema.parse(process.env);
+
+// global
+declare global {
+	namespace NodeJS {
+		interface ProcessEnv extends z.infer<typeof processEnvSchema> {}
+	}
+}

src/lib/types/index.ts

@@ -1,17 +1,42 @@
 import { createTRPCRouter, publicProcedure } from '@/server/api/trpc';
+import axios from 'axios';
 import { z } from 'zod';
 
 export const codeRouter = createTRPCRouter({
 	compileCode: publicProcedure
 		.input(
 			z.object({
-				subjectName: z.string(),
-				totalClasses: z.number(),
-				attendedClasses: z.number(),
-				color: z.string(),
+				language: z.number(),
+				code: z.string(),
+				input: z.string(),
 			}),
 		)
-		.mutation(async ({ input, ctx }) => {
+		.mutation(async ({ input }) => {
+			const { language, code, input: customInput } = input;
+			const options = {
+				method: 'POST',
+				url: process.env.SUBMISSIONS_URL,
+				params: { base64_encoded: 'true', fields: '*' },
+				headers: {
+					'content-type': 'application/json',
+					'Content-Type': 'application/json',
+					'X-RapidAPI-Key': process.env.RAPIDAPI_KEY,
+					'X-RapidAPI-Host': process.env.RAPIDAPI_HOST,
+				},
+				data: {
+					language_id: language,
+					source_code: btoa(code),
+					stdin: btoa(customInput),
+				},
+			};
+
+			try {
+				const response = await axios.request(options);
+				console.log(response.data);
+			} catch (error) {
+				console.error(error);
+			}
+
 			return 'code compiled';
 		}),
 });