Add ability to share urls.

.nvmrc

@@ -0,0 +1 @@
+16.20.2

src/api/index.js

@@ -16,7 +16,7 @@ if ( wpcomConfig ) {
 		id: 'WPCOM',
 		baseUrl: 'https://public-api.wordpress.com/oauth2',
 		userUrl: 'https://public-api.wordpress.com/rest/v1.1/me',
-		redirectUrl: wpcomConfig.redirectUrl || wpcomConfig.redirect_uri,
+		redirectUrl: window.location.href,
 		clientId: wpcomConfig.clientID || wpcomConfig.clientId || wpcomConfig.client_id,
 		scope: 'global',
 	};

src/config.sample.json

@@ -1,6 +1,5 @@
 {
 	"wordpress.com": {
-		"client_id": "12345",
-		"redirect_uri": "http://example.com/path/to/app"
+		"client_id": "12345"
 	}
 }

src/lib/redux/cache.js

@@ -18,7 +18,13 @@ function deserialize( state, reducer ) {
 	return reducer( state, { type: DESERIALIZE } );
 }
 
-export function loadInitialState( initialState, reducer ) {
+export function loadInitialState( initialState, initialStateFromUrl, reducer ) {
+
+	// URL state overrides local storage state
+	if ( initialStateFromUrl ) {
+		return reducer( initialStateFromUrl, { type: DESERIALIZE } );
+	}
+
 	const localStorageState = JSON.parse( localStorage.getItem( STORAGE_KEY ) ) || {};
 	if ( localStorageState._timestamp && localStorageState._timestamp + MAX_AGE < Date.now() ) {
 		return initialState;

src/state/index.js

@@ -1,14 +1,14 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-
+import router, { getStateFromUrl } from './router';
 import reducer from './reducer';
 import { boot } from './security/actions';
 import { loadInitialState, persistState } from '../lib/redux/cache';
 
 const store = createStore(
 	reducer,
-	loadInitialState( {}, reducer ),
-	applyMiddleware( thunk )
+	loadInitialState( {}, getStateFromUrl(), reducer ),
+	applyMiddleware( thunk, router )
 );
 persistState( store, reducer );
 store.dispatch( boot() );

src/state/request/reducer.js

@@ -11,7 +11,7 @@ import {
 } from '../actions';
 import schema from './schema';
 
-const defaultState = {
+export const defaultState = {
 	method: 'GET',
 	endpoint: false,
 	pathValues: {},

src/state/router.js

@@ -0,0 +1,142 @@
+
+import { REQUEST_TRIGGER, API_VERSIONS_RECEIVE, REQUEST_SELECT_ENDPOINT } from './actions';
+import { defaultState as defaultRequestState } from './request/reducer';
+import { defaultState as defaultUiState } from './ui/reducer';
+import { loadEndpoints } from './endpoints/actions';
+import { getEndpoints } from './endpoints/selectors';
+
+function getUrlParams() {
+	return new URL( window.location.href ).searchParams;
+}
+
+function encodeString( val ) {
+	return ( val === null || val === undefined ) ? '' : encodeURIComponent( val );
+}
+
+function encodeObject( val ) {
+	return ( typeof val === 'object' ) && Object.keys( val ).length === 0 ? '' : encodeURIComponent( JSON.stringify( val ) );
+}
+
+function decodeString( val ) {
+	return decodeURIComponent( val );
+}
+
+function decodeObject( val ) {
+	return JSON.parse( decodeURIComponent( val ) );
+}
+
+export const getUrlFromState = state => {
+
+	const { request, ui } = state;
+
+	const params = {
+		bodyParams: encodeObject( request.bodyParams ),
+		endpoint: encodeString( request.endpoint ? request.endpoint.pathLabeled : '' ),
+		method: encodeString( request.method ),
+		pathValues: encodeObject( request.pathValues ),
+		queryParams: encodeObject( request.queryParams ),
+		url: encodeString( request.url ),
+		api: encodeString( ui.api ),
+		version: encodeString( ui.version ),
+	};
+
+	// Discard empty params
+	Object.keys( params ).forEach( key => ! params[ key ] && ( delete params[ key ] ) );
+
+	// Construct url
+	const urlParams = new URLSearchParams( params );
+	const url = window.location.origin + window.location.pathname + '?' + urlParams.toString();
+
+	return url;
+};
+
+export const getStateFromUrl = () => {
+	const urlParams = getUrlParams();
+
+	if ( urlParams.toString() === '' ) {
+		return false;
+	}
+
+	const state = { request: { ...defaultRequestState }, ui: { ...defaultUiState } };
+
+	try {
+		for ( const [ key, value ] of urlParams.entries() ) {
+			switch ( key ) {
+				case 'bodyParams':
+					state.request.bodyParams = decodeObject( value );
+					break;
+				case 'method':
+					state.request.method = decodeString( value );
+					break;
+				case 'pathValues':
+					state.request.pathValues = decodeObject( value );
+					break;
+				case 'queryParams':
+					state.request.queryParams = decodeObject( value );
+					break;
+				case 'url':
+					state.request.url = decodeString( value );
+					break;
+				case 'api':
+					state.ui.api = decodeString( value );
+					break;
+				case 'version':
+					state.ui.version = decodeString( value );
+					break;
+				default:
+					break;
+			}
+		}
+	} catch ( e ) {
+		// Fail without breaking the app
+		console.error( 'Could not parse state from url params.', e );
+		return false;
+	}
+
+	return state;
+};
+
+const router = ( { getState, dispatch } ) => {
+
+	// Determine if we need to load and select the endpoint
+	let isInitializingEndpoint = false;
+
+	const { ui = {} } = getStateFromUrl();
+	const endpointUrlParam = getUrlParams().get( 'endpoint' );
+	const endpointPathLabeled = endpointUrlParam ? decodeURIComponent( endpointUrlParam ) : false;
+	const apiName = ui.api;
+	const apiVersion = ui.version;
+
+	if ( endpointPathLabeled && apiName && apiVersion ) {
+		loadEndpoints( apiName, apiVersion )( dispatch );
+		isInitializingEndpoint = true;
+	}
+
+	return next => action => {
+		const state = getState();
+
+		switch ( action.type ) {
+			case REQUEST_TRIGGER:
+				const url = getUrlFromState( state );
+				window.history.pushState( {}, document.title, url );
+				break;
+			case API_VERSIONS_RECEIVE:
+				// Once the endpoint is loaded, select the endpoint.
+				if ( isInitializingEndpoint ) {
+					const endpoints = getEndpoints( state, apiName, apiVersion );
+					const endpoint = endpoints.find( ( { pathLabeled } ) => pathLabeled === endpointPathLabeled );
+					if ( endpoint ) {
+						dispatch( { type: REQUEST_SELECT_ENDPOINT, payload: { endpoint } } );
+					}
+					isInitializingEndpoint = false;
+				}
+				break;
+			default:
+				break;
+		}
+
+		return next( action );
+	};
+};
+
+export default router;

src/state/ui/reducer.js

@@ -3,7 +3,12 @@ import { UI_SELECT_API, UI_SELECT_VERSION } from '../actions';
 import { getDefault } from '../../api';
 import schema from './schema';
 
-const reducer = createReducer( { api: getDefault().name, version: null }, {
+export const defaultState = {
+	api: getDefault().name,
+	version: null,
+};
+
+const reducer = createReducer( defaultState, {
 	[ UI_SELECT_API ]: ( state, { payload } ) => {
 		return ( {
 			version: null,