Setup and apply eslint, prettier

.eslintrc

@@ -0,0 +1,24 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 120,
+  "tabWidth": 4
+}

package.json

@@ -9,6 +9,7 @@
   },
   "license": "GPL-3.0",
   "scripts": {
+    "lint": "eslint --ext .ts,.tsx src",
     "dev": "webpack --mode=development",
     "start": "qode --inspect ./dist/index.js",
     "build": "webpack -p",
@@ -43,12 +44,19 @@
     "@types/node-fetch": "^2.5.4",
     "@types/react": "^16.9.17",
     "@types/webpack-env": "^1.14.1",
+    "@typescript-eslint/eslint-plugin": "^2.22.0",
+    "@typescript-eslint/parser": "^2.22.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
     "file-loader": "^5.0.2",
     "fork-ts-checker-webpack-plugin": "^3.1.1",
     "native-addon-loader": "^2.0.1",
+    "prettier": "1.19.1",
     "typescript": "^3.7.4",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.10"

src/app.tsx

@@ -1,24 +1,20 @@
-import React from "react";
-import {observer} from "mobx-react-lite";
-import {useStores} from "./store";
-import {DaemonStatusType} from "./daemon/store";
-import {ConnectView} from "./connect-view";
-import {Spinner} from "./ui-kit/spinner/spinner";
-import {View} from "@nodegui/react-nodegui";
-import {winSize} from "./config";
+import React from "react"
+import { observer } from "mobx-react-lite"
+import { useStores } from "./store"
+import { DaemonStatusType } from "./daemon/store"
+import { ConnectView } from "./connect-view"
+import { Spinner } from "./ui-kit/spinner/spinner"
+import { View } from "@nodegui/react-nodegui"
+import { winSize } from "./config"
 
 export const App = observer(() => {
-    const {daemon} = useStores()
+    const { daemon } = useStores()
     if (daemon.status == DaemonStatusType.Down) {
         return (
             <View style={`background: #ecf0f1;`}>
-                <Spinner
-                    active
-                    top={(winSize.height - 200) / 2}
-                    left={(winSize.width - 200) / 2}
-                />
+                <Spinner active top={(winSize.height - 200) / 2} left={(winSize.width - 200) / 2} />
             </View>
         )
     }
-    return <ConnectView/>
+    return <ConnectView />
 })

src/config.ts

@@ -1 +1 @@
-export const winSize = {width: 800, height: 600};
+export const winSize = { width: 800, height: 600 }

src/connect-view.tsx

@@ -1,32 +1,13 @@
-import {ScrollArea, View} from "@nodegui/react-nodegui";
-import {Proposals} from "./proposals/proposals";
-import {ConnectionLocation} from "./location/connection-location";
-import {ConnectionStatus} from "./connection/connection-status";
-import {Disconnect} from "./connection/disconnect-button";
-import React from "react";
-import {winSize} from "./config";
-import {ConnectionStatusText} from "./connection/connection-status-text";
-
-export const ConnectView = () => {
-    return (
-        <View id="main" styleSheet={styleSheet}>
-            <View id="left">
-                <ScrollArea id="scroll">
-                    <View style={`width: 294;`}><Proposals/></View>
-                </ScrollArea>
-            </View>
-            <View id="right">
-                <ConnectionLocation />
-                <ConnectionStatus/>
-                <ConnectionStatusText/>
-                <Disconnect/>
-            </View>
-        </View>
-    )
-}
+import { ScrollArea, View } from "@nodegui/react-nodegui"
+import { Proposals } from "./proposals/comp/proposals"
+import { ConnectionLocation } from "./location/comp/connection-location"
+import { ConnectionStatus } from "./connection/comp/connection-status"
+import { Disconnect } from "./connection/comp/disconnect-button"
+import React from "react"
+import { winSize } from "./config"
+import { ConnectionStatusText } from "./connection/comp/connection-status-text"
 
 //     background-color: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #412361, stop: 1 #9b1c4d);
-
 const styleSheet = `
 #main {
     width: ${winSize.width}px;
@@ -50,4 +31,24 @@ const styleSheet = `
     padding-top: 120px;
     background-color: #ecf0f1;
 }
