✨ Add & display loves on map

app/page.tsx

@@ -1,25 +1,52 @@
 'use client';
 // ---------------------------------------------------------------------------------------------------------------------
-//                                                       Imports
+//!                                                      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 { canUseGeolocation, geoError, initialState } = useData();
+	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>;
@@ -35,32 +62,98 @@ const Home = () => {
 	}
 
 	return (
-		<div className='mapContainer'>
-			<DeckGL
-				initialViewState={initialState}
-				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/mapbox/standard'}
-					preserveDrawingBuffer
-				></Map>
-			</DeckGL>
+		<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>
 
-			<button className='dropLove'>
-				<HeartIcon />
-				Placer un love
-			</button>
+			{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>
 	);
 };