Fix svelte errors

.github/workflows/tests.yml

@@ -18,7 +18,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v3
               with:
-                  node-version: 18
+                  node-version: 20
             - name: Audit dependencies
               run: npm audit --audit-level low
             - name: Install dependencies

src/lib/constants.ts

@@ -237,7 +237,8 @@ export const scopes: {
     },
     {
         scope: 'subscribers.write',
-        description: "Access to create, update, and delete your project's messaging topic subscribers",
+        description:
+            "Access to create, update, and delete your project's messaging topic subscribers",
         category: 'Messaging'
     },
     {

src/lib/helpers/types.ts

@@ -29,3 +29,10 @@ export type Column = {
      */
     filter?: boolean;
 };
+
+export function isValueOfStringEnum<T extends Record<string, string>>(
+    enumType: T,
+    value: string
+): value is T[keyof T] {
+    return Object.values<string>(enumType).includes(value);
+}

src/routes/console/project-[project]/auth/user-[user]/targets/+page.ts

@@ -1,9 +1,9 @@
-import { Query, type Models } from '@appwrite.io/console';
-import { sdk } from '$lib/stores/sdk';
-import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { queries, queryParamToMap } from '$lib/components/filters';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { getLimit, getPage, getQuery, getSearch, pageToOffset } from '$lib/helpers/load';
+import { sdk } from '$lib/stores/sdk';
+import { Query, type Models } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
-import { queryParamToMap, queries } from '$lib/components/filters';
 
 export const load: PageLoad = async ({ params, url, route, depends }) => {
     depends(Dependencies.USER_TARGETS);
@@ -42,7 +42,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
         payload
     );
 
-    const promisesById: Record<string, Promise<any>> = {};
+    const promisesById: Record<string, Promise<Models.Provider>> = {};
     targets.targets.forEach((target) => {
         if (target.providerId && !promisesById[target.providerId]) {
             promisesById[target.providerId] = sdk.forProject.client.call(

src/routes/console/project-[project]/messaging/+page.ts

@@ -1,3 +1,5 @@
+import { queries, queryParamToMap } from '$lib/components/filters';
+import { CARD_LIMIT } from '$lib/constants';
 import {
     View,
     getLimit,
@@ -7,11 +9,9 @@ import {
     getView,
     pageToOffset
 } from '$lib/helpers/load';
-import { CARD_LIMIT } from '$lib/constants';
-import type { PageLoad } from './$types';
-import { Query, type Models } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
-import { queries, queryParamToMap } from '$lib/components/filters';
+import { Query, type Models } from '@appwrite.io/console';
+import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ url, route }) => {
     const page = getPage(url);
@@ -26,7 +26,10 @@ export const load: PageLoad = async ({ url, route }) => {
 
     // TODO: remove when the API is ready with data
     // This allows us to mock w/ data and when search returns 0 results
-    let messages: { messages: Models.Message[]; total: number } = { messages: [], total: 0 };
+    let messages: {
+        messages: ({ data: Record<string, string> } & Models.Message)[];
+        total: number;
+    } = { messages: [], total: 0 };
     const params = {
         queries: [
             Query.limit(limit),

src/routes/console/project-[project]/messaging/message-[message]/+page.svelte

@@ -18,10 +18,14 @@
     import { wizard } from '$lib/stores/wizard';
     import Wizard from '../wizard.svelte';
     import type { PageData } from './$types';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
 
     export let data: PageData;
 
     async function onEdit() {
+        if (!isValueOfStringEnum(ProviderTypes, $message.providerType)) {
+            throw new Error(`Invalid provider type: ${$message.providerType}`);
+        }
         $operation = 'update';
         $providerType = $message.providerType;
         $topicsById = {};
@@ -35,7 +39,6 @@
             topics: $message.topics,
             users: $message.users,
             targets: $message.targets,
-            description: $message.description,
             status: MessageStatuses.DRAFT,
             scheduledAt: $message.scheduledAt
         };

src/routes/console/project-[project]/messaging/message-[message]/emailPreview.svelte

@@ -3,7 +3,7 @@
     import { Button, FormList, InputText, InputTextarea } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
 
-    export let message: Models.Message & { data: Record<string, string>; };
+    export let message: Models.Message & { data: Record<string, string> };
     export let onEdit: () => void = null;
 </script>
 

src/routes/console/project-[project]/messaging/message-[message]/pushPreview.svelte

@@ -4,7 +4,7 @@
     import type { Models } from '@appwrite.io/console';
     import PushPhone from '../pushPhone.svelte';
 
-    export let message: Models.Message & { data: Record<string, string>; };
+    export let message: Models.Message & { data: Record<string, string> };
     export let onEdit: () => void = null;
 </script>
 

src/routes/console/project-[project]/messaging/message-[message]/smsPreview.svelte

@@ -4,7 +4,7 @@
     import type { Models } from '@appwrite.io/console';
     import SMSPhone from '../smsPhone.svelte';
 
-    export let message: Models.Message & { data: Record<string, string>; };
+    export let message: Models.Message & { data: Record<string, string> };
     export let onEdit: () => void = null;
 </script>
 

src/routes/console/project-[project]/messaging/message-[message]/store.ts

@@ -2,4 +2,7 @@ import { derived } from 'svelte/store';
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 
-export const message = derived(page, ($page) => $page.data.message as Models.Message);
+export const message = derived(
+    page,
+    ($page) => $page.data.message as Models.Message & { data: Record<string, string> }
+);

src/routes/console/project-[project]/messaging/providerType.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <script lang="ts">
-    import type { Models } from "@appwrite.io/console";
+    import type { Models } from '@appwrite.io/console';
 
     export let type: ProviderTypes | Models.Provider['type'];
     export let noIcon = false;

src/routes/console/project-[project]/messaging/providers/createProviderDropdown.svelte

@@ -7,13 +7,9 @@
     import { providerType, provider } from './wizard/store';
     import { ProviderTypes } from '../providerType.svelte';
     import { Providers } from '../provider.svelte';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
 
     export let showCreateDropdown = false;
-
-    const isValueOfStringEnum = <T extends Record<string, string>>(
-        enumType: T,
-        value: string
-    ): value is T[keyof T] => Object.values<string>(enumType).includes(value);
 </script>
 
 <DropList bind:show={showCreateDropdown} scrollable placement="bottom-end">

src/routes/console/project-[project]/messaging/providers/provider-[provider]/updateStatus.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { onMount } from 'svelte';
-    import { provider } from './store';
-    import { sdk } from '$lib/stores/sdk';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import { invalidate } from '$app/navigation';
-    import Provider, { Providers } from '../../provider.svelte';
-    import ProviderType from '../../providerType.svelte';
-    import { provider as wizardProvider, providerType, providerParams } from '../wizard/store';
+    import { sdk } from '$lib/stores/sdk';
     import { wizard } from '$lib/stores/wizard';
+    import { onMount } from 'svelte';
+    import Provider, { Providers } from '../../provider.svelte';
+    import ProviderType, { ProviderTypes } from '../../providerType.svelte';
     import Update from '../update.svelte';
+    import { providerParams, providerType, provider as wizardProvider } from '../wizard/store';
+    import { provider } from './store';
 
     let enabled: boolean = null;
 
@@ -22,6 +23,13 @@
     });
 
     function configure() {
+        if (!isValueOfStringEnum(ProviderTypes, $provider.type)) {
+            throw new Error(`Invalid provider type: ${$provider.type}`);
+        }
+
+        if (!isValueOfStringEnum(Providers, $provider.provider)) {
+            throw new Error(`Invalid provider: ${$provider.provider}`);
+        }
         $providerType = $provider.type;
         $wizardProvider = $provider.provider;
 

src/routes/console/project-[project]/messaging/providers/store.ts

@@ -1,10 +1,8 @@
-import { writable } from 'svelte/store';
 import type { Column } from '$lib/helpers/types';
+import { writable } from 'svelte/store';
 import { Providers } from '../provider.svelte';
 import { ProviderTypes } from '../providerType.svelte';
 
-export let showCreate = writable(false);
-
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Provider ID', type: 'string', show: true },
     { id: 'name', title: 'Name', type: 'string', show: true },

src/routes/console/project-[project]/messaging/providers/wizard/store.ts

@@ -1,7 +1,6 @@
-import type { Models } from '@appwrite.io/console';
+import { writable } from 'svelte/store';
 import type { Providers } from '../../provider.svelte';
 import type { ProviderTypes } from '../../providerType.svelte';
-import { writable } from 'svelte/store';
 
 type ProviderParams = {
     providerId: string;
@@ -84,8 +83,8 @@ export type MQTTProviderParams = ProviderParams & {
     serverKey: string;
 };
 
-export const providerType = writable<Models.Provider['type']>(null);
-export const provider = writable<Models.Provider['provider']>(null);
+export const providerType = writable<ProviderTypes>(null);
+export const provider = writable<Providers>(null);
 export const providerParams = writable<{
     twilio: Partial<TwilioProviderParams>;
     msg91: Partial<Msg91ProviderParams>;

src/routes/console/project-[project]/messaging/store.ts

@@ -6,7 +6,6 @@ export const showCreate = writable(false);
 
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Message ID', type: 'string', show: true, width: 140 },
-    { id: 'description', title: 'Description', type: 'string', show: true, width: 140 },
     { id: 'message', title: 'Message', type: 'string', show: false, filter: false, width: 140 },
     { id: 'providerType', title: 'Type', type: 'string', show: true, width: 100 },
     { id: 'status', title: 'Status', type: 'string', show: true, width: 120 },

src/routes/console/project-[project]/messaging/topics/create.svelte

@@ -12,7 +12,7 @@
 
     const dispatch = createEventDispatcher();
 
-    let name: string, description: string, id: string, error: string;
+    let name: string, id: string, error: string;
     let showCustomId = false;
 
     const create = async () => {
@@ -27,12 +27,10 @@
                 },
                 {
                     name,
-                    description: description || undefined,
                     topicId: id ?? ID.unique()
                 }
             );
             name = '';
-            description = '';
             showCreate = false;
             showCustomId = false;
             addNotification({
@@ -64,12 +62,6 @@
             autofocus={true}
             required
             bind:value={name} />
-        <InputText
-            id="description"
-            label="Description"
-            placeholder="Enter description"
-            bind:value={description}>
-        </InputText>
         {#if !showCustomId}
             <div>
                 <Pill button on:click={() => (showCustomId = !showCustomId)}

src/routes/console/project-[project]/messaging/topics/store.ts

@@ -6,7 +6,6 @@ export const showCreate = writable(false);
 export const columns = writable<Column[]>([
     { id: '$id', title: 'Topic ID', type: 'string', show: true, width: 140 },
     { id: 'name', title: 'Name', type: 'string', show: true, width: 140 },
-    { id: 'description', title: 'Description', type: 'string', show: true, width: 140 },
     { id: 'total', title: 'Subscribers', type: 'integer', show: true, width: 140 },
     { id: '$createdAt', title: 'Created', type: 'datetime', show: true, width: 140 }
 ]);

src/routes/console/project-[project]/messaging/topics/topic-[topic]/+page.svelte

@@ -2,13 +2,11 @@
     import { Container } from '$lib/layout';
     import DangerZone from './dangerZone.svelte';
     import Details from './details.svelte';
-    import UpdateDescription from './updateDescription.svelte';
     import UpdateName from './updateName.svelte';
 </script>
 
 <Container>
     <Details />
     <UpdateName />
-    <UpdateDescription />
     <DangerZone />
 </Container>