raffle-me-that/frontend/src/composables/useRaffle.ts

import { ref, computed } from 'vue'
import rndString from 'crypto-random-string'
import { useStorage } from '@vueuse/core'

function genId() {
  return rndString({ length: 16, type: 'url-safe' })
}

export default function useRaffle() {
  const EMPTY_STORE: Raffle[] = []
  const raffleStore = useStorage<Raffle[]>('', EMPTY_STORE)

  const newRaffle = ref<Raffle>({
    id: genId(),
    title: '',
    date: new Date().toLocaleDateString('de'),
    participants: [],
    description: '',
  })

  const newParticipant = ref('')

  function addParticipant() {
    if (newParticipant.value.trim().length === 0) return
    newRaffle.value.participants.push(newParticipant.value)
    newParticipant.value = ''
  }

  function removeParticipant(index: number) {
    newRaffle.value.participants.splice(index, 1)
  }

  const readyToRaffle = computed(() => {
    const { participants, title } = newRaffle.value
    return participants.length > 1 && title.length
  })

  return {
    raffleStore,
    newRaffle,
    newParticipant,
    addParticipant,
    removeParticipant,
    readyToRaffle,
  }
}