wip: trpc

apps/client/src/routes/applications/[id]/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { appSession, status, t } from '$lib/store';
+	import { status, trpc } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
 	import type { LayoutData } from './$types';
 	import * as Buttons from './_components/Buttons';
@@ -12,13 +12,11 @@
 	const id = $page.params.id;
 	const application = data.application.data;
 
-	let currentPage = 'main';
+	$: isConfigurationView = $page.url.pathname.startsWith(`/applications/${id}/configuration/`);
+
 	let stopping = false;
 	let statusInterval: NodeJS.Timeout;
 
-	if ($page.url.pathname.startsWith(`/applications/${id}/configuration/`)) {
-		currentPage = 'configuration';
-	}
 	onMount(async () => {
 		await getStatus();
 		statusInterval = setInterval(async () => {
@@ -36,8 +34,7 @@
 		if (($status.application.loading && stopping) || $status.application.restarting === true)
 			return;
 		$status.application.loading = true;
-		$status.application.statuses = await t.applications.status.query({ id });
-
+		$status.application.statuses = await trpc.applications.status.query({ id });
 		let numberOfApplications = 0;
 		if (application.dockerComposeConfiguration) {
 			numberOfApplications =
@@ -80,7 +77,7 @@
 				<div>Configurations</div>
 			</div>
 		</div>
-		{#if currentPage === 'configuration'}
+		{#if isConfigurationView}
 			<Buttons.Delete {id} name={application.name} />
 		{/if}
 	</nav>
@@ -100,9 +97,9 @@
 </div>
 <div
 	class="mx-auto max-w-screen-2xl px-0 lg:px-10 grid grid-cols-1"
-	class:lg:grid-cols-4={!$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+	class:lg:grid-cols-4={!isConfigurationView}
 >
-	{#if !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+	{#if !isConfigurationView}
 		<nav class="header flex flex-col lg:pt-0 ">
 			<Menu {application} />
 		</nav>

apps/client/src/routes/applications/[id]/+layout.ts

@@ -1,5 +1,5 @@
 import { error } from '@sveltejs/kit';
-import { t } from '$lib/store';
+import { trpc } from '$lib/store';
 import type { LayoutLoad } from './$types';
 import { redirect } from '@sveltejs/kit';
 
@@ -27,7 +27,7 @@ export const load: LayoutLoad = async ({ params, url }) => {
 	const { pathname } = new URL(url);
 	const { id } = params;
 	try {
-		const application = await t.applications.getApplicationById.query({ id });
+		const application = await trpc.applications.getApplicationById.query({ id });
 		if (!application) {
 			throw redirect(307, '/applications');
 		}

apps/client/src/routes/applications/[id]/_components/Buttons/Delete.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { errorNotification } from '$lib/common';
-	import { appSession, t } from '$lib/store';
+	import { appSession, trpc } from '$lib/store';
 
 	export let id: string;
 	export let name: string;
@@ -11,7 +11,7 @@
 		const sure = confirm(`Are you sure you want to delete ${name}?`);
 		if (sure) {
 			try {
-				await t.applications.delete.mutate({ id, force });
+				await trpc.applications.delete.mutate({ id, force });
 				return await goto('/');
 			} catch (error) {
 				return errorNotification(error);

apps/client/src/routes/applications/[id]/_components/Buttons/Deploy.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { errorNotification } from '$lib/common';
 	export let id: string;
-	import { t } from '$lib/store';
+	import { trpc } from '$lib/store';
 	async function handleSubmit() {
 		try {
-			await t.applications.deploy.mutate({
+			await trpc.applications.deploy.mutate({
 				id
 			});
 		} catch (error) {

apps/client/src/routes/applications/[id]/_components/Buttons/ForceDeploy.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { errorNotification } from '$lib/common';
 	export let id: string;
-	import { t } from '$lib/store';
+	import { trpc } from '$lib/store';
 	async function handleSubmit() {
 		try {
-			await t.applications.forceRedeploy.mutate({
+			await trpc.applications.forceRedeploy.mutate({
 				id
 			});
 		} catch (error) {

apps/client/src/routes/applications/[id]/_components/Buttons/Restart.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { errorNotification } from '$lib/common';
 	export let id: string;
-	import { t } from '$lib/store';
+	import { trpc } from '$lib/store';
 
 	async function handleSubmit() {
 		try {
-			return await t.applications.restart.mutate({ id });
-		} catch(error) {
+			return await trpc.applications.restart.mutate({ id });
+		} catch (error) {
 			return errorNotification(error);
 		}
 	}

apps/client/src/routes/applications/[id]/_components/Buttons/Stop.svelte

@@ -2,16 +2,16 @@
 	import { createEventDispatcher } from 'svelte';
 
 	import { errorNotification } from '$lib/common';
-	import { t } from '$lib/store';
+	import { trpc } from '$lib/store';
 
 	export let id: string;
 
 	const dispatch = createEventDispatcher();
-	
+
 	async function handleSubmit() {
 		try {
 			dispatch('stopping');
-			await t.applications.stop.mutate({ id });
+			await trpc.applications.stop.mutate({ id });
 			dispatch('stopped');
 		} catch (error) {
 			return errorNotification(error);

apps/client/src/routes/applications/[id]/utils.ts

@@ -1,7 +1,7 @@
 import { goto } from '$app/navigation';
 import { errorNotification } from '$lib/common';
-import { t } from '$lib/store';
+import { trpc } from '$lib/store';
 
 export async function saveForm() {
-	return await t.applications.save.mutate();
+	return await trpc.applications.save.mutate();
 }