add ci

Author: IGoRFonin

.github/workflows/ci.yaml

@@ -0,0 +1,42 @@
+name: test and release
+
+on: push
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: '16.x'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Linting sources
+        run: yarn lint
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Tests
+        run: yarn test
+
+      - name: Zip artifact for deployment
+        run: zip release.zip ./build/* -r
+        if: startsWith(github.ref, 'refs/tags/')
+
+      - name: Release
+        if: startsWith(github.ref, 'refs/tags/')
+        uses: softprops/action-gh-release@v1
+        with:
+          files: release.zip

package.json

@@ -150,7 +150,7 @@
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
-    "testRunner": "/Users/ifonin/mp/mf/hoverfly-ui/node_modules/jest-circus/runner.js",
+    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
     "transform": {
       "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/config/jest/babelTransform.js",
       "^.+\\.p?css$": "<rootDir>/config/jest/cssTransform.js",

src/components/Logs/Logs.tsx

@@ -29,12 +29,12 @@ const Logs: React.FC<{ isActive: boolean }> = ({ isActive }) => {
     const [time, setTime] = React.useState<Date | undefined>(undefined);
     const [fieldLimit, setFieldLimit] = React.useState<number | undefined>(undefined);
     const [limit, setLimit] = React.useState<number | undefined>(undefined);
-    const [isChanged, setIsChaged] = React.useState<boolean>(false);
+    const [isChanged, setIsChanged] = React.useState<boolean>(false);
     const tmpDiv = React.useRef<HTMLDivElement>(document.createElement('div'));
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleChangeLimit = React.useCallback(
         debounce((value: number | undefined) => {
-            setIsChaged(true);
+            setIsChanged(true);
             setLimit(value);
         }, DEBOUNCE_MILLISECONDS),
         [],
@@ -43,15 +43,15 @@ const Logs: React.FC<{ isActive: boolean }> = ({ isActive }) => {
     const handleChangeFieldLimit = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
         const value = getNumber(e.target.value);
         setFieldLimit(value);
-        setIsChaged(true);
+        setIsChanged(true);
         handleChangeLimit(value);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const handleSubmit = useCallback(() => {
-        setIsChaged(false);
+        setIsChanged(false);
         dispatch(getLogsAsync(time ? { from: time.getTime() / TIMESTAMP_DIVIDER, limit } : { limit }));
-    }, [limit, time]);
+    }, [dispatch, limit, time]);
 
     function handleChangeTime(value: Date) {
         setTime(value);
@@ -70,6 +70,7 @@ const Logs: React.FC<{ isActive: boolean }> = ({ isActive }) => {
         if (logsStore.type === 'success') {
             setState(logsStore.value.logs || []);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [logsStore.type]);
 
     const renderAdditional = (log: LogsItem) => {
@@ -125,7 +126,7 @@ const Logs: React.FC<{ isActive: boolean }> = ({ isActive }) => {
                 />
             </div>
         ),
-        [time, statusState, fieldLimit, isChanged, handleChangeFieldLimit, handleSubmit, logsStore.type],
+        [time, statusState, fieldLimit, isChanged, handleChangeFieldLimit, handleSubmit],
     );
 
     const renderLogs = useMemo(

src/components/NotificationContent/NotificationContent.pcss

@@ -26,8 +26,8 @@ $(b) {
     }
 
     &__content {
-        max-width: 300px;
         flex-grow: 1;
+        max-width: 300px;
         padding: 8px 0;
     }
 

src/components/ServerSettings/sections/ServerSettingsMode/ServerSettingsMode.tsx

@@ -89,6 +89,7 @@ const ServerSettingsMode: React.FC = (): JSX.Element => {
         if (modeState.type === 'success') {
             setModeState(modeState.value.mode);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [modeState.type, setModeState]);
 
     useEffect(() => {

src/components/TopBar/TopBar.tsx

@@ -43,7 +43,7 @@ const TopBar: React.FC<{ isLogin?: boolean }> = ({ isLogin }) => {
         if (mainInfo.type === 'success') {
             dispatch(setUserName());
         }
-    }, [mainInfo.type]);
+    }, [dispatch, mainInfo.type]);
 
     const preloader = <Preloader sizeAll="small" color="black" className={cn('button-preloader')} />;