Skip to content
This repository was archived by the owner on Apr 28, 2024. It is now read-only.

Commit 2990c4a

Browse files
paraswaykoleparaswaykole
committed
sidebar code refactoring
1 parent c59a6e2 commit 2990c4a

File tree

3 files changed

+204
-164
lines changed

3 files changed

+204
-164
lines changed

‎frontend/src/components/layouts/sidebar.tsx

Lines changed: 9 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
import styles from './sidebar.module.scss'
2-
import React from 'react'
3-
import { Link, useLocation, useParams, useSearchParams } from 'react-router-dom'
4-
import Constants from '../../constants'
5-
import { DBConnection, DBDataModel, DBQuery, User } from '../../data/models'
6-
import { useAppDispatch, useAppSelector } from '../../redux/hooks'
7-
import { selectDBConnection, selectDBDataModels, selectDBDQueries } from '../../redux/dbConnectionSlice'
8-
import { DBConnType, TabType } from '../../data/defaults'
2+
import { useLocation } from 'react-router-dom'
3+
import { DBConnection } from '../../data/models'
4+
import { useAppSelector } from '../../redux/hooks'
5+
import { selectDBConnection } from '../../redux/dbConnectionSlice'
96
import HomeSidebar from './sidebars/homesidebar'
10-
import { createTab } from '../../redux/tabsSlice'
11-
import { selectCurrentUser } from '../../redux/currentUserSlice'
7+
import DatabaseSidebar from './sidebars/dbsidebar'
8+
import SettingSidebar from './sidebars/settingsidebar'
129

1310
enum SidebarViewType {
1411
HOME = "HOME", // home sidebar
15-
DATABASE = "DATABASE", // Used to show elements of single database
12+
DATABASE = "DATABASE", // Used to show elements of database screen
1613
SETTINGS = "SETTINGS" // Used to show elements of settings screen
1714
}
1815

@@ -25,28 +22,6 @@ const Sidebar = () => {
2522
SidebarViewType.DATABASE : (location.pathname.startsWith("/settings")) ? SidebarViewType.SETTINGS : SidebarViewType.HOME
2623

2724
const dbConnection: DBConnection | undefined = useAppSelector(selectDBConnection)
28-
const currentUser: User = useAppSelector(selectCurrentUser)
29-
const dbDataModels: DBDataModel[] = useAppSelector(selectDBDataModels)
30-
const dbQueries: DBQuery[] = useAppSelector(selectDBDQueries)
31-
32-
const dispatch = useAppDispatch()
33-
34-
35-
const openDataTab = (schema: string, name: string) => {
36-
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.DATA, metadata: { schema, name } }))
37-
}
38-
39-
const openQueryTab = (queryId: string) => {
40-
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.QUERY, metadata: { queryId } }))
41-
}
42-
43-
const openConsoleTab = () => {
44-
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.CONSOLE, metadata: {} }))
45-
}
46-
47-
const openGenerateSQLTab = () => {
48-
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.GENSQL, metadata: {} }))
49-
}
5025

