Refactor stores

frontend/src/lib/api/cards.ts

@@ -1,5 +1,5 @@
-import type { TagValue } from "$lib/types/TagValue";
-import type { Card } from "$lib/types/Card";
+import type Card from '$lib/types/Card';
+import type TagValue from '$lib/types/TagValue';
 import api, { processError } from '../utils/api';
 import status from '../utils/status';
 

frontend/src/lib/api/tags.ts

@@ -1,5 +1,4 @@
-import type { TagOption } from "$lib/types/TagOption";
-import type { MeTag } from "$lib/types/MeTag";
+import type TagOption from '$lib/types/TagOption';
 import api, { processError } from '$lib/utils/api';
 import status from '$lib/utils/status';
 

frontend/src/lib/components/project/card/card.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import project_tags from '$lib/stores/project_tags';
-	import { currentDraggedCard, currentModalCard } from '$lib/stores/smallStore';
+	import currentDraggedCard from '$lib/stores/currentDraggedCard';
+	import currentModalCard from '$lib/stores/currentModalCard';
+	import project_tags from '$lib/stores/projectTags';
 	import type Card from '$lib/types/Card';
 	import ModalCard from './modal_card.svelte';
 

frontend/src/lib/components/project/card/modal_card.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import CloseIcon from '$lib/components/icons/closeIcon.svelte';
+	import cards from '$lib/stores/cards';
+	import currentModalCard from '$lib/stores/currentModalCard';
 	import type Card from '$lib/types/Card';
-	import { cards, currentModalCard } from '../../../stores/smallStore';
-	import CloseIcon from '../../icons/closeIcon.svelte';
 	import TrashIcon from '../../icons/trashIcon.svelte';
 	import ModalTags from './modal_tags.svelte';
 

frontend/src/lib/components/project/card/modal_tag/modal_new_tag.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { tick } from 'svelte';
-	import ModalTagTypes from './modal_tag_types.svelte';
-	import { toastAlert } from '$lib/utils/toasts';
-	import project_tags from '$lib/stores/project_tags';
 	import AddIcon from '$lib/components/icons/addIcon.svelte';
 	import Menu from '$lib/components/utils/menu.svelte';
+	import project_tags from '$lib/stores/projectTags';
+	import { toastAlert } from '$lib/utils/toasts';
+	import { tick } from 'svelte';
+	import ModalTagTypes from './modal_tag_types.svelte';
 
 	export let projectId: number;
 

frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+	import Menu from '$lib/components/utils/menu.svelte';
+	import project_tags from '$lib/stores/projectTags';
+	import type MeTag from '$lib/types/MeTag';
+	import { toastAlert } from '$lib/utils/toasts';
 	import { tick } from 'svelte';
 	import ModalTagTypes from './modal_tag_types.svelte';
-	import { toastAlert } from '$lib/utils/toasts';
-	import project_tags from '$lib/stores/project_tags';
-	import Menu from '$lib/components/utils/menu.svelte';
-	import type MeTag from '$lib/types/MeTag';
 
 	export let projectTag: MeTag;
 

frontend/src/lib/components/project/card/modal_tag/select_tags.svelte

@@ -2,8 +2,8 @@
 	import { updateCardTagApi } from '$lib/api/cards';
 	import TrashIcon from '$lib/components/icons/trashIcon.svelte';
 	import Menu from '$lib/components/utils/menu.svelte';
-	import project_tags from '$lib/stores/project_tags';
-	import { cards } from '$lib/stores/smallStore';
+	import cards from '$lib/stores/cards';
+	import project_tags from '$lib/stores/projectTags';
 	import type Card from '$lib/types/Card';
 	import type MeTag from '$lib/types/MeTag';
 	import type TagValue from '$lib/types/TagValue';

frontend/src/lib/components/project/card/modal_tags.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ProjectTags from '$lib/stores/project_tags';
+	import ProjectTags from '$lib/stores/projectTags';
 	import type Card from '$lib/types/Card';
 	import ModalTag from './modal_tag.svelte';
 	import ModalNewTag from './modal_tag/modal_new_tag.svelte';

