src/components/dialogs/nudges/index.tsx


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

import React from 'react'

import {useSession} from '#/state/session'
import * as Dialog from '#/components/Dialog'
import {TenMillion} from '#/components/dialogs/nudges/TenMillion'

type Context = {
  controls: {
    tenMillion: Dialog.DialogOuterProps['control']
  }
}

const Context = React.createContext<Context>({
  // @ts-ignore
  controls: {},
})

export function useContext() {
  return React.useContext(Context)
}

let SHOWN = false

export function NudgeDialogs() {
  const {hasSession} = useSession()
  const tenMillion = Dialog.useDialogControl()

  const ctx = React.useMemo(() => {
    return {
      controls: {
        tenMillion,
      },
    }
  }, [tenMillion])

  React.useEffect(() => {
    if (!hasSession) return

    const t = setTimeout(() => {
      if (!SHOWN) {
        SHOWN = true
        ctx.controls.tenMillion.open()
      }
    }, 2e3)

    return () => {
      clearTimeout(t)
    }
  }, [ctx, hasSession])

  return (
    <Context.Provider value={ctx}>
      <TenMillion />
    </Context.Provider>
  )
}