5.1 實戰：建立待辦事項全端應用#

-- migrations/0001_init.sql
CREATE TABLE users (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    email TEXT NOT NULL UNIQUE,
    password_hash TEXT NOT NULL,          -- Argon2
    created_at TIMESTAMPTZ NOT NULL DEFAULT now()
);

CREATE TABLE todos (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    title TEXT NOT NULL CHECK (length(title) BETWEEN 1 AND 200),
    done BOOLEAN NOT NULL DEFAULT false,
    created_at TIMESTAMPTZ NOT NULL DEFAULT now()
);
CREATE INDEX idx_todos_user ON todos(user_id, created_at DESC);

// src/models/todo.rs
#[derive(Serialize, Deserialize, sqlx::FromRow, ToSchema)]
#[serde(rename_all = "camelCase")]
pub struct Todo {
    pub id: Uuid,
    pub user_id: Uuid,
    pub title: String,
    pub done: bool,
    pub created_at: DateTime<Utc>,
}

#[derive(Deserialize, Validate, ToSchema)]
pub struct CreateTodo {
    #[validate(length(min = 1, max = 200))]
    pub title: String,
}

// src/repo/todo.rs
pub async fn list(pool: &PgPool, user_id: Uuid) -> Result<Vec<Todo>, AppError> {
    let todos = sqlx::query_as!(
        Todo,
        r#"SELECT id, user_id, title, done, created_at
           FROM todos WHERE user_id = $1 ORDER BY created_at DESC"#,
        user_id
    ).fetch_all(pool).await?;
    Ok(todos)
}

pub async fn create(pool: &PgPool, user_id: Uuid, input: &CreateTodo)
    -> Result<Todo, AppError> {
    let todo = sqlx::query_as!(Todo,
        r#"INSERT INTO todos (user_id, title) VALUES ($1, $2)
           RETURNING id, user_id, title, done, created_at"#,
        user_id, input.title
    ).fetch_one(pool).await?;
    Ok(todo)
}

pub fn router() -> Router<AppState> {
    Router::new()
        .route("/todos", get(list).post(create))
        .route("/todos/:id", patch(toggle).delete(remove))
}

async fn list(
    State(pool): State<PgPool>,
    Extension(claims): Extension<Claims>,       // 3.4 節中介層注入的身分
) -> Result<Json<Vec<Todo>>, AppError> {
    Ok(Json(repo::list(&pool, claims.sub).await?))
}

async fn toggle(
    State(pool): State<PgPool>,
    Extension(claims): Extension<Claims>,
    Path(id): Path<Uuid>,
) -> Result<Json<Todo>, AppError> {
    let todo = sqlx::query_as!(Todo,
        "UPDATE todos SET done = NOT done
         WHERE id = $1 AND user_id = $2
         RETURNING id, user_id, title, done, created_at",
        id, claims.sub
    ).fetch_optional(pool).await?
    .ok_or(AppError::NotFound)?;      // 404 同時涵蓋「不存在」與「不是你的」
    Ok(Json(todo))
}

// app/todos/index.tsx
import { View, FlatList } from 'react-native';
import { useTodos, useToggleTodo, useCreateTodo } from '../../hooks/useTodos';

export default function TodoListScreen() {
  const { data: todos, isLoading } = useTodos();
  const toggle = useToggleTodo();
  const create = useCreateTodo();

  if (isLoading) return <Spinner />;

  return (
    <View style={styles.container}>
      <TodoInput onSubmit={(title) => create.mutate({ title })} />
      <FlatList
        data={todos}
        keyExtractor={(t) => t.id}
        renderItem={({ item }) => (
          <TodoItem todo={item} onToggle={(id) => toggle.mutate(id)} />
        )}
      />
    </View>
  );
}

// hooks/useTodos.ts — 資料層與畫面層分離（4.2 節）
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useTodos() {
  return useQuery({ queryKey: ['todos'], queryFn: api.listTodos });
}

export function useToggleTodo() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: api.toggleTodo,
    onMutate: async (id) => {                          // 樂觀更新（4.4 節）
      await qc.cancelQueries({ queryKey: ['todos'] });
      const prev = qc.getQueryData<Todo[]>(['todos']);
      qc.setQueryData<Todo[]>(['todos'],
        (old) => old?.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
      return { prev };
    },
    onError: (_e, _id, ctx) => qc.setQueryData(['todos'], ctx?.prev),  // 回滾
    onSettled: () => qc.invalidateQueries({ queryKey: ['todos'] }),
  });
}

// 認證 Context（4.2 節：低頻全域狀態用 Context）
const AuthContext = createContext<{
  signIn: (email: string, password: string) => Promise<void>;
  signOut: () => void;
  user: Claims | null;
} | null>(null);