add image to events

src/lib/components/task-form/TaskForm.svelte

@@ -17,15 +17,24 @@
 		getDuration,
 		getEndTime,
 		removeTask,
+		storeImage,
 	} from '$lib/components/task-form/service';
 	import Toggle from '$lib/components/toggle/Toggle.svelte';
 	import TypedCollection from '$lib/components/typed-collection/TypedCollection.svelte';
 	import { convertToAnyTask, hasErrors } from '$lib/task/utils';
-	import { Transition } from '@rgossiaux/svelte-headlessui';
-	import { XMark } from '@steeze-ui/heroicons';
+	import {
+		Disclosure,
+		DisclosureButton,
+		DisclosurePanel,
+		Transition,
+	} from '@rgossiaux/svelte-headlessui';
+	import { ChevronRight, Photo, XMark } from '@steeze-ui/heroicons';
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import 'flatpickr/dist/themes/airbnb.css';
 	import { createEventDispatcher } from 'svelte'; // TODO check later how I should import a precompiled component https://github.com/sveltejs/svelte/issues/604
+	import { storage } from '$lib/firebase';
+	import { FirebaseError } from 'firebase/app';
+	import { getDownloadURL, ref } from 'firebase/storage';
 	import Flatpickr from 'svelte-flatpickr';
 
 	import type { TaskIn } from './service';
@@ -51,26 +60,61 @@
 
 	let errorMessage = '';
 
+	let file: File | null = null;
+
+	let image: null | string = null;
+
 	$: isEditing = !!task.id;
 
 	$: formName = `${isEditing ? 'Edit' : 'Add'} ${'startTime' in task ? 'Event' : 'Task'}`;
 
-	function onSubmit() {
+	async function getImage() {
+		if (!task.id) {
+			return;
+		}
+
+		const imageRef = ref(storage, `users/${userId}/tasks/${task.id}`);
+		try {
+			const foundImage = await getDownloadURL(imageRef);
+			if (foundImage) {
+				image = foundImage;
+			}
+		} catch (error) {
+			if (error instanceof FirebaseError && error.code !== 'storage/object-not-found') {
+				return console.log('error', error);
+			}
+		}
+	}
+
+	getImage();
+
+	async function onSubmit() {
 		if (hasErrors(taskIn, errorMessage)) {
 			return;
 		}
 
 		const { id, ...data } = convertToAnyTask(taskIn);
+		let eventId = id;
 
 		if (id) {
-			editTaskWithPrompt(id, data, userId, targetDate, wasRecurring);
+			void editTaskWithPrompt(id, data, userId, targetDate, wasRecurring);
 		} else {
-			addTask(data, userId);
+			eventId = await addTask(data, userId);
+		}
+		if (file) {
+			void storeImage(userId, eventId, file);
 		}
 
 		dispatch('close');
 	}
 
+	function handleChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (event.currentTarget.files) {
+			[file] = event.currentTarget.files;
+			image = URL.createObjectURL(file);
+		}
+	}
+
 	let goalType: Goal;
 </script>
 
@@ -115,14 +159,56 @@
 				</label>
 			</div>
 
