freddi301

import React from "react";

export function useGeolocation({
  isEnabled,
  positionOptions: { enableHighAccuracy, maximumAge, timeout },
  startTransition,
}: {
  isEnabled: boolean;
  positionOptions: PositionOptions;
  startTransition?(update: () => void): void;

freddi301

/** 
 * React hook to measure an element before rendering it
 * given some jsx it renders it in a hidden div then measures its size
 * the hook returns width and height and portal
 * @important the portal must be in the page to be able to render the hidden div for measurements
 * @warning the jsx will be renred probably twice, once for measurement, and where you actually use it
 */
export function useDomSize(children: JSX.Element) {
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);

freddi301

// this files goes to feature/configuration.json
// it lets you setup configuration fields for a portlet
// it work with an adapted create-react-app for liferay https://help.liferay.com/hc/en-us/articles/360035467712-Adapting-Existing-Apps-to-Run-on-Liferay-DXP
{
	"$schema": "https://raw.githubusercontent.com/liferay/liferay-js-toolkit/master/resources/schemas/configuration.schema.json",
	"system": {
		"category": "react-js-toolkit",
		"name": "react-js-toolkit",
		"fields": {
			"fruit": {

freddi301

import { setupWorker } from 'msw/browser'

// https://mswjs.io/docs/best-practices/typescript

// also ensure there is .env or env.local file
// with PUBLIC_URL=index set to something otherwise chrome wont load the mock service worker

const worker = setupWorker(/* here goes handlers */); 

if (process.env.NODE_ENV === "development") {

freddi301

function useValueWithTimeToLive<T>() {
  const [state, setState] = React.useState<{ value: T | undefined; timeToLive: number | undefined }>({
    value: undefined,
    timeToLive: undefined,
  });
  const setValueWithTimeToLive = React.useCallback((value: T, timeToLive: number) => {
    setState({ value, timeToLive });
  }, []);
  React.useEffect(() => {
    if (state.timeToLive !== undefined) {

freddi301

function moveItem<T>(fromIndex: number, toIndex: number, array: Array<T>): Array<T> {
  if (fromIndex < toIndex) {
    return [...array.slice(0, fromIndex), ...array.slice(fromIndex + 1, toIndex + 1), array[fromIndex], ...array.slice(toIndex + 1)];
  }
  if (fromIndex > toIndex) {
    return [...array.slice(0, toIndex), array[fromIndex], ...array.slice(toIndex, fromIndex), ...array.slice(fromIndex + 1)];
  }
  return array;
}

freddi301

Frederik Batuna

freddi301

Senior Front-End engineer with high focus on best-practices, productivity enhancement and cutting-edge technologies (mainly ReactJS related).

I have also experience as Full-Stack engineer with Back-End (nodejs, sql, mongo) and CI/CD (heroku, docker, github)

I like to experiment, learn and keep myself up to date with software development technologies.

freddi301

module IncrementalBehaviors

-- esempio di una prova per induzione
-- è una funzione
-- dato qualsiasi x che è un booleano
-- ritorna una equality (che sarebbe una struttra dati, leggasi new Equality(x, not(not(x))))
-- il tipo di questa funzione è la nostra ipotesi
-- se si riesce a scrivere il corpo della funzione rispettando il tipo di ritorno
-- si ottiene la prova per induzione che l'ipotesi è corretta
example : (x : Bool) -> x = not (not x)

freddi301

import React from "react"

export function useWhyDidYouUpdate<Props extends Record<string, any>>(label: string, props: Props) {
  const previousProps = React.useRef<Props>();
  React.useEffect(() => {
    if (previousProps.current) {
      const allKeys = Object.keys({ ...previousProps.current, ...props }) as Array<keyof Props>;
      const changesObj: {[K in keyof Props]?: {from: Props[K], to: Props[K]}} = {};
      for (const key of allKeys) {
        if (previousProps.current[key] !== props[key]) {

freddi301

import React from "react";

export function TruncatedLine({ text }: { text: string }) {
  return (
    <span style={{ position: "relative", display: "block" }}>
      <span style={{ color: "transparent" }}>X</span>
      <span
        style={{
          display: "block",
          position: "absolute",