5126
return (
5227
<aside className={"menu " + styles.sidebar}>
@@ -55,140 +30,10 @@ const Sidebar = () => {
5530
<HomeSidebar />
5631
}
5732
{sidebarView === SidebarViewType.DATABASE && dbConnection &&
58-
<React.Fragment>
59-
<p className="menu-label">
60-
Data Models
61-
</p>
62-
<ul className={"menu-list " + styles.menuList}>
63-
{dbDataModels.map((dataModel: DBDataModel) => {
64-
const label = dbConnection.type === DBConnType.POSTGRES ? `${dataModel.schemaName}.${dataModel.name}` : `${dataModel.name}`
65-
return (
66-
<li key={dataModel.schemaName + dataModel.name}>
67-
<a onClick={() => openDataTab(dataModel.schemaName ?? "", dataModel.name)}>
68-
{label}
69-
</a>
70-
</li>
71-
)
72-
})}
73-
</ul>
74-
<p className="menu-label">
75-
Queries
76-
</p>
77-
<ul className={"menu-list " + styles.menuList}>
78-
{dbQueries.map((dbQuery: DBQuery) => {
79-
return (
80-
<li key={dbQuery.id}>
81-
<a onClick={() => openQueryTab(dbQuery.id)}>
82-
{dbQuery.name}
83-
</a>
84-
</li>
85-
)
86-
})}
87-
<li>
88-
<a onClick={() => openQueryTab("new")}>
89-
<span className="icon">
90-
<i className="fas fa-plus-circle"></i>
91-
</span>
92-
&nbsp;New Query
93-
</a>
94-
</li>
95-
</ul>
96-
<p className="menu-label">
97-
Toolbox
98-
</p>
99-
<ul className={"menu-list " + styles.menuList}>
100-
<li>
101-
<a onClick={() => openConsoleTab()}>
102-
<span className="icon">
103-
<i className="fas fa-terminal"></i>
104-
</span>
105-
&nbsp;Console
106-
</a>
107-
</li>
108-
<li>
109-
<a onClick={() => openGenerateSQLTab()}>
110-
<span className="icon">
111-
<i className="fas fa-magic"></i>
112-
</span>
113-
&nbsp;Generate SQL
114-
</a>
115-
</li>
116-
</ul>
117-
</React.Fragment>
33+
<DatabaseSidebar />
11834
}
11935
{sidebarView === SidebarViewType.SETTINGS &&
120-
<React.Fragment>
121-
<p className="menu-label">
122-
Settings
123-
</p>
124-
<ul className={"menu-list " + styles.menuList}>
125-
{Constants.Build === 'server' &&
126-
<li>
127-
<Link
128-
to={Constants.APP_PATHS.SETTINGS_ACCOUNT.path}
129-
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_ACCOUNT.path) ? 'is-active' : ''}>
130-
Account
131-
</Link>
132-
</li>
133-
}
134-
<li>
135-
<Link
136-
to={Constants.APP_PATHS.SETTINGS_GENERAL.path}
137-
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_GENERAL.path) ? 'is-active' : ''}>
138-
General
139-
</Link>
140-
</li>
141-
<li>
142-
<Link
143-
to={Constants.APP_PATHS.SETTINGS_ADVANCED.path}
144-
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_ADVANCED.path) ? 'is-active' : ''}>
145-
Advanced
146-
</Link>
147-
</li>
148-
</ul>
149-
{Constants.Build === 'server' && currentUser && currentUser.isRoot &&
150-
<React.Fragment>
151-
<p className="menu-label">
152-
Manage Team
153-
</p>
154-
<ul className={"menu-list " + styles.menuList}>
155-
<li>
156-
<Link
157-
to={Constants.APP_PATHS.SETTINGS_USERS.path}
158-
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_USERS.path) ? 'is-active' : ''}>
159-
Manage Users
160-
</Link>
161-
</li>
162-
<li>
163-
<Link
164-
to={Constants.APP_PATHS.SETTINGS_ROLES.path}
165-
className={location.pathname === Constants.APP_PATHS.SETTINGS_ROLES.path ? 'is-active' : ''}>
166-
Manage Roles
167-
</Link>
168-
</li>
169-
</ul>
170-
</React.Fragment>
171-
}
172-
<p className="menu-label">
173-
Info
174-
</p>
175-
<ul className={"menu-list " + styles.menuList}>
176-
<li>
177-
<Link
178-
to={Constants.APP_PATHS.SETTINGS_ABOUT.path}
179-
className={location.pathname === Constants.APP_PATHS.SETTINGS_ABOUT.path ? 'is-active' : ''}>
180-
About
181-
</Link>
182-
</li>
183-
<li>
184-
<Link
185-
to={Constants.APP_PATHS.SETTINGS_SUPPORT.path}
186-
className={location.pathname === Constants.APP_PATHS.SETTINGS_SUPPORT.path ? 'is-active' : ''}>
187-
Support
188-
</Link>
189-
</li>
190-
</ul>
191-
</React.Fragment>
36+
<SettingSidebar />
19237
}
19338
</div>
19439
</aside>

‎frontend/src/components/layouts/sidebars/dbsidebar.tsx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import styles from '../sidebar.module.scss'
2+
import React from 'react'
3+
import { DBConnType, TabType } from "../../../data/defaults"
4+
import { DBConnection, DBDataModel, DBQuery } from "../../../data/models"
5+
import { selectDBConnection, selectDBDQueries, selectDBDataModels } from "../../../redux/dbConnectionSlice"
6+
import { useAppDispatch, useAppSelector } from "../../../redux/hooks"
7+
import { createTab } from "../../../redux/tabsSlice"
8+
9+
10+
type DatabaseSidebarPropType = {}
11+
12+
const DatabaseSidebar = (_: DatabaseSidebarPropType) => {
13+
14+
const dispatch = useAppDispatch()
15+
16+
const dbConnection: DBConnection | undefined = useAppSelector(selectDBConnection)
17+
const dbDataModels: DBDataModel[] = useAppSelector(selectDBDataModels)
18+
const dbQueries: DBQuery[] = useAppSelector(selectDBDQueries)
19+
20+
const openDataTab = (schema: string, name: string) => {
21+
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.DATA, metadata: { schema, name } }))
22+
}
23+
24+
const openQueryTab = (queryId: string) => {
25+
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.QUERY, metadata: { queryId } }))
26+
}
27+
28+
const openConsoleTab = () => {
29+
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.CONSOLE, metadata: {} }))
30+
}
31+
32+
const openGenerateSQLTab = () => {
33+
dispatch(createTab({ dbConnId: dbConnection!.id, tabType: TabType.GENSQL, metadata: {} }))
34+
}
35+
36+
37+
return (
38+
<React.Fragment>
39+
<p className="menu-label">
40+
Data Models
41+
</p>
42+
<ul className={"menu-list " + styles.menuList}>
43+
{dbDataModels.map((dataModel: DBDataModel) => {
44+
const label = dbConnection!.type === DBConnType.POSTGRES ? `${dataModel.schemaName}.${dataModel.name}` : `${dataModel.name}`
45+
return (
46+
<li key={dataModel.schemaName + dataModel.name}>
47+
<a onClick={() => openDataTab(dataModel.schemaName ?? "", dataModel.name)}>
48+
{label}
49+
</a>
50+
</li>
51+
)
52+
})}
53+
</ul>
54+
<p className="menu-label">
55+
Queries
56+
</p>
57+
<ul className={"menu-list " + styles.menuList}>
58+
{dbQueries.map((dbQuery: DBQuery) => {
59+
return (
60+
<li key={dbQuery.id}>
61+
<a onClick={() => openQueryTab(dbQuery.id)}>
62+
{dbQuery.name}
63+
</a>
64+
</li>
65+
)
66+
})}
67+
<li>
68+
<a onClick={() => openQueryTab("new")}>
69+
<span className="icon">
70+
<i className="fas fa-plus-circle"></i>
71+
</span>
72+
&nbsp;New Query
73+
</a>
74+
</li>
75+
</ul>
76+
<p className="menu-label">
77+
Toolbox
78+
</p>
79+
<ul className={"menu-list " + styles.menuList}>
80+
<li>
81+
<a onClick={() => openConsoleTab()}>
82+
<span className="icon">
83+
<i className="fas fa-terminal"></i>
84+
</span>
85+
&nbsp;Console
86+
</a>
87+
</li>
88+
<li>
89+
<a onClick={() => openGenerateSQLTab()}>
90+
<span className="icon">
91+
<i className="fas fa-magic"></i>
92+
</span>
93+
&nbsp;Generate SQL
94+
</a>
95+
</li>
96+
</ul>
97+
</React.Fragment>
98+
)
99+
100+
}
101+
102+
export default DatabaseSidebar

