Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

wip: trpc

Browse Source
This commit is contained in:
Andras Bacsai 2022-12-13 12:54:57 +01:00
parent 1180d3fdde
commit abc614ecfd
15 changed files with 44 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/lib/store.ts
View File

@ -8,7 +8,7 @@ import cuid from 'cuid';
export const serverBaseUrl = dev ? `http://${browser && window.location.hostname}:2022` : ''; export const serverBaseUrl = dev ? `http://${browser && window.location.hostname}:2022` : '';
export let token: string = Cookies.get('token') || ''; export let token: string = Cookies.get('token') || '';
export const t = createTRPCProxyClient<AppRouter>({ export const trpc = createTRPCProxyClient<AppRouter>({
transformer: superjson, transformer: superjson,
links: [ links: [
httpBatchLink({ httpBatchLink({

2
apps/client/src/routes/+layout.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
export let data: LayoutData; export let data: LayoutData;
import type { LayoutData } from './$types'; import type { LayoutData } from './$types';
export const ssr = false;
import '../app.postcss'; import '../app.postcss';
import { appSession } from '$lib/store'; import { appSession } from '$lib/store';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';

6
apps/client/src/routes/+layout.ts
View File

@ -1,5 +1,5 @@
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import { t } from '$lib/store'; import { trpc } from '$lib/store';
import type { LayoutLoad } from './$types'; import type { LayoutLoad } from './$types';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
@ -10,14 +10,14 @@ export const load: LayoutLoad = async ({ url }) => {
try { try {
if (pathname === '/login' || pathname === '/register') { if (pathname === '/login' || pathname === '/register') {
const baseSettings = await t.settings.getBaseSettings.query(); const baseSettings = await trpc.settings.getBaseSettings.query();
return { return {
settings: { settings: {
...baseSettings ...baseSettings
} }
}; };
} }
const settings = await t.settings.getInstanceSettings.query(); const settings = await trpc.settings.getInstanceSettings.query();
if (settings.data.token) { if (settings.data.token) {
Cookies.set('token', settings.data.token); Cookies.set('token', settings.data.token);
} }

21
apps/client/src/routes/+page.svelte
View File

@ -6,8 +6,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { asyncSleep, errorNotification, getRndInteger } from '$lib/common'; import { asyncSleep, errorNotification, getRndInteger } from '$lib/common';
import { appSession, search, t } from '$lib/store'; import { appSession, search, trpc } from '$lib/store';
import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte'; import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte'; import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte'; import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
@ -156,7 +155,7 @@
let isRunning = false; let isRunning = false;
let isDegraded = false; let isDegraded = false;
if (buildPack || simpleDockerfile) { if (buildPack || simpleDockerfile) {
const response = await t.applications.status.query({ id }); const response = await trpc.applications.status.query({ id });
if (response.length === 0) { if (response.length === 0) {
isRunning = false; isRunning = false;
} else if (response.length === 1) { } else if (response.length === 1) {
@ -178,7 +177,7 @@
} }
} }
} else if (typeof dualCerts !== 'undefined') { } else if (typeof dualCerts !== 'undefined') {
const response = await t.services.status.query({ id }); const response = await trpc.services.status.query({ id });
if (Object.keys(response).length === 0) { if (Object.keys(response).length === 0) {
isRunning = false; isRunning = false;
} else { } else {
@ -198,7 +197,7 @@
} }
} }
} else { } else {
const response = await t.databases.status.query({ id }); const response = await trpc.databases.status.query({ id });
isRunning = response.isRunning; isRunning = response.isRunning;
} }
@ -382,7 +381,7 @@
'Are you sure? This will delete all UNCONFIGURED applications and their data.' 'Are you sure? This will delete all UNCONFIGURED applications and their data.'
); );
if (sure) { if (sure) {
await t.applications.cleanup.query(); await trpc.applications.cleanup.query();
return window.location.reload(); return window.location.reload();
} }
} catch (error) { } catch (error) {
@ -395,7 +394,7 @@
'Are you sure? This will delete all UNCONFIGURED services and their data.' 'Are you sure? This will delete all UNCONFIGURED services and their data.'
); );
if (sure) { if (sure) {
await t.services.cleanup.query(); await trpc.services.cleanup.query();
return window.location.reload(); return window.location.reload();
} }
} catch (error) { } catch (error) {
@ -408,7 +407,7 @@
'Are you sure? This will delete all UNCONFIGURED databases and their data.' 'Are you sure? This will delete all UNCONFIGURED databases and their data.'
); );
if (sure) { if (sure) {
await t.databases.cleanup.query(); await trpc.databases.cleanup.query();
return window.location.reload(); return window.location.reload();
} }
} catch (error) { } catch (error) {
@ -419,7 +418,7 @@
try { try {
const sure = confirm('Are you sure? This will delete this application!'); const sure = confirm('Are you sure? This will delete this application!');
if (sure) { if (sure) {
await t.applications.delete.mutate({ id, force: true }); await trpc.applications.delete.mutate({ id, force: true });
return window.location.reload(); return window.location.reload();
} }
} catch (error) { } catch (error) {
@ -430,7 +429,7 @@
try { try {
const sure = confirm('Are you sure? This will delete this service!'); const sure = confirm('Are you sure? This will delete this service!');
if (sure) { if (sure) {
await t.services.delete.mutate({ id }); await trpc.services.delete.mutate({ id });
// await del(`/services/${id}`, {}); // await del(`/services/${id}`, {});
return window.location.reload(); return window.location.reload();
} }
@ -442,7 +441,7 @@
try { try {
const sure = confirm('Are you sure? This will delete this database!'); const sure = confirm('Are you sure? This will delete this database!');
if (sure) { if (sure) {
await t.databases.delete.mutate({ id, force: true }); await trpc.databases.delete.mutate({ id, force: true });
return window.location.reload(); return window.location.reload();
} }
} catch (error) { } catch (error) {

4
apps/client/src/routes/+page.ts
View File

@ -1,5 +1,5 @@
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
import { t } from '$lib/store'; import { trpc } from '$lib/store';
import type { LayoutLoad } from './$types'; import type { LayoutLoad } from './$types';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
@ -7,7 +7,7 @@ export const ssr = false;
export const load: LayoutLoad = async ({ url }) => { export const load: LayoutLoad = async ({ url }) => {
try { try {
return await t.dashboard.resources.query(); return await trpc.dashboard.resources.query();
} catch (err) { } catch (err) {
throw error(500, { throw error(500, {
message: 'An unexpected error occurred, please try again later.' message: 'An unexpected error occurred, please try again later.'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
apps/client/src/routes/login/+page.svelte
View File

@ -3,7 +3,7 @@
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { appSession, loginEmail, t } from '$lib/store'; import { appSession, loginEmail, trpc } from '$lib/store';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
let loading = false; let loading = false;
let emailEl: HTMLInputElement; let emailEl: HTMLInputElement;
@ -18,7 +18,7 @@
async function handleSubmit() { async function handleSubmit() {
loading = true; loading = true;
try { try {
const { token } = await t.auth.login.mutate({ email, password }); const { token } = await trpc.auth.login.mutate({ email, password });
Cookies.set('token', token, { Cookies.set('token', token, {
path: '/' path: '/'
}); });

4
apps/client/src/routes/register/+page.svelte
View File

@ -2,7 +2,7 @@
export let userCount: number; export let userCount: number;
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { appSession, loginEmail, t } from '$lib/store'; import { appSession, loginEmail, trpc } from '$lib/store';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
if (!$appSession.isRegistrationEnabled) { if (!$appSession.isRegistrationEnabled) {
@ -29,7 +29,7 @@
} }
loading = true; loading = true;
try { try {
const payload = await t.auth.register.mutate({ email, password }); const payload = await trpc.auth.register.mutate({ email, password });
Cookies.set('token', payload.token, { Cookies.set('token', payload.token, {
path: '/' path: '/'
}); });