codinronan

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers

codinronan

// From https://michalzalecki.com/why-using-localStorage-directly-is-a-bad-idea/
// I always end up re-implementing this again every time I need it, so better to just put it here.

function isSupported(getStorage) {
  try {
    const key = "__some_random_key_you_are_not_going_to_use__";
    getStorage().setItem(key, key);
    getStorage().removeItem(key);
    return true;
  } catch (e) {

codinronan

import React, { useCallback, useState, useEffect, useContext, createContext } from 'react'

const authContext = createContext()

// Hook for child components to get the auth object and re-render when it changes.
export default () => {
  return useContext(authContext)
}

// Provider component that wraps components and makes useAuth() available

codinronan

// A react hook to generalize the use of any class that implements the Storage interface.
// LocalStorage and SessionStorage are provided here but it is easy to extend to something like
// AsyncStorage for react native.

const useStorage = (key, initialValue, storage) => {
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = storage.getItem(key)
      return item ? JSON.parse(item) : initialValue

codinronan

import { useState, useEffect } from 'react'

const useDebounce = (value, delay) => {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {

codinronan

// The goal here is to demonstrate using a React context as a redux-like reducer-based store.

import { useContext } from 'react'

import { Store } from '../store'

const ACTION_ASYNC_REQUEST_SUFFIX = '@REQUEST'
const ACTION_ASYNC_SUCCESS_SUFFIX = '@SUCCESS'
const ACTION_ASYNC_FAILURE_SUFFIX = '@FAIL'

codinronan

import { useEffect, useState, useCallback, useRef } from 'react'

export default (asyncFunction, immediate = true) => {
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState(null)
  const [error, setError] = useState(null)

  // Track a reference to whether the useAsync is actually on a mounted component.
  // useEffect below returns a cleanup that sets this to false. Before setting
  // any state, we check if the cleanup has run. If it has, don't update the state.

codinronan

// https://vanillajstoolkit.com/helpers/debounce/

var debounce = function (fn) {
	// Setup a timer
	var timeout;

	// Return a function to run debounced
	return function () {

		// Setup the arguments

codinronan

// This is a private copy of idb-keyval vNext, which has a simpler API with many bug fixes.
// https://raw.githubusercontent.com/jakearchibald/idb-keyval/next/src/index.ts
// https://github.com/jakearchibald/idb-keyval/issues/80 (description of API)
// The old implementation with bug fixes from several PRs in idb-keyval is at
// https://github.com/DestinyItemManager/DIM/blob/master/src/app/storage/idb-keyval.ts

// https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Version_changes_while_a_web_app_is_open_in_another_tab

const DB_NAME = 'rg-app-data'; // 'keyval-store'
const DB_STORE = 'rg-data'; // 'keyval'

codinronan

Hi Zach :D

Modals are funny beasts, usually they are a design cop-out, but that's okay, designers have to make trade-offs too, give 'em a break.

First things first, I'm not sure there is such thing as a "simple" modal that is production ready. Certainly there have been times in my career I tossed out other people's "overly complex solutions" because I simply didn't understand the scope of the problem, and I have always loved it when people who have a branch of experience that I don't take the time