mateuszsokola

import { useCallback, useEffect, useState, useRef } from "react";

/**
 * MobileSwiper component for handling touch swipe gestures on mobile devices.
 *
 * @component
 * @param {Object} props - React component props
 * @param {ReactNode} props.children - The content to be wrapped by the swiper
 * @param {function} props.onSwipe - Callback function triggered on swipe with an object containing deltaX and deltaY
 * @returns {JSX.Element} - React component

mateuszsokola

.board {
  position: relative;
  width: calc(var(--pixel-size) * 8 * 4 + var(--pixel-size) * 5);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  background: var(--secondary-background);
  border: calc(var(--pixel-size) * 0.5) solid var(--secondary-background);

mateuszsokola

.board {
  position: relative;
  width: calc(var(--pixel-size) * 8 * 4 + var(--pixel-size) * 5);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  background: var(--secondary-background);
  border: calc(var(--pixel-size) * 0.5) solid var(--secondary-background);

mateuszsokola

.score {
  width: var(--pixel-size) * 75;
  background: var(--secondary-background);
  border: var(--pixel-size) solid var(--secodary-background);
  border-radius: calc(var(--pixel-size) * 0.75);
  color: var(--tile-background);
  font-weight: bold;
  font-size: calc(var(--pixel-size) * 2);
  text-align: center;
  text-transform: uppercase;

mateuszsokola

Pure functions

A pure function for given the same input will always return the same output and evaluation of this function will not cause any side effects.

Advantages of using pure functions:

• easy to test, as they always return the same value,
• easy to debug, as they shouldn't cause any race conditions and circular dependencies,
• simple and independent, as they don't cause any side effects (it makes design clean),
• easy to scale application up, as they shouldn't rely on machine state.

mateuszsokola

if (process.env.NODE_ENV !== 'production') {
  // your unfinished code.
}

mateuszsokola

import { Matchers } from '@pact-foundation/pact';

import fetchJob from '../fetchJob';

describe('Services', () => {
  beforeAll(() => provider.setup());

  afterAll(() => provider.finalize());

  describe('fetchJob', () => {

mateuszsokola

type State = {
    numbers: Array<number>;
}

const initialState:State = {
    numbers: [1, 2, 3, 4, 5, 6]
};

const { numbers } = initialState;

mateuszsokola

import { curryRight, flow, join } from "lodash";

import split from "./split";
import reverse from "./reverse";

/**
 * Thousand Regular Expression
 */
const thousandRegExp:RegExp = /[0-9]{1,3}/g;

mateuszsokola

/**
 * @param {string} string 
 * @param {RegExp} pattern 
 */
export default function split(string:string, pattern: RegExp):Array<string> {
    return string.match(pattern) || [];
}