# Redux Tutorial: Creating a basic UI

Step 1: Create redux-todolist/src/components/Todo.js

Let us create our first component: Todo. Paste the following code into the newly created Todo.js file:


import React from 'react';
import { withRouter } from 'react-router';

import {
  Col,
  Row,
  Grid,
  Icon,
  Button,
  Checkbox,
  ButtonGroup,
} from '@sketchpixy/rubix';

@withRouter
export default class Todo extends React.Component {
  toggleCompletion() {
    let { _id } = this.props.todo;
    let { dispatch, actions } = this.props;

    dispatch(actions.updateTodo({
      _id,
      completed: this.input.checked
    }));
  }

  removeTodo() {
    let { _id } = this.props.todo;
    let { dispatch, actions } = this.props;

    dispatch(actions.removeTodo({ _id }));
  }

  editTodo() {
    this.props.router.push(`/todo/edit/${this.props.todo._id}`);
  }

  render() {
    let { todo, completed } = this.props.todo;
    let style = {
      textDecoration: completed ? 'line-through' : null
    };

    return (
      <Grid>
        <Row className='todo-item'>
          <Col sm={8}>
            <Checkbox onChange={::this.toggleCompletion} style={style} inputRef={(input) => { this.input = input; }} checked={completed} >
              {todo}
            </Checkbox>
          </Col>
          <Col sm={4} className='text-right'>
            <Button bsStyle='red' className='remove-sm' onClick={::this.removeTodo} style={{marginRight: 12.5}}>Remove</Button>
            <Button bsStyle='green' className='remove-sm' onlyOnHover onClick={::this.editTodo}>Edit</Button>
          </Col>
        </Row>
      </Grid>
    );
  }
}

Let's breakdown the above code:

  • The above code defines a simple Todo component class. This component will be used in the index page where we render all todo items stored in our database.

  • We import all the necessary basic UI components from "@sketchpixy/rubix" for building our Todo component. To see all the different components that come bundled with Rubix please refer to the COMPONENTS section in the sidebar for complete documentation.

  • Lines 16 - 24 defines a toggleCompletion() instance method that sets the completion state of the Todo item that was clicked. Since we are modifying the todo item, we dispatch an action updateTodo({ _id, completed }) with _id and completed as parameters.

  • Lines 26 - 31 define a removeTodo() instance method. A call to this method removes the todo item. Since we are deleting the todo item, we dispatch an action removeTodo({ _id }) with _id as parameter.

  • Lines 33 - 35 defines a editTodo() instance method. When this method is called, the router navigates to the edit page where the todo can be edited. We will cover editing in the upcoming section.

Step 2: Create redux-todolist/src/components/TodoForm.js

Let us now define a React component called TodoForm which handles creating new Todo items. Paste the following code into the newly created TodoForm.js file:


import React from 'react';
import ReactDOM from 'react-dom';

import {
  Row,
  Col,
  Grid,
  Form,
  Button,
  Checkbox,
  FormGroup,
  FormControl } from '@sketchpixy/rubix';

export default class TodoForm extends React.Component {
  createTodo(e) {
    e.preventDefault();

    let input = ReactDOM.findDOMNode(this.input);

    let todo = input.value;

    let { dispatch, actions } = this.props;

    dispatch(actions.createTodo({ todo }));

    input.value = '';
  }

  render() {
    return (
      <div>
        <Form horizontal onSubmit={::this.createTodo}>
          <FormGroup>
            <Col sm={10}>
              <FormControl type='text' placeholder='A todo item...' ref={(input) => this.input = input} autoFocus />
            </Col>
            <Col sm={2} collapseLeft>
              <br className='visible-xs' />
              <Button type='submit' bsStyle='blue' block onlyOnHover>Create Todo</Button>
            </Col>
          </FormGroup>
        </Form>
      </div>
    );
  }
}

The above code implements a TodoForm component that renders a form to create Todo items. It implements a createTodo method that is called when the form is submitted. The createTodo method dispatches an action to create a new Todo item.

Now that we have created our basic components, it's time to create pages that render these components. This is detailed in the next section.