refactor: multi tab support

Author: dancixx

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()
 }

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()

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")

src/query_editor.rs

@@ -1,4 +1,8 @@
-use std::{cell::RefCell, rc::Rc};
+use std::{
+  cell::RefCell,
+  rc::Rc,
+  sync::{Arc, Mutex},
+};
 
 use leptos::{html::*, *};
 use leptos_use::{use_document, use_event_listener};
@@ -8,19 +12,16 @@ 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;
+  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 {
-      query_store.run_query().await.unwrap();
+      tabs_store.lock().unwrap().run_query().await.unwrap();
     }
   });
   let show = create_rw_signal(false);
@@ -29,14 +30,14 @@ pub fn component() -> impl IntoView {
       show.set(false);
     }
   });
-  let mut editors = use_context::<EditorStore>().unwrap();
   let node_ref = create_node_ref();
+  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(query_store);
+      run_query.dispatch(tabs_store_clone.clone());
     }
   });
-
+  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 +62,7 @@ pub fn component() -> impl IntoView {
 
     // TODO: Fix this
     let e = Rc::new(RefCell::new(Some(e)));
-    editors.add_editor(e);
+    tabs_store_clone.lock().unwrap().add_editor(e);
   });
 
   div()
@@ -85,7 +86,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"),
             ),
         ),

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()]));
 

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()

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() },
   );
 

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();
           }
         }),
     )

src/sidebar/table.rs

@@ -1,20 +1,27 @@
+use std::sync::{Arc, 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 project = project.clone();
+      let schema = schema.clone();
+      let table = table.clone();
+      active_project.0.set(Some(project.clone()));
+      tabs_store
+        .lock()
+        .unwrap()
+        .set_editor_value(&format!("SELECT * FROM {}.{} LIMIT 100;", schema, table));
+      let tabs_store = tabs_store.clone();
+      async move { tabs_store.lock().unwrap().run_query().await.unwrap() }
+    },
+  );
 
   div()
     .classes("flex flex-row justify-between items-center hover:font-semibold cursor-pointer")
@@ -33,6 +40,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()))
     })
 }