Skip to content

Commit d0b828f

Browse files
swoocnswoocn
authored
Merge pull request #174 from map-of-pi/ft-home-loader
Approved (1).
2 parents b085f99 + 5c4eb7f commit d0b828f

File tree

4 files changed

+53
-32
lines changed

4 files changed

+53
-32
lines changed

‎context/AppContextProvider.tsx

+15-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
ReactNode,
1111
useEffect
1212
} from 'react';
13-
import { toast } from 'react-toastify';
1413

1514
import { Pi } from '@pinetwork-js/sdk';
1615
import axiosClient, {setAuthToken} from '@/config/client';
@@ -32,13 +31,15 @@ interface IAppContextProps {
3231
setCurrentUser: React.Dispatch<SetStateAction<IUser | null>>;
3332
registerUser: () => void;
3433
autoLoginUser:()=> void,
34+
isSigningInUser: boolean
3535
}
3636

3737
const initialState: IAppContextProps = {
3838
currentUser: null,
3939
setCurrentUser: () => {},
4040
registerUser: () => { },
4141
autoLoginUser:()=> {},
42+
isSigningInUser:false
4243
};
4344

4445
export const AppContext = createContext<IAppContextProps>(initialState);
@@ -50,6 +51,7 @@ interface AppContextProviderProps {
5051
const AppContextProvider = ({ children }: AppContextProviderProps) => {
5152
const t = useTranslations();
5253
const [currentUser, setCurrentUser] = useState<IUser | null>(null);
54+
const [isSigningInUser,setIsSigningInUser] = useState(false)
5355

5456
const registerUser = async () => {
5557
logger.info('Initializing Pi SDK for user registration.');
@@ -60,22 +62,25 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
6062

6163
if (isInitiated) {
6264
try {
65+
setIsSigningInUser(true)
6366
const pioneerAuth: AuthResult = await window.Pi.authenticate(['username', 'payments'], onIncompletePaymentFound);
6467
const res = await axiosClient.post("/users/authenticate", {pioneerAuth});
6568

6669
if (res.status === 200) {
6770
setAuthToken(res.data?.token)
6871
setCurrentUser(res.data.user);
69-
toast.success(`${t('HOME.AUTHENTICATION.SUCCESSFUL_LOGIN_MESSAGE')}: ${res.data?.user?.user_name}`);
7072
logger.info('User authenticated successfully.');
73+
setTimeout(() => {
74+
setIsSigningInUser(false); // hide the splash screen after the delay
75+
}, 5000);
7176
} else if (res.status === 500) {
7277
setCurrentUser(null);
73-
toast.error(`${t('HOME.AUTHENTICATION.UNSUCCESSFUL_LOGIN_MESSAGE')}`);
7478
logger.error('User authentication failed.');
79+
setIsSigningInUser(false)
7580
}
7681
} catch (error: any) {
7782
logger.error('Error during user registration:', { error });
78-
toast.info(t('HOME.AUTHENTICATION.PI_INFORMATION_NOT_FOUND_MESSAGE'));
83+
setIsSigningInUser(false)
7984
}
8085
} else {
8186
logger.error('PI SDK failed to initialize.');
@@ -85,15 +90,19 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
8590
const autoLoginUser = async () => {
8691
logger.info('Attempting to auto-login user.');
8792
try {
93+
setIsSigningInUser(true)
8894
const res = await axiosClient.get('/users/me');
8995

9096
if (res.status === 200) {
9197
logger.info('Auto-login successful.');
9298
setCurrentUser(res.data);
93-
toast.success(`${t('HOME.AUTHENTICATION.SUCCESSFUL_LOGIN_MESSAGE')}: ${res.data.user_name}`);
99+
setTimeout(() => {
100+
setIsSigningInUser(false); // hide the splash screen after the delay
101+
}, 5000);
94102
} else {
95103
setCurrentUser(null);
96104
logger.warn('Auto-login failed.');
105+
setIsSigningInUser(false)
97106
}
98107
} catch (error: any) {
99108
logger.error('Auto login unresolved; attempting Pi SDK authentication:', { error });
@@ -111,7 +120,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
111120
}, []);
112121

113122
return (
114-
<AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser}}>
123+
<AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser, isSigningInUser}}>
115124
{children}
116125
</AppContext.Provider>
117126
);

‎public/default.png

353 KB
Loading

‎src/components/shared/map/Map.tsx

+33-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTranslations } from 'next-intl';
22

3-
import React, { useEffect, useState, useCallback } from 'react';
3+
import React, { useEffect, useState, useCallback, useContext } from 'react';
44
import { MapContainer, Marker, Popup, TileLayer, useMapEvents } from 'react-leaflet';
55
import L, { LatLngExpression, LatLngBounds, LatLngTuple } from 'leaflet';
66
import _ from 'lodash';
@@ -11,6 +11,7 @@ import { toLatLngLiteral } from '@/util/map';
1111

