This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 this series of articles is a learning summary of the jIRA task management system in action

📢 Thank you very much for reading

📢 May you be true to yourself and love life

In the previous article, we deal with the kanban page layout, and its logic functions, basic functionality is a basic implementation, project, task, add and delete, the realization of the function of search, in this article we’ll last task group page layout, and function realization, write here, most of the hook function has achieved, We also know a lot about add, delete, change and check.

💡 Knowledge points look first

  • Add and delete task groups
  • Routing hop

First, page layout

I’ve written this section several times. Let’s do it quick

1. A brief introduction to the layout

Here, we use the List component in ANTD, and the Row component encapsulated on the left and right sides of the top is arranged on both sides, and the Link component is used in the jump part to realize rendering through traversing data

2. Data acquisition

Here we need to get our task data. Here we need to write a custom hook: useEpics to get data, just like other hooks to get data

We receive a Param data object and send the request through useQuery

As a refresher, its second argument is an asynchronous event, and its first argument is a tuple that resends the request to update the EPICS data content in the cache when the dependency param changes

export const useEpics = (param? : Partial
       ) = > {
    const client = useHttp()
    return useQuery<Epic[]>(['epics', param], () = > client('epics', { data: param }))
}
Copy the code

We use it in Epic /index.ts to get the task group data EPICS and the Tasks data for jump links

// Information about the task
const { data: epics } = useEpics(useEpicSearchParams())
// Get the list of tasks in the task group
const { data: tasks } = useTasks({ projectId: currentProject? .id })Copy the code

So we get the data

How can we use these two data in a component

For epics, which is the main content we need to render, we need to render with list.item

In the List component, we can pass in our dataSource and iterate over the EPICS data via the renderItem property

 <List dataSource={epics} renderItem={epic= > <List.Item></List.Item> />
Copy the code

In this way, our EPIC is that each task data can obtain the required data through the object value method

The main thing to mention here is the rendering of time

The data returned to us from the back end is in a timestamp format, and we need to convert it to this format for easy reading

Here we use a dayJS library, through the format method to determine her output time format YYYY-MM-DD, just need to pass in its time

<div> start time: {dayjs(epic. Start).format("YYYY-MM-DD")}</div>
<div>Format ("YYYY-MM-DD")} End time: {dayjs(epic. End). Format ("YYYY-MM-DD")}</div>
Copy the code

2. Add and delete task groups

First let’s delete the task group function

1. Delete a task group

The implementation idea is as follows

  1. Click delete button, pop-up prompt box
  2. Confirm the deletion
  3. Call the interface to remove the cache

Code implementation

When we click delete, we call the confirmDeleteEpic function to confirm the deletion

This function encapsulates a modal. config component

// Prompt box for deletion
const confirmDeleteEpic = (epic: Epic) = > {
    Modal.confirm({
        title: 'You are sure to delete the project team${epic.name}? `.content: 'Click OK to delete'.okText: 'sure'.onOk() {
            // Delete is invoked for confirmation
            deleteEpic({ id: epic.id })
        }
    })
}
Copy the code

When we click ok, formally call delete interface deleteEpic, pass in the id of the task group we delete, you can delete

So let’s see how do we implement this deleteEpic

First of all, we still need to encapsulate a useDeleteEpic hook to handle the deletion request. Here, useMutation is used to handle it, passing in the current ID and configuring the deleted Config object

UseMutation can accept two parameters, the first parameter we pass in our asynchronous request, and the second parameter config how to handle the data in the cache

// Delete kanban
export const useDeleteEpic = (queryKey: QueryKey) = > {
    const client = useHttp()
    return useMutation(
        // I don't have a problem here, I have a problem with the video
        // direct (id:number)
        ({ id }: { id: number }) = > client(`epics/${id}`, {
            method: "DELETE",
        }),
        useDeleteConfig(queryKey)
    )
}
Copy the code

That’s where our delete function comes in

2. Add the task group function

Implementation approach

  1. Write acreate-epicpage
  2. Write the information about the new task group
  3. Submit create request

Code implementation

First we need to create a create-Epic file in the Epic folder to write the create task page

This has the advantage of separating out the complex parts, making the resulting file less code and more readable

The new task group page is also implemented using a Drawer component

It is worth noting that we must add the forceRender={true} component, otherwise we will get an error when the page first loads

In the Drawer component we also used the Form component, which automatically calls the onFinish method to handle the add request when the Form is submitted

const onFinish = async (values: any) = > {// Just pass values to projectid is not enough
    awaitaddEpic({ ... values, projectId }) props.onClose() }Copy the code

Here we use a combination of async and await and wait for the interface to return the result before closing the window, but because we use optimistic update, we actually close the window just by writing to the cache

At the same time, in order to make the Form automatically clear when the window closes, we use useEffect to achieve this, and write visible in the dependency to listen for changes

useEffect(() = > {
    form.resetFields()
}, [form, props.visible])
Copy the code

So now that we’ve done our create function, let’s finally talk a little bit about route jumps in task group Item

3. Route jump

When we click the following task, we need to jump to the kanban page corresponding to the task’s edit window, let’s see the effect picture

In fact, as long as our routing address is configured, there is no problem

Let’s see how to configure the route address for this jump

Specify the corresponding editingTaskId page so that the window pops up, which is the benefit of using urls for state management

to={`/projects/${currentProject? .id}/kanban? editingTaskId=${task.id}`}
Copy the code

So how do we bind the corresponding task to the corresponding task group?

Here, filter is adopted to achieve this. If the epicId under Task is the same as the ID under EPIC, it means that it belongs to this task group, so we can traverse the rendering

{ tasks? .filter(task= > task.epicId === epic.id)
        .map(task= > <Link
            style={{ marginRight: '20px'}}key={task.id}// Link to the Kanban pageto={` /projects/ ${currentProject?.id} /kanban?editingTaskId=${task.id}`} >
            {task.name}
        </Link>)}Copy the code

Note: Use map is must pay attention to the key only oh ~

📌 summary

  1. Able to skillfully achieve the function of adding and deleting
  2. Recognizing theurlBenefits of state management
  3. Using an appropriate array approach helps us tremendously

Finally, I may not be clear enough in many places, please forgive me

💌 if the article has any mistakes, or have any questions, welcome to leave a message, also welcome private letter exchange