Documentation and code improvement

Aim

This is an umbrella issue that has the following objectives

• Show the methods of documentation
• Track documentation progress

Progress

• Remove props for components that don't need it
• Convert the .then() promise hell into readable async-await expressions
• Add in-code documentation

Information

.then() Improvements

axios.put(hostname + '/api/gallery/' + props.data.iid, values, {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + localStorage.getItem('atoken')
                },
            })
            .then((response) => {
                if(response.data.ok === true)
                    setMeta({...meta, success: true})
                else
                    setMeta({...meta, error: true})
            })
            .then(() => {
                window.location.reload()
            })
            .catch((error) => {
                console.error(error.response.data.status)
                setMeta({...meta, error: true})
            })

This piece of code can save different ways of fixing

Route 1 - Lesser .then calls

.then is not always required, except for working on a promise. Only axios here returns a promise, so it can be merged.

axios.put(hostname + '/api/gallery/' + props.data.iid, values, {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + localStorage.getItem('atoken')
                },
            })
            .then((response) => {
                if(response.data.ok === true)
                    setMeta({...meta, success: true})
                else
                    setMeta({...meta, error: true})
                window.location.reload()
            })
            .catch((error) => {
                console.error(error.response.data.status)
                setMeta({...meta, error: true})
            })

Route 2 - Use Async await

Consider this alternate syntax:

try{
    const response = await axios.put(hostname + '/api/gallery/' + props.data.iid, values, {
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: 'Bearer ' + localStorage.getItem('atoken')
                },
            });
    if(response.data.ok === true)
        setMeta({...meta, success: true})
    else
        setMeta({...meta, error: true})
    window.location.reload()
}catch(error){
    console.error(error.response.data.status)
    setMeta({...meta, error: true})
}

Refer to

1. (MDN)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function]
2. (Scotch)[https://scotch.io/tutorials/asynchronous-javascript-using-async-await]

JSDoc

Problem

export const component1 = (props) => {
    //...
}

This component is difficult to pull out without referencing a parent component who used it.
Additionally, VSCode cannot provide autocomplete for props.

Solution

Use the JSDOC standard.

/**
 * This component does x y z
 * @param {{data:number[],data2:string}} props
 */
export const component1 = (props) => {
    //...
}

This should explain the reason for the page and what its arguments are.
The added advantage is that VSCode (and GitHub's Markdown, if you can notice) has JSDoc integration, and can read this and provide autocomplete.

Please refer https://jsdoc.app/about-getting-started.html

首先定位 checklist 涵盖的 frontend 组件，并查看提供的 promise 和 JSDoc 示例。完成的标准是移除不必要的 props、改进已识别的 promise 链，并为相关组件添加描述其用途和参数的代码内文档。