add routing

src/components/MainHeader.jsx

@@ -147,7 +147,7 @@ export function MainHeader(props) {
 										}
 										class="main-header__avatar-img"
 									/>
-									{props.user && props.user.isPro ? <ProBadge /> : null}
+									{props.user?.isPro ? <ProBadge /> : null}
 								</HStack>
 							</Button>
 						)}

src/components/app.jsx

@@ -245,6 +245,10 @@ export default class App extends Component {
 				this.setCurrentItem(this.state.currentItem).then(() => {
 					this.refreshEditor();
 				});
+			} else if (this.props.itemId) {
+				window.db.fetchItem(this.props.itemId).then(item => {
+					this.setCurrentItem(item).then(() => this.refreshEditor());
+				});
 			} else if (result.preserveLastCode && lastCode) {
 				this.setState({ unsavedEditCount: 0 });
 				log('Load last unsaved item', lastCode);
@@ -570,6 +574,7 @@ export default class App extends Component {
 	}
 
 	componentDidMount() {
+		console.log('itemId', this.props.itemId);
 		function setBodySize() {
 			document.body.style.height = `${window.innerHeight}px`;
 		}

src/db.js

@@ -59,7 +59,7 @@ import { log } from './utils';
 
 			return firestoreInstance
 				.enablePersistence({ experimentalTabSynchronization: true })
-				.then(function() {
+				.then(function () {
 					// Initialize Cloud Firestore through firebase
 					db = firebase.firestore();
 					// const settings = {
@@ -69,7 +69,7 @@ import { log } from './utils';
 					log('firebase db ready', db);
 					resolve(db);
 				})
-				.catch(function(err) {
+				.catch(function (err) {
 					reject(err.code);
 					if (err.code === 'failed-precondition') {
 						// Multiple tabs open, persistence can only be enabled
@@ -113,7 +113,7 @@ import { log } from './utils';
 			{
 				lastSeenVersion: version
 			},
-			function() {}
+			function () {}
 		);
 		if (window.user) {
 			const remoteDb = await getDb();
@@ -142,6 +142,18 @@ import { log } from './utils';
 			});
 	}
 
+	async function fetchItem(itemId) {
+		const remoteDb = await getDb();
+		return remoteDb
+			.doc(`items/${itemId}`)
+			.get()
+			.then(doc => {
+				if (!doc.exists) return {};
+				const data = doc.data();
+				return data;
+			});
+	}
+
 	// Fetch user settings.
 	// This isn't hitting the remote db because remote settings
 	// get fetch asynchronously (in user/) and update the envioronment.
@@ -161,6 +173,7 @@ import { log } from './utils';
 		getUserLastSeenVersion,
 		setUserLastSeenVersion,
 		getSettings,
+		fetchItem,
 		local: dbLocalAlias,
 		sync: dbSyncAlias
 	};

src/index.js

@@ -1,3 +1,4 @@
+import Router from 'preact-router';
 import App from './components/app.jsx';
 
 import './lib/codemirror/lib/codemirror.css';
@@ -8,4 +9,11 @@ import './lib/hint.min.css';
 import './lib/inlet.css';
 import './style.css';
 
-export default App;
+export default function () {
+	return (
+		<Router>
+			<App path="/" />
+			<App path="/creation/:itemId" />
+		</Router>
+	);
+}

src/itemService.js

@@ -1,5 +1,5 @@
 import { deferred } from './deferred';
-import { log } from 'util';
+import { log } from './utils';
 import firebase from 'firebase/app';
 
 export const itemService = {
@@ -52,15 +52,15 @@ export const itemService = {
 				.collection('items')
 				.where('createdBy', '==', window.user.uid)
 				.onSnapshot(
-					function(querySnapshot) {
-						querySnapshot.forEach(function(doc) {
+					function (querySnapshot) {
+						querySnapshot.forEach(function (doc) {
 							items.push(doc.data());
 						});
 						log('Items fetched in ', Date.now() - t, 'ms');
 
 						d.resolve(items);
 					},
-					function() {
+					function () {
 						d.resolve([]);
 					}
 				);
@@ -147,7 +147,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					/* eslint-disable guard-for-in */
 					for (var id in items) {
 						result.items[id] = true;
@@ -205,7 +205,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					result.items[itemId] = true;
 					window.db.local.set({
 						items: result.items
@@ -235,7 +235,7 @@ export const itemService = {
 				{
 					items: {}
 				},
-				function(result) {
+				function (result) {
 					delete result.items[itemId];
 					window.db.local.set({
 						items: result.items