@graphcommerce/next-ui 3.11.4 → 3.11.5

package/AppShell/AppShellHeader/index.tsx

@@ -1,4 +1,10 @@
-import { useHistoryLink, usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import {
+  useHistoryLink,
+  usePageContext,
+  usePageRouter,
+  usePrevUp,
+  useUp,
+} from '@graphcommerce/framer-next-pages'
 import { Fab, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, MotionValue, useMotionValue, useTransform } from 'framer-motion'
@@ -6,7 +12,6 @@ import PageLink from 'next/link'
 import React, { useCallback, useEffect } from 'react'
 import Button from '../../Button'
 import { UseStyles } from '../../Styles'
-import SvgImage from '../../SvgImage'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconClose } from '../../icons'
 import useAppShellHeaderContext from './useAppShellHeaderContext'
@@ -23,8 +28,6 @@ export type AppShellHeaderProps = {
   scrolled?: boolean
   dragIndicator?: React.ReactNode
   additional?: React.ReactNode
-  backFallbackHref?: string | null
-  backFallbackTitle?: string | null
   fill?: 'both' | 'mobile-only'
   sheet?: boolean
 } & UseStyles<typeof useStyles>
@@ -222,15 +225,15 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
     additional,
     dragIndicator,
     scrolled,
-    backFallbackHref,
-    backFallbackTitle,
     fill = 'both',
     sheet,
   } = props
+
   const router = usePageRouter()
   const { closeSteps, backSteps } = usePageContext()
   const classes = useStyles(props)
-
+  const up = useUp()
+  const prevUp = usePrevUp()
   const { titleRef, contentHeaderRef } = useAppShellHeaderContext()
 
   const noChildren = typeof children === 'undefined' || !children
@@ -242,7 +245,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   const titleHeight = useMotionValue<number>(100)
 
   const { href: historyHref, onClick: historyOnClick } = useHistoryLink({
-    href: backFallbackHref ?? '',
+    href: up?.href ?? '',
   })
 
   const setOffset = useCallback(
@@ -289,7 +292,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   }, [contentHeaderRef, sheetHeaderHeight])
 
   const opacityTitle = useTransform(
-    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue[],
+    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue<number | string>[],
     ([scrollYV, sheetHeaderHeightV, titleOffsetV, titleHeigthV]: number[]) =>
       Math.min(
         Math.max(
@@ -326,21 +329,25 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
     ))
 
   const backIcon = <SvgImageSimple src={iconChevronLeft} />
-  let back = backSteps > 0 && (
-    <Button
-      onClick={() => router.back()}
-      variant='pill-link'
-      className={classes.backButton}
-      startIcon={backIcon}
-    >
-      {historyOnClick ? backFallbackTitle : 'Back'}
-    </Button>
+
+  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+  let back = canClickBack && (
+    <PageLink href={historyHref} passHref>
+      <Button
+        onClick={historyOnClick}
+        variant='pill-link'
+        className={classes.backButton}
+        startIcon={backIcon}
+      >
+        {historyOnClick ? up?.title : 'Back'}
+      </Button>
+    </PageLink>
   )
-  if (!back && backFallbackHref) {
+  if (!canClickBack && up?.href) {
     back = (
-      <PageLink href={backFallbackHref} passHref>
+      <PageLink href={up?.href} passHref>
         <Button variant='pill-link' className={classes.backButton} startIcon={backIcon}>
-          {backFallbackTitle ?? 'Back'}
+          {up?.title ?? 'Back'}
         </Button>
       </PageLink>
     )

package/AppShell/FullPageShellBase.tsx

@@ -37,8 +37,6 @@ export type FullPageShellBaseProps = {
   header: React.ReactNode
   footer: React.ReactNode
   children?: React.ReactNode
-  backFallbackHref?: string | null
-  backFallbackTitle?: string | null
 } & UseStyles<typeof useStyles> &
   PageLayoutBaseProps
 

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.11.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.4...@graphcommerce/next-ui@3.11.5) (2021-11-02)
+
+
+### Bug Fixes
+
+* back button loop ([4d901e6](https://github.com/ho-nl/m2-pwa/commit/4d901e662579d1cfb97c823d581e60d687908b1a))
+* break back button loop ([be2e5ae](https://github.com/ho-nl/m2-pwa/commit/be2e5aefa1e409a97c1ebf94173f4da7ea25386b))
+* **framer-next-pages:** prevent back button loop when previous page is the up page of the previous page ([ec829c8](https://github.com/ho-nl/m2-pwa/commit/ec829c8eee2a3744747a7572b32299879c780d45))
+* **framer-next-pages:** prevent back button loop when previous page is the up page of the previous page ([cbdde83](https://github.com/ho-nl/m2-pwa/commit/cbdde83790337bdf4c5f03c907ca6e6e02792e70))
+* **types:** apollo state props ‘up’ can be null ([9377d7f](https://github.com/ho-nl/m2-pwa/commit/9377d7fd9a080a8a2b8c7127961d64dc66a5729a))
+* **types:** make apollo up state optional ([eba9683](https://github.com/ho-nl/m2-pwa/commit/eba96832e372adaeaa2ed71622c88f9dc95071c5))
+
+
+
+
+
 ## [3.11.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.11.2...@graphcommerce/next-ui@3.11.3) (2021-11-01)
 
 

package/Page/types.ts

@@ -1,16 +1,17 @@
 import { ParsedUrlQuery } from 'querystring'
 import { NormalizedCacheObject } from '@apollo/client'
+import { UpPage } from '@graphcommerce/framer-next-pages/types'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
 import { AppProps as NextAppProps } from 'next/app'
 
 type AnyObj = Record<string, unknown>
 
-type ApolloStateProps = { apolloState: NormalizedCacheObject }
+type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
 
 export type GetStaticProps<
   PL extends AnyObj,
   P extends AnyObj = AnyObj,
-  Q extends ParsedUrlQuery = ParsedUrlQuery
+  Q extends ParsedUrlQuery = ParsedUrlQuery,
 > = GetStaticPropsNext<P & Omit<PL, 'children'> & ApolloStateProps, Q>
 
 /** Used by _app */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.11.4",
+  "version": "3.11.5",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.2",
+    "@graphcommerce/framer-next-pages": "^2.107.3",
     "@graphcommerce/framer-scroller": "^0.4.3",
     "@graphcommerce/framer-sheet": "^2.105.15",
     "@graphcommerce/framer-utils": "^2.103.13",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "b6321b8f479a0ef6e4b1b543702158d964bbeac6"
+  "gitHead": "62ee387abaaf2dbd3b9af99597d3d4592c30ab64"
 }