dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-17 22:36:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

typescript on frontend

Browse Source
This commit is contained in:
Jan Prochazka
2020-01-09 22:30:53 +01:00
parent 20a55fdd7c
commit c819aac098
17 changed files with 139 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
api/package.json
View File

@@ -22,6 +22,7 @@
"ts": "tsc"
},
"devDependencies": {
"@types/lodash": "^4.14.149",
"nodemon": "^2.0.2",
"typescript": "^3.7.4"
}

7
api/tsconfig.json
View File

@@ -5,10 +5,7 @@
"checkJs": true,
"noEmit": true
},
"files": [
"src/index.js",
"src/engines/mssql/index.js",
"src/engines/mysql/index.js",
"src/engines/postgres/index.js"
"include": [
"src"
]
}

5
api/yarn.lock
View File

@@ -46,6 +46,11 @@
esutils "^2.0.2"
js-tokens "^4.0.0"
"@types/lodash@^4.14.149":
version "4.14.149"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
"@types/node@*":
version "13.1.2"
resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.2.tgz#fe94285bf5e0782e1a9e5a8c482b1c34465fa385"

8
web/package.json
View File

@@ -23,7 +23,8 @@
"start:silent": "cross-env BROWSER=none PORT=5000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"ts": "tsc"
},
"browserslist": {
"production": [
@@ -38,6 +39,9 @@
]
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.12.0"
"@fortawesome/fontawesome-free": "^5.12.0",
"@types/react": "^16.9.17",
"@types/styled-components": "^4.4.2",
"typescript": "^3.7.4"
}
}

2
web/src/App.test.js
View File

@@ -1,3 +1,5 @@
// @ts-nocheck
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

33
web/src/FilesTabsPanel.js
View File

@@ -1,13 +1,13 @@
import React from "react";
import styled from "styled-components";
import theme from "./theme";
import React from 'react';
import styled from 'styled-components';
import theme from './theme';
import { TableIcon } from "./icons";
import { TableIcon } from './icons';
const files = [
{ name: "app.js" },
{ name: "BranchCategory", type: "table", selected: true },
{ name: "ApplicationList" }
{ name: 'app.js' },
{ name: 'BranchCategory', type: 'table', selected: true },
{ name: 'ApplicationList' },
];
const FileTabItem = styled.div`
@@ -21,7 +21,8 @@ const FileTabItem = styled.div`
color: ${theme.tabsPanel.hoverFont};
}
background-color: ${props =>
props.selected ? theme.mainArea.background : "inherit"};
// @ts-ignore
props.selected ? theme.mainArea.background : 'inherit'};
`;
const FileNameWrapper = styled.span`
@@ -29,10 +30,14 @@ const FileNameWrapper = styled.span`
`;
export default function FilesTabsPanel() {
return files.map(file => (
<FileTabItem {...file} key={file.name}>
<TableIcon />
<FileNameWrapper>{file.name}</FileNameWrapper>
</FileTabItem>
));
return (
<>
{files.map(file => (
<FileTabItem {...file} key={file.name}>
<TableIcon />
<FileNameWrapper>{file.name}</FileNameWrapper>
</FileTabItem>
))}
</>
);
}

24
web/src/Screen.js
View File

