Kehinde adeleke5140

Dependency Injection in ReactJS

This is a conversation on the DI pattern in ReactJS.

This article from the folks at 8th Light is great. The author explains how it makes component very easy to test. It encourages unit testing rather than integration testing.

In essence:

It also allows for substitution of a dependency with a mock, or fake, during testing.

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

	import { writeFileSync } from "fs";
	import { join } from "path";
	import { NextApiRequest, NextApiResponse } from "next";

	export default async (req: NextApiRequest, res: NextApiResponse) => {
	try {
	if (req.method === "POST") {
	const base64 = req.body.image;
	const cleanBase64Data = base64.replace(/^data:image\/jpeg;base64,/, ""); // Remove the data URI prefix
	const binaryData = Buffer.from(cleanBase64Data, "base64");

	import type { ValidRoute } from "@/lib/types";
	import { getActiveRoute } from "@/utils/getActiveRoute";
	import Link from "next/link";
	import { useRouter } from "next/router";

	type CustomLinkProps = {
	href: ValidRoute;
	children: React.ReactNode;
	};

	import { classNames } from 'utils'

	type Size = 'small' \| 'medium' \| 'large'

	type AvatarProps = {
	size?: Size
	src?: string
	alt?: string
	}


	/*
	Styles for the React date picker input
	*/

	/* .react-datepicker-wrapper {
	width: 100%;
	}

	.react-datepicker__input-container {

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

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

	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");

	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) {