From a82ddccc1b5a6596947fe0bbc3c900cf1aec20ea Mon Sep 17 00:00:00 2001
From: William De Rocco <93288641+wderocco8@users.noreply.github.com>
Date: Sat, 3 Feb 2024 16:31:40 -0500
Subject: [PATCH 1/5] refactored file change inputs to separate renderFileInput
 function

---
 Pipfile             | 11 +++++++
 components/Form.tsx | 80 ++++++++++++++++++++++-----------------------
 2 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 Pipfile

diff --git a/Pipfile b/Pipfile
new file mode 100644
index 0000000..c398b0d
--- /dev/null
+++ b/Pipfile
@@ -0,0 +1,11 @@
+[[source]]
+url = "https://pypi.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+
+[dev-packages]
+
+[requires]
+python_version = "3.10"
diff --git a/components/Form.tsx b/components/Form.tsx
index 3e0f722..b81c1a9 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -526,6 +526,43 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       </>
     )
   };
+  console.log(resumeFileName)
+
+  const renderFileInput = (
+    id: keyof FormData,
+    label: string,
+    type: string = "file",
+    required: boolean = false
+  ) => (
+    <div className="flex flex-col mb-6">
+      <label className="block mb-4 text-sm font-medium text-gray-900">
+        {label} {required && <span className="text-red-500">*</span>}
+      </label>
+      <div className="relative">
+        <input
+          className="absolute inset-0 opacity-0 z-10"
+          id={id}
+          type={type}
+          name={id}
+          onChange={handleFileChange}
+          required={required}
+          disabled={isSubmitting}
+        />
+        <button
+          className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+          disabled={isSubmitting}
+        >
+          Upload {id}
+        </button>
+        {/* render either resume or image depending on id */}
+        {id === 'resume' ?
+          resumeFileName && <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>
+        :
+          imageFileName  && <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>
+        }
+      </div>
+    </div>
+  );
 
 
   const textStyles = {
@@ -570,48 +607,9 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       {renderInput("phone", "Phone Number (xxx-xxx-xxxx)", "text", true)}
       {renderInput("linkedin", "LinkedIn Profile", "text")}
       {renderInput("website", "Website / Portfolio", "text")}
+      {renderFileInput("resume", "Upload Your Resume (PDF)", "file", true)}
+      {renderFileInput("image", "Upload Profile Picture (PNG/JPG/JPEG)", "file", true)}
 
-      <div className="flex flex-col mb-6">
-        <label className="block mb-4 text-sm font-medium text-gray-900">Upload your resume (PDF) <span className="text-red-500">*</span></label>
-        <div className="relative">
-          <input
-            type="file"
-            id="resume"
-            name="resume"
-            className="absolute inset-0 opacity-0 z-10"
-            onChange={handleFileChange}
-            disabled={isSubmitting}
-          />
-          <button
-            className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
-            disabled={isSubmitting}
-          >
-            Upload Resume
-          </button>
-          {resumeFileName && <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>}
-        </div>
-      </div>
-
-      <div className="flex flex-col mb-6">
-        <label className="block mb-4 text-sm font-medium text-gray-900">Upload a picture of yourself (JPG/JPEG/PNG) <span className="text-red-500">*</span></label>
-        <div className="relative">
-          <input
-            type="file"
-            id="image"
-            name="image"
-            className="absolute inset-0 opacity-0 z-10"
-            onChange={handleFileChange}
-            disabled={isSubmitting}
-          />
-          <button
-            className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
-            disabled={isSubmitting}
-          >
-            Upload Image
-          </button>
-          {imageFileName && <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>}
-        </div>
-      </div>
 
       {includeEventsAttended && renderEventsAttendedSection()}
 

From 393d950606cbda04ee559f12be48c51ffa53cb30 Mon Sep 17 00:00:00 2001
From: William De Rocco <93288641+wderocco8@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:13:27 -0500
Subject: [PATCH 2/5] added functionality to delete resume/image -- styling in
 progress

---
 components/Form.tsx | 90 +++++++++++++++++++++++++++++++--------------
 1 file changed, 63 insertions(+), 27 deletions(-)

diff --git a/components/Form.tsx b/components/Form.tsx
index b81c1a9..677ecfd 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useState, ChangeEvent } from "react";
+import { useState, useRef, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import { Button, Label } from 'flowbite-react';
 import { AiOutlineLoading } from 'react-icons/ai';
@@ -489,6 +489,7 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       </>
     )
   }
+  console.log(imageFileSize, resumeFileSize)
 
   const renderEventsAttendedSection = () => {
 
@@ -526,43 +527,78 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       </>
     )
   };
