Header, Footer, FileUpload

src/components/Dog.tsx

@@ -1,10 +1,9 @@
-import { ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
-import React, { useContext, useState, ReactNode } from 'react'
+import { UserCtx, UserCtxT } from '../context/UserContext';
+import { useContext, ReactNode } from 'react'
 import { useParams } from "react-router-dom";
 import Img from './Img';
 import DogNameTxt from './DogNameTxt';
 import './Dog.css';
-import { JSXElement, JSXFragment } from '@babel/types';
 
 const Dog = () => 
 {
@@ -13,21 +12,20 @@ const Dog = () =>
   // m7MdMK
   const params = useParams();
   const qr_id = Object.values(params)[0];
-  var data;
   var needData = dog.success === undefined;
   if(needData)
   {
-    data = getDog(qr_id); // await not allowed?! => workaraound
+    getDog(qr_id); // await not allowed?! => workaraound
   }
   var email = "nicht definiert;"
   var phone = "nicht definiert;"
   var picPath = "nicht definiert;"
-  var qrPath = "nicht definiert;"
+  //var qrPath = "nicht definiert;"
   var name = "nicht definiert;"
   if(dog.success === 1)
   {
     name = dog.data.name;
-    qrPath = dog.data.qr_code;
+    //qrPath = dog.data.qr_code;
     picPath = dog.data.picture;
     email = dog.data.email;
     phone = dog.data.phone;

src/components/FileUpload.tsx

@@ -0,0 +1,123 @@
+import { useState, useEffect } from "react";
+import UploadService from "../services/FileUploadService";
+import IFile from "../types/File";
+
+const FileUpload: React.FC = () => 
+{
+  const [currentFile, setCurrentFile] = useState<File>();
+  const [progress, setProgress] = useState(0);
+  const [message, setMessage] = useState("");
+  const [fileInfos, setFileInfos] = useState([]);
+
+  
+  const selectFile = (event: React.ChangeEvent<HTMLInputElement>) => 
+  {
+    const { files } = event.target;
+    const selectedFiles = files as FileList;
+    setCurrentFile(selectedFiles?.[0]);
+    setProgress(0);
+  };
+
+  const upload = () => 
+  {
+    setProgress(0);
+    if (!currentFile) return;
+
+    UploadService.upload(currentFile, (event: any) => 
+	{
+      setProgress(Math.round((100 * event.loaded) / event.total));
+    })
+      .then((response) => 
+	  {
+        setMessage(response.data.message);
+        return UploadService.getFiles();
+      })
+      .then((files) => 
+	  {
+        setFileInfos(files.data);
+      })
+      .catch((err) => 
+	  {
+        setProgress(0);
+
+        if (err.response && err.response.data && err.response.data.message) 
+		{
+          setMessage(err.response.data.message);
+        } 
+		else 
+		{
+          setMessage("Could not upload the File!");
+        }
+
+        setCurrentFile(undefined);
+      });
+  };
+
+  useEffect(() => 
+  {
+    UploadService.getFiles().then((response) => 
+	{
+      setFileInfos(response.data);
+    });
+  }, []);
+
+
+
+  return (
+  <div>
+	<div className="row">
+	  <div className="col-8">
+		<label className="btn btn-default p-0">
+		  <input type="file" onChange={selectFile} />
+		</label>
+	  </div>
+
+	  <div className="col-4">
+		<button
+		  className="btn btn-success btn-sm"
+		  disabled={!currentFile}
+		  onClick={upload}
+		>
+		  Upload
+		</button>
+	  </div>
+	</div>
+
+	{currentFile && (
+	  <div className="progress my-3">
+		<div
+		  className="progress-bar progress-bar-info"
+		  role="progressbar"
+		  aria-valuenow={progress}
+		  aria-valuemin={0}
+		  aria-valuemax={100}
+		  style={{ width: progress + "%" }}
+		>
+		  {progress}%
+		</div>
+	  </div>
+	)}
+
+	{message && (
+	  <div className="alert alert-secondary mt-3" role="alert">
+		{message}
+	  </div>
+	)}
+
+	<div className="card mt-3">
+	  <div className="card-header">List of Files</div>
+	  <ul className="list-group list-group-flush">
+		{fileInfos &&
+		  fileInfos.map((file: IFile, index: number) => (
+			<li className="list-group-item" key={index}>
+			  <a href={file.url}>{file.name}</a>
+			</li>
+		  ))}
+	  </ul>
+	</div>
+  </div>
+	
+  );
+}
+
+export default FileUpload;

src/components/Footer.tsx

@@ -0,0 +1,10 @@
+import { Link } from 'react-router-dom';
+import './Footer.css';
+
+function Footer() {
+  return (
+    <div><Link to={'./Impressum'}>Impressum</Link></div>
+  );
+}
+
+export default Footer;

src/components/Header.css

@@ -0,0 +1,6 @@
+.logout
+{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}

src/components/Header.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+import './Header.css';
+import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
+
+
+function Header() {
+    const {setUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const logOut = () =>
+    {
+        Axios.post('logout.php')
+        .then((res) =>
+        {
+            console.log(res);    
+        })
+        .catch((err) => console.error(err));
+
+        setUser(null);
+    }
+    
+    return (
+    <div className='logout'>
+        <div>Header</div>
+        <button onClick={logOut}>Logout</button>
+    </div>
+  );
+}
+
+export default Header;

src/components/Qr.tsx

@@ -9,7 +9,7 @@ export default function Qr()
     const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
 
-    if(user)
+    if(user && dog.success === undefined)
     {
         Axios.post<ResponseT>('getDog.php', 
         {

src/components/logout.php

@@ -1,11 +0,0 @@
-<?php
-header("Access-Control-Allow-Origin: *");
-header("Access-Control-Allow-Headers: access");
-header("Access-Control-Allow-Methods: POST");
-header("Content-Type: application/json; charset=UTF-8");
-header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
-
-session_start();
-session_destroy();
-session_abort();
-?>