Merge pull request #50 from PMET-public/develop

🚀 v1.1.1 (Cloud)

Author: fnhipster

components/App/App.tsx

@@ -1,17 +1,15 @@
 import React, { FunctionComponent, useEffect, useCallback } from 'react'
 import { ServerError } from 'apollo-link-http-common'
 import dynamic from 'next/dynamic'
-import { version } from '~/package.json'
-import ReactGA from 'react-ga'
-import Router, { useRouter } from 'next/router'
+
+import { useRouter } from 'next/router'
 import { ThemeProvider } from 'styled-components'
 import { baseTheme, UIBase } from '@storystore/ui/dist/theme'
 import { Root, HeaderContainer, Main, FooterContainer, Copyright, TabBarContainer, OfflineToast } from './App.styled'
 
 import { useApp } from './useApp'
 import { resolveImage } from '~/lib/resolveImage'
 import { useStoryStore } from '~/hooks/useStoryStore/useStoryStore'
-import { useServiceWorker } from '~/hooks/useServiceWorker'
 import useNetworkStatus from '~/hooks/useNetworkStatus'
 
 import NextNprogress from 'nextjs-progressbar'
@@ -28,7 +26,6 @@ import IconBagActiveSvg from 'remixicon/icons/Finance/shopping-bag-fill.svg'
 import IconHomeSvg from 'remixicon/icons/Buildings/store-2-line.svg'
 import IconHomeActiveSvg from 'remixicon/icons/Buildings/store-2-fill.svg'
 import CloudOff from 'remixicon/icons/Business/cloud-off-line.svg'
-import { FontStyles } from './FontStyles'
 import { ToastsStyles } from './ToastsStyles'
 import useValueUpdated from '~/hooks/useValueUpdated'
 
@@ -49,8 +46,6 @@ if (process.browser) {
 }
 
 export const App: FunctionComponent<AppProps> = ({ children }) => {
-    const workbox = useServiceWorker()
-
     const { cartId, settings, setCartId } = useStoryStore()
 
     const { queries, api } = useApp({ cartId, footerBlockId: settings.footerBlockId })
@@ -79,42 +74,6 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
         }
     }, [setCartId, queries, api, cartId])
 
-    /**
-     * Update SW Cache on Route change
-     */
-    const handleRouteChange = useCallback(
-        (url, error?: any) => {
-            if (error || !workbox) return
-
-            workbox.messageSW({
-                type: 'CACHE_URLS',
-                payload: {
-                    urlsToCache: [url],
-                },
-            })
-
-            ReactGA.pageview(url)
-        },
-        [workbox]
-    )
-
-    useEffect(() => {
-        Router.events.on('routeChangeComplete', handleRouteChange)
-
-        return () => {
-            Router.events.off('routeChangeComplete', handleRouteChange)
-        }
-    }, [handleRouteChange])
-
-    useEffect(() => {
-        if (process.env.GOOGLE_ANALYTICS) {
-            /**
-             * Google Analytics
-             */
-            ReactGA.initialize(process.env.GOOGLE_ANALYTICS)
-        }
-    }, [])
-
     /**
      * Offline Message
      */
@@ -135,22 +94,6 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
         }
     }, online)
 
