From ccb5d42faa085aeb8867f399265f137221e96258 Mon Sep 17 00:00:00 2001
From: Ota Prokopec <otaprokopec@gmail.com>
Date: Tue, 25 Apr 2023 20:23:07 +0200
Subject: [PATCH] much faster experience loading

---
 src/lib/components/Inputs/Input.svelte        | 81 ++++++++++++++++---
 src/lib/utils/database/experience.ts          | 26 +++---
 src/routes/authorization/login/log_in.svelte  | 16 +++-
 .../authorization/register/register.svelte    | 12 +--
 4 files changed, 100 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/Inputs/Input.svelte b/src/lib/components/Inputs/Input.svelte
index 0113fde..950c6a1 100644
--- a/src/lib/components/Inputs/Input.svelte
+++ b/src/lib/components/Inputs/Input.svelte
@@ -7,17 +7,16 @@
 	export let value = ''
 	export let placeholder = ''
 	export let id = elementIdGenerator()
-	export let podm = true
 	export let readOnly = false
 	export let maxLength = Infinity
-	export let icon: string | null = null
+	export let icon: string | null | boolean | undefined = null
 	export let iconFunction: 'password' = null
 	export let changedIconOnActive = icon
 	export let iconPosition: 'right' | 'left' = 'left'
 
 	//erant-new
 	export let autocomplete = ''
-	export let pattern: any = null
+	export let pattern: RegExp = null
 
 	export let prefix: string = ''
 	export let invisiblePrefix = icon ? true : false
@@ -46,16 +45,17 @@
 	let className: string = ''
 	export { className as class }
 
-	$: inputValue = pattern ? value.replace(pattern, '') : value //this is here because we always want to equal input.value = value
+	$: inputValue = /*pattern ? value.replace(pattern, '') :*/ value //this is here because we always want to equal input.value = value
 
 	$: prefixControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
+	$: patternControl(inputValue) //when inputValue changes => it will check prefix (so when we do $: inputValue = value this func will trigger every moment when inputValue will change and it will overwhite currect input.value thats will be {value})
 
 	const prefixControl = (_e) => {
 		if (prefix) {
 			if (!invisiblePrefix) {
-				if (inputValue?.indexOf(prefix) < 0) inputValue = `${prefix}${inputValue}`
+				if (inputValue?.indexOf(prefix) !== 0) inputValue = `${prefix}${inputValue}`
 				value = inputValue
-			} else if (inputValue?.indexOf(prefix) < 0) {
+			} else if (inputValue?.indexOf(prefix) !== 0) {
 				value = `${prefix}${inputValue}`
 				//inputValue = value.slice(prefix.length, value.length)
 			} else value = inputValue
@@ -64,8 +64,18 @@
 		}
 	}
 
+	const patternControl = (_e) => {
+		inputValue = inputValue.replace(pattern, '')
+	}
+
+	$: console.log(pattern?.test(inputValue))
+
+	let inputElement: HTMLElement = null
+
 	onMount(() => {
 		prefixControl('')
+		patternControl('')
+		inputElement = document.getElementById(id)
 	})
 
 	let iconActived = false
@@ -75,10 +85,55 @@
 		iconPushedCount++
 		iconActived = iconPushedCount % 2 === 1
 		dispatch('iconClick')
-		if (iconFunction === 'password') type = type === 'text' ? 'password' : 'text'
+		if (iconFunction === 'password') {
+			type = type === 'text' ? 'password' : 'text'
+			retype(inputElement)
+		}
+	}
+	const retype = (e: HTMLElement) => {
+		e.setAttribute('type', type)
 	}
 </script>
 
