Skip to content

Commit 10e90d8

Browse files
sanne-sansanne-san
committed
Switch to MoreLinkState enum for better state management
1 parent add6ac6 commit 10e90d8

File tree

8 files changed

+48
-53
lines changed

8 files changed

+48
-53
lines changed

‎assets/js/dashboard/stats/behaviours/index.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
1919
import { ReportLayout } from '../reports/report-layout'
2020
import { ReportHeader } from '../reports/report-header'
2121
import MoreLink from '../more-link'
22+
import { MoreLinkState } from '../more-link-state'
2223
import { Pill } from '../../components/pill'
2324
import * as api from '../../api'
2425
import * as url from '../../util/url'
@@ -104,8 +105,7 @@ export default function Behaviours({ importedDataInView }) {
104105
useState(false)
105106

106107
const [skipImportedReason, setSkipImportedReason] = useState(null)
107-
const [moreLinkVisible, setMoreLinkVisible] = useState(true)
108-
const [moreLinkClickable, setMoreLinkClickable] = useState(false)
108+
const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
109109

110110
const onGoalFilterClick = useCallback((e) => {
111111
const goalName = e.target.innerHTML
@@ -140,11 +140,10 @@ export default function Behaviours({ importedDataInView }) {
140140

141141
useEffect(() => setLoading(true), [query, mode])
142142
useEffect(() => {
143-
setMoreLinkClickable(false)
144143
if (mode === PROPS && !selectedPropKey) {
145-
setMoreLinkVisible(false)
144+
setMoreLinkState(MoreLinkState.HIDDEN)
146145
} else {
147-
setMoreLinkVisible(true)
146+
setMoreLinkState(MoreLinkState.LOADING)
148147
}
149148
}, [query, mode, selectedPropKey])
150149

@@ -265,9 +264,9 @@ export default function Behaviours({ importedDataInView }) {
265264
setLoading(false)
266265
setSkipImportedReason(apiResponse.skip_imported_reason)
267266
if (apiResponse.results && apiResponse.results.length > 0) {
268-
setMoreLinkClickable(true)
267+
setMoreLinkState(MoreLinkState.READY)
269268
} else {
270-
setMoreLinkVisible(false)
269+
setMoreLinkState(MoreLinkState.HIDDEN)
271270
}
272271
}
273272

@@ -577,8 +576,7 @@ export default function Behaviours({ importedDataInView }) {
577576
{renderImportedQueryUnsupportedWarning()}
578577
</div>
579578
<MoreLink
580-
visible={moreLinkVisible}
581-
clickable={moreLinkClickable}
579+
state={moreLinkState}
582580
linkProps={moreLinkProps()}
583581
/>
584582
</ReportHeader>

‎assets/js/dashboard/stats/devices/index.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
screenSizesRoute
2424
} from '../../router'
2525
import MoreLink from '../more-link'
26+
import { MoreLinkState } from '../more-link-state'
2627

2728
// Icons copied from https://github.com/alrra/browser-logos
2829
const BROWSER_ICONS = {
@@ -425,8 +426,7 @@ export default function Devices() {
425426
const [mode, setMode] = useState(storedTab || 'browser')
426427
const [loading, setLoading] = useState(true)
427428
const [skipImportedReason, setSkipImportedReason] = useState(null)
428-
const [moreLinkVisible, setMoreLinkVisible] = useState(true)
429-
const [moreLinkClickable, setMoreLinkClickable] = useState(false)
429+
const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
430430

431431
function switchTab(mode) {
432432
storage.setItem(tabKey, mode)
@@ -437,16 +437,15 @@ export default function Devices() {
437437
setLoading(false)
438438
setSkipImportedReason(apiResponse.skip_imported_reason)
439439
if (apiResponse.results && apiResponse.results.length > 0) {
440-
setMoreLinkClickable(true)
440+
setMoreLinkState(MoreLinkState.READY)
441441
} else {
442-
setMoreLinkVisible(false)
442+
setMoreLinkState(MoreLinkState.HIDDEN)
443443
}
444444
}
445445

446446
useEffect(() => {
447447
setLoading(true)
448-
setMoreLinkVisible(true)
449-
setMoreLinkClickable(false)
448+
setMoreLinkState(MoreLinkState.LOADING)
450449
}, [query, mode])
451450

452451
function moreLinkProps() {
@@ -545,8 +544,7 @@ export default function Devices() {
545544
/>
546545
</div>
547546
<MoreLink
548-
visible={moreLinkVisible}
549-
clickable={moreLinkClickable}
547+
state={moreLinkState}
550548
linkProps={moreLinkProps()}
551549
/>
552550
</ReportHeader>

‎assets/js/dashboard/stats/more-link-state.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const MoreLinkState = {
2+
HIDDEN: 'hidden',
3+
LOADING: 'loading',
4+
READY: 'ready'
5+
}
6+

‎assets/js/dashboard/stats/more-link.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useRef, useEffect } from 'react'
22
import { AppNavigationLink } from '../navigation/use-app-navigate'
33
import { Tooltip } from '../util/tooltip'
4+
import { MoreLinkState } from './more-link-state'
45

56
function detailsIcon() {
67
return (
@@ -19,7 +20,7 @@ function detailsIcon() {
1920
)
2021
}
2122

22-
export default function MoreLink({ linkProps, visible, clickable, onClick = undefined }) {
23+
export default function MoreLink({ linkProps, state, onClick = undefined }) {
2324
const portalRef = useRef(null)
2425

2526
useEffect(() => {
@@ -32,11 +33,11 @@ export default function MoreLink({ linkProps, visible, clickable, onClick = unde
3233
'flex mt-px text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-150'
3334
const icon = detailsIcon()
3435

35-
if (!visible) {
36+
if (state === MoreLinkState.HIDDEN) {
3637
return null
3738
}
3839

39-
if (!clickable || !linkProps) {
40+
if (state === MoreLinkState.LOADING || !linkProps) {
4041
return (
4142
<Tooltip info="View details" containerRef={portalRef}>
4243
<div className={baseClassName}>{icon}</div>

‎assets/js/dashboard/stats/pages/index.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ReportLayout } from '../reports/report-layout'
1414
import { ReportHeader } from '../reports/report-header'
1515
import { TabButton, TabWrapper } from '../../components/tabs'
1616
import MoreLink from '../more-link'
17+
import { MoreLinkState } from '../more-link-state'
1718

1819
function EntryPages({ afterFetchData }) {
1920
const { query } = useQueryContext()
@@ -164,8 +165,7 @@ export default function Pages() {
164165
const [mode, setMode] = useState(storedTab || 'pages')
165166
const [loading, setLoading] = useState(true)
166167
const [skipImportedReason, setSkipImportedReason] = useState(null)
167-
const [moreLinkVisible, setMoreLinkVisible] = useState(true)
168-
const [moreLinkClickable, setMoreLinkClickable] = useState(false)
168+
const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
169169

170170
function switchTab(mode) {
171171
storage.setItem(tabKey, mode)
@@ -176,16 +176,15 @@ export default function Pages() {
176176
setLoading(false)
177177
setSkipImportedReason(apiResponse.skip_imported_reason)
178178
if (apiResponse.results && apiResponse.results.length > 0) {
179-
setMoreLinkClickable(true)
179+
setMoreLinkState(MoreLinkState.READY)
180180
} else {
181-
setMoreLinkVisible(false)
181+
setMoreLinkState(MoreLinkState.HIDDEN)
182182
}
183183
}
184184

185185
useEffect(() => {
186186
setLoading(true)
187-
setMoreLinkVisible(true)
188-
setMoreLinkClickable(false)
187+
setMoreLinkState(MoreLinkState.LOADING)
189188
}, [query, mode])
190189

191190
function moreLinkProps() {
@@ -263,8 +262,7 @@ export default function Pages() {
263262
/>
264263
</div>
265264
<MoreLink
266-
visible={moreLinkVisible}
267-
clickable={moreLinkClickable}
265+
state={moreLinkState}
268266
linkProps={moreLinkProps()}
269267
/>
270268
</ReportHeader>

‎assets/js/dashboard/stats/sources/referrer-list.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ReportLayout } from '../reports/report-layout'
1313
import { ReportHeader } from '../reports/report-header'
1414
import { TabButton, TabWrapper } from '../../components/tabs'
1515
import MoreLink from '../more-link'
16+
import { MoreLinkState } from '../more-link-state'
1617

1718
const NO_REFERRER = 'Direct / None'
1819

@@ -21,13 +22,11 @@ export default function Referrers({ source }) {
2122
const site = useSiteContext()
2223
const [skipImportedReason, setSkipImportedReason] = useState(null)
2324
const [loading, setLoading] = useState(true)
24-
const [moreLinkVisible, setMoreLinkVisible] = useState(true)
25-
const [moreLinkClickable, setMoreLinkClickable] = useState(false)
25+
const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
2626

2727
useEffect(() => {
2828
setLoading(true)
29-
setMoreLinkVisible(true)
30-
setMoreLinkClickable(false)
29+
setMoreLinkState(MoreLinkState.LOADING)
3130
}, [query])
3231

3332
function fetchReferrers() {
@@ -42,9 +41,9 @@ export default function Referrers({ source }) {
4241
setLoading(false)
4342
setSkipImportedReason(apiResponse.skip_imported_reason)
4443
if (apiResponse.results && apiResponse.results.length > 0) {
45-
setMoreLinkClickable(true)
44+
setMoreLinkState(MoreLinkState.READY)
4645
} else {
47-
setMoreLinkVisible(false)
46+
setMoreLinkState(MoreLinkState.HIDDEN)
4847
}
4948
}
5049

@@ -97,8 +96,7 @@ export default function Referrers({ source }) {
9796
/>
9897
</div>
9998
<MoreLink
100-
visible={moreLinkVisible}
101-
clickable={moreLinkClickable}
99+
state={moreLinkState}
102100
linkProps={{
103101
path: referrersDrilldownRoute.path,
104102
params: { referrer: url.maybeEncodeRouteParam(source) },

‎assets/js/dashboard/stats/sources/search-terms.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ReportLayout } from '../reports/report-layout'
1111
import { ReportHeader } from '../reports/report-header'
1212
import { TabButton, TabWrapper } from '../../components/tabs'
1313
import MoreLink from '../more-link'
14+
import { MoreLinkState } from '../more-link-state'
1415
import { referrersGoogleRoute } from '../../router'
1516

1617
interface SearchTerm {
@@ -77,8 +78,7 @@ function ConfigureSearchTermsCTA({
7778
export function SearchTerms() {
7879
const site = useSiteContext()
7980
const { query } = useQueryContext()
80-
const [moreLinkVisible, setMoreLinkVisible] = React.useState(true)
81-
const [moreLinkClickable, setMoreLinkClickable] = React.useState(false)
81+
const [moreLinkState, setMoreLinkState] = React.useState(MoreLinkState.LOADING)
8282

8383
const [loading, setLoading] = React.useState(true)
8484
const [errorPayload, setErrorPayload] = React.useState<null | ErrorPayload>(
@@ -100,25 +100,24 @@ export function SearchTerms() {
100100
setSearchTerms(res.results)
101101
setErrorPayload(null)
102102
if (res.results && res.results.length > 0) {
103-
setMoreLinkClickable(true)
103+
setMoreLinkState(MoreLinkState.READY)
104104
} else {
105-
setMoreLinkVisible(false)
105+
setMoreLinkState(MoreLinkState.HIDDEN)
106106
}
107107
})
108108
.catch((error) => {
109109
setLoading(false)
110110
setSearchTerms(null)
111111
setErrorPayload(error.payload)
112-
setMoreLinkVisible(false)
112+
setMoreLinkState(MoreLinkState.HIDDEN)
113113
})
114114
}, [query, site.domain])
115115

116116
useEffect(() => {
117117
if (visible) {
118118
setLoading(true)
119119
setSearchTerms([])
120-
setMoreLinkVisible(true)
121-
setMoreLinkClickable(false)
120+
setMoreLinkState(MoreLinkState.LOADING)
122121
fetchSearchTerms()
123122
}
124123
}, [query, fetchSearchTerms, visible])
@@ -200,8 +199,7 @@ export function SearchTerms() {
200199
</TabWrapper>
201200
</div>
202201
<MoreLink
203-
visible={moreLinkVisible}
204-
clickable={moreLinkClickable}
202+
state={moreLinkState}
205203
linkProps={{
206204
path: referrersGoogleRoute.path,
207205
search: (search: any) => search

‎assets/js/dashboard/stats/sources/source-list.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { ReportLayout } from '../reports/report-layout'
2727
import { ReportHeader } from '../reports/report-header'
2828
import { DropdownTabButton, TabButton, TabWrapper } from '../../components/tabs'
2929
import MoreLink from '../more-link'
30+
import { MoreLinkState } from '../more-link-state'
3031

3132
const UTM_TAGS = {
3233
utm_medium: {
@@ -182,14 +183,12 @@ export default function SourceList() {
182183
const [currentTab, setCurrentTab] = useState(storedTab || 'all')
183184
const [loading, setLoading] = useState(true)
184185
const [skipImportedReason, setSkipImportedReason] = useState(null)
185-
const [moreLinkVisible, setMoreLinkVisible] = useState(true)
186-
const [moreLinkClickable, setMoreLinkClickable] = useState(false)
186+
const [moreLinkState, setMoreLinkState] = useState(MoreLinkState.LOADING)
187187
const previousQuery = usePrevious(query)
188188

189189
useEffect(() => {
190190
setLoading(true)
191-
setMoreLinkVisible(true)
192-
setMoreLinkClickable(false)
191+
setMoreLinkState(MoreLinkState.LOADING)
193192
}, [query, currentTab])
194193

195194
useEffect(() => {
@@ -223,9 +222,9 @@ export default function SourceList() {
223222
setLoading(false)
224223
setSkipImportedReason(apiResponse.skip_imported_reason)
225224
if (apiResponse.results && apiResponse.results.length > 0) {
226-
setMoreLinkClickable(true)
225+
setMoreLinkState(MoreLinkState.READY)
227226
} else {
228-
setMoreLinkVisible(false)
227+
setMoreLinkState(MoreLinkState.HIDDEN)
229228
}
230229
}
231230

@@ -326,8 +325,7 @@ export default function SourceList() {
326325
/>
327326
</div>
328327
<MoreLink
329-
visible={moreLinkVisible}
330-
clickable={moreLinkClickable}
328+
state={moreLinkState}
331329
linkProps={moreLinkProps()}
332330
/>
333331
</ReportHeader>

0 commit comments

Comments
 (0)