DEV Community: Savchenko Alexander

Mixins with generics in Typescript

Savchenko Alexander — Sun, 19 Jun 2022 15:41:44 +0000

I spend 10h trying to find a solution!
I hope it will help someone

Problem

I have a class with generic type. After wrapping it with a mixin I lost the possibility to define the type

type Data = { id: string } & Record<string, any>

class Store<TData extends Data> {
  constructor(data: TData) {
    super(idKey)
    this.data = data
  }

  getData(): TData {
    return this.data
  }
}

This is how I wrote my mixin at first

type AnyConstructor<A = object> = new (...input: any[]) => A

const Updatable = <T extends AnyConstructor<Store<Data>>>(
  base: T
) => {
  // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37142
  return class StoreUpdatable<TData extends Data> extends base {
    private _listeners: ((arg: this) => void)[]

    constructor(data: StoreData<TData>) {
      super(data)
      this._listeners = []
    }

    update() {
      this._listeners.forEach((fn) => fn(this))
    }
    addUpdateListener(fn: (arg: this) => void) {
      this._listeners.push(fn)
    }
  }
}

As you can see I mistakenly define type Item at the initialization but I need somehow to pass generic

Solution

const Updatable = <TData extends Data, T extends AnyConstructor<Store<TData>>>(
  base: T
) => {
  // @ts-expect-error https://github.com/microsoft/TypeScript/issues/37142
  class StoreUpdatable extends base {
    private _listeners: ((arg: this) => void)[]

    constructor(data: StoreData<TData>) {
      super(data)
      this._listeners = []
    }

    update() {
      this._listeners.forEach((fn) => fn(this))
    }
    addUpdateListener(fn: (arg: this) => void) {
      this._listeners.push(fn)
    }
  }

  return StoreUpdatable as AnyConstructor<StoreUpdatable> 
   & typeof StoreUpdatable & T
}

99% ошибок мы показываем пользователю

Savchenko Alexander — Tue, 11 Jan 2022 06:40:43 +0000

Серверная часть

Часть 1

99% ошибок мы показываем пользователю. Обычно мы выводим их в уведомлении или под невалидным полем. Что же тогда получается? Если мы 99% ошибок показываем пользователю, то может быть стоит создать для них единый формат? Как для бэка, так и для фронта?
Если да, то какие поля будут в объекте ошибки и какие значения принимать?

Давайте создадим класс BaseError и расширим им класс Error. Первое что в ней точно будет так это унаследованное поле message.
Это ошибка для разработчика и логирования! Пользователю мы ее никогда выводить не будем!

Для вывода сообщений пользователю нам понадобится поле _errorCode.
Пример значений:

uniqConstraint
formatConstraint
connection

Теперь значение этого поля мы сможем смапить с сообщениями на фронте:

Ошибка уникальности
Неверный формат
Не удалось подключиться к базе

{
  "_message": "Db error",
  "_errorCode": "connection"
  "_status": 500
}

Это необходимый минимум

Часть 2

Что если нам надо вывести название поля, в котором произошла ошибка?
Добавим поле _key.
А какое значение при этом было?
Добавим поле _value.
Я бы назвал эту ошибку CollectableError.
Так же добавим необязательное поле errors в BaseError, так как нам надо куда-то складывать наши CollectableErrorы.

{
  "_message": "Validation error",
  "_errorCode": "invalid",
  "_status": 401,
  "_errors": {
    "username": {
      "_key": "username",
      "_value": undefined,
      "_errorCode": "validateNotUndefined",
      "_message": "required"
    },
    "password": {
      "_key": "password",
      "_value": 100,
      "_errorCode": "validateString",
      "_message": "not string" 
    }
  }

}

Выводим:

Поле "username" обязательно
Формат "password" должен быть строкой, а получено число

Видите! Нам теперь message вообще не нужен! Мы теперь с легкостью сами можем сгенерировать нужный нам текст.

Я специально не стал класть CollectableError в массив, а положил в обьект по ключу дублирующий key: так намного удобнее получать доступ к ошибке на фронте.

Часть 3

