refactor: Use reactive instead of ref for models in store

frontend/src/App.vue

@@ -200,13 +200,13 @@ onMounted(async () => {
 		newest(newUser).then(data => {
 			const [news] = data;
 
-			if (news.value) {
+			if (news) {
 				if (newUser) {
 					openModal({ modal: "whatIsNew", props: { news } });
 				} else if (localStorage.getItem("whatIsNew")) {
 					if (
 						parseInt(localStorage.getItem("whatIsNew") as string) <
-						news.value.createdAt
+						news.createdAt
 					) {
 						openModal({
 							modal: "whatIsNew",
@@ -214,7 +214,7 @@ onMounted(async () => {
 						});
 						localStorage.setItem(
 							"whatIsNew",
-							news.value.createdAt.toString()
+							news.createdAt.toString()
 						);
 					}
 				} else {
@@ -222,7 +222,7 @@ onMounted(async () => {
 						localStorage.getItem("firstVisited") &&
 						parseInt(
 							localStorage.getItem("firstVisited") as string
-						) < news.value.createdAt
+						) < news.createdAt
 					)
 						openModal({
 							modal: "whatIsNew",
@@ -230,7 +230,7 @@ onMounted(async () => {
 						});
 					localStorage.setItem(
 						"whatIsNew",
-						news.value.createdAt.toString()
+						news.createdAt.toString()
 					);
 				}
 			}

frontend/src/components/AdvancedTable.vue

@@ -271,12 +271,12 @@ const subscribe = async () => {
 			try {
 				deleted = await events.subscribe(
 					`model.${props.model}.deleted.${row._id}`,
-					({ doc }) => {
+					({ oldDoc }) => {
 						const docRow = rows.value.find(
-							_row => _row._id === doc._id
+							_row => _row._id === oldDoc._id
 						);
 						const docRowIndex = rows.value.findIndex(
-							_row => _row._id === doc._id
+							_row => _row._id === oldDoc._id
 						);
 						console.log(34436, docRow, docRowIndex);
 

frontend/src/components/modals/EditNews.vue

@@ -118,8 +118,8 @@ onMounted(async () => {
 
 			setModelValues(data, ["markdown", "status", "showToNewUsers"]);
 
-			createdBy.value = data.value.createdBy;
-			createdAt.value = data.value.createdAt;
+			createdBy.value = data.createdBy;
+			createdAt.value = data.createdAt;
 		}
 
 		console.log(

frontend/src/composables/useForm.ts

@@ -1,4 +1,4 @@
-import { ref, computed, onMounted, onBeforeUnmount, Ref, watch } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
 import { useModalsStore } from "@/stores/modals";
 
 export const useForm = (
@@ -207,10 +207,7 @@ export const useForm = (
 		});
 	};
 
-	const setModelValues = (
-		model: Ref<Record<string, any>>,
-		keys: string[]
-	) => {
+	const setModelValues = (model: Record<string, any>, keys: string[]) => {
 		const getModelValue = (key, modelObject) => {
 			let value = JSON.parse(JSON.stringify(modelObject));
 			key.split(".").forEach(property => {
@@ -227,7 +224,7 @@ export const useForm = (
 			);
 		};
 
-		setMappedValues(model.value);
+		setMappedValues(model);
 
 		watch(model, setMappedValues);
 	};

frontend/src/pages/News.vue

@@ -83,7 +83,7 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(async () => {
-	await unregisterModels(news.value.map(model => model.value._id));
+	await unregisterModels(news.value.map(model => model._id));
 });
 </script>
 
@@ -95,7 +95,7 @@ onBeforeUnmount(async () => {
 			<div class="content-wrapper">
 				<h1 class="has-text-centered page-title">News</h1>
 				<div
-					v-for="{ value: item } in news"
+					v-for="item in news"
 					:key="item._id"
 					class="section news-item"
 				>

frontend/src/stores/models/model.ts

@@ -1,10 +1,10 @@
-import { Ref, ref } from "vue";
+import { reactive, ref } from "vue";
 import { useWebsocketStore } from "../websocket";
 
 export const createModelStore = modelName => {
 	const { runJob, subscribe, unsubscribe } = useWebsocketStore();
 
-	const models = ref<Ref<any>[]>([]);
+	const models = ref([]);
 	const permissions = ref(null);
 	const modelPermissions = ref({});
 	const subscriptions = ref({});
@@ -42,19 +42,15 @@ export const createModelStore = modelName => {
 	};
 
 	const onUpdated = async ({ doc }) => {
-		const index = models.value.findIndex(
-			model => model.value._id === doc._id
-		);
-		if (index > -1) models.value[index].value = doc;
+		const index = models.value.findIndex(model => model._id === doc._id);
+		if (index > -1) Object.assign(models.value[index], doc);
 
 		if (modelPermissions.value[doc._id])
 			await fetchUserModelPermissions(doc._id);
 	};
 
 	const onDeleted = async ({ oldDoc }) => {
-		const index = models.value.findIndex(
-			model => model.value._id === oldDoc._id
-		);
+		const index = models.value.findIndex(model => model._id === oldDoc._id);
 		if (index > -1) await unregisterModels(oldDoc._id);
 
 		if (modelPermissions.value[oldDoc._id])
@@ -65,10 +61,10 @@ export const createModelStore = modelName => {
 		Promise.all(
 			(Array.isArray(docs) ? docs : [docs]).map(async _doc => {
 				const existingRef = models.value.find(
-					model => model.value._id === _doc._id
+					model => model._id === _doc._id
 				);
 
-				const docRef = existingRef ?? ref(_doc);
+				const docRef = existingRef ?? reactive(_doc);
 
 				if (!existingRef) {
 					models.value.push(docRef);
@@ -107,7 +103,7 @@ export const createModelStore = modelName => {
 				async modelId => {
 					if (
 						models.value.findIndex(
-							model => model.value._id === modelId
+							model => model._id === modelId
 						) === -1
 					)
 						return;
@@ -119,9 +115,7 @@ export const createModelStore = modelName => {
 					await unsubscribe(deleted.channel, deleted.uuid);
 
 					models.value.splice(
-						models.value.findIndex(
-							model => model.value._id === modelId
-						),
+						models.value.findIndex(model => model._id === modelId),
 						1
 					);
 
@@ -134,9 +128,7 @@ export const createModelStore = modelName => {
 	const create = async query => runJob(`data.${modelName}.create`, { query });
 
 	const findById = async _id => {
-		const existingModel = models.value.find(
-			model => model.value._id === _id
-		);
+		const existingModel = models.value.find(model => model._id === _id);
 
 		if (existingModel) return existingModel;