Creating a Component

🔗 Creating a Component

React components live inside the /ts/src/modules folder. Begin by creating a new file in /ts/src/modules/example/Todos.tsx. The UI is implemented primarily using React functional components. Here we’ll provide a sample component using basic React constructs with Material-UI:

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

import { siteApi, useUtil } from 'awayto/hooks';

export function Todos (): React.JSX.Element {

  const { setSnack } = useUtil();
  const [postTodo] = siteApi.useTodoServicePostTodoMutation();

  const [todo, setTodo] = useState({
    task: ''
  });
  
  const handleSubmit = () => {
    const { task } = todo;

    if (!task) {
      setSnack({ snackType: 'error', snackOn: 'You must have something todo!' });
      return;
    }
    
    postTodo({ task });
  }

  return <>
    <TextField
      id="task"
      label="Task"
      name="task"
      value={todo.task}
      onKeyDown={e => {
        if ('Enter' === e.key) {
          void handleSubmit();
        }
      }}
      onChange={e => setTodo({ task: e.target.value })}
    />
  </>;
}

export default Todos;