fix: unencoded url for categories (#2551)

Sean Ho · seanho96 · web-flow · commit f753189b6e29 · 2022-01-24T14:56:53.000+08:00
* fix: unencoded url for categories

* chore: remove console log

* fix: casing of category title

Co-authored-by: Sean Ho &lt;seanho96@yahoo.com&gt;
diff --git a/src/common/utility.js b/src/common/utility.js
@@ -345,7 +345,6 @@ export const slugify = (text) =>
         .toLowerCase()
         .trim() // Remove whitespace from both sides of a string
         .replace(/\s+/g, '-') // Replace spaces with -
-        .replace(/[^\w-]+/g, '') // Remove all non-word chars
         .replace(/--+/g, '-') // Replace multiple - with single -
 
 export const unslugify = (slug) => {
diff --git a/src/pages/academy/components/_search-banner.tsx b/src/pages/academy/components/_search-banner.tsx
@@ -749,12 +749,12 @@ const SearchBanner = ({ hidden }: SearchBannerProps) => {
 
     const handleHref = (category) => {
         if (isBrowser() && window.location.pathname.includes('/academy/videos')) {
-            return `/academy/search?type=video&category=${slugify(category)}`
+            return `/academy/search?type=video&category=${encodeURIComponent(slugify(category))}`
         }
         if (isBrowser() && window.location.pathname.includes('/academy/blog')) {
-            return `/academy/search?type=article&category=${slugify(category)}`
+            return `/academy/search?type=article&category=${encodeURIComponent(slugify(category))}`
         }
-        return `/academy/search?category=${slugify(category)}`
+        return `/academy/search?category=${encodeURIComponent(slugify(category))}`
     }
 
     return (
diff --git a/src/pages/academy/search/index.tsx b/src/pages/academy/search/index.tsx
@@ -290,6 +290,24 @@ const SearchPage = () => {
                 : total_article
         } of ${total_article} results`
 
+    // This is a temporary solution without adding slug to the combined_filter_type
+    // array from the constant file. This can be refactored in the future but
+    // requires a change in the logic for both SearchBanner and search page.
+    const getCategoryText = () => {
+        switch (category_type) {
+            case 'cfds':
+                return 'CFDs'
+            case 'dbot':
+                return 'DBot'
+            case 'dtrader':
+                return 'DTrader'
+            case 'deriv-mt5':
+                return 'Deriv MT5'
+            default:
+                return unslugify(category_type)
+        }
+    }
+
     return (
         <Layout type="academy" margin_top={'14.4'}>
             <SEO
@@ -320,7 +338,7 @@ const SearchPage = () => {
                                     Selection for
                                 </Header>
                                 <Header type="heading-2" as="span" color="black-3" weight="normal">
-                                    {unslugify(category_type)}
+                                    {getCategoryText()}
                                 </Header>
                             </>
                         )}

Original file line number	Diff line number	Diff line change
`@@ -749,12 +749,12 @@ const SearchBanner = ({ hidden }: SearchBannerProps) => {`
`749`	`749`
`750`	`750`	`const handleHref = (category) => {`
`751`	`751`	`if (isBrowser() && window.location.pathname.includes('/academy/videos')) {`
`752`		- return `/academy/search?type=video&category=${slugify(category)}`
	`752`	+ return `/academy/search?type=video&category=${encodeURIComponent(slugify(category))}`
`753`	`753`	`}`
`754`	`754`	`if (isBrowser() && window.location.pathname.includes('/academy/blog')) {`
`755`		- return `/academy/search?type=article&category=${slugify(category)}`
	`755`	+ return `/academy/search?type=article&category=${encodeURIComponent(slugify(category))}`
`756`	`756`	`}`
`757`		- return `/academy/search?category=${slugify(category)}`
	`757`	+ return `/academy/search?category=${encodeURIComponent(slugify(category))}`
`758`	`758`	`}`
`759`	`759`
`760`	`760`	`return (`