Merge pull request #759 from appwrite/fix-svelte-errors

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>

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

@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
-    import { Button, Form, InputText } from '$lib/elements/forms';
-    import { onMount } from 'svelte';
-    import { topic } from './store';
-    import { invalidate } from '$app/navigation';
-    import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-
-    let description: string = null;
-    onMount(async () => {
-        description ??= $topic.description;
-    });
-    async function updateDescription() {
-        try {
-            await sdk.forProject.client.call(
-                'PATCH',
-                new URL(`${sdk.forProject.client.config.endpoint}/messaging/topics/${$topic.$id}`),
-                {
-                    'X-Appwrite-Project': sdk.forProject.client.config.project,
-                    'content-type': 'application/json',
-                    'X-Appwrite-Mode': 'admin'
-                },
-                {
-                    description
-                }
-            );
-            await invalidate(Dependencies.MESSAGING_TOPIC);
-            addNotification({
-                message: 'Description has been updated',
-                type: 'success'
-            });
-            trackEvent(Submit.MessagingTopicUpdateDescription);
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.MessagingTopicUpdateDescription);
-        }
-    }
-</script>
-
-<Form onSubmit={updateDescription}>
-    <CardGrid>
-        <Heading tag="h6" size="7">Description</Heading>
-
-        <svelte:fragment slot="aside">
-            <ul data-private>
-                <InputText
-                    id="description"
-                    label="Description"
-                    placeholder="Enter description"
-                    autocomplete={false}
-                    bind:value={description} />
-            </ul>
-        </svelte:fragment>
-
-        <svelte:fragment slot="actions">
-            <Button disabled={description === $topic.description} submit>Update</Button>
-        </svelte:fragment>
-    </CardGrid>
-</Form>

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

@@ -81,29 +81,33 @@
                     );
                     break;
                 case ProviderTypes.Push:
-                    const customData: Record<string, string> = {};
-                    const { data } = $messageParams[ProviderTypes.Push];
-                    if (data && data.length > 0) {
-                        data.forEach((item) => {
-                            if (item[0] === '') return;
-                            customData[item[0]] = item[1];
-                        });
-                    }
-
-                    response = await sdk.forProject.client.call(
-                        'POST',
-                        new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'),
-                        {
-                            'X-Appwrite-Project': sdk.forProject.client.config.project,
-                            'content-type': 'application/json',
-                            'X-Appwrite-Mode': 'admin'
-                        },
-                        {
-                            ...payload,
-                            data: customData,
-                            messageId
+                    {
+                        const customData: Record<string, string> = {};
+                        const { data } = $messageParams[ProviderTypes.Push];
+                        if (data && data.length > 0) {
+                            data.forEach((item) => {
+                                if (item[0] === '') return;
+                                customData[item[0]] = item[1];
+                            });
                         }
-                    );
+
+                        response = await sdk.forProject.client.call(
+                            'POST',
+                            new URL(
+                                sdk.forProject.client.config.endpoint + '/messaging/messages/push'
+                            ),
+                            {
+                                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                                'content-type': 'application/json',
+                                'X-Appwrite-Mode': 'admin'
+                            },
+                            {
+                                ...payload,
+                                data: customData,
+                                messageId
+                            }
+                        );
+                    }
                     break;
             }
             wizard.hide();
@@ -198,31 +202,33 @@
                     );
                     break;
                 case ProviderTypes.Push:
-                    const customData: Record<string, string> = {};
-                    const { data } = $messageParams[ProviderTypes.Push];
-                    if (data && data.length > 0) {
-                        data.forEach((item) => {
-                            if (item[0] === '') return;
-                            customData[item[0]] = item[1];
-                        });
-                    }
-
-                    response = await sdk.forProject.client.call(
-                        'PATCH',
-                        new URL(
-                            `${sdk.forProject.client.config.endpoint}/messaging/messages/push/${messageId}`
-                        ),
-                        {
-                            'X-Appwrite-Project': sdk.forProject.client.config.project,
-                            'content-type': 'application/json',
-                            'X-Appwrite-Mode': 'admin'
-                        },
-                        {
-                            ...payload,
-                            data: customData,
-                            messageId
+                    {
+                        const customData: Record<string, string> = {};
+                        const { data } = $messageParams[ProviderTypes.Push];
+                        if (data && data.length > 0) {
+                            data.forEach((item) => {
+                                if (item[0] === '') return;
+                                customData[item[0]] = item[1];
+                            });
                         }
-                    );
+
+                        response = await sdk.forProject.client.call(
+                            'PATCH',
+                            new URL(
+                                `${sdk.forProject.client.config.endpoint}/messaging/messages/push/${messageId}`
+                            ),
+                            {
+                                'X-Appwrite-Project': sdk.forProject.client.config.project,
+                                'content-type': 'application/json',
+                                'X-Appwrite-Mode': 'admin'
+                            },
+                            {
+                                ...payload,
+                                data: customData,
+                                messageId
+                            }
+                        );
+                    }
                     break;
             }
             wizard.hide();