+<div class="relative w-full">
+	{#if icon}
+		<button
+			class={`absolute inset-y-0 ${iconPosition === 'left' ? 'left-0 pl-3' : 'right-0 pr-3'} flex items-center  pointer-events-none ${
+				!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'
+			} z-50 `}
+			on:click={iconClick}
+		>
+			{#if typeof icon === 'string'}
+				{#if iconActived}
+					{changedIconOnActive}
+				{:else}
+					{icon}
+				{/if}
+			{:else}
+				<slot active={iconActived} />
+			{/if}
+		</button>
+	{/if}
+
+	<input
+		use:retype
+		{id}
+		class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {icon
+			? iconPosition === 'left'
+				? 'pl-12'
+				: 'pr-12'
+			: ''} {className} {readOnly ? 'cursor-pointer' : ''}"
+		{placeholder}
+		bind:value={inputValue}
+		on:input
+		readonly={readOnly ? true : null}
+		maxlength={maxLength}
+		{...$$restProps}
+		{autocomplete}
+	/>
+</div>
+
+<!--
 {#if icon}
 	{#if iconPosition === 'left'}
 		<Input
@@ -89,12 +144,12 @@
 			{id}
 			{type}
 			bind:value={inputValue}
-			class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
+			class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none  {className} {readOnly ? 'cursor-pointer' : ''}"
 			color={!podm ? 'red' : null}
 			{placeholder}
 			on:input
 		>
-			<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="left">
+			<button class={`w-auto ${!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'} z-50 `} on:click={iconClick} slot="left">
 				{#if iconActived}
 					{changedIconOnActive}
 				{:else}
@@ -111,12 +166,12 @@
 			{id}
 			{type}
 			bind:value={inputValue}
-			class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
+			class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none  {className} {readOnly ? 'cursor-pointer' : ''}"
 			color={!podm ? 'red' : null}
 			{placeholder}
 			on:input
 		>
-			<button class={`w-auto pointer-events-auto z-50 `} on:click={iconClick} slot="right">
+			<button class={`w-auto ${!iconFunction ? 'pointer-events-none' : 'pointer-events-auto'} z-50 `} on:click={iconClick} slot="right">
 				{#if iconActived}
 					{changedIconOnActive}
 				{:else}
@@ -134,13 +189,13 @@
 		{id}
 		{type}
 		bind:value={inputValue}
-		class="input rounded-[24px] p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none {className} {readOnly ? 'cursor-pointer' : ''}"
+		class="input rounded-xl p-4 text-gray-900 border border-gray-300 text-left outline-none appearance-none  {className} {readOnly ? 'cursor-pointer' : ''}"
 		color={!podm ? 'red' : null}
 		{placeholder}
 		on:input
 	/>
 {/if}
-
+	-->
 <style>
 	.input::placeholder {
 		color: #8f8f8f;
diff --git a/src/lib/utils/database/experience.ts b/src/lib/utils/database/experience.ts
index f5d7a60..a976ff7 100644
--- a/src/lib/utils/database/experience.ts
+++ b/src/lib/utils/database/experience.ts
@@ -13,20 +13,24 @@ userStore.subscribe((res) => (user = res))
 
 //Loading of checkpoints and rating is done in the same function to prevent multiple requests to the database
 export const load = async (pathName: string, previewQuestionsCount?: number, preview?: Function) => {
-	let checkPoints: Array<CheckPoint> = []
 	// @ts-ignore
 	const experience: Experience = (await databases.listDocuments('63cef30d6da945dd4250', '63cef4bd210fdf2e5888', [Query.equal('ExpURL', pathName)])).documents[0]
 
 	const rating = await getRating(experience.$id)
 
-	for (let i = 0; i < Math.ceil(experience.ExpCPsID.length / 25); i++) {
-		const { documents, total } = await databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
-			Query.equal('$id', experience.ExpCPsID),
-			Query.limit(25),
-			Query.offset(i * 25),
-		])
-		checkPoints = [...checkPoints, ...documents]
-	}
+	const checkPointsDocument = (
+		await Promise.all(
+			new Array(Math.ceil(experience.ExpCPsID.length / 25)).fill(null).map((_lap, i) => {
+				return databases.listDocuments<Models.Document & CheckPoint>('63cef30d6da945dd4250', '63cef84d908acf805758', [
+					Query.equal('$id', experience.ExpCPsID),
+					Query.limit(25),
+					Query.offset(i * 25),
+				])
+			}),
+		)
+	)
+		.map((listItem) => listItem.documents)
+		.flat()
 
 	/*if (checkPointsIds.indexOf(checkPointId) === previewQuestionsCount - 1) {
 				experience['rating'] = rating
@@ -34,10 +38,8 @@ export const load = async (pathName: string, previewQuestionsCount?: number, pre
 				preview(experience)
 			}*/
 
-	console.log(checkPoints)
-
 	experience['rating'] = rating
-	experience['checkPoints'] = checkPoints
+	experience['checkPoints'] = checkPointsDocument
 
 	return experience
 }
diff --git a/src/routes/authorization/login/log_in.svelte b/src/routes/authorization/login/log_in.svelte
index bbe001a..b570cad 100644
--- a/src/routes/authorization/login/log_in.svelte
+++ b/src/routes/authorization/login/log_in.svelte
@@ -9,6 +9,8 @@
 	import { getErrorMessage } from '../utils/authorizationErrors'
 	import Button from '$lib/components/Buttons/Button.svelte'
 	import SocialLogin from '../Components/SocialLogin.svelte'
+	import Input from '$lib/components/Inputs/Input.svelte'
+	import Eye from '$lib/svg/Eye.svelte'
 
 	export let purpose = 'login' //possible values login, register
 
@@ -58,8 +60,18 @@
 			<Helper class="ml-4" color="red">{error}</Helper>
 		{/if}
 		<div class="inform">
-			<input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" required />
-			<HiddenInput bind:value={password} placeholder="Password" />
+			<Input bind:value={email} type="text" placeholder="E-mail" autocomplete="email" class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full" />
+			<Input
+				bind:value={password}
+				let:active
+				iconPosition="right"
+				icon
+				type="password"
+				placeholder="Password"
+				class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
+			>
+				<Eye {active} />
+			</Input>
 			<div class="forgot_password">
 				<a href="/forgot-password">Forgot password?</a>
 			</div>
diff --git a/src/routes/authorization/register/register.svelte b/src/routes/authorization/register/register.svelte
index c561cc6..d4978e3 100644
--- a/src/routes/authorization/register/register.svelte
+++ b/src/routes/authorization/register/register.svelte
@@ -24,10 +24,7 @@
 
 	let state: 'email-sent' | 'register' | 'loading' = 'register'
 	let error: string | null = null
-	$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked && nicknameIsValid
-
-	const pattern = /[^a-zA-Z0-9]/g
-	$: nicknameIsValid = pattern.test(erantId)
+	$: buttonCodition = name.length > 0 && email.length > 0 && password.length >= 8 && password === repeatPassword && erantId.length > 2 && termsChecked
 
 	const register = async () => {
 		//if (password === repeatPassword || name.length < 8 || email.length < 8) throw new Error('conditions are not fine')
@@ -54,6 +51,8 @@
 			state = 'register'
 		}
 	}
+
+	$: console.log(erantId)
 </script>
 
 {#if state !== 'email-sent'}
@@ -77,13 +76,10 @@
 						prefix="@"
 						placeholder="your_nickname"
 						class="p-3 border-1 rounded-[15px] bg-[#eeeeee] text-lg w-full"
-						{pattern}
+						pattern={/[^@a-zA-Z0-9]/g}
 						invisiblePrefix
 						icon="@"
 					/>
-					{#if !nicknameIsValid}
-						<Helper class="flex justify-start w-full pl-4" color="red">Your nickname can include only a-zA-Z0-9 characters</Helper>
-					{/if}
 				</div>
 				<Input
 					iconFunction="password"