feat: added avarage weekday pintxo condition

src/app/(surfspots)/favorite/page.tsx

@@ -47,23 +47,6 @@ async function getFavoriteSpots(): Promise<PintxoConditions[]> {
 
 export default async function FavoriteSpots() {
     const favoriteSpotsData = await getFavoriteSpots();
-    // let favoriteSpotsData: PintxoConditions[] = [];
-
-    // if (favoriteSpots.length) {
-    //     favoriteSpotsData = await Promise.all(
-    //         favoriteSpots.map(async (spot) => {
-    //             try {
-    //                 return await fetchSpotSurfData(spot);
-    //             } catch (error) {
-    //                 console.error(
-    //                     `Error fetching data for spot ${spot.name}:`,
-    //                     error
-    //                 );
-    //                 return null; // or return a default value or error object
-    //             }
-    //         })
-    //     );
-    // }
 
     return (
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-4 md:grid-cols-2 ">

src/app/(surfspots)/layout.tsx

@@ -46,7 +46,7 @@ export default async function FavoriteSpotsLayout({
                                     
                             `}
                         >
-                            All Pintxoss
+                            All Pintxos
                         </div>
                     </Link>
                 </div>

src/app/components/SpotDetails.tsx

@@ -14,6 +14,7 @@ import { PintxoRange } from "./PintxoRange";
 import { getCurrentPintxoConditions } from "../utils/surfUtils";
 import { getPintxoColor } from "../utils/uiUtils";
 import PintxoConditionNameCard from "./atom/PintxoConditionNameCard";
+import WeekdayPintxoCondition from "./atom/WeekdayPintxoCondition";
 type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
 type PintxoName =
     | "Empty Plate"
@@ -65,27 +66,28 @@ export default async function SpotDetails({
                     </div>
                 </div>
 
-                <div className="flex flex-row justify-between gap-2">
-                    <div className="flex flex-row gap-4  justify-start items-center bg-light/5 p-2 rounded-sm">
+                <div className="flex flex-row justify-between items-center ">
+                    <div className="flex flex-row gap-2 justify-start items-center bg-light/5 p-2 rounded-sm">
                         <WaveHeightIcon size={20} color="text-light" />
                         <span className="text-light font-body font-medium text-lg">
                             {getCurrentWaveHeightForSpot(spot) || null} {"m"}
                         </span>
                     </div>
-                    <div className="flex flex-row gap-4  justify-start items-center bg-light/5 p-2 rounded-sm">
+                    <div className="flex flex-row gap-2  justify-start items-center bg-light/5 p-2 rounded-sm">
                         <span className="text-light font-body font-light text-lg">
                             {getCurrentPeriodForSpot(spot) || null}{" "}
                             <span className="text-xs">s.</span>
                         </span>
                     </div>
-                    <div className="flex flex-row gap-4 items-center  justify-start bg-light/5 p-2 rounded-sm">
+                    <div className="flex flex-row gap-2 items-center  justify-start bg-light/5 p-2 rounded-sm">
                         <WindIcon size={20} color="text-light/50" />
-                        <span className="text-light font-body text-sm font-thin">
+                        <span className="text-light font-body text-lg font-thin">
                             {getCurrentWind(spot) || null}
                         </span>
                     </div>
                 </div>
             </div>
+            <WeekdayPintxoCondition pintxo={spot.pintxo} />
         </div>
     );
 }

src/app/components/atom/WeekdayPintxoCondition.tsx

@@ -0,0 +1,32 @@
+import { Pintxo } from "@/app/constants/types";
+import { getWeekdayPintxoCondition } from "@/app/utils/surfUtils";
+import { getPintxoColor } from "@/app/utils/uiUtils";
+import React from "react";
+
+interface WekdayPintxoProps {
+    pintxo: Pintxo[] | null;
+}
+function WeekdayPintxoCondition({ pintxo }: WekdayPintxoProps) {
+    const data = getWeekdayPintxoCondition(pintxo!);
+    return (
+        <div className="flex flex-row justify-between gap-1 items-center mt-6">
+            {Object.keys(data).map((key, index) => (
+                <div
+                    key={index}
+                    className="flex flex-col justify-center items-center gap-2"
+                >
+                    <span className="font-body text-sm text-light/50 font-bold">
+                        {key}
+                    </span>
+                    <div
+                        className={`${getPintxoColor(
+                            data[key]
+                        )} h-4 w-4 rounded-full`}
+                    ></div>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default WeekdayPintxoCondition;

src/app/utils/surfUtils.ts

@@ -11,9 +11,13 @@ import {
     TideType,
     HourlyWeatherData,
     ForecastDataResponse,
+    Pintxo,
 } from "../constants/types";
 import { Database } from "../lib/database.types";
 type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
+type WeekdayPintxoCondition = {
+    [weekday: string]: string;
+};
 
 //constants
 const directionToDegrees: { [key: string]: number } = {
@@ -250,3 +254,42 @@ export function getCurrentPintxoConditions(
 
     return currentPintxoCondition;
 }
+
+export function getWeekdayPintxoCondition(
+    data: Pintxo[]
+): WeekdayPintxoCondition {
+    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const weekdayConditions: {
+        [weekday: string]: { [condition: string]: number };
+    } = {};
+    console.log("data", data);
+
+    for (const item of data) {
+        const date = DateTime.fromISO(item.time, { zone: "UTC" })
+            .setZone("Europe/Paris")
+            .startOf("hour");
+        const weekday = weekdays[date.weekday - 1];
+
+        weekdayConditions[weekday] = weekdayConditions[weekday] || {};
+        weekdayConditions[weekday][item.condition] =
+            (weekdayConditions[weekday][item.condition] || 0) + 1;
+    }
+
+    const averageConditions: WeekdayPintxoCondition = {};
+
+    for (const weekday in weekdayConditions) {
+        let maxCount = 0;
+        let mostFrequentCondition = "";
+
+        for (const condition in weekdayConditions[weekday]) {
+            if (weekdayConditions[weekday][condition] > maxCount) {
+                maxCount = weekdayConditions[weekday][condition];
+                mostFrequentCondition = condition;
+            }
+        }
+
+        averageConditions[weekday] = mostFrequentCondition;
+    }
+
+    return averageConditions;
+}