// src/features/users/usersApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

interface User {
  id: number
  name: string
  email: string
}

interface NewUser {
  name: string
  email: string
}

export const usersApi = createApi({
  reducerPath: 'usersApi',   // key in the Redux store
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),

  // tagTypes declares the cache tags this API uses for invalidation
  tagTypes: ['User'],

  endpoints: builder => ({

    // ── Queries (read data) ──────────────────────────────────────────
    getUsers: builder.query<User[], void>({
      query: () => '/users',
      // This query's cache is tagged as 'User' + each user's id.
      // Any mutation that invalidatesTags(['User']) will refetch this.
      providesTags: (result) =>
        result
          ? [
              ...result.map(u => ({ type: 'User' as const, id: u.id })),
              { type: 'User', id: 'LIST' },
            ]
          : [{ type: 'User', id: 'LIST' }],
    }),

    getUserById: builder.query<User, number>({
      query: (id) => `/users/${id}`,
      providesTags: (_result, _err, id) => [{ type: 'User', id }],
    }),

    // ── Mutations (write data) ────────────────────────────────────────
    addUser: builder.mutation<User, NewUser>({
      query: (newUser) => ({
        url: '/users',
        method: 'POST',
        body: newUser,
      }),
      // Invalidate the LIST tag so getUsers refetches automatically
      invalidatesTags: [{ type: 'User', id: 'LIST' }],
    }),

    updateUser: builder.mutation<User, Partial<User> & Pick<User, 'id'>>({
      query: ({ id, ...patch }) => ({
        url: `/users/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      // Invalidate this specific user's cache entry
      invalidatesTags: (_result, _err, { id }) => [{ type: 'User', id }],
    }),

    deleteUser: builder.mutation<void, number>({
      query: (id) => ({
        url: `/users/${id}`,
        method: 'DELETE',
      }),
      invalidatesTags: (_result, _err, id) => [
        { type: 'User', id },
        { type: 'User', id: 'LIST' },
      ],
    }),
  }),
})

// Auto-generated hooks — one per endpoint
export const {
  useGetUsersQuery,
  useGetUserByIdQuery,
  useAddUserMutation,
  useUpdateUserMutation,
  useDeleteUserMutation,
} = usersApi

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit'
import { usersApi } from '../features/users/usersApi'

export const store = configureStore({
  reducer: {
    // RTK Query manages its own slice in the Redux store
    [usersApi.reducerPath]: usersApi.reducer,
  },
  // setupListeners enables refetchOnFocus and refetchOnReconnect
  middleware: getDefault =>
    getDefault().concat(usersApi.middleware),
})

// Optional: enable automatic refetch when the window regains focus
import { setupListeners } from '@reduxjs/toolkit/query'
setupListeners(store.dispatch)

import { useGetUsersQuery } from './usersApi'

function UserList() {
  const {
    data: users,
    isLoading,
    isFetching,   // true during background refetch (data still shown)
    isError,
    error,
    refetch,      // manually trigger a refetch
  } = useGetUsersQuery()

  if (isLoading) return <p>Loading users…</p>
  if (isError)   return <p>Error: {String(error)}</p>

  return (
    <>
      {isFetching && <span>Refreshing…</span>}
      <ul>
        {users?.map(user => (
          <li key={user.id}>{user.name} — {user.email}</li>
        ))}
      </ul>
      <button onClick={refetch}>Refresh</button>
    </>
  )
}

import { useState } from 'react'
import { useAddUserMutation, useDeleteUserMutation } from './usersApi'

function AddUserForm() {
  const [name, setName]   = useState('')
  const [email, setEmail] = useState('')
  const [addUser, { isLoading, isError }] = useAddUserMutation()

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    try {
      await addUser({ name, email }).unwrap()  // throws on error
      setName('')
      setEmail('')
      // getUsers refetches automatically because addUser invalidates the LIST tag
    } catch (err) {
      console.error('Failed to add user:', err)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name}  onChange={e => setName(e.target.value)}  placeholder="Name" />
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Adding…' : 'Add User'}
      </button>
      {isError && <p>Failed to add user.</p>}
    </form>
  )
}

function UserRow({ user }) {
  const [deleteUser] = useDeleteUserMutation()

  return (
    <li>
      {user.name}
      <button onClick={() => deleteUser(user.id)}>Delete</button>
    </li>
  )
}

// Poll every 30 seconds
const { data } = useGetUsersQuery(undefined, {
  pollingInterval: 30_000,
})

// Skip the query entirely (useful for conditional fetching)
const { data } = useGetUserByIdQuery(userId, {
  skip: !userId,
})

// Refetch when the window regains focus (requires setupListeners)
const { data } = useGetUsersQuery(undefined, {
  refetchOnFocus: true,
})

// Keep previous data while fetching new data (no loading flash on refetch)
const { data, isFetching } = useGetUsersQuery(page, {
  keepPreviousData: true,
})

updateUser: builder.mutation<User, Partial<User> & Pick<User, 'id'>>({
  query: ({ id, ...patch }) => ({
    url: `/users/${id}`,
    method: 'PATCH',
    body: patch,
  }),
  async onQueryStarted({ id, ...patch }, { dispatch, queryFulfilled }) {
    // Optimistically update the cache
    const patchResult = dispatch(
      usersApi.util.updateQueryData('getUsers', undefined, draft => {
        const user = draft.find(u => u.id === id)
        if (user) Object.assign(user, patch)
      })
    )

    try {
      await queryFulfilled   // wait for server confirmation
    } catch {
      // Server rejected — roll back the optimistic update
      patchResult.undo()
    }
  },
})