Часто при ошибке валидации нам нужно вывести пользователю значение которое мы ожидаем от него. Это может быть проверка на максимальное/минимальное количество символов или паттерн.
Для этого добавим необязательные поля с абстрактным именем _key2 и _value2.
В маленьком проекте _key2 скорее всего будет принимать лишь несколько имен: pattern, max, min.

{
  "_message": "Validation error",
  "_errorCode": "invalid",
  "_status": 500,
  "_errors": {
    "username": {
      "_key": "username",
      "_value": "nick",
      "_key2": "min",
      "_value2": 5,
      "_errorCode": "validateNotLessThan",
      "_message": "too less symbols"
    },
    "email": {
      "_key": "email",
      "_value": "nick@com",
      "_key2": "pattern",
      "_value2": "@.*?.",
      "_errorCode": "validateByPattern",
      "_message": "does not match the pattern"
    }
  ]
}

Выводим:

Поле "username" должно содержать как минимум 5 символов, получено 4
Поле "email" должно соответствовать паттерну: @.*?.

Клиентская часть

А теперь самое интересное.

Видели последние два примера? Что если валидаторы, которые выкидывают эти ошибки перенести на фронт и начать их использовать? Минимум лишних телодвижений! И если вдруг вы забудете добавить валидатор на клиенте и он сработает на сервере, то всё отработает так будто ничего и не случилось, потому что с сервера прилетит такой же errorCode и мапиться он будет так же.

Такой подход позволяет:

Поддерживать несколько языков (весь текст в ошибках должен быть на английском, мапа с языками хранится на фронте)
Хранить все сообщения в одном месте
Не отвлекаться при разработке бизнес логики на выдумывание что написать в сообщении, чтобы было ТОЧНО понятно
Этих данных более чем достаточно чтобы пользователю ТОЧНО было понятно что произошло
Всё ваше приложение в курсе формата вашей ошибки
Простота

Когда же стоит выкидывать Error? Наверное только когда вы не сможете вывести это сообщение пользователю и не сможете обработать ошибку.

Дополнительно

Перехват ошибок

Для перехвата прочих ошибок (базы, языка) нам понадобится написать мидлвар для koa или фильтр для nest. В них мы будем конвертировать неугодный нам формат ошибок в наш собственный

Вложенные ошибки

Вложенность ошибок я бы посоветовал делать исходя из формата вложенности вашей библиотеки стэйта формы.
Пример для final-form:

