Skip to content

Commit e1dd7e9

Browse files
ryanmlryanml
authored
Merge pull request #5445 from brave/widget-stack-data-migration
Migrates stack widget state to list format
2 parents 0ceaf7e + 8b88508 commit e1dd7e9

File tree

9 files changed

+366
-65
lines changed

9 files changed

+366
-65
lines changed

‎components/brave_new_tab_ui/actions/new_tab_actions.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,12 @@ export const onPromotionFinish = (result: NewTab.RewardsResult, promotion: NewTa
8282
promotion
8383
})
8484

85-
export const setCurrentStackWidget = (widgetId: NewTab.StackWidget) => action(types.SET_CURRENT_STACK_WIDGET, {
86-
widgetId
85+
export const removeStackWidget = (widget: NewTab.StackWidget) => action(types.REMOVE_STACK_WIDGET, {
86+
widget
87+
})
88+
89+
export const setForegroundStackWidget = (widget: NewTab.StackWidget) => action(types.SET_FOREGROUND_STACK_WIDGET, {
90+
widget
8791
})
8892

8993
export const onBinanceUserTLD = (userTLD: NewTab.BinanceTLD) => action(types.ON_BINANCE_USER_TLD, {

‎components/brave_new_tab_ui/apiEventsToStore.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ function binanceInitData () {
7272
getBinanceBlackList()
7373
.then(({ isSupportedRegion, onlyAnonWallet }) => {
7474
if (onlyAnonWallet || !isSupportedRegion) {
75-
getActions().setCurrentStackWidget('rewards')
75+
getActions().removeStackWidget('binance')
7676
}
7777
getActions().setOnlyAnonWallet(onlyAnonWallet)
7878
getActions().setBinanceSupported(isSupportedRegion && !onlyAnonWallet)

‎components/brave_new_tab_ui/constants/new_tab_types.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export const enum types {
2424
SET_INITIAL_REWARDS_DATA = '@@newtab/SET_INITIAL_REWARDS_DATA',
2525
SET_PRE_INITIAL_REWARDS_DATA = '@@newtab/SET_PRE_INITIAL_REWARDS_DATA',
2626
ON_WIDGET_POSITION_CHANGED = '@@newtab/ON_WIDGET_POSITION_CHANGED',
27-
SET_CURRENT_STACK_WIDGET = '@@newtab/SET_CURRENT_STACK_WIDGET',
2827
SET_ONLY_ANON_WALLET = '@@newtab/SET_ONLY_ANON_WALLET',
2928
// Binance Widget
3029
ON_BINANCE_USER_TLD = '@@newtab/ON_BINANCE_USER_TLD',
@@ -44,7 +43,9 @@ export const enum types {
4443
ON_CONVERTABLE_ASSETS = '@@newtab/ON_CONVERTABLE_ASSETS',
4544
SET_DISCONNECT_IN_PROGRESS = '@@newtab/SET_DISCONNECT_IN_PROGRESS',
4645
SET_AUTH_INVALID = '@@newtab/SET_AUTH_INVALID',
47-
SET_SELECTED_VIEW = '@@newtab/SET_SELECTED_VIEW'
46+
SET_SELECTED_VIEW = '@@newtab/SET_SELECTED_VIEW',
47+
REMOVE_STACK_WIDGET = '@@newtab/REMOVE_STACK_WIDGET',
48+
SET_FOREGROUND_STACK_WIDGET = '@@newtab/SET_FOREGROUND_STACK_WIDGET'
4849
}
4950

5051
export type DismissBrandedWallpaperNotificationPayload = {

‎components/brave_new_tab_ui/containers/newTab/index.tsx

+39-53
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,6 @@ class NewTabPage extends React.Component<Props, State> {
9999
if (GetShouldShowBrandedWallpaperNotification(this.props)) {
100100
this.trackBrandedWallpaperNotificationAutoDismiss()
101101
}
102-
103-
// Migratory check in the event that rewards is off
104-
// when receiving the upgrade with the Binance widget.
105-
const { showRewards } = this.props.newTabData
106-
if (!showRewards) {
107-
this.props.actions.setCurrentStackWidget('binance')
108-
}
109102
}
110103

111104
componentDidUpdate (prevProps: Props) {
@@ -136,13 +129,13 @@ class NewTabPage extends React.Component<Props, State> {
136129
const { showRewards, showBinance } = this.props.newTabData
137130

138131
if (!oldShowRewards && showRewards) {
139-
this.props.actions.setCurrentStackWidget('rewards')
132+
this.props.actions.setForegroundStackWidget('rewards')
140133
} else if (!oldShowBinance && showBinance) {
141-
this.props.actions.setCurrentStackWidget('binance')
134+
this.props.actions.setForegroundStackWidget('binance')
142135
} else if (oldShowRewards && !showRewards) {
143-
this.props.actions.setCurrentStackWidget('binance')
136+
this.props.actions.removeStackWidget('rewards')
144137
} else if (oldShowBinance && !showBinance) {
145-
this.props.actions.setCurrentStackWidget('rewards')
138+
this.props.actions.removeStackWidget('binance')
146139
}
147140
}
148141

@@ -207,36 +200,24 @@ class NewTabPage extends React.Component<Props, State> {
207200
}
208201

209202
toggleShowRewards = () => {
210-
const {
211-
currentStackWidget,
212-
showBinance,
213-
showRewards
214-
} = this.props.newTabData
215-
216-
if (currentStackWidget === 'rewards' && showRewards) {
217-
this.props.actions.setCurrentStackWidget('binance')
218-
} else if (!showBinance) {
219-
this.props.actions.setCurrentStackWidget('rewards')
220-
} else if (!showRewards) {
221-
this.props.actions.setCurrentStackWidget('rewards')
203+
const { showRewards } = this.props.newTabData
204+
205+
if (showRewards) {
206+
this.removeStackWidget('rewards')
207+
} else {
208+
this.setForegroundStackWidget('rewards')
222209
}
223210

224211
this.props.saveShowRewards(!showRewards)
225212
}
226213

227214
toggleShowBinance = () => {
228-
const {
229-
currentStackWidget,
230-
showBinance,
231-
showRewards
232-
} = this.props.newTabData
233-
234-
if (currentStackWidget === 'binance' && showBinance) {
235-
this.props.actions.setCurrentStackWidget('rewards')
236-
} else if (!showRewards) {
237-
this.props.actions.setCurrentStackWidget('binance')
238-
} else if (!showBinance) {
239-
this.props.actions.setCurrentStackWidget('binance')
215+
const { showBinance } = this.props.newTabData
216+
217+
if (showBinance) {
218+
this.removeStackWidget('binance')
219+
} else {
220+
this.setForegroundStackWidget('binance')
240221
}
241222

242223
this.props.saveShowBinance(!showBinance)
@@ -339,8 +320,12 @@ class NewTabPage extends React.Component<Props, State> {
339320
this.setState({ showSettingsMenu: !this.state.showSettingsMenu })
340321
}
341322

342-
toggleStackWidget = (widgetId: NewTab.StackWidget) => {
343-
this.props.actions.setCurrentStackWidget(widgetId)
323+
setForegroundStackWidget = (widget: NewTab.StackWidget) => {
324+
this.props.actions.setForegroundStackWidget(widget)
325+
}
326+
327+
removeStackWidget = (widget: NewTab.StackWidget) => {
328+
this.props.actions.removeStackWidget(widget)
344329
}
345330

346331
setInitialAmount = (amount: string) => {
@@ -451,30 +436,31 @@ class NewTabPage extends React.Component<Props, State> {
451436
}
452437

453438
getCryptoContent () {
454-
const { currentStackWidget } = this.props.newTabData
439+
const { widgetStackOrder } = this.props.newTabData
440+
const renderLookup = {
441+
'rewards': this.renderRewardsWidget.bind(this),
442+
'binance': this.renderBinanceWidget.bind(this)
443+
}
455444

456445
return (
457446
<>
458-
{
459-
currentStackWidget === 'rewards'
460-
? <>
461-
{this.renderBinanceWidget(false)}
462-
{this.renderRewardsWidget(true)}
463-
</>
464-
: <>
465-
{this.renderRewardsWidget(false)}
466-
{this.renderBinanceWidget(true)}
467-
</>
468-
}
447+
{widgetStackOrder.map((widget: NewTab.StackWidget, i: number) => {
448+
const isForeground = i === widgetStackOrder.length - 1
449+
return (
450+
<div key={`widget-${widget}`}>
451+
{renderLookup[widget](isForeground)}
452+
</div>
453+
)
454+
})}
469455
</>
470456
)
471457
}
472458

473459
renderCryptoContent () {
474460
const { newTabData } = this.props
475-
const { showRewards, showBinance } = newTabData
461+
const { widgetStackOrder } = newTabData
476462

477-
if (!showRewards && !showBinance) {
463+
if (!widgetStackOrder.length) {
478464
return null
479465
}
480466

@@ -512,7 +498,7 @@ class NewTabPage extends React.Component<Props, State> {
512498
preventFocus={false}
513499
hideWidget={this.toggleShowRewards}
514500
showContent={showContent}
515-
onShowContent={this.toggleStackWidget.bind(this, 'rewards')}
501+
onShowContent={this.setForegroundStackWidget.bind(this, 'rewards')}
516502
onCreateWallet={this.createWallet}
517503
onEnableAds={this.enableAds}
518504
onEnableRewards={this.enableRewards}
@@ -561,7 +547,7 @@ class NewTabPage extends React.Component<Props, State> {
561547
onValidAuthCode={this.onValidAuthCode}
562548
onBuyCrypto={this.buyCrypto}
563549
onBinanceUserTLD={this.onBinanceUserTLD}
564-
onShowContent={this.toggleStackWidget.bind(this, 'binance')}
550+
onShowContent={this.setForegroundStackWidget.bind(this, 'binance')}
565551
onSetInitialAmount={this.setInitialAmount}
566552
onSetInitialAsset={this.setInitialAsset}
567553
onSetInitialFiat={this.setInitialFiat}

‎components/brave_new_tab_ui/reducers/new_tab_reducer.ts

+38-3
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,11 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
7575
}
7676
}
7777
})
78+
79+
if (state.currentStackWidget) {
80+
state = storage.migrateStackWidgetSettings(state)
81+
}
82+
7883
break
7984

8085
case types.NEW_TAB_STATS_UPDATED:
@@ -309,12 +314,42 @@ export const newTabReducer: Reducer<NewTab.State | undefined> = (state: NewTab.S
309314
}
310315
break
311316

312-
case types.SET_CURRENT_STACK_WIDGET:
313-
const widgetId: NewTab.StackWidget = payload.widgetId
317+
case types.REMOVE_STACK_WIDGET:
318+
const widget: NewTab.StackWidget = payload.widget
319+
let { removedStackWidgets, widgetStackOrder } = state
320+
321+
if (!widgetStackOrder.length) {
322+
break
323+
}
324+
325+
widgetStackOrder = widgetStackOrder.filter((curWidget: NewTab.StackWidget) => {
326+
return curWidget !== widget
327+
})
328+
329+
if (!removedStackWidgets.includes(widget)) {
330+
removedStackWidgets.push(widget)
331+
}
332+
333+
state = {
334+
...state,
335+
removedStackWidgets,
336+
widgetStackOrder
337+
}
338+
break
339+
340+
case types.SET_FOREGROUND_STACK_WIDGET:
341+
const frontWidget: NewTab.StackWidget = payload.widget
342+
let newWidgetStackOrder = state.widgetStackOrder
343+
344+
newWidgetStackOrder = newWidgetStackOrder.filter((widget: NewTab.StackWidget) => {
345+
return widget !== frontWidget
346+
})
347+
348+
newWidgetStackOrder.push(frontWidget)
314349

315350
state = {
316351
...state,
317-
currentStackWidget: widgetId
352+
widgetStackOrder: newWidgetStackOrder
318353
}
319354
break
320355

‎components/brave_new_tab_ui/storage/new_tab_storage.ts

+72-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@ export const defaultState: NewTab.State = {
5050
walletCreateFailed: false,
5151
walletCorrupted: false
5252
},
53-
currentStackWidget: 'rewards',
53+
currentStackWidget: '',
54+
removedStackWidgets: [],
55+
// Order is ascending, with last entry being in the foreground
56+
widgetStackOrder: ['binance', 'rewards'],
5457
binanceState: {
5558
userTLD: 'com',
5659
initialFiat: 'USD',
@@ -85,6 +88,72 @@ if (chrome.extension.inIncognitoContext) {
8588
defaultState.isQwant = window.loadTimeData.getBoolean('isQwant')
8689
}
8790

91+
// For users upgrading to the new list based widget stack state,
92+
// a list in the current format will need to be generated based on their
93+
// previous configuration.
94+
const getMigratedWidgetOrder = (state: NewTab.State) => {
95+
const {
96+
showRewards,
97+
showBinance,
98+
currentStackWidget
99+
} = state
100+
101+
if (!showRewards && !showBinance) {
102+
return {
103+
widgetStackOrder: [],
104+
removedStackWidgets: ['rewards', 'binance']
105+
}
106+
}
107+
108+
if (showRewards && !showBinance) {
109+
return {
110+
widgetStackOrder: ['rewards'],
111+
removedStackWidgets: ['binance']
112+
}
113+
}
114+
115+
if (!showRewards && showBinance) {
116+
return {
117+
widgetStackOrder: ['binance'],
118+
removedStackWidgets: ['rewards']
119+
}
120+
}
121+
122+
const widgetStackOrder = []
123+
const nonCurrentWidget = currentStackWidget === 'rewards'
124+
? 'binance'
125+
: 'rewards'
126+
127+
widgetStackOrder.push(currentStackWidget)
128+
widgetStackOrder.unshift(nonCurrentWidget)
129+
130+
return {
131+
widgetStackOrder,
132+
removedStackWidgets: []
133+
}
134+
}
135+
136+
export const migrateStackWidgetSettings = (state: NewTab.State) => {
137+
// Migrating to the new stack widget data format
138+
const { widgetStackOrder, removedStackWidgets } = getMigratedWidgetOrder(state)
139+
state.widgetStackOrder = widgetStackOrder as NewTab.StackWidget[]
140+
state.removedStackWidgets = removedStackWidgets as NewTab.StackWidget[]
141+
state.currentStackWidget = ''
142+
143+
// Ensure any new stack widgets introduced are put behind
144+
// the others, and not re-added unecessarily if removed
145+
// at one point.
146+
const defaultWidgets = defaultState.widgetStackOrder
147+
defaultWidgets.map((widget: NewTab.StackWidget) => {
148+
if (!state.widgetStackOrder.includes(widget) &&
149+
!state.removedStackWidgets.includes(widget)) {
150+
state.widgetStackOrder.unshift(widget)
151+
}
152+
})
153+
154+
return state
155+
}
156+
88157
const cleanData = (state: NewTab.State) => {
89158
// We need to disable linter as we defined in d.ts that this values are number,
90159
// but we need this check to covert from old version to a new one
@@ -127,7 +196,8 @@ export const debouncedSave = debounce<NewTab.State>((data: NewTab.State) => {
127196
showEmptyPage: data.showEmptyPage,
128197
rewardsState: data.rewardsState,
129198
binanceState: data.binanceState,
130-
currentStackWidget: data.currentStackWidget
199+
removedStackWidgets: data.removedStackWidgets,
200+
widgetStackOrder: data.widgetStackOrder
131201
}
132202
window.localStorage.setItem(keyName, JSON.stringify(dataToSave))
133203
}

‎components/definitions/newTab.d.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ declare namespace NewTab {
7272
url: string
7373
}
7474

75-
export type StackWidget = 'rewards' | 'binance'
75+
export type StackWidget = 'rewards' | 'binance' | ''
7676

7777
export interface LegacyState {
7878
pinnedTopSites: Site[]
@@ -92,13 +92,14 @@ declare namespace NewTab {
9292

9393
export interface RewardsState {
9494
rewardsState: RewardsWidgetState
95-
currentStackWidget: StackWidget
9695
}
9796

9897
export interface PersistentState {
9998
showEmptyPage: boolean
10099
rewardsState: RewardsWidgetState
101100
currentStackWidget: StackWidget
101+
removedStackWidgets: StackWidget[]
102+
widgetStackOrder: StackWidget[]
102103
binanceState: BinanceWidgetState
103104
}
104105

0 commit comments

Comments
 (0)