1212
import MapMarkerPopup from './MapMarkerPopup'
1313

14+
import { AppContext } from '../../../../context/AppContextProvider';
1415
import logger from '../../../../logger.config.mjs';
1516

1617
// Utility function to ensure coordinates are within valid ranges
@@ -55,6 +56,7 @@ const removeDuplicates = (sellers: ISeller[]): ISeller[] => {
5556

5657
const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpression, zoom: number, searchQuery: string, searchResults: ISeller[] }) => {
5758
const t = useTranslations();
59+
const {isSigningInUser} = useContext(AppContext)
5860

5961
const customIcon = L.icon({
6062
iconUrl: '/favicon-32x32.png',
@@ -281,29 +283,36 @@ const Map = ({ center, zoom, searchQuery, searchResults }: { center: LatLngExpre
281283
{t('HOME.LOCATION_SERVICES.DISABLED_LOCATION_SERVICES_MESSAGE')}
282284
</div>
283285
)}
284-
<MapContainer
285-
center={isLocationAvailable ? origin : [0, 0]}
286-
zoom={isLocationAvailable ? zoom : 2}
287-
zoomControl={false}
288-
minZoom={2}
289-
maxZoom={18}
290-
// maxBounds={bounds}
291-
// maxBoundsViscosity={1.0}
292-
className="w-full flex-1 fixed bottom-0 h-[calc(100vh-76.19px)] left-0 right-0">
293-
<TileLayer
294-
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
295-
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
296-
noWrap={true}
297-
/>
298-
<LocationMarker />
299-
{sellers.map((seller) => (
300-
<Marker position={seller.coordinates as LatLngExpression} key={seller.seller_id} icon={customIcon}>
301-
<Popup closeButton={false} minWidth={300}>
302-
<MapMarkerPopup seller={seller} />
303-
</Popup>
304-
</Marker>
305-
))}
306-
</MapContainer>
286+
{isSigningInUser ?
287+
<div className='w-full flex-1 fixed bottom-0 h-[calc(100vh-76.19px)] left-0 right-0 bg-[#f5f1e6] '>
288+
<div className="flex justify-center items-center w-full h-full">
289+
<img src="/default.png" width={120} height={140} alt="splashscreen"/>
290+
</div>
291+
</div> :
292+
<MapContainer
293+
center={isLocationAvailable ? origin : [0, 0]}
294+
zoom={isLocationAvailable ? zoom : 2}
295+
zoomControl={false}
296+
minZoom={2}
297+
maxZoom={18}
298+
// maxBounds={bounds}
299+
// maxBoundsViscosity={1.0}
300+
className="w-full flex-1 fixed bottom-0 h-[calc(100vh-76.19px)] left-0 right-0">
301+
<TileLayer
302+
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
303+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
304+
noWrap={true}
305+
/>
306+
<LocationMarker />
307+
{sellers.map((seller) => (
308+
<Marker position={seller.coordinates as LatLngExpression} key={seller.seller_id} icon={customIcon}>
309+
<Popup closeButton={false} minWidth={300}>
310+
<MapMarkerPopup seller={seller} />
311+
</Popup>
312+
</Marker>
313+
))}
314+
</MapContainer>
315+
}
307316
</>
308317
);
309318
};

‎src/components/shared/navbar/Navbar.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import { useLocale } from 'next-intl';
44
import Link from 'next/link';
55
import { usePathname, useRouter } from 'next/navigation';
66

7-
import { useEffect, useState } from 'react';
7+
import { useContext, useEffect, useState } from 'react';
88
import { FiMenu } from 'react-icons/fi';
99
import { IoMdArrowBack, IoMdClose } from 'react-icons/io';
1010
import { MdHome } from 'react-icons/md';
1111

1212
import Sidebar from '../sidebar/sidebar';
1313
import styles from './Navbar.module.css';
14+
import { AppContext } from '../../../../context/AppContextProvider';
1415

1516
function Navbar() {
1617
const router = useRouter();
@@ -19,6 +20,8 @@ function Navbar() {
1920
const [sidebarToggle, setSidebarToggle] = useState(false);
2021
const [checkHomePage, setCheckHomePage] = useState(true);
2122

23+
const {isSigningInUser} = useContext(AppContext)
24+
2225
// check if the current page is the homepage
2326
useEffect(() => {
2427
const CheckHomePage = () => {
@@ -45,7 +48,7 @@ function Navbar() {
4548
<div
4649
className={`w-full h-[76.19px] z-500 px-[16px] py-[5px] bg-primary fixed top-0 left-0 right-0 `}>
4750
<div className="text-center text-secondary text-[1.3rem] whitespace-nowrap">
48-
Map of Pi
51+
{ isSigningInUser ? "Loading...": "Map of Pi"}
4952
</div>
5053
<div
5154
className="flex justify-between">

0 commit comments

Comments
 (0)