file list refresh and scroll bar added

src/component/mymedia/MyMedia.js

@@ -1,16 +1,21 @@
 import React from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import {useState, useRef} from "react";
-import {useQuery} from "@tanstack/react-query";
+import {useQuery, useMutation, useQueryClient} from "@tanstack/react-query";
 import queryKeys from "../../services/queryKeys";
-import {getMediaFileList} from "../../services/services";
+import {getMediaFileList, uploadFile} from "../../services/services";
 import getImage from "../../utils/getImage";
 
+
 export default function MyMedia() {
+
+    const queryClient = useQueryClient()
+
     const basePath = process.env.REACT_APP_MAIN_API
     const [selectedFile, setSelectedFile] = useState(null);
     const [message, setMessage] = useState('');
-
+    const [imageLink, setImageLink] = useState('')
+console.log('imageLink', imageLink)
     // Function to handle file selection
     const handleFileChange = (event) => {
         setSelectedFile(event.target.files[0]);
@@ -18,7 +23,7 @@ export default function MyMedia() {
     };
 
     // Function to handle the upload to the API
-    const handleUpload = async () => {
+    const _handleUpload = async () => {
         if (!selectedFile) {
             setMessage('Please select a file first!');
             return;
@@ -55,6 +60,41 @@ export default function MyMedia() {
         }
     }
 
+    const uploadFileMutation = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.file){
+                throw({message: 'Please select a file first!'})
+            }
+            return uploadFile(fields)
+        },
+        onSuccess: (res) => {
+            // console.log('res', res.data)
+            // if(res.data.resultCode != '0' || !res?.data?.pending_uid){
+            //     throw({message: res?.data?.resultDescription})
+            // }
+            setSelectedFile(null)
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.my_files],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+        onSettled: () => {
+            setTimeout(()=>{
+                uploadFileMutation.reset()
+            }, 3000)
+        }
+    })
+
+    const handleUpload = () => {
+        let reqData = {
+            token: localStorage.getItem("token"), // USER TOKEN
+            member_uid: localStorage.getItem("uid"), // USER UID
+            file: selectedFile
+        };
+        // console.log(reqData)
+        uploadFileMutation.mutate(reqData)
+    }
 
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.my_files,
@@ -101,13 +141,14 @@ export default function MyMedia() {
                                             <div style={{width: '100%', textAlign: 'right'}}>
                                                 <button
                                                     className="btn btn-square btn-inverse-light btn-xs d-inline-block mt-2 mb-0"
-                                                    onClick={handleUpload} disabled={!selectedFile}>
+                                                    onClick={handleUpload} disabled={!selectedFile || uploadFileMutation.isPending || uploadFileMutation.isSuccess}>
                                                     Upload
                                                 </button>
                                             </div>
 
                                             <>
-                                                {message && <p>{message}</p>}
+                                                {/* {message && <p>{message}</p>} */}
+                                                <p>{uploadFileMutation.isPending ? 'uploading...' : uploadFileMutation.isError ? uploadFileMutation?.error?.message : uploadFileMutation.isSuccess ? 'File Uploaded' : ''}</p>
                                             </>
                                         </div>
 
@@ -120,7 +161,7 @@ export default function MyMedia() {
                     </div>
                 </div>
                 <div className="col-xl-6 col-xxl-4 m-b-30">
-                    <div className="card card-statistics h-100 mb-0 widget-downloads-list" style={{minHeight: '600px'}}>
+                    <div className="card card-statistics h-100 mb-0 widget-downloads-list" style={{}}>
                         <div className="card-header d-flex justify-content-between">
                             <div className="card-heading">
                                 <div className="card-heading">
@@ -128,36 +169,49 @@ export default function MyMedia() {
                                 </div>
                             </div>
                         </div>
-                        <div className="card-body scrollbar scroll_dark">
+                        {isFetching ? 
-                            {mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
+                            <>
-                                const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                <div className="col-12">
-                                const avtarImage =
+                                    <p className='text-mute'>Loading...</p>
-                                    item?.file_type === undefined
+                                </div>
-                                        ? "icons/01.png"
+                            </>
-                                        : "icons/" + item.file_type + ".png";
+                            : isError ?
-                                return (<div className="widget-text">
+                            <div className="col-12">
-                                    <div className="media align-items-center">
+                                <p className='text-danger'>{error?.message}</p>
-                                        <img src={getImage(avtarImage)}
+                            </div>
-                                            // src={`assets/img/file-icon/${item.file_type}.png`}
+                            :
-                                             className="img-fluid"
+                            <div className="card-body scrollbar scroll_dark" style={{minHeight: '400px', maxHeight: '500px', overflowY: 'auto'}}>
-                                             alt={`${item.file_type}`}/>
+                                {mediaFileList && mediaFileList?.file_list && mediaFileList?.file_list.map((item, index) => {
-                                        <div className="media-body">
+                                    const file_url = (mediaFileList?.media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
-                                            <h4 className="mb-0 ml-3">{item.filename}</h4>
+                                    const avtarImage =
+                                        item?.file_type === undefined
+                                            ? "icons/01.png"
+                                            : "icons/" + item.file_type + ".png";
+                                    return (<div key={index} className="widget-text">
+                                        <div className="media align-items-center" onClick={()=>setImageLink(file_url)} style={{cursor: 'pointer'}}>
+                                            <img src={getImage(avtarImage)}
+                                                // src={`assets/img/file-icon/${item.file_type}.png`}
+                                                className="img-fluid"
+                                                alt={`${item.file_type}`}/>
+                                            <div className="media-body">
+                                                <h4 className="mb-0 ml-3">{item.filename}</h4>
+                                            </div>
+                                          
+                                            <div>
+                                                <a href={`${file_url}`} target='_blank'
+                                                className="btn btn-icon btn-round btn-outline-success">
+                                                    <i className="ti ti-download"></i>
+                                                </a>
+                                                <a href="" className="btn btn-icon btn-round btn-outline-danger ml-2">
+                                                    <i className="ti ti-close"></i>
+                                                </a>
+                                            </div>
                                         </div>
-                                        <div>
+                                    </div>)
-                                            <a href={`${file_url}`} target='_blank'
+                                })
-                                               className="btn btn-icon btn-round btn-outline-success">
+                                }
-                                                <i className="ti ti-download"></i>
+                            </div>
-                                            </a>
+                        }
-                                            <a href="" className="btn btn-icon btn-round btn-outline-danger ml-2">
-                                                <i className="ti ti-close"></i>
-                                            </a>
-                                        </div>
-                                    </div>
-                                </div>)
-                            })
-                            }
-                        </div>
                     </div>
                 </div>
                 <div className="col-xl-6 col-xxl-4 m-b-30">
@@ -167,9 +221,10 @@ export default function MyMedia() {
                                 <h4 className="card-title">Preview</h4>
                             </div>
                         </div>
-                        <div className="card-body pl-0 pr-0 scrollbar scroll_dark">
+                        <div className="card-body d-flex justify-content-center align-items-center pl-0 pr-0 scrollbar scroll_dark">
-
+                            {imageLink &&
-
+                                <img src={imageLink} alt='file-image' />
+                            }
                         </div>
                     </div>
                 </div>

src/services/services.js

@@ -1,10 +1,9 @@
 import axios from "axios"
 
-
 axios.interceptors.request.use(
     config => {
         config.headers = {
-            Accept: "application/json",
+            // Accept: "application/json",
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
@@ -284,6 +283,13 @@ export const getMediaFileList = (reqData) => {
     return postAuxEnd(`/panel/account/media-files`, postData, false)
 }
 
+export const uploadFile = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/upload/webfiles`, postData, true)
+}
+
 export const getReportsTopicsList = (reqData) => {
     let postData = {
         ...reqData,