Creating Effects

'use client'

import { HStack, Stack } from '@/styled-system/jsx'
import { Button, Text } from '@cerberus/react'
import { createComputed, createEffect, useSignal } from '@cerberus/signals'

export function BasicDemo() {
  const [count, setCount, getCount] = useSignal<number>(0)
  const [_isEven, setIsEven, getIsEven] = useSignal<boolean>(false)

  const info = createComputed(() => {
    return `${getCount()} is ${getIsEven() ? 'even' : 'odd'}`
  })

  createEffect(() => {
    setIsEven(getCount() % 2 === 0)
  })

  return (
    <HStack gap="xl" w="3/4">
      <Button onClick={() => setCount(count + 1)}>Increment</Button>

      <Stack direction="column" gap="xs">
        <Text>Count: {count}</Text>
        <Text>Double Count: {info()}</Text>
      </Stack>
    </HStack>
  )
}

'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Show, Text } from '@cerberus/react'
import { createEffect, useSignal } from '@cerberus/signals'
import { useEffect } from 'react'

function MountedMeta() {
  const [lifeCycle, setLifeCycle] = useSignal<string>('')
  const [count, setCount] = useSignal<number>(0)

  useEffect(() => {
    setLifeCycle('mounted')

    const unsubscribe = createEffect(() => {
      const interval = setInterval(() => {
        setCount((prev) => prev + 1)
      }, 1000)

      return () => clearInterval(interval)
    })

    return () => {
      setLifeCycle('unmounted')
      unsubscribe()
    }
  }, [setLifeCycle, setCount])

  return (
    <HStack gap="md" w="3/4">
      <Text>Component state: {lifeCycle}</Text>
      <Text>Count: {count}</Text>
    </HStack>
  )
}

export function NativeEffectDemo() {
  const [mount, setMount] = useSignal<boolean>(false)

  return (
    <HStack justify="space-between" w="3/4">
      <Button onClick={() => setMount((prev) => !prev)}>Toggle</Button>
      <Show when={mount}>{() => <MountedMeta />}</Show>
    </HStack>
  )
}