React component design process - imitation Douyin order component

1. Component design ideas

The businesses we need to implement in this component are:
(At present, we will temporarily achieve the following effects, and the author will gradually improve the other functions of this page in the later stage~)

Tab switching:
Click on the tab, the tab will add a red underline style, and the orders in the tab state will be displayed below.
Set the loading state:
Display the loading icon while the data is still being requested
Search order:
Search for orders whose product title contains the input content under the current tab.
To delete an order:
Delete the specified order. Since the data is requested in fastmock, the deletion is only relative to the front end.
Implementing the Empty (empty state) component
When the order quantity in the current state is 0, display this component, otherwise display the list component.

According to our needs, we can divide 5 component modules to form the whole page:


The page-level component , which is the parent component of other components;


Display data list component , single data component ;


empty state component ;


The recommended product list component .
Request data in the component, and pass the corresponding array data to the component and the component through props; the component then passes a single data to the component. In this way, the parent component's request data is standardized, and the child component's style division and cooperation are completed.


After analyzing the component composition, complete the construction of the component directory:

2. Implement the Myorder component

First, we first write the component framework according to the requirements, so that the business logic will be clearer later:
This page-level component includes the search box + navigation bar fixed at the top, as well as the OrderList and RecommendList components, so the following component framework can be written:
import React from 'react'
import OrderList from '../OrderList'
import RecommendList from '../RecommendList'
import { OrderWrapper } from './style'
import fanhui from '../../assets/images/fanhui.svg'
import gengduo from '../../assets/images/gengduo.svg'
import sousuo from '../../assets/images/sousuo.svg'

export default function Myorder() {
return (

// search + navbar section

placeholder="Search order"
/>

• All


• Pending payment


• Pending Shipment


• To be received/used


• Review


• Refund

// order list component


// recommendation list component


)
}

With this framework, let's implement the content step by step.
2.1 Implement tab switching effect
First, complete the first requirement: when a tab is clicked, such as 'to be paid', the tab should have a red underline effect. The implementation principle is actually very simple, that is, when we trigger the click event of the tab, we will add the active style we wrote in advance to the tab.
There are two options here:

The first way to do this is to define a state tab to control the content of each

's className:

import React,{ useState} from 'react'
import { OrderWrapper } from './style'

export default function Myorder() {
const [tab,setTab] = useState('all');
const changeTab= (target) => {
setTab(target);
}

return (

...

• all


• to be paid


• to be shipped


• to be received/used


• review


• refund

...

)
}

This method has an obvious disadvantage, that is, only one style name can be added to it. When there are multiple style class names, there will be problems, so the second method can be used.

The second method is to use classnames, which is also the recommended method, and the writing method is relatively simple.

import classnames from 'classnames'
import { OrderWrapper } from './style'

export default function Myorder() {
const [tab,setTab] = useState('all');
const changeTab= (target) => {
setTab(target);
}

return (

...

• all


• to be paid


• to be shipped


• to be received/used
  
• reviews


• refund

...

)
}

When there are multiple class names, add it like this:

all

The effect is as shown in the figure:

2.2 Get data
Two interfaces are prepared here for obtaining order data and recommended product data.
For ease of management, we encapsulate the data request in the api file:

The first interface gets order data. The acquired data needs to be filtered according to the tab state. We also write this step in the interface file:

import axios from 'axios'

// request order data
export const getOrder = ({tab}) =>
axios
.get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/order')
.then ( res => {
let result=res.data;
if(tab){
switch(tab) {
case "Pending payment":
result=result.filter(item => item.state=="to be paid");
break;
case "to be shipped":
result=result.filter(item => item.state=="to be shipped");
break;
case "to be received/used":
result=result.filter(item => item.state=="to be received/used");
break;
case "evaluation":
result=result.filter(item => item.state=="Evaluation");
break;
case "refund":
result=result.filter(item => item.state=="refund");
break;
default:
break;
}
}
return Promise.resolve({
result
});
}
)



The second interface obtains recommended product data:

import axios from 'axios'

// Request recommended product data
export const getCommend = () =>
axios.get('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/goods')

The interface is ready, next we assign the data to the sub-components, and then the task of how the data is displayed on the page is handed over to the sub-components and to complete
import React,{useEffect, useState} from 'react'
import { OrderWrapper } from './style'
import OrderList from './OrderList'
import RecommendList from './RecommendList'

export default function Myorder() {
const [list,setList] =useState([]);
const [recommend,setRecommend] = useState([]);
// Get the recommended product data from the interface
useEffect(()=> {
(async()=> {
const {data} = await getCommend();
setRecommend([...data]);
})()
})
// Get the order data from the interface, and pull it again every time the tab is switched
useEffect(()=>{
(async()=>{
const {result} = await getOrder({tab});
setList([
...result
])
})()
},[tab])

return (

...
{list.length>0 && }
{recommend.length>0 && }

)
}