import { revalidateTag } from 'next/cache'
import { User } from '../typings'
import { useOptimistic } from 'react'

export default async function Home() {
  const res = await fetch('https://xxx.mockapi.io/users', {
    cache: 'no-cache',
    next: {
      tags: ['users'],
    },
  })

  const users: User[] = await res.json()
  const [optimisticUsers, setOptimisticUsers] = useOptimistic(users)

  const addUserToDatabase = async (e: FormData) => {
    'use server'
    const username = e.get('username')?.toString()
    const city = e.get('city')?.toString()

    if (!username || !city) return

    const newUser = {
      username,
      city,
    }

    await fetch('https://xxx.mockapi.io/users', {
      method: 'POST',
      body: JSON.stringify(newUser),
      headers: {
        'Content-Type': 'application/json',
      },
    })
    revalidateTag('users')
  }
return (
// ... code 
  )
}