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

@@ -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 = {