codeBelt

https://www.basedash.com/blog/typescript-object-with-dynamic-keys

Constrained Dynamic Keys At times, you'd want to constrain the dynamic keys to a specific set of values, perhaps based on another array or tuple.

const validKeys = ['a', 'b', 'c'] as const;

type ValidKeysType = typeof validKeys[number];

codeBelt

import SingletonRouter, { Router } from 'next/router';
import { useEffect } from 'react';

const defaultConfirmationDialog = async (msg?: string) => window.confirm(msg);

/**
 * Inspiration from: https://stackoverflow.com/a/70759912/2592233
 */
export const useLeavePageConfirmation = (
  shouldPreventLeaving: boolean,

codeBelt

Built with D3js and Cartogram.js. Province and territory data obtained from the Government of Canada's Open Data Portal.

codeBelt

// JavaScript Version

export const buildFirstMiddleLastList = (list) => {
  const { 0: first, [list.length - 1]: last, ...rest } = list;

  return {
    first: first,
    middle: Object.values(rest),
    last: list.length > 1 ? last : undefined,
  };

codeBelt

// JavaScript Version

export const buildFirstMiddleLastList = (list) => {
  const { 0: first, [list.length - 1]: last, ...rest } = list;

  return [
    first, 
    Object.values(rest), 
    list.length > 1 ? last : undefined
  ];

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

arrayData[0]; // First element is "a"
arrayData[arrayData.length -1]; // Last element is "e"

// Middle elements
arrayData[1]; // "b"
arrayData[2]; // "c"
arrayData[3]; // "d"

codeBelt

const arrayData = ['a', 'b', 'c', 'd', 'e'];

const { 0: first, [arrayData.length - 1]: last, ...rest } = arrayData;

codeBelt

const withPlugins = require('next-compose-plugins');
const path = require('path');

module.exports = withPlugins([], {
  webpack: (config) => {
    const clientEnv = process.env.CLIENT_ENV || 'production';

    config.resolve.alias = {
      ...config.resolve.alias,
      environment: path.join(__dirname, 'src', 'environments', clientEnv),

codeBelt

export const IndexPage = (props) => {
  
  const onChange = async (formData) => {
    const config = {
      headers: { 'content-type': 'multipart/form-data' },
      onUploadProgress: (event) => {
        console.log(`Current progress:`, Math.round((event.loaded * 100) / event.total));
      },
    };