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

     1  import get from 'lodash/get'
     2  import noop from 'lodash/noop'
     3  import isUndefined from 'lodash/isUndefined'
     4  import {useContext, useState} from 'react'
     5  import ApplicationContext from '../../../context'
     6  
     7  import './style.css'
     8  
     9  export default () => {
    10    const {
    11      secret,
    12      navigateTo,
    13      createSecret,
    14      updateSecret,
    15      getSecretFile,
    16      setAlertMessage,
    17    } = useContext(ApplicationContext)
    18  
    19    const type = 'file'
    20    const secretID = get(secret, 'id')
    21    const [note, setNote] = useState(get(secret, 'note', ''))
    22    const [title, setTitle] = useState(get(secret, 'title', ''))
    23    const [file, setFile] = useState(get(secret, 'file'), null)
    24    const [fileName, setFileName] = useState(get(secret, 'file_name', ''))
    25  
    26    const setValue = (event) => {
    27      const field = get(event, 'target.id', '')
    28      let value = get(event, 'target.value', '')
    29  
    30      if (field === 'file') {
    31        value = get(event, 'target.files[0]', null)
    32        const newFileName = get(event, 'target.files[0].name', '')
    33  
    34        setFileName(newFileName)
    35      }
    36  
    37      const changeValueHandler = {
    38        note     : setNote,
    39        title    : setTitle,
    40        file     : setFile,
    41        filename : setFileName,
    42      }[field] || noop
    43  
    44      changeValueHandler(value)
    45    }
    46  
    47    const onSaveButtonClick = async () => {
    48      // if secret has 'id' fieldm then we're 'updating', otherwise - 'creating'
    49      const apiHandler = isUndefined(secretID) ? createSecret : updateSecret
    50  
    51      try {
    52        await apiHandler({
    53          id: secretID,
    54          type,
    55          title,
    56          note,
    57          file,
    58        }, secretID)
    59  
    60        navigateTo('home')
    61      } catch (error) {
    62        console.warn(error.message)
    63        setAlertMessage(`Error: ${error.message}`)
    64      }
    65    }
    66  
    67    const onDownloadButtonClick = () => {
    68      if (fileName) {
    69        getSecretFile(secretID)
    70      }
    71    }
    72  
    73    return (
    74      <div className="kms-secret-edit">
    75        <form className="kms-secret-edit__form">
    76          <div className="row gy-3">
    77            <div className="col-md-12">
    78              <label htmlFor="title" className="form-label">Title</label>
    79              <input type="text" className="form-control" id="title" value={title} onChange={setValue} />
    80            </div>
    81  
    82            <div className="col-md-6">
    83              <label htmlFor="note" className="form-label">Add a few notes here</label>
    84              <textarea className="form-control" id="note" value={note} onChange={setValue} />
    85            </div>
    86  
    87            {secretID && fileName
    88              && (
    89              <div className="col-md-6  kms-secret-attachment">
    90                <div className="row">
    91                  <p className="col-md-12">
    92                    Attachment:
    93                    {' '}
    94                    {fileName}
    95                  </p>
    96                  <div className="col-md-12">
    97                    <button
    98                      type="button"
    99                      className="btn btn-sm btn-primary"
   100                      onClick={onDownloadButtonClick}
   101                    >
   102                      Download
   103                    </button>
   104                  </div>
   105                </div>
   106              </div>
   107              )}
   108  
   109            {!secretID
   110              && (
   111              <div className="col-md-6">
   112                <label htmlFor="note" className="form-label">Please select a file</label>
   113                <input
   114                  className="form-control"
   115                  id="file"
   116                  type="file"
   117                  onChange={setValue}
   118                />
   119              </div>
   120              )}
   121          </div>
   122        </form>
   123        <div className="kms-secret-edit__controls">
   124          <button type="button" className="btn btn-primary kms-button-add" onClick={onSaveButtonClick}>
   125            Save
   126          </button>
   127          <button type="button" className="btn btn-danger kms-button-add" onClick={() => navigateTo('home')}>
   128            Cancel
   129          </button>
   130        </div>
   131      </div>
   132    )
   133  }