src/routes/console/project-[project]/messaging/wizard/emailFormList.svelte

@@ -52,7 +52,6 @@
         createEmailMessage({
             topics: $messageParams[ProviderTypes.Email]?.topics || [],
             targets: $messageParams[ProviderTypes.Email]?.targets || [],
-            description: $messageParams[ProviderTypes.Email]?.description || 'Test message',
             status: MessageStatuses.PROCESSING,
             messageId: ID.unique(),
             // TODO: properly handle the test email address
@@ -126,13 +125,6 @@
             Enable the HTML mode if your message contains HTML tags.
         </svelte:fragment>
     </InputSwitch>
-    <InputText
-        id="description"
-        label="Description"
-        placeholder="Enter description"
-        tooltip="Provide a summary of the message. Users won't see this description."
-        bind:value={$messageParams[$providerType]['description']}>
-    </InputText>
     {#if $operation === 'create'}
         {#if !showCustomId}
             <div>

src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte

@@ -86,7 +86,6 @@
         createPushMessage({
             topics: $messageParams[ProviderTypes.Push]?.topics || [],
             targets: $messageParams[ProviderTypes.Push]?.targets || [],
-            description: $messageParams[ProviderTypes.Push]?.description || 'Test push',
             status: MessageStatuses.PROCESSING,
             messageId: ID.unique(),
             // TODO: properly handle the test email address
@@ -224,13 +223,6 @@
                 </Button>
             </div>
         </form>
-        <InputText
-            id="description"
-            label="Description"
-            placeholder="Enter description"
-            tooltip="Provide a summary of the message. Users won't see this description."
-            bind:value={$messageParams[$providerType]['description']}>
-        </InputText>
         {#if $operation === 'create'}
             {#if !showCustomId}
                 <div>

src/routes/console/project-[project]/messaging/wizard/smsFormList.svelte

@@ -23,14 +23,7 @@
         MessageStatuses,
         operation
     } from './store';
-    import {
-        Button,
-        FormList,
-        InputEmail,
-        InputRadio,
-        InputText,
-        InputTextarea
-    } from '$lib/elements/forms';
+    import { Button, FormList, InputEmail, InputRadio, InputTextarea } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { CustomId, Modal } from '$lib/components';
     import { user } from '$lib/stores/user';
@@ -51,7 +44,6 @@
         createSMSMessage({
             topics: $messageParams[ProviderTypes.Email]?.topics || [],
             targets: $messageParams[ProviderTypes.Email]?.targets || [],
-            description: $messageParams[ProviderTypes.Email]?.description || 'Test message',
             status: MessageStatuses.PROCESSING,
             messageId: ID.unique(),
             // TODO: properly handle the test email address
@@ -115,13 +107,6 @@
                 </svelte:fragment>
             </Modal>
         </div>
-        <InputText
-            id="description"
-            label="Description"
-            placeholder="Enter description"
-            tooltip="Provide a summary of the message. Users won't see this description."
-            bind:value={$messageParams[$providerType]['description']}>
-        </InputText>
         {#if $operation === 'create'}
             {#if !showCustomId}
                 <div>

src/routes/console/project-[project]/messaging/wizard/step3.svelte

@@ -100,4 +100,3 @@
         <Button secondary submit>Delete</Button>
     </svelte:fragment>
 </Modal> -->
-

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

@@ -1,6 +1,6 @@
 import type { Models } from '@appwrite.io/console';
-import { ProviderTypes } from '../providerType.svelte';
 import { writable } from 'svelte/store';
+import { ProviderTypes } from '../providerType.svelte';
 
 export enum MessageStatuses {
     DRAFT = 'draft',
@@ -15,7 +15,6 @@ export type MessageParams = {
     topics: string[];
     users: string[];
     targets: string[];
-    description: string;
     status: MessageStatuses;
     scheduledAt?: string;
 };