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

refactor(web): prettier --write .

Browse source
This commit is contained in:
Collin M. Barrett 2020-07-04 12:33:42 -05:00
parent b98ded3494
commit fc6b46e6d6
19 changed files with 73 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/config-overrides.js
View file

@ -4,6 +4,6 @@ module.exports = override(
fixBabelImports("import", {
libraryName: "antd",
libraryDirectory: "es",
style: "css"
style: "css",
})
);

2
web/public/manifest.json
View file

@ -12,4 +12,4 @@
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
}

8
web/src/App.tsx
View file

@ -3,7 +3,7 @@ import {
DollarOutlined,
GithubOutlined,
TeamOutlined,
TwitterOutlined
TwitterOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Tag } from "antd";
import React from "react";
@ -12,7 +12,7 @@ import {
Link,
Route,
RouteComponentProps,
Switch
Switch,
} from "react-router-dom";
import { ListsTable } from "./components";
@ -33,7 +33,7 @@ export const App: React.FC = () => (
paddingLeft: 12,
paddingTop: 12,
paddingRight: 12,
minHeight: 280
minHeight: 280,
}}
>
<Switch>
@ -47,7 +47,7 @@ export const App: React.FC = () => (
textAlign: "center",
padding: "6px 50px",
background: "#fff",
lineHeight: "28px"
lineHeight: "28px",
}}
>
<CopyrightAuthor />

2
web/src/components/listInfoDrawer/ListInfoDrawer.tsx
View file

@ -10,7 +10,7 @@ import {
MailOutlined,
MessageOutlined,
SearchOutlined,
TeamOutlined
TeamOutlined,
} from "@ant-design/icons";
import React, { useEffect, useState } from "react";

6
web/src/components/listsTable/ListDrawer.tsx
View file

