fix(StorePage/index.tsx): handle error when fetching saved components and display error message

feat(StorePage/index.tsx): add error handling for API key fetch and display error message
This commit is contained in:
anovazzi1 2023-10-26 15:13:21 -03:00
commit b3a8be547f
2 changed files with 22 additions and 14 deletions

View file

@ -3796,9 +3796,9 @@
"integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
},
"node_modules/@types/react": {
"version": "18.2.32",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.32.tgz",
"integrity": "sha512-F0FVIZQ1x5Gxy/VYJb7XcWvCcHR28Sjwt1dXLspdIatfPq1MVACfnBDwKe6ANLxQ64riIJooXClpUR6oxTiepg==",
"version": "18.2.33",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
"integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -5237,9 +5237,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.566",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.566.tgz",
"integrity": "sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg=="
"version": "1.4.567",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
"integrity": "sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w=="
},
"node_modules/emoji-regex": {
"version": "8.0.0",
@ -13755,9 +13755,9 @@
"integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g=="
},
"@types/react": {
"version": "18.2.32",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.32.tgz",
"integrity": "sha512-F0FVIZQ1x5Gxy/VYJb7XcWvCcHR28Sjwt1dXLspdIatfPq1MVACfnBDwKe6ANLxQ64riIJooXClpUR6oxTiepg==",
"version": "18.2.33",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
"integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -14768,9 +14768,9 @@
}
},
"electron-to-chromium": {
"version": "1.4.566",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.566.tgz",
"integrity": "sha512-mv+fAy27uOmTVlUULy15U3DVJ+jg+8iyKH1bpwboCRhtDC69GKf1PPTZvEIhCyDr81RFqfxZJYrbgp933a1vtg=="
"version": "1.4.567",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
"integrity": "sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w=="
},
"emoji-regex": {
"version": "8.0.0",

View file

@ -58,7 +58,12 @@ export default function StorePage(): JSX.Element {
}
useEffect(() => {
getSavedComponents().then((_) => handleGetComponents());
getSavedComponents()
.finally(() => handleGetComponents())
.catch((err) => {
setErrorApiKey(true);
console.error(err);
});
}, []);
const handleGetComponents = () => {
@ -108,7 +113,10 @@ export default function StorePage(): JSX.Element {
handleGetComponents();
}}
>
<Button variant="primary">
<Button
className={`${errorApiKey ? "animate-pulse border-error" : ""}`}
variant="primary"
>
<IconComponent name="Key" className="main-page-nav-button" />
API Key
</Button>