frontend/src/lib/components/project/column.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
+	import cards from '$lib/stores/cards';
+	import currentDraggedCard from '$lib/stores/currentDraggedCard';
 	import type Card from '$lib/types/Card';
 	import type TagValue from '$lib/types/TagValue';
 	import { get } from 'svelte/store';
 	import { createCardTagApi, deleteCardTagApi, updateCardTagApi } from '../../api/cards';
 	import { updateTagAPI as updateTagOptionAPI } from '../../api/tags';
-	import projectTags from '../../stores/project_tags';
-	import { cards, currentDraggedCard } from '../../stores/smallStore';
+	import projectTags from '../../stores/projectTags';
 	import AddIcon from '../icons/addIcon.svelte';
-	import CardC from './card/card.svelte';
+	import CardComponent from './card/card.svelte';
 
 	export let projectId: number;
 	export let optionId: number | null = null;
@@ -100,7 +101,7 @@
 	</header>
 	<ul>
 		{#each columnCards as card}
-			<CardC {card} />
+			<CardComponent {card} />
 		{/each}
 	</ul>
 	<div

frontend/src/lib/components/project/header.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import cards from '$lib/stores/cards';
+	import currentView from '$lib/stores/currentView';
+	import views from '$lib/stores/views';
 	import type Project from '$lib/types/Project';
 	import type View from '$lib/types/View';
-	import projectTags from '../../stores/project_tags';
-	import { cards, currentView, views } from '../../stores/smallStore';
+	import projectTags from '../../stores/projectTags';
 	import GroupMenu from './card/header/menus/group_menu.svelte';
 	import SortMenu from './card/header/menus/sort_menu.svelte';
 

frontend/src/lib/components/project/project.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import projectTags from '$lib/stores/project_tags';
-	import { cards, currentView } from '$lib/stores/smallStore';
+	import cards from '$lib/stores/cards';
+	import currentView from '$lib/stores/currentView';
+	import projectTags from '$lib/stores/projectTags';
 	import type Project from '$lib/types/Project';
 	import type View from '$lib/types/View';
 	import { onMount } from 'svelte';

frontend/src/lib/components/sidebar.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import currentView from '$lib/stores/currentView';
+	import views from '$lib/stores/views';
 	import type Project from '$lib/types/Project';
 	import type View from '$lib/types/View';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import projectTags from '../stores/project_tags';
-	import { currentView, views } from '../stores/smallStore';
+	import projectTags from '../stores/projectTags';
 	import EditIcon from './icons/editIcon.svelte';
 	import MenuOpener from './icons/menu_opener.svelte';
 	import ViewIcon from './icons/viewIcon.svelte';
+
 	export let project: Project;
 
 	let viewEditId: number;

frontend/src/lib/stores/cards.ts

@@ -0,0 +1,53 @@
+import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
+import { getProjectCardsAPI } from '$lib/api/projects';
+import type Card from '$lib/types/Card';
+import type TagValue from '$lib/types/TagValue';
+import { writable } from 'svelte/store';
+import { parseCards } from '../utils/parser';
+import currentModalCard from './currentModalCard';
+
+const { subscribe, set, update } = writable([] as Card[]);
+
+async function init(projectId: number) {
+	getProjectCardsAPI(projectId).then((c) => {
+		set(parseCards(c));
+	});
+}
+
+async function add(projectId: number, tags: TagValue[]) {
+	await newCardApi(projectId, tags).then((card) => {
+		update((cards) => [...cards, card]);
+		currentModalCard.set(card.id);
+	});
+}
+
+async function remove(card: Card) {
+	await deleteCardApi(card.id).then(() => {
+		update((cards) => cards.filter((c) => c.id !== card.id));
+		currentModalCard.set(null);
+	});
+}
+
+async function edit(card: Card): Promise<boolean> {
+	if (await updateCardApi(card)) {
+		update((cards) => cards.map((c) => (c.id === card.id ? card : c)));
+		return true;
+	}
+	return false;
+}
+
+/**
+ * @deprecated The method should not be used. It is only used to force a reload of the cards.
+ */
+function reload() {
+	update((cards) => cards);
+}
+
+export default {
+	subscribe,
+	init,
+	add,
+	remove,
+	edit,
+	reload
+};

frontend/src/lib/stores/currentDraggedCard.ts

@@ -0,0 +1,9 @@
+import type Card from '$lib/types/Card';
+import { writable } from 'svelte/store';
+
+const { subscribe, set, update } = writable(null as Card | null);
+
+export default {
+	subscribe,
+	set
+};

frontend/src/lib/stores/currentModalCard.ts

@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+const { subscribe, set, update } = writable(null as number | null);
+
+export default {
+	subscribe,
+	set
+};

frontend/src/lib/stores/currentView.ts

@@ -0,0 +1,9 @@
+import type View from '$lib/types/View';
+import { writable } from 'svelte/store';
+
+const { subscribe, set, update } = writable(null as View | null);
+
+export default {
+	subscribe,
+	set
+};

frontend/src/lib/stores/projectTags.ts

@@ -3,7 +3,7 @@ import type TagOption from '$lib/types/TagOption';
 import api, { processError } from '$lib/utils/api';
 import status from '$lib/utils/status';
 import { get, writable } from 'svelte/store';
-import { cards } from './smallStore';
+import cards from './cards';
 
 const { subscribe, set, update } = writable({} as { [key: number]: MeTag });
 

frontend/src/lib/stores/smallStore.ts

@@ -1,159 +0,0 @@
-import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
-import { getProjectCardsAPI } from '$lib/api/projects';
-import type Card from '$lib/types/Card';
-import type TagValue from '$lib/types/TagValue';
-import type View from '$lib/types/View';
-import api, { processError } from '$lib/utils/api';
-import status from '$lib/utils/status';
-import { writable } from 'svelte/store';
-import { parseCards } from '../utils/parser';
-
-export const currentView = (() => {
-	const { subscribe, set, update } = writable(null as View | null);
-
-	return {
-		subscribe,
-		set
-		// update: async (view: View): Promise<boolean> => {
-		// 	const response = await api.put(`/v1/views/${view.id}`, view);
-
-		// 	if (response.status !== status.NoContent) {
-		// 		processError(response, 'Failed to update view');
-		// 		return false;
-		// 	}
-
-		// 	set(view);
-
-		// 	return true;
-		// }
-	};
-})();
-
-export const currentModalCard = writable(null as number | null);
-
-export const currentDraggedCard = writable(null as Card | null);
-
-export const cards = (() => {
-	const { subscribe, set, update } = writable([] as Card[]);
-
-	return {
-		subscribe,
-		init: async (projectId: number) => {
-			getProjectCardsAPI(projectId).then((c) => {
-				set(parseCards(c));
-			});
-		},
-		add: async (projectId: number, tags: TagValue[]) => {
-			await newCardApi(projectId, tags).then((card) => {
-				update((cards) => [...cards, card]);
-				currentModalCard.set(card.id);
-			});
-		},
-		remove: async (card: Card) => {
-			await deleteCardApi(card.id).then(() => {
-				update((cards) => cards.filter((c) => c.id !== card.id));
-				currentModalCard.set(null);
-			});
-		},
-		edit: async (card: Card): Promise<boolean> => {
-			if (await updateCardApi(card)) {
-				update((cards) => cards.map((c) => (c.id === card.id ? card : c)));
-				return true;
-			}
-			return false;
-		},
-		reload: () => {
-			update((cards) => cards);
-		}
-	};
-})();
-
-export const views = (() => {
-	const { subscribe, set, update } = writable([] as View[]);
-
-	const init = async (projectId: number): Promise<boolean> => {
-		const response = await api.get(`/v1/projects/${projectId}/views`);
-
-		if (response.status !== status.OK) {
-			processError(response, 'Failed to get views');
-			return false;
-		}
-
-		if (response.data) {
-			set(response.data);
-		}
-
-		return true;
-	};
-	const add = async (
-		projectId: number,
-		title: string,
-		primaryTagId: number | null
-	): Promise<View> => {
-		const response = await api.post(`/v1/views`, {
-			title,
-			project_id: projectId,
-			primary_tag_id: primaryTagId
-		});
-
-		if (response.status !== status.Created) {
-			processError(response, 'Failed to add view');
-			return Promise.reject();
-		}
-
-		const view: View = {
-			id: response.data.id,
-			title: title,
-			project_id: projectId,
-			primary_tag_id: primaryTagId,
-			secondary_tag_id: null,
-			sort_tag_id: null,
-			sort_direction: null
-		};
-
-		update((views) => [...views, view]);
-
-		return view;
-	};
-	const remove = async (view: View): Promise<boolean> => {
-		const response = await api.delete(`/v1/views/${view.id}`);
-
-		if (response.status !== status.NoContent) {
-			processError(response, 'Failed to delete view');
-			return false;
-		}
-
-		update((views) => views.filter((v) => v.id !== view.id));
-
-		return true;
-	};
-
-	const edit = async (view: View): Promise<boolean> => {
-		if (view.title === '') {
-			if (confirm('Are you sure you want to delete this view?')) {
-				return remove(view);
-			} else {
-				return false;
-			}
-		}
-
-		const response = await api.put(`/v1/views/${view.id}`, view);
-
-		if (response.status !== status.NoContent) {
-			processError(response, 'Failed to update view');
-			return false;
-		}
-
-		update((views) => views.map((v) => (v.id === view.id ? view : v)));
-
-		return true;
-	};
-
-	return {
-		subscribe,
-		init,
-		add,
-		remove,
-		edit
-	};
-})();

frontend/src/lib/stores/views.ts

@@ -0,0 +1,88 @@
+import type View from '$lib/types/View';
+import api, { processError } from '$lib/utils/api';
+import status from '$lib/utils/status';
+import { writable } from 'svelte/store';
+
+const { subscribe, set, update } = writable([] as View[]);
+
+async function init(projectId: number): Promise<boolean> {
+	const response = await api.get(`/v1/projects/${projectId}/views`);
+
+	if (response.status !== status.OK) {
+		processError(response, 'Failed to get views');
+		return false;
+	}
+
+	if (response.data) {
+		set(response.data);
+	}
+
+	return true;
+}
+async function add(projectId: number, title: string, primaryTagId: number | null): Promise<View> {
+	const response = await api.post(`/v1/views`, {
+		title,
+		project_id: projectId,
+		primary_tag_id: primaryTagId
+	});
+
+	if (response.status !== status.Created) {
+		processError(response, 'Failed to add view');
+		return Promise.reject();
+	}
+
+	const view: View = {
+		id: response.data.id,
+		title: title,
+		project_id: projectId,
+		primary_tag_id: primaryTagId,
+		secondary_tag_id: null,
+		sort_tag_id: null,
+		sort_direction: null
+	};
+
+	update((views) => [...views, view]);
+
+	return view;
+}
+async function remove(view: View): Promise<boolean> {
+	const response = await api.delete(`/v1/views/${view.id}`);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to delete view');
+		return false;
+	}
+
+	update((views) => views.filter((v) => v.id !== view.id));
+
+	return true;
+}
+
+async function edit(view: View): Promise<boolean> {
+	if (view.title === '') {
+		if (confirm('Are you sure you want to delete this view?')) {
+			return remove(view);
+		} else {
+			return false;
+		}
+	}
+
+	const response = await api.put(`/v1/views/${view.id}`, view);
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update view');
+		return false;
+	}
+
+	update((views) => views.map((v) => (v.id === view.id ? view : v)));
+
+	return true;
+}
+
+export default {
+	subscribe,
+	init,
+	add,
+	remove,
+	edit
+};

frontend/src/lib/types/Card.ts

@@ -1,4 +1,4 @@
-import type { TagValue } from './TagValue';
+import type TagValue from './TagValue';
 
 export default interface Card {
 	id: number;

frontend/src/lib/types/MeTag.ts

@@ -1,4 +1,4 @@
-import type { TagOption } from './TagOption';
+import type TagOption from './TagOption';
 
 export default interface MeTag {
 	id: number;