diff --git a/src/web/package-lock.json b/src/web/package-lock.json index 817b06a3f..a2a662a37 100644 Binary files a/src/web/package-lock.json and b/src/web/package-lock.json differ diff --git a/src/web/package.json b/src/web/package.json index 048f7f7af..4981f3707 100644 --- a/src/web/package.json +++ b/src/web/package.json @@ -7,9 +7,19 @@ "@types/node": "12.6.8", "@types/react": "16.8.23", "@types/react-dom": "16.8.5", + "@types/react-router-dom": "^4.3.4", + "@types/react-table": "^6.8.5", + "bootstrap": "^4.3.1", + "es6-promise": "^4.2.8", + "isomorphic-fetch": "^2.2.1", + "jquery": "^3.4.1", + "moment": "^2.24.0", + "popper.js": "^1.15.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router-dom": "^5.0.1", "react-scripts": "3.0.1", + "react-table": "^6.10.0", "typescript": "3.5.3" }, "scripts": { diff --git a/src/web/src/App.css b/src/web/src/App.css index b41d297ca..92db0e3e2 100644 --- a/src/web/src/App.css +++ b/src/web/src/App.css @@ -1,33 +1,3 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +body, h2, h3, h4, h5, blockquote { font-size: 16px; } +.container{ max-width:98vw!important;padding-left:7px!important } +.w-100{ padding-left:7px!important } diff --git a/src/web/src/App.tsx b/src/web/src/App.tsx index 226ee6316..5319fddfc 100644 --- a/src/web/src/App.tsx +++ b/src/web/src/App.tsx @@ -1,25 +1,12 @@ import React from 'react'; -import logo from './logo.svg'; import './App.css'; +import { BrowserRouter } from "react-router-dom"; +import * as RoutesModule from "./Routes"; const App: React.FC = () => { + // const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href")!; return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
+ ); } diff --git a/src/web/src/Layout.tsx b/src/web/src/Layout.tsx new file mode 100644 index 000000000..bd9d02569 --- /dev/null +++ b/src/web/src/Layout.tsx @@ -0,0 +1,61 @@ +import * as React from "react"; +import "bootstrap"; + +interface IProps { + children?: React.ReactNode; +}; + +export const Layout = (props: IProps) => +
+
+
+
+ { props.children } +
+
+
+
; + +const Header = () => +
+

+ + FilterLists + +

