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

Start by locating the frontend components covered by the checklist and review the provided promise and JSDoc examples. Done means unnecessary props are removed, the identified promise chains are improved, and relevant components have in-code documentation describing their purpose and arguments.