-  console.log(resumeFileName)
 
   const renderFileInput = (
     id: keyof FormData,
     label: string,
     type: string = "file",
     required: boolean = false
-  ) => (
-    <div className="flex flex-col mb-6">
-      <label className="block mb-4 text-sm font-medium text-gray-900">
-        {label} {required && <span className="text-red-500">*</span>}
-      </label>
-      <div className="relative">
-        <input
-          className="absolute inset-0 opacity-0 z-10"
-          id={id}
-          type={type}
-          name={id}
-          onChange={handleFileChange}
-          required={required}
-          disabled={isSubmitting}
-        />
-        <button
-          className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
-          disabled={isSubmitting}
-        >
-          Upload {id}
-        </button>
+  ) => {
+    // Create a ref to hold the reference to the input element
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Function to clear the input value
+    const clearFileInput = (e: React.MouseEvent<HTMLButtonElement>) => {
+      console.log("clearing file")
+      e.stopPropagation();
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';  // Clear the input value
+        handleFileChange({ target: { id, files: null } } as ChangeEvent<HTMLInputElement>);
+      }
+    };
+
+    return (
+      <div className="flex flex-col mb-6">
+        <label className="block mb-4 text-sm font-medium text-gray-900">
+          {label} {required && <span className="text-red-500">*</span>}
+        </label>
+        <div className="relative">
+          <input
+            id={id}
+            ref={fileInputRef}
+            className="absolute inset-0 opacity-0 z-10"
+            type={type}
+            name={id}
+            onChange={handleFileChange}
+            required={required}
+            disabled={isSubmitting}
+          />
+          <button
+            className="text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+            disabled={isSubmitting}
+          >
+            Upload {id}
+          </button>
+        </div>
         {/* render either resume or image depending on id */}
         {id === 'resume' ?
-          resumeFileName && <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>
+          resumeFileName && 
+          <div className="flex items-center gap-5">
+            <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>
+            <button
+              className="z-30 text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+              onClick={(e) => clearFileInput(e)}
+              disabled={isSubmitting}
+            >
+              Clear {id}
+            </button>
+          </div>
         :
-          imageFileName  && <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>
+          imageFileName && 
+            <div className="flex items-center gap-5">
+              <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>
+              <button
+                className="z-30 text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+                onClick={(e) => clearFileInput(e)}
+                disabled={isSubmitting}
+              >
+                Clear {id}
+              </button>
+            </div>
         }
       </div>
-    </div>
-  );
+    );
+  }
 
 
   const textStyles = {

From adcddc9276216d2c96bcb7b8ff10d632e7fe8d8f Mon Sep 17 00:00:00 2001
From: William De Rocco <93288641+wderocco8@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:21:54 -0500
Subject: [PATCH 3/5] added styling to delete buttons

---
 components/Form.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/components/Form.tsx b/components/Form.tsx
index 677ecfd..65f7774 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -575,25 +575,26 @@ export default function Form({ title, questions, listingId, includeEventsAttende
           resumeFileName && 
           <div className="flex items-center gap-5">
             <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>
-            <button
-              className="z-30 text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+            <Button 
+              className="h-6 text-white bg-red-500 hover:red-600 focus:ring-4 focus:outline-none rounded-lg !text-xs text-center"
               onClick={(e) => clearFileInput(e)}
               disabled={isSubmitting}
-            >
-              Clear {id}
-            </button>
+              >
+              remove
+            </Button>
+
           </div>
         :
           imageFileName && 
             <div className="flex items-center gap-5">
               <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>
-              <button
-                className="z-30 text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-purple-300 dark:focus:ring-purple-800 font-medium rounded-lg text-xs px-5 py-2.5 text-center mr-2 mb-2"
+              <Button 
+                className="h-6 text-white bg-red-500 hover:red-600 focus:ring-4 focus:outline-none rounded-lg !text-xs text-center"
                 onClick={(e) => clearFileInput(e)}
                 disabled={isSubmitting}
-              >
-                Clear {id}
-              </button>
+                >
+                remove
+              </Button>
             </div>
         }
       </div>

From 6cba822d5d2513ba6c34d8bcfdc3e4cbb61acba5 Mon Sep 17 00:00:00 2001
From: William De Rocco <93288641+wderocco8@users.noreply.github.com>
Date: Sat, 3 Feb 2024 17:30:52 -0500
Subject: [PATCH 4/5] fixed bug -> ensured filenames reset when files are
 deleted

---
 components/Form.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/Form.tsx b/components/Form.tsx
index 65f7774..1cd6c8c 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -489,10 +489,9 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       </>
     )
   }
