From ed9eb04f1e769c12bd46c77fc777fc69fb57f131 Mon Sep 17 00:00:00 2001
From: Puneet Bajaj <puneetbajaj591@gmail.com>
Date: Thu, 11 Apr 2024 21:40:11 -0400
Subject: [PATCH] initial connection attempt to backend

---
 app/login/student_login.tsx             |  95 ++++++++++++++++---
 app/student/profile/student_profile.tsx |  18 +++-
 app/utils/drag_and_drop.tsx             | 120 ++++++++++++++++--------
 components/ui/skeleton.tsx              |  15 +++
 lib/models.ts                           |  13 +++
 5 files changed, 210 insertions(+), 51 deletions(-)
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 lib/models.ts

diff --git a/app/login/student_login.tsx b/app/login/student_login.tsx
index 9349949..c89ba7f 100644
--- a/app/login/student_login.tsx
+++ b/app/login/student_login.tsx
@@ -23,28 +23,92 @@ import { useRouter } from 'next/navigation';
 const StudentLoginPage: React.FC = () => {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
+    const [cpassword, setCPassword] = useState('');
+    const [name, setName] = useState('');
+    const [isMismatched, setIsMismatched] = useState(false);
 
     const router = useRouter();
 
-    const handleLoginClick = () => {
-      router.push('/student');
+    const handleLoginClick = async () => {
+        try {
+            const response = await fetch('${process.env.NEXT_PUBLIC_BACKEND_URL}/api/signin/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    email: username,
+                    Password: password,
+                }),
+                credentials: 'include',
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                console.log(data);
+                router.push('/student');
+            } else {
+                alert('Login failed. Please check your credentials and try again.');
+            }
+        } catch (error) {
+            console.error('There was an error logging in:', error);
+            alert('An error occurred. Please try again later.');
+        }
     };
 
