Merge pull request #4 from dancixx/refactor/mutli-tab-support

dancixx · web-flow · commit baa6c50b15eb · 2024-01-22T01:18:13.000+01:00
refactor: query, editor and tabs state
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "rust-sql-gui-ui"
-version = "1.0.0-alpha.5"
+version = "1.0.0-alpha.6"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Welcome to the Tauri-Leptos PostgreSQL GUI, a fully Rust-based application for e
 - [x] **Multi-Connection Support:** Enable the GUI to handle multiple database connections simultaneously.
 - [x] **SQL Query Saving:** Allow users to save and manage their frequently used SQL queries.
 - [x] **Grid and Record View:** Provide a grid view for query results, as well as a record view for individual records.
-- [ ] **Multi Tab Support:** Allow users to open multiple tabs for SQL queries.
+- [x] **Multi Tab Support:** Allow users to open multiple tabs for SQL queries.
 - [ ] **BigQuery Support:** Add support for BigQuery databases.
 
 ## Key Features
diff --git a/common/Cargo.toml b/common/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "common"
-version = "1.0.0-alpha.5"
+version = "1.0.0-alpha.6"
 edition = "2021"
 
 [dependencies]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "rust-sql-gui"
-version = "1.0.0-alpha.5"
+version = "1.0.0-alpha.6"
 description = "PostgreSQL GUI written in Rust"
 authors = ["Daniel Boros"]
 license = ""
diff --git a/src/app.rs b/src/app.rs
@@ -4,18 +4,16 @@ use crate::{
   enums::QueryTableLayout,
   layout,
   store::{
-    active_project::ActiveProjectStore, editor::EditorStore, projects::ProjectsStore,
-    query::QueryStore, tabs::Tabs,
+    active_project::ActiveProjectStore, projects::ProjectsStore, query::QueryStore, tabs::TabsStore,
   },
 };
 
 pub fn app() -> impl IntoView {
-  provide_context(EditorStore::default());
   provide_context(QueryStore::default());
   provide_context(ProjectsStore::default());
   provide_context(create_rw_signal(QueryTableLayout::Grid));
   provide_context(ActiveProjectStore::default());
-  provide_context(Tabs::default());
+  provide_context(TabsStore::default());
 
   layout::component()
 }
diff --git a/src/grid_view.rs b/src/grid_view.rs
@@ -1,23 +1,23 @@
 use leptos::{html::*, *};
 
