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

Beginne damit, die Frontend-Komponenten zu lokalisieren, die von der Checkliste abgedeckt werden, und überprüfe die bereitgestellten Beispiele für promise und JSDoc. Erledigt bedeutet, dass unnötige Props entfernt, die identifizierten Promise-Ketten verbessert wurden und relevante Komponenten eine In-Code-Dokumentation enthalten, die ihren Zweck und ihre Argumente beschreibt.