swr login logout

php/php-dog/login.php

@@ -92,9 +92,6 @@ try
 //            $_SESSION['user'] = $user;
             $_SESSION['user'] = $user->phparray();
 
-            var_dump($_SESSION['user']);
-
-            
             $returnData = new CMsg( 
                 1, 
                 200, 

src/App.css

@@ -25,6 +25,13 @@
   justify-content: center;
 }
 
+img
+{
+    max-width: 300px;
+    max-height: 300px;
+    background: #ffffff;
+}
+
 
 
 @media print 

src/App.tsx

@@ -20,6 +20,10 @@ import { TUser } from './context/UserContext';
 const App: React.FC = () => 
 {
   const {data, error, isLoading} = useSWR("/user", getUser);
+
+  console.log('App getUser');
+  console.log(data);
+  
   if (error)
   { 
     toast.error(error.message);
@@ -44,7 +48,7 @@ const App: React.FC = () =>
   return (
     <div className="App">
           <div className="col middle">
-            <BrowserRouter basename='/dog'>
+            <BrowserRouter basename='/dog/'>
               {user && <Header />}
               <Routes>
                   {user && <Route index path="/" element={<Profil/>} />}

src/components/Header.tsx

@@ -11,7 +11,6 @@ function Header()
         logOut();
         toast.success("logged out!");
     
-        sleep(1000);
         window.location.href = '/dog/';
     }
         

src/components/Login.tsx

@@ -1,16 +1,38 @@
 import {useState} from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import './Login.css';
-import {loginUser, sleep} from '../services/PhpApi'
+import {getUser, loginUser, sleep} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
+import useSWR from 'swr';
 
 const Login = () => 
 {
     const [formData, setFormData] = useState({
-        email:'',
+            email:'',
         password:''
     });
+    // only for redirect
+    const {data, error, isLoading, mutate} = useSWR("/login", getUser);
+    const navigate = useNavigate();
+    console.log('Login getUser');
+    console.log(data);
 
+    if (error)
+    { 
+      toast.error(error.message);
+      return (
+        <>
+          <Toaster toastOptions={{ position: "top-center" }} />
+          <div>failed to load</div>
+        </>);
+    }
+    if (isLoading) return (<div>loading...</div>);
+
+    if(data.success)
+    {
+        window.location.href = '/dog/';
+    }
+  
     const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => 
     {
         if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
@@ -31,12 +53,12 @@ const Login = () =>
             toast.error('Please Fill in all Required Fields!');
             return;
         }
+
         const logResp = await loginUser(formData);
         if(logResp.success)
         {
             toast.success(logResp.message);
-            sleep(1000);
+            mutate(); // update swr
-            window.location.href = '/dog/';
         }
         else
         {

src/components/Profil.tsx

@@ -25,10 +25,10 @@ function Profil()
 
     const user: TUser =  
     { 
-        id: data.id,
+        id: data.data.id,
-        qr_id: data.qr_id,
+        qr_id: data.data.qr_id,
-        email: data.email,
+        email: data.data.email,
-        name: data.name
+        name: data.data.name
     };
     console.log('Profil data');    
     console.log(data);
@@ -87,6 +87,9 @@ function Profil()
             return;
         }
         setFormData(formData);
+
+        update data with phpapi
+        mutate
     }
 
     const qr_refresh = (e: React.MouseEvent<HTMLButtonElement>) => 
@@ -95,6 +98,9 @@ function Profil()
         formData.qr_code = null;
         setFormData(formData);
         showData(data/*, e*/);
+
+        update data with phpapi
+        mutate
     }
     formData.email = data.data.email;
     formData.name = data.data.name;

src/services/CreateQr.ts

@@ -18,7 +18,9 @@ const upload = (file: File): Promise<any> =>
         "Content-Type": "multipart/form-data",
       }
     });
-  
+    console.log('CreateQr upload');
+    console.log(uploadRes);    
+
     // let a: number = 1+3;
     // a++;
     return uploadRes;

src/services/PhpApi.ts

@@ -17,6 +17,8 @@ export const updateDog = async ({email, name, phone}:
             name,
             phone 
         });
+        console.log('Api updateDog');
+        console.log(data);
         return data;
     }
     catch(err){
@@ -60,6 +62,8 @@ export const registerUser = async ({email,password}:
             email,
             password 
         });
+        console.log('Api registerUser');
+        console.log(data);
         return data;
     }
     catch(err)
@@ -81,6 +85,8 @@ export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visib
             qr_visible_items,
             qr_item_sequence 
         });
+        console.log('Api updateQR');
+        console.log(data);
         return data;
     }
     catch(err)
@@ -136,6 +142,19 @@ export const getProfilData = async () =>
 export const getUser = async () => 
 {
     const res = await Axios.get('getUser.php');
+    console.log("Api getUser");
+    console.log(res);
+
+    const {data} = res;
+    return data;
+}
+
+export const session = async () => 
+{
+    const res = await Axios.get('session.php');
+    console.log("Api session");
+    console.log(res);
+
     const {data} = res;
     return data;
 }