typescript on frontend

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 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>
+      ))}
+    </>
+  );
 }

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 }) => (
-    <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>
+      ))}
+    </>
+  );
 }