-  console.log(imageFileSize, resumeFileSize)
-
+  
   const renderEventsAttendedSection = () => {
-
+    
     // Helper function to convert id to name
     const renderEventName = (eventId: string) => {
       const eventIdToName = {
@@ -502,10 +501,10 @@ export default function Form({ title, questions, listingId, includeEventsAttende
         socialEvent: "Social Event",
         professionalPanel: "Professional Panel"
       };
-
+      
       return eventIdToName[eventId as keyof typeof eventIdToName] || "Unknown Event";
     };
-
+    
     return (
       <>
         <label className="block mb-2 text-sm font-medium text-gray-900">Events Attended <span className="text-red-500">*</span></label>
@@ -519,7 +518,7 @@ export default function Form({ title, questions, listingId, includeEventsAttende
                 checked={isChecked}
                 onChange={handleEventsAttendedChange}
                 disabled={isSubmitting}
-              />
+                />
               {renderEventName(event)}
             </label>
           ))}
@@ -542,6 +541,12 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       console.log("clearing file")
       e.stopPropagation();
       if (fileInputRef.current) {
+        // update resume/image name variables
+        if (fileInputRef.current.id === "resume") {
+          setResumeFileName("")
+        } else if (fileInputRef.current.id === "image") {
+          setImageFileName("")
+        }
         fileInputRef.current.value = '';  // Clear the input value
         handleFileChange({ target: { id, files: null } } as ChangeEvent<HTMLInputElement>);
       }

From e219a18f1586d3bfbb6f71e9a600c8617ef07cef Mon Sep 17 00:00:00 2001
From: Jin Young Bang <jybang@bu.edu>
Date: Sat, 3 Feb 2024 18:23:54 -0500
Subject: [PATCH 5/5] refactor: change button to icon

---
 Pipfile             | 11 ----------
 components/Form.tsx | 51 +++++++++++++++++++++------------------------
 2 files changed, 24 insertions(+), 38 deletions(-)
 delete mode 100644 Pipfile

diff --git a/Pipfile b/Pipfile
deleted file mode 100644
index c398b0d..0000000
--- a/Pipfile
+++ /dev/null
@@ -1,11 +0,0 @@
-[[source]]
-url = "https://pypi.org/simple"
-verify_ssl = true
-name = "pypi"
-
-[packages]
-
-[dev-packages]
-
-[requires]
-python_version = "3.10"
diff --git a/components/Form.tsx b/components/Form.tsx
index 1cd6c8c..73044cb 100644
--- a/components/Form.tsx
+++ b/components/Form.tsx
@@ -3,6 +3,8 @@ import { useState, useRef, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
 import { Button, Label } from 'flowbite-react';
 import { AiOutlineLoading } from 'react-icons/ai';
+import { HiOutlineX } from "react-icons/hi";
+
 
 import { Events, FormData, FormProps } from "@/types/form"
 
@@ -489,9 +491,9 @@ export default function Form({ title, questions, listingId, includeEventsAttende
       </>
     )
   }
-  
+
   const renderEventsAttendedSection = () => {
-    
+
     // Helper function to convert id to name
     const renderEventName = (eventId: string) => {
       const eventIdToName = {
@@ -501,10 +503,10 @@ export default function Form({ title, questions, listingId, includeEventsAttende
         socialEvent: "Social Event",
         professionalPanel: "Professional Panel"
       };
-      
+
       return eventIdToName[eventId as keyof typeof eventIdToName] || "Unknown Event";
     };
-    
+
     return (
       <>
         <label className="block mb-2 text-sm font-medium text-gray-900">Events Attended <span className="text-red-500">*</span></label>
@@ -518,7 +520,7 @@ export default function Form({ title, questions, listingId, includeEventsAttende
                 checked={isChecked}
                 onChange={handleEventsAttendedChange}
                 disabled={isSubmitting}
-                />
+              />
               {renderEventName(event)}
             </label>
           ))}
@@ -577,30 +579,25 @@ export default function Form({ title, questions, listingId, includeEventsAttende
         </div>
         {/* render either resume or image depending on id */}
         {id === 'resume' ?
-          resumeFileName && 
-          <div className="flex items-center gap-5">
-            <p className="text-gray-500 text-xs mt-1">{resumeFileName}</p>
-            <Button 
-              className="h-6 text-white bg-red-500 hover:red-600 focus:ring-4 focus:outline-none rounded-lg !text-xs text-center"
-              onClick={(e) => clearFileInput(e)}
+          resumeFileName &&
+          <div className="flex items-center gap-2 mt-1">
+            <p className="text-gray-500 text-xs">{resumeFileName}</p>
+            <HiOutlineX
+              className="text-gray-500 hover:text-gray-600 text-center cursor-pointer"
+              onClick={(e: any) => clearFileInput(e)}
               disabled={isSubmitting}
-              >
-              remove
-            </Button>
-
+            />
+          </div>
+          :
+          imageFileName &&
+          <div className="flex items-center gap-2 mt-1">
+            <p className="text-gray-500 text-xs">{imageFileName}</p>
+            <HiOutlineX
+              className="text-gray-500 hover:text-gray-600 text-center cursor-pointer"
+              onClick={(e: any) => clearFileInput(e)}
+              disabled={isSubmitting}
+            />
           </div>
-        :
-          imageFileName && 
-            <div className="flex items-center gap-5">
-              <p className="text-gray-500 text-xs mt-1">{imageFileName}</p>
-              <Button 
-                className="h-6 text-white bg-red-500 hover:red-600 focus:ring-4 focus:outline-none rounded-lg !text-xs text-center"
-                onClick={(e) => clearFileInput(e)}
-                disabled={isSubmitting}
-                >
-                remove
-              </Button>
-            </div>
         }
       </div>
     );