|
| 1 | +import { useEffect, useMemo, useState } from '@wordpress/element'; |
| 2 | +import { buildQueryString } from '@wordpress/url'; |
| 3 | +import { translate } from 'i18n-calypso'; |
| 4 | +import { useSelector } from 'calypso/state'; |
| 5 | +import { getSiteSlug } from 'calypso/state/sites/selectors'; |
| 6 | +import { getSelectedSiteId } from 'calypso/state/ui/selectors'; |
| 7 | + |
| 8 | +type QueryArgs = Record< string, string | null >; |
| 9 | + |
| 10 | +const STORAGE_KEY = 'jp-stats-navigation'; |
| 11 | + |
| 12 | +const possibleBackLinks: { [ key: string ]: string | null } = { |
| 13 | + traffic: '/stats/{period}/', |
| 14 | + insights: '/stats/insights/', |
| 15 | + store: '/stats/store/', |
| 16 | + ads: '/stats/ads/', |
| 17 | + subscribers: '/stats/subscribers/{period}/', |
| 18 | + posts: '/stats/{period}/posts/', |
| 19 | + authors: '/stats/{period}/authors/', |
| 20 | + postDetails: null, // Last item in the history, the text is not displayed anywhere but this is used to track the item in history stack. |
| 21 | +}; |
| 22 | + |
| 23 | +const SUPPORTED_QUERY_PARAMS: string[] = [ |
| 24 | + 'startDate', |
| 25 | + 'endDate', |
| 26 | + 'num', |
| 27 | + 'summarize', |
| 28 | + 'chartStart', |
| 29 | + 'chartEnd', |
| 30 | + 'shortcut', |
| 31 | +]; |
| 32 | + |
| 33 | +const defaultLastScreen = 'traffic'; |
| 34 | + |
| 35 | +const getFilteredQueryParams = ( queryParams: QueryArgs ): QueryArgs => { |
| 36 | + return Object.fromEntries( |
| 37 | + Object.entries( queryParams ).filter( ( [ key ] ) => SUPPORTED_QUERY_PARAMS.includes( key ) ) |
| 38 | + ); |
| 39 | +}; |
| 40 | + |
| 41 | +/** |
| 42 | + * Hook for managing stats navigation state |
| 43 | + * Supports reading/writing from sessionStorage and initializing from query params |
| 44 | + * @returns { { text: string; url: string | null } } |
| 45 | + */ |
| 46 | +export const useStatsNavigationHistory = (): { text: string; url: string | null } => { |
| 47 | + const localizedTabNames: { [ key: string ]: string | null } = useMemo( |
| 48 | + () => ( { |
| 49 | + traffic: translate( 'Traffic' ), |
| 50 | + insights: translate( 'Insights' ), |
| 51 | + store: translate( 'Store' ), |
| 52 | + ads: translate( 'Ads' ), |
| 53 | + subscribers: translate( 'Subscribers' ), |
| 54 | + posts: translate( 'Posts & pages' ), |
| 55 | + authors: translate( 'Authors' ), |
| 56 | + postDetails: null, |
| 57 | + } ), |
| 58 | + [] |
| 59 | + ); |
| 60 | + |
| 61 | + const [ lastScreen, setLastScreen ] = useState< { |
| 62 | + screen: string; |
| 63 | + queryParams: QueryArgs; |
| 64 | + period: string | null; |
| 65 | + } >( { |
| 66 | + screen: defaultLastScreen, |
| 67 | + queryParams: {}, |
| 68 | + period: 'day', |
| 69 | + } ); |
| 70 | + const siteId = useSelector( getSelectedSiteId ); |
| 71 | + const siteSlug = useSelector( ( state ) => getSiteSlug( state, siteId ) ); |
| 72 | + |
| 73 | + useEffect( () => { |
| 74 | + try { |
| 75 | + const navState = JSON.parse( sessionStorage.getItem( STORAGE_KEY ) || '[]' ); |
| 76 | + |
| 77 | + // Select the second last item from the history stack as the back link. |
| 78 | + // The last item in the stack if the current screen. |
| 79 | + const lastItem = |
| 80 | + Array.isArray( navState ) && navState.length >= 2 ? navState[ navState.length - 2 ] : {}; |
| 81 | + |
| 82 | + // Make sure it's array and select last item |
| 83 | + if ( lastItem && lastItem.screen ) { |
| 84 | + setLastScreen( lastItem ); |
| 85 | + } else { |
| 86 | + setLastScreen( { |
| 87 | + screen: defaultLastScreen, |
| 88 | + queryParams: {}, |
| 89 | + period: 'day', |
| 90 | + } ); |
| 91 | + } |
| 92 | + } catch ( e ) {} |
| 93 | + }, [] ); |
| 94 | + |
| 95 | + const backLink = useMemo( () => { |
| 96 | + if ( ! siteSlug ) { |
| 97 | + return null; |
| 98 | + } |
| 99 | + |
| 100 | + let backLink = possibleBackLinks[ lastScreen.screen ]; |
| 101 | + |
| 102 | + if ( ! backLink ) { |
| 103 | + return null; |
| 104 | + } |
| 105 | + |
| 106 | + if ( backLink.includes( '{period}' ) && lastScreen.period ) { |
| 107 | + backLink = backLink.replace( '{period}', lastScreen.period ); |
| 108 | + } |
| 109 | + |
| 110 | + const queryParams = buildQueryString( getFilteredQueryParams( lastScreen.queryParams ) ); |
| 111 | + |
| 112 | + return backLink + siteSlug + ( queryParams ? '?' + queryParams : '' ); |
| 113 | + }, [ lastScreen, siteSlug ] ); |
| 114 | + |
| 115 | + return { |
| 116 | + text: localizedTabNames[ lastScreen.screen ] || '', |
| 117 | + url: backLink, |
| 118 | + }; |
| 119 | +}; |
| 120 | + |
| 121 | +/** |
| 122 | + * Utility to record the current screen for back navigation |
| 123 | + * @param {string} screen - Current screen identifier |
| 124 | + * @param {Object} args - Arguments for the screen |
| 125 | + * @param {Object} args.queryParams - Query parameters for the screen |
| 126 | + * @param {string} args.period - Period for the screen |
| 127 | + * @param {boolean} reset - Whether to reset the navigation history |
| 128 | + */ |
| 129 | +export const recordCurrentScreen = ( |
| 130 | + screen: string, |
| 131 | + args: { |
| 132 | + queryParams: QueryArgs; |
| 133 | + period: string | null; |
| 134 | + } = { |
| 135 | + queryParams: {}, |
| 136 | + period: null, |
| 137 | + }, |
| 138 | + reset: boolean = false |
| 139 | +): void => { |
| 140 | + try { |
| 141 | + if ( ! screen || ! ( screen in possibleBackLinks ) ) { |
| 142 | + return; |
| 143 | + } |
| 144 | + |
| 145 | + const filteredQueryParams = getFilteredQueryParams( args.queryParams ); |
| 146 | + const currentEntry = { |
| 147 | + screen, |
| 148 | + queryParams: filteredQueryParams, |
| 149 | + period: args.period, |
| 150 | + }; |
| 151 | + |
| 152 | + // Get current navigation history array |
| 153 | + let navigationHistory = reset |
| 154 | + ? [] |
| 155 | + : JSON.parse( sessionStorage.getItem( STORAGE_KEY ) || '[]' ); |
| 156 | + |
| 157 | + // Ensure navigationHistory is an array |
| 158 | + if ( ! Array.isArray( navigationHistory ) ) { |
| 159 | + navigationHistory = []; |
| 160 | + } |
| 161 | + |
| 162 | + // If the history already has the same screen, remove it |
| 163 | + if ( |
| 164 | + navigationHistory.some( |
| 165 | + ( entry: { screen: string } ) => entry.screen === currentEntry.screen |
| 166 | + ) |
| 167 | + ) { |
| 168 | + navigationHistory = navigationHistory.filter( |
| 169 | + ( entry: { screen: string } ) => entry.screen !== currentEntry.screen |
| 170 | + ); |
| 171 | + } |
| 172 | + |
| 173 | + navigationHistory.push( currentEntry ); |
| 174 | + sessionStorage.setItem( STORAGE_KEY, JSON.stringify( navigationHistory ) ); |
| 175 | + } catch ( e ) {} |
| 176 | +}; |
| 177 | + |
| 178 | +/** |
| 179 | + * Utility to pop the current screen from the navigation history |
| 180 | + */ |
| 181 | +export const popCurrentScreenFromHistory = (): void => { |
| 182 | + try { |
| 183 | + const navigationHistory = JSON.parse( sessionStorage.getItem( STORAGE_KEY ) || '[]' ); |
| 184 | + navigationHistory.pop(); |
| 185 | + sessionStorage.setItem( STORAGE_KEY, JSON.stringify( navigationHistory ) ); |
| 186 | + } catch ( e ) {} |
| 187 | +}; |
0 commit comments