155a4d5efc
## Info This PR merges with-mobx-lite into with-mobx. After that we will migrate `with-mobx` to typescript. ## Context As discussed in https://github.com/vercel/next.js/pull/40302#issuecomment-1239238966 we are going to merge the mobx examples. #40302 ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
46 lines
1 KiB
JavaScript
46 lines
1 KiB
JavaScript
import { action, observable, computed, runInAction, makeObservable } from 'mobx'
|
|
import { enableStaticRendering } from 'mobx-react-lite'
|
|
|
|
enableStaticRendering(typeof window === 'undefined')
|
|
|
|
export class Store {
|
|
lastUpdate = 0
|
|
light = false
|
|
|
|
constructor() {
|
|
makeObservable(this, {
|
|
lastUpdate: observable,
|
|
light: observable,
|
|
start: action,
|
|
hydrate: action,
|
|
timeString: computed,
|
|
})
|
|
}
|
|
|
|
start = () => {
|
|
this.timer = setInterval(() => {
|
|
runInAction(() => {
|
|
this.lastUpdate = Date.now()
|
|
this.light = true
|
|
})
|
|
}, 1000)
|
|
}
|
|
|
|
get timeString() {
|
|
const pad = (n) => (n < 10 ? `0${n}` : n)
|
|
const format = (t) =>
|
|
`${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(
|
|
t.getUTCSeconds()
|
|
)}`
|
|
return format(new Date(this.lastUpdate))
|
|
}
|
|
|
|
stop = () => clearInterval(this.timer)
|
|
|
|
hydrate = (data) => {
|
|
if (!data) return
|
|
|
|
this.lastUpdate = data.lastUpdate !== null ? data.lastUpdate : Date.now()
|
|
this.light = !!data.light
|
|
}
|
|
}
|