diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..0f4b8fa Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 8fa3345..c08bd03 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -1,6 +1,7 @@ import React, { FC } from "react"; import NairaBag from "../../assets/images/dashboard/naira-bag.png"; import { Button } from "../"; +import { useSelector } from "react-redux"; export interface DashBoardCardProps { title?: string; @@ -73,11 +74,12 @@ interface DashboardHomeIntroProps { } const DashboardHomeIntro: FC = ({ handleNextStep, step }) => { + const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable return ( <> {step == 1 ? <> -

Hello, Olanrewaju

+

Hello, {userDetails.firstname}

= ({ handleNextStep, step : <> -

Welcome Back, Olanrewaju

+

Welcome Back, {userDetails.firstname}

{ + const dispatch = useDispatch() const navigate = useNavigate() // const [pinValues, setPinValues] = React.useState({ // bvn: "", @@ -63,6 +67,8 @@ const LetsGetStarted: React.FC = () => { const [requestStatusBVN, setRequestStatusBVN] = React.useState({loading:false, status:undefined, message:''}); + const [requestStatusOTP, setRequestStatusOTP] = React.useState({loading:false, status:undefined, message:''}); + const [bvnIsValid, setBvnIsValid] = React.useState({ verification_id: '', valid: undefined @@ -91,12 +97,26 @@ const LetsGetStarted: React.FC = () => { }; const handleSubmit = (values:any) => { // Function to VERIFY OTP AND LOGIN USER + setRequestStatusOTP({loading:true, status:false, message:''}) // console.log('values', values) verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{ - console.log(res.data) + if(!res || !res.data.call_return){ + setRequestStatusOTP({loading:false, status:false, message:'wrong otp'}) + return setTimeout(()=>{ + setRequestStatusOTP({loading:false, status:false, message:''}) + },4000) + } + // console.log(res.data) + localStorage.setItem('token', res.data.token) + localStorage.setItem('uid', res.data.uid) + dispatch(updateUserDetails({ ...res.data })); navigate(RouteHandler.dashboardHome, {replace:true}) }).catch(err => { + setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'}) console.log(err) + return setTimeout(()=>{ + setRequestStatusOTP({loading:false, status:false, message:''}) + },4000) }) }; @@ -159,6 +179,7 @@ const LetsGetStarted: React.FC = () => { Enter +

{requestStatusOTP.message}

{bvnIsValid.valid || bvnIsValid.valid == undefined ? (

diff --git a/src/core/models.ts b/src/core/models.ts index 3e8f627..397ea5c 100644 --- a/src/core/models.ts +++ b/src/core/models.ts @@ -4,4 +4,15 @@ export interface RequestStatus { message?:string name?:string data?:{}[] | [any] | {} +} + + +export interface User { + firstname?:string + lastname?:string + last_login?:string + message?:string + token?:string + uid?:string + call_return?:string } \ No newline at end of file diff --git a/src/layouts/DashboardLayout/DashboardAuth.tsx b/src/layouts/DashboardLayout/DashboardAuth.tsx index 7a7bd45..2255169 100644 --- a/src/layouts/DashboardLayout/DashboardAuth.tsx +++ b/src/layouts/DashboardLayout/DashboardAuth.tsx @@ -1,11 +1,52 @@ +import {useState, useEffect} from 'react' import DashboardLayout from "./DashboardLayout"; -import { Outlet } from "react-router-dom"; +import { Outlet, useNavigate } from "react-router-dom"; +import { useSelector, useDispatch } from "react-redux"; +import { RouteHandler } from '../../router/routes'; +import { updateUserDetails } from '../../store/UserDetails'; + +import Logo from '../../assets/images/logo.png' export default function DashboardAuth() { + + const navigate = useNavigate() + const dispatch = useDispatch() + + const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable + + const [loading, setLoading] = useState(true) + + useEffect(()=>{ + let token = localStorage.getItem('token') + if(!token){ + navigate(RouteHandler.letsGetStarted, {replace:true}) + return + } + const getUserByToken = () => { + let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'} + setTimeout(()=>{ + setLoading(false) + dispatch(updateUserDetails({...data})); + },4000) + } + if(!Object.keys(userDetails).length){ + getUserByToken() + } + },[]) + return ( - - - + <> + {loading && !Object.keys(userDetails).length ? +

+ Logo +

loading...

+
+ : + + + + } + ) } \ No newline at end of file diff --git a/src/layouts/DashboardLayout/DashboardLayout.tsx b/src/layouts/DashboardLayout/DashboardLayout.tsx index b48af3e..af51518 100644 --- a/src/layouts/DashboardLayout/DashboardLayout.tsx +++ b/src/layouts/DashboardLayout/DashboardLayout.tsx @@ -35,6 +35,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) { // }); const logoutUser = () => { + localStorage.clear() navigate(RouteHandler.letsGetStarted, {replace:true}) } diff --git a/src/main.tsx b/src/main.tsx index 345a1ed..6873238 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,10 +4,15 @@ import { BrowserRouter } from "react-router-dom"; import App from "./App.tsx"; import "./index.css"; +import { Provider } from "react-redux"; +import store from "./store/store"; + ReactDOM.createRoot(document.getElementById("root")!).render( - + + + ); diff --git a/src/store/UserDetails.ts b/src/store/UserDetails.ts new file mode 100644 index 0000000..8cb2677 --- /dev/null +++ b/src/store/UserDetails.ts @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + userDetails: {}, +}; + +export const userSlice = createSlice({ + name: "userDetails", + initialState, + reducers: { + updateUserDetails: (state, action) => { + state.userDetails = { ...action.payload }; + }, + }, +}); + +// Action creators are generated for each case reducer function +export const { updateUserDetails } = userSlice.actions; + +export default userSlice.reducer; diff --git a/src/store/store.ts b/src/store/store.ts new file mode 100644 index 0000000..e111aec --- /dev/null +++ b/src/store/store.ts @@ -0,0 +1,9 @@ +import { configureStore } from "@reduxjs/toolkit"; + +import userDetailReducer from "./UserDetails"; + +export default configureStore({ + reducer: { + userDetails: userDetailReducer, + }, +});