Implemented uploading document

src/App.css

@@ -0,0 +1,3 @@
+.hidden-input {
+  display: none;
+}

src/components/myinfo/MyinfoDocument.jsx

@@ -11,7 +11,8 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import axios from 'axios';
-// import '../App.css';
+import '../../App.css'
+import { upload } from '@testing-library/user-event/dist/upload';
 
 const rows = [
   {name:"Offer letter",date:"Jan 4, 2022"},
@@ -31,24 +32,41 @@ const MyinfoDocument = () => {
   const [filesize, setFileSize] = useState(0)
   const [filelist, setFileList] = useState([]);
   const [uploaded, setUploaded] = useState(false)
+
+  const uploadFileBackend = () => {
+    if (filelist) {
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const base64String = event.target.result.split(',')[1]; // Extract base64 string
+            sendFileAPI(base64String);
+        };
+        reader.readAsDataURL(filelist);
+    } else {
+        alert("Please select a file");
+    }
+};
 
-  const handleUpload = async () => {
+  const sendFileAPI = async () => {
     if (uploaded) {
       clearFileInput();
       return
     }
+
     try {
       const response = await axios.post(
-        "http://localhost:3000/",
-        filelist, 
+        'http://localhost:5000/api/documents',
+        { file: filelist },
         {
-          onUploadProgress: (progressEvent) => { 
-            const percentCompleted = Math.round(
-              (progressEvent.loaded * 100) / progressEvent.total
-            );
-            setProgress(percentCompleted)
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            onUploadProgress: (progressEvent) => {
+                const percentCompleted = Math.round(
+                    (progressEvent.loaded * 100) / progressEvent.total
+                );
+                setProgress(percentCompleted);
           }
-        }
+        } 
       );
 
     }
@@ -70,6 +88,8 @@ const MyinfoDocument = () => {
 
   }
 
+
+
   // Handle file change event
   const handleFileChange = (e) => {
     const file = e.target.files[0];
@@ -89,12 +109,13 @@ const MyinfoDocument = () => {
       })
     }
     console.log(filelist)
-    handleUpload()
+    // uploadFileBackend()
 
   }
  // Trigger file input 
   const handleClick = () => {
     fileInputRef.current.click()
+
   }
 
   const handleDragOver = (e) => {

src/components/myinfo/MyinfoJourney.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect,useState } from 'react'
 import { Typography,Stack } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -15,34 +15,68 @@ const rows = [
 
 ]
 
-{/* <Typography sx={{fontSize:'13px',fontWeight:'regular',color:'#475467',fontFamily:'Inter',marginBottom:'4px'}}>or drag and drop</Typography>
-         */}
+
+
 
 const MyinfoJourney = () => {
+
+  function formatDate(isoDate) {
+    const date = new Date(isoDate);
+
+    const options = { year: 'numeric', month: 'short', day: 'numeric' };
+
+    return date.toLocaleDateString('en-US', options);
+}
+
+  const [journeyLists,setJourneyLists] = useState([])
+
+  useEffect(()=>{
+    const getJourneyAPI = async () => {
+      try {
+        const res = await fetch("http://localhost:5000/api/changehistories",{
+          method:'GET',
+          headers: {
+            'Content-Type' : 'application/json'
+          }
+        });
+        const result = await res.json();
+        setJourneyLists(result)
+
+
+
+      }
+      catch(error) {
+        console.log("Error fetching Myinfo:Journey",error)
+      }
+    }
+    getJourneyAPI()
+
+  },[])
+
   return (
    <>
      <TableContainer >
-      <Table sx={{ width:"812px" }} aria-label="simple table">
+      <Table sx={{ width:"1012px" }} aria-label="simple table">
         <TableBody>
-          {rows.map((row) => (
+          {journeyLists.map((list) => (
             <TableRow
-              key={row.title}
+              key={list.id}
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
             >
               <TableCell component="th" scope="row" sx={{fontSize:'13px',fontWeight:'600',color:'#344054',fontFamily:'Inter'}} >
-                {row.title}
+                {list.changeType}
               </TableCell>
               <TableCell align="left" >
                 <Stack direction="row" spacing={2}>
                   <Typography sx={{fontSize:'13px',fontWeight:'regular',color:'#344054',fontFamily:'Inter'}}>From:
-                    <Typography display="inline" sx={{fontSize:'13px',fontWeight:'bold',color:'#344054',fontFamily:'Inter',marginLeft:"3px"}}>{row.from}</Typography>
+                    <Typography display="inline" sx={{fontSize:'13px',fontWeight:'bold',color:'#344054',fontFamily:'Inter',marginLeft:"3px"}}>{list.changeFrom}</Typography>
                   </Typography>
                   <Typography sx={{fontSize:'13px',fontWeight:'regular',color:'#344054',fontFamily:'Inter'}}>To:
-                    <Typography display="inline" sx={{fontSize:'13px',fontWeight:'bold',color:'#344054',fontFamily:'Inter',marginLeft:"3px"}}>{row.to}</Typography>
+                    <Typography display="inline" sx={{fontSize:'13px',fontWeight:'bold',color:'#344054',fontFamily:'Inter',marginLeft:"3px"}}>{list.changeTo}</Typography>
                   </Typography>
                 </Stack>
                 </TableCell>
-              <TableCell  align="right" sx={{fontSize:'13px',fontWeight:'regular',color:'#344054',fontFamily:'Inter'}}>{row.date}</TableCell>
+              <TableCell  align="right" sx={{fontSize:'13px',fontWeight:'regular',color:'#344054',fontFamily:'Inter'}}>{formatDate(list.date)}</TableCell>
 
             </TableRow>
           ))}
@@ -53,4 +87,5 @@ const MyinfoJourney = () => {
   )
 }
 
-export default MyinfoJourney
+export default MyinfoJourney
+