React/Redux ChatGPT experiment - frontend generation

0 PROMPT.md

Give me JavaScript code implementing a React frontend for the app.

1 RESPONSE.jsx

import React from 'react';
import { connect } from 'react-redux';

const TodoList = ({ todos, visibilityFilter, dispatch }) => {
  let visibleTodos;

  switch (visibilityFilter) {
    case 'show_all':
      visibleTodos = todos;
      break;
    case 'show_active':
      visibleTodos = todos.filter(todo => !todo.completed);
      break;
    case 'show_completed':
      visibleTodos = todos.filter(todo => todo.completed);
      break;
    default:
      visibleTodos = todos;
  }

  return (
    <div>
      <ul>
        {visibleTodos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button
              onClick={() =>
                dispatch({ type: 'COMPLETE_TODO', id: todo.id })
              }
            >
              Complete
            </button>
          </li>
        ))}
      </ul>
      <button
        onClick={() =>
          dispatch({ type: 'ADD_TODO', text: 'New todo' })
        }
      >
        Add Todo
      </button>
      <button onClick={() => dispatch({ type: 'CLEAR_COMPLETED' })}>
        Clear Completed
      </button>
      <div>
        <span>Show: </span>
        <button
          onClick={() =>
            dispatch({ type: 'SET_VISIBILITY_FILTER', filter: 'show_all' })
          }
        >
          All
        </button>
        <button
          onClick={() =>
            dispatch({ type: 'SET_VISIBILITY_FILTER', filter: 'show_active' })
          }
        >
          Active
        </button>
        <button
          onClick={() =>
            dispatch({
              type: 'SET_VISIBILITY_FILTER',
              filter: 'show_completed'
            })
          }
        >
          Completed
        </button>
      </div>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    todos: state.todos,
    visibilityFilter: state.visibilityFilter
  };
};

export default connect(mapStateToProps)(TodoList);

2 CODA.md

See the blog post for more information!