From 57ecca864fd908a6772145739d63cbf1f4d30821 Mon Sep 17 00:00:00 2001
From: work <s.a.fivaz@gmail.com>
Date: Mon, 29 Apr 2024 00:49:29 +0200
Subject: [PATCH] refactor

---
 .../calendar-columns/CalendarColumns.svelte      | 14 +-------------
 .../calendar-grid/grid-cell/GridCell.svelte      | 11 ++++++-----
 .../event-panel/placement-service.ts             |  3 ++-
 .../calendar-rows/event-panel/service.ts         |  2 +-
 .../calendar-columns/calendar-rows/service.ts    |  2 +-
 src/lib/components/task-form/service.ts          |  3 ++-
 .../task-form-recurring/TaskFormRecurring.svelte |  5 +++--
 .../days-checkbox/DaysCheckbox.svelte            |  4 ++--
 .../days-checkbox/service.ts                     |  0
 src/lib/task/seed.ts                             |  7 +++----
 src/lib/task/time-utils.ts                       | 16 +++++++++++++++-
 src/lib/task/utils.ts                            |  9 +--------
 src/routes/dashboard/home/+page.svelte           |  4 +---
 13 files changed, 38 insertions(+), 42 deletions(-)
 rename src/lib/components/{ => task-form/task-form-recurring}/days-checkbox/DaysCheckbox.svelte (86%)
 rename src/lib/components/{ => task-form/task-form-recurring}/days-checkbox/service.ts (100%)

diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
index 97fd4645..4bd96a11 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/CalendarColumns.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
 	import type { AnyTask } from '$lib/task/utils';
 
-	import {
-		GRID_CELL_TIME,
-		NUMBER_OF_CELLS,
-	} from '$lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/service';
-	import { setHours, setMinutes } from 'date-fns';
+	import { buildDate } from '$lib/task/time-utils';
 	import { createEventDispatcher } from 'svelte';
 
 	import CalendarRows from './calendar-rows/CalendarRows.svelte';
@@ -19,14 +15,6 @@
 		createTask: Date;
 		move: { cellNumber: number; date: Date };
 	}>();
-
-	export function buildDate(date: Date, cellNumber: number): Date {
-		if (cellNumber < 0 || cellNumber > NUMBER_OF_CELLS) {
-			throw 'Invalid number. Please enter a number between 0 and 95.';
-		}
-
-		return setMinutes(setHours(date, 0), cellNumber * GRID_CELL_TIME);
-	}
 </script>
 
 <div class="hidden grow md:flex">
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/grid-cell/GridCell.svelte b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/grid-cell/GridCell.svelte
index 3c1fbf74..a057b94b 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/grid-cell/GridCell.svelte
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/grid-cell/GridCell.svelte
@@ -4,14 +4,13 @@
 
 	import { GRID_CLASS, NEW_GRID_CELL_HEIGHT, isSomethingDragging } from '../service';
 
-	const dispatch = createEventDispatcher<{ click: number; move: number }>();
+	const dispatch = createEventDispatcher<{ click: string; move: number }>();
 
 	let className = '';
 	export { className as class };
 	export let cellNumber: number;
 	export let targetDate: string;
 
-	// TODO check if I can make this useless
 	function getTime(cellNumber: number) {
 		const totalMinutes = cellNumber * 15;
 
@@ -20,17 +19,19 @@
 
 		return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
 	}
+
+	$: time = getTime(cellNumber);
 </script>
 
 <!--the class grid-cell is used in EventPanel to control droppable zones for its drag and drop-->
 <div
 	class={clsx(GRID_CLASS, className, { 'border-b': $isSomethingDragging })}
 	data-date={targetDate}
-	data-time={getTime(cellNumber)}
-	on:click={() => !$isSomethingDragging && dispatch('click', cellNumber)}
+	data-time={time}
+	on:click={() => !$isSomethingDragging && dispatch('click', time)}
 	on:keydown={(e) => {
 		if (e.key === 'Enter') {
-			dispatch('click', cellNumber);
+			dispatch('click', time);
 		}
 	}}
 	role="button"
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/placement-service.ts b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/placement-service.ts
index 268e777e..e389d47a 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/placement-service.ts
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/placement-service.ts
@@ -2,7 +2,8 @@ import {
 	GRID_CELL_TIME,
 	NEW_GRID_CELL_HEIGHT,
 } from '$lib/components/calendar/calendar-body/calendar-columns/calendar-rows/calendar-grid/service';
