add routing

src/FilterLists.Web.V2/package.json

@@ -7,12 +7,14 @@
     "@types/node": "^12.7.2",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^4.3.5",
     "antd": "^3.22.0",
     "babel-plugin-import": "^1.12.0",
     "customize-cra": "^0.5.0",
     "react": "^16.9.0",
     "react-app-rewired": "^2.1.3",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "^3.1.1",
     "typescript": "3.5.3"
   },

src/FilterLists.Web.V2/src/App.tsx

@@ -1,25 +1,31 @@
 import { Layout, Menu } from 'antd';
 import React from 'react';
+import { BrowserRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 
 import { AllListsTable } from './components';
 
 const { Header, Content, Footer } = Layout;
 
 export const App: React.FC = () =>
-  <Layout>
-    <Header>
-      <Logo />
-      <Menu theme="dark" mode="horizontal" style={{ lineHeight: '64px' }} />
-    </Header>
-    <Content>
-      <div style={{ background: '#fff', paddingLeft: 12, paddingTop: 12, paddingRight: 12, minHeight: 280 }}>
-        <AllListsTable />
-      </div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>
-      <CopyrightAuthor /> | <Community /> | <GitHub /> | <Api /> | <Donate />
-    </Footer>
-  </Layout>;
+  <BrowserRouter>
+    <Layout>
+      <Header>
+        <Logo />
+        <Menu theme="dark" mode="horizontal" style={{ lineHeight: '64px' }} />
+      </Header>
+      <Content>
+        <div style={{ background: '#fff', paddingLeft: 12, paddingTop: 12, paddingRight: 12, minHeight: 280 }}>
+          <Switch>
+            <Route path="/" exact component={AllListsTable} />
+            <Route component={NotFound} />
+          </Switch>
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>
+        <CopyrightAuthor /> | <Community /> | <GitHub /> | <Api /> | <Donate />
+      </Footer>
+    </Layout>
+  </BrowserRouter>;
 
 const Logo = (): JSX.Element =>
   <img src="logo_filterlists.png"
@@ -62,4 +68,9 @@ const Donate = (): JSX.Element =>
     title="Donate to FilterLists with Beerpay"
     target="_blank" rel="noopener noreferrer">
     Donate
-    </a>;
+    </a>;
+
+const NotFound = (props: RouteComponentProps) =>
+  <h2>
+    404 Not Found: <code>{props.location.pathname}</code>
+  </h2>;

src/FilterLists.Web.V2/src/components/allListsTable/AllListsTable.tsx

@@ -118,7 +118,6 @@ export class AllListsTable extends React.Component<{}, State> {
               : null} />
         <Table.Column<List> title="Details"
           dataIndex={nameof<List>("viewUrl")}
-          width={123}
           className={styles.nogrow}
           fixed={this.state.isNarrowWindow ? undefined : "right"}
           render={(_text: string, record: List) => <ListDetails list={record} />} />