flatten components, add list details drawer stub

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

@@ -1,7 +1,7 @@
 import { Layout, Menu } from 'antd';
 import React from 'react';
 
-import { AllListsTable } from './modules';
+import { AllListsTable } from './components';
 
 const { Header, Content, Footer } = Layout;
 

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface Props {
+  description: string;
+  descriptionSourceUrl: string;
+};
+
+export const Description = (props: Props): JSX.Element =>
+  props.description
+    ? <blockquote cite={props.description}>{props.description}</blockquote>
+    : <p>{props.description}</p>;

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

@@ -1,12 +1,12 @@
 import { Table } from 'antd';
 import React from 'react';
 
-import { Description, LanguageCloud, SubscribeButton, TagCloud } from '../../shared';
+import { Description, LanguageCloud, ListDetails, TagCloud } from '..';
+import { Language } from '../../interfaces/Language';
+import { List } from '../../interfaces/List';
+import { Tag } from '../../interfaces/Tag';
 import { nameof } from '../../utils';
 import styles from './AllListsTable.module.css';
-import { Language } from './Language';
-import { List } from './List';
-import { Tag } from './Tag';
 
 interface State {
   lists: List[];
@@ -90,8 +90,7 @@ export class AllListsTable extends React.Component<{}, State> {
           title="Description"
           dataIndex={nameof<List>("description")}
           className={styles.nogrow}
-          render={(text: string, record: List) =>
-            <Description desriptionSourceUrl={record.descriptionSourceUrl} desription={text} />} />
+          render={(_text: string, record: List) => <Description {...record} />} />
         <Table.Column<List>
           title="Software"
           dataIndex={nameof<List>("syntaxId")}
@@ -117,13 +116,12 @@ export class AllListsTable extends React.Component<{}, State> {
             tagIds
               ? <TagCloud tags={this.state.tags.filter((t: Tag) => tagIds.includes(t.id))} />
               : null} />
-        <Table.Column<List> title="Subscribe"
+        <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, index: number) =>
-            <SubscribeButton key={index} viewUrl={text} viewUrlMirrors={record.viewUrlMirrors} name={record.name} />} />
+          render={(_text: string, record: List) => <ListDetails list={record} />} />
       </Table>
     );
   }

src/FilterLists.Web.V2/src/components/index.ts

@@ -0,0 +1,8 @@
+import { AllListsTable } from './allListsTable';
+import { SubscribeButton } from './buttons';
+import { Description } from './Description';
+import { LanguageCloud } from './languageCloud';
+import { ListDetails } from './listDetails';
+import { TagCloud } from './tagCloud';
+
+export { SubscribeButton, Description, LanguageCloud, TagCloud, AllListsTable, ListDetails };

src/FilterLists.Web.V2/src/components/listDetails/ListDetails.tsx

@@ -0,0 +1,39 @@
+import { Button, Drawer } from 'antd';
+import React from 'react';
+
+import { Description } from '..';
+import { List } from '../../interfaces/List';
+
+interface State {
+  visible: boolean;
+}
+
+interface Props {
+  list: List;
+};
+
+export class ListDetails extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      visible: false
+    };
+  }
+
+  render() {
+    return (
+      <span>
+        <Button
+          type="primary"
+          onClick={() => this.setState({ visible: true, })}>
+          Details
+          </Button>
+        <Drawer
+          visible={this.state.visible}
+          onClose={() => this.setState({ visible: false, })}>
+          <Description {...this.props.list} />
+        </Drawer>
+      </span>
+    )
+  }
+}

src/FilterLists.Web.V2/src/components/listDetails/index.ts

@@ -0,0 +1,3 @@
+import { ListDetails } from './ListDetails';
+
+export { ListDetails };

src/FilterLists.Web.V2/src/modules/index.ts

@@ -1,3 +0,0 @@
-import { AllListsTable } from './allListsTable';
-
-export { AllListsTable }

src/FilterLists.Web.V2/src/shared/Description.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-interface Props {
-  desription: string;
-  desriptionSourceUrl: string;
-};
-
-export const Description = (props: Props): JSX.Element =>
-  props.desriptionSourceUrl
-    ? <blockquote cite={props.desriptionSourceUrl}>{props.desription}</blockquote>
-    : <p>{props.desription}</p>;

src/FilterLists.Web.V2/src/shared/index.ts

@@ -1,6 +0,0 @@
-import { SubscribeButton } from './buttons';
-import { Description } from './Description';
-import { LanguageCloud } from './languageCloud';
-import { TagCloud } from './tagCloud';
-
-export { SubscribeButton, Description, LanguageCloud, TagCloud };