feat: add cql back to sidebar (#17)

Closes: WORLD-967 ## Overview CQL endpoint was changed to `/cql` from `/query/game/cql` in [this pr](Argus-Labs/world-engine#674), so for a while it was gone from the sidebar. This PR just adds it back. ## Brief Changelog - add cql back to sidebar ## Testing and Verifying manually tested/verified
Argus-Labs · Mar 21, 2024 · a3da4d5 · a3da4d5
1 parent 7c5f704
commit a3da4d5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/src/components/sidebar/queries.tsx b/src/components/sidebar/queries.tsx
@@ -19,7 +19,7 @@ import {
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { useCardinal } from '@/lib/cardinal-provider'
-import { lastQueryQueryOptions } from '@/lib/query-options'
+import { lastCQLQueryOptions, lastQueryQueryOptions } from '@/lib/query-options'
 import { WorldField } from '@/lib/types'
 
 import { formatName } from './utils'
@@ -29,6 +29,13 @@ interface SidebarQueriesProps {
 }
 
 export function SidebarQueries({ queries }: SidebarQueriesProps) {
+  const cql: WorldField = {
+    name: 'CQL',
+    fields: {
+      CQL: 'string',
+    },
+  }
+
   return (
     <Accordion collapsible type="single" defaultValue="default">
       <AccordionItem value="default" className="border-0">
@@ -48,6 +55,7 @@ export function SidebarQueries({ queries }: SidebarQueriesProps) {
             </div>
           ) : (
             <Accordion collapsible type="single" className="space-y-2">
+              <Query query={cql} isCQL={true} />
               {queries.map((q, i) => (
                 <Query key={i} query={q} />
               ))}
@@ -59,11 +67,14 @@ export function SidebarQueries({ queries }: SidebarQueriesProps) {
   )
 }
 
+// the isCQL boolean field is probably a bad component design, but it works.
+// consider refactoring this later to be cleaner
 interface QueryProp {
   query: WorldField
+  isCQL?: boolean
 }
 
-function Query({ query }: QueryProp) {
+function Query({ query, isCQL }: QueryProp) {
   const { cardinalUrl, isCardinalConnected } = useCardinal()
   const queryClient = useQueryClient()
   // TODO: fix uncontrolled component error by adding default values here, tho we need to set the
@@ -72,15 +83,17 @@ function Query({ query }: QueryProp) {
 
   // @ts-ignore
   const handleSubmit = (values) => {
+    const queryOptionProps = {
+      cardinalUrl,
+      isCardinalConnected,
+      name: query.name,
+      body: values as object,
+    }
+    const queryOptions = isCQL
+      ? lastCQLQueryOptions(queryOptionProps)
+      : lastQueryQueryOptions(queryOptionProps)
     queryClient
-      .fetchQuery(
-        lastQueryQueryOptions({
-          cardinalUrl,
-          isCardinalConnected,
-          name: query.name,
-          body: values as object,
-        }),
-      )
+      .fetchQuery(queryOptions)
       .then(() => true)
       .catch((e) => console.log(e))
   }

diff --git a/src/lib/query-options.tsx b/src/lib/query-options.tsx
@@ -110,6 +110,26 @@ export const lastMessageQueryOptions = ({
   enabled: isCardinalConnected,
 })
 
+export const lastCQLQueryOptions = ({
+  cardinalUrl,
+  isCardinalConnected,
+  body,
+}: lastQueryOptionsProps) => ({
+  queryKey: ['last-query'],
+  queryFn: async () => {
+    const res = await fetch(`${cardinalUrl}/cql`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    if (!res.ok) {
+      throw new Error(`Failed to fetch ${cardinalUrl}/cql`)
+    }
+    return res.json()
+  },
+  enabled: isCardinalConnected,
+})
+
 interface personaQueryOptionsProps {
   cardinalUrl: string
   isCardinalConnected: boolean