refactor

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">

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"

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';
 

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) {

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';
 

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;

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;

src/lib/components/days-checkbox/DaysCheckbox.svelte → 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;

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 =

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";
+}

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);

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';