-import { type AnyEvent, convertTimeToMinutes } from '$lib/task/utils';
+import { convertTimeToMinutes } from '$lib/task/time-utils';
+import { type AnyEvent } from '$lib/task/utils';
 
 export const EVENT_PANEL_CLASS = 'event-panel-class';
 
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/service.ts b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/service.ts
index 87e52c28..e7b55281 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/service.ts
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/service.ts
@@ -100,7 +100,7 @@ export function getDurationFromCellSize(height: number) {
 	const numberOfFilledCells = height / NEW_GRID_CELL_HEIGHT;
 	const roundedNumberOfFilledCells = Math.round(numberOfFilledCells);
 	const resultDate = addMinutes(new Date(0, 0, 0), roundedNumberOfFilledCells * GRID_CELL_TIME);
-	return format(resultDate, 'HH:mm');
+	return format(resultDate, TIME);
 }
 
 export function hasMoved(panel: HTMLDivElement, event: AnyEvent) {
diff --git a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/service.ts b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/service.ts
index 006ea038..9cff347d 100644
--- a/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/service.ts
+++ b/src/lib/components/calendar/calendar-body/calendar-columns/calendar-rows/service.ts
@@ -4,8 +4,8 @@ import {
 	getEndSlot,
 	getStartSlot,
 } from '$lib/components/calendar/calendar-body/calendar-columns/calendar-rows/event-panel/placement-service';
-import { weekDays } from '$lib/components/days-checkbox/service';
 import { getEndTime } from '$lib/components/task-form/service';
+import { weekDays } from '$lib/components/task-form/task-form-recurring/days-checkbox/service';
 import { DATE, DATETIME } from '$lib/consts';
 import { endOfDay, getDay, isSameDay, isWithinInterval, parse, startOfDay } from 'date-fns';
 
diff --git a/src/lib/components/task-form/service.ts b/src/lib/components/task-form/service.ts
index 571334a7..47dda0fb 100644
--- a/src/lib/components/task-form/service.ts
+++ b/src/lib/components/task-form/service.ts
@@ -2,7 +2,6 @@ import type { Category } from '$lib/category/utils';
 import type { Goal } from '$lib/goal/utils';
 import type { AnyTask, Event, RecurringEvent, SubTask, Task, ToDo } from '$lib/task/utils';
 
-import { weekDays } from '$lib/components/days-checkbox/service';
 import { createModal } from '$lib/components/dialog/service';
 import { DATE, TIME } from '$lib/consts';
 import { db, storage } from '$lib/firebase';
@@ -26,6 +25,8 @@ import {
 } from 'firebase/firestore';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 
+import { weekDays } from './task-form-recurring/days-checkbox/service';
+
 export type TaskIn = Omit<Task, 'recurringExceptions'> & {
 	endTime: string;
 	image: string;
diff --git a/src/lib/components/task-form/task-form-recurring/TaskFormRecurring.svelte b/src/lib/components/task-form/task-form-recurring/TaskFormRecurring.svelte
index c151176e..e11cb278 100644
--- a/src/lib/components/task-form/task-form-recurring/TaskFormRecurring.svelte
+++ b/src/lib/components/task-form/task-form-recurring/TaskFormRecurring.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import type { TaskIn } from '$lib/components/task-form/service.js';
 
-	import DaysCheckbox from '$lib/components/days-checkbox/DaysCheckbox.svelte';
 	import Input from '$lib/components/input/Input.svelte';
 	import Toggle from '$lib/components/toggle/Toggle.svelte';
 	import { Transition } from '@rgossiaux/svelte-headlessui';
-	import Flatpickr from 'svelte-flatpickr'; // TODO check later how I should import a precompiled component https://github.com/sveltejs/svelte/issues/604
+	import Flatpickr from 'svelte-flatpickr';
+
+	import DaysCheckbox from './days-checkbox/DaysCheckbox.svelte'; // TODO check later how I should import a precompiled component https://github.com/sveltejs/svelte/issues/604
 	import 'flatpickr/dist/themes/airbnb.css';
 
 	export let taskIn: TaskIn;
diff --git a/src/lib/components/days-checkbox/DaysCheckbox.svelte b/src/lib/components/task-form/task-form-recurring/days-checkbox/DaysCheckbox.svelte
similarity index 86%
rename from src/lib/components/days-checkbox/DaysCheckbox.svelte
rename to src/lib/components/task-form/task-form-recurring/days-checkbox/DaysCheckbox.svelte
index 22e812be..f5d10459 100644
--- a/src/lib/components/days-checkbox/DaysCheckbox.svelte
+++ b/src/lib/components/task-form/task-form-recurring/days-checkbox/DaysCheckbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { weekDays } from '$lib/components/days-checkbox/service';
 	import { clsx } from 'clsx';
 
-	// TODO since this component will only be used inside a TaskForm I think I should move it there
+	import { weekDays } from './service';
+
 	export let value: string[];
 
 	export let name: string;
diff --git a/src/lib/components/days-checkbox/service.ts b/src/lib/components/task-form/task-form-recurring/days-checkbox/service.ts
similarity index 100%
rename from src/lib/components/days-checkbox/service.ts
rename to src/lib/components/task-form/task-form-recurring/days-checkbox/service.ts
diff --git a/src/lib/task/seed.ts b/src/lib/task/seed.ts
index 947946f0..4b8af265 100644
--- a/src/lib/task/seed.ts
+++ b/src/lib/task/seed.ts
@@ -2,14 +2,13 @@ import type { AnyTask, Event, RecurringEvent, ToDo } from '$lib/task/utils';
 
 import { fun, routine, sleep, work } from '$lib/category/seed';
 import { DATE, TIME } from '$lib/consts';
-import { format, set, startOfTomorrow, startOfWeek, startOfYesterday } from 'date-fns';
+import { buildDate } from '$lib/task/time-utils';
+import { format, startOfTomorrow, startOfWeek, startOfYesterday } from 'date-fns';
 
 function getTodayAtTime(time: string): Date {
-	const [hours, minutes] = time.split(':').map(Number);
-
 	const date = new Date();
 
-	return set(date, { hours, minutes });
+	return buildDate(date, time);
 }
 
 const longText =
diff --git a/src/lib/task/time-utils.ts b/src/lib/task/time-utils.ts
index 25259558..3a15934a 100644
--- a/src/lib/task/time-utils.ts
+++ b/src/lib/task/time-utils.ts
@@ -1,9 +1,23 @@
 import { DATE } from '$lib/consts';
 import { type AnyTask } from '$lib/task/utils';
-import { parse } from 'date-fns';
+import { parse, set } from 'date-fns';
 
 export function getTaskDate(task: AnyTask) {
 	const dateString = 'date' in task ? task.date : task.deadline;
 
 	return dateString ? parse(dateString, DATE, new Date()) : null;
 }
+
+export function buildDate(date: Date, time: string): Date {
+	const [hours, minutes] = time.split(':').map(Number);
+
+	return set(date, { hours, minutes });
+}
+
+export function convertTimeToMinutes(time: string) {
+	if (/^([01]\d|2[0-3]):([0-5]\d)$/.test(time)) {
+		const [hours, minutes] = time.split(':').map(Number);
+		return hours * 60 + minutes;
+	}
+	throw "Time isn't in the format hh:mm";
+}
diff --git a/src/lib/task/utils.ts b/src/lib/task/utils.ts
index c0d139f0..fc41fbdf 100644
--- a/src/lib/task/utils.ts
+++ b/src/lib/task/utils.ts
@@ -3,6 +3,7 @@ import type { TaskIn } from '$lib/components/task-form/service';
 import type { Goal } from '$lib/goal/utils';
 
 import { DATE, TIME } from '$lib/consts';
+import { convertTimeToMinutes } from '$lib/task/time-utils';
 import { format, isAfter, parse } from 'date-fns';
 
 export type SubTask = { id: number; isDone: boolean; name: string };
@@ -41,14 +42,6 @@ export type AnyEvent = Event | RecurringEvent;
 
 export type AnyTask = AnyEvent | ToDo;
 
-export function convertTimeToMinutes(time: string) {
-	if (/^([01]\d|2[0-3]):([0-5]\d)$/.test(time)) {
-		const [hours, minutes] = time.split(':').map(Number);
-		return hours * 60 + minutes;
-	}
-	throw "Time isn't in the format hh:mm";
-}
-
 export function getDurationInMinutes(task: AnyTask) {
 	if ('duration' in task && task.duration) {
 		return convertTimeToMinutes(task.duration);
diff --git a/src/routes/dashboard/home/+page.svelte b/src/routes/dashboard/home/+page.svelte
index 046a15ac..35d6b7a9 100644
--- a/src/routes/dashboard/home/+page.svelte
+++ b/src/routes/dashboard/home/+page.svelte
@@ -3,9 +3,7 @@
 	import type { AnyEvent, AnyTask } from '$lib/task/utils';
 
 	import Calendar from '$lib/components/calendar/Calendar.svelte';
-	import {
-		editPossibleSingleRecurringEvent,
-	} from '$lib/components/task-form/service';
+	import { editPossibleSingleRecurringEvent } from '$lib/components/task-form/service';
 	import TaskFormWrapper from '$lib/components/task-form-wrapper/TaskFormWrapper.svelte';
 	import TypedCollection from '$lib/components/typed-collection/TypedCollection.svelte';
 	import { buildEmptyEvent, buildEventWithTime } from '$lib/task/build-utils';