DonHuskini

class Mock {
    users = []
    posts = []

    constructor() {
        const ref = this
        
        this.users = [
            {
                id: 1,

DonHuskini

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

//  |
//  |
//  |--services (all API fetching goes here)
//  |----people.js
//  |--hooks (all custom hooks goes here)
//  |----useEndpoint.js
//  |--pages

DonHuskini

// #1. With a controlled input
import { useState, useEffect } from 'react';
const debounce = require("lodash.debounce");

function SearchBar({ onSearch, wait = 500 }) {
  const [value, setValue] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    onSearch && onSearch(searchTerm);

DonHuskini

async function download(url, path) {
  const res = await fetch(url);
  const fileStream = fs.createWriteStream(path);
  await new Promise((resolve, reject) => {
    res.body.pipe(fileStream);
    res.body.on("error", reject);
    fileStream.on("finish", resolve);
  });
}

DonHuskini

//---------------
// implementation:

import styled from "styled-components";
import { useCarousel } from "./useCarousel";

type CarouselProps = {
  slides: React.ReactNode[];

  /** [mobile, tablet, desktop] */

DonHuskini

import { ParsedUrlQuery } from 'querystring'
import { GetStaticPaths, GetStaticProps } from 'next'

// getPost(slug: string): Post | undefined
// getAllPostSlugs(): string[]

interface Params extends ParsedUrlQuery {
  slug: string
}

DonHuskini

// -------------------------
// useMediaQuery

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

export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);

DonHuskini

# Command to check git default line ending:
# if true, it will auto-convert line endings. Windows => crlf, Linux/MAC => lf
`git config --global --get core.autocrlf`

# Command to update git default line ending
# will always be the same as in the repo. VSCode is smart enough to understand crlf and lf line endings.
`git config --global core.autocrlf false`

# Add ssh key/passphrase to ssh-agent so I can log into SSH servers without having to type passphrase every time
ssh-add ~/.ssh/id_rsa

DonHuskini

import styled from '@emotion/styled'
import Image from 'next/image'
import { useProgressiveImage } from 'src/hooks/useProgressiveImage'

export function BlurredUpImage({ tiny, large, width, height, alt }) {
  const [src, { blur }] = useProgressiveImage(tiny, large)
  return <StyledImage src={src} width={width} height={height} alt={alt} blur={blur} />
}

const StyledImage = styled(Image)`

DonHuskini

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

export default function Test() {
  const [height, setHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      setHeight((ref.current.clientWidth * 16) / 9);
    }