typescript on frontend

api/package.json

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

api/tsconfig.json

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

api/yarn.lock

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

web/package.json

@@ -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"
   }
 }

web/src/App.test.js

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

web/src/FilesTabsPanel.js

@@ -1,13 +1,13 @@
-import React from "react";
+import React from 'react';
-import styled from "styled-components";
+import styled from 'styled-components';
-import theme from "./theme";
+import theme from './theme';
 
-import { TableIcon } from "./icons";
+import { TableIcon } from './icons';
 
 const files = [
-  { name: "app.js" },
+  { name: 'app.js' },
-  { name: "BranchCategory", type: "table", selected: true },
+  { name: 'BranchCategory', type: 'table', selected: true },
-  { name: "ApplicationList" }
+  { 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 => (
+  return (
+    <>
+      {files.map(file => (
         <FileTabItem {...file} key={file.name}>
           <TableIcon />
           <FileNameWrapper>{file.name}</FileNameWrapper>
         </FileTabItem>
-  ));
+      ))}
+    </>
+  );
 }

web/src/Screen.js

@@ -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>
     </>
   );

web/src/appobj/AppObjectList.js

@@ -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} />;

web/src/modals/ConnectionModal.js

@@ -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 => {

web/src/modals/DropDownMenu.js

@@ -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

web/src/react-app-env.d.ts

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

web/src/utility/SocketProvider.js

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

web/src/utility/globalState.js

@@ -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);

web/src/utility/useFetch.js

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

web/src/widgets/WidgetIconPanel.js

@@ -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 }) => (
+  return (
+    <>
+      {widgets.map(({ icon, name }) => (
         <IconWrapper
           key={icon}
+          // @ts-ignore
           isSelected={name === currentWidget}
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
         >
           <FontIcon name={icon} />
         </IconWrapper>
-  ));
+      ))}
+    </>
+  );
 }

web/tsconfig.json

@@ -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"
+  ]
+}

web/yarn.lock

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