simicd

[tool. Ruff]
line-length = 88
target-version = "py310"

# See https://beta.ruff.rs/docs/rules/
select = [
  "F", # Pyflakes
  "E", # pycodestyle (Errors)
  "W", # pycodestyle (Warnings)
  "I", # isort

simicd

{
  // Editor & Debuger
  "editor.suggestSelection": "first",
  "editor.minimap.renderCharacters": false,         // Use text representation in minimap on the right side
  "editor.minimap.showSlider": "always",            // Highlight visible code area in minimap on right side
  "editor.copyWithSyntaxHighlighting": true,        // CTRL + C will also copy the code highlighting
  "editor.cursorBlinking": "solid",                 // Change cursor blinking style
  "editor.multiCursorModifier": "ctrlCmd",          // Use CTRL + Mouse click to place multiple cursors and write simulatnously
  "editor.guides.bracketPairs": true,               // Colorize vertical line indicating bracket range on the left hand side
  "editor.bracketPairColorization.enabled": true,   // Colorize pairs of brackets

simicd

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

export const useFetch = ({ url, init, processData }) => {
  // Response state
  const [data, setData] = useState();

  // Turn objects into strings for useCallback & useEffect dependencies
  const [stringifiedUrl, stringifiedInit] = [JSON.stringify(url), JSON.stringify(init)];

  // If no processing function is passed just cast the object to type T

simicd

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

interface RequestProps<T> {
  url: RequestInfo;
  init?: RequestInit;
  processData?: (data: any) => T;
}

export const useFetch = <T>({ url, init, processData }: RequestProps<T>) => {
  // Response state

simicd

import { useState, useEffect, useCallback } from "react";
// ...

export const useFetch = <T>({ url, init, processData }: RequestProps<T>) => {
  // ...

  // Define asynchronous function
  const fetchApi = async () => {
    // ...
  };

simicd

// DogImageWithButton.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";

type DogImageType = { message: string; status: string };

export const DogImageWithButton: FC = () => {
  /** Fetch image on button click */
  const { data, fetchApi } = useFetch<DogImageType>({
    url: "https://dog.ceo/api/breed/beagle/images/random",

simicd

// DogImageWithButton.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";

type DogImageType = { message: string; status: string };

export const DogImage: FC = () => {
  /** Fetch image on button click */
  const getImage = () => {
    const data = useFetch<DogImageType>({

simicd

/** 
 * Paste into Browser for smooth scrolling from top to bottom
 * @see https://css-tricks.com/smooth-scrolling-for-screencasts/
 */
const scrollElement = (element, scrollPosition, duration) => {
  
  // useful while testing to re-run it a bunch.
  // element.removeAttribute("style"); 
  
  const style = element.style;

simicd

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

export const useFetch = ({ url, init, processData }) => {
  // Response state
  const [data, setData] = useState();

  // Turn objects into strings for useCallback & useEffect dependencies
  const [stringifiedUrl, stringifiedInit] = [JSON.stringify(url), JSON.stringify(init)];

  // If no processing function is passed just return the data

simicd

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

interface RequestProps<T> {
  url: RequestInfo;
  init?: RequestInit;
  processData?: (data: any) => T;
}

export const useFetch = <T>({ url, init, processData }: RequestProps<T>) => {
  // Response state