{
   "_errors": { 
     "address": {
       "address": {
       "postcode": {
         "_key": "postcode",
         "_value": 446303,
         "_errorCode": "validateString"
       }
     }
   }
}

ОГРАНИЧЕНИЯ: если ваше поле будет иметь имя "key", то оно будет конфликтовать с полем ошибки "key", поэтому стоит избегать такого названия или именовать поле в ошибке как "_key".

Временно оставлю ссылочку на то что у меня получилось на сервере https://github.com/savchenko91/auth-server/blob/master/src/utils/errors.ts

cisco any connect mac through terminal with no password

Savchenko Alexander — Sat, 27 Nov 2021 18:32:59 +0000

WHYYYY???

Are you tired endlessly to enter password? You hate ugly GUI? Oh man, I understand you :/

You need 2 script, 3 commands to remove GUI from startup and 1 command to connect

How to remove GUI from startup

This command must be enough

launchctl unload -w /Library/LaunchAgents/com.cisco.anyconnect.gui.plist

but if not try also these

rm -f /Library/LaunchAgents/com.cisco.anyconnect.vpnagent.plist
rm -f /Library/LaunchDaemons/com.cisco.anyconnect.gui.plist

Script to kill vpn

Create a file and name it vpn_kill.sh

#!/bin/bash
INSTPREFIX="/opt/cisco/anyconnect"
BINDIR="${INSTPREFIX}/bin"
PLUGINDIR="${BINDIR}/plugins"
LIBDIR="${INSTPREFIX}/lib"
PROFDIR="${INSTPREFIX}/profile"
MGMTPROFDIR="${INSTPREFIX}/profile/mgmttun"
SCRIPTDIR="${INSTPREFIX}/script"
HELPDIR="${INSTPREFIX}/help"
KEXTDIR="/Library/Application Support/Cisco/AnyConnect Secure Mobility Client"
APPDIR="/Applications/Cisco"
GUIAPP="Cisco AnyConnect Secure Mobility Client.app"
NWEXT_KDF_APP="Cisco AnyConnect Socket Filter.app"
UNINSTALLER="Uninstall AnyConnect.app"
INITDIR="/System/Library/StartupItems"
INIT="vpnagentd"
LAUNCHD_DIR="/Library/LaunchDaemons"
LAUNCHD_FILE="com.cisco.anyconnect.vpnagentd.plist"
LAUNCHD_AGENT_DIR="/Library/LaunchAgents"
LAUNCHD_AGENT_GUI_FILE="com.cisco.anyconnect.gui.plist"
LAUNCHD_AGENT_NOTIFICATION_FILE="com.cisco.anyconnect.notification.plist"
ACMANIFESTDAT="${INSTPREFIX}/VPNManifest.dat"
VPNMANIFEST="ACManifestVPN.xml"
LOGDIR="/var/log/anyconnect"
UNINSTALLLOG="${LOGDIR}/vpn-close.log"

ANYCONNECT_VPN_PACKAGE_ID=com.cisco.pkg.anyconnect.vpn

# Array of files to remove
FILELIST=("${BINDIR}/vpnagentd" \
          "${BINDIR}/vpn_uninstall.sh" \
          "${BINDIR}/anyconnect_uninstall.sh" \
          "${BINDIR}/vpnui" \
          "${BINDIR}/vpn" \
          "${BINDIR}/vpnmgmttun" \
          "${BINDIR}/acinstallhelper" \
          "${BINDIR}/vpndownloader.app" \
          "${BINDIR}/UpdateComponentManifest.json" \
          "${BINDIR}/manifesttool" \
          "${BINDIR}/manifesttool_vpn" \
          "${BINDIR}/SetUIDTool_vpn" \
          "${BINDIR}/Cisco AnyConnect Secure Mobility Client Notification.app" \
          "${BINDIR}/Cisco AnyConnect Web Browser.app" \
          "${INSTPREFIX}/AnyConnectLocalPolicy.xsd" \
          "${INSTPREFIX}/gui_keepalive" \
          "${INSTPREFIX}/OpenSource.html" \
          "${INSTPREFIX}/update.txt" \
          "${INSTPREFIX}/${VPNMANIFEST}" \
          "${LIBDIR}/libacciscossl.dylib" \
          "${LIBDIR}/libacciscocrypto.dylib" \
          "${LIBDIR}/libaccurl.4.dylib" \
          "${LIBDIR}/libboost_filesystem.dylib" \
          "${LIBDIR}/libboost_system.dylib" \
          "${LIBDIR}/libboost_thread.dylib" \
          "${LIBDIR}/libboost_date_time.dylib" \
          "${LIBDIR}/libboost_signals.dylib" \
          "${LIBDIR}/libboost_chrono.dylib" \
          "${LIBDIR}/libvpnagentutilities.dylib" \
          "${LIBDIR}/libvpncommon.dylib" \
          "${LIBDIR}/libvpncommoncrypt.dylib" \
          "${LIBDIR}/libvpnapi.dylib" \
          "${LIBDIR}/libac_sock_fltr_api.dylib" \
          "${LIBDIR}/libacruntime.dylib" \
          "${PLUGINDIR}/libvpnipsec.dylib" \
          "${PLUGINDIR}/libacfeedback.dylib" \
          "${PLUGINDIR}/libacwebhelper.dylib" \
          "${PLUGINDIR}/libvpnapishim.dylib" \
          "${PLUGINDIR}/libacdownloader.dylib" \
          "${PROFDIR}/AnyConnectProfile.xsd" \
          "${MGMTPROFDIR}/AnyConnectProfile.xsd" \
          "${LAUNCHD_DIR}/${LAUNCHD_FILE}" \
          "${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE}" \
          "${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_NOTIFICATION_FILE}" \
          "${INITDIR}/${INIT}" \
          "${APPDIR}/${GUIAPP}" \
          "${APPDIR}/${UNINSTALLER}" \
          "${KEXTDIR}/acsock.kext" \
          "${INSTPREFIX}/gui_kext.plist")

echo -e "Closing Cisco AnyConnect Secure Mobility Client...\n"

# Create log directory if not exist
if [ ! -d ${LOGDIR} ]; then
  mkdir -p ${LOGDIR} >/dev/null 2>&1
fi

OS_VER_MAJOR=$(sw_vers -productVersion | awk -F. '{ print $1; }')
OS_VER_MINOR=$(sw_vers -productVersion | awk -F. '{ print $2; }')
MYUID=`echo "show State:/Users/ConsoleUser" | scutil | awk '/UID/ { print $3 }'`

# Unload the GUI launch agent if it exists
if [ -e ${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE} ] ; then 
    echo "Stopping GUI launch agent..." >> "${UNINSTALLLOG}"
    if [ "$OS_VER_MAJOR" -gt 10 ] || [ "$OS_VER_MINOR" -ge 11 ] ; then
        # Use new launchctl subcommand for macOS 10.11 and later
        echo "launchctl bootout gui/${MYUID} ${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE}" >> "${UNINSTALLLOG}" 
        launchctl bootout gui/${MYUID} ${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE} >> "${UNINSTALLLOG}" 2>&1
    else
        # Use legacy launchctl subcommand for earlier macOS
        echo "sudo -u #${MYUID} launchctl unload -S Aqua ${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE}" >> "${UNINSTALLLOG}"
        sudo -u \#${MYUID} launchctl unload -S Aqua ${LAUNCHD_AGENT_DIR}/${LAUNCHD_AGENT_GUI_FILE} >> "${UNINSTALLLOG}" 2>&1
    fi
fi

# ensure that the gui are not running
OURPROCS=`ps -A -o pid,command | egrep '(Cisco AnyConnect Secure Mobility Client)' | egrep -v 'grep|vpn_uninstall|anyconnect_uninstall' | awk '{print $1}'`
if [ -n "${OURPROCS}" ] ; then
    for DOOMED in ${OURPROCS}; do
        echo Killing `ps -A -o pid,command -p ${DOOMED} | grep ${DOOMED} | egrep -v 'ps|grep'` >> "${UNINSTALLLOG}" 
        kill -INT ${DOOMED} >> "${UNINSTALLLOG}" 2>&1
    done
fi

# Wait one second to allow the GUI to properly close. This hack
# prevents some IPC issues related to trying to close the GUI and agent
# almost simultaneously.
sleep 1

# ensure that the agent, gui and cli are not running - show no mercy
OURPROCS=`ps -A -o pid,command | egrep '(/opt/cisco/anyconnect/bin)|(Cisco AnyConnect Secure Mobility Client)' | egrep -v 'grep|vpn_uninstall|anyconnect_uninstall' | awk '{print $1}'`
if [ -n "${OURPROCS}" ] ; then
    for DOOMED in ${OURPROCS}; do
        echo Killing `ps -A -o pid,command -p ${DOOMED} | grep ${DOOMED} | egrep -v 'ps|grep'` >> "${UNINSTALLLOG}"
        kill -KILL ${DOOMED} >> "${UNINSTALLLOG}" 2>&1
    done
fi

echo -e "Closed\n"
exit 0

Script to connect

Create a file, name it vpn_connect.sh and put your credentials in it and READ A SCRIPT! YOU MAY HAVE NO SUCH QUESTIONS AS I DO SO REMOVE THEM

#!/usr/bin/expect

set USERNAME "YOUR_VPN_USERNAME"
set PASSWORD "YOUR_VPN_PASSWORD"

spawn /opt/cisco/anyconnect/bin/vpn -s connect vpn-ha.tcsbank.ru
expect {
    "Group: *" {
        send -- "PUT_HERE_YOUR_GROUP\r"
    }
    "Username: " {
        send -- "$USERNAME\r"
    }
    ">> error: " {
        exit
    }
}
expect {
    "Username: " {
        send -- "$USERNAME\r"
    }
    "Password: " {
        send -- "$PASSWORD\r"
    }
}
expect {
    "Password: " {
        send -- "$PASSWORD\r"
        expect {
            "Answer: " {
                interact ++ return
            }
        }
    }
    "Answer: " {
        interact ++ return
    }
}

AND FINALLY RUN IT!

echo -e "YOUR_SUDO_PASSWORD" | sudo -S vpn_kill.sh && vpn_connect.sh

Additional note

Just in case run:

sudo chmod 700 vpn_connect.sh

Рефакторинг React.FC компонентов

Savchenko Alexander — Fri, 16 Apr 2021 21:21:00 +0000

хуки: существуют*
разрабочики: аааааа это тоже самое что и раньше, только не class а function и опускаем this

Иногда мне кажется что именно так, плюс-минус, некоторые разработчики видят использование хуков, но они упускают САМОЕ ВАЖНОЕ ДОСТОИНСТВО хуков: возможность написание компонента в декларативном стиле!

Благодаря хукам вы можете разделить компонент на три части:

Переменные
JSX
Логика

ДО

ПОСЛЕ:

useEffect заиграл новыми красками

Вау! Можно легко прочитать какие события происходят при изменении каких данных.

Сортировка функций и быстрый поиск нужной

Так как у вас логика теперь находится в одном месте, вы с командой можете обкашлить в каком порядке будут выстраиваться функции, например:

Функции для useEffect
Функции для useMemo
Функции для построения данных
Прочие

Const vs function

Тяжело читать код когда пишут не функцию, а const и в нее сохраняют стрелочную функцию! Из-за этого взглядом приходится прослеживать, а не map ли это? Значит это будет не переменная с функцией, а переменная с данными!

Auto publish npm package with Github Actions

Savchenko Alexander — Sat, 26 Dec 2020 06:13:57 +0000

Inspired by https://michaelzanggl.com/articles/github-actions-cd-setup/

There are a couple of ways we can set up publishing to NPM: 1. When pushing to a certain branch

When creating a tag
When creating a commit in a specific pattern
When creating a release on GitHub directly.

This is what you need to know about my project:

The code for the latest version is on the branch latest.
The code for version 1 is on the branch v1-latest.

The reason for these branch names will become apparent later.

Create the YML file

name: NPM publish CD workflow

on:
  release:
    types: [published]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{ github.event.release.target_commitish }}
      # install Node.js
      - name: Use Node.js 12
        uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: yarn install
      # set up git since we will later push to the repo
      - run: git config --global user.name "GitHub CD bot"
      - run: git config --global user.email "savchenkoalexander91@gmail.com"
      # upgrade npm version in package.json to the tag used in the release.
      - run: npm version ${{ github.event.release.tag_name }}
      # build the project
      - run: npm run build
      # run tests just in case
      - run: npm test
      - run: npm config set '//registry.npmjs.org/:_authToken' "${{ secrets.NPM_TOKEN }}"
      # publish to NPM -> there is one caveat, continue reading for the fix
      - run: npm publish --tag ${{ github.event.release.target_commitish }}
        env:
          # Use a token to publish to NPM. See below for how to set it up
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
      # push the version changes to GitHub
      - run: git push
        env:
          # The secret is passed automatically. Nothing to configure.
          github-token: ${{ secrets.GITHUB_TOKEN }}

Go to Github -> your repository -> actions -> set up a workflow yourself

Get a npm token

Go to npm, in the settings go to "Auth Tokens", and click the button "Create New Token".

Add the npm token to "secrets"

Copy the token and head over to the project settings of your GitHub repository. Go to "Secrets" and click "New Secret". Give it the name "NPM_TOKEN" and for the value, paste the token inside.

Coveat

You see, when you do npm install <package> it will actually do npm install<package>@latest behind the scenes. And when you do npm publish it will actually do npm publish --tag latest

"latest" is a reserved tag for NPM. However, even though the project is already on version 2, publishing a fix for version 1 will make it the "latest" version. This means when somebody installs the package afterward, he will get version 1 instead of version 2. That's of course not what we want.

So to fix this, we have to specify a different tag when publishing.

So we have two options here:

npm publish --tag ${{ github.event.release.target_commitish }} (my choice)
Add a default publish tag to the v1 branch package.json:

"publishConfig": {
  "tag": "v1-latest"
}

The reason I chose v1-latest over just v1 is that npm tags must not follow semver. Otherwise, NPM would not be able to distinguish a tag from a specific published version.