From 458880baece365497b8d1d83984408dcb6f18ff8 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Wed, 11 Sep 2019 18:47:48 -0500
Subject: [PATCH] lowercase and strip special chars from slugs

---
 src/FilterLists.Web/src/components/ListInfoButton.tsx | 4 +++-
 src/FilterLists.Web/src/constants.ts                  | 1 +
 src/FilterLists.Web/src/hooks/useLists.tsx            | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/FilterLists.Web/src/constants.ts

diff --git a/src/FilterLists.Web/src/components/ListInfoButton.tsx b/src/FilterLists.Web/src/components/ListInfoButton.tsx
index 041a79b06..5214a2df5 100644
--- a/src/FilterLists.Web/src/components/ListInfoButton.tsx
+++ b/src/FilterLists.Web/src/components/ListInfoButton.tsx
@@ -3,12 +3,14 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import slugify from 'slugify';
 
+import { SlugifyOptions } from '../constants';
+
 interface Props {
   listName: string;
 };
 
 export const ListInfoButton = (props: RouteComponentProps & Props) => {
-  const listPath = `/lists/${slugify(props.listName)}`;
+  const listPath = `/lists/${slugify(props.listName, SlugifyOptions)}`;
   return (
     <Button
       type="primary"
diff --git a/src/FilterLists.Web/src/constants.ts b/src/FilterLists.Web/src/constants.ts
new file mode 100644
index 000000000..16a9843a4
--- /dev/null
+++ b/src/FilterLists.Web/src/constants.ts
@@ -0,0 +1 @@
+export const SlugifyOptions = { remove: /[^a-zA-Z0-9- ]/g, lower: true }
\ No newline at end of file
diff --git a/src/FilterLists.Web/src/hooks/useLists.tsx b/src/FilterLists.Web/src/hooks/useLists.tsx
index 65bd8113b..ffdadc769 100644
--- a/src/FilterLists.Web/src/hooks/useLists.tsx
+++ b/src/FilterLists.Web/src/hooks/useLists.tsx
@@ -1,11 +1,12 @@
 import slugify from 'slugify';
 
+import { SlugifyOptions } from '../constants';
 import { List } from '../interfaces/List';
 import { useApiData } from './useApiData';
 
 export const useLists = () => {
   const lists = useApiData<List[]>("/api/v1/lists");
-  lists && lists.forEach(l => l.slug = slugify(l.name));
+  lists && lists.forEach(l => l.slug = slugify(l.name, SlugifyOptions));
   return (lists || [])
     .sort((a: List, b: List) => a.name.localeCompare(b.name));
 };
\ No newline at end of file