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

     1  import cx from 'classnames'
     2  import get from 'lodash/get'
     3  import map from 'lodash/map'
     4  import {useContext, useEffect} from 'react'
     5  import ApplicationContext from '../../context'
     6  import SecretItem from './ListItem'
     7  import './style.css'
     8  
     9  export default ({appBusy}) => {
    10    const {
    11      navigateTo,
    12      fetchSecrets,
    13      setAlertMessage,
    14      setSecret,
    15      setSecrets,
    16      secrets,
    17    } = useContext(ApplicationContext)
    18  
    19    useEffect(() => {
    20      (async () => {
    21        try {
    22          const {data: response} = await fetchSecrets()
    23  
    24          setSecrets(response.data)
    25        } catch (error) {
    26          console.warn(error.message)
    27          setAlertMessage(`Error: ${error.message}`)
    28        }
    29      })()
    30    }, [])
    31  
    32    const onNewItemButtonClick = (event) => {
    33      setSecret(null)
    34  
    35      const view = get(event, 'target.id', 'home')
    36  
    37      navigateTo(view)
    38    }
    39  
    40    return (
    41      <div className="kms-home">
    42        <div className="kms-secret-list">
    43          {map(secrets, (secret, id) => <SecretItem key={id} secret={{id, ...secret}} />)}
    44          <div className={cx(
    45            'spinner-grow text-primary kms-busy-indicator',
    46            {'kms-busy-indicator__shown': appBusy},
    47          )}
    48          >
    49            <span className="visually-hidden">Loading...</span>
    50          </div>
    51        </div>
    52        <div className="btn-group dropup kms-button-add">
    53          <button type="button" className="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    54            New Secret
    55          </button>
    56          <ul className="dropdown-menu">
    57            <li>
    58              <button
    59                type="button"
    60                className="dropdown-item"
    61                id="card"
    62                onClick={onNewItemButtonClick}
    63              >
    64                Payment card
    65              </button>
    66            </li>
    67  
    68            <li>
    69              <button
    70                type="button"
    71                className="dropdown-item"
    72                id="pass"
    73                onClick={onNewItemButtonClick}
    74              >
    75                Password
    76              </button>
    77            </li>
    78  
    79            <li>
    80              <button
    81                type="button"
    82                className="dropdown-item"
    83                id="note"
    84                onClick={onNewItemButtonClick}
    85              >
    86                Note
    87              </button>
    88            </li>
    89  
    90            <li>
    91              <button
    92                type="button"
    93                className="dropdown-item"
    94                id="file"
    95                onClick={onNewItemButtonClick}
    96              >
    97                File
    98              </button>
    99            </li>
   100          </ul>
   101        </div>
   102      </div>
   103    )
   104  }