Make logo clickable

src/App.js

@@ -129,7 +129,19 @@ class App extends React.Component {
     return (
       <div>
         <div id="search">
-          <h1>{"🌩️"}</h1>
+          <h1>
+            <a
+              href="/"
+              onClick={e => {
+                if (Utils.eventIsLinkClick(e)) {
+                  e.preventDefault();
+                  this.props.setSearchQuery(null);
+                }
+              }}
+            >
+              {"🌩️"}
+            </a>
+          </h1>
           <input
             type="text"
             onChange={e => this.props.setSearchQuery(e.target.value)}

src/Skin.js

@@ -1,10 +1,6 @@
 import React from "react";
 import * as Utils from "./utils";
 
-function isModifiedEvent(event) {
-  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-}
-
 export default class Skin extends React.Component {
   constructor(props) {
     super(props);
@@ -45,11 +41,7 @@ export default class Skin extends React.Component {
           cursor: "pointer"
         }}
         onClick={e => {
-          if (
-            !e.defaultPrevented && // onClick prevented default
-            e.button === 0 && // ignore everything but left clicks
-            !isModifiedEvent(e) // ignore clicks with modifier keys
-          ) {
+          if (Utils.eventIsLinkClick(e)) {
             e.preventDefault();
             const { top, left } = this._ref.getBoundingClientRect();
             this.props.selectSkin(this.props.hash, { top, left });

src/redux/epics.js

@@ -26,7 +26,7 @@ const searchEpic = actions =>
   actions.pipe(
     filter(action => action.type === "SEARCH_QUERY_CHANGED"),
     switchMap(({ query }) => {
-      if (query.length === 0) {
+      if (query == null || query.length === 0) {
         return of(Actions.gotNewMatchingHashes(null));
       }
 

src/utils.js

@@ -13,7 +13,7 @@ export function skinUrlFromHash(hash) {
 }
 
 export function getPermalinkUrlFromHash(hash) {
-  return `/skin/${hash}/${filenameFromHash(hash)}/`;
+  return `/skin/${hash}/${filenameFromHash(hash)}`;
 }
 
 export function getWindowSize() {
@@ -29,3 +29,11 @@ export function getWindowSize() {
     windowHeight: y
   };
 }
+
+export function eventIsLinkClick(event) {
+  return (
+    !event.defaultPrevented && // onClick prevented default
+    event.button === 0 &&
+    !(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+  );
+}