+
; + +const Footer = () => + ; + +const HubLink = () => + + Hub + ; + +const GitHubLink = () => + + GitHub + ; + +const ApiLink = () => + + API + ; + +const DonateLink = () => + + Donate + ; + +const OwnerLink = () => + + Collin M. Barrett + ; \ No newline at end of file diff --git a/src/web/src/Routes.tsx b/src/web/src/Routes.tsx new file mode 100644 index 000000000..fcb6a93a0 --- /dev/null +++ b/src/web/src/Routes.tsx @@ -0,0 +1,13 @@ +import * as React from "react"; +import { Layout } from "./Layout"; +import { Route, Redirect, Switch } from "react-router-dom"; +import { Home } from "./modules"; + +export const Routes = + + + + + + + ; \ No newline at end of file diff --git a/src/web/src/modules/home/Home.tsx b/src/web/src/modules/home/Home.tsx index 06daee6a3..475ca6d85 100644 --- a/src/web/src/modules/home/Home.tsx +++ b/src/web/src/modules/home/Home.tsx @@ -1,5 +1,12 @@ import * as React from "react"; -import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "./interfaces"; +import { IColumnVisibility } from "./interfaces/IColumnVisibility"; +import { ILanguage } from "./interfaces/ILanguage"; +import { ILicense } from "./interfaces/ILicense"; +import { IList } from "./interfaces/IList"; +import { IMaintainer } from "./interfaces/IMaintainer"; +import { ISoftware } from "./interfaces/ISoftware"; +import { ISyntax } from "./interfaces/ISyntax"; +import { ITag } from "./interfaces/ITag"; import { ListsTable, Oneliner } from "./components"; const columnVisibilityDefaults: IColumnVisibility[] = [ @@ -60,33 +67,33 @@ export class Home extends React.Component { render() { return
- - - {this.renderColumnVisibilityCheckboxes()} -
; + + + {this.renderColumnVisibilityCheckboxes()} + ; }; renderColumnVisibilityCheckboxes() { return this.props.lists.length > 0 - ?
- Visible:  {this.state.columnVisibility.map( - (c: IColumnVisibility, i: number) => this.renderColumnVisibilityCheckbox(c, i))} -
- : null; + ?
+ Visible:  {this.state.columnVisibility.map( + (c: IColumnVisibility, i: number) => this.renderColumnVisibilityCheckbox(c, i))} +
+ : null; }; renderColumnVisibilityCheckbox(props: IColumnVisibility, key: number) { return
- this.checkColumn(props)}/> - -
; + this.checkColumn(props)} /> + + ; }; checkColumn(props: IColumnVisibility) { diff --git a/src/web/src/modules/home/HomeContainer.tsx b/src/web/src/modules/home/HomeContainer.tsx index b5a34ba0e..5e6c2b558 100644 --- a/src/web/src/modules/home/HomeContainer.tsx +++ b/src/web/src/modules/home/HomeContainer.tsx @@ -1,6 +1,12 @@ import * as React from "react"; import "isomorphic-fetch"; -import { ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "./interfaces"; +import { ILanguage } from "./interfaces/ILanguage"; +import { ILicense } from "./interfaces/ILicense"; +import { IList } from "./interfaces/IList"; +import { IMaintainer } from "./interfaces/IMaintainer"; +import { ISoftware } from "./interfaces/ISoftware"; +import { ISyntax } from "./interfaces/ISyntax"; +import { ITag } from "./interfaces/ITag"; import { Home } from "./Home"; interface IState { @@ -89,6 +95,6 @@ export class HomeContainer extends React.Component<{}, IState> { }; render() { - return ; + return ; }; }; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/IListDetails.ts b/src/web/src/modules/home/components/IListDetails.ts similarity index 68% rename from src/web/src/modules/home/components/detailsExpander/IListDetails.ts rename to src/web/src/modules/home/components/IListDetails.ts index 5b87aa51f..742d5c788 100644 --- a/src/web/src/modules/home/components/detailsExpander/IListDetails.ts +++ b/src/web/src/modules/home/components/IListDetails.ts @@ -1,4 +1,8 @@ -import { ILanguage, ILicense, IMaintainer, ISyntax, ITag } from "../../interfaces"; +import { ILanguage } from "../interfaces/ILanguage"; +import { ILicense } from "../interfaces/ILicense"; +import { IMaintainer } from "../interfaces/IMaintainer"; +import { ISyntax } from "../interfaces/ISyntax"; +import { ITag } from "../interfaces/ITag"; export interface IListDetails { id: number; diff --git a/src/web/src/modules/home/components/TagGroup.tsx b/src/web/src/modules/home/components/TagGroup.tsx index 5f7a609da..03defe587 100644 --- a/src/web/src/modules/home/components/TagGroup.tsx +++ b/src/web/src/modules/home/components/TagGroup.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { ITag } from "../interfaces"; +import { ITag } from "../interfaces/ITag"; import { getContrast } from "../../../utils"; interface IProps { diff --git a/src/web/src/modules/home/components/detailsExpander/DetailsExpander.tsx b/src/web/src/modules/home/components/detailsExpander/DetailsExpander.tsx index 852dbea32..1193b7e05 100644 --- a/src/web/src/modules/home/components/detailsExpander/DetailsExpander.tsx +++ b/src/web/src/modules/home/components/detailsExpander/DetailsExpander.tsx @@ -1,6 +1,7 @@ import * as React from "react"; -import { IColumnVisibility, ISoftware } from "../../interfaces"; -import { IListDetails } from "./IListDetails"; +import { ISoftware } from "../../interfaces/ISoftware"; +import { IColumnVisibility } from "../../interfaces/IColumnVisibility"; +import { IListDetails } from "../IListDetails"; import { InfoCard } from "./infoCard"; import { LinkButtonGroup } from "./LinkButtonGroup"; import { MaintainersInfoCard } from "./maintainersInfoCard"; @@ -16,11 +17,11 @@ export const DetailsExpander = (props: IProps) =>
- - + +
- +
diff --git a/src/web/src/modules/home/components/detailsExpander/index.ts b/src/web/src/modules/home/components/detailsExpander/index.ts index 6b887a094..fa95d60ba 100644 --- a/src/web/src/modules/home/components/detailsExpander/index.ts +++ b/src/web/src/modules/home/components/detailsExpander/index.ts @@ -1,7 +1,5 @@ import { DetailsExpander } from "./DetailsExpander"; -import { IListDetails } from "./IListDetails"; export { - DetailsExpander, - IListDetails - }; \ No newline at end of file + DetailsExpander +}; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/InfoCard.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/InfoCard.tsx index 9e8ba3ae2..6a9b3e84c 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/InfoCard.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/InfoCard.tsx @@ -1,15 +1,19 @@ import * as React from "react"; -import { IColumnVisibility } from "../../../interfaces"; -import { ILanguage, ILicense, ISoftware, ISyntax, ITag } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ILanguage } from "../../../interfaces/ILanguage"; +import { ILicense, } from "../../../interfaces/ILicense"; +import { ISoftware, } from "../../../interfaces/ISoftware"; +import { ISyntax, } from "../../../interfaces/ISyntax"; +import { ITag } from "../../../interfaces/ITag"; import { Description } from "./Description"; import { Languages } from "./Languages"; import { License } from "./License"; import { PublishedDate } from "./PublishedDate"; -import { RuleCount } from "./RuleCount"; +// import { RuleCount } from "./RuleCount"; import { SoftwareIcon } from "../../softwareIcon"; import { Syntax } from "./Syntax"; import { TagGroup } from "../../TagGroup" -import { UpdatedDate } from "./UpdatedDate"; +// import { UpdatedDate } from "./UpdatedDate"; interface IProps { columnVisibility: IColumnVisibility[]; @@ -29,26 +33,26 @@ interface IProps { export const InfoCard = (props: IProps) =>
{props.columnVisibility.filter((c: IColumnVisibility) => c.column === "Tags")[0].visible - ? null - : } + ? null + : }
{props.columnVisibility.filter((c: IColumnVisibility) => c.column === "Software")[0].visible - ? null - : props.syntax - ? props.software.filter((s: ISoftware) => s.syntaxIds.indexOf(props.syntax.id) > -1) - .map((s: ISoftware, i: number) => ) - : null} + ? null + : props.syntax + ? props.software.filter((s: ISoftware) => s.syntaxIds.indexOf(props.syntax.id) > -1) + .map((s: ISoftware, i: number) => ) + : null}
- +
    - + {/*{props.columnVisibility.filter((c: IColumnVisibility) => c.column === "Rules")[0].visible ? null : } {props.columnVisibility.filter((c: IColumnVisibility) => c.column === "Updated")[0].visible ? null : }*/} - + {props.columnVisibility.filter((c: IColumnVisibility) => c.column === "License")[0].visible ? null diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/Languages.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/Languages.tsx index c3390c299..dfccffeee 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/Languages.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/Languages.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { ILanguage } from "../../../interfaces"; +import { ILanguage } from "../../../interfaces/ILanguage"; interface IProps { languages: ILanguage[]; @@ -7,14 +7,14 @@ interface IProps { export const Languages = (props: IProps) => props.languages && props.languages.length > 0 - ? props.languages.length > 1 - ?
  • -

    Languages:

    -
      - {props.languages.map((language: ILanguage, i: number) =>
    • {language.name}
    • )} -
    -
  • - :
  • -

    Language: {props.languages[0].name}

    -
  • - : null; \ No newline at end of file + ? props.languages.length > 1 + ?
  • +

    Languages:

    +
      + {props.languages.map((language: ILanguage, i: number) =>
    • {language.name}
    • )} +
    +
  • + :
  • +

    Language: {props.languages[0].name}

    +
  • + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/License.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/License.tsx index a6222c8a9..7b97326cc 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/License.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/License.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { ILicense } from "../../../interfaces"; +import { ILicense } from "../../../interfaces/ILicense"; interface IProps { license: ILicense; @@ -7,11 +7,11 @@ interface IProps { export const License = (props: IProps) => props.license.name - ? (props.license.descriptionUrl - ?
  • -

    License: {props.license.name}

    -
  • - :
  • -

    License: {props.license.name}

    -
  • ) - : null; \ No newline at end of file + ? (props.license.descriptionUrl + ?
  • +

    License: {props.license.name}

    +
  • + :
  • +

    License: {props.license.name}

    +
  • ) + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/PublishedDate.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/PublishedDate.tsx index 530a08950..8a5cff81a 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/PublishedDate.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/PublishedDate.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as moment from "moment"; +import moment from 'moment'; interface IProps { date: string; @@ -7,7 +7,7 @@ interface IProps { export const PublishedDate = (props: IProps) => props.date - ?
  • -

    Published: {moment(props.date).format("l")}

    -
  • - : null; \ No newline at end of file + ?
  • +

    Published: {moment(props.date).format("l")}

    +
  • + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/Syntax.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/Syntax.tsx index 3a3356b85..3a4a23d05 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/Syntax.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/Syntax.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { ISyntax } from "../../../interfaces"; +import { ISyntax } from "../../../interfaces/ISyntax"; interface IProps { syntax: ISyntax; @@ -7,11 +7,11 @@ interface IProps { export const Syntax = (props: IProps) => props.syntax - ? (props.syntax.definitionUrl - ?
  • -

    Syntax: {props.syntax.name}

    -
  • - :
  • -

    Syntax: {props.syntax.name}

    -
  • ) - : null; \ No newline at end of file + ? (props.syntax.definitionUrl + ?
  • +

    Syntax: {props.syntax.name}

    +
  • + :
  • +

    Syntax: {props.syntax.name}

    +
  • ) + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/infoCard/UpdatedDate.tsx b/src/web/src/modules/home/components/detailsExpander/infoCard/UpdatedDate.tsx index 7e72853f0..efc654452 100644 --- a/src/web/src/modules/home/components/detailsExpander/infoCard/UpdatedDate.tsx +++ b/src/web/src/modules/home/components/detailsExpander/infoCard/UpdatedDate.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import * as moment from "moment"; +import moment from 'moment'; interface IProps { updatedDate: string; @@ -7,9 +7,9 @@ interface IProps { export const UpdatedDate = (props: IProps) => props.updatedDate - ?
  • -

    Updated: {moment(props.updatedDate).isValid() - ? moment(props.updatedDate).format("l") - : "N/A"}

    -
  • - : null; + ?
  • +

    Updated: {moment(props.updatedDate).isValid() + ? moment(props.updatedDate).format("l") + : "N/A"}

    +
  • + : null; diff --git a/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx b/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx index c2315b1a6..6378b5325 100644 --- a/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx +++ b/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainerInfoCard.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { IMaintainer } from "../../../interfaces"; +import { IMaintainer } from "../../../interfaces/IMaintainer"; import { MaintainerAdditionalLists } from "./MaintainerAdditionalLists"; import { MaintainerLinkButtonGroup } from "./MaintainerLinkButtonGroup"; @@ -9,15 +9,15 @@ interface IProps { export const MaintainerInfoCard = (props: IProps) => props.maintainer.name - ?
    -
    -

    Maintained by {props.maintainer.name}

    -
    -
    - - -
    -
    -
    -
    - : null; \ No newline at end of file + ?
    +
    +

    Maintained by {props.maintainer.name}

    +
    +
    + + +
    +
    +
    +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx b/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx index cb95cbcf9..11f0f8e18 100644 --- a/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx +++ b/src/web/src/modules/home/components/detailsExpander/maintainersInfoCard/MaintainersInfoCard.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { IMaintainer } from "../../../interfaces"; +import { IMaintainer } from "../../../interfaces/IMaintainer"; import { MaintainerInfoCard } from "./MaintainerInfoCard"; interface IProps { @@ -8,7 +8,7 @@ interface IProps { export const MaintainersInfoCard = (props: IProps) => props.maintainers && props.maintainers.length > 0 - ?
    - {props.maintainers.map((m: IMaintainer, i: number) => )} -
    - : null; \ No newline at end of file + ?
    + {props.maintainers.map((m: IMaintainer, i: number) => )} +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/linkButtons/SubscribeButton.tsx b/src/web/src/modules/home/components/linkButtons/SubscribeButton.tsx index f7f3d4c1b..e3d7d2b99 100644 --- a/src/web/src/modules/home/components/linkButtons/SubscribeButton.tsx +++ b/src/web/src/modules/home/components/linkButtons/SubscribeButton.tsx @@ -50,7 +50,7 @@ if (props.url.indexOf(".tpl") > 0) { title = `${titlePrefix}Subscribe to ${props.name} with Little Snitch's rule group subscription feature.`; } else { - title = `${titlePrefix}Subscribe to ${props.name} with a browser extension supporting the \"abp:\" protocol (e.g. uBlock Origin, Adblock Plus).`; + title = `${titlePrefix}Subscribe to ${props.name} with a browser extension supporting the "abp:" protocol (e.g. uBlock Origin, Adblock Plus).`; }; return props.url diff --git a/src/web/src/modules/home/components/listsTable/ListsTable.tsx b/src/web/src/modules/home/components/listsTable/ListsTable.tsx index 859673237..2baf84e95 100644 --- a/src/web/src/modules/home/components/listsTable/ListsTable.tsx +++ b/src/web/src/modules/home/components/listsTable/ListsTable.tsx @@ -1,5 +1,12 @@ import * as React from "react"; -import { IColumnVisibility, ILanguage, ILicense, IList, IMaintainer, ISoftware, ISyntax, ITag } from "../../interfaces"; +import { IColumnVisibility } from "../../interfaces/IColumnVisibility"; +import { ILanguage } from "../../interfaces/ILanguage"; +import { ILicense } from "../../interfaces/ILicense"; +import { IList } from "../../interfaces/IList"; +import { IMaintainer } from "../../interfaces/IMaintainer"; +import { ISoftware } from "../../interfaces/ISoftware"; +import { ISyntax } from "../../interfaces/ISyntax"; +import { ITag } from "../../interfaces/ITag"; import "../../../../utils/loader.css"; import ReactTable from "react-table"; import "react-table/react-table.css"; @@ -16,7 +23,7 @@ import { Tags, //UpdatedDate } from "./columns"; -import { IListDetails } from "../../components/detailsExpander"; +import { IListDetails } from "../IListDetails"; import { DetailsExpander } from "../../components"; interface IProps { @@ -33,36 +40,36 @@ interface IProps { export const ListsTable = (props: IProps) => props.languages.length > 0 && props.lists.length > 0 && props.software.length > 0 && props.tags.length > 0 - ? - } - className="-striped -highlight"/> - :
    Loading...
    ; + ? + } + className="-striped -highlight" /> + :
    Loading...
    ; interface ICreateListDtoProps { list: IList; @@ -74,31 +81,31 @@ interface ICreateListDtoProps { }; const mapListDetails = (props: ICreateListDtoProps): IListDetails => -({ - id: props.list.id, - chatUrl: props.list.chatUrl, - description: props.list.description, - descriptionSourceUrl: props.list.descriptionSourceUrl, - donateUrl: props.list.donateUrl, - emailAddress: props.list.emailAddress, - forumUrl: props.list.forumUrl, - homeUrl: props.list.homeUrl, - issuesUrl: props.list.issuesUrl, - languages: props.list.languageIds - ? props.languages.filter((l: ILanguage) => props.list.languageIds.indexOf(l.id) > -1) - : undefined, - license: props.licenses.filter((l: ILicense) => props.list.licenseId === l.id)[0], - maintainers: props.list.maintainerIds - ? props.maintainers.filter((m: IMaintainer) => props.list.maintainerIds.indexOf(m.id) > -1) - : undefined, - name: props.list.name, - policyUrl: props.list.policyUrl, - publishedDate: props.list.publishedDate, - //ruleCount: props.list.ruleCount, - submissionUrl: props.list.submissionUrl, - syntax: props.syntaxes.filter((s: ISyntax) => props.list.syntaxId === s.id)[0], - tags: props.list.tagIds ? props.tags.filter((t: ITag) => props.list.tagIds.indexOf(t.id) > -1) : undefined, - //updatedDate: props.list.updatedDate, - viewUrl: props.list.viewUrl, - viewUrlMirrors: props.list.viewUrlMirrors -} as IListDetails); \ No newline at end of file + ({ + id: props.list.id, + chatUrl: props.list.chatUrl, + description: props.list.description, + descriptionSourceUrl: props.list.descriptionSourceUrl, + donateUrl: props.list.donateUrl, + emailAddress: props.list.emailAddress, + forumUrl: props.list.forumUrl, + homeUrl: props.list.homeUrl, + issuesUrl: props.list.issuesUrl, + languages: props.list.languageIds + ? props.languages.filter((l: ILanguage) => props.list.languageIds.indexOf(l.id) > -1) + : undefined, + license: props.licenses.filter((l: ILicense) => props.list.licenseId === l.id)[0], + maintainers: props.list.maintainerIds + ? props.maintainers.filter((m: IMaintainer) => props.list.maintainerIds.indexOf(m.id) > -1) + : undefined, + name: props.list.name, + policyUrl: props.list.policyUrl, + publishedDate: props.list.publishedDate, + //ruleCount: props.list.ruleCount, + submissionUrl: props.list.submissionUrl, + syntax: props.syntaxes.filter((s: ISyntax) => props.list.syntaxId === s.id)[0], + tags: props.list.tagIds ? props.tags.filter((t: ITag) => props.list.tagIds.indexOf(t.id) > -1) : undefined, + //updatedDate: props.list.updatedDate, + viewUrl: props.list.viewUrl, + viewUrlMirrors: props.list.viewUrlMirrors + } as IListDetails); \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/Languages.tsx b/src/web/src/modules/home/components/listsTable/columns/Languages.tsx index 828b2fd54..a0ac54d34 100644 --- a/src/web/src/modules/home/components/listsTable/columns/Languages.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/Languages.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility, ILanguage } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ILanguage } from "../../../interfaces/ILanguage"; export const Languages = (columnVisibility: IColumnVisibility[], languages: ILanguage[]) => { const languagesSorted = languages.sort((a, b) => a.name.localeCompare(b.name)); @@ -9,7 +10,7 @@ export const Languages = (columnVisibility: IColumnVisibility[], languages: ILan accessor: "languageIds", filterable: true, filterMethod: (f: Filter, r: any[]) => filterMethod(f, r), - Filter: ({ onChange, filter }: any) => Filter({ onChange, filter }, languagesSorted), + Filter: ({ onChange, filter }: any) => filterLanguages({ onChange, filter }, languagesSorted), sortMethod: (a: number[], b: number[]) => sortMethod(a, b, languagesSorted), Cell: (c: any) => Cell(c.value, languagesSorted), style: { whiteSpace: "inherit" }, @@ -21,23 +22,23 @@ export const Languages = (columnVisibility: IColumnVisibility[], languages: ILan const filterMethod = (f: Filter, r: any[]): boolean => { const listLanguageIds = r[f.id as any]; return f.value === "any" || - (listLanguageIds - ? listLanguageIds.join(",").split(",").includes(f.value) - : f.value === "none"); + (listLanguageIds + ? listLanguageIds.join(",").split(",").includes(f.value) + : f.value === "none"); }; -const Filter = (props: any, languages: ILanguage[]) => +const filterLanguages = (props: any, languages: ILanguage[]) => ; const sortMethod = (a: number[], b: number[], languages: ILanguage[]) => { @@ -58,14 +59,14 @@ const sortMethod = (a: number[], b: number[], languages: ILanguage[]) => { const Cell = (languageIds: number[], languages: ILanguage[]) => languageIds - ?
    - {languageIds.map((id: number, i: number) => { - const language = languages.filter((l: ILanguage) => l.id === id)[0]; - return - {language.iso6391} - ; - })} -
    - : null; \ No newline at end of file + ?
    + {languageIds.map((id: number, i: number) => { + const language = languages.filter((l: ILanguage) => l.id === id)[0]; + return + {language.iso6391} + ; + })} +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/License.tsx b/src/web/src/modules/home/components/listsTable/columns/License.tsx index 359e1e777..84a221b35 100644 --- a/src/web/src/modules/home/components/listsTable/columns/License.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/License.tsx @@ -1,19 +1,20 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility, ILicense } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ILicense } from "../../../interfaces/ILicense"; export const License = (columnVisibility: IColumnVisibility[], licenses: ILicense[]) => -({ - Header: License, - accessor: "licenseId", - filterable: true, - filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, licenses), - Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, licenses), - sortMethod: (a: number, b: number) => sortMethod(a, b, licenses), - Cell: (c: any) => Cell(c.value, licenses), - width: 75, - show: columnVisibility.filter((c: IColumnVisibility) => c.column === "License")[0].visible -} as Column); + ({ + Header: License, + accessor: "licenseId", + filterable: true, + filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, licenses), + Filter: ({ filter, onChange }: any) => filterLicenses({ onChange, filter }, licenses), + sortMethod: (a: number, b: number) => sortMethod(a, b, licenses), + Cell: (c: any) => Cell(c.value, licenses), + width: 75, + show: columnVisibility.filter((c: IColumnVisibility) => c.column === "License")[0].visible + } as Column); const filterMethod = (f: Filter, r: any[], licenses: ILicense[]): boolean => { const listLicenseId: number = r[f.id as any]; @@ -27,19 +28,19 @@ const filterMethod = (f: Filter, r: any[], licenses: ILicense[]): boolean => { } }; -const Filter = (props: any, licenses: ILicense[]) => +const filterLicenses = (props: any, licenses: ILicense[]) => ; const sortMethod = (a: number, b: number, licenses: ILicense[]) => { @@ -59,10 +60,10 @@ const sortMethod = (a: number, b: number, licenses: ILicense[]) => { const Cell = (licenseId: number, licenses: ILicense[]) => { const license = licenses.filter((l: ILicense) => licenseId === l.id)[0]; return license - ?
    - - {license.descriptionUrl ? {license.name} : license.name} - -
    - : null; + ?
    + + {license.descriptionUrl ? {license.name} : license.name} + +
    + : null; }; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/Maintainers.tsx b/src/web/src/modules/home/components/listsTable/columns/Maintainers.tsx index 2476f84e2..029e05318 100644 --- a/src/web/src/modules/home/components/listsTable/columns/Maintainers.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/Maintainers.tsx @@ -1,31 +1,32 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility, IMaintainer } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { IMaintainer } from "../../../interfaces/IMaintainer"; export const Maintainers = (columnVisibility: IColumnVisibility[], maintainers: IMaintainer[]) => -({ - Header: Maintainers, - accessor: "maintainerIds", - filterable: true, - filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, maintainers), - Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, maintainers), - sortMethod: (a: number[], b: number[]) => sortMethod(a, b, maintainers), - Cell: (c: any) => Cell(c.value, maintainers), - width: 140, - show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Maintainers")[0].visible -} as Column); + ({ + Header: Maintainers, + accessor: "maintainerIds", + filterable: true, + filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, maintainers), + Filter: ({ filter, onChange }: any) => filterMaintainers({ onChange, filter }, maintainers), + sortMethod: (a: number[], b: number[]) => sortMethod(a, b, maintainers), + Cell: (c: any) => Cell(c.value, maintainers), + width: 140, + show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Maintainers")[0].visible + } as Column); const filterMethod = (f: Filter, r: any[], maintainers: IMaintainer[]): boolean => { const listMaintainerIds: number[] = r[f.id as any]; return f.value === "any" || - (listMaintainerIds - ? f.value === "none" - ? false - : listMaintainerIds.indexOf(maintainers.filter((m: IMaintainer) => m.id === parseInt(f.value))[0].id) > -1 - : f.value === "none"); + (listMaintainerIds + ? f.value === "none" + ? false + : listMaintainerIds.indexOf(maintainers.filter((m: IMaintainer) => m.id === parseInt(f.value))[0].id) > -1 + : f.value === "none"); }; -const Filter = (props: any, maintainers: IMaintainer[]) => +const filterMaintainers = (props: any, maintainers: IMaintainer[]) => ; const sortMethod = (a: number[], b: number[], maintainers: IMaintainer[]) => { @@ -57,12 +58,12 @@ const sortMethod = (a: number[], b: number[], maintainers: IMaintainer[]) => { const Cell = (maintainerIds: number[], maintainers: IMaintainer[]) => maintainerIds - ?
    - {maintainers.filter((m: IMaintainer) => maintainerIds.indexOf(m.id) > -1) - .map((m: IMaintainer, i: number) => { - return m.homeUrl - ? {m.name} - : {m.name}; - }).reduce(((prev: JSX.Element, curr: JSX.Element): any => [prev, ", ", curr]) as any)} -
    - : null; \ No newline at end of file + ?
    + {maintainers.filter((m: IMaintainer) => maintainerIds.indexOf(m.id) > -1) + .map((m: IMaintainer, i: number) => { + return m.homeUrl + ? {m.name} + : {m.name}; + }).reduce(((prev: JSX.Element, curr: JSX.Element): any => [prev, ", ", curr]) as any)} +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/RuleCount.tsx b/src/web/src/modules/home/components/listsTable/columns/RuleCount.tsx index 33689baa9..90ee34b70 100644 --- a/src/web/src/modules/home/components/listsTable/columns/RuleCount.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/RuleCount.tsx @@ -1,9 +1,9 @@ import * as React from "react"; import { Column } from "react-table"; -import { IColumnVisibility } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; export const RuleCount = (columnVisibility: IColumnVisibility[]) => -({ + ({ Header: Rules, accessor: "ruleCount", sortMethod: (a: string, b: string) => sortMethod(a, b), @@ -11,10 +11,10 @@ export const RuleCount = (columnVisibility: IColumnVisibility[]) => style: { whiteSpace: "inherit" }, width: 85, show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Rules")[0].visible -} as Column); + } as Column); const sortMethod = (a: string, b: string) => - a + a ? b ? a > b ? -1 @@ -23,6 +23,6 @@ const sortMethod = (a: string, b: string) => : 1; const Cell = (ruleCount: number) => - ruleCount - ? { ruleCount.toLocaleString() } + ruleCount + ? {ruleCount.toLocaleString()} : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/Software.tsx b/src/web/src/modules/home/components/listsTable/columns/Software.tsx index 485af2731..8644ea981 100644 --- a/src/web/src/modules/home/components/listsTable/columns/Software.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/Software.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility, ISoftware } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ISoftware } from "../../../interfaces/ISoftware"; import { SoftwareIcon } from "../../softwareIcon"; export const Software = (columnVisibility: IColumnVisibility[], software: ISoftware[]) => { @@ -11,7 +12,7 @@ export const Software = (columnVisibility: IColumnVisibility[], software: ISoftw accessor: "syntaxId", filterable: true, filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, softwareSorted), - Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, softwareSorted), + Filter: ({ filter, onChange }: any) => filterSoftware({ onChange, filter }, softwareSorted), sortMethod: (a: number, b: number) => sortMethod(a, b, softwareSorted), Cell: (c: any) => Cell(c.value, software), width: 155, @@ -27,15 +28,15 @@ const filterMethod = (f: Filter, r: any[], software: ISoftware[]): boolean => { return isAny || (listSyntaxId ? isMatch : false); }; -const Filter = (props: any, software: ISoftware[]) => +const filterSoftware = (props: any, software: ISoftware[]) => ; const sortMethod = (a: number, b: number, software: ISoftware[]) => { @@ -62,13 +63,13 @@ const sortMethod = (a: number, b: number, software: ISoftware[]) => { const Cell = (listSyntaxId: number, software: ISoftware[]) => listSyntaxId - ?
    - {software.filter((s: ISoftware) => s.syntaxIds.indexOf(listSyntaxId) > -1) - .map((s: ISoftware, i: number) => - s.homeUrl - ? - - - : )} -
    - : null; \ No newline at end of file + ?
    + {software.filter((s: ISoftware) => s.syntaxIds.indexOf(listSyntaxId) > -1) + .map((s: ISoftware, i: number) => + s.homeUrl + ? + + + : )} +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/SubscribeButton.tsx b/src/web/src/modules/home/components/listsTable/columns/SubscribeButton.tsx index 2df9408e2..078ed91fe 100644 --- a/src/web/src/modules/home/components/listsTable/columns/SubscribeButton.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/SubscribeButton.tsx @@ -1,17 +1,17 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; import { SubscribeButtonGroup } from "../../linkButtons"; export const SubscribeButton = (columnVisibility: IColumnVisibility[]) => ({ Header: - Subscribe + Subscribe , accessor: "viewUrl", filterable: true, filterMethod: (f: Filter, r: any[]) => filterMethod(f, r), sortMethod: (a: string, b: string) => sortMethod(a, b), - Cell: (c: any) => , + Cell: (c: any) => , style: { textAlign: "center" }, width: 110, show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Subscribe")[0].visible diff --git a/src/web/src/modules/home/components/listsTable/columns/Syntax.tsx b/src/web/src/modules/home/components/listsTable/columns/Syntax.tsx index 25f9ff832..773e52cea 100644 --- a/src/web/src/modules/home/components/listsTable/columns/Syntax.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/Syntax.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { Column, Filter } from "react-table"; -import { IColumnVisibility, ISyntax } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ISyntax } from "../../../interfaces/ISyntax"; //TODO: https://github.com/collinbarrett/FilterLists/issues/488 export const Syntax = (columnVisibility: IColumnVisibility[], syntaxes: ISyntax[]) => ({ @@ -8,7 +9,7 @@ export const Syntax = (columnVisibility: IColumnVisibility[], syntaxes: ISyntax[ accessor: "syntaxId", filterable: true, filterMethod: (f: Filter, r: any[]) => filterMethod(f, r, syntaxes), - Filter: ({ filter, onChange }: any) => Filter({ onChange, filter }, syntaxes), + Filter: ({ filter, onChange }: any) => filterSyntaxes({ onChange, filter }, syntaxes), Cell: (c: any) => Cell(c.value, syntaxes), width: 155, show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Syntax")[0].visible @@ -21,26 +22,26 @@ const filterMethod = (f: Filter, r: any[], syntaxes: ISyntax[]): boolean => { } else if (listSyntaxId) { const syntaxFiltered = syntaxes.filter((s: ISyntax) => s.id === parseInt(f.value)); return syntaxFiltered[0].id - ? syntaxFiltered[0].id === listSyntaxId - : false; + ? syntaxFiltered[0].id === listSyntaxId + : false; } else { return false; } }; -const Filter = (props: any, syntaxes: ISyntax[]) => +const filterSyntaxes = (props: any, syntaxes: ISyntax[]) => ; const Cell = (listSyntaxId: number, syntaxes: ISyntax[]) => listSyntaxId - ? syntaxes.filter((s: ISyntax) => s.id === listSyntaxId)[0].name - : null; \ No newline at end of file + ? syntaxes.filter((s: ISyntax) => s.id === listSyntaxId)[0].name + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/Tags.tsx b/src/web/src/modules/home/components/listsTable/columns/Tags.tsx index 2031860dc..07a60444a 100644 --- a/src/web/src/modules/home/components/listsTable/columns/Tags.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/Tags.tsx @@ -1,7 +1,8 @@ import * as React from "react"; import { Column, Filter } from "react-table"; import { TagGroup } from "../../TagGroup"; -import { IColumnVisibility, ITag } from "../../../interfaces"; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; +import { ITag } from "../../../interfaces/ITag"; export const Tags = (columnVisibility: IColumnVisibility[], tags: ITag[]) => { const tagsSorted = tags.sort((a: ITag, b: ITag) => a.name.localeCompare(b.name)); @@ -11,7 +12,7 @@ export const Tags = (columnVisibility: IColumnVisibility[], tags: ITag[]) => { accessor: "tagIds", filterable: true, filterMethod: (f: Filter, r: any[]) => filterMethod(f, r), - Filter: ({ onChange, filter }: any) => Filter({ onChange, filter }, tagsSorted), + Filter: ({ onChange, filter }: any) => filterTags({ onChange, filter }, tagsSorted), sortMethod: (a: number[], b: number[]) => sortMethod(a, b, tagsSorted), Cell: (c: any) => Cell(c.value, tagsSorted), width: 260, @@ -22,42 +23,42 @@ export const Tags = (columnVisibility: IColumnVisibility[], tags: ITag[]) => { const filterMethod = (f: Filter, r: any[]): boolean => { const listTagIds = r[f.id as any]; return f.value === "any" || - (listTagIds - ? listTagIds.join(",").split(",").includes(f.value) - : f.value === "none"); + (listTagIds + ? listTagIds.join(",").split(",").includes(f.value) + : f.value === "none"); }; -const Filter = (props: any, tags: ITag[]) => +const filterTags = (props: any, tags: ITag[]) => ; const sortMethod = (a: number[], b: number[], tags: ITag[]): any => { return a - ? b - ? a.length === b.length - ? tags.filter((t: ITag) => a.indexOf(t.id) > -1).map((t: ITag) => t.name).join() - .toLowerCase() > - tags.filter((t: ITag) => b.indexOf(t.id) > -1).map((t: ITag) => t.name).join().toLowerCase() - ? 1 - : -1 - : a.length > b.length - ? -1 - : 1 - : -1 - : 1; + ? b + ? a.length === b.length + ? tags.filter((t: ITag) => a.indexOf(t.id) > -1).map((t: ITag) => t.name).join() + .toLowerCase() > + tags.filter((t: ITag) => b.indexOf(t.id) > -1).map((t: ITag) => t.name).join().toLowerCase() + ? 1 + : -1 + : a.length > b.length + ? -1 + : 1 + : -1 + : 1; }; const Cell = (tagIds: number[], tags: ITag[]) => tagIds - ? tagIds.indexOf(t.id) > -1)}/> - : null; \ No newline at end of file + ? tagIds.indexOf(t.id) > -1)} /> + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/components/listsTable/columns/UpdatedDate.tsx b/src/web/src/modules/home/components/listsTable/columns/UpdatedDate.tsx index 0542a50cf..a01e54d63 100644 --- a/src/web/src/modules/home/components/listsTable/columns/UpdatedDate.tsx +++ b/src/web/src/modules/home/components/listsTable/columns/UpdatedDate.tsx @@ -1,33 +1,33 @@ import * as React from "react"; import { Column } from "react-table"; -import * as moment from "moment"; -import { IColumnVisibility } from "../../../interfaces"; +import moment from 'moment'; +import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; export const UpdatedDate = (columnVisibility: IColumnVisibility[]) => -({ - Header: Updated, - accessor: "updatedDate", - sortMethod: (a: string, b: string) => sortMethod(a, b), - Cell: (c: any) => Cell(c.value), - style: { whiteSpace: "inherit" }, - width: 100, - show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Updated")[0].visible -} as Column); + ({ + Header: Updated, + accessor: "updatedDate", + sortMethod: (a: string, b: string) => sortMethod(a, b), + Cell: (c: any) => Cell(c.value), + style: { whiteSpace: "inherit" }, + width: 100, + show: columnVisibility.filter((c: IColumnVisibility) => c.column === "Updated")[0].visible + } as Column); const sortMethod = (a: string, b: string) => a && moment(a).isValid() - ? (b && moment(b).isValid() - ? (moment(a).isBefore(b) - ? 1 - : -1) - : -1) - : 1; + ? (b && moment(b).isValid() + ? (moment(a).isBefore(b) + ? 1 + : -1) + : -1) + : 1; const Cell = (updatedDate: string) => updatedDate - ?
    - {moment(updatedDate).isValid() - ? moment(updatedDate).format("l") - : null} -
    - : null; \ No newline at end of file + ?
    + {moment(updatedDate).isValid() + ? moment(updatedDate).format("l") + : null} +
    + : null; \ No newline at end of file diff --git a/src/web/src/modules/home/interfaces/index.ts b/src/web/src/modules/home/interfaces/index.ts deleted file mode 100644 index 6a72c288c..000000000 --- a/src/web/src/modules/home/interfaces/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { IColumnVisibility } from "./IColumnVisibility"; -import { ILanguage } from "./ILanguage"; -import { ILicense } from "./ILicense"; -import { IList } from "./IList"; -import { IMaintainer } from "./IMaintainer"; -import { ISoftware } from "./ISoftware"; -import { ISyntax } from "./ISyntax"; -import { ITag } from "./ITag"; - -export { - IColumnVisibility, - ILanguage, - ILicense, - IList, - IMaintainer, - ISoftware, - ISyntax, - ITag - }; \ No newline at end of file