diff --git a/web/package-lock.json b/web/package-lock.json
index 4cdeeafd3..84696944d 100644
Binary files a/web/package-lock.json and b/web/package-lock.json differ
diff --git a/web/package.json b/web/package.json
index 14a080dd8..afc332b3b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,7 +25,8 @@
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"slugify": "^1.6.1",
- "typescript": "^4.4.4"
+ "typescript": "^4.4.4",
+ "web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-app-rewired start",
@@ -37,6 +38,7 @@
"eslintConfig": {
"extends": [
"react-app",
+ "react-app/jest",
"plugin:prettier/recommended"
]
},
diff --git a/web/public/index.html b/web/public/index.html
index 3ca7b05db..466a75bd3 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -2,6 +2,7 @@
+
-
+
-
-
- FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...
-
-
+
+
+
+
+
+ FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...
+
-
+
+
diff --git a/web/public/manifest.json b/web/public/manifest.json
index 452af93c5..46fd9d722 100644
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
@@ -3,9 +3,14 @@
"name": "FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...",
"icons": [
{
- "src": "icon_filterlists.png",
+ "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
- "type": "image/png"
+ "type": "image/x-icon"
+ },
+ {
+ "src": "icon_filterlists.png",
+ "type": "image/png",
+ "sizes": "512x512"
}
],
"start_url": ".",
diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx
index 5e49ca508..de42c8059 100644
--- a/web/src/App.test.tsx
+++ b/web/src/App.test.tsx
@@ -1,10 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
+import { render, screen } from "@testing-library/react";
import { App } from "./App";
-it("renders without crashing", () => {
- const div = document.createElement("div");
- ReactDOM.render(, div);
- ReactDOM.unmountComponentAtNode(div);
+xtest("renders learn react link", () => {
+ render();
+ const linkElement = screen.getByText(/learn react/i);
+ expect(linkElement).toBeInTheDocument();
});
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ad461b953..e36f5d180 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,7 +6,6 @@ import {
TwitterOutlined,
} from "@ant-design/icons";
import { Layout, Tag } from "antd";
-import React from "react";
import {
BrowserRouter as Router,
Link,
@@ -14,7 +13,6 @@ import {
RouteComponentProps,
Switch,
} from "react-router-dom";
-
import { ListsTable } from "./components";
const { Header, Content, Footer } = Layout;
diff --git a/web/src/components/LicenseTag.tsx b/web/src/components/LicenseTag.tsx
index c7776d322..8ad676db7 100644
--- a/web/src/components/LicenseTag.tsx
+++ b/web/src/components/LicenseTag.tsx
@@ -1,5 +1,4 @@
import { Tag } from "antd";
-import * as React from "react";
interface Props {
name: string;
diff --git a/web/src/components/LinkButton.tsx b/web/src/components/LinkButton.tsx
index 3cc6803d4..9d4b22df8 100644
--- a/web/src/components/LinkButton.tsx
+++ b/web/src/components/LinkButton.tsx
@@ -1,6 +1,5 @@
import { Button } from "antd";
import { ButtonType } from "antd/lib/button";
-import React from "react";
interface Props {
url?: string;
diff --git a/web/src/components/ListInfoButton.tsx b/web/src/components/ListInfoButton.tsx
index 37013b331..e62475f55 100644
--- a/web/src/components/ListInfoButton.tsx
+++ b/web/src/components/ListInfoButton.tsx
@@ -1,9 +1,7 @@
import { InfoCircleOutlined } from "@ant-design/icons";
import { Button } from "antd";
-import React from "react";
import { RouteComponentProps } from "react-router-dom";
import slugify from "slugify";
-
import { SlugifyOptions } from "../constants";
interface Props {
diff --git a/web/src/components/SubscribeButtons.tsx b/web/src/components/SubscribeButtons.tsx
index e3b5430de..291d9602b 100644
--- a/web/src/components/SubscribeButtons.tsx
+++ b/web/src/components/SubscribeButtons.tsx
@@ -1,7 +1,6 @@
import { ImportOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { ButtonType } from "antd/lib/button";
-import React from "react";
interface Props {
name: string;
diff --git a/web/src/components/SyntaxTag.tsx b/web/src/components/SyntaxTag.tsx
index 4c04f91b6..8ce321cef 100644
--- a/web/src/components/SyntaxTag.tsx
+++ b/web/src/components/SyntaxTag.tsx
@@ -1,5 +1,4 @@
import { Tag } from "antd";
-import * as React from "react";
interface Props {
name: string;
diff --git a/web/src/components/ViewButtons.tsx b/web/src/components/ViewButtons.tsx
index f7d5ecb45..df7fbb6ad 100644
--- a/web/src/components/ViewButtons.tsx
+++ b/web/src/components/ViewButtons.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import { LinkButton } from "./LinkButton";
import { SearchOutlined } from "@ant-design/icons";
diff --git a/web/src/components/languageCloud/LanguageCloud.tsx b/web/src/components/languageCloud/LanguageCloud.tsx
index d6e6c8cfe..3c306d495 100644
--- a/web/src/components/languageCloud/LanguageCloud.tsx
+++ b/web/src/components/languageCloud/LanguageCloud.tsx
@@ -1,6 +1,4 @@
import { Tag } from "antd";
-import React from "react";
-
import { Language } from "../../interfaces/Language";
import styles from "./LanguageCloud.module.css";
diff --git a/web/src/components/listInfoDrawer/ListInfoDrawer.tsx b/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
index e6abbed5f..58bf43443 100644
--- a/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
+++ b/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
@@ -1,5 +1,4 @@
import "./listInfoDrawer.css";
-
import { Divider, Drawer } from "antd";
import {
DollarOutlined,
@@ -12,8 +11,7 @@ import {
MessageOutlined,
TeamOutlined,
} from "@ant-design/icons";
-import React, { useEffect, useState } from "react";
-
+import { useEffect, useState } from "react";
import ButtonGroup from "antd/lib/button/button-group";
import { Description } from "../Description";
import { LanguageCloud } from "../languageCloud";
diff --git a/web/src/components/listsTable/ListDrawer.tsx b/web/src/components/listsTable/ListDrawer.tsx
index ea6deb487..4b209c83b 100644
--- a/web/src/components/listsTable/ListDrawer.tsx
+++ b/web/src/components/listsTable/ListDrawer.tsx
@@ -1,11 +1,9 @@
-import React from "react";
import {
Redirect,
Route,
RouteComponentProps,
StaticContext,
} from "react-router";
-
import { List } from "../../interfaces/List";
import { ListInfoDrawer } from "../listInfoDrawer";
import { Language } from "../../interfaces/Language";
diff --git a/web/src/components/listsTable/ListsTable.tsx b/web/src/components/listsTable/ListsTable.tsx
index 36132c57d..85fac7716 100644
--- a/web/src/components/listsTable/ListsTable.tsx
+++ b/web/src/components/listsTable/ListsTable.tsx
@@ -3,11 +3,10 @@ import {
SorterResult,
TableCurrentDataSource,
} from "antd/lib/table/interface";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
import { SoftwareCloud, SoftwareIcon } from "../softwareCloud";
import { Table, Tag } from "antd";
import { useSearchColumnFilter, useTablePageSizer } from "../../hooks";
-
import { Description } from "../Description";
import { Language } from "../../interfaces/Language";
import { LanguageCloud } from "../languageCloud";
diff --git a/web/src/components/listsTable/ListsTableHoc.tsx b/web/src/components/listsTable/ListsTableHoc.tsx
index 6c4b4c72a..f2f389b4d 100644
--- a/web/src/components/listsTable/ListsTableHoc.tsx
+++ b/web/src/components/listsTable/ListsTableHoc.tsx
@@ -1,6 +1,4 @@
-import React from "react";
import { RouteComponentProps } from "react-router-dom";
-
import {
useLanguages,
useLicenses,
diff --git a/web/src/components/maintainerCloud/MaintainerCloud.tsx b/web/src/components/maintainerCloud/MaintainerCloud.tsx
index 8974874da..83d10ba7b 100644
--- a/web/src/components/maintainerCloud/MaintainerCloud.tsx
+++ b/web/src/components/maintainerCloud/MaintainerCloud.tsx
@@ -1,6 +1,4 @@
import { Tag } from "antd";
-import React from "react";
-
import { Maintainer } from "../../interfaces/Maintainer";
import styles from "./MaintainerCloud.module.css";
diff --git a/web/src/components/maintainers/Maintainers.tsx b/web/src/components/maintainers/Maintainers.tsx
index 291d8ed0f..22a30c1fc 100644
--- a/web/src/components/maintainers/Maintainers.tsx
+++ b/web/src/components/maintainers/Maintainers.tsx
@@ -1,10 +1,6 @@
import "./maintainers.css";
-
import { HomeOutlined, MailOutlined, TwitterOutlined } from "@ant-design/icons";
-
import { Card } from "antd";
-import React from "react";
-
import { Maintainer } from "../../interfaces/Maintainer";
interface Props {
diff --git a/web/src/components/softwareCloud/SoftwareCloud.tsx b/web/src/components/softwareCloud/SoftwareCloud.tsx
index 332a23f3c..ce2e38fcc 100644
--- a/web/src/components/softwareCloud/SoftwareCloud.tsx
+++ b/web/src/components/softwareCloud/SoftwareCloud.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
import { Software } from "../../interfaces/Software";
import styles from "./SoftwareCloud.module.css";
import { SoftwareIcon } from "./SoftwareIcon";
diff --git a/web/src/components/softwareCloud/SoftwareIcon.tsx b/web/src/components/softwareCloud/SoftwareIcon.tsx
index 26165f88f..60ce98bcf 100644
--- a/web/src/components/softwareCloud/SoftwareIcon.tsx
+++ b/web/src/components/softwareCloud/SoftwareIcon.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
import {
img01,
img02,
diff --git a/web/src/components/syntaxCloud/SyntaxCloud.tsx b/web/src/components/syntaxCloud/SyntaxCloud.tsx
index 38903a715..9ccaf06e3 100644
--- a/web/src/components/syntaxCloud/SyntaxCloud.tsx
+++ b/web/src/components/syntaxCloud/SyntaxCloud.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
import { Syntax } from "../../interfaces/Syntax";
import { SyntaxTag } from "../SyntaxTag";
import styles from "./SyntaxCloud.module.css";
diff --git a/web/src/components/tagCloud/TagCloud.tsx b/web/src/components/tagCloud/TagCloud.tsx
index ec36461fb..f88646357 100644
--- a/web/src/components/tagCloud/TagCloud.tsx
+++ b/web/src/components/tagCloud/TagCloud.tsx
@@ -1,6 +1,4 @@
import { Tag } from "antd";
-import React from "react";
-
import { Tag as TagInterface } from "../../interfaces/Tag";
import styles from "./TagCloud.module.css";
diff --git a/web/src/hooks/useLists.tsx b/web/src/hooks/useLists.tsx
index c429b4429..77abbe2b1 100644
--- a/web/src/hooks/useLists.tsx
+++ b/web/src/hooks/useLists.tsx
@@ -1,5 +1,4 @@
import slugify from "slugify";
-
import { SlugifyOptions } from "../constants";
import { List } from "../interfaces/List";
import { useApiData } from "./useApiData";
diff --git a/web/src/index.tsx b/web/src/index.tsx
index f0dbcb5c2..dcc257fe2 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,8 +1,17 @@
-import "./index.css";
-
import React from "react";
import ReactDOM from "react-dom";
-
import { App } from "./App";
+import "./index.css";
+import reportWebVitals from "./reportWebVitals";
-ReactDOM.render(, document.getElementById("root"));
+ReactDOM.render(
+
+
+ ,
+ document.getElementById("root")
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/web/src/reportWebVitals.ts b/web/src/reportWebVitals.ts
new file mode 100644
index 000000000..5fa3583b7
--- /dev/null
+++ b/web/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/web/src/setupTests.ts b/web/src/setupTests.ts
new file mode 100644
index 000000000..1dd407a63
--- /dev/null
+++ b/web/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
diff --git a/web/tsconfig.json b/web/tsconfig.json
index cc47c36d4..9d379a3c4 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -8,13 +8,13 @@
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx",
- "noFallthroughCasesInSwitch": true
+ "jsx": "react-jsx"
},
"include": ["src"]
}