@ -3,7 +3,7 @@ import {
Redirect,
Route,
RouteComponentProps,
StaticContext
StaticContext,
} from "react-router";
import { Language } from "../../interfaces/Language";
@ -27,7 +27,7 @@ interface Props {
export const ListDrawer = (props: Props) => {
const renderDrawer = (rp: RouteComponentProps<any, StaticContext, any>) => {
const list = props.lists.find(l => l.slug === rp.match.params.listSlug);
const list = props.lists.find((l) => l.slug === rp.match.params.listSlug);
return list ? (
<ListInfoDrawer
list={list as List}
@ -57,7 +57,7 @@ export const ListDrawer = (props: Props) => {
}
syntax={
list.syntaxId
? props.syntaxes.find(s => s.id === list.syntaxId)
? props.syntaxes.find((s) => s.id === list.syntaxId)
: undefined
}
tags={

63
web/src/components/listsTable/ListsTable.tsx
View file

@ -3,7 +3,7 @@ import "./listsTable.css";
import {
Key,
SorterResult,
TableCurrentDataSource
TableCurrentDataSource,
} from "antd/lib/table/interface";
import React, { useEffect, useState } from "react";
import { SoftwareCloud, SoftwareIcon } from "../softwareCloud";
@ -63,19 +63,19 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
return (
<Table<List>
dataSource={lists}
rowKey={record => record.id.toString()}
rowKey={(record) => record.id.toString()}
loading={lists.length ? false : true}
size="small"
pagination={{
simple: true,
style: { float: "left", margin: "4px 4px" },
pageSize: tablePageSize.pageSize
pageSize: tablePageSize.pageSize,
}}
scroll={{
x:
tablePageSize.isNarrowWindow || tablePageSize.isWideWindow
? undefined
: 1892
: 1892,
}}
onChange={(
_pagination: PaginationConfig,
@ -143,12 +143,12 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
(s: Software) =>
s.syntaxIds && s.syntaxIds.includes(l.syntaxId)
)
.map(s => s.id);
.map((s) => s.id);
return arraySorter(getSoftwareIds(a), getSoftwareIds(b), software);
}}
width={170}
className={styles.nogrow}
filters={software.map(s => ({
filters={software.map((s) => ({
text: (
<>
<SoftwareIcon id={s.id} />
@ -156,18 +156,18 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
{s.name}&nbsp; (
{
visibleLists.filter(
l => s.syntaxIds && s.syntaxIds.includes(l.syntaxId)
(l) => s.syntaxIds && s.syntaxIds.includes(l.syntaxId)
).length
}
)
</>
),
value: s.name
value: s.name,
}))}
onFilter={(value, record) =>
software
.filter((s: Software) => s.name === value)
.flatMap(s => s.syntaxIds)
.flatMap((s) => s.syntaxIds)
.includes(record.syntaxId)
}
render={(syntaxId: number) =>
@ -187,8 +187,8 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
key="Syntax"
dataIndex={nameof<List>("syntaxId")}
sorter={(a, b) => {
const syntaxA = syntaxes.find(s => s.id === a.syntaxId);
const syntaxB = syntaxes.find(s => s.id === b.syntaxId);
const syntaxA = syntaxes.find((s) => s.id === a.syntaxId);
const syntaxB = syntaxes.find((s) => s.id === b.syntaxId);
return syntaxA
? syntaxB
? syntaxA.name.localeCompare(syntaxB.name)
@ -197,24 +197,24 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
}}
width={254}
className={styles.nogrow}
filters={syntaxes.map(s => ({
filters={syntaxes.map((s) => ({
text: (
<>
<SyntaxTag name={s.name} showLabel={false} />(
{
visibleLists.filter(l => l.syntaxId && l.syntaxId === s.id)
visibleLists.filter((l) => l.syntaxId && l.syntaxId === s.id)
.length
}
)
</>
),
value: s.id.toString()
value: s.id.toString(),
}))}
onFilter={(value, record) =>
record.syntaxId ? record.syntaxId.toString() === value : false
}
render={(syntaxId: number) => {
const syntax = syntaxes.find(s => s.id === syntaxId);
const syntax = syntaxes.find((s) => s.id === syntaxId);
return syntax ? (
<SyntaxTag
name={syntax.name}
@ -234,20 +234,20 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
}
width={129}
className={styles.nogrow}
filters={languages.map(l => ({
filters={languages.map((l) => ({
text: (
<>
<Tag title={l.name}>{l.iso6391}</Tag>&nbsp;
{l.name}&nbsp; (
{
visibleLists.filter(
li => li.languageIds && li.languageIds.includes(l.id)
(li) => li.languageIds && li.languageIds.includes(l.id)
).length
}
)
</>
),
value: l.id.toString()
value: l.id.toString(),
}))}
onFilter={(value, record) =>
record.languageIds ? record.languageIds.includes(+value) : false
@ -271,18 +271,19 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
sorter={(a, b) => arraySorter(a.tagIds, b.tagIds, tags)}
width={275}
className={styles.nogrow}
filters={tags.map(t => ({
filters={tags.map((t) => ({
text: (
<>
<Tag title={t.description}>{t.name}</Tag>(
{
visibleLists.filter(l => l.tagIds && l.tagIds.includes(t.id))
.length
visibleLists.filter(
(l) => l.tagIds && l.tagIds.includes(t.id)
).length
}
)
</>
),
value: t.id.toString()
value: t.id.toString(),
}))}
onFilter={(value, record) =>
record.tagIds ? record.tagIds.includes(+value) : false
@ -306,19 +307,19 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
}
width={191}
className={styles.nogrow}
filters={maintainers.map(t => ({
filters={maintainers.map((t) => ({
text: (
<>
<Tag title={t.name}>{t.name}</Tag>(
{
visibleLists.filter(
l => l.maintainerIds && l.maintainerIds.includes(t.id)
(l) => l.maintainerIds && l.maintainerIds.includes(t.id)
).length
}
)
</>
),
value: t.id.toString()
value: t.id.toString(),
}))}
onFilter={(value, record) =>
record.maintainerIds ? record.maintainerIds.includes(+value) : false
@ -340,8 +341,8 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
key="License"
dataIndex={nameof<List>("licenseId")}
sorter={(a, b) => {
const licenseA = licenses.find(s => s.id === a.licenseId);
const licenseB = licenses.find(s => s.id === b.licenseId);
const licenseA = licenses.find((s) => s.id === a.licenseId);
const licenseB = licenses.find((s) => s.id === b.licenseId);
return licenseA
? licenseB
? licenseA.name.localeCompare(licenseB.name)
@ -350,25 +351,25 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
}}
width={215}
className={styles.nogrow}
filters={licenses.map(l => ({
filters={licenses.map((l) => ({
text: (
<>
<LicenseTag name={l.name} showLabel={false} />(
{
visibleLists.filter(
li => li.licenseId && li.licenseId === l.id
(li) => li.licenseId && li.licenseId === l.id
).length
}
)
</>
),
value: l.id.toString()
value: l.id.toString(),
}))}
onFilter={(value, record) =>
record.licenseId ? record.licenseId.toString() === value : false
}
render={(licenseId: number) => {
const license = licenses.find(l => l.id === licenseId);
const license = licenses.find((l) => l.id === licenseId);
return license ? (
<LicenseTag
name={license.name}

2
web/src/components/listsTable/ListsTableHoc.tsx
View file

@ -8,7 +8,7 @@ import {
useMaintainers,
useSoftware,
useSyntaxes,
useTags
useTags,
} from "../../hooks";
import { ListDrawer } from "./ListDrawer";
import { ListsTable } from "./ListsTable";

4
web/src/components/softwareCloud/SoftwareIcon.tsx
View file

@ -41,7 +41,7 @@ import {
img39,
img40,
img41,
img42
img42,
} from "./imgs";
interface Props {
@ -104,5 +104,5 @@ const icons: { [id: number]: Icon } = {
39: { image: img39, imageTitle: "pfBlockerNG" },
40: { image: img40, imageTitle: "Opera's built-in adblocker" },
41: { image: img41, imageTitle: "Surge" },
42: { image: img42, imageTitle: "dnscrypt-proxy" }
42: { image: img42, imageTitle: "dnscrypt-proxy" },
};

2
web/src/components/softwareCloud/imgs/index.ts
View file

@ -81,5 +81,5 @@ export {
img39,
img40,
img41,
img42
img42,
};

2
web/src/hooks/index.ts
View file

@ -17,5 +17,5 @@ export {
useSoftware,
useSyntaxes,
useTablePageSizer,
useTags
useTags,
};

2
web/src/hooks/useApiData.tsx
View file

@ -4,7 +4,7 @@ export const useApiData = <T extends {}>(url: string) => {
const [data, setData] = useState<T>();
useEffect(() => {
const fetchData = async () =>
(await fetch(url)).json().then(r => setData(r));
(await fetch(url)).json().then((r) => setData(r));
fetchData();
}, [url]);
return data;

6
web/src/hooks/useLanguages.tsx
View file

@ -2,6 +2,6 @@ import { Language } from "../interfaces/Language";
import { useApiData } from "./useApiData";
export const useLanguages = () =>
(useApiData<Language[]>("/api/v1/languages") || []).sort(
(a: Language, b: Language) => a.name.localeCompare(b.name)
);
(
useApiData<Language[]>("/api/v1/languages") || []
).sort((a: Language, b: Language) => a.name.localeCompare(b.name));

6
web/src/hooks/useLicenses.tsx
View file

@ -2,6 +2,6 @@ import { License } from "../interfaces/License";
import { useApiData } from "./useApiData";
export const useLicenses = () =>
(useApiData<License[]>("/api/v1/licenses") || []).sort(
(a: License, b: License) => a.name.localeCompare(b.name)
);
(
useApiData<License[]>("/api/v1/licenses") || []
).sort((a: License, b: License) => a.name.localeCompare(b.name));

2
web/src/hooks/useLists.tsx
View file

@ -6,6 +6,6 @@ import { useApiData } from "./useApiData";
export const useLists = () => {
const lists = useApiData<List[]>("/api/v1/lists");
lists && lists.forEach(l => (l.slug = slugify(l.name, SlugifyOptions)));
lists && lists.forEach((l) => (l.slug = slugify(l.name, SlugifyOptions)));
return (lists || []).sort((a: List, b: List) => a.name.localeCompare(b.name));
};

6
web/src/hooks/useMaintainers.tsx
View file

@ -2,6 +2,6 @@ import { Maintainer } from "../interfaces/Maintainer";
import { useApiData } from "./useApiData";
export const useMaintainers = () =>
(useApiData<Maintainer[]>("/api/v1/maintainers") || []).sort(
(a: Maintainer, b: Maintainer) => a.name.localeCompare(b.name)
);
(
useApiData<Maintainer[]>("/api/v1/maintainers") || []
).sort((a: Maintainer, b: Maintainer) => a.name.localeCompare(b.name));

15
web/src/hooks/useSearchColumnFilter.tsx
View file

@ -15,7 +15,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
const [filterProps, setFilterProps] = useState<FilterPropsState<T>>({
filterDropdown: undefined,
filterIcon: undefined,
onFilter: undefined
onFilter: undefined,
});
useEffect(() => {
const handleSearch = (confirm?: () => void) => {
@ -29,14 +29,15 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
clearFilters,
}) => (
<div style={{ padding: 8 }}>
<Input
placeholder={`Search ${dataIndex.charAt(0).toUpperCase() +
dataIndex.slice(1)}`}
placeholder={`Search ${
dataIndex.charAt(0).toUpperCase() + dataIndex.slice(1)
}`}
value={selectedKeys && selectedKeys[0]}
onChange={e =>
onChange={(e) =>
setSelectedKeys &&
setSelectedKeys(e.target.value ? [e.target.value] : [])
}
@ -61,7 +62,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
</Button>
</div>
),
filterIcon: filtered => (
filterIcon: (filtered) => (
<SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) => {
@ -73,7 +74,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
.toLowerCase()
.includes(value.toString().toLowerCase())
);
}
},
});
}, [dataIndex]);
return filterProps;

6
web/src/hooks/useSoftware.tsx
View file

@ -2,6 +2,6 @@ import { Software } from "../interfaces/Software";
import { useApiData } from "./useApiData";
export const useSoftware = () =>
(useApiData<Software[]>("/api/v1/software") || []).sort(
(a: Software, b: Software) => a.name.localeCompare(b.name)
);
(
useApiData<Software[]>("/api/v1/software") || []
).sort((a: Software, b: Software) => a.name.localeCompare(b.name));

6
web/src/hooks/useSyntaxes.tsx
View file

@ -2,6 +2,6 @@ import { Syntax } from "../interfaces/Syntax";
import { useApiData } from "./useApiData";
export const useSyntaxes = () =>
(useApiData<Syntax[]>("/api/v1/syntaxes") || []).sort(
(a: Syntax, b: Syntax) => a.name.localeCompare(b.name)
);
(
useApiData<Syntax[]>("/api/v1/syntaxes") || []
).sort((a: Syntax, b: Syntax) => a.name.localeCompare(b.name));

2
web/src/hooks/useTablePageSizer.tsx
View file

@ -19,5 +19,5 @@ export const useTablePageSizer = () => {
const calculateSize = () => ({
pageSize: Math.floor((window.innerHeight - 184) / 57),
isNarrowWindow: window.innerWidth < 576 ? true : false,
isWideWindow: window.innerWidth > 1918 ? true : false
isWideWindow: window.innerWidth > 1918 ? true : false,
});