Split request upsert command

src-tauri/plugins/plugin.ts

@@ -1,5 +1 @@
-console.log('---------------------------');
+Deno.core.opAsync('op_hello', 'Deno');
-console.log('- 👋 Hello from plugin.ts -');
-console.log('---------------------------');
-
-Deno.core.opAsync('op_hello', 'World');

src-tauri/src/main.rs

@@ -23,8 +23,6 @@ use tokio::sync::Mutex;
 
 use window_ext::WindowExt;
 
-use crate::models::HttpRequestHeader;
-
 mod models;
 mod runtime;
 mod window_ext;
@@ -41,13 +39,13 @@ pub struct CustomResponse {
     pub status_reason: Option<&'static str>,
 }
 
-#[tauri::command]
+async fn migrate_db(db_instance: &Mutex<Pool<Sqlite>>) -> Result<(), String> {
-async fn load_db(db_instance: State<'_, Mutex<Pool<Sqlite>>>) -> Result<(), String> {
     let pool = &*db_instance.lock().await;
     let m = Migrator::new(Path::new("./migrations"))
         .await
         .expect("Failed to load migrations");
     m.run(pool).await.expect("Failed to run migrations");
+    println!("Migrations ran");
     Ok(())
 }
 
@@ -137,22 +135,49 @@ async fn send_request(
 }
 
 #[tauri::command]
-async fn upsert_request(
+async fn create_request(
-    id: Option<&str>,
     workspace_id: &str,
     name: &str,
-    url: &str,
-    body: Option<&str>,
-    headers: Vec<HttpRequestHeader>,
-    method: &str,
     db_instance: State<'_, Mutex<Pool<Sqlite>>>,
 ) -> Result<models::HttpRequest, String> {
     let pool = &*db_instance.lock().await;
-    models::upsert_request(id, workspace_id, name, method, body, url, headers, pool)
+    let headers = Vec::new();
+    models::upsert_request(None, workspace_id, name, "GET", None, "", headers, pool)
         .await
         .map_err(|e| e.to_string())
 }
 
+#[tauri::command]
+async fn update_request(
+    request: models::HttpRequest,
+    db_instance: State<'_, Mutex<Pool<Sqlite>>>,
+) -> Result<models::HttpRequest, String> {
+    let pool = &*db_instance.lock().await;
+
+    // TODO: Figure out how to make this better
+    let b2;
+    let body = match request.body {
+        Some(b) => {
+            b2 = b;
+            Some(b2.as_str())
+        }
+        None => None,
+    };
+
+    models::upsert_request(
+        Some(request.id.as_str()),
+        request.workspace_id.as_str(),
+        request.name.as_str(),
+        request.method.as_str(),
+        body,
+        request.url.as_str(),
+        request.headers.0,
+        pool,
+    )
+    .await
+    .map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 async fn requests(
     workspace_id: &str,
@@ -245,7 +270,9 @@ fn main() {
                     .connect(url.as_str())
                     .await
                     .expect("Failed to connect to database");
-                app.manage(Mutex::new(pool));
+                let m = Mutex::new(pool);
+                migrate_db(&m).await.expect("Failed to migrate database");
+                app.manage(m);
                 Ok(())
             })
         })
@@ -277,11 +304,11 @@ fn main() {
         })
         .invoke_handler(tauri::generate_handler![
             greet,
-            load_db,
             workspaces,
             requests,
             send_request,
-            upsert_request,
+            create_request,
+            update_request,
             responses,
             delete_response,
             delete_all_responses,

src-web/components/Button.tsx

@@ -42,7 +42,7 @@ export const Button = forwardRef(function Button<T extends ElementType>(
         justify === 'center' && 'justify-center',
         size === 'md' && 'h-10 px-4',
         size === 'sm' && 'h-8 px-3 text-sm',
-        size === 'xs' && 'h-6 px-2 text-sm',
+        size === 'xs' && 'h-7 px-3 text-sm',
         color === undefined && 'hover:bg-gray-500/[0.1] text-gray-800 hover:text-gray-900',
         color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 text-white',
         color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 text-white',

src-web/components/Editor/extensions.ts

@@ -47,12 +47,12 @@ export const myHighlightStyle = HighlightStyle.define([
     color: '#757b93',
     fontStyle: 'italic',
   },
-  { tag: [t.name, t.tagName, t.angleBracket, t.docString], color: '#4699de' },
+  { tag: [t.name, t.tagName, t.angleBracket, t.docString], color: 'hsl(var(--color-blue-500))' },
   { tag: [t.variableName], color: '#31c434' },
   { tag: [t.bool], color: '#e864f6' },
-  { tag: [t.attributeName], color: '#a773ff' },
+  { tag: [t.attributeName], color: 'hsl(var(--color-violet-500))' },
-  { tag: [t.attributeValue], color: '#ff964b' },
+  { tag: [t.attributeValue], color: 'hsl(var(--color-orange-500))' },
-  { tag: [t.string], color: '#e8b045' },
+  { tag: [t.string], color: 'hsl(var(--color-yellow-500))' },
   { tag: [t.keyword, t.meta], color: '#45e8a4' },
 ]);
 

src-web/components/Sidebar.tsx

@@ -31,7 +31,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
           onClick={() => createRequest.mutate({ name: 'Test Request' })}
         />
       </HStack>
-      <VStack as="ul" className="py-2" space={1}>
+      <VStack as="ul" className="py-3" space={1}>
         {requests.map((r) => (
           <SidebarItem key={r.id} request={r} active={r.id === activeRequestId} />
         ))}
@@ -42,12 +42,12 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ...
 
 function SidebarItem({ request, active }: { request: HttpRequest; active: boolean }) {
   return (
-    <li key={request.id} className="mx-2">
+    <li key={request.id} className="mx-3">
       <Button
         as={Link}
         to={`/workspaces/${request.workspaceId}/requests/${request.id}`}
         className={classnames('w-full', active && 'bg-gray-50')}
-        size="sm"
+        size="xs"
         justify="start"
       >
         {request.name}

src-web/hooks/useRequest.ts

@@ -17,8 +17,14 @@ export function useRequestUpdate(request: HttpRequest | null) {
       if (request == null) {
         throw new Error("Can't update a null request");
       }
-      // console.error('UPDATE REQUEST', patch);
+
-      const req = await invoke('upsert_request', { ...request, ...patch });
+      const updatedRequest = { ...request, ...patch } as any;
+
+      // TODO: Figure out why this is necessary
+      updatedRequest.createdAt = updatedRequest.createdAt.toISOString().replace('Z', '');
+      updatedRequest.updatedAt = updatedRequest.updatedAt.toISOString().replace('Z', '');
+
+      const req = await invoke('update_request', { request: updatedRequest });
       return convertDates(req as HttpRequest);
     },
     onSuccess: (req) => {
@@ -31,13 +37,9 @@ export function useRequestUpdate(request: HttpRequest | null) {
 
 export function useRequestCreate(workspaceId: string) {
   const queryClient = useQueryClient();
-  return useMutation<HttpRequest, unknown, Partial<Omit<HttpRequest, 'workspaceId'>>>({
+  return useMutation<HttpRequest, unknown, Pick<HttpRequest, 'name'>>({
     mutationFn: async (patch) => {
-      const req = await invoke('upsert_request', {
+      const req = await invoke('create_request', {
-        url: '',
-        method: 'GET',
-        name: 'New Request',
-        headers: [],
         ...patch,
         workspaceId,
       });

src-web/main.css

@@ -64,6 +64,28 @@ html, body, #root {
         --color-red-800: 0 84% 20%;
         --color-red-900: 0 84% 10%;
 
+        --color-orange-50: 25 95% 95%;
+        --color-orange-100: 25 95% 88%;
+        --color-orange-200: 25 95% 76%;
+        --color-orange-300: 25 95% 70%;
+        --color-orange-400: 25 95% 65%;
+        --color-orange-500: 25 95% 58%;
+        --color-orange-600: 25 95% 43%;
+        --color-orange-700: 25 95% 30%;
+        --color-orange-800: 25 95% 20%;
+        --color-orange-900: 25 95% 10%;
+
+        --color-yellow-50:  45 93% 95%;
+        --color-yellow-100: 45 93% 88%;
+        --color-yellow-200: 45 93% 76%;
+        --color-yellow-300: 45 93% 70%;
+        --color-yellow-400: 45 93% 65%;
+        --color-yellow-500: 45 93% 58%;
+        --color-yellow-600: 45 93% 43%;
+        --color-yellow-700: 45 93% 30%;
+        --color-yellow-800: 45 93% 20%;
+        --color-yellow-900: 45 93% 10%;
+
         --color-gray-50: 217 21% 95%;
         --color-gray-100: 217 21% 88%;
         --color-gray-200: 217 21% 76%;
@@ -100,15 +122,48 @@ html, body, #root {
 
         --color-violet-900: 258 90% 95%;
         --color-violet-800: 258 90% 88%;
-        --color-violet-700: 258 90% 76%;
+        --color-violet-700: 258 90% 79%;
-        --color-violet-600: 258 90% 70%;
+        --color-violet-600: 258 90% 74%;
-        --color-violet-500: 258 90% 65%;
+        --color-violet-500: 258 90% 70%;
         --color-violet-400: 258 90% 58%;
         --color-violet-300: 258 90% 43%;
         --color-violet-200: 258 90% 30%;
         --color-violet-100: 258 90% 20%;
         --color-violet-50: 258 90% 10%;
 
+        --color-red-900: 0 84% 95%;
+        --color-red-800: 0 84% 88%;
+        --color-red-700: 0 84% 76%;
+        --color-red-600: 0 84% 70%;
+        --color-red-500: 0 84% 65%;
+        --color-red-400: 0 84% 58%;
+        --color-red-300: 0 84% 43%;
+        --color-red-200: 0 84% 30%;
+        --color-red-100: 0 84% 20%;
+        --color-red-50: 0 84% 10%;
+
+        --color-orange-900: 25 95% 95%;
+        --color-orange-800: 25 95% 88%;
+        --color-orange-700: 25 95% 76%;
+        --color-orange-600: 25 95% 70%;
+        --color-orange-500: 25 95% 65%;
+        --color-orange-400: 25 95% 58%;
+        --color-orange-300: 25 95% 43%;
+        --color-orange-200: 25 95% 30%;
+        --color-orange-100: 25 95% 20%;
+        --color-orange-50: 25 95% 10%;
+
+        --color-yellow-900:  45 93% 95%;
+        --color-yellow-800: 45 93% 88%;
+        --color-yellow-700: 45 93% 76%;
+        --color-yellow-600: 45 93% 70%;
+        --color-yellow-500: 45 93% 65%;
+        --color-yellow-400: 45 93% 58%;
+        --color-yellow-300: 45 93% 43%;
+        --color-yellow-200: 45 93% 30%;
+        --color-yellow-100: 45 93% 20%;
+        --color-yellow-50: 45 93% 10%;
+
         --color-gray-900: 217 21% 95%;
         --color-gray-800: 217 21% 88%;
         --color-gray-700: 217 21% 76%;

src-web/main.tsx

@@ -14,9 +14,12 @@ import './main.css';
 
 setTheme();
 
+// WASM stuff
 await init();
 greet();
-await invoke('load_db');
+
+// Load the database
+// await invoke('load_db');
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([