staydecent

{
    "$schema": "https://aka.ms/terminal-profiles-schema",

    "alwaysShowTabs": false,
    "confirmCloseAllTabs": false,
    "showTabsInTitlebar": false,
    "theme": "light",

    "defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",

staydecent

// NEXT (10.0.0)
// ---

time npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
----------------------------------------------
112.68 real        15.44 user         6.49 sys

time npm run build
----------------------------------------------
13.84 real         15.19 user         1.07 sys

staydecent

import equal from '@app-elements/equal'
import { useEffect, useReducer, useRef } from 'preact/compat'

export function useMappedState (store, mapper) {
  const [, forceRender] = useReducer(s => s + 1, 0)
  const initialState = mapper(store.getState())
  const mappedStateRef = useRef(initialState)

  useEffect(() => {
    function checkForUpdates () {

staydecent

import {
  createContext,
  useContext,
  useEffect,
  useReducer,
  useRef
} from "preact/compat";
import { getRouteComponent, getAllRoutes, getHref } from "./util";

const EMPTY = Symbol();

staydecent

atom Concepts

At Input Logic, we use atom to manange state in our React apps. atom is modeled after Redux, which is a pattern for state management that has stood up in countless apps over the years. This is a succinct overview of the atom/redux concepts and best practices we employ.

What is Redux?

The three principles are the foundation of Redux. Briefly:

staydecent

const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/ig

let strStartsWith = (str, prefix) => {
  return str.slice(0, prefix.length) === prefix;
}

function Linkify ({ text, anchorProps = {} }) {
	if (!text) return

  return text.split(delimiter).map(word => {

staydecent

import { useEffect } from 'react'

export function useDocumentClick (ref, cb) {
  useEffect(() => {
    const callback = (ev) => {
      cb && cb(ref.current && !ref.current.contains(ev.target))
    }

    document.addEventListener('mousedown', callback)
    document.addEventListener('touchstart', callback)

staydecent

import React, { useEffect, useState, useRef } from 'react'
import { MaterialTopTabBar } from 'react-navigation'
import { request } from '@app-elements/use-request/request'

const validRouteNames = {
  Clinician: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
  Guest: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
  'Home Health Aide': ['Caregiving', 'Blog', 'Favorites']
}

staydecent

const variantType = require("variant-type")

const hasProp = Object.prototype.hasOwnProperty
const LikedRes = (res) => hasProp.call(res, 'liked')

// We will use a "variant type" aka "tagged union" aka "sum type".
// This is sort of like a finite-state-machine, in that the "Request"
// value can only ever represent one of the following "states".
const Request = variantType({
  Loading: [],

staydecent

const check = require('check-arg-types')
const type = check.prototype.toType

const tokenize = str =>
  str.replace(/\(/g, ' ( ').replace(/\)/g, ' ) ').split(' ').filter(x => !!x)

const atom = token =>
  isNaN(Number(token)) ? String(token) : Number(token)

const readFromTokens = tokens => {