Task Creation: Allow Users To Create A Task FE

by ADMIN 47 views

Introduction

In this article, we will explore the process of creating a task form in a frontend application. The task form will allow users to input details such as name, description, due date, priority, and category. We will also create a service to handle the task creation and a hook to manage the task creation process using React Query.

Task Form Creation

The task form will be created in the TaskForm.tsx file located in the src/components/tasks directory. The form will have the following fields:

  • Name: A text input field to input the task name.
  • Description: A text area to input the task description.
  • Due Date: A date picker to select the task due date.
  • Priority: A select input field to select the task priority.
  • Category: A select input field to select the task category.

TaskForm.tsx

import React, { useState } from 'react';
import { Form, Input, Select, DatePicker, TextArea } from 'antd';

const TaskForm = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [dueDate, setDueDate] = useState(null);
  const [priority, setPriority] = useState('');
  const [category, setCategory] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // Create task logic will be implemented here
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Item label="Name">
        <Input value={name} onChange={(event) => setName(event.target.value)} />
      </Form.Item>
      <Form.Item label="Description">
        <TextArea value={description} onChange={(event) => setDescription(event.target.value)} />
      </Form.Item>
      <Form.Item label="Due Date">
        <DatePicker value={dueDate} onChange={(date) => setDueDate(date)} />
      </Form.Item>
      <Form.Item label="Priority">
        <Select value={priority} onChange={(value) => setPriority(value)}>
          <Select.Option value="High">High</Select.Option>
          <Select.Option value="Medium">Medium</Select.Option>
          <Select.Option value="Low">Low</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item label="Category">
        <Select value={category} onChange={(value) => setCategory(value)}>
          <Select.Option value="Work">Work</Select.Option>
          <Select.Option value="Personal">Personal</Select.Option>
          <Select.Option value="Other">Other</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <button type="submit">Create Task</button>
      </Form.Item>
    </Form>
  );
};

export default TaskForm;

Task Service Creation

The task service will be created in the taskService.ts file located in the src/services directory. The service will have a createTask function that will handle the task creation logic.

taskService.ts

import axios from 'axios';

const taskService = {
  async createTask(task) {
    try {
      const response = await axios.post('/api/tasks', task);
      return response.data;
    } catch (error) {
      throw error;
    }
  },
};

export default taskService;

Task Creation Hook

The task creation hook will be created in the useTasks.ts file located in the src/hooks directory. The hook will use React Query to manage the task creation process.

useTasks.ts

import { useMutation } from 'react-query';
import taskService from '../services/taskService';

const useCreateTask = () => {
  const { mutate, isLoading, error } = useMutation(taskService.createTask, {
    onSuccess: (data) => {
      console.log('Task created successfully:', data);
    },
    onError: (error) => {
      console.error('Error creating task:', error);
    },
  });

  return { mutate, isLoading, error };
};

export default useCreateTask;

Conclusion

Q: What is the purpose of the task form in the frontend application?

A: The task form is used to allow users to input details such as name, description, due date, priority, and category for a new task. This information is then sent to the backend to create a new task.

Q: What fields are included in the task form?

A: The task form includes the following fields:

  • Name: A text input field to input the task name.
  • Description: A text area to input the task description.
  • Due Date: A date picker to select the task due date.
  • Priority: A select input field to select the task priority.
  • Category: A select input field to select the task category.

Q: How does the task service handle the task creation logic?

A: The task service uses the axios library to send a POST request to the backend API to create a new task. The request includes the task details input by the user in the task form.

Q: What is the purpose of the useCreateTask hook?

A: The useCreateTask hook is used to manage the task creation process using React Query. It provides a way to create a new task by sending a request to the backend API and handling the response.

Q: What are the benefits of using React Query for task creation?

A: React Query provides several benefits for task creation, including:

  • Automatic caching: React Query automatically caches the response from the backend API, so that if the user tries to create the same task again, the cached response is returned instead of sending another request to the backend.
  • Error handling: React Query provides a way to handle errors that occur during task creation, such as network errors or server errors.
  • Loading state management: React Query provides a way to manage the loading state of the task creation process, so that the user can see a loading indicator while the task is being created.

Q: How does the useCreateTask hook handle errors during task creation?

A: The useCreateTask hook uses the onError callback to handle errors that occur during task creation. If an error occurs, the hook logs the error to the console and returns an error message to the user.

Q: Can the task creation process be customized?

A: Yes, the task creation process can be customized by modifying the useCreateTask hook. For example, you can add custom error handling or modify the caching behavior.

Q: What are the benefits of using a hook for task creation?

A: Using a hook for task creation provides several benefits, including:

  • Reusability: The hook can be reused throughout the application, so that the task creation process is consistent.
  • Decoupling: The hook decouples the task creation process from the rest of the application, so that changes to the task creation process do not affect the rest of the application.
  • Testability: The hook is easier to test than a custom implementation, since it is a separate module that can be tested independently.