-use crate::store::query::QueryStore;
+use crate::store::tabs::TabsStore;
 
 pub fn component() -> impl IntoView {
-  let query_state = use_context::<QueryStore>().unwrap();
+  let tabs_store = use_context::<TabsStore>().unwrap();
 
   table()
     .classes("table-auto w-full")
     .child(
       thead()
         .classes("sticky top-0 bg-white")
         .child(tr().classes("bg-gray-100").child(For(ForProps {
-          each: move || query_state.sql_result.get().unwrap().0.clone(),
+          each: move || tabs_store.select_active_editor_sql_result().unwrap().0,
           key: |n| n.clone(),
           children: move |col| th().classes("text-xs px-4").child(col),
         }))),
     )
     .child(tbody().child(For(ForProps {
-      each: move || query_state.sql_result.get().unwrap().1.clone(),
+      each: move || tabs_store.select_active_editor_sql_result().unwrap().1,
       key: |n| n.clone(),
       children: move |row| {
         tr()
diff --git a/src/layout.rs b/src/layout.rs
@@ -4,7 +4,7 @@ use thaw::{Button, ButtonProps, Tab, TabProps, Tabs, TabsProps};
 use crate::{footer, query_editor, query_table, sidebar, store::tabs};
 
 pub fn component() -> impl IntoView {
-  let tabs = use_context::<tabs::Tabs>().unwrap();
+  let tabs = use_context::<tabs::TabsStore>().unwrap();
 
   div()
     .classes("flex h-screen")
@@ -55,7 +55,7 @@ pub fn component() -> impl IntoView {
                 tabs.active_tabs.update(|prev| *prev += 1);
                 tabs
                   .selected_tab
-                  .update(|prev| *prev = (tabs.active_tabs.get() - 1).to_string());
+                  .update(|prev| *prev = (prev.parse::<usize>().unwrap() + 1).to_string());
               })),
               children: Some(Box::new(move || {
                 Fragment::new(vec![p().child("+").into_view()])
diff --git a/src/query_editor.rs b/src/query_editor.rs
@@ -1,5 +1,6 @@
-use std::{cell::RefCell, rc::Rc};
+use std::{cell::RefCell, rc::Rc, sync::Arc};
 
+use futures::lock::Mutex;
 use leptos::{html::*, *};
 use leptos_use::{use_document, use_event_listener};
 use monaco::{
@@ -8,35 +9,21 @@ use monaco::{
 };
 use wasm_bindgen::{closure::Closure, JsCast};
 
-use crate::{
-  modals,
-  store::{editor::EditorStore, query::QueryStore},
-};
+use crate::{modals, store::tabs::TabsStore};
 
 pub type ModelCell = Rc<RefCell<Option<CodeEditor>>>;
 
 pub fn component() -> impl IntoView {
-  let query_store = use_context::<QueryStore>().unwrap();
-  let run_query = create_action(move |query_store: &QueryStore| {
-    let query_store = *query_store;
-    async move {
-      query_store.run_query().await.unwrap();
-    }
-  });
+  let tabs_store = Rc::new(RefCell::new(use_context::<TabsStore>().unwrap()));
   let show = create_rw_signal(false);
   let _ = use_event_listener(use_document(), ev::keydown, move |event| {
     if event.key() == "Escape" {
       show.set(false);
     }
   });
-  let mut editors = use_context::<EditorStore>().unwrap();
   let node_ref = create_node_ref();
-  let _ = use_event_listener(node_ref, ev::keydown, move |event| {
-    if event.key() == "Enter" && event.ctrl_key() {
-      run_query.dispatch(query_store);
-    }
-  });
 
+  let tabs_store_clone = tabs_store.clone();
   node_ref.on_load(move |node| {
     let div_element: &web_sys::HtmlDivElement = &node;
     let html_element = div_element.unchecked_ref::<web_sys::HtmlElement>();
@@ -61,7 +48,20 @@ pub fn component() -> impl IntoView {
 
     // TODO: Fix this
     let e = Rc::new(RefCell::new(Some(e)));
-    editors.add_editor(e);
+    tabs_store_clone.borrow_mut().add_editor(e);
+  });
+  let tabs_store = Arc::new(Mutex::new(use_context::<TabsStore>().unwrap()));
+  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();
+    }
+  });
+  let tabs_store_clone = tabs_store.clone();
+  let _ = use_event_listener(node_ref, ev::keydown, move |event| {
+    if event.key() == "Enter" && event.ctrl_key() {
+      run_query.dispatch(tabs_store_clone.clone());
+    }
   });
 
   div()
@@ -85,7 +85,7 @@ pub fn component() -> impl IntoView {
             .child(
               button()
                 .classes("p-1 border-1 border-neutral-200 bg-white hover:bg-neutral-200 rounded-md")
-                .on(ev::click, move |_| run_query.dispatch(query_store))
+                .on(ev::click, move |_| run_query.dispatch(tabs_store.clone()))
                 .child("Query"),
             ),
         ),
diff --git a/src/query_table.rs b/src/query_table.rs
@@ -1,17 +1,17 @@
-use crate::{enums::QueryTableLayout, grid_view, record_view, store::query::QueryStore};
+use crate::{enums::QueryTableLayout, grid_view, record_view, store::tabs::TabsStore};
 use leptos::{html::*, *};
 
 pub fn component() -> impl IntoView {
-  let query_state = use_context::<QueryStore>().unwrap();
+  let tabs_store = use_context::<TabsStore>().unwrap();
   let table_view = use_context::<RwSignal<QueryTableLayout>>().unwrap();
-  let table_layout = move || match query_state.sql_result.get() {
+  let table_layout = move || match tabs_store.select_active_editor_sql_result() {
     None => div(),
     Some(_) => match table_view() {
       QueryTableLayout::Grid => div().child(grid_view::component()),
       QueryTableLayout::Records => div().child(record_view::component()),
     },
   };
-  let when = move || !query_state.is_loading.get();
+  let when = move || !tabs_store.is_loading.get();
   let fallback = ViewFn::from(|| p().classes("pl-2").child("Loading..."));
   let children = ChildrenFn::to_children(move || Fragment::new(vec![table_layout().into_view()]));
 
diff --git a/src/record_view.rs b/src/record_view.rs
@@ -1,13 +1,12 @@
 use leptos::{html::*, *};
 
-use crate::store::query::QueryStore;
+use crate::store::tabs::TabsStore;
 
 pub fn component() -> impl IntoView {
-  let query_state = use_context::<QueryStore>().unwrap();
-  let columns = query_state.sql_result.get().unwrap().0.clone();
-  let first_row = query_state
-    .sql_result
-    .get()
+  let tabs_store = use_context::<TabsStore>().unwrap();
+  let columns = tabs_store.select_active_editor_sql_result().unwrap().0;
+  let first_row = tabs_store
+    .select_active_editor_sql_result()
     .unwrap()
     .1
     .first()
diff --git a/src/sidebar/queries.rs b/src/sidebar/queries.rs
@@ -6,7 +6,7 @@ use super::query;
 pub fn component() -> impl IntoView {
   let query_state = use_context::<QueryStore>().unwrap();
   let queries = create_resource(
-    move || query_state.saved_queries.get(),
+    move || query_state.0.get(),
     move |_| async move { query_state.select_queries().await.unwrap() },
   );
 
diff --git a/src/sidebar/query.rs b/src/sidebar/query.rs
@@ -1,10 +1,11 @@
 use leptos::{html::*, *};
 use leptos_icons::*;
 
-use crate::store::query::QueryStore;
+use crate::store::{query::QueryStore, tabs::TabsStore};
 
 pub fn component(key: String) -> impl IntoView {
   let query_store = use_context::<QueryStore>().unwrap();
+  let tabs_store = use_context::<TabsStore>().unwrap();
   let key_clone = key.clone();
   let splitted_key = create_memo(move |_| {
     let key = key_clone.clone();
@@ -35,7 +36,7 @@ pub fn component(key: String) -> impl IntoView {
         .on(ev::click, {
           let key = key.clone();
           move |_| {
-            query_store.load_query(&key).unwrap();
+            tabs_store.load_query(&key).unwrap();
           }
         }),
     )
diff --git a/src/sidebar/table.rs b/src/sidebar/table.rs
@@ -1,20 +1,31 @@
+use std::sync::Arc;
+
+use futures::lock::Mutex;
 use leptos::{html::*, *};
 use leptos_icons::*;
 
-use crate::store::{active_project::ActiveProjectStore, editor::EditorStore, query::QueryStore};
+use crate::store::{active_project::ActiveProjectStore, tabs::TabsStore};
 
 pub fn component(table: (String, String), project: String, schema: String) -> impl IntoView {
-  let query_store = use_context::<QueryStore>().unwrap();
-  let editor_store = use_context::<EditorStore>().unwrap();
+  let tabs_store = Arc::new(Mutex::new(use_context::<TabsStore>().unwrap()));
   let active_project = use_context::<ActiveProjectStore>().unwrap();
-  let query = create_action(move |(schema, table): &(String, String)| {
-    let project = project.clone();
-    let schema = schema.clone();
-    let table = table.clone();
-    active_project.0.set(Some(project.clone()));
-    editor_store.set_editor_value(&format!("SELECT * FROM {}.{} LIMIT 100;", schema, table));
-    async move { query_store.run_query().await.unwrap() }
-  });
+  let query = create_action(
+    move |(schema, table, tabs_store): &(String, String, Arc<Mutex<TabsStore>>)| {
+      let tabs_store = tabs_store.clone();
+      let project = project.clone();
+      let schema = schema.clone();
+      let table = table.clone();
+      active_project.0.set(Some(project.clone()));
+
+      async move {
+        tabs_store
+          .lock()
+          .await
+          .set_editor_value(&format!("SELECT * FROM {}.{} LIMIT 100;", schema, table));
+        tabs_store.lock().await.run_query().await.unwrap()
+      }
+    },
+  );
 
   div()
     .classes("flex flex-row justify-between items-center hover:font-semibold cursor-pointer")
@@ -33,6 +44,6 @@ pub fn component(table: (String, String), project: String, schema: String) -> im
     .child(p().child(table.clone().1))
     .on(ev::click, {
       let table = table.clone();
-      move |_| query.dispatch((schema.clone(), table.0.clone()))
+      move |_| query.dispatch((schema.clone(), table.0.clone(), tabs_store.clone()))
     })
 }
diff --git a/src/store/editor.rs b/src/store/editor.rs
diff --git a/src/store/mod.rs b/src/store/mod.rs
@@ -1,5 +1,4 @@
 pub mod active_project;
-pub mod editor;
 pub mod projects;
 pub mod query;
 pub mod tabs;
diff --git a/src/store/query.rs b/src/store/query.rs
diff --git a/src/store/tabs.rs b/src/store/tabs.rs
