useSWR
This commit is contained in:
@ -18,7 +18,7 @@ $conn = $db_connection->dbConnection();
|
|||||||
$returnData = new CMsg(0);
|
$returnData = new CMsg(0);
|
||||||
$fields = ['fields' => ['qr_id']];
|
$fields = ['fields' => ['qr_id']];
|
||||||
|
|
||||||
if(isset($_SESSION['user']))
|
if(!isset($_SESSION['user']))
|
||||||
{
|
{
|
||||||
$returnData = new CMsg(0,422,'Please Login!');
|
$returnData = new CMsg(0,422,'Please Login!');
|
||||||
}
|
}
|
||||||
@ -26,7 +26,7 @@ if(isset($_SESSION['user']))
|
|||||||
else
|
else
|
||||||
{
|
{
|
||||||
$user = $_SESSION['user'];
|
$user = $_SESSION['user'];
|
||||||
$qr_id = trim($user->qr_id);
|
$qr_id = trim($user['qr_id']);
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,29 +1,25 @@
|
|||||||
import React, { useContext } from 'react'
|
|
||||||
import './Header.css';
|
import './Header.css';
|
||||||
import '../App.css';
|
import '../App.css';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import {Axios, logOut, sleep} from '../services/PhpApi'
|
||||||
import {Axios} from '../services/PhpApi'
|
import { toast, Toaster } from 'react-hot-toast';
|
||||||
|
|
||||||
|
|
||||||
function Header() {
|
function Header()
|
||||||
const navigate = useNavigate();
|
{
|
||||||
|
const logOutForm = () =>
|
||||||
const logOut = () =>
|
|
||||||
{
|
{
|
||||||
Axios.post('logout.php')
|
logOut();
|
||||||
.then((res) =>
|
toast.success("logged out!");
|
||||||
{
|
|
||||||
console.log(res);
|
|
||||||
})
|
|
||||||
.catch((err) => console.error(err));
|
|
||||||
|
|
||||||
navigate('/'); // login
|
sleep(1000);
|
||||||
|
window.location.href = '/dog/';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='logout'>
|
<div className='logout'>
|
||||||
|
<Toaster toastOptions={{ position: "top-center" }} />
|
||||||
<div className='noprint'>Header</div>
|
<div className='noprint'>Header</div>
|
||||||
<button onClick={logOut}>Logout</button>
|
<button onClick={logOutForm}>Logout</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,10 +1,8 @@
|
|||||||
import {useState} from 'react';
|
import {useState} from 'react';
|
||||||
import useSWR from 'swr';
|
import { Link } from 'react-router-dom';
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
|
||||||
import './Login.css';
|
import './Login.css';
|
||||||
import {getUser, loginUser} from '../services/PhpApi'
|
import {loginUser, sleep} from '../services/PhpApi'
|
||||||
import { toast } from 'react-hot-toast';
|
import { toast, Toaster } from 'react-hot-toast';
|
||||||
import { TUser } from '../context/UserContext';
|
|
||||||
|
|
||||||
const Login = () =>
|
const Login = () =>
|
||||||
{
|
{
|
||||||
@ -13,20 +11,6 @@ const Login = () =>
|
|||||||
password:''
|
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>) =>
|
const onChangeInput = (e: React.FormEvent<HTMLInputElement>) =>
|
||||||
{
|
{
|
||||||
if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
|
if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
|
||||||
@ -47,20 +31,25 @@ const Login = () =>
|
|||||||
toast.error('Please Fill in all Required Fields!');
|
toast.error('Please Fill in all Required Fields!');
|
||||||
return;
|
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 (
|
return (
|
||||||
<div className='Login'>
|
<div className='Login'>
|
||||||
|
<Toaster toastOptions={{ position: "top-center" }} />
|
||||||
<h2>Login</h2>
|
<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>
|
<div>
|
||||||
<label htmlFor="email">Email:</label>
|
<label htmlFor="email">Email:</label>
|
||||||
<input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
|
<input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
|
||||||
@ -71,7 +60,7 @@ const Login = () =>
|
|||||||
</div>
|
</div>
|
||||||
<button type="submit">Login</button>
|
<button type="submit">Login</button>
|
||||||
<div className="bottom-link"><Link to="/reg">Register</Link></div>
|
<div className="bottom-link"><Link to="/reg">Register</Link></div>
|
||||||
</form> }
|
</form>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,8 +30,9 @@ function Profil()
|
|||||||
email: data.email,
|
email: data.email,
|
||||||
name: data.name
|
name: data.name
|
||||||
};
|
};
|
||||||
|
console.log('Profil data');
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
console.log('Profil user');
|
||||||
console.log(user);
|
console.log(user);
|
||||||
|
|
||||||
// setDog(data);
|
// setDog(data);
|
||||||
@ -98,7 +99,8 @@ function Profil()
|
|||||||
formData.email = data.data.email;
|
formData.email = data.data.email;
|
||||||
formData.name = data.data.name;
|
formData.name = data.data.name;
|
||||||
formData.phone = data.data.phone;
|
formData.phone = data.data.phone;
|
||||||
console.log(formData);
|
console.log('Profil formData');
|
||||||
|
console.log(formData);
|
||||||
return (
|
return (
|
||||||
<div className='Profil'>
|
<div className='Profil'>
|
||||||
<Toaster toastOptions={{ position: "top-center" }} />
|
<Toaster toastOptions={{ position: "top-center" }} />
|
||||||
|
|||||||
@ -111,11 +111,7 @@ export const loginUser = async ({email,password}:{email: string, password: strin
|
|||||||
});
|
});
|
||||||
|
|
||||||
const {data} = postReturn;
|
const {data} = postReturn;
|
||||||
if(data.success && data.data)
|
return data;
|
||||||
{
|
|
||||||
return {success:1};
|
|
||||||
}
|
|
||||||
return {success:0, message:data.message};
|
|
||||||
}
|
}
|
||||||
catch(err)
|
catch(err)
|
||||||
{
|
{
|
||||||
@ -136,6 +132,7 @@ export const getProfilData = async () =>
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getUser = async () =>
|
export const getUser = async () =>
|
||||||
{
|
{
|
||||||
const res = await Axios.get('getUser.php');
|
const res = await Axios.get('getUser.php');
|
||||||
@ -143,5 +140,19 @@ export const getUser = async () =>
|
|||||||
return data;
|
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));
|
||||||
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user