refactor: query loading

Author: dancixx

src-tauri/src/drivers/pgsql.rs

@@ -13,11 +13,43 @@ use crate::{utils::reflective_get, AppState};
 #[tauri::command(rename_all = "snake_case")]
 pub async fn pgsql_connector(
   project_id: &str,
-  key: &str,
+  key: Option<&str>,
   app: AppHandle,
 ) -> Result<ProjectConnectionStatus> {
   let app_state = app.state::<AppState>();
-  let connection = tokio_time::timeout(tokio_time::Duration::from_secs(10), connect(key, NoTls))
+  let mut clients = app_state.client.lock().await;
+
+  // check if connection already exists
+  if clients.as_ref().unwrap().contains_key(project_id) {
+    tracing::info!("Postgres connection already exists!");
+    return Ok(ProjectConnectionStatus::Connected);
+  }
+
+  let key = match key {
+    Some(key) => key.to_string(),
+    None => {
+      let projects_db = app_state.project_db.lock().await;
+      let projects_db = projects_db.as_ref().unwrap();
+      let project_details = projects_db.get(project_id).unwrap().unwrap().to_vec();
+      let project_details = String::from_utf8(project_details).unwrap();
+      let project_details = project_details.split(":").collect::<Vec<&str>>();
+      let project_details = project_details
+        .into_iter()
+        .skip(1)
+        .map(|s| {
+          let kv = s.split('=').collect::<Vec<&str>>();
+          kv[1].to_owned()
+        })
+        .collect::<Vec<String>>();
+      let project_details = format!(
+        "user={} password={} host={} port={}",
+        project_details[0], project_details[1], project_details[2], project_details[3]
+      );
+      project_details
+    }
+  };
+
+  let connection = tokio_time::timeout(tokio_time::Duration::from_secs(10), connect(&key, NoTls))
     .await
     .map_err(|_| PostgresqlError::ConnectionTimeout);
 
@@ -52,7 +84,6 @@ pub async fn pgsql_connector(
     return Ok(ProjectConnectionStatus::Failed);
   }
 
-  let mut clients = app_state.client.lock().await;
   let clients = clients.as_mut().unwrap();
   clients.insert(project_id.to_string(), client);
 

src/dashboard/query_editor.rs

@@ -68,7 +68,7 @@ pub fn QueryEditor(index: usize) -> impl IntoView {
   let run_query = create_action(move |tabs_store: &Arc<Mutex<TabsStore>>| {
     let tabs_store = tabs_store.clone();
     async move {
-      tabs_store.lock().await.run_query().await.unwrap();
+      tabs_store.lock().await.run_query().await;
     }
   });
 
@@ -84,31 +84,34 @@ pub fn QueryEditor(index: usize) -> impl IntoView {
 
   view! {
       <div _ref=node_ref class="border-b-1 border-neutral-200 h-72 sticky">
-          <AddCustomQuery show=show/>
           <div class="absolute bottom-0 items-center text-xs flex justify-between px-4 left-0 w-full h-10 bg-gray-50">
               <Show when=move || active_project().is_some() fallback=|| view! { <div></div> }>
+                  <AddCustomQuery show=show project_id=active_project().unwrap()/>
                   <div class="appearance-auto py-1 px-2 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md">
                       {active_project}
                   </div>
               </Show>
-              <div class="flex flex-row gap-2">
-                  <button
-                      class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
-                      on:click=move |_| show.set(true)
-                  >
-                      "Save Query"
-                  </button>
-                  <button
-                      class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
-                      on:click={
-                          let tabs_store = tabs_store_arc.clone();
-                          move |_| run_query.dispatch(tabs_store.clone())
-                      }
-                  >
+              <Show when=move || active_project().is_some() fallback=|| view! { <div></div> }>
+
+                  <div class="flex flex-row gap-2">
+                      <button
+                          class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
+                          on:click=move |_| show.set(true)
+                      >
+                          "Save Query"
+                      </button>
+                      <button
+                          class="p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md"
+                          on:click={
+                              let tabs_store = tabs_store_arc.clone();
+                              move |_| run_query.dispatch(tabs_store.clone())
+                          }
+                      >
 
-                      "Query"
-                  </button>
-              </div>
+                          "Query"
+                      </button>
+                  </div>
+              </Show>
           </div>
       </div>
   }

src/databases/pgsql/driver.rs

@@ -53,7 +53,7 @@ impl<'a> Pgsql<'a> {
       Invoke::PgsqlConnector.as_ref(),
       &InvokePgsqlConnectorArgs {
         project_id: &self.project_id.get(),
-        key: connection_string.as_str(),
+        key: Some(&connection_string),
       },
     )
     .await

src/databases/pgsql/index.rs

@@ -1,3 +1,5 @@
+use std::rc::Rc;
+
 use leptos::*;
 use leptos_icons::*;
 use leptos_toaster::{Toast, ToastId, ToastVariant, Toasts};
@@ -8,6 +10,7 @@ use common::enums::ProjectConnectionStatus;
 
 #[component]
 pub fn Pgsql(project_id: String) -> impl IntoView {
+  let project_id = Rc::new(project_id);
   let tabs_store = expect_context::<TabsStore>();
   let projects_store = expect_context::<ProjectsStore>();
   let project_details = projects_store.select_project_by_name(&project_id).unwrap();
@@ -25,7 +28,7 @@ pub fn Pgsql(project_id: String) -> impl IntoView {
     .collect::<Vec<String>>();
   let connection_params = Box::leak(connection_params.into_boxed_slice());
   // [user, password, host, port]
-  let mut pgsql = Pgsql::new(project_id.clone());
+  let mut pgsql = Pgsql::new(project_id.clone().to_string());
   {
     pgsql.load_connection_details(
       &connection_params[0],
@@ -133,7 +136,8 @@ pub fn Pgsql(project_id: String) -> impl IntoView {
                           on:click={
                               let project_id = project_id.clone();
                               move |_| {
-                                  delete_project.dispatch((projects_store, project_id.clone()));
+                                  delete_project
+                                      .dispatch((projects_store, project_id.clone().to_string()));
                               }
                           }
                       >

src/databases/pgsql/schema.rs

@@ -28,8 +28,8 @@ pub fn Schema(schema: String) -> impl IntoView {
                   let schema = schema.clone();
                   move |_| {
                       set_is_loading(true);
-                      let schema = (*schema).clone();
-                      load_tables.dispatch(schema.clone());
+                      let schema = schema.clone();
+                      load_tables.dispatch(schema.clone().to_string());
                   }
               }
           >
@@ -43,15 +43,15 @@ pub fn Schema(schema: String) -> impl IntoView {
                   />
               </Show>
 
-              {(*schema).clone()}
+              {&*schema}
           </button>
           <div class="pl-2">
               <Show when=show fallback=|| view! {}>
                   <For
                       each={
                           let schema = schema.clone();
                           move || {
-                              let schema = (*schema).clone();
+                              let schema = schema.clone();
                               pgsql.select_tables_by_schema(&schema).unwrap()
                           }
                       }

src/databases/pgsql/table.rs

@@ -1,10 +1,14 @@
+use std::rc::Rc;
+
 use leptos::*;
 use leptos_icons::*;
 
 use crate::databases::pgsql::driver::Pgsql;
 
 #[component]
 pub fn Table(table: (String, String), schema: String) -> impl IntoView {
+  let table = Rc::new(table);
+  let schema = Rc::new(schema);
   let pgsql = expect_context::<Pgsql>();
   let query = create_action(move |(schema, table, pgsql): &(String, String, Pgsql)| {
     let pgsql = *pgsql;
@@ -23,15 +27,15 @@ pub fn Table(table: (String, String), schema: String) -> impl IntoView {
           class="flex flex-row justify-between items-center hover:font-semibold cursor-pointer"
           on:click={
               let table = table.clone();
-              move |_| { query.dispatch((schema.clone(), table.0.clone(), pgsql)) }
+              move |_| { query.dispatch((schema.clone().to_string(), table.0.clone(), pgsql)) }
           }
       >
 
           <div class="flex flex-row items-center gap-1">
               <Icon icon=icondata::HiTableCellsOutlineLg width="12" height="12"/>
-              <p>{table.0}</p>
+              <p>{table.0.to_string()}</p>
           </div>
-          <p>{table.1}</p>
+          <p>{table.1.to_string()}</p>
       </div>
   }
 }

src/invoke.rs

@@ -62,7 +62,7 @@ impl AsRef<str> for Invoke {
 #[derive(Serialize, Deserialize)]
 pub struct InvokePgsqlConnectorArgs<'a> {
   pub project_id: &'a str,
-  pub key: &'a str,
+  pub key: Option<&'a str>,
 }
 
 #[derive(Serialize, Deserialize)]

src/modals/add_custom_query.rs

@@ -1,70 +1,50 @@
+use std::rc::Rc;
+
 use leptos::*;
 use thaw::{Modal, ModalFooter};
 
-use crate::store::{projects::ProjectsStore, queries::QueriesStore};
+use crate::store::queries::QueriesStore;
 
 #[component]
-pub fn AddCustomQuery(show: RwSignal<bool>) -> impl IntoView {
-  let projects_store = expect_context::<ProjectsStore>();
+pub fn AddCustomQuery(show: RwSignal<bool>, project_id: String) -> impl IntoView {
+  let project_id = Rc::new(project_id);
+  let project_id_clone = project_id.clone();
   let query_store = expect_context::<QueriesStore>();
-  let (query_title, set_query_title) = create_signal(String::new());
-  //let projects = create_memo(move |_| projects_store.get_projects().unwrap());
-
-  let (project_name, set_project_name) = create_signal("".to_string());
-  //   create_effect(move |_| {
-  //     if !projects.get().is_empty() {
-  //       set_project_name(projects.get()[0].clone());
-  //     }
-  //   });
-
+  let (title, set_title) = create_signal(String::new());
   let insert_query = create_action(
-    move |(query_db, key, project_name): &(QueriesStore, String, String)| {
+    move |(query_db, project_id, title): &(QueriesStore, String, String)| {
       let query_db_clone = *query_db;
-      let key = key.clone();
-      let project_name = project_name.clone();
+      let project_id = project_id.clone();
+      let title = title.clone();
       async move {
-        query_db_clone.insert_query(&key, &project_name).await;
+        query_db_clone.insert_query(&project_id, &title).await;
       }
     },
   );
 
   view! {
       <Modal show=show title="Save query!">
           <div class="flex flex-col gap-2">
-              <select
-                  class="border-1 border-neutral-200 p-1 rounded-md w-full bg-white appearance-none"
-                  value=project_name
-                  default_value="teszt"
-                  placeholder="Select project.."
-              >// <For
-              // each=move || projects.get()
-              // key=|project| project.clone()
-              // children=move |p| {
-              // view! {
-              // <option value=&p selected=project_name() == p>
-              // {p}
-              // </option>
-              // }
-              // }
-              // />
-
-              </select>
+              <p>Project: {&*project_id_clone}</p>
               <input
                   class="border-1 border-neutral-200 p-1 rounded-md w-full"
                   type="text"
                   placeholder="Add query name.."
-                  value=query_title
-                  on:input=move |e| set_query_title(event_target_value(&e))
+                  value=title
+                  on:input=move |e| set_title(event_target_value(&e))
               />
           </div>
 
           <ModalFooter slot>
               <div class="flex gap-2 justify-end">
                   <button
                       class="px-4 py-2 border-1 border-neutral-200 hover:bg-neutral-200 rounded-md"
-                      on:click=move |_| {
-                          insert_query.dispatch((query_store, query_title(), project_name()));
-                          show.set(false);
+                      on:click={
+                          let project_id = project_id.clone();
+                          move |_| {
+                              insert_query.dispatch((query_store, project_id.to_string(), title()));
+                              show.set(false);
+                          }
                       }
                   >
 

src/sidebar/index.rs

@@ -2,8 +2,9 @@ use leptos::*;
 use leptos_use::{use_document, use_event_listener};
 
 use crate::{
-  databases::pgsql::index::Pgsql, modals::add_pgsql_connection::AddPgsqlConnection,
-  store::projects::ProjectsStore,
+  databases::pgsql::index::Pgsql,
+  modals::add_pgsql_connection::AddPgsqlConnection,
+  store::{projects::ProjectsStore, queries::QueriesStore},
 };
 use common::enums::Drivers;
 
@@ -12,6 +13,7 @@ use super::queries::Queries;
 #[component]
 pub fn Sidebar() -> impl IntoView {
   let projects_store = expect_context::<ProjectsStore>();
+  let queries_store = expect_context::<QueriesStore>();
   let show = create_rw_signal(false);
   let _ = use_event_listener(use_document(), ev::keydown, move |event| {
     if event.key() == "Escape" {
@@ -22,6 +24,7 @@ pub fn Sidebar() -> impl IntoView {
     || {},
     move |_| async move {
       projects_store.load_projects().await;
+      queries_store.load_queries().await;
     },
   );
 
@@ -55,12 +58,14 @@ pub fn Sidebar() -> impl IntoView {
               />
 
           </div>
-          <div class="py-2">
-              <p class="font-semibold text-lg">Saved Queries</p>
-              <div class="text-sm">
-                  <Queries/>
+          <Show when=move || !queries_store.0.get().is_empty() fallback=|| view! { <div></div> }>
+              <div class="py-2">
+                  <p class="font-semibold text-lg">Saved Queries</p>
+                  <div class="text-sm">
+                      <Queries/>
+                  </div>
               </div>
-          </div>
+          </Show>
       </div>
   }
 }

src/sidebar/queries.rs

@@ -16,8 +16,8 @@ pub fn Queries() -> impl IntoView {
   view! {
       <For
           each=move || queries_store.0.get()
-          key=|(key, _)| key.clone()
-          children=move |(key, _)| view! { <Query key=key/> }
+          key=|(query_id, _)| query_id.clone()
+          children=move |(query_id, sql)| view! { <Query query_id sql/> }
       />
   }
 }