From 9fc3377f5f2d924faff47d5718f5de4ea1c6c161 Mon Sep 17 00:00:00 2001 From: "Collin M. Barrett" Date: Fri, 16 Feb 2018 19:28:33 -0600 Subject: [PATCH] add modal column --- .../ClientApp/components/Home.tsx | 45 +++++++------- .../ClientApp/components/ListDetailsModal.tsx | 37 ++++++++++++ src/FilterLists.Web/npm-shrinkwrap.json | 58 ++++++++++--------- src/FilterLists.Web/package.json | 2 + 4 files changed, 93 insertions(+), 49 deletions(-) create mode 100644 src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx index 2501e3485..3d0486ed3 100644 --- a/src/FilterLists.Web/ClientApp/components/Home.tsx +++ b/src/FilterLists.Web/ClientApp/components/Home.tsx @@ -3,6 +3,7 @@ import { RouteComponentProps } from "react-router"; import "isomorphic-fetch"; import ReactTable from "react-table" import "react-table/react-table.css" +import ListDetailsModal from "./ListDetailsModal"; interface IFilterListsState { filterLists: IFilterList[]; @@ -13,12 +14,9 @@ export class Home extends React.Component, IFilterListsS constructor(props: any) { super(props); this.state = { filterLists: [], loading: true }; - fetch("https://api.filterlists.com/v1/lists") .then(response => response.json() as Promise) - .then(data => { - this.setState({ filterLists: data, loading: false }); - }); + .then(data => { this.setState({ filterLists: data, loading: false }); }); } render() { @@ -27,7 +25,6 @@ export class Home extends React.Component, IFilterListsS Loading...

: Home.renderFilterListsTable(this.state.filterLists); - return
{contents}
; @@ -41,38 +38,40 @@ export class Home extends React.Component, IFilterListsS Header: "Name", accessor: "name" }, + { + Header: "Details", + accessor: "id", + Cell: (d: any) => , + style: { textAlign: "center" }, + width: 100 + }, { Header: "View", accessor: "viewUrl", - Cell: (d: any) => - View - , + Cell: (d: any) => + View, style: { textAlign: "center" }, width: 100 }, { Header: "Subscribe", accessor: "viewUrl", - Cell: (d: any) => - Subscribe - , + Cell: (d: any) => + Subscribe, style: { textAlign: "center" }, width: 100 } ]} SubComponent={(row: any) => { - return ( -
- - {row.original.description} - -
- ); + return
+ + {row.original.description} + +
; + }}/>; } } diff --git a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx new file mode 100644 index 000000000..359b2ea90 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; +import "isomorphic-fetch"; +import * as ReactModal from "react-modal"; + +export default class ListDetailsModal extends React.Component { + constructor(props: any) { + super(props); + this.state = { + showModal: false + }; + + this.handleOpenModal = this.handleOpenModal.bind(this); + this.handleCloseModal = this.handleCloseModal.bind(this); + } + + handleOpenModal() { + this.setState({ showModal: true }); + } + + handleCloseModal() { + this.setState({ showModal: false }); + } + + render() { + return ( +
+ + + + +
+ ); + } +} \ No newline at end of file diff --git a/src/FilterLists.Web/npm-shrinkwrap.json b/src/FilterLists.Web/npm-shrinkwrap.json index bfe0b2b6c..8f6f734ea 100644 --- a/src/FilterLists.Web/npm-shrinkwrap.json +++ b/src/FilterLists.Web/npm-shrinkwrap.json @@ -40,6 +40,14 @@ "@types/react": "16.0.38" } }, + "@types/react-modal": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.1.2.tgz", + "integrity": "sha512-EmzMU61fnQiTe1rajQRgo0ceaTo/TD5qsBCjMgPhp9PWia0HOD2VyDMnNErcVfWq8VBmkBJZoGhFmtQm2COY5g==", + "requires": { + "@types/react": "16.0.38" + } + }, "@types/react-router": { "version": "4.0.22", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.0.22.tgz", @@ -284,8 +292,7 @@ "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", - "dev": true + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, "asn1.js": { "version": "4.9.2", @@ -950,8 +957,7 @@ "core-js": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", - "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", - "dev": true + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" }, "core-util-is": { "version": "1.0.2", @@ -1247,7 +1253,6 @@ "version": "0.1.12", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", - "dev": true, "requires": { "iconv-lite": "0.4.18" } @@ -1478,6 +1483,11 @@ "strip-eof": "1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -1671,7 +1681,6 @@ "version": "0.8.16", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", - "dev": true, "requires": { "core-js": "1.2.7", "isomorphic-fetch": "2.2.1", @@ -2870,8 +2879,7 @@ "iconv-lite": { "version": "0.4.18", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.18.tgz", - "integrity": "sha1-I9hlaxaq5nQqwpcy6o8DNqR4nPI=", - "dev": true + "integrity": "sha1-I9hlaxaq5nQqwpcy6o8DNqR4nPI=" }, "icss-replace-symbols": { "version": "1.1.0", @@ -3167,8 +3175,7 @@ "is-stream": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", - "dev": true + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" }, "is-svg": { "version": "2.1.0", @@ -3201,7 +3208,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", - "dev": true, "requires": { "node-fetch": "1.7.1", "whatwg-fetch": "2.0.3" @@ -3222,8 +3228,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.7.0", @@ -3356,7 +3361,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", - "dev": true, "requires": { "js-tokens": "3.0.2" } @@ -3592,7 +3596,6 @@ "version": "1.7.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.1.tgz", "integrity": "sha1-iZyz0KPJL5UsR/G4dvTIrqvUANU=", - "dev": true, "requires": { "encoding": "0.1.12", "is-stream": "1.1.0" @@ -3721,8 +3724,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -4629,7 +4631,6 @@ "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", - "dev": true, "requires": { "asap": "2.0.6" } @@ -4638,7 +4639,6 @@ "version": "15.6.0", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz", "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=", - "dev": true, "requires": { "fbjs": "0.8.16", "loose-envify": "1.3.1", @@ -4801,6 +4801,16 @@ } } }, + "react-modal": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.2.1.tgz", + "integrity": "sha512-6idnYaDRvVRq702f1sgvMIisgHxYF4OoNDOLuWkxe0GoquI/CTVVXa9wvCFdu3vCTE85zMwX1GgUVyJfO+VnjQ==", + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.0", + "warning": "3.0.0" + } + }, "react-proxy": { "version": "3.0.0-alpha.1", "resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz", @@ -5107,8 +5117,7 @@ "setimmediate": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", - "dev": true + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, "sha.js": { "version": "2.4.10", @@ -5789,8 +5798,7 @@ "ua-parser-js": { "version": "0.7.17", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", - "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==", - "dev": true + "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" }, "uglify-js": { "version": "2.8.29", @@ -6106,7 +6114,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "dev": true, "requires": { "loose-envify": "1.3.1" } @@ -6272,8 +6279,7 @@ "whatwg-fetch": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz", - "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=", - "dev": true + "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ=" }, "whet.extend": { "version": "0.9.9", diff --git a/src/FilterLists.Web/package.json b/src/FilterLists.Web/package.json index 6b3086c28..3f19fe2e3 100644 --- a/src/FilterLists.Web/package.json +++ b/src/FilterLists.Web/package.json @@ -32,7 +32,9 @@ "webpack-hot-middleware": "^2.21.0" }, "dependencies": { + "@types/react-modal": "^3.1.2", "@types/react-table": "^6.7.3", + "react-modal": "^3.2.1", "react-table": "^6.7.6" } }