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 鏈，並為相關元件新增描述其用途和引數的程式碼內文件。