-    const handleSignupClick = () => {
-        router.push('/student/signup');
+    const handleSignupClick = async () => {
+        try {
+            const response = await fetch('${process.env.NEXT_PUBLIC_BACKEND_URL}/api/signup/', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: name,
+                    email: username,
+                    Password: password,
+                }),
+                credentials: 'include',
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                console.log(data);
+                router.push('/student/signup');
+            } else {
+                alert('Signup failed. Please try again.');
+            }
+
+        } catch (error) {
+            console.error('There was an error signing up:', error);
+            alert('An error occurred. Please try again later.');
+        }
     };
 
     const handleUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setUsername(event.target.value);
     };
 
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setName(event.target.value);
+    }
+
+    const handleCPasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setCPassword(event.target.value);
+        if (password !== event.target.value) {
+            setIsMismatched(true);
+        } else {
+            setIsMismatched(false);
+        }
+    }
+
     const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setPassword(event.target.value);
     };
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
-        // Perform login logic here
+        handleLoginClick();
     };
 
     return (
@@ -65,11 +129,11 @@ const StudentLoginPage: React.FC = () => {
                     <CardContent className="space-y-2">
                         <div className="space-y-1">
                         <Label htmlFor="username">Username</Label>
-                        <Input id="username"/>
+                        <Input id="username" value={username} onChange={handleUsernameChange}/>
                         </div>
                         <div className="space-y-1">
                         <Label htmlFor="password">Password</Label>
-                        <Input id="password" type='password' />
+                        <Input id="password" type='password' value={password} onChange={handlePasswordChange}/>
                         </div>
                     </CardContent>
                     <CardFooter>
@@ -86,21 +150,30 @@ const StudentLoginPage: React.FC = () => {
                         </CardDescription>
                     </CardHeader>
                     <CardContent className="space-y-2">
+                        <div className="space-y-1">
+                        <Label htmlFor="name">Full Name</Label>
+                        <Input id="name" value={name} onChange={handleNameChange}/>
+                        </div>
                         <div className="space-y-1">
                         <Label htmlFor="email">Email</Label>
-                        <Input id="email"/>
+                        <Input id="email" value={username} onChange={handleUsernameChange}/>
                         </div>
                         <div className="space-y-1">
                         <Label htmlFor="password">Password</Label>
-                        <Input id="password" type="password" />
+                        <Input id="password" type="password" value={password} onChange={handlePasswordChange}/>
                         </div>
                         <div className="space-y-1">
                         <Label htmlFor="confirmPassword">Confirm Password</Label>
-                        <Input id="confirmPassword" type="password" />
+                        <Input id="confirmPassword" type="password" value={cpassword} onChange={handleCPasswordChange} />
                         </div>
+                        {isMismatched && (
+                            <div style={{ color: 'red' }}>
+                                Passwords do not match.
+                            </div>
+                        )}
                     </CardContent>
                     <CardFooter>
-                        <Button onClick={handleSignupClick}>Sign Up</Button>
+                        <Button onClick={handleSignupClick} disabled={isMismatched}>Sign Up</Button>
                     </CardFooter>
                     </Card>
                 </TabsContent>
diff --git a/app/student/profile/student_profile.tsx b/app/student/profile/student_profile.tsx
index b111238..4097143 100644
--- a/app/student/profile/student_profile.tsx
+++ b/app/student/profile/student_profile.tsx
@@ -12,8 +12,21 @@ import Image from 'next/image';
 export interface StudentProfileProps {
 }
 
-export default class StudentProfile extends React.Component<StudentProfileProps> {
-  public render() {
+export default function StudentProfile() {
+
+    const [profileData, setProfileData] = React.useState(null);
+
+    React.useEffect(() => {
+        fetch('${process.env.NEXT_PUBLIC_BACKEND_URL}/api/student_profile/', {credentials: 'include'})
+            .then (response => response.json())
+            .then (data => {
+                setProfileData(data);
+            })
+            .catch (error => {
+                console.error('There was an error fetching the profile data:', error);
+            });
+    }, []);
+
     return (
       <div className='flex flex-col h-screen w-screen overflow-x-hidden'>
             <div>
@@ -59,5 +72,4 @@ export default class StudentProfile extends React.Component<StudentProfileProps>
             </div>
         </div>
     );
-  }
 }
diff --git a/app/utils/drag_and_drop.tsx b/app/utils/drag_and_drop.tsx
index e535a6f..1bddd26 100644
--- a/app/utils/drag_and_drop.tsx
+++ b/app/utils/drag_and_drop.tsx
@@ -1,11 +1,16 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { FormEvent, useRef, useState } from "react";
+import { useRouter } from 'next/navigation';
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function DragAndDrop() {
     const [dragActive, setDragActive] = useState<boolean>(false);
     const inputRef = useRef<any>(null);
-    const [files, setFiles] = useState<any>([]);
+    const [file, setFile] = useState<File | null>();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const router = useRouter();
 
     const handleDragEnter = (e: any) => {
         e.preventDefault();
@@ -25,54 +30,84 @@ export default function DragAndDrop() {
         setDragActive(true);
     };
 
-    const handleDrop = (e: any) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const handleDrop = (event: any) => {
+        event.preventDefault();
         setDragActive(false);
-        if(e.dataTransfer.files && e.dataTransfer.files[0]){
-            for(let i = 0; i < e.dataTransfer.files["length"]; i++){
-                setFiles((prevState: any) => [...prevState, e.dataTransfer.files[i]]);
-            }
+    
+        if (event.dataTransfer.files && event.dataTransfer.files[0]) {
+            const newFile = event.dataTransfer.files[0];
+            setFile(newFile);
         }
     };
+    
 
     const openFileExplorer = () => {
         inputRef.current.value = "";
         inputRef.current.click();
     };
 
-    const handleFileChange = (e: any) => {
-        e.preventDefault();
-        console.log("File has been added");
-        if(e.target.files && e.target.files[0]){
-            for(let i = 0; i < e.target.files["length"]; i++){
-                setFiles((prevState: any) => [...prevState, e.target.files[i]]);
-            }
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files[0]) {
+            const newFile = event.target.files[0];
+            setFile(newFile);
         }
     };
+    
 
-    function handleSubmitFile(e: any) {
-        if(files.length === 0){
-            // Show error message
+    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        if (!file) {
+          alert('Please select a file to upload.');
+          return;
         }
-        else{
-            // Perform file upload logic here
-        }
-    };
 
-    const removeFile = (name: any, index: any) => {
-        let newFiles = files.filter((file: any) => file.name !== name);
-        setFiles(newFiles);
+        setIsLoading(true);
+        const formData = new FormData();
+        formData.append('file', file); // 'file' should match the key expected by your Django backend
+    
+        try {
+          const response = await fetch('${process.env.NEXT_PUBLIC_BACKEND_URL}/api/upload/', { // Update URL to your actual endpoint
+            method: 'POST',
+            body: formData,
+            credentials: 'include', // to include cookies (e.g., sessionid)
+          });
+          
+            setIsLoading(false);
+          if (response.ok) {
+            const data = await response.json();
+            router.push('/student');
+          } else {
+            alert('Upload failed. Please try again.');
+          }
+        } catch (error) {
+          console.error('Error uploading file:', error);
+          alert('An error occurred. Please try again.');
+        }
+      };
+    const removeFile = () => {
+        setFile(null);
     };
 
     return (
         <div className="flex items-center justify-center min-h-max min-w-max">
-            <form 
+            {isLoading ? (
+                <div className='flex flex-col'>
+                <div className='flex gap-5 pb-5'>
+                    <Skeleton className='items-center gap-2 rounded-lg border p-3 text-md transition-all hover:bg-accent py-10 px-10' />
+                    <Skeleton className='items-center gap-2 rounded-lg border p-3 text-md transition-all hover:bg-accent py-10 px-10' />
+                </div>
+                <div className='flex gap-5'>
+                    <Skeleton className='items-center gap-2 rounded-lg border p-3 text-md transition-all hover:bg-accent py-10 px-10' />
+                    <Skeleton className='items-center gap-2 rounded-lg border p-3 text-md transition-all hover:bg-accent py-10 px-10' />
+                </div>
+                </div>
+            ) : 
+            (<form 
                 className={`${
                     dragActive ? "bg-blue-600" : "bg-blue-400"
                 } p-4 rounded-lg min-h-[10rem] text-center flex flex-col items-center justify-center`}
                 onDragEnter={handleDragEnter}
-                onSubmit={(e) => e.preventDefault()}
+                onSubmit={handleSubmit}
                 onDrop={handleDrop}
                 onDragLeave={handleDragLeave}
                 onDragOver={handleDragOver}
@@ -87,7 +122,7 @@ export default function DragAndDrop() {
                     accept=".pdf, .doc, .docx"
                 />
                 <p>
-                    Drag & Drop your files here or {" "}
+                    Drag & Drop your Resume here or {" "}
                     <span
                         className="text-blue-600 cursor-pointer"
                         onClick={openFileExplorer}
@@ -97,18 +132,29 @@ export default function DragAndDrop() {
                     to upload
                 </p>
                 <div className="flex flex-col items-center p-3">
-                    {files.map((file: any, index: any) => (
-                        <div key={index} className="flex flex-row space-x-5">
-                            <span>{file.name}</span>
-                            <span className="text-red-500 cursor-pointer"
-                                onClick = {() => removeFile(file.name, index)}
+                    {
+                        file && (
+                        <div>
+                            <p className="text-lg font-semibold">Files to be uploaded:</p>
+                            <div className="flex flex-row space-x-5">
+                                <span>{file.name}</span>
+                                <span className="text-red-500 cursor-pointer"
+                                    onClick = {() => removeFile()}
+                                >
+                                    remove
+                                </span>
+                            </div>
+                            <Button
+                                type="submit"
+                                className="bg-black p-2 rounded-lg text-white"
                             >
-                                remove
-                            </span>
+                                Upload
+                            </Button>
                         </div>
-                    ))}
+                    )}
                 </div>
             </form>
+            )}
         </div>
     );
 }
\ No newline at end of file
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/lib/models.ts b/lib/models.ts
new file mode 100644
index 0000000..9af4016
--- /dev/null
+++ b/lib/models.ts
@@ -0,0 +1,13 @@
+type ProfileData = {
+    Education : {
+        GPA: string,
+        Major: string,
+        Minor: string,
+        University: string,
+    },
+    Links : {
+        LinkedIn?: string,
+        GitHub?: string,
+        Website?: string,
+    },
+};
\ No newline at end of file