-    /**
-     * Google Analytics
-     */
-    useEffect(() => {
-        if (!process.env.GOOGLE_ANALYTICS) return
-        ReactGA.set({ dimension1: version }) // version
-
-        ReactGA.set({ dimension2: window.location.host }) // release
-
-        if (settings.magentoUrl) {
-            ReactGA.set({ dimension3: new URL(settings.magentoUrl).host }) // endpoint
-        }
-
-        ReactGA.pageview(window.location.pathname)
-    }, [settings])
-
     if (online && queries.app.error) {
         const networkError = queries.app.error?.networkError as ServerError
 
@@ -196,7 +139,6 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
         >
             <NextNprogress color={settings.colorAccent || baseTheme.colors.accent} startPosition={0.4} stopDelayMs={200} height={3} options={{ showSpinner: false, easing: 'ease' }} />
             <UIBase />
-            <FontStyles />
             <ToastsStyles />
 
             {/* Head Metadata */}

components/Settings/Settings.styled.tsx

@@ -52,6 +52,7 @@ export const Buttons = styled.div`
 `
 
 export const RootErrors = styled.ul`
+    list-style-type: none;
     display: grid;
     grid-gap: 1rem;
     grid-auto-rows: max-content;

hooks/useHtml/useHtml.tsx

@@ -1,8 +1,10 @@
 import React, { useMemo } from 'react'
 import parseHtml, { domToReact, HTMLReactParserOptions } from 'html-react-parser'
-import { resolveLink, LinkType } from '../../lib/resolveLink'
+import { resolveLink, LinkType } from '~/lib/resolveLink'
+import { resolveImage } from '~/lib/resolveImage'
 
-import Link from '../../components/Link'
+import Link from '~/components/Link'
+import Image from '@storystore/ui/dist/components/Image'
 
 const options: HTMLReactParserOptions = {
     replace: ({ name, attribs, children }) => {
@@ -21,6 +23,10 @@ const options: HTMLReactParserOptions = {
                 </Link>
             )
         }
+
+        if (name === 'img' && attribs?.src) {
+            return <Image {...attribs} src={resolveImage(attribs.src)} />
+        }
     },
 }
 

hooks/useServiceWorker/useServiceWorker.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useCallback, useRef } from 'react'
+import React, { useEffect, useCallback, useRef } from 'react'
 import { Workbox } from 'workbox-window'
 import { version } from '../../package.json'
 import { useRouter } from 'next/router'
@@ -29,14 +29,6 @@ export const useServiceWorker = () => {
 
     const wb = useRef<Workbox | undefined>()
 
-    wb.current = useMemo(() => {
-        if (process.env.NODE_ENV !== 'production' || !process.browser || !navigator?.serviceWorker) return
-
-        if (wb.current) return wb.current
-
-        return new Workbox('/service-worker.js')
-    }, [])
-
     const handleReloadApp = useCallback(() => {
         router.reload()
     }, [router])
@@ -79,7 +71,10 @@ export const useServiceWorker = () => {
     }, [wb])
 
     useEffect(() => {
-        if (!wb.current) return
+        if (wb.current || process.env.NODE_ENV !== 'production' || !process.browser || !navigator?.serviceWorker) return
+
+        wb.current = wb.current ?? new Workbox('/service-worker.js')
+
         wb.current.addEventListener('installed', handleServiceWorkerInstalled)
         wb.current.addEventListener('activated', handleServiceWorkerActivated)
 

lib/storystore/withStoryStore.tsx

@@ -97,7 +97,7 @@ export const withStoryStore = (PageComponent: NextPage<any>) => {
     const WithStoryStore = ({ cookie, ...pageProps }: any) => {
         const apolloClient = useApolloClient()
 
-        const { data } = useQuery(STORYSTORE_QUERY, { ...queryDefaultOptions, errorPolicy: 'ignore', returnPartialData: true })
+        const { data } = useQuery(STORYSTORE_QUERY, { ...queryDefaultOptions, errorPolicy: 'ignore' })
 
         const [state, dispatch] = useReducer(reducer, {
             ...initialState,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storystore/pwa",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "magentoDependency": ">= 2.3.5",
   "author": "Carlos A. Cabrera @fnhipster",
   "repository": "https://github.com/pmet-public/storystore-pwa.git",

pages/_app.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect } from 'react'
+import { NextPage } from 'next'
+import { AppProps } from 'next/app'
+import { version } from '~/package.json'
+import ReactGA from 'react-ga'
+import Router from 'next/router'
+import { FontStyles } from '~/components/App/FontStyles'
+
+import useServiceWorker from '~/hooks/useServiceWorker'
+import useStoryStore from '~/hooks/useStoryStore'
+
+const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
+    const { settings } = useStoryStore()
+
+    const workbox = useServiceWorker()
+
+    /**
+     * Google Analytics
+     */
+    useEffect(() => {
+        if (process.env.GOOGLE_ANALYTICS) {
+            ReactGA.initialize(process.env.GOOGLE_ANALYTICS)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (process.env.GOOGLE_ANALYTICS) {
+            ReactGA.set({ dimension1: version }) // version
+
+            ReactGA.set({ dimension2: window.location.host }) // release
+
+            if (settings.magentoUrl) {
+                ReactGA.set({ dimension3: new URL(settings.magentoUrl).host }) // endpoint
+            }
+
+            ReactGA.pageview(window.location.pathname)
+        }
+    }, [settings])
+
+    /**
+     * Handle Route changes
+     */
+    const handleRouteChange = useCallback(
+        (url, error?: any) => {
+            if (error) return
+
+            workbox?.messageSW({
+                type: 'CACHE_URLS',
+                payload: {
+                    urlsToCache: [url],
+                },
+            })
+
+            if (process.env.GOOGLE_ANALYTICS) {
+                ReactGA.pageview(url)
+            }
+        },
+        [workbox]
+    )
+
+    useEffect(() => {
+        Router.events.on('routeChangeComplete', handleRouteChange)
+
+        return () => {
+            Router.events.off('routeChangeComplete', handleRouteChange)
+        }
+    }, [handleRouteChange])
+
+    return (
+        <React.Fragment>
+            <Component {...pageProps} />
+            <FontStyles />
+        </React.Fragment>
+    )
+}
+
+export default MyApp