Fixes broken link when clicking on a subscription (#374)

parcelvoy · Mar 9, 2024 · 252e31e · 252e31e
1 parent 88c85f6
commit 252e31e
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 23 deletions.
diff --git a/apps/platform/src/subscriptions/Subscription.ts b/apps/platform/src/subscriptions/Subscription.ts
@@ -24,3 +24,4 @@ export class UserSubscription extends Model {
 }
 
 export type SubscriptionParams = Omit<Subscription, ModelParams>
+export type SubscriptionUpdateParams = Pick<SubscriptionParams, 'name'>
diff --git a/apps/platform/src/subscriptions/SubscriptionController.ts b/apps/platform/src/subscriptions/SubscriptionController.ts
@@ -2,8 +2,8 @@ import Router from '@koa/router'
 import App from '../app'
 import { RequestError } from '../core/errors'
 import { JSONSchemaType, validate } from '../core/validate'
-import Subscription, { SubscriptionParams, SubscriptionState, UserSubscription } from './Subscription'
-import { createSubscription, getSubscription, pagedSubscriptions, toggleSubscription, unsubscribe } from './SubscriptionService'
+import Subscription, { SubscriptionParams, SubscriptionState, SubscriptionUpdateParams, UserSubscription } from './Subscription'
+import { createSubscription, getSubscription, pagedSubscriptions, toggleSubscription, unsubscribe, updateSubscription } from './SubscriptionService'
 import SubscriptionError from './SubscriptionError'
 import { encodedLinkToParts } from '../render/LinkService'
 import { ProjectState } from '../auth/AuthMiddleware'
@@ -267,7 +267,7 @@ router.post('/', projectRoleMiddleware('admin'), async ctx => {
 
 router.param('subscriptionId', async (value, ctx, next) => {
     ctx.state.subscription = await getSubscription(parseInt(value), ctx.state.project.id)
-    if (!ctx.state.campaign) {
+    if (!ctx.state.subscription) {
         ctx.throw(404)
         return
     }
@@ -278,4 +278,21 @@ router.get('/:subscriptionId', async ctx => {
     ctx.body = ctx.state.subscription
 })
 
+export const subscriptionUpdateSchema: JSONSchemaType<SubscriptionUpdateParams> = {
+    $id: 'subscriptionUpdate',
+    type: 'object',
+    required: ['name'],
+    properties: {
+        name: {
+            type: 'string',
+        },
+    },
+    additionalProperties: false,
+}
+router.patch('/:subscriptionId', async ctx => {
+    console.log('got here?')
+    const payload = validate(subscriptionUpdateSchema, ctx.request.body)
+    ctx.body = await updateSubscription(ctx.state.subscription!.id, payload)
+})
+
 export default router
diff --git a/apps/platform/src/subscriptions/SubscriptionService.ts b/apps/platform/src/subscriptions/SubscriptionService.ts
@@ -56,6 +56,10 @@ export const createSubscription = async (projectId: number, params: Subscription
     })
 }
 
+export const updateSubscription = async (id: number, params: Partial<SubscriptionParams>): Promise<Subscription> => {
+    return await Subscription.updateAndFetch(id, params)
+}
+
 export const subscriptionForChannel = async (channel: ChannelType, projectId: number): Promise<Subscription | undefined> => {
     return await Subscription.first(qb => qb.where('channel', channel).where('project_id', projectId))
 }

diff --git a/apps/ui/src/api.ts b/apps/ui/src/api.ts
@@ -1,6 +1,6 @@
 import Axios from 'axios'
 import { env } from './config/env'
-import { Admin, AuthMethod, Campaign, CampaignCreateParams, CampaignLaunchParams, CampaignUpdateParams, CampaignUser, Image, Journey, JourneyEntranceDetail, JourneyStepMap, JourneyUserStep, List, ListCreateParams, ListUpdateParams, Locale, Metric, Organization, OrganizationUpdateParams, Project, ProjectAdmin, ProjectAdminInviteParams, ProjectAdminParams, ProjectApiKey, ProjectApiKeyParams, Provider, ProviderCreateParams, ProviderMeta, ProviderUpdateParams, QueueMetric, RuleSuggestions, SearchParams, SearchResult, Subscription, SubscriptionParams, Tag, Template, TemplateCreateParams, TemplatePreviewParams, TemplateProofParams, TemplateUpdateParams, User, UserEvent, UserSubscription } from './types'
+import { Admin, AuthMethod, Campaign, CampaignCreateParams, CampaignLaunchParams, CampaignUpdateParams, CampaignUser, Image, Journey, JourneyEntranceDetail, JourneyStepMap, JourneyUserStep, List, ListCreateParams, ListUpdateParams, Locale, Metric, Organization, OrganizationUpdateParams, Project, ProjectAdmin, ProjectAdminInviteParams, ProjectAdminParams, ProjectApiKey, ProjectApiKeyParams, Provider, ProviderCreateParams, ProviderMeta, ProviderUpdateParams, QueueMetric, RuleSuggestions, SearchParams, SearchResult, Subscription, SubscriptionCreateParams, SubscriptionParams, SubscriptionUpdateParams, Tag, Template, TemplateCreateParams, TemplatePreviewParams, TemplateProofParams, TemplateUpdateParams, User, UserEvent, UserSubscription } from './types'
 
 function appendValue(params: URLSearchParams, name: string, value: unknown) {
     if (typeof value === 'undefined' || value === null || typeof value === 'function') return
@@ -248,7 +248,7 @@ const api = {
             .then(r => r.data),
     },
 
-    subscriptions: createProjectEntityPath<Subscription>('subscriptions'),
+    subscriptions: createProjectEntityPath<Subscription, SubscriptionCreateParams, SubscriptionUpdateParams>('subscriptions'),
 
     providers: {
         all: async (projectId: number | string) => await client

diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
@@ -478,6 +478,8 @@ export interface Subscription {
     created_at: string
     updated_at: string
 }
+export type SubscriptionCreateParams = Pick<Subscription, 'name' | 'channel'>
+export type SubscriptionUpdateParams = Pick<SubscriptionCreateParams, 'name'>
 
 export type ProviderGroup = 'email' | 'text' | 'push' | 'webhook'
 export interface Provider {

diff --git a/apps/ui/src/views/settings/Subscriptions.tsx b/apps/ui/src/views/settings/Subscriptions.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useContext, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 import api from '../../api'
 import { ProjectContext } from '../../contexts'
 import FormWrapper from '../../ui/form/FormWrapper'
@@ -13,10 +12,9 @@ import { PlusIcon } from '../../ui/icons'
 import { snakeToTitle } from '../../utils'
 
 export default function Subscriptions() {
-    const navigate = useNavigate()
     const [project] = useContext(ProjectContext)
     const state = useSearchTableState(useCallback(async params => await api.subscriptions.search(project.id, params), [project]))
-    const [open, setOpen] = useState(false)
+    const [editing, setEditing] = useState<null | Partial<Subscription>>(null)
 
     return (
         <>
@@ -30,35 +28,37 @@ export default function Subscriptions() {
                     },
                 ]}
                 itemKey={({ item }) => item.id}
-                onSelectRow={(row) => navigate(`${row.id}`)}
+                onSelectRow={(row) => setEditing(row)}
                 title="Subscriptions"
                 actions={
                     <>
                         <Button
                             variant="primary"
                             icon={<PlusIcon />}
                             size="small"
-                            onClick={() => setOpen(true)}
+                            onClick={() => setEditing({ channel: 'email' })}
                         >
                             Create Subscription
                         </Button>
                     </>
                 }
             />
             <Modal
-                title="Create Subscription"
-                open={open}
-                onClose={() => setOpen(false)}
+                title={editing ? 'Update Subscription' : 'Create Subscription' }
+                open={Boolean(editing)}
+                onClose={() => setEditing(null)}
             >
-                <FormWrapper<Pick<Subscription, 'name' | 'channel'>>
-                    onSubmit={async ({ name, channel }) => {
-                        await api.subscriptions.create(project.id, { name, channel })
+                {editing && <FormWrapper<Pick<Subscription, 'id' | 'name' | 'channel'>>
+                    onSubmit={async ({ id, name, channel }) => {
+                        if (id) {
+                            await api.subscriptions.update(project.id, id, { name })
+                        } else {
+                            await api.subscriptions.create(project.id, { name, channel })
+                        }
                         await state.reload()
-                        setOpen(false)
-                    }}
-                    defaultValues={{
-                        channel: 'email',
+                        setEditing(null)
                     }}
+                    defaultValues={editing}
                 >
                     {
                         form => (
@@ -69,17 +69,17 @@ export default function Subscriptions() {
                                     required
                                     label="Name"
                                 />
-                                <SingleSelect.Field
+                                {!editing.id && <SingleSelect.Field
                                     form={form}
                                     name="channel"
                                     label="Channel"
                                     options={['email', 'push', 'text', 'webhook'].map((channel) => ({ key: channel, label: snakeToTitle(channel) }))}
                                     toValue={x => x.key}
-                                />
+                                />}
                             </>
                         )
                     }
-                </FormWrapper>
+                </FormWrapper>}
             </Modal>
         </>
     )
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,3 +24,4 @@ export class UserSubscription extends Model {
		}

		export type SubscriptionParams = Omit<Subscription, ModelParams>
		export type SubscriptionUpdateParams = Pick<SubscriptionParams, 'name'>