From eb4de758dc46b93d010c4c6a7279f4918607f794 Mon Sep 17 00:00:00 2001 From: Collin Barrett Date: Sun, 16 Sep 2018 17:51:03 -0500 Subject: [PATCH] organizing react proj --- src/FilterLists.Web/ClientApp/Boot.tsx | 2 +- src/FilterLists.Web/ClientApp/Layout.tsx | 4 +-- .../ClientApp/modules/home/Home.tsx | 12 +++---- .../ClientApp/modules/home/HomeContainer.tsx | 8 ++--- .../modules/home/components/Tagline.tsx | 2 +- .../detailsExpander/infoCard/InfoCard.tsx | 2 +- .../detailsExpander/infoCard/Languages.tsx | 4 +-- .../detailsExpander/infoCard/Tag.tsx | 2 +- .../home/components/listsTable/ListsTable.tsx | 17 +++++----- .../components/softwareIcon/SoftwareIcon.tsx | 30 +++++++++--------- .../components/softwareIcon/imgs/index.ts | 31 +++++++++++++++++++ src/FilterLists.Web/ClientApp/utils/index.ts | 5 +++ 12 files changed, 78 insertions(+), 41 deletions(-) create mode 100644 src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/imgs/index.ts create mode 100644 src/FilterLists.Web/ClientApp/utils/index.ts diff --git a/src/FilterLists.Web/ClientApp/Boot.tsx b/src/FilterLists.Web/ClientApp/Boot.tsx index bbfe160fc..227a3870e 100644 --- a/src/FilterLists.Web/ClientApp/Boot.tsx +++ b/src/FilterLists.Web/ClientApp/Boot.tsx @@ -18,7 +18,7 @@ function renderApp() { renderApp(); if (module.hot) { - module.hot.accept("./routes", + module.hot.accept("./Routes", () => { routes = require("./Routes").Routes; renderApp(); diff --git a/src/FilterLists.Web/ClientApp/Layout.tsx b/src/FilterLists.Web/ClientApp/Layout.tsx index 466b1050d..a941f5e7c 100644 --- a/src/FilterLists.Web/ClientApp/Layout.tsx +++ b/src/FilterLists.Web/ClientApp/Layout.tsx @@ -2,11 +2,11 @@ import * as React from "react"; import "bootstrap"; import "./site.css"; -interface ILayoutProps { +interface IProps { children?: React.ReactNode; } -export const Layout = (props: ILayoutProps) => { +export const Layout = (props: IProps) => { return
diff --git a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx index a3e0416a3..be1abca5d 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/Home.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/Home.tsx @@ -10,10 +10,10 @@ const columnVisibilityDefaults = [ ]; interface IProps { + languages: ILanguageDto[]; lists: IListDto[]; ruleCount: number; software: ISoftwareDto[]; - languages: ILanguageDto[]; } interface IState { @@ -22,7 +22,7 @@ interface IState { } export class Home extends React.Component { - constructor(props: any) { + constructor(props: IProps) { super(props); this.state = { columnVisibility: columnVisibilityDefaults, @@ -38,10 +38,8 @@ export class Home extends React.Component { render() { return this.props.lists ?
- - + + {this.renderColumnVisibilityCheckboxes()}
: null; @@ -81,7 +79,7 @@ export class Home extends React.Component { this.forceUpdate(); } - private findWithAttr(array: any, attr: any, value: any) { + private findWithAttr(array: any, attr: string, value: string) { for (let i = 0; i < array.length; i += 1) { if (array[i][attr] === value) { return i; diff --git a/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx b/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx index d9ad6a25b..cfea626e1 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/HomeContainer.tsx @@ -1,14 +1,14 @@ import * as React from "react"; import "isomorphic-fetch"; -import { IListDto, ISoftwareDto, ILanguageDto } from "./interfaces"; +import { ILanguageDto, IListDto, ISoftwareDto } from "./interfaces"; import "../../utils/loader.css"; import { Home } from "./Home"; interface IState { + languages: ILanguageDto[]; lists: IListDto[]; ruleCount: number; software: ISoftwareDto[]; - languages: ILanguageDto[]; } export class HomeContainer extends React.Component<{}, IState> { @@ -16,9 +16,9 @@ export class HomeContainer extends React.Component<{}, IState> { super(props); this.state = { lists: [], + languages: [], ruleCount: 0, - software: [], - languages: [] + software: [] }; } diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/Tagline.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/Tagline.tsx index d68205090..96fec6668 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/Tagline.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/Tagline.tsx @@ -1,8 +1,8 @@ import * as React from "react"; interface IProps { - ruleCount: number, listCount: number; + ruleCount: number, } export const Tagline = (props: IProps) => { diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx index e7fc7967e..06a399d1e 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/InfoCard.tsx @@ -30,7 +30,7 @@ export const InfoCard = (props: IProps) => {
{props.syntax.supportedSoftware.map( - (s: ISyntaxSupportedSoftwareDto, i: any) => + (s: ISyntaxSupportedSoftwareDto, i: number) => )} diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Languages.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Languages.tsx index 801c5cba0..3a36a71dc 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Languages.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Languages.tsx @@ -10,11 +10,11 @@ export const Languages = (props: IProps) => { ?

  • Languages:

      - {props.languages.map((language: any) =>
    • {language}
      • )} + {props.languages.map((language: string) =>
    • {language}
      • )}
    • :
  • -

    Language: {props.languages.map((language: any) => language)}

    +

    Language: {props.languages.map((language: string) => language)}

    • : null; }; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tag.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tag.tsx index 423e5684c..d13aecd6d 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tag.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/detailsExpander/infoCard/Tag.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { IListTagDto } from "../IFilterListDetailsDto"; -import { getContrast } from "../../../../../utils/GetContrast"; +import { getContrast } from "../../../../../utils"; export const Tag = (props: IListTagDto) => { const style = { diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx index 148903525..ff245682d 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/listsTable/ListsTable.tsx @@ -3,9 +3,9 @@ import { IListDto, ISoftwareDto, ILanguageDto } from "../../interfaces"; import ReactTable from "react-table" import "react-table/react-table.css" import "./listsTable.css"; -import * as moment from "moment"; import { SoftwareIcon } from "../softwareIcon"; -import { getContrast } from "../../../../utils/GetContrast"; +import { getContrast } from "../../../../utils"; +import * as moment from "moment"; import { DetailsExpander } from "../../components"; export interface IColumnVisibility { @@ -14,9 +14,9 @@ export interface IColumnVisibility { } interface IProps { + languages: ILanguageDto[]; lists: IListDto[]; software: ISoftwareDto[]; - languages: ILanguageDto[]; columnVisibility: IColumnVisibility[]; pageSize: number; } @@ -49,10 +49,11 @@ export const ListsTable = (props: IProps) => { style={{ width: "100%" }} value={filter ? filter.value : "any"}> - {props.software.map((s: any, i) => )} + {props.software.map( + (s: ISoftwareDto, i: number) => )} , sortable: false, - Cell: (c: any) => c.value.map((s: number, i: any) => ), + Cell: (c: any) => c.value.map((s: number, i: number) => ), width: 155, headerClassName: "d-none d-md-block", className: "d-none d-md-block", @@ -68,7 +69,7 @@ export const ListsTable = (props: IProps) => { sortable: false, Cell: (c: any) =>
    - {c.value.map((e: any, i: any) => + {c.value.map((e: any, i: number) => { style={{ width: "100%" }} value={filter ? filter.value : "any"}> - {props.languages.map((l: any, i) => + {props.languages.map((l: ILanguageDto, i: number) => )} , sortable: false, Cell: (c: any) =>
    - {c.value.map((e: any, i: any) => + {c.value.map((e: ILanguageDto, i: number) => diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/SoftwareIcon.tsx b/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/SoftwareIcon.tsx index aefa88b5f..ec9d6bef8 100644 --- a/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/SoftwareIcon.tsx +++ b/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/SoftwareIcon.tsx @@ -1,18 +1,20 @@ import * as React from "react"; -import img1 from "./imgs/01-uBlock-Origin.svg"; -import img2 from "./imgs/02-Adblock-Plus.svg"; -import img3 from "./imgs/03-AdGuard.png"; -import img4 from "./imgs/04-DNS66.png"; -import img5 from "./imgs/05-Nano-Adblocker.png"; -import img6 from "./imgs/06-AdBlock.png"; -import img7 from "./imgs/07-AdAway.png"; -import img8 from "./imgs/08-Personal-Blocklist.png"; -import img10 from "./imgs/10-Redirector.png"; -import img13 from "./imgs/13-MinerBlock.svg"; -import img14 from "./imgs/14-Pi-hole.png"; -import img15 from "./imgs/15-uBlock.svg"; -import img16 from "./imgs/16-Internet-Explorer-TPL.png"; -import img18 from "./imgs/18-FireHOL.png"; +import { + img1, + img2, + img3, + img4, + img5, + img6, + img7, + img8, + img10, + img13, + img14, + img15, + img16, + img18 +} from "./imgs"; interface IProps { id: number; diff --git a/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/imgs/index.ts b/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/imgs/index.ts new file mode 100644 index 000000000..108ab0b84 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/modules/home/components/softwareIcon/imgs/index.ts @@ -0,0 +1,31 @@ +import img1 from "./01-uBlock-Origin.svg"; +import img2 from "./02-Adblock-Plus.svg"; +import img3 from "./03-AdGuard.png"; +import img4 from "./04-DNS66.png"; +import img5 from "./05-Nano-Adblocker.png"; +import img6 from "./06-AdBlock.png"; +import img7 from "./07-AdAway.png"; +import img8 from "./08-Personal-Blocklist.png"; +import img10 from "./10-Redirector.png"; +import img13 from "./13-MinerBlock.svg"; +import img14 from "./14-Pi-hole.png"; +import img15 from "./15-uBlock.svg"; +import img16 from "./16-Internet-Explorer-TPL.png"; +import img18 from "./18-FireHOL.png"; + +export { + img1, + img2, + img3, + img4, + img5, + img6, + img7, + img8, + img10, + img13, + img14, + img15, + img16, + img18 + }; \ No newline at end of file diff --git a/src/FilterLists.Web/ClientApp/utils/index.ts b/src/FilterLists.Web/ClientApp/utils/index.ts new file mode 100644 index 000000000..ecd02f727 --- /dev/null +++ b/src/FilterLists.Web/ClientApp/utils/index.ts @@ -0,0 +1,5 @@ +import { getContrast } from "./GetContrast"; + +export { + getContrast + }; \ No newline at end of file