feature/visitors

packages/backend/api/src/game/get.info-park-user.ts

@@ -7,7 +7,7 @@ const getInfoParkUser = express.Router();
 getInfoParkUser.get('/info-park-user', async (req, res) => {
   //PLUS TARD récupérer l'id dans le cookie !
   //http://192.168.0.54:3333/api/game/info-park-user
-  const userId = 1;
+  const userId = 8;
 
   const parkInfo = await db
     .selectFrom('parks')
@@ -22,8 +22,19 @@ getInfoParkUser.get('/info-park-user', async (req, res) => {
     return;
   }
 
+  const visitorsCountResult = await db
+    .selectFrom('park_visitors')
+    .select(({ fn }) => [fn.countAll().as('count')])
+    .where('park_visitors.park_id', '=', parkInfo.id)
+    .executeTakeFirst();
+
+  const visitorsCount = visitorsCountResult
+    ? Number(visitorsCountResult.count)
+    : 0;
+
   res.json({
     parkInfo,
+    visitorsCount,
   });
 });
 

packages/frontend/web/src/components/info-nb-visitors-moons.tsx

@@ -2,19 +2,17 @@ import moon from '../assets/images/icons-buttons/moon.png';
 import visitor from '../assets/images/icons-buttons/visitors.png';
 import { useGameInfoContext } from '../contexts/game-info-context';
 
-//Reste à faire le fetch pour nb visiteurs!! plus tard!
-
 export default function InfoNbVisitorsMoons() {
-  const { wallet } = useGameInfoContext();
+  const { walletFormated, visitorsFormated } = useGameInfoContext();
 
   return (
     <div className='bg-secondary-gray flex h-8 w-fit cursor-default items-center justify-between gap-2 rounded px-2 py-0.5 shadow-[0px_4px_4px_rgba(0,0,0,0.25)] md:h-9 md:rounded-md'>
       <div className='flex flex-row items-center gap-0.5 md:gap-1'>
-        {'50'}
+        {visitorsFormated}
         <img src={visitor} alt='visitors' className='h-6 md:h-7' />
       </div>
       <div className='flex flex-row items-center gap-0.5 md:gap-1'>
-        {wallet}
+        {walletFormated}
         <img src={moon} alt='mooney' className='h-6 md:h-7' />
       </div>
     </div>

packages/frontend/web/src/contexts/game-info-context.tsx

@@ -1,30 +1,34 @@
 import { createContext, useContext, useMemo } from 'react';
 import type { PropsWithChildren } from 'react';
 
-import useWallet from '@/hooks/use-wallet';
+import useParkInfo from '@/hooks/use-park-info';
 
-// Define type for context
 type GameInfoContextState = {
-  wallet: string;
+  walletFormated: string;
+  visitorsFormated: string;
 };
 
 // Define the type for provider
 type GameInfoContextProviderProps = PropsWithChildren;
 
 // create the context
 export const gameInfoContext = createContext<GameInfoContextState>({
-  wallet: '',
+  walletFormated: '',
+  visitorsFormated: '',
 });
 
 // create the provider
 export function GameInfoContextProvider({
   children,
 }: GameInfoContextProviderProps) {
-  // get wallet with hook
-  const wallet = useWallet();
+  // // get wallet an visitors with useParkInfoHook
+  const { walletFormated, visitorsFormated } = useParkInfo();
 
   // memorize value to avoid unnecessary changes
-  const value = useMemo(() => ({ wallet }), [wallet]);
+  const value = useMemo(
+    () => ({ walletFormated, visitorsFormated }),
+    [walletFormated, visitorsFormated],
+  );
 
   return (
     <gameInfoContext.Provider value={value}>

packages/frontend/web/src/hooks/use-wallet.ts → packages/frontend/web/src/hooks/use-park-info.ts

@@ -1,30 +1,36 @@
 import { useEffect, useState } from 'react';
 
-import { useNumberFormatter } from './number-formatter';
+import { useNumberFormatter } from './use-number-formatter';
 
 const API_URL = import.meta.env.VITE_API_URL;
 
-export default function useWallet() {
+export default function useParkInfo() {
   const [wallet, setWallet] = useState(0);
+  const [visitorsCount, setVisitorsCount] = useState(0);
 
   //CHANGER ICI L'ID PLUS TARD !!
 
   useEffect(() => {
-    async function fetchWallet() {
+    async function fetchParkInfo() {
       try {
         const response = await fetch(`${API_URL}/game/info-park-user`);
         const data = await response.json();
         // const roundedWallet = data.parkInfo.wallet;
         setWallet(data.parkInfo.wallet);
+        setVisitorsCount(data.visitorsCount);
       } catch (error) {
         console.error('fetch failed');
       }
     }
 
-    void fetchWallet();
+    void fetchParkInfo();
   }, []);
 
   const walletFormated = useNumberFormatter(wallet);
+  const visitorsFormated = useNumberFormatter(visitorsCount);
 
-  return walletFormated;
+  return {
+    walletFormated,
+    visitorsFormated,
+  };
 }