Merge pull request #79 from EETagent/debounce

(frontend) debounce
This commit is contained in:
Vojtěch Jungmann 2022-12-06 00:20:24 +01:00 committed by GitHub
commit 9700e0788a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 9 deletions

View file

@ -39,6 +39,7 @@
"filedrop-svelte": "^0.1.2",
"fuse.js": "^6.6.2",
"isomorphic-dompurify": "^0.24.0",
"just-debounce-it": "^3.1.1",
"svelte-forms-lib": "^2.0.1",
"swiper": "^8.4.5",
"yup": "^0.32.11"

View file

@ -13,6 +13,7 @@ specifiers:
filedrop-svelte: ^0.1.2
fuse.js: ^6.6.2
isomorphic-dompurify: ^0.24.0
just-debounce-it: ^3.1.1
prettier: ^2.7.1
prettier-plugin-svelte: ^2.8.1
prettier-plugin-tailwindcss: ^0.2.0
@ -33,6 +34,7 @@ dependencies:
filedrop-svelte: 0.1.2
fuse.js: 6.6.2
isomorphic-dompurify: 0.24.0
just-debounce-it: 3.1.1
svelte-forms-lib: 2.0.1
swiper: 8.4.5
yup: 0.32.11
@ -40,7 +42,7 @@ dependencies:
devDependencies:
'@playwright/test': 1.25.0
'@sveltejs/adapter-auto': 1.0.0-next.90
'@sveltejs/kit': 1.0.0-next.571_svelte@3.53.1+vite@3.2.4
'@sveltejs/kit': 1.0.0-next.572_svelte@3.53.1+vite@3.2.4
'@typescript-eslint/eslint-plugin': 5.44.0_fnsv2sbzcckq65bwfk7a5xwslu
'@typescript-eslint/parser': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
eslint: 8.28.0
@ -188,8 +190,8 @@ packages:
import-meta-resolve: 2.2.0
dev: true
/@sveltejs/kit/1.0.0-next.571_svelte@3.53.1+vite@3.2.4:
resolution: {integrity: sha512-J+J0UXBiAh569l4ZxKm6eIZJS4lbcP8MgF9fU+DbVplCJ8nqo9wUmirUHZkJoBoB0FUlZSgA0R7N471MnUNNBw==}
/@sveltejs/kit/1.0.0-next.572_svelte@3.53.1+vite@3.2.4:
resolution: {integrity: sha512-PiKEr55L/uJyMKvDPdyoa5MlAYQwdgs8HLMbr28YcCBmhw/v6V7gutKOKdqeXc3YwKEFVS3z7TvW6c7eDokJdQ==}
engines: {node: '>=16.14'}
hasBin: true
requiresBuild: true
@ -202,7 +204,7 @@ packages:
cookie: 0.5.0
devalue: 4.2.0
kleur: 4.1.5
magic-string: 0.26.7
magic-string: 0.27.0
mime: 3.0.0
sade: 1.8.1
set-cookie-parser: 2.5.1
@ -1476,6 +1478,10 @@ packages:
resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
dev: true
/just-debounce-it/3.1.1:
resolution: {integrity: sha512-oPsuRyWp99LJaQ4KXC3A42tQNqkRTcPy0A8BCkRZ5cPCgsx81upB2KUrmHZvDUNhnCDKe7MshfTuWFQB9iXwDg==}
dev: false
/kleur/4.1.5:
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
engines: {node: '>=6'}
@ -1536,6 +1542,13 @@ packages:
sourcemap-codec: 1.4.8
dev: true
/magic-string/0.27.0:
resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.14
dev: true
/merge2/1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}

View file

@ -1,4 +1,6 @@
<script lang="ts">
import debounce from 'just-debounce-it';
import { apiDeltePortfolio, apiSubmitPortfolio } from '$lib/@api/candidate';
import Circles from '$lib/components/icons/Circles.svelte';
import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
@ -24,17 +26,17 @@
};
const handleNotificationClick = async () => {
if (status === "uploaded") {
if (status === 'uploaded') {
await submitPortfolio();
} else if (status === "submitted") {
} else if (status === 'submitted') {
await deletePortfolio();
}
}
};
</script>
<div class="card flex flex-col">
<div class="infoBar flex flex-row-reverse">
<StatusNotificationBig {loading} {status} on:click={handleNotificationClick} />
<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
</div>
<div class="relative flex flex-row justify-between">
<div>

View file

@ -1,5 +1,6 @@
<script lang="ts">
import FileType from './FileType.svelte';
import debounce from 'just-debounce-it';
import { filedrop, type FileDropOptions } from 'filedrop-svelte';
import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
import { createEventDispatcher } from 'svelte';
@ -105,7 +106,7 @@
{#if status === 'uploaded'}
<button
class="mr-3 rounded-xl bg-[#ef8b46] py-0.5 px-2 text-white shadow-md transition-all duration-300 hover:bg-orange-400"
on:click={() => dispatch('delete')}>Smazat</button
on:click={debounce(() => dispatch('delete'), 150)}>Smazat</button
>
{/if}
<StatusNotificationDot {status} />