Develop (#102)

* update

* use only one job

* Fix image upload input hover effect

* Recipes page adjustment

src/lib/components/ImageUploadInput.svelte

@@ -85,7 +85,7 @@
 >
 	<label for="recipeImage">
 		{#if fileReader?.readyState != 1}
-			<div>
+			<div class="h-100 flex-column justify-center">
 				Seleccionar o arrastrar una imagen
 				<div class="icon">
 					<Icon name="upload" width="32" height="32" />

src/routes/admin/editar-recetas/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import type { Recipe } from '$lib/types/Recipe';
 	import type { PaginatedList } from '$lib/types/PaginatedList';
-	import { Pagination, TextInput, slugify } from '$lib';
-	import { browser } from '$app/environment';
+	import { Pagination, TextInput, slugify } from '$lib';;
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';

src/routes/recetas/+page.svelte

@@ -1,26 +1,31 @@
 <script lang="ts">
 	import type { Recipe } from '$lib/types/Recipe';
 	import { onDestroy } from 'svelte';
-	import { recipes } from '../../stores/recipes';
-	import {
-		CircularLoading,
-		Pagination,
-		RecipeCard,
-		RecipesSearchForm,
-		SearchEmpty,
-	} from '$lib';
+	import { initialState, recipes } from '../../stores/recipes';
+	import { CircularLoading, Pagination, RecipeCard, RecipesSearchForm, SearchEmpty } from '$lib';
 	import type { PaginatedList } from '$lib/types/PaginatedList';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
 	export let data: PaginatedList<Recipe>;
 
+	$: {
+		recipes.update((store) => {
+			return {
+				...store,
+				recipes: data.data,
+				pagination: data.pagination,
+				loading: false
+			};
+		});
+	}
+
 	function onPageClick(page: number) {
 		const newUrl = new URL($page.url);
 		newUrl?.searchParams?.set('pagina', page.toString());
 
-		window.scrollTo(0, 0);
 		goto(newUrl);
+		window.scrollTo(0, 0);
 	}
 
 	function onPerPageChange(perPage: number) {
@@ -32,21 +37,9 @@
 		goto(newUrl);
 	}
 
-
-	$: if (data.pagination?.pageNumber) {
-		recipes.update((store) => {
-			return {
-				...store,
-				recipes: data.data,
-				pagination: data.pagination,
-				loading: false
-			};
-		});
-	}
-
 	onDestroy(() => {
 		recipes.update((store) => {
-			return { ...store, page: undefined, perPage: undefined };
+			return initialState;
 		});
 	});
 </script>

src/stores/recipes.ts

@@ -6,18 +6,20 @@ import { get, writable } from 'svelte/store';
 
 type RecipesStoreWithParameters = RecipeParameters & RecipesStore;
 
+export const initialState = {
+	recipes: undefined,
+	pagination: null,
+	loading: false,
+	name: '',
+	difficulties: [],
+	ingredients: [],
+	onlyVegetarian: false,
+	page: undefined,
+	perPage: undefined
+};
+
 export function createRecipes() {
-	const store = writable<RecipesStoreWithParameters>({
-		recipes: undefined,
-		pagination: null,
-		loading: false,
-		name: '',
-		difficulties: [],
-		ingredients: [],
-		onlyVegetarian: false,
-		page: undefined,
-		perPage: undefined
-	});
+	const store = writable<RecipesStoreWithParameters>(initialState);
 
 	async function loadRecipes() {
 		toggleLoading();