Merge pull request #150 from Saifullah-dev/149-upgrade-upgrade-to-react-v19

149 upgrade upgrade to react v19

Author: Saifullah-dev

frontend/package-lock.json

@@ -20,9 +20,8 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "react-collapsible": "^2.10.0",
-    "react-icons": "^5.2.1",
-    "react-loading": "^2.0.3"
+    "react-collapsed": "^4.2.0",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
@@ -33,18 +32,16 @@
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "sass": "^1.77.6",
     "semantic-release": "^24.1.0",
     "vite": "^5.4.14"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-collapsible": "^2.10.0",
-    "react-icons": "^5.2.1",
-    "react-loading": "^2.0.3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-collapsed": "^4.2.0"
   },
   "peerDependenciesMeta": {
     "react": {

frontend/package.json

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import Button from "../../../components/Button/Button";
 import { AiOutlineCloudUpload } from "react-icons/ai";
 import UploadItem from "./UploadItem";
-import ReactLoading from "react-loading";
+import Loader from "../../../components/Loader/Loader";
 import { useFileNavigation } from "../../../contexts/FileNavigationContext";
 import { getFileExtension } from "../../../utils/getFileExtension";
 import { getDataSize } from "../../../utils/getDataSize";
@@ -32,8 +32,8 @@ const UploadFileAction = ({
 
   const checkFileError = (file) => {
     if (acceptedFileTypes) {
-        const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
-        if (extError) return "File type is not allowed.";
+      const extError = !acceptedFileTypes.includes(getFileExtension(file.name));
+      if (extError) return "File type is not allowed.";
     }
 
     const fileExists = currentPathFiles.some(
@@ -134,7 +134,7 @@ const UploadFileAction = ({
             {Object.values(isUploading).some((fileUploading) => fileUploading) ? (
               <>
                 <h2>Uploading</h2>
-                <ReactLoading type="cylon" color="black" height={18} width={20} />
+                <Loader loading={true} className="upload-loading" />
               </>
             ) : (
               <h2>Completed</h2>

frontend/src/FileManager/Actions/UploadFile/UploadFile.action.jsx

@@ -13,35 +13,40 @@ import { useTriggerAction } from "../hooks/useTriggerAction";
 import { useColumnResize } from "../hooks/useColumnResize";
 import PropTypes from "prop-types";
 import { dateStringValidator, urlValidator } from "../validators/propValidators";
+import checkPropTypes from "prop-types/checkPropTypes";
 import "./FileManager.scss";
 
-const FileManager = ({
-  files,
-  fileUploadConfig,
-  isLoading,
-  onCreateFolder,
-  onFileUploading = () => {},
-  onFileUploaded = () => {},
-  onPaste,
-  onRename,
-  onDownload,
-  onDelete = () => null,
-  onLayoutChange = () => {},
-  onRefresh,
-  onFileOpen = () => {},
-  onError = () => {},
-  layout = "grid",
-  enableFilePreview = true,
-  maxFileSize,
-  filePreviewPath,
-  acceptedFileTypes,
-  height = "600px",
-  width = "100%",
-  initialPath = "",
-  filePreviewComponent,
-  primaryColor = "#6155b4",
-  fontFamily = "Nunito Sans, sans-serif",
-}) => {
+const FileManager = (props) => {
+  checkPropTypes(FileManager.propTypes, props, "prop", FileManager.name);
+
+  const {
+    files,
+    fileUploadConfig,
+    isLoading,
+    onCreateFolder,
+    onFileUploading = () => {},
+    onFileUploaded = () => {},
+    onPaste,
+    onRename,
+    onDownload,
+    onDelete = () => null,
+    onLayoutChange = () => {},
+    onRefresh,
+    onFileOpen = () => {},
+    onError = () => {},
+    layout = "grid",
+    enableFilePreview = true,
+    maxFileSize,
+    filePreviewPath,
+    acceptedFileTypes,
+    height = "600px",
+    width = "100%",
+    initialPath = "",
+    filePreviewComponent,
+    primaryColor = "#6155b4",
+    fontFamily = "Nunito Sans, sans-serif",
+  } = props;
+
   const triggerAction = useTriggerAction();
   const { containerRef, colSizes, isDragging, handleMouseMove, handleMouseUp, handleMouseDown } =
     useColumnResize(20, 80);
@@ -54,7 +59,7 @@ const FileManager = ({
 
   return (
     <main className="file-explorer" onContextMenu={(e) => e.preventDefault()} style={customStyles}>
-      <Loader isLoading={isLoading} />
+      <Loader loading={isLoading} />
       <FilesProvider filesData={files} onError={onError}>
         <FileNavigationProvider initialPath={initialPath}>
           <SelectionProvider onDownload={onDownload}>

frontend/src/FileManager/FileManager.jsx

@@ -39,7 +39,6 @@ svg {
     font-family: var(--file-manager-font-family);
   }
 
-  border: 1px solid #dddddd;
   border-radius: 8px;
   position: relative;
   background-color: white;