useSWR upload

src/components/FileUpload.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import UploadService from "../services/FileUploadService";
+import {upload as ApiUpload} from "../services/PhpApi";
 import IFile from "../types/File";
 import PreviewUpload from "./PreviewUpload";
 
@@ -24,30 +24,30 @@ const FileUpload: React.FC = () =>
     setProgress(0);
     if (!currentFile) return;
 
-    UploadService.upload(currentFile, (event: any) => 
+    ApiUpload(currentFile, '', (event: any) => 
 	{
-      setProgress(Math.round((100 * event.loaded) / event.total));
+		setProgress(Math.round((100 * event.loaded) / event.total));
     })
-      .then((response) => 
-	  {
-        setMessage(response.data.message);
-        return;
-      })
-      .catch((err) => 
-	  {
-        setProgress(0);
+	.then((response) => 
+	{
+		setMessage(response.data.message);
+		return;
+	})
+	.catch((err) => 
+	{
+		setProgress(0);
 
-        if (err.response && err.response.data && err.response.data.message) 
+		if (err.response && err.response.data && err.response.data.message) 
 		{
-          setMessage(err.response.data.message);
-        } 
+			setMessage(err.response.data.message);
+		} 
 		else 
 		{
-          setMessage("Could not upload the File!");
-        }
+			setMessage("Could not upload the File!");
+		}
 
-        setCurrentFile(undefined);
-      });
+		setCurrentFile(undefined);
+	});
   };
 
 

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import './Header.css';
 import '../App.css';
-import {Axios, logOut, sleep} from '../services/PhpApi'
+import {Axios, logOut} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 
 

src/components/Login.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import './Login.css';
-import {getUser, loginUser, sleep} from '../services/PhpApi'
+import {getUser, loginUser} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 import useSWR from 'swr';
 

src/components/PreviewUpload.tsx

@@ -1,28 +1,25 @@
-// import React, { useContext, useState } from 'react';
-// import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
-// import {Axios} from '../services/PhpApi';
+import React, { useState } from 'react';
+import { ResponseT } from '../context/UserContext';
+import {Axios, getDog} from '../services/PhpApi';
+import useSWR from 'swr';
 
-function PreviewUpload({chgFile}:{chgFile: any}) {
-//   const [file, setFile] = useState<string | undefined >(undefined);
-//   const [dimensionWidth, setDimensionWidth] = useState(0);
-//   const [dimensionHeight, setDimensionHeight] = useState(0);
+function PreviewUpload({chgFile}:{chgFile: any}) 
+{
+  const [file, setFile] = useState<string | undefined >(undefined);
+  const [dimensionWidth, setDimensionWidth] = useState(0);
+  const [dimensionHeight, setDimensionHeight] = useState(0);
 
-//   const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
-//   const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
+  const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
 
-//   if(user && (dog === undefined || dog.success === undefined))
-//   {
-// 	  Axios.post<ResponseT>('getDog.php', 
-// 	  {
-// 		  qr_id: user.qr_id
-// 	  })
-// 	  .then((resDog) =>
-// 	  {
-// 		  setDog(resDog.data);
-//       setFile("./uploads"+resDog.data.data.picture);
-// 	  })
-// 	  .catch((err) => console.error(err));
-//   }
+  const { data, error, isLoading  } = useSWR(['PreviewUpload', 'SESS'], getDog );
+  if (error) return (<div>failed to load</div>);
+  if (isLoading) return (<div>loading...</div>);
+
+  console.log('PreviewUpload getDog');
+  console.log(data);
+  
+  setDog(data.data);
+  setFile("./uploads"+ data.data.picture);
 
 
 //   const handleChange = async (
@@ -32,7 +29,7 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
 //     // const img = new Image();
 //     const ImageName = event.target.value.split('\\')[2];
 //     const Image = event.target.value;
-//     console.log('Imageon Kevel: ', Image); // Image on Kevel
+//     console.log('Image on Kevel: ', Image); // Image on Kevel
 //     console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
 //     console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
 //     console.log('event current Target files: ', event.target.files![0]);
@@ -92,3 +89,4 @@ function PreviewUpload({chgFile}:{chgFile: any}) {
 //   );
 }
 export default PreviewUpload;
+

src/components/Profil.tsx

@@ -88,8 +88,8 @@ function Profil()
         }
         setFormData(formData);
 
-        update data with phpapi
-        mutate
+        // update data with phpapi
+        // mutate
     }
 
     const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) => 
@@ -99,8 +99,8 @@ function Profil()
         setFormData(formData);
         showData(data/*, e*/);
 
-        update data with phpapi
-        mutate
+        // update data with phpapi
+        // mutate
     }
     formData.email = data.data.email;
     formData.name = data.data.name;