/
UI.js
127 lines (106 loc) · 3.56 KB
/
UI.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { autorun } from 'mobx'
import { addDisposer, getRoot, onPatch, types } from 'mobx-state-tree'
import cookie from 'cookie'
import stringHash from '@sindresorhus/string-hash'
// process.browser doesn't exist in the jsdom test environment
const canSetCookie = process.browser || process.env.BABEL_ENV === 'test'
const UI = types
.model('UI', {
dismissedAnnouncementBanner: types.maybe(types.number),
// The mode is retrieved out of the cookie in _app.js during store initialization
mode: types.optional(types.enumeration('mode', ['light', 'dark']), 'light')
})
.views(self => ({
get showAnnouncement () {
const { announcement } = getRoot(self).project.configuration
return announcement
? stringHash(announcement) !== self.dismissedAnnouncementBanner
: true
}
}))
.preProcessSnapshot(snapshot => {
const dismissedAnnouncementBanner = (snapshot && snapshot.dismissedAnnouncementBanner)
? parseInt(snapshot.dismissedAnnouncementBanner, 10)
: undefined
const mode = (snapshot && snapshot.mode) ? snapshot.mode : undefined
return {
dismissedAnnouncementBanner,
mode
}
})
.actions(self => ({
afterCreate () {
self.createModeObserver()
},
afterAttach() {
self.createDismissedAnnouncementBannerObserver()
},
createModeObserver () {
const modeDisposer = autorun(() => {
onPatch(self, (patch) => {
const { path } = patch
if (path === '/mode') self.setModeCookie()
})
})
addDisposer(self, modeDisposer)
},
createDismissedAnnouncementBannerObserver() {
const dismissedAnnouncementBannerDisposer = autorun(() => {
onPatch(self, (patch) => {
const { path } = patch
const isCorrectPath = path === '/dismissedAnnouncementBanner'
const parsedCookie = cookie.parse(document.cookie) || {}
const cookieHash = parseInt(parsedCookie.dismissedAnnouncementBanner, 10)
const cookieIsStale = cookieHash !== self.dismissedAnnouncementBanner
if (canSetCookie && isCorrectPath && cookieIsStale) {
self.setAnnouncementBannerCookie()
}
})
}, {
name: 'updateDismissedAnnouncementBannerCookie'
})
addDisposer(self, dismissedAnnouncementBannerDisposer)
},
dismissAnnouncementBanner() {
const { announcement } = getRoot(self).project.configuration
const announcementHash = stringHash(announcement)
self.dismissedAnnouncementBanner = announcementHash
},
setAnnouncementBannerCookie() {
const { slug } = getRoot(self).project
document.cookie = cookie.serialize('dismissedAnnouncementBanner', self.dismissedAnnouncementBanner, {
domain: getCookieDomain(),
path: `/projects/${slug}`,
})
},
setModeCookie () {
if (canSetCookie) {
const parsedCookie = cookie.parse(document.cookie) || {}
if (self.mode !== parsedCookie.mode) {
document.cookie = cookie.serialize('mode', self.mode, {
domain: getCookieDomain(),
maxAge: 31536000,
path: '/',
})
}
}
},
setDarkMode () {
self.mode = 'dark'
},
setLightMode () {
self.mode = 'light'
},
toggleMode () {
if (self.mode === 'light') {
self.setDarkMode()
} else {
self.setLightMode()
}
},
}))
export default UI
function getCookieDomain () {
const isProduction = process.env.NODE_ENV === 'production'
return isProduction ? 'zooniverse.org' : null
}