Ex: Showing spinner icon until M_1's disabling/deleting process works and showing back the lock/trash icon.

I know how to update one button icon by putting useState. When 1 row has 2 buttons that mean 2 useStates. So 2 rows mean 4 useStates. But that's not practical noh. I want to know how to do it the correct way.

Table with buttons:

View All Page:

import React, { useEffect, useState } from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CRow,
  CSpinner,
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilTrash, cilLockLocked } from '@coreui/icons'

const ViewAll = () => {
  const [usersData, setUsersData] = useState({})

  const [disabled, setDisabled] = useState(false)

  const handleLoadMembers = async () => {
    try {
      const _data = await fetch('http://localhost:4000/api/v1/member/list', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })

      if (_data.status !== 200) {
        throw new Error()
      }

      const data = await _data.json()
      setUsersData(data.members)
    } catch (err) {
      console.error(err)
    }
  }

  const handleDelete = async (id) => {
    alert('clicked')
    try {
      const _data = await fetch('http://localhost:4000/api/v1/member/remove/' + id, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })
      window.location.reload()

      console.log(_data)
    } catch (err) {
      console.error(err)
    }
  }

  useEffect(() => {
    handleLoadMembers()
  }, [])

  return (
    <CRow>
      <CCol xs={12}>
        <CCard className="mb-4">
          <CCardHeader>
            <strong>All Members</strong>
          </CCardHeader>

          {usersData.length > 0 ? (
            <CCardBody>
              <p className="text-medium-emphasis small">Here the all members of your community.</p>
              <CTable hover bordered>
                <CTableHead color="dark">
                  <CTableRow>
                    <CTableHeaderCell scope="col">Member ID</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Name</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Email</CTableHeaderCell>
                    <CTableHeaderCell scope="col">Actions</CTableHeaderCell>
                  </CTableRow>
                </CTableHead>
                <CTableBody>
                  {usersData.map((item, index) => {
                    return (
                      <CTableRow key={index}>
                        <CTableHeaderCell scope="row">M_{item.index}</CTableHeaderCell>
                        <CTableDataCell>{item.name}</CTableDataCell>
                        <CTableDataCell>{item.email}</CTableDataCell>
                        <CTableDataCell class="d-flex justify-content-evenly">
                          <CButton
                            color="danger"
                            size="sm"
                            disabled={disabled}
                            onClick={() => handleDelete(item._id)}
                          >
                            {disabled ? (
                              <CSpinner
                                component="span"
                                className="me-2"
                                size="sm"
                                aria-hidden="true"
                              />
                            ) : (
                              <CIcon icon={cilTrash} className="me-2" />
                            )}
                            Delete
                          </CButton>
                          <CButton
                            color="warning"
                            size="sm"
                            disabled={disabled}
                            onClick={() => handleDelete(item._id)}
                          >
                            {disabled ? (
                              <CSpinner
                                component="span"
                                className="me-2"
                                size="sm"
                                aria-hidden="true"
                              />
                            ) : (
                              <CIcon icon={cilLockLocked} className="me-2" />
                            )}
                            Disable
                          </CButton>
                        </CTableDataCell>
                      </CTableRow>
                    )
                  })}
                </CTableBody>
              </CTable>
            </CCardBody>
          ) : (
            'No data'
          )}
        </CCard>
      </CCol>
    </CRow>
  )
}

export default ViewAll

not for me , i sent this to my friends if they interested, they'll contact you

Traditionally, we’ve built and deployed (Hosted) web applications where we have a 24hrs up and running remote computer called server. Our application runs on that server and we are responsible for provisioning and managing the resources for the severs. There are a few issues with this.

1. We are charged for keeping the server up and running even when we are not serving out any requests.

2. We are responsible for uptime and maintenance of the server and all its resources.

3. We also responsible for applying the appropriate updates and patches to the server.

As our usage scales we need to manage scaling up our server as well. And as a result manage scaling it down when we don’t have as much usage.

For smaller companies and individual developers this can be a lot to handle. This ends up distracting from the more important job that we have; building and maintaining the actual application. At larger organisations this is handled by the infrastructure team and usually it is not the responsibility of the individual developer. However, the processes necessary to support this can end up slowing down development times. As you cannot just go ahead and build your application without working with the infrastructure team to help you get up and running. In Other hand we have to do a lot of things to secure the server from viruses plus cyber attacks and also we have to monitor servers 24h, it’s a painless thing for developers. As developers we’ve been looking for a solution to these problems and this is where Serverless comes in.

What is Serverless?

Serverless computing (or Serverless for short), is an execution model where the cloud provider (AWS, Azure, or Google Cloud) is responsible for executing a piece of code by dynamically allocating the resources. And only charging for the amount of resources used to run the code. The code is typically run inside stateless containers that can be triggered by a variety of events including http requests, database events, queuing services, monitoring alerts, file uploads, scheduled events (cron jobs), etc. The code that is sent to the cloud provider for execution is usually in the form of a function. Hence serverless is sometimes referred to as “Functions as a Service” or “FaaS”.

What is JAMstack ?

A modern web development architecture based on client-side JavaScripts, reusable APIs, and prebuilt Markup It’s called JAMstack, JAM stands for JavaScript, APIs, Markup. The JAMstack is an approach to frontend web development (the construction of content and interfaces that users interact with). It allows developers to quickly create and efficiently serve static websites to users.

A JAMstack website or application is constructed using only above three elements. The static website that the user sees is built out of HTML and CSS markup code. JavaScript is used for any necessary dynamic functionality, and for calling APIs. APIs provide the application's backend.

JAMstack Example

A developer builds a web application that provides updates on European football scores. He creates a backend application that runs on a server he operates and constantly checks the scores of the latest matches. When a user opens up the web application, his server generates HTML pages that display those scores, then sends those pages to the user. However, his web application is somewhat slow: before a user can view those pages, they have to wait for the backend application to run, for the HTML to be generated, and for the HTML to reach their device.

Now suppose the developer rebuilds his entire web application using a JAMstack approach. Instead of writing an entire backend application, he creates a series of lightweight HTML pages that he stores in a CDN (content delivery network). When a user opens up the application, the CDN immediately delivers the corresponding HTML pages to the user, since the CDN is far closer to the user than the developer's server. The application also makes an API call in order to fill out the live football match scores on the page. Now the application loads very quickly for the end user, and from this perspective, there is much less need to write code that will handle the backend, server-side work of updating the scores.

What are the main benefits of using JAMstack?

Performance: Almost all of the content in a JAMstack application is made up of static HTML files that are served from a CDN. This is the fastest way to deliver web content to end users.

Scalability: If an application is "scalable," that means that it responds well to large increases in usage. Because the JAMstack frontend is fast and the backend is lightweight, JAMstack applications are often extremely scalable.

Developer experience: JAMstack enables developers to focus on building a compelling frontend user experience, without worrying about the backend or performance issues.

Resources

https://aws.amazon.com/blogs/compute/the-serverless-lamp-stack-part-4-building-a-serverless-laravel-application/

https://www.freecodecamp.org/news/an-introduction-to-the-jamstack-the-architecture-of-the-modern-web-c4a0d128d9ca/

https://www.cloudflare.com/learning/performance/what-is-jamstack/

Try this > https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97

Angular walata hadapuwa nam ba , anith ewa puluwan

awesome bro , thank you