-			<label class="block text-sm text-gray-700">
-				<textarea
-					bind:value={taskIn.description}
-					class="p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-					name="description"
-					placeholder="description"
-				/>
-			</label>
+			<Disclosure class="bg-white rounded-lg p-2" defaultOpen={true} let:open>
+				<DisclosureButton class="flex justify-between w-full">
+					<span>Description</span>
+					<Icon class="w-5 h-5 {open ? 'rotate-90 transform' : ''}" src={ChevronRight} />
+				</DisclosureButton>
+				<Transition
+					enter="transition duration-100 ease-out"
+					enterFrom="transform scale-95 opacity-0"
+					enterTo="transform scale-100 opacity-100"
+					leave="transition duration-75 ease-out"
+					leaveFrom="transform scale-100 opacity-100"
+					leaveTo="transform scale-95 opacity-0"
+				>
+					<DisclosurePanel class="text-gray-500 pt-2 flex flex-col gap-2">
+						<div class="flex flex-col gap-2 w-full">
+							<div class="h-24 flex items-center justify-center">
+								{#if image}
+									<button on:click={() => console.log('test')} type="button">
+										<img alt="event description" class="" src={image} />
+									</button>
+								{:else}
+									<Icon class="h-10 w-10 text-indigo-700" src={Photo} />
+								{/if}
+							</div>
+
+							<label
+								class="w-full focus-visible:outline-indigo-600 bg-indigo-600 hover:bg-indigo-500 inline-flex gap-2 justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+							>
+								<input
+									accept="image/*"
+									class="hidden"
+									name="avatar"
+									on:change={handleChange}
+									type="file"
+								/>
+								Add image
+							</label>
+						</div>
+
+						<label class="block text-sm text-gray-700">
+							<textarea
+								bind:value={taskIn.description}
+								class="p-2 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+								name="description"
+								placeholder="description"
+							/>
+						</label>
+					</DisclosurePanel>
+				</Transition>
+			</Disclosure>
 
 			<Select
 				bind:value={taskIn.category}

src/lib/components/task-form/service.ts

@@ -6,7 +6,7 @@ import type { EventDispatcher } from 'svelte';
 import { weekDays } from '$lib/components/days-checkbox/service';
 import { createModal } from '$lib/components/dialog/service';
 import { DATE, TIME } from '$lib/consts';
-import { db } from '$lib/firebase';
+import { db, storage } from '$lib/firebase';
 import {
 	add,
 	addMinutes,
@@ -26,6 +26,7 @@ import {
 	setDoc,
 	updateDoc,
 } from 'firebase/firestore';
+import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 
 export type TaskIn = Omit<Task, 'recurringExceptions'> & {
 	endTime: string;
@@ -166,7 +167,7 @@ export function editSingleRecurringEvent(
 
 	const newEvent = { ...event, date: targetDate };
 
-	addTask(newEvent, userId);
+	void addTask(newEvent, userId);
 
 	addExceptionToRecurring(id, recurringEvent, targetDate, userId);
 }
@@ -240,6 +241,8 @@ export async function addTask(data: Omit<AnyTask, 'id'>, userId: string) {
 	const taskRef = await addDoc(tasksCollectionRef, data);
 
 	await addTaskToGoal(userId, data, taskRef);
+
+	return taskRef.id;
 }
 
 async function deleteTaskFromGoal(userId: string, taskId: string, data: Omit<AnyTask, 'id'>) {
@@ -294,10 +297,16 @@ export async function removeTask(
 		if (result) {
 			addExceptionToRecurring(id, data as Omit<RecurringEvent, 'id'>, targetDate, userId);
 		} else {
-			deleteTask(id, data, userId);
+			void deleteTask(id, data, userId);
 		}
 	} else {
-		deleteTask(id, data, userId);
+		void deleteTask(id, data, userId);
 	}
 	dispatch('close');
 }
+
+export async function storeImage(userId: string, taskId: string, file: Blob): Promise<string> {
+	const avatarsRef = ref(storage, `users/${userId}/tasks/${taskId}`);
+	await uploadBytes(avatarsRef, file);
+	return await getDownloadURL(avatarsRef);
+}

src/lib/components/task-form/task-form.stories.svelte

@@ -13,8 +13,7 @@
 		argTypes: {},
 		component: TaskForm,
 	} satisfies Meta<TaskForm>;
-
-	</script>
+</script>
 
 <Template let:args>
 	<TaskForm {...args} {categories} on:close={() => console.log('closed')} userId="0" />

src/lib/user-utis.ts

@@ -1,7 +1,7 @@
 import { storage } from '$lib/firebase';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
 
-export async function storageAvatar(userId: string, file: Blob): Promise<string> {
+export async function storeAvatar(userId: string, file: Blob): Promise<string> {
 	const avatarsRef = ref(storage, `avatars/${userId}`);
 	await uploadBytes(avatarsRef, file);
 	return await getDownloadURL(avatarsRef);

src/routes/dashboard/profile/profile/Profile.svelte

@@ -4,7 +4,7 @@
 	import Button from '$lib/components/button/Button.svelte';
 	import Input from '$lib/components/input/Input.svelte';
 	import { db } from '$lib/firebase';
-	import { storageAvatar } from '$lib/user-utis';
+	import { storeAvatar } from '$lib/user-utis';
 	import { type Auth, updateProfile } from 'firebase/auth';
 	import { doc, updateDoc } from 'firebase/firestore';
 	import { minidenticon } from 'minidenticons';
@@ -44,7 +44,7 @@
 		isLoading = true;
 
 		if (file) {
-			photoURL = await storageAvatar(user.uid, file);
+			photoURL = await storeAvatar(user.uid, file);
 		}
 
 		await editProfile(user, displayName, photoURL);

src/routes/register/register/Register.svelte

@@ -4,7 +4,7 @@
 	import Button from '$lib/components/button/Button.svelte';
 	import { loginRoute, rootRoute } from '$lib/consts';
 	import { auth, db } from '$lib/firebase';
-	import { storageAvatar } from '$lib/user-utis';
+	import { storeAvatar } from '$lib/user-utis';
 	import { validator } from '@felte/validator-yup';
 	import { createForm } from 'felte';
 	import { FirebaseError } from 'firebase/app';
@@ -58,7 +58,7 @@
 	async function register({ displayName, email, password }: Omit<Account, 'photoURL'>) {
 		const { user } = await createUserWithEmailAndPassword(auth, email, password);
 
-		const photoURL = await storageAvatar(
+		const photoURL = await storeAvatar(
 			user.uid,
 			new Blob([avatar], { type: 'image/svg+xml;charset=utf-8' }),
 		);

static/manifest.json

@@ -1,10 +1,6 @@
 {
-	"name": "Waser Life",
-	"short_name": "Waser Life",
-	"start_url": "/",
-	"display": "standalone",
-	"theme_color": "#ff3e00",
 	"background_color": "#ffffff",
+	"display": "standalone",
 	"icons": [
 		{
 			"sizes": "256x256",
@@ -17,18 +13,22 @@
 			"type": "image/png"
 		}
 	],
+	"name": "Life",
 	"screenshots": [
 		{
-			"src": "screenshot1.png",
-			"type": "image/png",
+			"form_factor": "narrow",
 			"sizes": "2560x1440",
-			"form_factor": "narrow"
+			"src": "screenshot1.png",
+			"type": "image/png"
 		},
 		{
-			"src": "screenshot2.png",
-			"type": "image/png",
+			"form_factor": "wide",
 			"sizes": "2560x1440",
-			"form_factor": "wide"
+			"src": "screenshot2.png",
+			"type": "image/png"
 		}
-	]
+	],
+	"short_name": "Life",
+	"start_url": "/",
+	"theme_color": "#ff3e00"
 }