@@ -9,7 +9,10 @@ import WidgetContainer from './widgets/WidgetContainer';
const BodyDiv = styled.div`
position: fixed;
top: ${theme.tabsPanel.height}px;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
left: ${props =>
theme.widgetMenu.iconSize +
// @ts-ignore
props.leftPanelWidth}px;
bottom: ${theme.statusBar.height}px;
right: 0;
background-color: ${theme.mainArea.background};
@@ -38,7 +41,10 @@ const TabsPanel = styled.div`
display: flex;
position: fixed;
top: 0;
left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
left: ${props =>
theme.widgetMenu.iconSize +
// @ts-ignore
props.leftPanelWidth}px;
height: ${theme.tabsPanel.height}px;
right: 0;
background-color: ${theme.tabsPanel.background};
@@ -53,7 +59,7 @@ const StausBar = styled.div`
background-color: ${theme.statusBar.background};
`;
export default function Screen({ children }) {
export default function Screen({ children = undefined }) {
const currentWidget = useCurrentWidget();
const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
return (
@@ -66,10 +72,18 @@ export default function Screen({ children }) {
<WidgetContainer />
</LeftPanel>
)}
<TabsPanel leftPanelWidth={leftPanelWidth}>
<TabsPanel
// @ts-ignore
leftPanelWidth={leftPanelWidth}
>
<FilesTabsPanel></FilesTabsPanel>
</TabsPanel>
<BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
<BodyDiv
// @ts-ignore
leftPanelWidth={leftPanelWidth}
>
{children}
</BodyDiv>
<StausBar></StausBar>
</>
);

2
web/src/appobj/AppObjectList.js
View File

@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { showMenu } from '../modals/DropDownMenu';
import { AppObjectCore } from './AppObjects';
export function AppObjectList({ list, makeAppObj, SubItems, onObjectClick }) {
export function AppObjectList({ list, makeAppObj, SubItems = undefined, onObjectClick = undefined }) {
return (list || []).map(x => {
const appobj = makeAppObj(x);
let res = <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} onClick={onObjectClick} />;

2
web/src/modals/ConnectionModal.js
View File

@@ -6,7 +6,7 @@ import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
// import FormikForm from '../utility/FormikForm';
export default function ConnectionModal({ modalState, connection }) {
export default function ConnectionModal({ modalState, connection = undefined }) {
const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
const handleTest = async values => {

4
web/src/modals/DropDownMenu.js
View File

@@ -39,7 +39,7 @@ const StyledLink = styled.a`
}
`;
export function DropDownMenuItem({ children, keyText, onClick }) {
export function DropDownMenuItem({ children, keyText = undefined, onClick }) {
const handleMouseEnter = () => {
// if (this.context.parentMenu) this.context.parentMenu.closeSubmenu();
};
@@ -212,7 +212,7 @@ function showMenuCore(left, top, contentHolder, closeCallback = null) {
};
document.body.appendChild(container);
ReactDOM.render(
<ContextMenu left={left} top={top} container={container} closeCallback={closeCallback}>
<ContextMenu left={left} top={top}>
{contentHolder}
</ContextMenu>,
container

1
web/src/react-app-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="react-scripts" />

2
web/src/utility/SocketProvider.js
View File

@@ -1,7 +1,7 @@
import io from 'socket.io-client';
import React from 'react';
const SocketContext = React.createContext();
const SocketContext = React.createContext(null);
export function SocketProvider({ children }) {
const [socket, setSocket] = React.useState();

2
web/src/utility/globalState.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
function createGlobalState(defaultValue) {
const Context = React.createContext();
const Context = React.createContext(null);
function Provider({ children }) {
const [currentvalue, setCurrentValue] = React.useState(defaultValue);

2
web/src/utility/useFetch.js
View File

@@ -2,7 +2,7 @@ import React from 'react';
import axios from './axios';
import useSocket from './SocketProvider';
export default function useFetch({ defaultValue, reloadTrigger, url, ...config }) {
export default function useFetch({ url, defaultValue = undefined, reloadTrigger = undefined, ...config }) {
const [value, setValue] = React.useState(defaultValue);
const [loadCounter, setLoadCounter] = React.useState(0);
const socket = useSocket();

27
web/src/widgets/WidgetIconPanel.js
View File

@@ -11,7 +11,9 @@ const IconWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
background-color: ${props => (props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit')};
background-color: ${props =>
// @ts-ignore
props.isSelected ? theme.widgetMenu.backgroundSelected : 'inherit'};
&:hover {
background-color: ${theme.widgetMenu.backgroundHover};
}
@@ -44,13 +46,18 @@ export default function WidgetIconPanel() {
const currentWidget = useCurrentWidget();
const setCurrentWidget = useSetCurrentWidget();
return widgets.map(({ icon, name }) => (
<IconWrapper
key={icon}
isSelected={name === currentWidget}
onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
>
<FontIcon name={icon} />
</IconWrapper>
));
return (
<>
{widgets.map(({ icon, name }) => (
<IconWrapper
key={icon}
// @ts-ignore
isSelected={name === currentWidget}
onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
>
<FontIcon name={icon} />
</IconWrapper>
))}
</>
);
}

28
web/tsconfig.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"module": "esnext",
"allowJs": true,
"checkJs": true,
"noEmit": true,
"jsx": "react",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"moduleResolution": "Node",
"noImplicitAny": false,
"strictNullChecks": false,
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true
},
"include": [
"src"
]
}

33
web/yarn.lock
View File

@@ -1387,6 +1387,14 @@
"@types/minimatch" "*"
"@types/node" "*"
"@types/hoist-non-react-statics@*":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.1"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -1444,7 +1452,15 @@
dependencies:
"@types/react" "*"
"@types/react@*":
"@types/react-native@*":
version "0.60.30"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.30.tgz#33ab525194142a5e3b428e60f0e77e0d1dbd253d"
integrity sha512-Ho41o+6NBlv1K5q2Z+NREST3UsGahXn4V1to2D2U4bcn1hO5MGjzOdkruzsnN10WiP8hW33jvQE6eERClgwvJg==
dependencies:
"@types/prop-types" "*"
"@types/react" "*"
"@types/react@*", "@types/react@^16.9.17":
version "16.9.17"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
integrity sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==
@@ -1457,6 +1473,16 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
"@types/styled-components@^4.4.2":
version "4.4.2"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.2.tgz#709fa7afd7dc0963b8316a0159240f0fe19a026d"
integrity sha512-dngFx2PuGoy0MGE68eHayAmJvLSqWrnTe9w+DnQruu8PS+waWEsKmoBRhkzL2h2pK1OJhzJhVfuiz+oZa4etpA==
dependencies:
"@types/hoist-non-react-statics" "*"
"@types/react" "*"
"@types/react-native" "*"
csstype "^2.2.0"
"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0":
version "6.11.0"
resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.11.0.tgz#777e3ef44cb48f2430e3fad6a2053ec39004a5d3"
@@ -10191,6 +10217,11 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typescript@^3.7.4:
version "3.7.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.4.tgz#1743a5ec5fef6a1fa9f3e4708e33c81c73876c19"
integrity sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==
uglify-js@3.4.x:
version "3.4.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"