loopmode

react-router 4 basic setup

Basic react-router 4 setup for login and protected routes. Requires the user to log in in order to see those protected routes.

• Assuming there is a UserStore that performs actual operations (e.g. ajax calls) and provides a user prop to components when the user is logged in.
• Omitting any insiginificant import statements. This is not 100% copy-pastable, but still pretty much real-world code

index.js

loopmode

Basic react-router 4 setup for login and protected routes.

Assuming there is a UserStore that can perform the actual operations. It also provides a user prop to pages when the user is logged in.

Omitting any insiginificant import statements. This is not copy-pastable code, but still real-world code. (Omitted some project/ui-specific stuff)

index.js

Renders the App, but wrapped in a Router. That way we can use Route and Switch components anywhere in our app tree.

loopmode

import express from 'express';

const Router = express.Router({ mergeParams: true });

Router.post('/login', require('./login'));
Router.post('/create', require('./create'));
Router.post('/delete', require('./delete'));
Router.post('/logout', require('./logout'));

export default Router;

loopmode

const gpCommons = [
    {name: 'shared', path: 'src/shared', props: {async: 'common.shared'}},
    {name: 'stores', path: 'src/stores', props: {async: 'common.stores'}},
    {name: 'mediaplayer', path: 'src/mediaplayer', props: {async: 'common.mediaplayer'}},
    {name: 'cms', path: 'src/cms', props: {async: 'common.cms'}},
    {name: 'ordering', path: ['src/basket', 'src/footage-request', 'src/footage-orders'], props: {async: 'common.ordering'}},
];
const mpCommons = gpCommons.concat([
    {name: 'licensing', path: 'src/clipbin', props: {async: 'common.licensing'}},
]);

loopmode

/*
Usage:
            this.benchmarks = new Benchmarks({
                target: this,
                functions: ['performLookups', 'createIsotope', 'updateIsotope', 'fitVideos', 'applyRandomSize']
            });
*/
/**
 * A benchmark utility that measures the execution times of functions in an object, if enabled.
 * Disabled by default.

loopmode

/**
 * A console logger with name prefix and persisted enable/disable functionality.
 * Disabled by default.
 * Enabled/disabled state is persisted in browser storage, e.g. localStorage or sessionStorage, and survives page refresh.
 * @example:
 * this.logger = new Logger({name: 'Grid'}); this.logger.log('Yay!');
 */
function Logger(options) {
    options = options || {};
    var name = options.name || 'default';

loopmode

import connectToStores from 'alt-utils/lib/connectToStores';

/* eslint-disable */
/**
 * A component decorator for connecting to immutable stores.
 *
 * Basically a wrapper around `alt/utils/connectToStores`.  
 * Adds the necessary static methods `getStores()` and `getPropsFromStores()` to the decorated component.
 *
 * - Supports multiple stores.

loopmode

[
	{ "keys": ["ctrl+y"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },
	{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
	{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } },
  { "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" }
]

loopmode

// https://medium.com/@sheepsteak/adding-hot-module-reloading-to-create-react-app-e053fadf569d#.2q2q1mvxs
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
const rootEl = document.getElementById('root');
ReactDOM.render(
  <App />,
  rootEl
);

loopmode

# audio waveformss

## situation

- we use audiosurfer.js, which renders the waveform on the client
- currently, v1 does not support media fragment URI queries like `?t=10,15` and we must fall back to `#t=10,15`
- this means that the data for the entire audio file must be transferred to and processed on the client

## SOLUTIONS