ability to submit code

Ashesi-Org · Jul 12, 2024 · 17db82c · 17db82c
1 parent 9d1b3ae
commit 17db82c
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 58 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 yarn.lock
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

diff --git a/src/app/(playground)/technical/[...slug]/page.tsx b/src/app/(playground)/technical/[...slug]/page.tsx
@@ -43,15 +43,16 @@ interface ProblemDescriptionProps {
 const Playground = ({ params }: { params: { slug: string } }) => {
 
     const router = useRouter();
-    const {activeChallengeId} = useActiveChallengeStore();
+    const { activeChallengeId } = useActiveChallengeStore();
     const challengeId = activeChallengeId ? activeChallengeId : params.slug?.[0];
     const sessionId = params.slug?.[2];
     const userId = 1;
 
-    if(!challengeId) {
+    if (!challengeId) {
         router.push('/challenges')
         return <></>
     };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { data: problem, isLoading } = useQuery('activeProblem', async () => {
         const response = await api.get(`/api/challenge/${challengeId}`)
 
@@ -60,7 +61,7 @@ const Playground = ({ params }: { params: { slug: string } }) => {
 
     return (
         <>
-            <VideoAudioRecorder sessionId={sessionId} userId={userId}  />
+            {/* <VideoAudioRecorder sessionId={sessionId} userId={userId} /> */}
             <div className="h-screen">
                 <ResizablePanelGroup direction="horizontal" className="w-full border ">
                     <ResizablePanel className="" defaultSize={40}>

diff --git a/src/app/(problems)/challenges/page.tsx b/src/app/(problems)/challenges/page.tsx
@@ -172,21 +172,21 @@ export default function ProblemsTable() {
     const createSession = async (
 
     ) => {
-        
+
         setIsCreatingSession(true);
         setRulesAccepted(true);
         const response = await api.post(`/api/session`, {
             challengeId: selectedChallenge?.challenge_id,
             userId: 1,
         });
-               
+
         if (response.status === 201) {
             const data = response.data;
             console.log(data);
             setActiveChallenge(data?.practiceSession.challengeId);
             setIsCreatingSession(false);
             setShowDialog(false);
-        router.push(`/technical/${data?.practiceSession.challengeId}/${createSlug(selectedChallenge?.title as string)}/${data?.practiceSession.sessionId}`, {
+            router.push(`/technical/${data?.practiceSession.challengeId}/${createSlug(selectedChallenge?.title as string)}/${data?.practiceSession.sessionId}`, {
                 scroll: false,
             });
         } else {
@@ -353,27 +353,25 @@ export default function ProblemsTable() {
             <Dialog open={showDialog} onOpenChange={setShowDialog}>
                 <DialogContent>
                     <DialogHeader>
-                        <DialogTitle>Accept Rules and Guidelines</DialogTitle>
+                        <DialogTitle> Rules and Guidelines</DialogTitle>
                         <DialogDescription>
                             Please read and accept the rules before proceeding.
                         </DialogDescription>
                     </DialogHeader>
                     <div className="py-4">
-                        <ul className="list-disc pl-5 space-y-2">
+                        <ul className="list-disc pl-5 space-y-3">
                             <li>
                                 {' '}
-                                0: Make sure you have access to mic and web cam for the
+                                Make sure you enable access to your <strong>mic</strong> and <strong>web cam </strong>for the
                                 interview.
                             </li>
                             <li>
                                 {' '}
-                                1: Make sure to take this practice in a well lit environment.
+                                Make sure to take this practice in a well lit environment.
                             </li>
-                            <li> 2: Do not share your code.</li>
-                            <li> 3: Complete the challenge within the given time.</li>
-                            <li> 4: Do not use any external help.</li>
-                            <li> 5: Do not navigate to other websites.</li>
-                            <li> 6: Do not use any malicious software.</li>
+                            <li> Complete the challenge within the given time.</li>
+                            <li> Do not seek for any external help.</li>
+                            <li> Do not navigate to other websites. Stay on the current tab</li>
                         </ul>
                     </div>
                     <DialogFooter>

diff --git a/src/app/ui/navbar.tsx b/src/app/ui/navbar.tsx
@@ -17,40 +17,61 @@ import {
     SheetTrigger,
     SheetHeader,
     SheetDescription,
-    SheetTitle
-} from "@/components/ui/sheet";
-import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { CustomDialog } from "@/components/shared/custom-dialog";
-import ProblemList from "@/components/problems-list/problem-list";
-import Link from 'next/link'
-import { TooltipWrapper } from "@/components/utils/tooltip-wrapper";
-import useCompilerStore from "@/store/editor-store";
-import { usePathname } from 'next/navigation'
-import { UserContext } from "@/contexts/userContext";
-import { useContext } from "react";
-
-
+    SheetTitle,
+} from '@/components/ui/sheet';
+import { Input } from '@/components/ui/input';
+import { Search } from 'lucide-react';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog';
+import { CustomDialog } from '@/components/shared/custom-dialog';
+import ProblemList from '@/components/problems-list/problem-list';
+import Link from 'next/link';
+import { TooltipWrapper } from '@/components/utils/tooltip-wrapper';
+import useCompilerStore from '@/store/editor-store';
+import { usePathname } from 'next/navigation';
+import { UserContext } from '@/contexts/userContext';
+import { useContext } from 'react';
 
 const Navbar = () => {
-    const { code, running, outputDetails, handleCompile } = useCompilerStore();
-    const { user:currentUser } = useContext(UserContext);
+    const { code, running, submitting, handleCompile, handleSubmit } =
+        useCompilerStore();
+    const { user: currentUser } = useContext(UserContext);
 
-
-    const pathname = usePathname()
-    const args = pathname.split("/");
+    const pathname = usePathname();
+    const args = pathname.split('/');
 
     //TODO: GET THESE FROM THE ACTIVE CHALLENGE AND SESSION STORE BUT FOR NOW:  Destructure challengeId and sessionId based on the technical route
-    const [challengeId, sessionId] = args[1] === "technical" ? [args[2], args[4]] : ['0', ""];
-
+    const [challengeId, sessionId] =
+        args[1] === 'technical' ? [args[2], args[4]] : ['0', ''];
 
     const runCode = () => {
-        console.log("running code", code, challengeId, sessionId, currentUser?.id);
-        handleCompile(code, '', 71, parseInt(challengeId), currentUser?.id, sessionId);
+        console.log('running code', code, challengeId, sessionId, currentUser?.id);
+        handleCompile(
+            code,
+            '',
+            71,
+            parseInt(challengeId),
+            currentUser?.id,
+            sessionId
+        );
     };
-
 
+    const submitCode = () => {
+        console.log(
+            'submitting code',
+            code,
+            challengeId,
+            sessionId,
+            currentUser?.id
+        );
+        handleSubmit(
+            code,
+            '',
+            71,
+            parseInt(challengeId),
+            currentUser?.id,
+            sessionId
+        );
+    };
 
     return (
         <header
@@ -123,7 +144,8 @@ const Navbar = () => {
                         ) : (
                             <Button
                                 onClick={runCode}
-                                className="h-auto w-fit flex items-center gap-1"
+                                className={`${submitting ? 'hidden' : 'flex'
+                                    } h-auto w-fit items-center gap-1`}
                             >
                                 <span>
                                     <Play size={14} />
@@ -132,19 +154,33 @@ const Navbar = () => {
                             </Button>
                         )}
 
-                        <Button
-                            className="h-auto w-fit flex items-center gap-1"
-                            variant="secondary"
-                        >
-                            <span>
-                                <BugPlay size={14} />
-                            </span>
-                            <span>Submit</span>
-                        </Button>
+                        {submitting ? (
+                            <Button
+                                className="h-auto w-fit flex items-center gap-1"
+                                variant="secondary"
+                                disabled
+                            >
+                                <span>
+                                    <Loader2 className=" h-4 w-4 animate-spin" />
+                                </span>
+                                <span>Submitting</span>
+                            </Button>
+                        ) : (
+                            <Button
+                                className={`${running ? 'hidden' : 'flex'
+                                    } h-auto w-fit items-center gap-1`}
+                                variant="secondary"
+                                onClick={submitCode}
+                            >
+                                <span>
+                                    <BugPlay size={14} />
+                                </span>
+                                <span>Submit</span>
+                            </Button>
+                        )}
                     </div>
                 )}
                 <div className="flex gap-3 items-center">
-
                     {pathname !== '/challenges' && (
                         <div className="p-[0.65rem] cursor-pointer w-fit h-full bg-secondary rounded-md text-secondary-foreground hover:bg-secondary/80">
                             <TooltipWrapper

diff --git a/src/components/human-message.tsx b/src/components/human-message.tsx
@@ -1,9 +1,9 @@
 import { Button } from './ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import { UserContext } from "@/contexts/userContext";
 import { Message } from 'ai';
 import { TextContent } from './text-content';
+import { useContext } from 'react';
 
 export const HumanMessage = ({
     message,
@@ -12,16 +12,19 @@ export const HumanMessage = ({
     message?: Message;
     text?: string;
 }) => {
+
+    const { user: currentUser } = useContext(UserContext);
+
     return (
         <>
             <div className="flex items-center gap-2 w-full rounded-md min-h-[60px]">
                 <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                     <Avatar className="h-8 w-8">
                         <AvatarImage
-                            src="https://avatars.githubusercontent.com/u/79936608?v=4"
+                            src={currentUser?.profileImage}
                             alt="role-image"
                         />
-                        <AvatarFallback>SH</AvatarFallback>
+                        <AvatarFallback>{currentUser?.firstName}</AvatarFallback>
                     </Avatar>
                 </Button>
                 <div className="flex gap-2  rounded-md min-h-[60px]">

diff --git a/src/components/output-section/output-status.tsx b/src/components/output-section/output-status.tsx
@@ -22,6 +22,7 @@ const OutputStatus = () => {
     };
 
     const executionFeedback = () => {
+
         const somePassed = testResults?.some(item => item.status.id === 11 || item.status.id === 4);
         const allPassed = testResults?.every(item => item.status.id === 3);
         if (somePassed) {

diff --git a/src/contexts/deepgram.tsx b/src/contexts/deepgram.tsx
@@ -205,7 +205,8 @@ const DeepgramContextProvider = ({ children }: DeepgramContextInterface) => {
             });
 
             connection.addListener(LiveTranscriptionEvents.Close, () => {
-                toast.error("The connection to Deepgram closed, we'll attempt to reconnect.");
+                // toast.error("The connection to Deepgram closed, we'll attempt to reconnect.");
+                console.error("The connection to Deepgram closed, we'll attempt to reconnect.");
                 setConnectionReady(false);
                 connection.removeAllListeners();
                 setConnection(undefined);

diff --git a/src/store/editor-store.ts b/src/store/editor-store.ts
@@ -30,8 +30,10 @@ interface CompilerStore {
   code: string;
   setCode: (code: string) => void;
   running: boolean;
+  submitting: boolean;
   outputDetails: OutputDetails | null;
   setRunning: (running: boolean) => void;
+  setSubmitting: (submitting: boolean) => void;
   setOutputDetails: (outputDetails: OutputDetails | null) => void;
   handleCompile: (
     code: string,
@@ -41,18 +43,28 @@ interface CompilerStore {
     userId: number,
     sessionId: string
   ) => void;
+  handleSubmit: (
+    code: string,
+    customInput: string,
+    language_id: number,
+    problemId: number,
+    userId: number,
+    sessionId: string
+  ) => void;
 }
 
 const useCompilerStore = create<CompilerStore>((set, get) => ({
   code: '',
   setCode: (newCode) => set({ code: newCode }),
   running: false,
+  submitting: false,
   outputDetails: null,
   setRunning: (running) => set({ running }),
+  setSubmitting: (submitting) => set({ submitting }),
   setOutputDetails: (outputDetails) => set({ outputDetails }),
   handleCompile: async (
     code,
-    customInput,
+    _customInput,
     language_id,
     problemId,
     userId,
@@ -73,7 +85,7 @@ const useCompilerStore = create<CompilerStore>((set, get) => ({
     const options = {
       method: 'POST',
       url: '/api/submission',
-      params: { type: 'test' }, // Or 'submit'
+      params: { type: 'test' },
       data: formData,
     };
 
@@ -97,6 +109,53 @@ const useCompilerStore = create<CompilerStore>((set, get) => ({
       console.log('catch block...', error);
     }
   },
+  handleSubmit: async (
+    code,
+    _customInput,
+    language_id,
+    problemId,
+    userId,
+    sessionId
+  ) => {
+    const setSubmitting = get().setSubmitting;
+    const setOutputDetails = get().setOutputDetails;
+
+    setSubmitting(true);
+    const formData = {
+      languageId: language_id || 63,
+      code: code,
+      problemId: problemId,
+      userId: userId,
+      sessionId: sessionId,
+    };
+
+    const options = {
+      method: 'POST',
+      url: '/api/submission',
+      params: { type: 'test' },
+      data: formData,
+    };
+
+    try {
+      const response = await api.request(options);
+      const results = response.data;
+      console.log(results);
+      setSubmitting(false);
+      setOutputDetails(results);
+    } catch (err: any) {
+      let error = err.response ? err.response.data : err;
+      let status = err.response?.status;
+      console.log('error', error);
+      console.log('status', status);
+
+      if (status === 429) {
+        console.log('too many requests', status);
+      }
+
+      setSubmitting(false);
+      console.log('catch block...', error.message);
+    }
+  },
 }));
 
 export default useCompilerStore;