Currently, I am working on developing a crew creator tool for a rowing club to provide some context.
The Writable container that holds the array is defined as follows
import { writable, Writable } from 'svelte/store';
import type { CrewMember } from '../types';
export default writable<Writable<CrewMember>[]>([], () => {
console.log('Subscriber Detected ON CREW MEMBERS');
return () => console.log('No More Subscribers ON CREW MEMBERS');
});
This is how I am removing a specific item from the array
members.update((currentList) => {
let tmp = currentList.filter((val) => {
if (val != mem) return true;
});
return tmp;
});
Where mem represents the Writable<CrewMember> passed into the delete function. I have also attempted deleting by ID without success so far.
The issue lies in the fact that while the code effectively removes the item from the list, it does not update the UI correctly. It consistently removes the last item in the table instead of the intended deletion, although this behavior is rectified upon page refresh since changes are pushed to a database.
Could the problem stem from the use of
Writable<Writable<CrewMember>[]>The following showcases the complete problematic code block
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { get } from 'svelte/store';
import type { Writable } from 'svelte/store';
import type { CrewMember } from '../../types';
import CrewMemberListItem from './CrewMemberListItem.svelte';
export let members: Writable<Writable<CrewMember>[]>;
export let pushToBuffer: { (mem: Writable<CrewMember>): void };
let unsubscribe: { (): void };
function deleteMember(mem: Writable<CrewMember>) {
let member = get(mem);
if (!confirm(`Are you sure that you want to delete ${member.name}?`))
return;
member.delete().then(() => {
members.update((currentList) =>
currentList.filter((val) => val != mem)
);
});
}
onMount(() => {
unsubscribe = members.subscribe(
(_updatedValue: Writable<CrewMember>[]) => {
// internalMembersBuffer = updatedValue;
}
);
});
onDestroy(() => {
unsubscribe();
});
</script>
<table id="member-editor-list">
<tr class="header">
<th>Gender</th>
<th>Age Group</th>
<th class="left">Name</th>
<th>Actions</th>
</tr>
{#each $members as member}
<CrewMemberListItem
{member}
{pushToBuffer}
deleteFunction={deleteMember}
/>
{/each}
</table>
To simplify, the CSS has been excluded