audunolsen

/*
  Best solution I've so far come up with for
  the inner/outer container issue.
  https://css-tricks.com/the-inside-problem/
*/

@mixin default($width: 500px, $padding: 30px) {
  width: 100%;

  // Intentionally does not use shorthand as it would easily collide

audunolsen

import * as z from 'zod'
import { Schema } from 'zod'

export async function parse<T extends Schema>(
  schema: T | ((zod: typeof z) => T),
) {
  const codec = schema instanceof Schema ? schema : schema(z)

  return async function (input: Response) {
    const json = await input.json()

audunolsen

/* eslint-disable prettier/prettier */
// type Input = { code : ErrorMessageKind } | { code: 'illegalWeekday', weekday?: string }
// code: 'illegalEmailDomain', email: string, allowedDomains: string[]

type ErrorMessageKind = "networkError" | "generalError" | 'illegalWeekday'

interface Message {
  NO: string
  EN: string
}

audunolsen

const sortDevices = (devices: MediaDeviceInfo[]) =>
  devices.reduce<Record<MediaDeviceKind, MediaDeviceInfo[]>>(
    (a, d) => (a[d.kind].push(d), a),
    {
      videoinput: [],
      audioinput: [],
      audiooutput: [],
    },
  )

audunolsen

/*
  Benefits over v1:

  1. No intermidiate portal div. The portal is the immidiate descendant of the parent/mounting div
  2. Portal element can be rendered as any valid React.ElementType
  3. Portal can be given ref
  4. Portal can be given a className and any other valid html attribute
  5. Portal supports fully reactive classes for both body and parent divs. (Useful for locking scroll etc…)
  6. More flexible mounting options. can e.g. list many fallbacks. Mount will update on subsequent portal openings if dom changes

audunolsen

import React, { createElement } from "react";

/*
  Tired of writing ((blabla && blabla) && <>blabla</>)
*/

interface Props extends React.HTMLAttributes<HTMLElement> {
  if: any;
  as?: React.ElementType;
  children?: React.ReactNode;

audunolsen

import React, { useState, useEffect } from "react";
import { err } from "src/utils/async";

interface Props extends React.SVGProps<SVGSVGElement> {
  // path relative to src/assets/icons. omit svg extension
  name: string;
}

interface Module {
  default: React.FC<React.SVGProps<SVGSVGElement>>;

audunolsen

import { useCallback, useEffect, useMemo, useRef } from 'react';
import visibility from './visibility';
import debounceFn from 'lodash.debounce';
import throttleFn from 'lodash.throttle';

/*
    Performance tip:
    Rememeber to memoize the callback! (or any other dynamic config opts)
    Or else every re-render will trigger a cb dependency
    update deleting and reinstantiating the observers

audunolsen

import { useCallback } from 'react';
import useResizeObserver from 'hooks/useResizeObserver';

export default () => {
  
  const onResize = useCallback((entries = []) => {
    console.log(entries.map(e => e.target));
  }, []);
  
  const [observerRef, setObserverRef] = useResizeObserver({

audunolsen

/*
    Needed in evaluation/Form.js because successful calls to server but
    w/ empty data (null from java which fetch retrieves as empty string)
    will throw errors because fetch can't parse it as json.

    Retrieves either json or text depending on what's available

    Didn't change already existing fetchJson to not
    risk breaking any exisitng api calls
*/