github.com/grafviktor/keep-my-secret@v0.9.10-0.20230908165355-19f35cce90e5/website/src/components/Home/ListItem/index.jsx (about)

     1  import {useContext} from 'react'
     2  import ApplicationContext from '../../../context'
     3  
     4  import './style.css'
     5  
     6  export default ({secret}) => {
     7    const {
     8      secrets,
     9      setSecret,
    10      navigateTo,
    11      setSecrets,
    12      deleteSecret,
    13      setAlertMessage,
    14    } = useContext(ApplicationContext)
    15  
    16    const onOpenButtonClick = () => {
    17      setSecret(secret)
    18      navigateTo(secret.type)
    19    }
    20  
    21    const onDeleteButtonClick = async () => {
    22      try {
    23        const {data : response} = await deleteSecret(secret.id)
    24        const {[response.data] : _, ...other} = secrets
    25  
    26        setSecrets(other)
    27      } catch (error) {
    28        console.warn(error)
    29        setAlertMessage(`Error: ${error.message}`)
    30      }
    31    }
    32  
    33    const getType = (type) => ({
    34      card : 'Bank Card',
    35      file : 'Secret File',
    36      note : 'Secret Note',
    37      pass : 'Login and Password',
    38    }[type] || type)
    39  
    40    return (
    41      <div className="kms-secret-list__item">
    42        <div className="card kms-secret-card">
    43          <div className="card-body">
    44            <h5 className="card-title">{secret.title}</h5>
    45            <p className="card-text">{getType(secret.type)}</p>
    46            <div className="kms-secret-card__control-pane">
    47              <button
    48                className="btn btn-sm btn-primary"
    49                type="button"
    50                onClick={onOpenButtonClick}
    51              >
    52                Open
    53              </button>
    54  
    55              <button
    56                className="btn btn-sm btn-danger"
    57                type="button"
    58                onClick={onDeleteButtonClick}
    59              >
    60                Delete
    61              </button>
    62            </div>
    63          </div>
    64        </div>
    65      </div>
    66    )
    67  }