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

Bắt đầu bằng cách xác định các thành phần frontend được checklist đề cập và xem xét các ví dụ promise và JSDoc được cung cấp. Công việc được xem là hoàn tất khi các props không cần thiết đã được loại bỏ, các chuỗi promise đã xác định được cải thiện và các thành phần liên quan có tài liệu trong mã mô tả mục đích và các đối số của chúng.