Skip to content

Commit

Permalink
break out ViewButton component
Browse files Browse the repository at this point in the history
ref #467
  • Loading branch information
collinbarrett committed Sep 11, 2018
1 parent a9a7bd2 commit 8d8d082
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 66 deletions.
77 changes: 11 additions & 66 deletions src/FilterLists.Web/ClientApp/components/ListDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from "react";
import "isomorphic-fetch";
import * as moment from "moment";
import SubscribeButtonGroup from "./SubscribeButtonGroup";
import ViewButtonGroup from "./ViewButtonGroup";

export default class ListDetails extends React.Component<any, any> {
constructor(props: any) {
Expand Down Expand Up @@ -76,7 +77,7 @@ function ListInfo(props: any) {
function ListUrls(props: any) {
return <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
<SubscribeButtonGroup name={props.details.name} url={props.details.viewUrl} urlMirror1={props.details.viewUrlMirror1} urlMirror2={props.details.viewUrlMirror2}/>
<ViewUrl url={props.details.viewUrl} name={props.details.name}/>
<ViewButtonGroup name={props.details.name} url={props.details.viewUrl} urlMirror1={props.details.viewUrlMirror1} urlMirror2={props.details.viewUrlMirror2}/>
<HomeUrl url={props.details.homeUrl} name={props.details.name}/>
<PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
<DonateUrl url={props.details.donateUrl} name={props.details.name}/>
Expand Down Expand Up @@ -111,15 +112,15 @@ function Description(props: any) {
function Languages(props: any) {
return props.languages.length > 0
? props.languages.length > 1
? <li className="list-group-item">
<p className="m-0">Languages:</p>
<ul>
{props.languages.map((language: any) => <li>{language}</li>)}
</ul>
</li>
: <li className="list-group-item">
<p>Language: {props.languages.map((language: any) => language)}</p>
</li>
? <li className="list-group-item">
<p className="m-0">Languages:</p>
<ul>
{props.languages.map((language: any) => <li>{language}</li>)}
</ul>
</li>
: <li className="list-group-item">
<p>Language: {props.languages.map((language: any) => language)}</p>
</li>
: null;
}

Expand Down Expand Up @@ -167,62 +168,6 @@ function License(props: any) {
: null;
}

function ViewUrl(props: any) {
return props.url.indexOf("https://") === -1
? ViewUrlNotSecure()
: props.url.indexOf("web.archive.org") === -1
? ViewUrlPrimary()
: ViewUrlWayback();

function ViewUrlPrimary() {
return <a href={props.url}
className="btn btn-primary fl-btn-details-action"
title={`View ${props.name} in its raw format.`}>
View
</a>;
}

function ViewUrlWayback() {
return <a href={props.url}
className="btn btn-secondary fl-btn-details-action"
title={`Archive.org Mirror (Original Offline) - View ${props.name} in its raw format.`}>
View
</a>;
}

function ViewUrlNotSecure() {
return <a href={props.url}
className="btn btn-danger fl-btn-details-action"
title={`Not Secure - View ${props.name} in its raw format.`}>
View
</a>;
}
};

function ViewUrlMirror(props: any) {
return props.url
? props.url.indexOf("https://") === -1
? ViewUrlNotSecure()
: viewUrlSecondary()
: null;

function viewUrlSecondary() {
return <a href={props.url}
className="btn btn-secondary fl-btn-details-action"
title={`Mirror - View ${props.name} in its raw format.`}>
View
</a>;
}

function ViewUrlNotSecure() {
return <a href={props.url}
className="btn btn-danger fl-btn-details-action"
title={`Mirror - Not Secure - View ${props.name} in its raw format.`}>
View
</a>;
}
};

function HomeUrl(props: any) {
return props.url
? <a href={props.url} className="btn btn-primary fl-btn-details-action"
Expand Down
52 changes: 52 additions & 0 deletions src/FilterLists.Web/ClientApp/components/ViewButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from "react";

export default class ViewButton extends React.Component<IViewButtonProps, any> {
constructor(props: IViewButtonProps) {
super(props);
this.state = {
buttonClassName: props.isOriginal ? "btn-primary" : "btn-secondary",
titlePrefix: ""
};
}

componentDidMount() {
if (this.props.url) {
this.setStateWayback();
this.setStateInsecure();
}
}

setStateWayback() {
if (this.props.url.indexOf("web.archive.org") !== -1) {
this.setState({
buttonClassName: "btn-secondary"
});
}
}

setStateInsecure() {
if (this.props.url.indexOf("https://") === -1) {
this.setState({
buttonClassName: "btn-danger",
titlePrefix: "Not Secure - "
});
}
}

render() {
const title = `View ${this.props.name} in its raw format.`;
const className = `btn ${this.state.buttonClassName} btn-block fl-btn-details-action`;
return this.props.url
? <a href={this.props.url} title={title} className={className}>
{this.props.text}
</a>
: null;
}
}

interface IViewButtonProps {
name: string;
url: string;
text: string;
isOriginal: boolean;
}
30 changes: 30 additions & 0 deletions src/FilterLists.Web/ClientApp/components/ViewButtonGroup.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from "react";
import ViewButton from "./ViewButton";

export default class ViewButtonGroup extends React.Component<IViewButtonGroupProps, any> {
constructor(props: IViewButtonGroupProps) {
super(props);
}

render() {
return this.props.urlMirror1
? (<div className="btn-group-vertical fl-btn-details-action" role="group">
<button id="btnGroupDropView" type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View
</button>
<div className="dropdown-menu" aria-labelledby="btnGroupDropView">
<ViewButton name={this.props.name} url={this.props.url} text="Original" isOriginal={true}/>
<ViewButton name={this.props.name} url={this.props.urlMirror1} text="Mirror 1" isOriginal={false}/>
<ViewButton name={this.props.name} url={this.props.urlMirror2} text="Mirror 2" isOriginal={false}/>
</div>
</div>)
: <ViewButton name={this.props.name} url={this.props.url} text="View" isOriginal={true}/>;
}
}

interface IViewButtonGroupProps {
name: string;
url: string;
urlMirror1: string;
urlMirror2: string;
}

0 comments on commit 8d8d082

Please sign in to comment.