From 44a68778dcc63bc283c2e22b4333afc5a1df5c23 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 1 Sep 2019 09:07:12 -0500
Subject: [PATCH] use meaningful url slugs for list links

---
 src/FilterLists.Web.V2/package-lock.json      | Bin 562495 -> 562739 bytes
 src/FilterLists.Web.V2/package.json           |   3 ++-
 .../src/components/ListInfoButton.tsx         |   3 ++-
 .../src/components/listsTable/ListDrawer.tsx  |   4 ++--
 src/FilterLists.Web.V2/src/hooks/useLists.tsx |   8 +++++++-
 src/FilterLists.Web.V2/src/interfaces/List.ts |   3 +++
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/FilterLists.Web.V2/package-lock.json b/src/FilterLists.Web.V2/package-lock.json
index 316000e1ff14c3101af1bdcc883afb7cc1a14eaf..f3d8608e558af123ecca49485806759173865390 100644
GIT binary patch
delta 168
zcmdnLN@?>NrG^&97N!>F7M2#)7Pc+y7YkW)O4BpbrXSqPEHiykI-`+jF<78dUsoT>
z(lyjGp6(dVp%UpGU=S6VZJOcb=M-$ApX!<Ap6%x1T;(3<nIC1Co0k?C6d7z9?rUsh
zZd|3ER^c8Vk?LoVmR+7^l$zvPo?4kwW?7P%ALZ%c9_5|yW@H#@V6LB6ZfmR5ez=f*
M`{6>48f8W<08#@u=Kufz

delta 38
ucmdnIMrr>lrG^&97N!>F7M2#)7Pc+y7YnDKX=LYYKU>7U{cI6Osxkm6JP!T<

diff --git a/src/FilterLists.Web.V2/package.json b/src/FilterLists.Web.V2/package.json
index ad140b771..852819583 100644
--- a/src/FilterLists.Web.V2/package.json
+++ b/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"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx b/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
index 9d49bd744..cfc6f11d7 100644
--- a/src/FilterLists.Web.V2/src/components/ListInfoButton.tsx
+++ b/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"
diff --git a/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx b/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
index e9c0d636f..a82170c27 100644
--- a/src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx
+++ b/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} />;
 };
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/hooks/useLists.tsx b/src/FilterLists.Web.V2/src/hooks/useLists.tsx
index ede7f5f0b..b75846434 100644
--- a/src/FilterLists.Web.V2/src/hooks/useLists.tsx
+++ b/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") || [];
\ No newline at end of file
+export const useLists = () => {
+    const lists = useApiData<List[]>("/api/v1/lists");
+    lists && lists.forEach(l => l.slug = slugify(l.name));
+    return lists || [];
+};
\ No newline at end of file
diff --git a/src/FilterLists.Web.V2/src/interfaces/List.ts b/src/FilterLists.Web.V2/src/interfaces/List.ts
index cbc034223..f63bf709a 100644
--- a/src/FilterLists.Web.V2/src/interfaces/List.ts
+++ b/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;
 };
\ No newline at end of file