refactor: remove pocketbase (#1138)

ui/src/components/reaction/ReactionDisplay.vue

@@ -6,20 +6,22 @@ import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
 import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import ReactionForm from '@/components/reaction/ReactionForm.vue'
 import { Button } from '@/components/ui/button'
-import { toast } from '@/components/ui/toast'
+import { useToast } from '@/components/ui/toast/use-toast'
 
 import { ChevronLeft } from 'lucide-vue-next'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { pb } from '@/lib/pocketbase'
-import type { Reaction } from '@/lib/types'
+import { useAPI } from '@/api'
+import type { Reaction } from '@/client/models'
 import { handleError } from '@/lib/utils'
 
+const api = useAPI()
+
 const router = useRouter()
 const queryClient = useQueryClient()
+const { toast } = useToast()
 
 const props = defineProps<{
   id: string
@@ -32,65 +34,49 @@ const {
   error
 } = useQuery({
   queryKey: ['reactions', props.id],
-  queryFn: (): Promise<Reaction> => pb.collection('reactions').getOne(props.id)
+  queryFn: (): Promise<Reaction> => api.getReaction({ id: props.id })
 })
 
 const updateReactionMutation = useMutation({
-  mutationFn: (update: any) => pb.collection('reactions').update(props.id, update),
-  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['reactions'] }),
-  onError: handleError
-})
-
-onMounted(() => {
-  if (props.id) {
-    pb.collection('reactions').subscribe(props.id, (data) => {
-      if (data.action === 'delete') {
-        toast({
-          title: 'Reaction deleted',
-          description: 'The reaction has been deleted.',
-          variant: 'destructive'
-        })
-
-        router.push({ name: 'reactions' })
-
-        return
-      }
-
-      if (data.action === 'update') {
-        toast({
-          title: 'Reaction updated',
-          description: 'The reaction has been updated.'
-        })
-
-        queryClient.invalidateQueries({ queryKey: ['reactions', props.id] })
-      }
+  mutationFn: (update: any) => api.updateReaction({ id: props.id, reactionUpdate: update }),
+  onSuccess: () => {
+    toast({
+      title: 'Reaction updated',
+      description: 'The reaction has been updated successfully'
     })
-  }
+    queryClient.invalidateQueries({ queryKey: ['reactions'] })
+  },
+  onError: handleError('Failed to update reaction')
 })
 
-onUnmounted(() => {
-  if (props.id) {
-    pb.collection('reactions').unsubscribe(props.id)
-  }
+const deleteMutation = useMutation({
+  mutationFn: () => api.deleteReaction({ id: props.id }),
+  onSuccess: () => {
+    queryClient.removeQueries({ queryKey: ['reactions', props.id] })
+    queryClient.invalidateQueries({ queryKey: ['reactions'] })
+    toast({
+      title: 'Reaction deleted',
+      description: 'The reaction has been deleted successfully'
+    })
+    router.push({ name: 'reactions' })
+  },
+  onError: handleError('Failed to delete reaction')
 })
 </script>
 
 <template>
   <TanView :isError="isError" :isPending="isPending" :error="error">
     <ColumnHeader>
-      <Button @click="router.push({ name: 'reactions' })" variant="outline" class="sm:hidden">
+      <Button @click="router.push({ name: 'reactions' })" variant="outline" class="md:hidden">
         <ChevronLeft class="mr-2 size-4" />
         Back
       </Button>
       <div class="ml-auto">
         <DeleteDialog
           v-if="reaction"
-          collection="reactions"
-          :id="reaction.id"
           :name="reaction.name"
-          :singular="'Reaction'"
-          :to="{ name: 'reactions' }"
-          :queryKey="['reactions']"
+          singular="Reaction"
+          @delete="deleteMutation.mutate"
         />
       </div>
     </ColumnHeader>

ui/src/components/reaction/ReactionForm.vue

@@ -31,8 +31,10 @@ import { useQuery } from '@tanstack/vue-query'
 import { defineRule, useForm } from 'vee-validate'
 import { computed, ref, watch } from 'vue'
 
-import { pb } from '@/lib/pocketbase'
-import type { Reaction } from '@/lib/types'
+import { useAPI } from '@/api'
+import type { Reaction } from '@/client/models'
+
+const api = useAPI()
 
 const submitDisabledReason = ref<string>('')
 
@@ -46,14 +48,14 @@ const isDemo = ref(false)
 
 const { data: config } = useQuery({
   queryKey: ['config'],
-  queryFn: (): Promise<Record<string, Array<String>>> => pb.send('/api/config', {})
+  queryFn: () => api.getConfig()
 })
 
 watch(
   () => config.value,
   () => {
     if (!config.value) return
-    if (config.value['flags'].includes('demo')) {
+    if (config.value.flags.includes('demo')) {
       isDemo.value = true
     }
   },
@@ -87,7 +89,7 @@ defineRule('triggerdata.expression', (value: string) => {
   return 'Invalid cron expression'
 })
 
-defineRule('triggerdata.token', (value: string) => {
+defineRule('triggerdata.token', () => {
   return true
 })
 
@@ -251,8 +253,10 @@ const curlExample = computed(() => {
     cmd += ` -H "Authorization: Bearer ${values.triggerdata.token}"`
   }
 
+  const url = `${location.protocol}//${location.hostname}:${location.port}`
+
   if (values.triggerdata.path) {
-    cmd += ` https://${location.hostname}/reaction/${values.triggerdata.path}`
+    cmd += ` -d '{"foo":"bar"}' ${url}/reaction/${values.triggerdata.path}`
   }
 
   return cmd
@@ -304,8 +308,8 @@ const curlExample = computed(() => {
         <TriggerHookFormFields v-else-if="values.trigger === 'hook'" />
 
         <div v-if="values.trigger === 'webhook'">
-          <Label for="url">Usage</Label>
-          <Input id="url" readonly :modelValue="curlExample" class="bg-accent" />
+          <Label for="usage">Usage</Label>
+          <Input id="usage" readonly :modelValue="curlExample" class="bg-accent" />
         </div>
       </CardContent>
     </Card>

ui/src/components/reaction/ReactionList.vue

@@ -4,16 +4,16 @@ import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import ResourceListElement from '@/components/layout/ResourceListElement.vue'
 import { Button } from '@/components/ui/button'
 
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { onMounted } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 import { useRoute, useRouter } from 'vue-router'
 
-import { pb } from '@/lib/pocketbase'
-import type { Reaction } from '@/lib/types'
+import { useAPI } from '@/api'
+import type { Reaction } from '@/client/models'
+
+const api = useAPI()
 
 const route = useRoute()
 const router = useRouter()
-const queryClient = useQueryClient()
 
 const {
   isPending,
@@ -22,10 +22,7 @@ const {
   error
 } = useQuery({
   queryKey: ['reactions'],
-  queryFn: (): Promise<Array<Reaction>> =>
-    pb.collection('reactions').getFullList({
-      sort: '-created'
-    })
+  queryFn: (): Promise<Array<Reaction>> => api.listReactions()
 })
 
 const subtitle = (reaction: Reaction) =>
@@ -56,37 +53,29 @@ const reactionNiceName = (reaction: Reaction) => {
 const openNew = () => {
   router.push({ name: 'reactions', params: { id: 'new' } })
 }
-
-onMounted(() => {
-  pb.collection('reactions').subscribe('*', () => {
-    queryClient.invalidateQueries({ queryKey: ['reactions'] })
-  })
-})
 </script>
 
 <template>
   <TanView :isError="isError" :isPending="isPending" :error="error">
-    <ColumnHeader title="Reactions">
+    <ColumnHeader title="Reactions" show-sidebar-trigger>
       <div class="ml-auto">
         <Button variant="ghost" @click="openNew">New Reaction</Button>
       </div>
     </ColumnHeader>
-    <div class="mt-2 flex flex-1 flex-col gap-2 p-2 pt-0">
-      <TransitionGroup name="list" appear>
-        <ResourceListElement
-          v-for="reaction in reactions"
-          :key="reaction.id"
-          :title="reaction.name"
-          :created="reaction.created"
-          :subtitle="subtitle(reaction)"
-          description=""
-          :active="route.params.id === reaction.id"
-          :to="{ name: 'reactions', params: { id: reaction.id } }"
-          :open="false"
-        >
-          {{ reaction.name }}
-        </ResourceListElement>
-      </TransitionGroup>
+    <div class="mt-2 flex flex-1 flex-col gap-2 overflow-auto p-2 pt-0">
+      <ResourceListElement
+        v-for="reaction in reactions"
+        :key="reaction.id"
+        :title="reaction.name"
+        :created="reaction.created"
+        :subtitle="subtitle(reaction)"
+        description=""
+        :active="route.params.id === reaction.id"
+        :to="{ name: 'reactions', params: { id: reaction.id } }"
+        :open="false"
+      >
+        {{ reaction.name }}
+      </ResourceListElement>
     </div>
   </TanView>
 </template>

ui/src/components/reaction/ReactionNew.vue

@@ -4,32 +4,40 @@ import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
 import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import ReactionForm from '@/components/reaction/ReactionForm.vue'
 import { Button } from '@/components/ui/button'
+import { useToast } from '@/components/ui/toast/use-toast'
 
 import { ChevronLeft } from 'lucide-vue-next'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { useRouter } from 'vue-router'
 
-import { pb } from '@/lib/pocketbase'
-import type { Reaction, Ticket } from '@/lib/types'
+import { useAPI } from '@/api'
+import type { Reaction } from '@/client/models'
 import { handleError } from '@/lib/utils'
 
+const api = useAPI()
+
 const queryClient = useQueryClient()
 const router = useRouter()
+const { toast } = useToast()
 
 const addReactionMutation = useMutation({
-  mutationFn: (values: Reaction): Promise<Reaction> => pb.collection('reactions').create(values),
-  onSuccess: (data: Ticket) => {
+  mutationFn: (values: Reaction): Promise<Reaction> => api.createReaction({ newReaction: values }),
+  onSuccess: (data: Reaction) => {
     router.push({ name: 'reactions', params: { id: data.id } })
+    toast({
+      title: 'Reaction created',
+      description: 'The reaction has been created successfully'
+    })
     queryClient.invalidateQueries({ queryKey: ['reactions'] })
   },
-  onError: handleError
+  onError: handleError('Failed to create reaction')
 })
 </script>
 
 <template>
   <ColumnHeader>
-    <Button @click="router.push({ name: 'reactions' })" variant="outline" class="sm:hidden">
+    <Button @click="router.push({ name: 'reactions' })" variant="outline" class="md:hidden">
       <ChevronLeft class="mr-2 size-4" />
       Back
     </Button>