From 0a89c6aab1c6e3bf845245d1133639da671d398c Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Tue, 31 Jan 2023 00:09:01 +0100
Subject: [PATCH] useSWR

---
 php/php-dog/getProfilData.php |  4 ++--
 src/components/Header.tsx     | 30 ++++++++++-------------
 src/components/Login.tsx      | 45 +++++++++++++----------------------
 src/components/Profil.tsx     |  6 +++--
 src/services/PhpApi.ts        | 21 ++++++++++++----
 5 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/php/php-dog/getProfilData.php b/php/php-dog/getProfilData.php
index 971356b..b73be51 100644
--- a/php/php-dog/getProfilData.php
+++ b/php/php-dog/getProfilData.php
@@ -18,7 +18,7 @@ $conn = $db_connection->dbConnection();
 $returnData = new CMsg(0);
 $fields = ['fields' => ['qr_id']];
 
-if(isset($_SESSION['user'])) 
+if(!isset($_SESSION['user'])) 
 {
     $returnData = new CMsg(0,422,'Please Login!');
 }
@@ -26,7 +26,7 @@ if(isset($_SESSION['user']))
 else 
 {
     $user = $_SESSION['user'];
-    $qr_id = trim($user->qr_id);
+    $qr_id = trim($user['qr_id']);
 
     try
     {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e85df42..315d026 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,29 +1,25 @@
-import React, { useContext } from 'react'
 import './Header.css';
 import '../App.css';
-import { useNavigate } from 'react-router-dom';
-import {Axios} from '../services/PhpApi'
+import {Axios, logOut, sleep} from '../services/PhpApi'
+import { toast, Toaster } from 'react-hot-toast';
 
 
-function Header() {
-    const navigate = useNavigate();
-
-    const logOut = () =>
+function Header() 
+{
+    const logOutForm = () =>
     {
-        Axios.post('logout.php')
-        .then((res) =>
-        {
-            console.log(res);    
-        })
-        .catch((err) => console.error(err));
-
-        navigate('/'); // login      
-    }
+        logOut();
+        toast.success("logged out!");
     
+        sleep(1000);
+        window.location.href = '/dog/';
+    }
+        
     return (
     <div className='logout'>
+        <Toaster toastOptions={{ position: "top-center" }} />
         <div className='noprint'>Header</div>
-        <button onClick={logOut}>Logout</button>
+        <button onClick={logOutForm}>Logout</button>
     </div>
   );
 }
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index c52f6f5..7b08a49 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -1,10 +1,8 @@
 import {useState} from 'react';
-import useSWR from 'swr';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import './Login.css';
-import {getUser, loginUser} from '../services/PhpApi'
-import { toast } from 'react-hot-toast';
-import { TUser } from '../context/UserContext';
+import {loginUser, sleep} from '../services/PhpApi'
+import { toast, Toaster } from 'react-hot-toast';
 
 const Login = () => 
 {
@@ -13,20 +11,6 @@ const Login = () =>
         password:''
     });
 
-    const {data, error, isLoading, mutate} = useSWR('Login', getUser);
-    const navigate = useNavigate();
-
-    if (error) return (<div>failed to load</div>);
-    if (isLoading) return (<div>loading...</div>);
-
-
-    let user: TUser | null;
-    if(data.success)
-    {
-        user = data.user;
-        formData.email = user!.email;
-    }
-
     const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => 
     {
         if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
@@ -47,20 +31,25 @@ const Login = () =>
             toast.error('Please Fill in all Required Fields!');
             return;
         }
-        mutate(loginUser, formData)
+        const logResp = await loginUser(formData);
+        if(logResp.success)
+        {
+            toast.success(logResp.message);
+            sleep(1000);
+            window.location.href = '/dog/';
+        }
+        else
+        {
+            toast.error(logResp.message);
+        }
     }
 
     return (
         <div className='Login'>
+            <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Login</h2>
-            { user &&
-            <>
-            <div>Logged in als:</div>
-            <div>{user?.email}</div>
-            <div className="bottom-link"><Link to="/">Home</Link></div> 
-            </> }
 
-            {!user &&<form onSubmit={submitForm}>
+            <form onSubmit={submitForm}>
                 <div>
                     <label htmlFor="email">Email:</label>
                     <input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
@@ -71,7 +60,7 @@ const Login = () =>
                 </div>
                 <button type="submit">Login</button>
                 <div className="bottom-link"><Link to="/reg">Register</Link></div>
-            </form> }
+            </form>
         </div>
     )
 }
diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx
index 96a9b9b..55baef9 100644
--- a/src/components/Profil.tsx
+++ b/src/components/Profil.tsx
@@ -30,8 +30,9 @@ function Profil()
         email: data.email,
         name: data.name
     };
-        
+    console.log('Profil data');    
     console.log(data);
+    console.log('Profil user');    
     console.log(user);
 
             // setDog(data);
@@ -98,7 +99,8 @@ function Profil()
     formData.email = data.data.email;
     formData.name = data.data.name;
     formData.phone = data.data.phone;
-console.log(formData);
+    console.log('Profil formData');
+    console.log(formData);
     return (
         <div className='Profil'>
             <Toaster toastOptions={{ position: "top-center" }} />
diff --git a/src/services/PhpApi.ts b/src/services/PhpApi.ts
index 9eec3f8..a4366f0 100644
--- a/src/services/PhpApi.ts
+++ b/src/services/PhpApi.ts
@@ -111,11 +111,7 @@ export const loginUser = async ({email,password}:{email: string, password: strin
         });
 
         const {data} = postReturn;
-        if(data.success && data.data)
-        {
-            return {success:1};
-        }
-        return {success:0, message:data.message};
+        return data;
     }
     catch(err)
     {
@@ -136,6 +132,7 @@ export const getProfilData = async () =>
         return null;
     }
 }
+
 export const getUser = async () => 
 {
     const res = await Axios.get('getUser.php');
@@ -143,5 +140,19 @@ export const getUser = async () =>
     return data;
 }
 
+export const logOut = () =>
+{
+    Axios.post('logout.php')
+    .then((res) =>
+    {
+        console.log('Header logout');
+        console.log(res);    
+    })
+    .catch((err) => console.error(err));
+}
 
+export const sleep = (ms: number) => 
+{
+    return new Promise((resolve) => setTimeout(resolve, ms));
+};