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

wip refactoring buttons (#891)

Browse source 
* wip towards using react-bootstrap buttons

* further button refactoring

* ren IProps to Props per TS conventions

* ren ILanguage -> Language
This commit is contained in:
Collin M. Barrett 2019-08-02 00:07:09 +00:00 committed by GitHub
parent e248980b2e
commit 513d01351e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 168 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/FilterLists.Web/src/Layout.tsx
View file

@ -1,10 +1,10 @@
import * as React from "react";
interface IProps {
interface Props {
children?: React.ReactNode;
};
export const Layout = (props: IProps) =>
export const Layout = (props: Props) =>
<div className="container">
<Header />
<div className="row">

10
src/FilterLists.Web/src/modules/home/Home.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import { IColumnVisibility } from "./interfaces/IColumnVisibility";
import { ILanguage } from "./interfaces/ILanguage";
import { Language } from "./interfaces/Language";
import { ILicense } from "./interfaces/ILicense";
import { IList } from "./interfaces/IList";
import { IMaintainer } from "./interfaces/IMaintainer";
@ -20,8 +20,8 @@ const columnVisibilityDefaults: IColumnVisibility[] = [
{ column: "Subscribe", visible: false }
];
interface IProps {
languages: ILanguage[];
interface Props {
languages: Language[];
licenses: ILicense[];
lists: IList[];
maintainers: IMaintainer[];
@ -36,8 +36,8 @@ interface IState {
pageSize: number;
};
export class Home extends React.Component<IProps, IState> {
constructor(props: IProps) {
export class Home extends React.Component<Props, IState> {
constructor(props: Props) {
super(props);
this.state = {
columnVisibility: columnVisibilityDefaults,

6
src/FilterLists.Web/src/modules/home/HomeContainer.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import axios from "axios";
import { ILanguage } from "./interfaces/ILanguage";
import { Language } from "./interfaces/Language";
import { ILicense } from "./interfaces/ILicense";
import { IList } from "./interfaces/IList";
import { IMaintainer } from "./interfaces/IMaintainer";
@ -10,7 +10,7 @@ import { ITag } from "./interfaces/ITag";
import { Home } from "./Home";
interface IState {
languages: ILanguage[];
languages: Language[];
licenses: ILicense[];
lists: IList[];
maintainers: IMaintainer[];
@ -46,7 +46,7 @@ export class HomeContainer extends React.Component<{}, IState> {
};
fetchLanguages() {
axios.request<ILanguage[]>({ url: "/api/v1/languages" })
axios.request<Language[]>({ url: "/api/v1/languages" })
.then(l => { this.setState({ languages: l.data }); })
};

4
src/FilterLists.Web/src/modules/home/components/IListDetails.ts
View file

@ -1,4 +1,4 @@
import { ILanguage } from "../interfaces/ILanguage";
import { Language } from "../interfaces/Language";
import { ILicense } from "../interfaces/ILicense";
import { IMaintainer } from "../interfaces/IMaintainer";
import { ISyntax } from "../interfaces/ISyntax";
@ -14,7 +14,7 @@ export interface IListDetails {
forumUrl: string;
homeUrl: string;
issuesUrl: string;
languages: ILanguage[];
languages: Language[];
license: ILicense;
maintainers: IMaintainer[];
name: string;

4
src/FilterLists.Web/src/modules/home/components/Oneliner.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
interface IProps {
interface Props {
listCount: number;
//ruleCount: number;
};
export const Oneliner = (props: IProps) =>
export const Oneliner = (props: Props) =>
props.listCount > 0/* && props.ruleCount > 0*/
? <p className="ml-2 mr-2">
The independent, comprehensive directory of {/*}<strong>{props.ruleCount.toLocaleString()

4
src/FilterLists.Web/src/modules/home/components/TagGroup.tsx
View file

@ -2,11 +2,11 @@ import * as React from "react";
import { ITag } from "../interfaces/ITag";
import { getContrast } from "../../../utils";
interface IProps {
interface Props {
tags: ITag[];
};
export const TagGroup = (props: IProps) =>
export const TagGroup = (props: Props) =>
props.tags && props.tags.length > 0
? <div className="fl-wrap-cell">
{props.tags.map((t: ITag, i: number) => <Tag tag={t} key={i} />)}

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/DetailsExpander.tsx
View file

@ -6,13 +6,13 @@ import { InfoCard } from "./infoCard";
import { LinkButtonGroup } from "./LinkButtonGroup";
import { MaintainersInfoCard } from "./maintainersInfoCard";
interface IProps {
interface Props {
columnVisibility: IColumnVisibility[];
list: IListDetails;
software: ISoftware[];
};
export const DetailsExpander = (props: IProps) =>
export const DetailsExpander = (props: Props) =>
<div className="card border-primary">
<div className="card-body p-2">
<div className="container m-0">

12
src/FilterLists.Web/src/modules/home/components/detailsExpander/LinkButtonGroup.tsx
View file

@ -8,11 +8,11 @@ import {
IssuesButton,
PolicyButton,
SubmitButton,
SubscribeButtonGroup,
ViewButtonGroup
SubscribeButton,
ViewButton
} from "../linkButtons";
interface IProps {
interface Props {
chatUrl: string;
donateUrl: string;
emailAddress: string;
@ -26,10 +26,10 @@ interface IProps {
viewUrlMirrors: string[];
};
export const LinkButtonGroup = (props: IProps) =>
export const LinkButtonGroup = (props: Props) =>
<div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end">
<SubscribeButtonGroup name={props.name} url={props.viewUrl} urlMirrors={props.viewUrlMirrors} />
<ViewButtonGroup name={props.name} url={props.viewUrl} urlMirrors={props.viewUrlMirrors} />
<SubscribeButton name={props.name} url={props.viewUrl} urlMirrors={props.viewUrlMirrors} />
<ViewButton name={props.name} url={props.viewUrl} urlMirrors={props.viewUrlMirrors} />
<HomeButton name={props.name} url={props.homeUrl} />
<PolicyButton name={props.name} url={props.policyUrl} />
<DonateButton name={props.name} url={props.donateUrl} />

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/Description.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import "./description.css";
interface IProps {
interface Props {
description: string;
url: string;
};
export const Description = (props: IProps) =>
export const Description = (props: Props) =>
props.description
? <h3 className="card-header fl-description">
{props.url

8
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/InfoCard.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import { IColumnVisibility } from "../../../interfaces/IColumnVisibility";
import { ILanguage } from "../../../interfaces/ILanguage";
import { Language } from "../../../interfaces/Language";
import { ILicense, } from "../../../interfaces/ILicense";
import { ISoftware, } from "../../../interfaces/ISoftware";
import { ISyntax, } from "../../../interfaces/ISyntax";
@ -15,11 +15,11 @@ import { Syntax } from "./Syntax";
import { TagGroup } from "../../TagGroup"
// import { UpdatedDate } from "./UpdatedDate";
interface IProps {
interface Props {
columnVisibility: IColumnVisibility[];
description: string;
descriptionSourceUrl: string;
languages: ILanguage[];
languages: Language[];
license: ILicense;
name: string;
publishedDate: string;
@ -30,7 +30,7 @@ interface IProps {
//updatedDate: string;
};
export const InfoCard = (props: IProps) =>
export const InfoCard = (props: Props) =>
<div className="col-9">
{props.columnVisibility.filter((c: IColumnVisibility) => c.column === "Tags")[0].visible
? null

10
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/Languages.tsx
View file

@ -1,17 +1,17 @@
import * as React from "react";
import { ILanguage } from "../../../interfaces/ILanguage";
import { Language } from "../../../interfaces/Language";
interface IProps {
languages: ILanguage[];
interface Props {
languages: Language[];
};
export const Languages = (props: IProps) =>
export const Languages = (props: Props) =>
props.languages && props.languages.length > 0
? props.languages.length > 1
? <li className="list-group-item">
<p className="m-0">Languages:</p>
<ul>
{props.languages.map((language: ILanguage, i: number) => <li key={i}>{language.name}</li>)}
{props.languages.map((language: Language, i: number) => <li key={i}>{language.name}</li>)}
</ul>
</li>
: <li className="list-group-item">

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/License.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
import { ILicense } from "../../../interfaces/ILicense";
interface IProps {
interface Props {
license: ILicense;
};
export const License = (props: IProps) =>
export const License = (props: Props) =>
props.license.name
? (props.license.descriptionUrl
? <li className="list-group-item">

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/PublishedDate.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
import moment from 'moment';
interface IProps {
interface Props {
date: string;
};
export const PublishedDate = (props: IProps) =>
export const PublishedDate = (props: Props) =>
props.date
? <li className="list-group-item">
<p>Published: {moment(props.date).format("l")}</p>

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/RuleCount.tsx
View file

@ -1,10 +1,10 @@
import * as React from "react";
interface IProps {
interface Props {
ruleCount: number;
};
export const RuleCount = (props: IProps) =>
export const RuleCount = (props: Props) =>
props.ruleCount > 0
? <li className="list-group-item">
<p>Rule Count: {props.ruleCount.toLocaleString()}</p>

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/Syntax.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
import { ISyntax } from "../../../interfaces/ISyntax";
interface IProps {
interface Props {
syntax: ISyntax;
};
export const Syntax = (props: IProps) =>
export const Syntax = (props: Props) =>
props.syntax
? (props.syntax.definitionUrl
? <li className="list-group-item">

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/infoCard/UpdatedDate.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
import moment from 'moment';
interface IProps {
interface Props {
updatedDate: string;
};
export const UpdatedDate = (props: IProps) =>
export const UpdatedDate = (props: Props) =>
props.updatedDate
? <li className="list-group-item">
<p>Updated: {moment(props.updatedDate).isValid()

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerAdditionalLists.tsx
View file

@ -1,11 +1,11 @@
import * as React from "react";
//interface IProps {
//interface Props {
// name: string;
// additionalLists: IMaintainerAdditionalListDto[];
//};
export const MaintainerAdditionalLists = (/*props: IProps*/) =>
export const MaintainerAdditionalLists = (/*props: Props*/) =>
<div className="col-9">
{ /*props.additionalLists && props.additionalLists.length > 0
? <div>

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx
View file

@ -3,11 +3,11 @@ import { IMaintainer } from "../../../interfaces/IMaintainer";
import { MaintainerAdditionalLists } from "./MaintainerAdditionalLists";
import { MaintainerLinkButtonGroup } from "./MaintainerLinkButtonGroup";
interface IProps {
interface Props {
maintainer: IMaintainer;
};
export const MaintainerInfoCard = (props: IProps) =>
export const MaintainerInfoCard = (props: Props) =>
props.maintainer.name
? <div className="card">
<div className="card-body">

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerLinkButtonGroup.tsx
View file

@ -1,14 +1,14 @@
import * as React from "react";
import { EmailButton, HomeButton, TwitterButton } from "../../linkButtons";
interface IProps {
interface Props {
emailAddress: string;
homeUrl: string;
name: string;
twitterHandle: string;
};
export const MaintainerLinkButtonGroup = (props: IProps) =>
export const MaintainerLinkButtonGroup = (props: Props) =>
<div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
<HomeButton {...props} url={props.homeUrl} />
<EmailButton {...props} />

4
src/FilterLists.Web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx
View file

@ -2,11 +2,11 @@ import * as React from "react";
import { IMaintainer } from "../../../interfaces/IMaintainer";
import { MaintainerInfoCard } from "./MaintainerInfoCard";
interface IProps {
interface Props {
maintainers: IMaintainer[];
};
export const MaintainersInfoCard = (props: IProps) =>
export const MaintainersInfoCard = (props: Props) =>
props.maintainers && props.maintainers.length > 0
? <div className="w-100">
{props.maintainers.map((m: IMaintainer, i: number) => <MaintainerInfoCard maintainer={m} key={i} />)}

4
src/FilterLists.Web/src/modules/home/components/linkButtons/ChatButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const ChatButton = (props: IProps) =>
export const ChatButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`Enter the chat room for ${props.name}.`}

6
src/FilterLists.Web/src/modules/home/components/linkButtons/DonateButton.tsx
View file

@ -1,14 +1,14 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const DonateButton = (props: IProps) =>
export const DonateButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`Donate to the maintainer of ${props.name}.`}
text="Donate" />
: null;
: null;

4
src/FilterLists.Web/src/modules/home/components/linkButtons/EmailButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
emailAddress: string;
};
export const EmailButton = (props: IProps) =>
export const EmailButton = (props: Props) =>
props.emailAddress
? <LinkButton href={`mailto:${props.emailAddress}`}
title={`Email ${props.name}.`}

4
src/FilterLists.Web/src/modules/home/components/linkButtons/ForumButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const ForumButton = (props: IProps) =>
export const ForumButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`View the forum for ${props.name}.`}

4
src/FilterLists.Web/src/modules/home/components/linkButtons/HomeButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const HomeButton = (props: IProps) =>
export const HomeButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`View ${props.name}'s homepage.`}

4
src/FilterLists.Web/src/modules/home/components/linkButtons/IssuesButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const IssuesButton = (props: IProps) =>
export const IssuesButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`View the GitHub Issues for ${props.name}.`}

17
src/FilterLists.Web/src/modules/home/components/linkButtons/LinkButton.tsx
View file

@ -1,18 +1,19 @@
import * as React from "react";
import "./button.css";
import { Button, ButtonProps } from "react-bootstrap";
interface IProps {
interface Props {
href: string;
variant?: ButtonProps["variant"],
title?: string;
buttonClass?: string;
text: string;
};
export const LinkButton = (props: IProps) =>
export const LinkButton = (props: Props) =>
props.href
? <a href={props.href}
title={props.title}
className={`btn ${props.buttonClass || "btn-primary"} fl-btn-link`}>
? <Button
href={props.href}
variant={props.variant}
title={props.title}>
{props.text}
</a>
</Button>
: null;

4
src/FilterLists.Web/src/modules/home/components/linkButtons/PolicyButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const PolicyButton = (props: IProps) =>
export const PolicyButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`View the types of rules that ${props.name} includes.`}

4
src/FilterLists.Web/src/modules/home/components/linkButtons/SubmitButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
};
export const SubmitButton = (props: IProps) =>
export const SubmitButton = (props: Props) =>
props.url
? <LinkButton href={props.url}
title={`Submit a new rule to be included in ${props.name}.`}

24
src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButton.tsx → src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButton/SubscribeButton.tsx
View file

@ -1,24 +1,25 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
import { ButtonProps } from "react-bootstrap";
import { LinkButton } from "../LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
text?: string;
};
export const SubscribeButton = (props: IProps) => {
let buttonClass: string | undefined;
export const SubscribeButton = (props: Props) => {
let buttonVariant: ButtonProps["variant"];
let titlePrefix: string;
if (props.url.indexOf(".onion/") > 0) {
buttonClass = "btn-success";
buttonVariant = "success";
titlePrefix = "Tor address - ";
} else if (props.url.indexOf("http://") === 0) {
buttonClass = "btn-danger";
buttonVariant = "danger";
titlePrefix = "Not Secure - ";
} else {
buttonClass = undefined;
buttonVariant = undefined;
titlePrefix = "";
}
@ -34,8 +35,6 @@ export const SubscribeButton = (props: IProps) => {
href = `abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${hrefTitle}`;
};
let title;
if (props.url.indexOf(".tpl") > 0) {
title = `${titlePrefix}Subscribe to ${props.name} with Internet Explorer's Tracking Protection List feature.`;
@ -48,9 +47,10 @@ export const SubscribeButton = (props: IProps) => {
};
return props.url
? <LinkButton href={href}
? <LinkButton
variant={buttonVariant}
href={href}
title={title}
buttonClass={buttonClass}
text={props.text || "Subscribe"} />
: null;
};
};

16
src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButton/SubscribeButtonGroup.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from "react";
import { SubscribeButtonGroupDropdown } from "./SubscribeButtonGroupDropdown";
import { SubscribeButton } from "./SubscribeButton";
interface Props {
name: string;
url: string;
urlMirrors?: string[];
};
export const SubscribeButtonGroup = (props: Props) =>
props.url
? (props.urlMirrors && props.urlMirrors.length > 0)
? <SubscribeButtonGroupDropdown {...props} urlMirrors={props.urlMirrors} />
: <SubscribeButton {...props} />
: null;

20
src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButtonGroup.tsx → src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButton/SubscribeButtonGroupDropdown.tsx
View file

@ -2,27 +2,13 @@ import * as React from "react";
import { DropdownButton, Dropdown } from "react-bootstrap";
import { SubscribeButton } from "./SubscribeButton";
interface IProps {
name: string;
url: string;
urlMirrors?: string[];
};
export const SubscribeButtonGroup = (props: IProps) =>
props.url
? (props.urlMirrors && props.urlMirrors.length > 0)
? <SubscribeButtonGroupDropdown {...props} urlMirrors={props
.urlMirrors} />
: <SubscribeButton {...props} />
: null;
interface ISubscribeButtonGroupDropdownProps {
interface Props {
name: string;
url: string;
urlMirrors: string[];
};
const SubscribeButtonGroupDropdown = (props: ISubscribeButtonGroupDropdownProps) => {
export const SubscribeButtonGroupDropdown = (props: Props) => {
let firstButtonText: string = "Original";
let mirrorIndex: number = 0;
@ -41,4 +27,4 @@ const SubscribeButtonGroupDropdown = (props: ISubscribeButtonGroupDropdownProps)
<SubscribeButton {...props} url={m} text={`Mirror ${i + 1 + mirrorIndex}`} />
</Dropdown.Item>)}
</DropdownButton>;
};
};

5
src/FilterLists.Web/src/modules/home/components/linkButtons/SubscribeButton/index.ts Normal file
View file

@ -0,0 +1,5 @@
import { SubscribeButtonGroup } from "./SubscribeButtonGroup";
export {
SubscribeButtonGroup as SubscribeButton
};

4
src/FilterLists.Web/src/modules/home/components/linkButtons/TwitterButton.tsx
View file

@ -1,12 +1,12 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
interface IProps {
interface Props {
name: string;
twitterHandle: string;
};
export const TwitterButton = (props: IProps) =>
export const TwitterButton = (props: Props) =>
props.twitterHandle
? <LinkButton href={`https://twitter.com/${props.twitterHandle}`}
title={`View ${props.name}'s Twitter profile.`}

6
src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButton.tsx → src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButton/ViewButton.tsx
View file

@ -1,13 +1,13 @@
import * as React from "react";
import { LinkButton } from "./LinkButton";
import { LinkButton } from "../LinkButton";
interface IProps {
interface Props {
name: string;
url: string;
text?: string;
};
export const ViewButton = (props: IProps) => {
export const ViewButton = (props: Props) => {
let title;
if (props.url.indexOf(".onion/") > 0) { title = `Tor address - View ${props.name} in its raw format.`; }

16
src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButton/ViewButtonGroup.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from "react";
import { ViewButtonGroupDropdown } from "./ViewButtonGroupDropdown";
import { ViewButton } from "./ViewButton";
interface Props {
name: string;
url: string;
urlMirrors?: string[];
};
export const ViewButtonGroup = (props: Props) =>
props.url
? (props.urlMirrors && props.urlMirrors.length > 0)
? <ViewButtonGroupDropdown {...props} urlMirrors={props.urlMirrors} />
: <ViewButton {...props} />
: null;

19
src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButtonGroup.tsx → src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButton/ViewButtonGroupDropdown.tsx
View file

@ -2,26 +2,13 @@ import * as React from "react";
import { DropdownButton, Dropdown } from "react-bootstrap";
import { ViewButton } from "./ViewButton";
interface IProps {
name: string;
url: string;
urlMirrors?: string[];
};
export const ViewButtonGroup = (props: IProps) =>
props.url
? (props.urlMirrors && props.urlMirrors.length > 0)
? <ViewButtonGroupDropdown {...props} urlMirrors={props.urlMirrors} />
: <ViewButton {...props} />
: null;
interface IViewButtonGroupDropdownProps {
interface Props {
name: string;
url: string;
urlMirrors: string[];
};
const ViewButtonGroupDropdown = (props: IViewButtonGroupDropdownProps) => {
export const ViewButtonGroupDropdown = (props: Props) => {
let firstButtonText: string = "Original";
let mirrorIndex: number = 0;
@ -30,7 +17,7 @@ const ViewButtonGroupDropdown = (props: IViewButtonGroupDropdownProps) => {
mirrorIndex++;
}
return <DropdownButton id="view-dropdown" drop="left" variant="primary" title="View" className="fl-btn-link">
return <DropdownButton id="view-dropdown" drop="left" variant="primary" title="View">
<Dropdown.Item as='span'>
<ViewButton {...props} text={firstButtonText} />
</Dropdown.Item>

5
src/FilterLists.Web/src/modules/home/components/linkButtons/ViewButton/index.ts Normal file
View file

@ -0,0 +1,5 @@
import { ViewButtonGroup } from "./ViewButtonGroup";
export {
ViewButtonGroup as ViewButton
};

11
src/FilterLists.Web/src/modules/home/components/linkButtons/button.css
View file

@ -1,11 +0,0 @@
.fl-btn-link {
margin-bottom: .2rem;
max-width: 100px;
width: 100px;
}
.dropdown-item {
border: 0;
min-width: 0;
padding: 0;
}

8
src/FilterLists.Web/src/modules/home/components/linkButtons/index.ts
View file

@ -6,9 +6,9 @@ import { HomeButton } from "./HomeButton";
import { IssuesButton } from "./IssuesButton";
import { PolicyButton } from "./PolicyButton";
import { SubmitButton } from "./SubmitButton";
import { SubscribeButtonGroup } from "./SubscribeButtonGroup";
import { SubscribeButton } from "./SubscribeButton";
import { TwitterButton } from "./TwitterButton";
import { ViewButtonGroup } from "./ViewButtonGroup";
import { ViewButton } from "./ViewButton";
export {
ChatButton,
@ -19,7 +19,7 @@ export {
IssuesButton,
PolicyButton,
SubmitButton,
SubscribeButtonGroup,
SubscribeButton,
TwitterButton,
ViewButtonGroup
ViewButton
};

12
src/FilterLists.Web/src/modules/home/components/listsTable/ListsTable.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import { IColumnVisibility } from "../../interfaces/IColumnVisibility";
import { ILanguage } from "../../interfaces/ILanguage";
import { Language } from "../../interfaces/Language";
import { ILicense } from "../../interfaces/ILicense";
import { IList } from "../../interfaces/IList";
import { IMaintainer } from "../../interfaces/IMaintainer";
@ -26,8 +26,8 @@ import {
import { IListDetails } from "../IListDetails";
import { DetailsExpander } from "../../components";
interface IProps {
languages: ILanguage[];
interface Props {
languages: Language[];
licenses: ILicense[];
lists: IList[];
maintainers: IMaintainer[];
@ -38,7 +38,7 @@ interface IProps {
pageSize: number;
};
export const ListsTable = (props: IProps) =>
export const ListsTable = (props: Props) =>
props.languages.length > 0 && props.lists.length > 0 && props.software.length > 0 && props.tags.length > 0
? <ReactTable
data={props.lists}
@ -73,7 +73,7 @@ export const ListsTable = (props: IProps) =>
interface ICreateListDtoProps {
list: IList;
languages: ILanguage[];
languages: Language[];
licenses: ILicense[];
maintainers: IMaintainer[];
syntaxes: ISyntax[];
@ -92,7 +92,7 @@ const mapListDetails = (props: ICreateListDtoProps): IListDetails =>
homeUrl: props.list.homeUrl,
issuesUrl: props.list.issuesUrl,
languages: props.list.languageIds
? props.languages.filter((l: ILanguage) => props.list.languageIds.indexOf(l.id) > -1)
? props.languages.filter((l: Language) => props.list.languageIds.indexOf(l.id) > -1)
: undefined,
license: props.licenses.filter((l: ILicense) => props.list.licenseId === l.id)[0],
maintainers: props.list.maintainerIds

1
src/FilterLists.Web/src/modules/home/components/listsTable/columns/DetailsButton.tsx
View file

@ -1,6 +1,5 @@
import * as React from "react";
import { Column, RowRenderProps } from "react-table";
import "../../linkButtons/button.css";
export const DetailsButton = {
Header: <span title="Learn more about the FilterList.">Details</span>,

18
src/FilterLists.Web/src/modules/home/components/listsTable/columns/Languages.tsx
View file

@ -1,9 +1,9 @@
import * as React from "react";
import { Column, Filter } from "react-table";
import { IColumnVisibility } from "../../../interfaces/IColumnVisibility";
import { ILanguage } from "../../../interfaces/ILanguage";
import { Language } from "../../../interfaces/Language";
export const Languages = (columnVisibility: IColumnVisibility[], languages: ILanguage[]) => {
export const Languages = (columnVisibility: IColumnVisibility[], languages: Language[]) => {
const languagesSorted = languages.sort((a, b) => a.name.localeCompare(b.name));
return ({
Header: <span title="Written forms of communication used by sites targeted by the FilterList.">Languages</span>,
@ -27,27 +27,27 @@ const filterMethod = (f: Filter, r: any[]): boolean => {
: f.value === "none");
};
const filterLanguages = (props: any, languages: ILanguage[]) =>
const filterLanguages = (props: any, languages: Language[]) =>
<select onChange={(event: any) => props.onChange(event.target.value)}
style={{ width: "100%" }}
value={props.filter ? props.filter.value : "any"}>
<option value="any">Any</option>
<option value="none">None</option>
{languages.length > 0
? languages.map((l: ILanguage, i: number) =>
? languages.map((l: Language, i: number) =>
<option value={l.id} key={i}>
{l.name} ({l.filterListIds ? l.filterListIds.length : 0})
</option>)
: null}
</select>;
const sortMethod = (a: number[], b: number[], languages: ILanguage[]) => {
const sortMethod = (a: number[], b: number[], languages: Language[]) => {
if (a && a.length > 0) {
if (b && b.length > 0) {
const aLanguageNames =
languages.filter((l: ILanguage) => a.indexOf(l.id) > -1).map((l: ILanguage) => l.name).join();
languages.filter((l: Language) => a.indexOf(l.id) > -1).map((l: Language) => l.name).join();
const bLanguageNames =
languages.filter((l: ILanguage) => b.indexOf(l.id) > -1).map((l: ILanguage) => l.name).join();
languages.filter((l: Language) => b.indexOf(l.id) > -1).map((l: Language) => l.name).join();
return aLanguageNames.toLowerCase() > bLanguageNames.toLowerCase() ? 1 : -1;
} else {
return -1;
@ -57,11 +57,11 @@ const sortMethod = (a: number[], b: number[], languages: ILanguage[]) => {
}
};
const Cell = (languageIds: number[], languages: ILanguage[]) =>
const Cell = (languageIds: number[], languages: Language[]) =>
languageIds
? <div className="fl-wrap-cell">
{languageIds.map((id: number, i: number) => {
const language = languages.filter((l: ILanguage) => l.id === id)[0];
const language = languages.filter((l: Language) => l.id === id)[0];
return <span className="badge badge-secondary"
title={language.name}
key={i}>

4
src/FilterLists.Web/src/modules/home/components/listsTable/columns/SubscribeButton.tsx
View file

@ -1,7 +1,7 @@
import * as React from "react";
import { Column, Filter } from "react-table";
import { IColumnVisibility } from "../../../interfaces/IColumnVisibility";
import { SubscribeButtonGroup } from "../../linkButtons";
import { SubscribeButton as SubscribeButtonBase } from "../../linkButtons";
export const SubscribeButton = (columnVisibility: IColumnVisibility[]) => ({
Header: <span title={`Subscribe to the list with a browser extension supporting the "abp:" protocol (e.g. uBlock Origin, Adblock Plus)`}>
@ -11,7 +11,7 @@ export const SubscribeButton = (columnVisibility: IColumnVisibility[]) => ({
filterable: true,
filterMethod: (f: Filter, r: any[]) => filterMethod(f, r),
sortMethod: (a: string, b: string) => sortMethod(a, b),
Cell: (c: any) => <SubscribeButtonGroup name={c.row.name} url={c.value} urlMirrors={c.row.viewUrlMirrors} />,
Cell: (c: any) => <SubscribeButtonBase name={c.row.name} url={c.value} urlMirrors={c.row.viewUrlMirrors} />,
style: { textAlign: "center" },
width: 110,
show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Subscribe")[0].visible

4
src/FilterLists.Web/src/modules/home/components/softwareIcon/SoftwareIcon.tsx
View file

@ -35,11 +35,11 @@ import {
img34
} from "./imgs";
interface IProps {
interface Props {
id: number;
};
export const SoftwareIcon = (props: IProps) =>
export const SoftwareIcon = (props: Props) =>
icons[props.id]
? <img src={icons[props.id].image}
height="20"

2
src/FilterLists.Web/src/modules/home/interfaces/ILanguage.ts → src/FilterLists.Web/src/modules/home/interfaces/Language.ts
View file

@ -1,4 +1,4 @@
export interface ILanguage {
export interface Language {
id: number;
filterListIds: number[];
iso6391: string;