Siemko

version: "3.8"

services:
  webapp:
    image: node:lts-alpine # always using the same image - no building, less space taken
    working_dir: /usr/app/webapp
    volumes:
      - "./webapp/package.json:/usr/app/webapp/package.json"
      - "./webapp/yarn.lock:/usr/app/webapp/yarn.lock"
      - "./webapp/tsconfig.json:/usr/app/webapp/tsconfig.json"

Siemko

{
  "Print to console": {
    "scope": "javascript,typescript",
    "prefix": "log",
    "body": ["console.log('$1');"],
    "description": "Log output to console"
  }
}

Siemko

import { useState, useCallback } from 'react'
import produce from 'immer'

const useImmerState = initialState => {
    const [state, setState] = useState(initialState)
    const setImmerState = useCallback(setter => setState(produce(setter)), [])

    return [state, setImmerState]
}

Siemko

import React from "react";
import useWindowSize from "./useWindowSize";

const WindowSize = () => {
  const { width, height } = useWindowSize();
  return (
    <>
      <h2>Window size: {width} x {height}</h2>
    </>
  );

Siemko

import { useState, useEffect } from "react";

export default function useWindowSize() {
  const [{width, height}, setSize] = useState({ window.innerWidth, window.innerHeight });

  useEffect(() => {
    const handleResize = () => setSize({ window.innerWidth, window.innerHeight });
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);

Siemko

import React, { useState, useEffect } from "react";

const WindowSize = () => {
  const [{width, height}, setSize] = useState({ window.innerWidth, window.innerHeight });
  useEffect(() => {
    const handleResize = () => setSize({ window.innerWidth, window.innerHeight });
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };

Siemko

import React, { Component } from "react";

class WindowSize extends Component {
  state = {
    width: window.innerWidth,
    height: window.innerHeight
  };

  handleResize = () => this.setState({ 
      width: window.innerWidth, 

Siemko

export const request = async (url, method = 'GET', type = 'json', body = null) => {
    const requestOptions = {
        method: method,
        headers: { 'Content-Type': 'application/json' },
    };
    if (body) {
        requestOptions.body = JSON.stringify(body);
    }
    if (type === 'json') {
        return await (await fetch(url, requestOptions)).json();

Siemko

<template>

<section class="section">
  <div class="container">
    <h2 class="title">{{title}}</h2>
    <div class="level">
      <div class="level-item">
        <button class="button" @click="incrementCounter">
        <span class="icon">
        <i class="fa fa-plus"></i>

Siemko

import React, { Component } from "react";

export default class FormSample extends Component {
  state = {
    employer: "Gorrion"
  };

  handleEmployerChange = e => {
    this.setState({ employer: e.target.value });
  };