Merge pull request #119 from slashbaseide/develop

Merge develop

frontend/src/components/dbfragments/cheatsheet/cheatsheet.tsx

@@ -1,4 +1,3 @@
-import styles from './cheatsheet.module.scss'
 import React, { useRef, useState } from 'react'
 import { DBConnType } from '../../../data/defaults'
 import CheatsheetCommand from './command'

frontend/src/components/dbfragments/history.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import { useContext, useEffect } from 'react'
 import { DBConnection, Tab } from '../../data/models'
 import { selectDBConnection } from '../../redux/dbConnectionSlice'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
@@ -38,11 +38,24 @@ const DBHistoryFragment = ({ }: DBHistoryPropType) => {
         }
     }
 
+    function refreshHandler() {
+      dispatch(reset());
+      fetchDBQueryLogs();
+    }
+
     return (
         <div className={currentTab.isActive ? "db-tab-active" : "db-tab"}>
             {dbConnection &&
-                <React.Fragment>
-                    <h1>Showing History in {dbConnection.name}</h1>
+                <>
+                     <div className="is-flex is-justify-content-space-between	">
+                        <h1>Showing History in {dbConnection.name}</h1>
+                        <button className="button is-flex" onClick={refreshHandler}>
+                           <span className="icon is-small">
+                              <i className="fas fa-sync" />
+                           </span>
+                           <span>Refresh</span>
+                        </button>
+                     </div>
                     <br />
                     <InfiniteScroll
                         dataLength={dbQueryLogs.length}
@@ -62,8 +75,7 @@ const DBHistoryFragment = ({ }: DBHistoryPropType) => {
                     >
                         <table className={"table is-bordered is-striped is-narrow is-hoverable is-fullwidth"}>
                             <tbody>
-                                {dbQueryLogs.map((log) => {
-                                    return (
+                                {dbQueryLogs.map((log) =>  (
                                         <tr key={log.id}>
                                             <td>
                                                 <code>{log.query}</code>
@@ -73,15 +85,14 @@ const DBHistoryFragment = ({ }: DBHistoryPropType) => {
                                             </td>
                                         </tr>
                                     )
-                                })}
+                                )}
                             </tbody>
                         </table>
                     </InfiniteScroll>
-                </React.Fragment>
+                </>
             }
         </div>
     )
 }
 
-
-export default DBHistoryFragment
+export default DBHistoryFragment

frontend/src/components/dbfragments/jsontable/jsontable.tsx

@@ -62,7 +62,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader,
 
     const changeFilter = () => {
         let filter: string[] | undefined = undefined
-        let filterText = filterRef.current!.value.trim()
+        const filterText = filterRef.current!.value.trim()
         if (filterText !== '' && filterText.startsWith("{") && filterText.endsWith("}")) {
             filter = [filterText]
         }
@@ -74,7 +74,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader,
             return
         }
         let sort: string[] | undefined = undefined
-        let sortText = sortRef.current!.value.trim()
+        const sortText = sortRef.current!.value.trim()
         if (sortText !== '' && sortText.startsWith("{") && sortText.endsWith("}")) {
             sort = [sortText]
         }
@@ -107,10 +107,11 @@ const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader,
         rows,
         prepareRow,
         state,
-    } = useTable<any>({
+    } = useTable({
         columns,
         data,
         defaultColumn,
+        initialState: { selectedRowIds : {}},
         ...{ editingCellIndex, startEditing, onSaveCell }
     }, useRowSelect, hooks => {
         if (isInteractive && isEditing)
@@ -127,7 +128,7 @@ const JsonTable = ({ queryData, dbConnection, mName, isInteractive, showHeader,
 
     const newState: any = state // temporary typescript hack
     const selectedRows: number[] = Object.keys(newState.selectedRowIds).map(x => parseInt(x))
-    const selectedUnderscoreIDs = rows.filter((_, i) => selectedRows.includes(i)).map(x => x.original['_id']).filter(x => x)
+    const selectedUnderscoreIDs = rows.filter((_, i) => selectedRows.includes(i)).map(x => (x.original as any)['_id']).filter(x => x)
 
     const deleteRows = async () => {
         if (selectedUnderscoreIDs.length > 0) {
@@ -275,4 +276,4 @@ const CellSelectionComponent = ({ row }: any) => (
     </div>
 )
 
-export default JsonTable
+export default JsonTable

frontend/src/components/dbfragments/query.tsx

@@ -1,7 +1,7 @@
 import styles from './query.module.scss'
 import React, { useContext, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import { DBConnection, DBQuery, DBQueryData, DBQueryResult, Tab } from '../../data/models'
+import { DBConnection, DBQueryData, DBQueryResult, Tab } from '../../data/models'
 import QueryEditor from './queryeditor/queryeditor'
 import { selectDBConnection } from '../../redux/dbConnectionSlice'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
@@ -14,10 +14,7 @@ import { closeTab, updateActiveTab } from '../../redux/tabsSlice'
 import TabContext from '../layouts/tabcontext'
 
 
-type DBQueryPropType = {
-}
-
-const DBQueryFragment = (_: DBQueryPropType) => {
+const DBQueryFragment = () => {
 
     const dispatch = useAppDispatch()
 

frontend/src/components/dbfragments/showdata.tsx

@@ -11,11 +11,7 @@ import JsonTable from './jsontable/jsontable'
 import { getDBDataInDataModel, selectIsFetchingQueryData, selectQueryData } from '../../redux/dataModelSlice'
 import TabContext from '../layouts/tabcontext'
 
-type DBShowDataPropType = {
-
-}
-
-const DBShowDataFragment = (_: DBShowDataPropType) => {
+const DBShowDataFragment = () => {
 
     const dispatch = useAppDispatch()
 

frontend/src/components/dbfragments/showmodel.tsx

@@ -5,11 +5,7 @@ import { useAppSelector } from '../../redux/hooks'
 import TabContext from '../layouts/tabcontext'
 import DataModel from './datamodel/datamodel'
 
-type DBShowModelPropType = {
-
-}
-
-const DBShowModelFragment = (_: DBShowModelPropType) => {
+const DBShowModelFragment = () => {
 
     const dbConnection: DBConnection | undefined = useAppSelector(selectDBConnection)
     const currentTab: Tab = useContext(TabContext)!

frontend/src/components/dbfragments/table/addmodal.tsx

@@ -2,7 +2,7 @@ import styles from './table.module.scss'
 import React, { useContext, useState } from 'react'
 import { ApiResult, AddDataResponse, DBConnection, DBQueryData, Tab } from '../../../data/models'
 import toast from 'react-hot-toast'
-import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
+import { useAppDispatch } from '../../../redux/hooks'
 import { addDBData, setQueryData } from '../../../redux/dataModelSlice'
 import { DBConnType } from '../../../data/defaults'
 import TabContext from '../../layouts/tabcontext'

frontend/src/components/dbfragments/table/table.tsx

@@ -100,10 +100,11 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isInteractive, showHea
         rows,
         prepareRow,
         state,
-    } = useTable<any>({
+    } = useTable({
         columns,
         data,
         defaultColumn,
+        initialState: { selectedRowIds: {}},
         ...{ editCell, resetEditCell, onSaveCell }
     },
         useRowSelect,
@@ -121,12 +122,10 @@ const Table = ({ queryData, dbConnection, mSchema, mName, isInteractive, showHea
         }
     )
 
-    const newState: any = state // temporary typescript hack
-    const selectedRowIds: any = newState.selectedRowIds
-    const selectedRows: number[] = Object.keys(selectedRowIds).map(x => parseInt(x))
+    const selectedRows: number[] = Object.keys(state.selectedRowIds).map(x => parseInt(x))
     const selectedIDs = dbConnection.type === DBConnType.POSTGRES ?
-        rows.filter((_, i) => selectedRows.includes(i)).map(x => x.original['0']).filter(x => x)
-        : rows.filter((_, i) => selectedRows.includes(i)).map(x => queryData.pkeys!.map((pkey) => ({ [pkey]: x.original[queryData.columns.findIndex(x => x === pkey)] }))).map(x => x.reduce(((r, c) => Object.assign(r, c)), {})).map(x => JSON.stringify(x))
+        rows.filter((_, i) => selectedRows.includes(i)).map(x => (x.original as any)['0']).filter(x => x)
+        : rows.filter((_, i) => selectedRows.includes(i)).map(x => queryData.pkeys!.map((pkey) => ({ [pkey]: (x.original as any)[queryData.columns.findIndex(x => x === pkey)] }))).map(x => x.reduce(((r, c) => Object.assign(r, c)), {})).map(x => JSON.stringify(x))
 
     const deleteRows = async () => {
         if (dbConnection.type === DBConnType.MYSQL && queryData.pkeys?.length === 0) {
@@ -353,4 +352,4 @@ const CellSelectionComponent = ({ row }: any) => (
 )
 
 
-export default Table
+export default Table

frontend/src/components/layouts/applayout.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useEffect } from 'react'
+import React, { FunctionComponent } from 'react'
 import Header from './header'
 import Footer from './footer'
 import Sidebar from './sidebar'
@@ -7,11 +7,7 @@ import { useAppSelector } from '../../redux/hooks';
 import { selectIsShowingSidebar } from '../../redux/configSlice';
 import TabsBar from './tabsbar';
 
-type PageLayoutPropType = {
-
-}
-
-const AppLayout: FunctionComponent<PageLayoutPropType> = () => {
+const AppLayout: FunctionComponent = () => {
 
     const location = useLocation()
 

frontend/src/components/layouts/footer.tsx

@@ -5,10 +5,7 @@ import Constants from '../../constants'
 import { useEffect } from 'react'
 import { checkConnection, selectDBConnection, selectIsDBConnected, getDBDataModels, resetDBDataModels } from '../../redux/dbConnectionSlice'
 
-
-type FooterPropType = {}
-
-const Footer = (_: FooterPropType) => {
+const Footer = () => {
 
     const navigate = useNavigate()
     const location = useLocation()

frontend/src/components/layouts/header.tsx

@@ -10,11 +10,7 @@ import { selectProjects } from '../../redux/projectsSlice'
 import { selectDBConnection } from '../../redux/dbConnectionSlice'
 import utils from '../../lib/utils'
 
-declare var window: any;
-
-type HeaderPropType = {}
-
-const Header = (_: HeaderPropType) => {
+const Header = () => {
 
     let location = useLocation()
     const navigate = useNavigate()

frontend/src/components/layouts/sidebar.tsx

@@ -16,17 +16,19 @@ enum SidebarViewType {
     SETTINGS = "SETTINGS" // Used to show elements of settings screen
 }
 
-type SidebarPropType = {}
+// type SidebarPropType = {}
 
-const Sidebar = (_: SidebarPropType) => {
+const Sidebar = () => {
 
     const location = useLocation()
-    const { queryId } = useParams()
-    const [searchParams] = useSearchParams()
-    const mschema = searchParams.get("mschema")
-    const mname = searchParams.get("mname")
 
-    let sidebarView: SidebarViewType =
+    // Commenting them as they might be neded in future
+    // const { queryId } = useParams()
+    // const [searchParams] = useSearchParams()
+    // const mschema = searchParams.get("mschema")
+    // const mname = searchParams.get("mname")
+
+    const sidebarView: SidebarViewType =
         (location.pathname.startsWith("/db")) ?
             SidebarViewType.DATABASE : (location.pathname.startsWith("/settings")) ? SidebarViewType.SETTINGS : SidebarViewType.HOME
 

frontend/src/constants.ts

@@ -15,7 +15,7 @@ interface ConstantsType {
 }
 
 declare global {
-    var CONFIG: {
+    const CONFIG: {
         API_HOST: string;
     }
 }

frontend/src/redux/allDBConnectionsSlice.ts

@@ -42,7 +42,7 @@ export const getAllDBConnections = createAsyncThunk(
 
 export const addNewDBConn = createAsyncThunk(
   'allDBConnections/addNewDBConn',
-  async (payload: AddDBConnPayload, { rejectWithValue, getState }: any) => {
+  async (payload: AddDBConnPayload, { rejectWithValue }: any) => {
     const response = await eventService.addNewDBConn(payload)
     if (response.success) {
       const dbConn = response.success ? response.data : null
@@ -60,7 +60,7 @@ export const allDBConnectionSlice = createSlice({
   name: 'allDBConnections',
   initialState,
   reducers: {
-    reset: (state) => initialState
+    reset: () => initialState
   },
   extraReducers: (builder) => {
     builder

frontend/src/redux/projectsSlice.ts

@@ -113,7 +113,7 @@ export const projectsSlice = createSlice({
   name: 'projects',
   initialState,
   reducers: {
-    reset: (state) => initialState
+    reset: () => initialState
   },
   extraReducers: (builder) => {
     builder

frontend/src/styles/globals.css

@@ -110,7 +110,6 @@ code {
   display: flex;
   justify-content: center;
   align-items: center;
-  display: inline-flex;
   border-radius: 100px;
 }