Skip to content

Commit fa68a50

Browse files
dancixxdancixx
committed
refactor: migrate to RSX
1 parent 8c514e5 commit fa68a50

File tree

14 files changed

+282
-270
lines changed

14 files changed

+282
-270
lines changed

‎src/app.rs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ use thaw::{Button, Tab, Tabs};
33

44
use crate::{
55
enums::QueryTableLayout,
6+
footer::Footer,
67
query_editor::QueryEditor,
78
query_table::QueryTable,
8-
sidebar,
9+
sidebar::index::Sidebar,
910
store::{
1011
active_project::ActiveProjectStore,
1112
projects::ProjectsStore,
@@ -29,7 +30,8 @@ pub fn App() -> impl IntoView {
2930

3031
view! {
3132
<div class="flex h-screen">
32-
{sidebar::index::component()} <div>
33+
<Sidebar/>
34+
<div>
3335
<main>
3436
<Tabs value=tabs.selected_tab>
3537
<For
@@ -65,6 +67,7 @@ pub fn App() -> impl IntoView {
6567
</Button>
6668
</main>
6769
</div>
70+
<Footer/>
6871
</div>
6972
}
7073
}

‎src/footer.rs‎

Lines changed: 42 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,52 @@
1-
use leptos::{html::*, *};
1+
use leptos::*;
22
use leptos_icons::*;
33

44
use crate::{enums::QueryTableLayout, store::active_project::ActiveProjectStore};
55

6-
pub fn component() -> impl IntoView {
6+
#[component]
7+
pub fn Footer() -> impl IntoView {
78
let table_view = use_context::<RwSignal<QueryTableLayout>>().unwrap();
89
let acitve_project = use_context::<ActiveProjectStore>().unwrap();
910
let sql_timer = use_context::<RwSignal<f32>>().unwrap();
1011
let formatted_timer = create_memo(move |_| format!("Query complete: {}ms", sql_timer.get()));
1112

12-
footer()
13-
.classes("flex flex-row justify-between items-center h-10 bg-gray-50 px-4")
14-
.child(
15-
div()
16-
.classes("flex flex-row gap-2 text-xs")
17-
.child(Show(ShowProps {
18-
children: ChildrenFn::to_children(move || {
19-
Fragment::new(vec![div()
20-
.classes("flex flex-row items-center gap-1")
21-
.child(p().child("Selected project:"))
22-
.child(
23-
p()
24-
.classes("font-semibold")
25-
.child(move || acitve_project.0.get()),
26-
)
27-
.into_view()])
28-
}),
29-
when: move || acitve_project.0.get().is_some(),
30-
fallback: ViewFn::from(div),
31-
})),
32-
)
33-
.child(
34-
div()
35-
.classes("flex flex-row gap-1 items-center text-xs")
36-
.child(p().child(formatted_timer))
37-
.child(
38-
button()
39-
.classes("p-1 hover:bg-gray-300 rounded-full")
40-
.class("bg-gray-300", move || {
41-
table_view() == QueryTableLayout::Records
42-
})
43-
.on(ev::click, move |_| {
44-
table_view.set(QueryTableLayout::Records)
45-
})
46-
.child(Icon(IconProps {
47-
icon: MaybeSignal::Static(icondata::HiBars4OutlineLg),
48-
width: MaybeProp::from(String::from("16")),
49-
height: MaybeProp::from(String::from("16")),
50-
class: MaybeProp::default(),
51-
style: MaybeProp::default(),
52-
})),
53-
)
54-
.child(
55-
button()
56-
.classes("p-1 hover:bg-gray-300 rounded-full")
57-
.class("bg-gray-300", move || {
58-
table_view() == QueryTableLayout::Grid
59-
})
60-
.on(ev::click, move |_| table_view.set(QueryTableLayout::Grid))
61-
.child(Icon(IconProps {
62-
icon: MaybeSignal::Static(icondata::HiTableCellsOutlineLg),
63-
width: MaybeProp::from(String::from("16")),
64-
height: MaybeProp::from(String::from("16")),
65-
class: MaybeProp::default(),
66-
style: MaybeProp::default(),
67-
})),
68-
),
69-
)
13+
view! {
14+
<footer class="flex flex-row justify-between items-center h-10 bg-gray-50 px-4">
15+
<div class="flex flex-row gap-2 text-xs">
16+
<Show when=move || acitve_project.0.get().is_some() fallback=|| view! { <div></div> }>
17+
<div class="flex flex-row items-center gap-1">
18+
<p>Selected project:</p>
19+
<p class="font-semibold">{move || acitve_project.0.get()}</p>
20+
</div>
21+
</Show>
22+
</div>
23+
<div class="flex flex-row gap-1 items-center text-xs">
24+
<p>{formatted_timer}</p>
25+
<button
26+
class=if table_view() == QueryTableLayout::Records {
27+
"p-1 hover:bg-gray-300 rounded-full bg-gray-300"
28+
} else {
29+
"p-1 hover:bg-gray-300 rounded-full"
30+
}
31+
32+
on:click=move |_| table_view.set(QueryTableLayout::Records)
33+
>
34+
35+
<Icon icon=icondata::HiBars4OutlineLg width="16" height="16"/>
36+
</button>
37+
<button
38+
class=if table_view() == QueryTableLayout::Grid {
39+
"p-1 hover:bg-gray-300 rounded-full bg-gray-300"
40+
} else {
41+
"p-1 hover:bg-gray-300 rounded-full"
42+
}
43+
44+
on:click=move |_| table_view.set(QueryTableLayout::Grid)
45+
>
46+
<Icon icon=icondata::HiTableCellsOutlineLg width="16" height="16"/>
47+
</button>
48+
</div>
49+
</footer>
50+
}
7051
}
52+

‎src/modals/connection.rs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ use crate::{
1212
store::projects::ProjectsStore,
1313
};
1414

15-
pub fn component(show: RwSignal<bool>) -> impl IntoView {
15+
#[component]
16+
pub fn Connection(show: RwSignal<bool>) -> impl IntoView {
1617
let projects_store = use_context::<ProjectsStore>().unwrap();
1718
let (driver, _set_driver) = create_signal(Drivers::POSTGRESQL);
1819
let (project, set_project) = create_signal(String::new());

‎src/modals/custom_query.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
use leptos::{html::*, *};
2-
use thaw::{Modal, ModalFooter, ModalProps};
1+
use leptos::*;
2+
use thaw::{Modal, ModalFooter};
33

44
use crate::store::{
55
active_project::ActiveProjectStore, projects::ProjectsStore, query::QueryStore,

‎src/query_editor.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ pub fn QueryEditor() -> impl IntoView {
7171
});
7272

7373
view! {
74-
<div node_ref=node_ref class="border-b-1 border-neutral-200 h-72 sticky">
75-
<CustomQuery show=show.clone()/>
74+
<div _ref=node_ref class="border-b-1 border-neutral-200 h-72 sticky">
75+
<CustomQuery show=show/>
7676
<div class="absolute bottom-0 items-center flex justify-end px-4 left-0 w-full h-10 bg-gray-50">
7777
<div class="flex flex-row gap-2 text-xs">
7878
<button

‎src/query_table.rs‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,15 @@ pub fn QueryTable() -> impl IntoView {
1111
view! {
1212
<Show when=move || !tabs_store.is_loading.get() fallback=|| view! { <p>"Loading..."</p> }>
1313
{move || match tabs_store.select_active_editor_sql_result() {
14-
None => view! { <p>"No data to display"</p> },
14+
None => view! { <>"No data to display"</> },
1515
Some(_) => {
16-
match table_view.get() {
17-
QueryTableLayout::Grid => view! { <GridView/> },
18-
QueryTableLayout::Record => view! { <RecordView/> },
16+
view! {
17+
<>
18+
{match table_view.get() {
19+
QueryTableLayout::Grid => view! { <GridView/> },
20+
QueryTableLayout::Records => view! { <RecordView/> },
21+
}}
22+
</>
1923
}
2024
}
2125
}}

‎src/sidebar/index.rs‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
use common::enums::Project;
2-
use leptos::{html::*, IntoView, *};
2+
use leptos::*;
33
use leptos_use::{use_document, use_event_listener};
44
use tauri_sys::tauri::invoke;
55

66
use crate::{
77
context_menu::siderbar::context_menu,
88
hooks::use_context_menu,
99
invoke::{Invoke, InvokeSelectProjectsArgs},
10-
modals,
10+
modals::connection::Connection,
1111
store::projects::ProjectsStore,
1212
};
1313

14-
use super::{project, queries};
14+
use super::{project::Project, queries::Queries};
1515

16-
pub fn component() -> impl IntoView {
16+
#[component]
17+
pub fn Sidebar() -> impl IntoView {
1718
let projects_state = use_context::<ProjectsStore>().unwrap();
1819
let node_ref = use_context_menu::use_context_menu(context_menu);
1920
let show = create_rw_signal(false);
@@ -35,35 +36,35 @@ pub fn component() -> impl IntoView {
3536
},
3637
);
3738

38-
div()
39-
.node_ref(node_ref)
40-
.classes("flex border-r-1 min-w-[320px] justify-between border-neutral-200 flex-col p-4")
41-
.child(modals::connection::component(show))
42-
.child(
43-
div().classes("flex flex-col overflow-auto").child(
44-
div()
45-
.child(
46-
div()
47-
.classes("flex flex-row justify-between items-center")
48-
.child(p().classes("font-semibold text-lg").child("Projects"))
49-
.child(
50-
button()
51-
.classes("px-2 rounded-full hover:bg-gray-200")
52-
.child("+")
53-
.on(ev::click, move |_| show.set(true)),
54-
),
55-
)
56-
.child(For(ForProps {
57-
each: move || projects_state.0.get(),
58-
key: |(project, _)| project.clone(),
59-
children: |(project, _)| project::component(project),
60-
})),
61-
),
62-
)
63-
.child(
64-
div()
65-
.classes("py-2")
66-
.child(p().classes("font-semibold text-lg").child("Saved Queries"))
67-
.child(div().classes("text-sm").child(queries::component())),
68-
)
39+
view! {
40+
<div
41+
_ref=node_ref
42+
classes="flex border-r-1 min-w-[320px] justify-between border-neutral-200 flex-col p-4"
43+
>
44+
<Connection show=show/>
45+
<div classes="flex flex-col overflow-auto">
46+
<div classes="flex flex-row justify-between items-center">
47+
<p classes="font-semibold text-lg">Projects</p>
48+
<button
49+
classes="px-2 rounded-full hover:bg-gray-200"
50+
on:click=move |_| show.set(true)
51+
>
52+
"+"
53+
</button>
54+
</div>
55+
<For
56+
each=move || projects_state.0.get()
57+
key=|(project, _)| project.clone()
58+
children=|(project, _)| view! { <Project project=project/> }
59+
/>
60+
</div>
61+
<div classes="py-2">
62+
<p classes="font-semibold text-lg">Saved Queries</p>
63+
<div classes="text-sm">
64+
<Queries/>
65+
</div>
66+
</div>
67+
</div>
68+
}
6969
}
70+

‎src/sidebar/project.rs‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
use leptos::{html::*, *};
1+
use leptos::*;
22

33
use crate::store::{active_project::ActiveProjectStore, projects::ProjectsStore};
44

5-
use super::schemas;
5+
use super::schemas::Schemas;
66

7-
pub fn component(project: String) -> impl IntoView {
7+
#[component]
8+
pub fn Project(project: String) -> impl IntoView {
89
let projects_store = use_context::<ProjectsStore>().unwrap();
910
let active_project_store = use_context::<ActiveProjectStore>().unwrap();
1011
let (show_schemas, set_show_schemas) = create_signal(false);
@@ -16,51 +17,52 @@ pub fn component(project: String) -> impl IntoView {
1617
}
1718
});
1819

19-
div()
20-
.classes("pl-1 text-xs")
21-
.child(
22-
div()
23-
.classes("flex flex-row justify-between items-center")
24-
.child(
25-
button()
26-
.classes("hover:font-semibold")
27-
.child(&project)
28-
.on(ev::click, {
29-
let project = project.clone();
30-
move |_| {
31-
active_project_store.0.set(Some(project.clone()));
32-
set_show_schemas(!show_schemas());
33-
}
34-
}),
35-
)
36-
.child(
37-
button()
38-
.classes("px-2 rounded-full hover:bg-gray-200")
39-
.child("-")
40-
.on(ev::click, {
41-
let project = project.clone();
42-
move |_| {
43-
delete_project.dispatch((projects_store, project.clone()));
44-
}
45-
}),
46-
),
47-
)
48-
.child(div().classes("pl-1").child(Suspense(SuspenseProps {
49-
fallback: ViewFn::from(|| "Loading..."),
50-
children: ChildrenFn::to_children(move || {
51-
let project = project.clone();
52-
Fragment::new(vec![Show(ShowProps {
53-
children: {
54-
let project = project.clone();
55-
ChildrenFn::to_children(move || {
56-
let project = project.clone();
57-
Fragment::new(vec![schemas::component(project.clone()).into_view()])
58-
})
59-
},
60-
when: show_schemas,
61-
fallback: ViewFn::default(),
62-
})
63-
.into_view()])
64-
}),
65-
})))
20+
view! {
21+
<div class="pl-1 text-xs">
22+
<div class="flex flex-row justify-between items-center">
23+
<button
24+
class="hover:font-semibold"
25+
on:click={
26+
let project = project.clone();
27+
move |_| {
28+
active_project_store.0.set(Some(project.clone()));
29+
set_show_schemas(!show_schemas());
30+
}
31+
}
32+
>
33+
34+
{&project}
35+
</button>
36+
<button
37+
class="px-2 rounded-full hover:bg-gray-200"
38+
on:click={
39+
let project = project.clone();
40+
move |_| {
41+
delete_project.dispatch((projects_store, project.clone()));
42+
}
43+
}
44+
>
45+
46+
"-"
47+
</button>
48+
</div>
49+
<div class="pl-1">
50+
<Suspense fallback=move || {
51+
view! { <p>Loading...</p> }
52+
}>
53+
54+
{
55+
let project = project.clone();
56+
view! {
57+
<Show when=show_schemas fallback=|| view! {}>
58+
<Schemas project=project.clone()/>
59+
</Show>
60+
}
61+
}
62+
63+
</Suspense>
64+
</div>
65+
</div>
66+
}
6667
}
68+

0 commit comments

Comments
 (0)