work on upload bahaviour

Author: kexana

my-app/src/views/Components/SideBarComponents/CourseTranscriptList.jsx

@@ -1,11 +1,13 @@
-import { useState, useRef } from "react";
+import { useState, useRef, forwardRef } from "react";
 import Tooltip from "./ToolTip";
 
 export default function CourseTranscriptList(props) {
     let local = [];
     if (localStorage.getItem("completedCourses"))
         local = JSON.parse(localStorage.getItem("completedCourses"));
-
+    
+    const [items, setItems] = useState(local);
+    
     // eslint-disable-next-line no-unused-vars
     window.addEventListener("completedCourses changed", event => {
         if (localStorage.getItem("completedCourses"))
@@ -14,8 +16,6 @@ export default function CourseTranscriptList(props) {
     });
 
 
-    const [items, setItems] = useState(local);
-
     function removeItem(index) {
         var newItems = [];
         for (let i = 0; i < items.length; i++) {
@@ -31,6 +31,9 @@ export default function CourseTranscriptList(props) {
         localStorage.setItem("completedCourses", JSON.stringify(newitems));
         window.dispatchEvent(new Event("completedCourses changed"));
         props.reApplyFilter();
+        if (props.checkboxRef && props.checkboxRef.current) {
+            props.checkboxRef.current.click();
+        }
     };
 
 

my-app/src/views/Components/SideBarComponents/UploadField.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import CourseTranscriptList from './CourseTranscriptList';
 import FilterEnableCheckbox from "./FilterEnableCheckbox";
 //import * as scraper from '../../../../src/scripts/transcript-scraper/transcript-scraper.js';
@@ -13,10 +13,6 @@ export default function UploadField(props) {
 
     const checkboxRef = useRef(null);
 
-    useState(() => {
-        setfileUploaded(localStorage.getItem("completedCourses") != undefined)
-    });
-
     const handleDragOver = (event) => {
         event.preventDefault(); // Prevent default behavior (to allow drop)
         setIsDragging(true);
@@ -31,6 +27,8 @@ export default function UploadField(props) {
         setIsDragging(false);
         if (event.dataTransfer.files.length > 0) {
             props.handleFileChange({ target: { files: event.dataTransfer.files } });
+            setfileUploaded(localStorage.getItem("completedCourses") != undefined);
+            console.log(localStorage.getItem("completedCourses") != undefined);
         }
     };
 
@@ -76,7 +74,14 @@ export default function UploadField(props) {
                             <p className=" text-sm "><span className="font-semibold">Click to upload</span> or drag and drop</p>
                             <p className="text-xs">KTH transcript of records in PDF format</p>
                         </div>
-                        <input id="PDF-Scraper-Input" type="file" className="hidden" onChange={props.handleFileChange} />
+                        <input
+                            id="PDF-Scraper-Input" 
+                            type="file" 
+                            className="hidden" 
+                            onChange={(event) => {
+                                props.handleFileChange(event);
+                                setfileUploaded(true);
+                            }}  />
                     </label>
                 </div>
                 <ButtonGroupField
@@ -94,6 +99,7 @@ export default function UploadField(props) {
                 }`}>
                 <CourseTranscriptList
                     reApplyFilter={props.reApplyFilter}
+                    ref={checkboxRef}
                 />
             </div>
         </div>