use meaningful url slugs for list links

src/FilterLists.Web.V2/package.json

@@ -16,6 +16,7 @@
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "^3.1.1",
+    "slugify": "^1.3.4",
     "typescript": "^3.6.2"
   },
   "scripts": {
@@ -39,4 +40,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/FilterLists.Web.V2/src/components/ListInfoButton.tsx

@@ -1,6 +1,7 @@
 import { Button, Icon } from 'antd';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import slugify from 'slugify';
 
 import { List } from '../interfaces/List';
 
@@ -9,7 +10,7 @@ interface Props {
 };
 
 export const ListInfoButton = (props: RouteComponentProps & Props) => {
-  const listPath = `/${props.list.id}`;
+  const listPath = `/${slugify(props.list.name)}`;
   return (
     <Button
       type="primary"

src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 export const ListDrawer = (props: Props) => {
     const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
-        const list = props.lists.find(l => l.id === +rp.match.params.id);
+        const list = props.lists.find(l => l.slug === rp.match.params.listSlug);
         return list
             ? <ListInfoDrawer
                 list={list as List}
@@ -26,5 +26,5 @@ export const ListDrawer = (props: Props) => {
                 {...rp} />
             : props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />;
     };
-    return <Route path="/:id" render={renderDrawer} />;
+    return <Route path="/:listSlug" render={renderDrawer} />;
 };

src/FilterLists.Web.V2/src/hooks/useLists.tsx

@@ -1,4 +1,10 @@
+import slugify from 'slugify';
+
 import { List } from '../interfaces/List';
 import { useApiData } from './useApiData';
 
-export const useLists = () => useApiData<List[]>("/api/v1/lists") || [];
+export const useLists = () => {
+    const lists = useApiData<List[]>("/api/v1/lists");
+    lists && lists.forEach(l => l.slug = slugify(l.name));
+    return lists || [];
+};

src/FilterLists.Web.V2/src/interfaces/List.ts

@@ -19,4 +19,7 @@
     tagIds: number[];
     viewUrl: string;
     viewUrlMirrors: string[];
+
+    // auto-generated by useLists hook
+    slug: string;
 };