Fictional PR review

api.py

from flask import Flask, jsonify
import sqlite3

app = Flask(__name__)

DATABASE = 'movies.db'

def get_db_connection():
    conn = sqlite3.connect(DATABASE)
    conn.row_factory = sqlite3.Row
    return conn

@app.route('/api/movies/by-actor')
def get_movies_by_actor():
    conn = get_db_connection()
    cursor = conn.execute('''
        SELECT m.title, a.name AS actor_name
        FROM movies m
        JOIN actors a ON m.actor_id = a.id
    ''')
    movies = [{'title': row['title'], 'actor': row['actor_name']} for row in cursor.fetchall()]
    conn.close()
    return jsonify(movies)

@app.route('/api/movies/by-director')
def get_movies_by_director():
    conn = get_db_connection()
    movies = []
    for row in conn.execute('SELECT * FROM movies'):
        director_id = row['director_id']
        director = conn.execute('SELECT name FROM directors WHERE id = ?', (director_id,)).fetchone()
        movies.append({
            'title': row['title'],
            'director': director['name']
        })
    conn.close()
    return jsonify(movies)

if __name__ == '__main__':
    app.run(debug=True)

index.tsx

import React, { useEffect, useState } from 'react';

interface Movie {
  title: string;
  actor?: string;
  director?: string;
}

const HomePage: React.FC = () => {
  const [movies, setMovies] = useState<Movie[]>([]);
  const [groupBy, setGroupBy] = useState<'actor' | 'director'>('actor');

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/movies/by-${groupBy}`);
      const data = await response.json();
      setMovies(data);
    };

    fetchData();
  }, [groupBy]);

  return (
    <div>
      <h1>Movie List</h1>
      <select value={groupBy} onChange={(e) => setGroupBy(e.target.value)}>
        <option value="actor">Group by Actor</option>
        <option value="director">Group by Director</option>
      </select>
      <ul>
        {movies.map((movie) => (
          <li key={movie.title}>
            {movie.title} - {groupBy === 'actor' ? movie.actor : movie.director}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HomePage;