From bc986c6e01dea2d9109a32786cb9b124e8116dcb Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:08:29 +0100 Subject: [PATCH 1/7] feat(bounty): add empty state when it's a internal chrome page --- src/App.tsx | 32 ++++++++++++++++++++++++-------- src/background.ts | 13 ++++++++++++- src/components/exception.tsx | 17 +++++++++++++++++ src/error-codes.ts | 10 ++++++++++ 4 files changed, 63 insertions(+), 9 deletions(-) create mode 100644 src/components/exception.tsx create mode 100644 src/error-codes.ts diff --git a/src/App.tsx b/src/App.tsx index c17b51ff..1cd700a4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,36 @@ import { FunctionalComponent } from 'preact'; import { useEffect, useState } from 'preact/hooks'; import './index.css'; +import Exception from "./components/expection"; import NoResults from './components/no-results'; import Header from './components/header'; import Preview from './components/preview'; import LoadingSkeleton from './components/loading-skeleton'; +function isResponseIsAnException(response) { + return response.code >= 0 && typeof response.message === 'string'; +} + const App: FunctionalComponent = () => { - const [loading, setLoading] = useState(true); + const [isLoading, setLoading] = useState(true); + const [exceptionOnScrapperResult, setException] = useState(""); const [results, setResults] = useState([]); + const hasExceptions = Boolean(exceptionOnScrapperResult); + const showLoading = !hasExceptions && isLoading; + const showResults = !showLoading && results.length > 0; + const noResults = !showLoading && (!hasExceptions && results.length === 0); + useEffect(() => { chrome.runtime.sendMessage({ action: 'rows-x:scrap' }, (response) => { - setResults(response); - setLoading(false); + if (isResponseIsAnException(response)) { + setResults([]); + setException(response.message); + } else { + setResults(response); + setLoading(false); + setException(""); + } }); }, []); @@ -21,11 +38,10 @@ const App: FunctionalComponent = () => { <>
- {loading ? ( - - ) : ( - <>{results.length > 0 ? : } - )} + {showLoading && ()} + {showResults && } + {noResults && } + {hasExceptions && }
); diff --git a/src/background.ts b/src/background.ts index 9d5535fd..3c31530e 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,10 +1,21 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ +import {ERROR_MESSAGES, ErrorCodes} from "./error-codes"; import { getCurrentTab, runScrapper } from './utils/chrome'; import { getScrapperOptionsByUrl } from './utils/scrapperUtils'; async function scrap() { const tab = await getCurrentTab(); - if (!tab || !tab.url || !tab.title) return; + + if (!tab || !tab.url || !tab.title) { + return; + } + + if (tab.url.includes('chrome://')) { + return { + code: ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES, + message: ERROR_MESSAGES.get(ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES) + }; + } const options = getScrapperOptionsByUrl(tab.url, tab.title); diff --git a/src/components/exception.tsx b/src/components/exception.tsx new file mode 100644 index 00000000..ec8ed675 --- /dev/null +++ b/src/components/exception.tsx @@ -0,0 +1,17 @@ +import { JSX } from "preact"; + +interface Props { + message: string; +} + +const Exception = ({ message }: Props): JSX.Element => { + return ( +
+
+ {message} +
+
+ ); +}; + +export default Exception; diff --git a/src/error-codes.ts b/src/error-codes.ts new file mode 100644 index 00000000..de862afb --- /dev/null +++ b/src/error-codes.ts @@ -0,0 +1,10 @@ +export enum ErrorCodes { + GOOGLE_CHROME_INTERNAL_PAGES + } + + export const ERROR_MESSAGES = new Map( + [ + [ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES, "Open a page with a table, then open again!"] + ] + ); + \ No newline at end of file From 3e56034025fac7c85752657c1f06bb6e60ca4b28 Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:15:01 +0100 Subject: [PATCH 2/7] update --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 1cd700a4..3d035e31 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import { FunctionalComponent } from 'preact'; import { useEffect, useState } from 'preact/hooks'; import './index.css'; -import Exception from "./components/expection"; +import Exception from "./components/exception"; import NoResults from './components/no-results'; import Header from './components/header'; import Preview from './components/preview'; From 8f1bb00ba29b073bd2bb3db15a376fb56e6c5ed7 Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:17:13 +0100 Subject: [PATCH 3/7] amend --- src/error-codes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/error-codes.ts b/src/error-codes.ts index de862afb..82827c61 100644 --- a/src/error-codes.ts +++ b/src/error-codes.ts @@ -7,4 +7,4 @@ export enum ErrorCodes { [ErrorCodes.GOOGLE_CHROME_INTERNAL_PAGES, "Open a page with a table, then open again!"] ] ); - \ No newline at end of file + \ No newline at end of file From 692597145fa1cdfd405d5de0f3e7b9f15398bfa3 Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:33:07 +0100 Subject: [PATCH 4/7] fix linter --- src/App.tsx | 3 ++- src/types.ts | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 src/types.ts diff --git a/src/App.tsx b/src/App.tsx index 3d035e31..f0dd81e2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,8 +6,9 @@ import NoResults from './components/no-results'; import Header from './components/header'; import Preview from './components/preview'; import LoadingSkeleton from './components/loading-skeleton'; +import { ExceptionMessage } from "./types"; -function isResponseIsAnException(response) { +function isResponseIsAnException(response: ExceptionMessage) { return response.code >= 0 && typeof response.message === 'string'; } diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..2fe68827 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,6 @@ +import { ErrorCodes } from "./error-codes"; + +export type ExceptionMessage = { + code: ErrorCodes; + message: string; +} From 58c8f05d74f908a9f9622a0d4540703606a47dc8 Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:35:26 +0100 Subject: [PATCH 5/7] updated loading state --- src/App.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index f0dd81e2..6cc49d54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -29,9 +29,10 @@ const App: FunctionalComponent = () => { setException(response.message); } else { setResults(response); - setLoading(false); setException(""); } + + setLoading(false); }); }, []); From 273447988b44a39792315e05332f359ffba3fa9e Mon Sep 17 00:00:00 2001 From: Crocodile Bounty Hunter <167210515+crocodile-bounty-hunter@users.noreply.github.com> Date: Tue, 16 Apr 2024 17:03:58 +0100 Subject: [PATCH 6/7] update to match no results --- src/App.tsx | 3 +-- src/components/exception.tsx | 17 ----------------- src/components/no-results.tsx | 8 ++++++-- 3 files changed, 7 insertions(+), 21 deletions(-) delete mode 100644 src/components/exception.tsx diff --git a/src/App.tsx b/src/App.tsx index 6cc49d54..f6057948 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import { FunctionalComponent } from 'preact'; import { useEffect, useState } from 'preact/hooks'; import './index.css'; -import Exception from "./components/exception"; import NoResults from './components/no-results'; import Header from './components/header'; import Preview from './components/preview'; @@ -43,7 +42,7 @@ const App: FunctionalComponent = () => { {showLoading && ()} {showResults && } {noResults && } - {hasExceptions && } + {hasExceptions && } ); diff --git a/src/components/exception.tsx b/src/components/exception.tsx deleted file mode 100644 index ec8ed675..00000000 --- a/src/components/exception.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { JSX } from "preact"; - -interface Props { - message: string; -} - -const Exception = ({ message }: Props): JSX.Element => { - return ( -
-
- {message} -
-
- ); -}; - -export default Exception; diff --git a/src/components/no-results.tsx b/src/components/no-results.tsx index e6585b96..d8364ac0 100644 --- a/src/components/no-results.tsx +++ b/src/components/no-results.tsx @@ -3,7 +3,11 @@ import './no-results.css'; import Button from './button'; import { getCurrentTab } from '../utils/chrome'; -const NoResults = (): JSX.Element => { +interface Props { + message?: string; +} + +const NoResults = ({ message }: Props): JSX.Element => { const redirectToFeedback = async () => { const tab = await getCurrentTab(); if (!tab || !tab.url) return; @@ -25,7 +29,7 @@ const NoResults = (): JSX.Element => {
No results - Would you like RowsX to support this website? + {message ?? 'Would you like RowsX to support this website?'}