fix(createDialog): fix dialog selector & snake_case format for create…

… call (to REST API)

desktop-app/renderer/api/exchangeAccounts/exchangeAccount.ts

@@ -1,16 +1,18 @@
+import { convertInterfaceToSnakeCaseDict } from '@/api/request'
 import { request } from 'api/request'
 import { AxiosResponse } from 'axios'
 import { useSearchParams } from 'next/navigation'
 
-export interface ExchangeAccount {
+export interface BaseExchangeAccount {
   name: string
   description: string
   exchange: string
   testing: boolean
 }
-export interface RetreivedExchangeAccount extends ExchangeAccount {
+export interface ExchangeAccount extends BaseExchangeAccount {
   uuid: string
 }
+export interface RetreivedExchangeAccount extends ExchangeAccount {}
 
 export async function getExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>,
@@ -33,13 +35,14 @@ export async function listExchangeAccount(
 
 export async function createExchangeAccount(
   searchParams: ReturnType<typeof useSearchParams>,
-  data: ExchangeAccount
+  data: BaseExchangeAccount
 ): Promise<AxiosResponse<RetreivedExchangeAccount>> {
+  const formatedData = convertInterfaceToSnakeCaseDict(data)
   const response = await request(
     searchParams,
     'POST',
     '/api/exchange_account/',
-    data
+    formatedData
   )
   return response as AxiosResponse<RetreivedExchangeAccount>
 }

desktop-app/renderer/api/fleets/fleets.ts

@@ -1,3 +1,4 @@
+import { convertInterfaceToSnakeCaseDict } from '@/api/request'
 import { Bot } from 'api/bots/bots'
 import { request } from 'api/request'
 import { Wallet } from 'api/wallets/wallets'
@@ -57,8 +58,14 @@ export async function retrieveFleet(
 
 export async function createFleet(
   searchParams: ReturnType<typeof useSearchParams>,
-  fleet: BaseFleet
+  data: BaseFleet
 ): Promise<AxiosResponse<Fleet>> {
-  const response = await request(searchParams, 'POST', `/api/fleet/`, fleet)
+  const formatedData = convertInterfaceToSnakeCaseDict(data)
+  const response = await request(
+    searchParams,
+    'POST',
+    `/api/fleet/`,
+    formatedData
+  )
   return response as AxiosResponse<Fleet>
 }

desktop-app/renderer/api/request.ts

@@ -45,3 +45,19 @@ export function request(
     data: data || {}
   })
 }
+
+export function convertInterfaceToSnakeCaseDict(obj: any) {
+  // from camelCase to snake_case for REST API communication
+
+  return Object.entries(obj).reduce(
+    (acc, [key, value]) => {
+      const newKey = key.replace(
+        /[A-Z]/g,
+        (letter) => `_${letter.toLowerCase()}`
+      )
+      acc[newKey] = value
+      return acc
+    },
+    {} as Record<string, unknown>
+  )
+}

desktop-app/renderer/api/spaces/spaces.ts

@@ -1,9 +1,10 @@
+import { ExchangeAccount } from '@/api/exchangeAccounts/exchangeAccount'
+import { convertInterfaceToSnakeCaseDict } from '@/api/request'
 import { Fleet } from 'api/fleets/fleets'
 import { request } from 'api/request'
 import { Wallet } from 'api/wallets/wallets'
 import { AxiosResponse } from 'axios'
 import { useSearchParams } from 'next/navigation'
-
 interface Statistics {
   [key: string]: number
 }
@@ -36,9 +37,9 @@ export interface RetrievedNapseSpace extends BaseNapseSpace {
 
 export async function getPossibleExchangeAccounts(
   searchParams: ReturnType<typeof useSearchParams>
-): Promise<AxiosResponse<string[]>> {
+): Promise<AxiosResponse<ExchangeAccount[]>> {
   const response = await request(searchParams, 'GET', '/api/exchange_account/')
-  return response as AxiosResponse<string[]>
+  return response as AxiosResponse<ExchangeAccount[]>
 }
 
 export async function listSpace(
@@ -62,8 +63,14 @@ export async function retrieveSpace(
 
 export async function createSpace(
   searchParams: ReturnType<typeof useSearchParams>,
-  data: BaseNapseSpace
+  space: BaseNapseSpace
 ): Promise<AxiosResponse<NapseSpace>> {
-  const response = await request(searchParams, 'POST', '/api/space/', data)
+  const formated_space = convertInterfaceToSnakeCaseDict(space)
+  const response = await request(
+    searchParams,
+    'POST',
+    '/api/space/',
+    formated_space
+  )
   return response as AxiosResponse<NapseSpace>
 }

desktop-app/renderer/components/custom/selectedObject/inputs.tsx

@@ -31,7 +31,8 @@ export interface InputType<T extends Object> {
   value?: string | number | boolean
   description?: string
   disabled?: boolean
-  possibilities?: string[]
+  // possibilities?: string[]
+  possibilities?: { [key: string]: string }
 }
 
 function defaultValue(input: InputType<any>) {
@@ -120,15 +121,17 @@ export default function CustomForm<T extends Object>({
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          {input.possibilities?.map((possibility) => (
-                            <SelectItem
-                              key={possibility}
-                              value={possibility}
-                              disabled={input.disabled}
-                            >
-                              {possibility}
-                            </SelectItem>
-                          ))}
+                          {Object.entries(input.possibilities ?? []).map(
+                            ([name, value]) => (
+                              <SelectItem
+                                key={name}
+                                value={value}
+                                disabled={input.disabled}
+                              >
+                                {name}
+                              </SelectItem>
+                            )
+                          )}
                         </SelectContent>
                       </Select>
                     ) : (

desktop-app/renderer/pages/exchangeAccounts/createExchangeAccountDialog.tsx

@@ -12,7 +12,7 @@ import {
 import { DialogClose } from '@radix-ui/react-dialog'
 import { PlusIcon } from '@radix-ui/react-icons'
 import {
-  ExchangeAccount,
+  BaseExchangeAccount,
   RetreivedExchangeAccount,
   createExchangeAccount,
   getPossibleExchanges
@@ -21,7 +21,7 @@ import { useSearchParams } from 'next/navigation'
 import { useEffect, useState } from 'react'
 import { z } from 'zod'
 
-const defaultExchangeAccount: ExchangeAccount = {
+const defaultExchangeAccount: BaseExchangeAccount = {
   name: 'My Exchange Account',
   description: 'My Exchange Account Description',
   testing: true,
@@ -41,7 +41,7 @@ export default function CreateExchangeAccountDialog({
 }): JSX.Element {
   const searchParams = useSearchParams()
   const [possibleExchanges, setPossibleExchanges] = useState<string[]>([])
-  const [exchangeAccount, setExchangeAccount] = useState<ExchangeAccount>(
+  const [exchangeAccount, setExchangeAccount] = useState<BaseExchangeAccount>(
     defaultExchangeAccount
   )
   useEffect(() => {
@@ -60,6 +60,14 @@ export default function CreateExchangeAccountDialog({
     }
   }, [searchParams])
 
+  const ExchangePossibilitiesSelection = possibleExchanges.reduce(
+    (obj, name) => {
+      obj[name] = name
+      return obj
+    },
+    {} as { [key: string]: string }
+  )
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -80,7 +88,7 @@ export default function CreateExchangeAccountDialog({
             provide the server name and the server URL.
           </DialogDescription>
         </DialogHeader>
-        <CustomForm<ExchangeAccount>
+        <CustomForm<BaseExchangeAccount>
           inputs={[
             {
               label: 'Name',
@@ -100,7 +108,7 @@ export default function CreateExchangeAccountDialog({
               label: 'Exchange',
               key: 'exchange',
               type: 'select',
-              possibilities: possibleExchanges,
+              possibilities: ExchangePossibilitiesSelection,
               zod: z.string(),
               default: defaultExchangeAccount.exchange
             },

desktop-app/renderer/pages/fleets/createFleetDialog.tsx

@@ -64,6 +64,14 @@ export default function CreateFleetDialog({
     }
   }, [searchParams])
 
+  const SpacePossibilitiesSelection = possibleSpaces.reduce(
+    (obj, item) => {
+      obj[item.name] = item.uuid
+      return obj
+    },
+    {} as { [key: string]: string }
+  )
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -95,11 +103,10 @@ export default function CreateFleetDialog({
             {
               label: 'Space',
               key: 'space',
-              // type: 'select',
-              // possibilities: possibleSpaces,
-              type: 'input',
+              type: 'select',
+              possibilities: SpacePossibilitiesSelection,
               zod: z.string(),
-              default: defaultFleet.space
+              default: Object.values(SpacePossibilitiesSelection)[0]
             }
             // TODO: add & custom clusters
           ]}

desktop-app/renderer/pages/spaces/createSpaceDialog.tsx

@@ -1,3 +1,4 @@
+import { ExchangeAccount } from '@/api/exchangeAccounts/exchangeAccount'
 import CustomForm from '@/components/custom/selectedObject/inputs'
 import { Button } from '@/components/ui/button'
 import {
@@ -38,7 +39,7 @@ export default function CreateSpaceDialog({
 }): JSX.Element {
   const searchParams = useSearchParams()
   const [possibleExchangeAccounts, setPossibleExchangeAccounts] = useState<
-    string[]
+    ExchangeAccount[]
   >([])
   const [space, setSpace] = useState<BaseNapseSpace>(defaultSpace)
 
@@ -57,6 +58,14 @@ export default function CreateSpaceDialog({
     }
   }, [searchParams])
 
+  const ExchangeAccountPossibilitiesSelection = possibleExchangeAccounts.reduce(
+    (obj, item) => {
+      obj[item.name] = item.uuid
+      return obj
+    },
+    {} as { [key: string]: string }
+  )
+
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -96,11 +105,10 @@ export default function CreateSpaceDialog({
             {
               label: 'Exchange',
               key: 'exchangeAccount',
-              // type: 'select',
-              // possibilities: possibleExchangeAccounts,
-              type: 'input',
+              type: 'select',
+              possibilities: ExchangeAccountPossibilitiesSelection,
               zod: z.string(),
-              default: defaultSpace.exchangeAccount
+              default: Object.values(ExchangeAccountPossibilitiesSelection)[0]
             }
           ]}
           onSubmit={async (values) => {