-`;
+`
+
+export const ConnectView: React.FC = () => {
+    return (
+        <View id="main" styleSheet={styleSheet}>
+            <View id="left">
+                <ScrollArea id="scroll">
+                    <View style={`width: 294;`}>
+                        <Proposals />
+                    </View>
+                </ScrollArea>
+            </View>
+            <View id="right">
+                <ConnectionLocation />
+                <ConnectionStatus />
+                <ConnectionStatusText />
+                <Disconnect />
+            </View>
+        </View>
+    )
+}

src/connection/connection-status-text.tsx → src/connection/comp/connection-status-text.tsx

@@ -1,11 +1,13 @@
-import React from "react";
-import {Text} from "@nodegui/react-nodegui"
-import {useStores} from "../store";
-import {observer} from "mobx-react-lite";
-import {ConnectionStatus as ConnectionStatusType} from "mysterium-vpn-js/lib/connection/status";
+import React from "react"
+import { Text } from "@nodegui/react-nodegui"
+import { useStores } from "../../store"
+import { observer } from "mobx-react-lite"
+import { ConnectionStatus as ConnectionStatusType } from "mysterium-vpn-js"
 
 export const ConnectionStatusText = observer(() => {
-    const {connection: {status}} = useStores()
+    const {
+        connection: { status },
+    } = useStores()
     let statusText = ""
     switch (status) {
         case ConnectionStatusType.CONNECTED:
@@ -23,7 +25,9 @@ export const ConnectionStatusText = observer(() => {
             width: 400;
             height: 25;
             qproperty-alignment: 'AlignHCenter';
-        `}>{statusText}</Text>
+        `}
+        >
+            {statusText}
+        </Text>
     )
 })
-

src/connection/comp/connection-status.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { View } from "@nodegui/react-nodegui"
+import { useStores } from "../../store"
+import { observer } from "mobx-react-lite"
+import { Spinner } from "../../ui-kit/spinner/spinner"
+import { ConnectionStatus as ConnectionStatusType } from "mysterium-vpn-js"
+
+const style = `
+#container {
+    flex-direction: "column";
+}
+#text {
+    font-size: 16px;
+    qproperty-alignment: 'AlignHCenter';
+}
+`
+
+export const ConnectionStatus = observer(() => {
+    const {
+        connection: { status },
+    } = useStores()
+    const spin = [ConnectionStatusType.CONNECTING, ConnectionStatusType.DISCONNECTING].includes(status)
+    return (
+        <View id="container" styleSheet={style}>
+            <View style={`width: 200; height: 200`}>
+                <Spinner active={spin} top={0} left={0} />
+            </View>
+        </View>
+    )
+})

src/connection/disconnect-button.tsx → src/connection/comp/disconnect-button.tsx

@@ -1,16 +1,19 @@
-import {Button, useEventHandler, View} from "@nodegui/react-nodegui";
-import {ConnectionStatus as ConnectionStatusType} from "mysterium-vpn-js/lib/connection/status";
-import React from "react";
-import {observer} from "mobx-react-lite";
-import {useStores} from "../store";
+import { Button, useEventHandler, View } from "@nodegui/react-nodegui"
+import { ConnectionStatus as ConnectionStatusType } from "mysterium-vpn-js"
+import React from "react"
+import { observer } from "mobx-react-lite"
+import { useStores } from "../../store"
 
 export const Disconnect = observer(() => {
     const { connection } = useStores()
-    const clickHandler = useEventHandler({
-        ['clicked']: async () => {
-            await connection.disconnect()
-        }
-    }, [])
+    const clickHandler = useEventHandler(
+        {
+            ["clicked"]: async () => {
+                await connection.disconnect()
+            },
+        },
+        [],
+    )
     return (
         <View id="connect">
             {connection.status != ConnectionStatusType.NOT_CONNECTED && (
@@ -26,4 +29,3 @@ export const Disconnect = observer(() => {
         </View>
     )
 })
-