adeleke5140

interface BannerProps {
  type: "base" | "success" | "error";
  children: React.ReactNode;
}

{
  [key in BannerProps["type"]]: string;
}

adeleke5140

import { promises as fs } from "node:fs";
import * as path from "node:path";
import { glob } from "glob";
import { parse } from "node-html-parser";

async function buildIcons() {
  const cwd = process.cwd();
  const inputDir = path.join(cwd, "svgs");
  const inputDirRelative = path.relative(cwd, inputDir);
  const outputDir = path.join(cwd, "src", "component", "icons");

adeleke5140

import { CopyToClipboard } from "react-copy-to-clipboard";
import { useEffect, useState } from "react";

const index = () => {
const [copiedStatus, setCopiedStatus] = useState(false);

  useEffect(() => {
    let timeout: number;

    if (copiedStatus) {

adeleke5140

2fa with React

This is an attempt at creating a set of input element that accept 2fa code.

There is a bug where pressing the backspace key messes with the focused input which I don't have the time to fix right now.

Mine is written in TS but this is the original version in JS: Original

adeleke5140

function debounce(func, wait){
  let timer;
  
  let debouncedFunc = function(...args){
    clearTimeout(timer)
    
    timer = setTimeout(() => {
    	func.apply(this, args)
    }, wait)
  }

adeleke5140

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), vx)

adeleke5140

function flatten(value){
  //do this immutably without modifying the initial arr
  value.reduce((acc, cur) => acc.concat(Array.isArray(curr) ? flatten(curr): curr), [])
}



//iteration
function flatten(value){
  const res = []

adeleke5140

//conditionally add properties in a typesafe way

declare let hasMiddle: boolean

const fullName = { first: 'Kehinde', last: 'Adeleke'}
//the issue
const developer2 = {...fullName}

//if you tried adding a new key,
//typescript would scream that middle does not exist on type { first: string, last: string}

adeleke5140

Type Narrowing

A way to help typescript narrow your types is by explicitly adding a tag to them. This helps in narrowing the type when necessary.

adeleke5140

const _cache: {[url: string]:string} = {}

async function fetchWithCache(url:string){
	if(url in cache){
  	return _cache[url]
  }
  
  const response = await fetch(url)
  const text = response.text()
  _cache[url] = text