fix(vx-demo/gallery): clear package filter on click if already selected

Hare-Lucius · Aug 19, 2020 · 6d6117e · 6d6117e
1 parent 92a1b2e
commit 6d6117e
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/packages/vx-demo/src/components/Gallery/index.tsx b/packages/vx-demo/src/components/Gallery/index.tsx
@@ -96,11 +96,11 @@ const tiles = [
 
 export default function Gallery() {
   const router = useRouter();
-  const { pkg } = router.query;
+  const { pkg: routePackage } = router.query;
 
-  const filteredTiles = pkg
+  const filteredTiles = routePackage
     ? tiles.filter(Tile =>
-        exampleToVxDependencyLookup[Tile.packageJson.name]?.has(pkg as VxPackage),
+        exampleToVxDependencyLookup[Tile.packageJson.name]?.has(routePackage as VxPackage),
       )
     : tiles;
 
@@ -110,10 +110,16 @@ export default function Gallery() {
         <div className="filters">
           <h6>Examples by package</h6>
           {vxPackages.map(vxPackage => (
-            <Link key={vxPackage} href={{ pathname: '/gallery', query: { pkg: vxPackage } }}>
+            <Link
+              key={vxPackage}
+              href={{
+                pathname: '/gallery',
+                query: routePackage === vxPackage ? undefined : { pkg: vxPackage },
+              }}
+            >
               <a
                 className={cx('filter-button', {
-                  emphasize: pkg === vxPackage,
+                  emphasize: routePackage === vxPackage,
                 })}
               >{`@vx/${vxPackage}`}</a>
             </Link>