Lovemap/app/page.tsx

'use client';
// ---------------------------------------------------------------------------------------------------------------------
//!                                                      Imports
// ---------------------------------------------------------------------------------------------------------------------

// --------------------------------------------------- Components ------------------------------------------------------
import { DeckGL } from 'deck.gl';
import { Map } from 'react-map-gl';
import Image from 'next/image';
// ---------------------------------------------------------------------------------------------------------------------

// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
import { useData } from './hooks/useData';
import { useActions } from './hooks/useActions';
// ---------------------------------------------------------------------------------------------------------------------

// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import HeartIcon from '@/assets/HeartIcon';
import Input from '@/components/Input/Input';
import CloseIcon from '@/assets/CloseIcon';
import AddIcon from '@/assets/AddIcon';
import pin from '@/assets/pin.png';
import 'mapbox-gl/dist/mapbox-gl.css';
import './styles.scss';
import Loader from '@/assets/Loader';
// ---------------------------------------------------------------------------------------------------------------------

const Home = () => {
	const {
		deckRef,
		viewState,
		setViewState,
		geoError,
		canUseGeolocation,
		layers,
		isAddLoveOpened,
		setIsAddLoveOpened,
		isLoading,
		setIsLoading,
		addLoveMessage,
		setAddLoveMessage,
	} = useData();

	const { toggleLoveMenu, addPoint } = useActions({
		viewState,
		setIsAddLoveOpened,
		setIsLoading,
		setAddLoveMessage,
	});

	if (!canUseGeolocation && !geoError) {
		return <p className='appMessage'>Chargement...</p>;
	}

	if (!canUseGeolocation && geoError) {
		return (
			<p className='appMessage'>
				Nous avons besoin d&apos;accéder à votre position pour pouvoir
				utiliser l&apos;application.
			</p>
		);
	}

	return (
		<div className='page'>
			<div className='mapContainer'>
				<DeckGL
					ref={deckRef}
					initialViewState={viewState}
					onViewStateChange={(e) => setViewState(e.viewState)}
					layers={layers}
					controller
					useDevicePixels={false}
					getCursor={({ isDragging }) =>
						isDragging ? 'grabbing' : 'grab'
					}
				>
					<Map
						logoPosition='bottom-right'
						style={{
							width: '100%',
							height: '100%',
						}}
						mapboxAccessToken={process.env.MAPBOX_TOKEN}
						mapStyle={
							'mapbox://styles/unepicier/cm1p8yuvq00qx01r24vg4f3ej'
						}
						preserveDrawingBuffer
					></Map>
				</DeckGL>
				{isAddLoveOpened && (
					<Image
						src={pin}
						alt='pin'
						width={30}
						className='pinImage'
					/>
				)}
			</div>

			{isAddLoveOpened && (
				<div className='addLoveContainer'>
					<p className='addLoveHeader'>Ajouter un love ici</p>

					<form
						className='addLoveForm'
						onSubmit={addPoint}
					>
						<Input
							type='text'
							name='location'
							placeholder="C'était où ?"
							autoComplete='off'
							required
						/>
						<Input
							type='text'
							name='comment'
							placeholder='Un commentaire'
							autoComplete='off'
						/>

						<div className='buttonsContainer'>
							<button
								type='button'
								className='button'
								onClick={toggleLoveMenu}
								disabled={isLoading}
							>
								<CloseIcon />
								Annuler
							</button>

							<button
								type='submit'
								className='button'
								disabled={isLoading}
							>
								{isLoading ? <Loader /> : <AddIcon />}
								Ajouter
							</button>
						</div>
					</form>
				</div>
			)}

			{!isAddLoveOpened && (
				<button
					type='button'
					className='dropLove'
					onClick={toggleLoveMenu}
				>
					<HeartIcon />
					Placer un love
				</button>
			)}
		</div>
	);
};

export default Home;