chore(website): fix pwa update

Author: AGDholo

packages/hedgehog-website/package.json

@@ -38,6 +38,7 @@
     "react-resize-detector": "^6.7.2",
     "react-router-dom": "6",
     "react-syntax-highlighter": "^15.4.5",
+    "react-toastify": "^9.0.8",
     "react-use": "^17.3.1",
     "recoil": "^0.7.0",
     "swr": "^1.2.2",

packages/hedgehog-website/src/App.tsx

@@ -12,6 +12,8 @@ import {pageView} from "./utils/ga4";
 import {searchState} from "./states/RSnippetStates";
 import { HelmetProvider } from 'react-helmet-async';
 import Meta from './components/Meta/Meta';
+import {ToastContainer} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const ThemePage = () => {
     const resetSearch = useResetRecoilState(searchState)
@@ -35,6 +37,7 @@ const ThemePage = () => {
 const App = (): React.ReactElement => {
     return (
         <div className="App">
+            <ToastContainer />
             {/*// @ts-ignore */}
             <RecoilRoot>
                 <HelmetProvider>

packages/hedgehog-website/src/components/Snippet/List/SnippetList.tsx

@@ -128,7 +128,7 @@ const SnippetList: React.FC<ISnippetListProps> = (props) => {
             {snippets.map((item: ISnippetsProps, index: number) => {
                 return (
                     <Box key={index}>
-                        <Grid container display={"flex"} justifyContent={"space-between"}
+                        <Grid container display={"flex"} justifyContent={"space-between"} alignItems={'center'}
                               spacing={isExplorePage ? 0 : 1}>
                             <Grid item>
                                 <Box alignItems={"center"} display={"flex"} sx={{

packages/hedgehog-website/src/pages/Home/Home.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, {useEffect} from "react";
 import GettingStarted from "./_gettingStarted";
 import Community from "./_community";
 import {Stack} from "@mui/material";
 import Draft from "./_draft";
 import Meta from '../../components/Meta/Meta';
+import {toast} from "react-toastify";
 
 const Home = () => {
     return (

packages/hedgehog-website/src/pages/Snippets/Snippets.tsx

@@ -81,7 +81,7 @@ const Snippets = (): React.ReactElement => {
             const snippetMetaUrl = `/snippets/meta?user=${currentName}`
             await mutate(snippetMetaUrl)
         } catch (e) {
-            console.log(e.response.data.message)
+            console.log(e)
         } finally {
             setUpdateUserDescLoading(false)
         }

packages/hedgehog-website/src/pages/Timeline/Timeline.tsx

@@ -80,7 +80,7 @@ const Timeline = () => {
                                 </Stack>
 
                                 {item.snippet?.user.username &&
-                                    <Card variant="outlined" sx={{mt: "5px", ml: 4, bgcolor: grey[50]}}>
+                                    <Card variant="outlined" sx={{mt: "4px", ml: 4, bgcolor: grey[50]}}>
                                         <CardContent>
                                             <Grid container>
                                                 <Grid item xs={12} md={10}>

packages/hedgehog-website/src/serviceWorkerRegistration.ts

@@ -10,6 +10,8 @@
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
 
+import {toast} from "react-toastify";
+
 const isLocalhost = Boolean(
     window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
@@ -48,6 +50,10 @@ export function register(config?: Config) {
               'PWA: This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://cra.link/PWA'
           );
+
+            toast.info("PWA is available!", {
+                position: toast.POSITION.BOTTOM_LEFT
+            });
         });
       } else {
         // Is not localhost. Just register service worker
@@ -76,6 +82,15 @@ function registerValidSW(swUrl: string, config?: Config) {
                     'PWA: New content is available and will be used when all '
                 );
 
+                  // registration?.waiting?.postMessage({ type: 'SKIP_WAITING' });
+                  toast.info("New content is available! Auto-updating...", {
+                      position: toast.POSITION.BOTTOM_LEFT,
+                      autoClose: false
+                  });
+
+                  registration.waiting?.postMessage({ type: 'SKIP_WAITING' });
+                  registration.update();
+
                 // Execute callback
                 if (config && config.onUpdate) {
                   config.onUpdate(registration);
@@ -86,6 +101,10 @@ function registerValidSW(swUrl: string, config?: Config) {
                 // "Content is cached for offline use." message.
                 console.log('PWA: Content is cached for offline use.');
 
+                  toast.info("PWA is available!", {
+                      position: toast.POSITION.BOTTOM_LEFT,
+                  });
+
                 // Execute callback
                 if (config && config.onSuccess) {
                   config.onSuccess(registration);

yarn.lock

@@ -17782,6 +17782,13 @@ react-syntax-highlighter@^15.4.5:
     prismjs "^1.25.0"
     refractor "^3.2.0"
 
+react-toastify@^9.0.8:
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.8.tgz#3876c89fc6211a29027b3075010b5ec39ebe4f7e"
+  integrity sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==
+  dependencies:
+    clsx "^1.1.1"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"