code7-leia 0.1.105 → 0.1.107

package/src/components/FileArea/index.tsx

@@ -27,6 +27,7 @@ export const FileArea = () => {
   const [modal, setModal] = useState(false)
   const [modalDelete, setModalDelete] = useState(false)
   const [fileDelete, setFileDelete] = useState('')
+  const [presset, setPresset] = useState('');
   const t = getLanguage(language)
   const dispatch = useDispatch();
   const initFiles = useSelector((state: any) => state.files);
@@ -47,7 +48,7 @@ export const FileArea = () => {
     return { label: tag, value: tag }
   })
 
-  const presset = (tags: string) => {
+  const pressetTag = (tags: string) => {
     const tagsSplit = tags.split(',');
     let html = '';
 
@@ -72,9 +73,8 @@ export const FileArea = () => {
     dispatch(deleteFilesAction(fileDelete, id))
   }
 
-  const handleSelect = (value: string | number) => {
-    console.log(value);
-    console.log(uploadFile);
+  const handleUploadFile = () => {
+    console.log('uploadFile: ', uploadFile, 'presset: ', presset, 'id: ', id);
   };
 
   const renderFiles = () => {  
@@ -120,7 +120,7 @@ export const FileArea = () => {
                   {files.map((object) => (
                     <tr>
                       <td>{object.name}</td>
-                      <td className='tags' dangerouslySetInnerHTML={{ __html: presset(object.tags) }} />
+                      <td className='tags' dangerouslySetInnerHTML={{ __html: pressetTag(object.tags) }} />
                       <td>
                         <div className='divDelete'>
                           <button className='buttonDelete' onClick={() => handleOpenModalDelete(object.name)}>{t.buttons.delete}</button>
@@ -131,7 +131,7 @@ export const FileArea = () => {
                 </tbody>
               </Table>
         }
-        <Modal 
+        <Modal
           isOpen={modal}
           maxWidth="600px"
           maxHeight="max-content"
@@ -142,29 +142,30 @@ export const FileArea = () => {
               <div className='choose-file'>
               <AreaUpload
                 setFile={setUploadFile}
+                file={uploadFile?.properties.name}
               />
               </div>
               <div className='presset'>
                 <p>Presset</p>
-                <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={handleSelect} />
+                <Select placeholder={t.testArea.selectPresset} options={optionsPresset} onSelect={setPresset} />
               </div>              
             </ModalContent>
             <ModalFooter>
               <button className='button cancel' onClick={handleOpenModal}>
                 {t.buttons.cancel}
               </button>
-              <button className='button send' type="submit" form="form-tts">
+              <button onClick={() => handleUploadFile()} className='button send' type="submit" form="form-tts">
                 {t.buttons.send}
               </button>
             </ModalFooter>
             
         </Modal>
-        <Modal 
+        <Modal
         isOpen={modalDelete}
         maxWidth="600px"
         maxHeight="max-content"
-        onClose={handleOpenModal}
-        title={t.fileArea.modal.uploadFile}
+        onClose={() => handleOpenModalDelete('')}
+        title={t.fileArea.modal.deleteFileTitle}
         >
           <ModalContent>
             <p id='warning'>{t.fileArea.modal.deleteFile}</p>
@@ -173,7 +174,7 @@ export const FileArea = () => {
             <button className='button cancel' onClick={() => handleOpenModalDelete('')}>
               {t.buttons.cancel}
             </button>
-            <button className='button send' type="submit" form="form-tts" onClick={deleteFile}>
+            <button className='button delete' type="submit" form="form-tts" onClick={deleteFile}>
               {t.buttons.delete}
             </button>
           </ModalFooter>

package/src/components/FileArea/styles.tsx

@@ -47,6 +47,11 @@ export const Container = styled.div`
     color: white;
   }
 
+  .delete {
+    background: #871821;
+    color: white;
+  }
+
   .presset {
     padding-top: 10px;
     display: flex;

package/src/components/TestArea/styles.tsx

@@ -56,6 +56,7 @@ export const Result = styled.div`
   .text{
     margin-left: 5px;
     font-size: 14px;
+    line-height: 1.5;
   }
 
   .icon {

package/src/interface/Language.ts

@@ -13,6 +13,7 @@ type FileArea = {
     descriptionUpload: string;
     chooseFile: string;
     uploadFile: string;
+    deleteFileTitle: string;
     deleteFile: string;
   };
 };

package/src/store/modules/actions.ts

@@ -28,6 +28,20 @@ export const deleteFilesActionSuccess = ({ files }: any) => {
     }
 }
 
+export const uploadFilesAction = (file: any, id: string, pressets: [string]) => {
+    return {
+        type: types.UPLOAD_FILES_REQUEST,
+        payload: { file, id, pressets }
+    }
+}
+
+export const uploadFilesActionSuccess = ({ files }: any) => {
+    return {
+        type: types.UPLOAD_FILES_SUCCESS,
+        payload: { files }
+    }
+}
+
 export const testAction = (question: string, profile: string, presset: string, files_directory: string) => {
     return {
         type: types.TEST_REQUEST,

package/src/store/modules/sagas.ts

@@ -1,7 +1,7 @@
 import { takeLatest, all, put, call } from 'redux-saga/effects';
 import api from '../../service/Api'
 import Types from './types'
-import { getFilesActionSuccess, deleteFilesActionSuccess, testActionSuccess } from './actions'
+import { getFilesActionSuccess, deleteFilesActionSuccess, testActionSuccess, uploadFilesActionSuccess } from './actions'
 
 export function* getFilesSaga(action: any) {
   try {
@@ -34,10 +34,34 @@ export function* testSaga(action: any) {
   }
 }
 
+export function* uploadFilesSaga(action: any) {
+  try {
+    const { id, file, pressets } = action.payload;
+    const tags = pressets.join(',');
+    
+    const formData = new FormData();
+    formData.append('file', file); 
+    
+    const queryParams = new URLSearchParams({ tags }).toString();
+
+    yield call(api.post, `/upload/${id}?${queryParams}`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+
+    const { data } = yield call(api.get, `/files/${id}`);
+    yield put(uploadFilesActionSuccess({ files: data.files }));
+  } catch (error) {
+    console.log('-----------uploadFilesSaga.error------------------->', error);
+  }
+}
+
 export default function* filesSagas() {
   yield all([
     takeLatest(Types.GET_FILES_REQUEST, getFilesSaga),
     takeLatest(Types.DELETE_FILES_REQUEST, deleteFilesSaga),
+    takeLatest(Types.UPLOAD_FILES_REQUEST, uploadFilesSaga),
     takeLatest(Types.TEST_REQUEST, testSaga)
   ]);
 }

package/src/store/modules/types.ts

@@ -3,6 +3,8 @@ const Types = {
   GET_FILES_SUCCESS: 'GET_FILES_SUCCESS',
   DELETE_FILES_REQUEST: 'DELETE_FILES_REQUEST',
   DELETE_FILES_SUCCESS: 'DELETE_FILES_SUCCESS',
+  UPLOAD_FILES_REQUEST: 'UPLOAD_FILES_REQUEST',
+  UPLOAD_FILES_SUCCESS: 'UPLOAD_FILES_SUCCESS',
   TEST_REQUEST: 'TEST_REQUEST',
   TEST_SUCCESS: 'TEST_SUCCESS'
 };

package/src/utils/getLanguage.tsx

@@ -19,6 +19,7 @@ const defaultLanguage: Language = {
       descriptionUpload: 'Drag and drop files here or',
       chooseFile: 'Choose a file',
       uploadFile: 'Upload a file',
+      deleteFileTitle: 'Delete a file',
       deleteFile: 'Important! By deleting this file, you will lose all its information and will not be able to recover it.'
     },
   },
@@ -62,6 +63,7 @@ export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Langua
           descriptionUpload: 'Arraste e solte os arquivos aqui ou',
           chooseFile: 'Escolha um arquivo',
           uploadFile: 'Enviar um arquivo',
+          deleteFileTitle: 'Deletar um arquivo',
           deleteFile: 'Importante! Ao deletar esse arquivo você perderá todas as informações dele e não terá como recuperá-las.'
         },
       },
@@ -104,6 +106,7 @@ export const getLanguage = (language: keyof Record<'en' | 'pt-br' | 'es', Langua
           ...defaultLanguage.fileArea.modal,
           descriptionUpload: 'Arrastre y suelte los archivos aquí o',
           chooseFile: 'Elegir un archivo',
+          deleteFileTitle: 'Eliminar un archivo',
           deleteFile: '¡Importante! Al borrar este archivo perderás toda la información contenida en él y no podrás recuperarla.'
         },
       },