preview

src/components/Dog.tsx

@@ -5,29 +5,29 @@ import Img from './Img';
 import DogNameTxt from './DogNameTxt';
 import './Dog.css';
 import {getDog} from '../services/PhpApi'
+import useSWR from 'swr';
 
 const Dog = () => 
 {
-  const [success, setSuccess] = useState<number>(0);
   // m7MdMK
   const params = useParams();
   const qr_id = Object.values(params)[0];
   var dogRes : ResponseT = {};
   var dog: DogT = dogRes.data;
 
-  getDog(qr_id).then((resDog) =>
+  const { data, error, isLoading  } = useSWR(['Dog', qr_id], getDog );
-  {
+  if (error) return (<div>failed to load</div>);
-    dogRes = Object.assign({},resDog);
+  if (isLoading) return (<div>loading...</div>);
-    dog = Object.assign({},resDog.data);
+
-    setSuccess(dogRes.success);
+  dogRes = Object.assign({}, data);
-  });
+  dog = Object.assign({}, data.data);
 
   var email = "nicht definiert;"
   var phone = "nicht definiert;"
   var picPath = "nicht definiert;"
   //var qrPath = "nicht definiert;"
   var name = "nicht definiert;"
-  if(success === 1)
+  if(dogRes.success === 1)
   {
     name = dog.name;
     //qrPath = dog.data.qr_code;
@@ -36,7 +36,7 @@ const Dog = () =>
     phone = dog.phone;
   }
 
-  const content: ReactNode = success === 1 ?
+  const content: ReactNode = dogRes.success === 1 ?
   <div className = 'Dog'>
   <h1>Hast Du mich gefunden?</h1>
   {/* <p>name: {name}</p>

src/components/PreviewUpload.tsx

@@ -5,11 +5,10 @@ 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);
 
-  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
 
   const { data, error, isLoading  } = useSWR(['PreviewUpload', 'SESS'], getDog );
   if (error) return (<div>failed to load</div>);
@@ -17,76 +16,81 @@ function PreviewUpload({chgFile}:{chgFile: any})
 
   console.log('PreviewUpload getDog');
   console.log(data);
+  const dog: ResponseT | any = data.data;
+  let file: string | undefined = "./uploads"+ data.data.picture;
 
-  setDog(data.data);
+//  setDog(data.data);
-  setFile("./uploads"+ data.data.picture);
+//  setFile("./uploads"+ data.data.picture);
 
 
-//   const handleChange = async (
+  const handleChange = async (
-//     event: React.ChangeEvent<HTMLInputElement>
+    event: React.ChangeEvent<HTMLInputElement>
-//   ): Promise<any> => {
+  ): Promise<any> => 
-//     // const { target } = event;
+  {
-//     // const img = new Image();
+    // const { target } = event;
-//     const ImageName = event.target.value.split('\\')[2];
-//     const Image = event.target.value;
-//     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]);
-
-//     const fileLoaded = URL.createObjectURL(event.target.files![0]);
-//     const files = event.target.files;
-
-//     console.log('files: ', files);
-//     const dimensions = await someFunction(fileLoaded);
-//     setDimensionWidth(dimensions.width);
-//     setDimensionHeight(dimensions.height);
-//     console.log('dimensions: ', dimensions);
-//     console.log('dimensions width: ', dimensions.width);
-//     console.log('dimensions height: ', dimensions.height);
-//     setFile(fileLoaded);
-
-//     chgFile(event);
-//   };
-//   const getHeightAndWidthFromDataUrl = (dataURL: string) =>
-//     new Promise<{height: number, width: number}>((resolve) => {
     // const img = new Image();
-//       img.onload = () => {
+    const ImageName = event.target.value.split('\\')[2];
-//         resolve({
+    const Image = event.target.value;
-//           height: img.height,
+    console.log('Image on Kevel: ', Image); // Image on Kevel
-//           width: img.width,
+    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]);
-//       img.src = dataURL;
-//     });
-//   // Get dimensions
-//   const someFunction = async (file: any) => {
-//     console.log('file: ', file);
-//     const dimensions = await getHeightAndWidthFromDataUrl(file);
-//     return dimensions;
-//   };
 
-  return ( <></> );
+    const fileLoaded = URL.createObjectURL(event.target.files![0]);
-//     <div>
+    const files = event.target.files;
-//       <input
+
-//         type="file"
+    console.log('files: ', files);
-//         onChange={handleChange}
+    const dimensions = await someFunction(fileLoaded);
-//         accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
+    setDimensionWidth(dimensions.width);
-//       />
+    setDimensionHeight(dimensions.height);
-//       <div className='prevUplImg'>
+    console.log('dimensions: ', dimensions);
-//       <img
+    console.log('dimensions width: ', dimensions.width);
-//         src={file}
+    console.log('dimensions height: ', dimensions.height);
-//         style={{
+    file = fileLoaded;
-//           display: 'flex',
+
-//           border: '2px solid tomato',
+    chgFile(event);
-//           maxWidth: '300px',
+  };
-//           maxHeight: '300px',
+  const getHeightAndWidthFromDataUrl = (dataURL: string) =>
-//         }}
+    new Promise<{height: number, width: number}>((resolve) => {
-//       />
+      const img = new Image();
-//       </div>
+      img.onload = () => {
-//       {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
+        resolve({
-//     </div>
+          height: img.height,
-//   );
+          width: img.width,
+        });
+      };
+      img.src = dataURL;
+    });
+  // Get dimensions
+  const someFunction = async (file: any) => 
+  {
+    console.log('file: ', file);
+    const dimensions = await getHeightAndWidthFromDataUrl(file);
+    return dimensions;
+  };
+
+//  return ( <></> );
+  return (
+    <div>
+      <input
+        type="file"
+        onChange={handleChange}
+        accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
+      />
+      <div className='prevUplImg'>
+      <img
+        src={file}
+        style={{
+          display: 'flex',
+          border: '2px solid tomato',
+          maxWidth: '300px',
+          maxHeight: '300px',
+        }}
+      />
+      </div>
+      {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
+    </div>
+  );
 }
 export default PreviewUpload;
 

src/services/PhpApi.ts

@@ -26,21 +26,34 @@ export const updateDog = async ({email, name, phone}:
     }
 }
 
-export const getDog = async ( str: string | undefined) : Promise<ResponseT> =>
+export const getDog = async ( params: string[] | undefined) : Promise<ResponseT> =>
 {
   var ret: ResponseT = {};
+  let qrid = '';
+
+  if(params !== undefined && params.length >= 2)
+  {
+    qrid = params[1];
+  }
+  if(params !== undefined && params.length == 1)
+  {
+    qrid = params[0];
+  }
 
   try 
   {
     ret = await Axios.post<ResponseT>('getDog.php', 
     {
-      qr_id: str
+      qr_id: qrid
     });
+    console.log('Api getDog');
+    console.log(ret.data);
+
     return ret.data as ResponseT;
   } 
   catch (error:any) 
   {
-        console.log('error message: ', error.message);
+        console.log('Api getDog error message: ', error.message);
         ret = 
         {
             success: 0,