prehistoric-systems/FilterLists
1
0
Fork 0
mirror of https://github.com/collinbarrett/FilterLists.git synced 2026-03-11 09:04:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

modal works! (rough, needs cleanup)

Browse source
This commit is contained in:
Collin M. Barrett 2018-02-16 20:47:54 -06:00
parent 9fc3377f5f
commit 988e906900
2 changed files with 42 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/FilterLists.Web/ClientApp/components/Home.tsx
View file

@ -41,44 +41,15 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
{
Header: "Details",
accessor: "id",
Cell: (d: any) => <ListDetailsModal/>,
style: { textAlign: "center" },
width: 100
},
{
Header: "View",
accessor: "viewUrl",
Cell: (d: any) => <a href={d.value} className="btn btn-primary btn-block"
title={"View the raw list. Many are quite large, so be cautious if on metered bandwidth."}>
View</a>,
style: { textAlign: "center" },
width: 100
},
{
Header: "Subscribe",
accessor: "viewUrl",
Cell: (d: any) => <a href={`abp:subscribe?location=${encodeURIComponent(d.value)}&amp;title=${encodeURIComponent(d.row.name)}`}
className="btn btn-primary btn-block"
title={"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
Subscribe</a>,
Cell: (d: any) => <ListDetailsModal listId={d.value}/>,
style: { textAlign: "center" },
width: 100
}
]}
SubComponent={(row: any) => {
return <div style={{ padding: "20px" }}>
<em>
{row.original.description}
</em>
</div>;
}}/>;
]}/>;
}
}
interface IFilterList {
id: number;
name: string;
description: string;
viewUrl: string;
}

51
src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
View file

@ -3,18 +3,21 @@ import "isomorphic-fetch";
import * as ReactModal from "react-modal";
export default class ListDetailsModal extends React.Component<any, any> {
private readonly listId: any;
constructor(props: any) {
super(props);
this.state = {
showModal: false
};
this.state = { showModal: false, loading: true };
this.listId = props.listId;
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal() {
this.setState({ showModal: true });
fetch(`https://api.filterlists.com/v1/lists/${this.listId}`)
.then(response => response.json() as Promise<IFilterListDetails[]>)
.then(data => { this.setState({ filterListdetails: data, loading: false }); });
}
handleCloseModal() {
@ -22,16 +25,42 @@ export default class ListDetailsModal extends React.Component<any, any> {
}
render() {
const contents = this.state.loading
? null
: <ReactModal
isOpen={this.state.showModal}
contentLabel="onRequestClose Example"
onRequestClose={this.handleCloseModal}
shouldCloseOnOverlayClick={false}>
<h1>{this.state.filterListdetails.name}</h1>
<p>{this.state.filterListdetails.description}</p>
<a href={this.state.filterListdetails.viewUrl} className="btn btn-primary btn-block"
title={"View the raw list. Many are quite large, so be cautious if on metered bandwidth."}>
View
</a>
<a href={`abp:subscribe?location=${encodeURIComponent(this.state.filterListdetails.viewUrl)
}&amp;title=${encodeURIComponent(this.state.filterListdetails.name)}`}
className="btn btn-primary btn-block"
title={
"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
Subscribe
</a>
<button onClick={this.handleCloseModal} className="btn btn-primary btn-block">Close</button>
</ReactModal>;
return (
<div>
<button onClick={this.handleOpenModal}>Trigger Modal</button>
<ReactModal
isOpen={this.state.showModal}
contentLabel="Minimal Modal Example"
>
<button onClick={this.handleCloseModal}>Close Modal</button>
</ReactModal>
<button onClick={this.handleOpenModal} className="btn btn-primary btn-block">Details</button>
{contents}
</div>
);
}
}
interface IFilterListDetails {
id: number;
name: string;
description: string;
descriptionSourceUrl: string;
viewUrl: string;
}