From f81591ccb0cf094657b66eef82f68fa206cef335 Mon Sep 17 00:00:00 2001 From: b3ni15 Date: Fri, 1 Aug 2025 12:51:35 +0200 Subject: [PATCH] Refactor Schedule component to use week-based navigation and improve workdays fetching logic --- app/schedule.tsx | 181 ++++++++++++++++++++++++++++------------------- 1 file changed, 110 insertions(+), 71 deletions(-) diff --git a/app/schedule.tsx b/app/schedule.tsx index 0ad4491..ecacf03 100644 --- a/app/schedule.tsx +++ b/app/schedule.tsx @@ -1,5 +1,5 @@ import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; -import { addDays, addMonths, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, startOfMonth, startOfWeek, subMonths } from 'date-fns'; +import { addDays, addWeeks, format, getMonth, getYear, isSameDay, startOfWeek, subWeeks } from 'date-fns'; import { useRouter } from 'expo-router'; import * as SecureStore from 'expo-secure-store'; import React, { useEffect, useState } from "react"; @@ -9,14 +9,14 @@ const PRIMARY = '#A24BFA'; const BG = '#0c0a0a'; export default function Schedule() { - const [currentMonth, setCurrentMonth] = useState(new Date()); + const [currentWeek, setCurrentWeek] = useState(new Date()); const [workdays, setWorkdays] = useState([]); const [loading, setLoading] = useState(false); const router = useRouter(); useEffect(() => { fetchWorkdays(); - }, [currentMonth]); + }, [currentWeek]); async function fetchWorkdays() { setLoading(true); @@ -26,27 +26,35 @@ export default function Schedule() { throw new Error('Nincs elmentett token, kérlek jelentkezz be újra!'); } - const year = getYear(currentMonth); - const month = getMonth(currentMonth) + 1; + // Az aktuális hét első és utolsó napja + const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 }); + const weekEnd = addDays(weekStart, 6); + const months = new Set([ + getMonth(weekStart) + 1, + getMonth(weekEnd) + 1 + ]); + const years = new Set([ + getYear(weekStart), + getYear(weekEnd) + ]); - const response = await fetch(`https://menuapi.devbeni.lol/api/@me/schedule?year=${year}&month=${month}`, { - method: 'GET', - headers: { - 'Authorization': `Bearer ${token}`, - 'Accept': 'application/json', - }, - }); - - const data = await response.json(); - - console.log('API teljes válasz:', data); - if (!data || !data.data || !Array.isArray(data.data.Data)) { - console.log('Nincs beosztás adat a válaszban!'); - setWorkdays([]); - return; + let allWorkdays: any[] = []; + for (const year of years) { + for (const month of months) { + const response = await fetch(`https://menuapi.devbeni.lol/api/@me/schedule?year=${year}&month=${month}`, { + method: 'GET', + headers: { + 'Authorization': `Bearer ${token}`, + 'Accept': 'application/json', + }, + }); + const data = await response.json(); + if (data && data.data && Array.isArray(data.data.Data)) { + allWorkdays = allWorkdays.concat(data.data.Data); + } + } } - setWorkdays(data.data.Data); - + setWorkdays(allWorkdays); } catch (e) { const err = e as any; if (err.response) { @@ -63,59 +71,83 @@ export default function Schedule() { } function renderCalendar() { - const monthStart = startOfMonth(currentMonth); - const monthEnd = endOfMonth(monthStart); - const startDate = startOfWeek(monthStart, { weekStartsOn: 1 }); - const endDate = endOfWeek(monthEnd, { weekStartsOn: 1 }); + const weekStart = startOfWeek(currentWeek, { weekStartsOn: 1 }); const today = new Date(); - const rows = []; - let days = []; - let day = startDate; - let formattedDate = ''; - while (day <= endDate) { - for (let i = 0; i < 7; i++) { - formattedDate = format(day, 'yyyy-MM-dd'); - const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate); - let bg = 'rgba(24,20,28,0.7)'; - let color = '#fff'; - let borderWidth = 0; - if (isSameDay(day, today)) { - borderWidth = 2; - color = PRIMARY; - } - if (wd) { - bg = wd.color || 'deepskyblue'; - color = '#222'; - } - days.push( - - - {format(day, 'd')} - {wd && {wd.text}} - - - ); - day = addDays(day, 1); + // 2 soros grid: első sor 4 nap, második sor 3 nap + const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)); + const firstRow = weekDays.slice(0, 4); + const secondRow = weekDays.slice(4); + + function renderDayBox(day: string | number | Date) { + const formattedDate = format(day, 'yyyy-MM-dd'); + const wd = workdays.find(w => w.WorkDay?.slice(0, 10) === formattedDate); + let bg = '#ede7f6'; + let color = '#6a1b9a'; + let borderWidth = 0; + if (isSameDay(day, today)) { + borderWidth = 2; + color = PRIMARY; } - rows.push({days}); - days = []; + if (wd) { + if (wd.Type === 1) { + bg = '#B388FF'; + color = '#311b92'; + } else if (wd.Type === 10) { + bg = '#A24BFA'; + color = '#fff'; + } + } + return ( + + + {format(day, 'd')} + {wd && wd.Type === 1 && ( + PN + )} + {wd && wd.Type === 10 && wd.text && ( + {wd.text} + )} + + + ); } + return ( - setCurrentMonth(subMonths(currentMonth, 1))}> - {format(currentMonth, 'yyyy. MMMM')} - setCurrentMonth(addMonths(currentMonth, 1))}> + setCurrentWeek(subWeeks(currentWeek, 1))}> + {format(weekStart, 'yyyy. MMMM d.') + ' - ' + format(addDays(weekStart, 6), 'MMMM d.')} + setCurrentWeek(addWeeks(currentWeek, 1))}> - + {["H", "K", "Sz", "Cs", "P", "Szo", "V"].map(d => ( {d} ))} @@ -123,16 +155,23 @@ export default function Schedule() { {loading ? ( Betöltés… ) : ( - {rows} + + + {firstRow.map(renderDayBox)} + + + {secondRow.map(renderDayBox)} + + )} ); } return ( - + - + Beosztás naptár {(!loading && workdays.length === 0) && (