‎frontend/src/components/layouts/sidebars/settingsidebar.tsx

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import styles from '../sidebar.module.scss'
2+
import React from 'react'
3+
import { Link } from "react-router-dom"
4+
import Constants from "../../../constants"
5+
import { User } from '../../../data/models'
6+
import { useAppSelector } from '../../../redux/hooks'
7+
import { selectCurrentUser } from '../../../redux/currentUserSlice'
8+
9+
10+
type SettingSidebarPropType = {}
11+
12+
const SettingSidebar = (_: SettingSidebarPropType) => {
13+
14+
const currentUser: User = useAppSelector(selectCurrentUser)
15+
16+
return (
17+
<React.Fragment>
18+
<p className="menu-label">
19+
Settings
20+
</p>
21+
<ul className={"menu-list " + styles.menuList}>
22+
{Constants.Build === 'server' &&
23+
<li>
24+
<Link
25+
to={Constants.APP_PATHS.SETTINGS_ACCOUNT.path}
26+
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_ACCOUNT.path) ? 'is-active' : ''}>
27+
Account
28+
</Link>
29+
</li>
30+
}
31+
<li>
32+
<Link
33+
to={Constants.APP_PATHS.SETTINGS_GENERAL.path}
34+
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_GENERAL.path) ? 'is-active' : ''}>
35+
General
36+
</Link>
37+
</li>
38+
<li>
39+
<Link
40+
to={Constants.APP_PATHS.SETTINGS_ADVANCED.path}
41+
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_ADVANCED.path) ? 'is-active' : ''}>
42+
Advanced
43+
</Link>
44+
</li>
45+
</ul>
46+
{Constants.Build === 'server' && currentUser && currentUser.isRoot &&
47+
<React.Fragment>
48+
<p className="menu-label">
49+
Manage Team
50+
</p>
51+
<ul className={"menu-list " + styles.menuList}>
52+
<li>
53+
<Link
54+
to={Constants.APP_PATHS.SETTINGS_USERS.path}
55+
className={location.pathname.startsWith(Constants.APP_PATHS.SETTINGS_USERS.path) ? 'is-active' : ''}>
56+
Manage Users
57+
</Link>
58+
</li>
59+
<li>
60+
<Link
61+
to={Constants.APP_PATHS.SETTINGS_ROLES.path}
62+
className={location.pathname === Constants.APP_PATHS.SETTINGS_ROLES.path ? 'is-active' : ''}>
63+
Manage Roles
64+
</Link>
65+
</li>
66+
</ul>
67+
</React.Fragment>
68+
}
69+
<p className="menu-label">
70+
Info
71+
</p>
72+
<ul className={"menu-list " + styles.menuList}>
73+
<li>
74+
<Link
75+
to={Constants.APP_PATHS.SETTINGS_ABOUT.path}
76+
className={location.pathname === Constants.APP_PATHS.SETTINGS_ABOUT.path ? 'is-active' : ''}>
77+
About
78+
</Link>
79+
</li>
80+
<li>
81+
<Link
82+
to={Constants.APP_PATHS.SETTINGS_SUPPORT.path}
83+
className={location.pathname === Constants.APP_PATHS.SETTINGS_SUPPORT.path ? 'is-active' : ''}>
84+
Support
85+
</Link>
86+
</li>
87+
</ul>
88+
</React.Fragment>
89+
)
90+
91+
}
92+
93+
export default SettingSidebar

0 commit comments

Comments
 (0)