From a6ff60cbfd22a91b0cf96d2a2a0135ba834bcd73 Mon Sep 17 00:00:00 2001
From: Andrey Medvedev <andr.medv.spb@gmail.com>
Date: Sat, 22 Jun 2019 03:04:34 +0300
Subject: [PATCH] Encode sublinks in url to fix broken routes

Follow up of https://github.com/styleguidist/react-styleguidist/issues/1332
This appears to have fixed the top level section link,
but any sub-links within that section are still unencoded and result
in "Page not found".
---
 src/client/utils/__tests__/getUrl.spec.js | 19 +++++++++++++++++++
 src/client/utils/getUrl.js                |  5 +++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/client/utils/__tests__/getUrl.spec.js b/src/client/utils/__tests__/getUrl.spec.js
index e47f40386..6ae72866f 100644
--- a/src/client/utils/__tests__/getUrl.spec.js
+++ b/src/client/utils/__tests__/getUrl.spec.js
@@ -74,6 +74,25 @@ describe('getUrl', () => {
 		expect(result).toBe('/styleguide/#/Documentation/%40foo%2Fcomponents');
 	});
 
+	it('should return a route path with encoded name if sections (hashPath) has inappropriate symbols', () => {
+		expect(
+			getUrl({ name: '@foo/components', slug, hashPath: ['@foo/bar-documentation'] }, loc)
+		).toBe('/styleguide/#/%40foo%2Fbar-documentation/%40foo%2Fcomponents');
+
+		expect(
+			getUrl(
+				{
+					name: '@foo/components',
+					slug,
+					hashPath: ['@foo/bar-documentation', '@foo/bar-activations-section'],
+				},
+				loc
+			)
+		).toBe(
+			'/styleguide/#/%40foo%2Fbar-documentation/%40foo%2Fbar-activations-section/%40foo%2Fcomponents'
+		);
+	});
+
 	it('should return a route path with a param id=foobar', () => {
 		const result = getUrl({ name, slug, hashPath: ['Documentation'], id: true }, loc);
 		expect(result).toBe('/styleguide/#/Documentation?id=foobar');
diff --git a/src/client/utils/getUrl.js b/src/client/utils/getUrl.js
index fa0b6d803..06df8da2a 100644
--- a/src/client/utils/getUrl.js
+++ b/src/client/utils/getUrl.js
@@ -38,10 +38,11 @@ export default function getUrl(
 	}
 
 	if (hashPath) {
+		let encodedHashPath = hashPath.map(encodeURIComponent);
 		if (!id) {
-			hashPath = [...hashPath, encodedName];
+			encodedHashPath = [...encodedHashPath, encodedName];
 		}
-		url += `#/${hashPath.join('/')}`;
+		url += `#/${encodedHashPath.join('/')}`;
 	}
 
 	if (id) {