code7-leia 0.1.113 → 0.1.115

package/dist/interface/Language.d.ts

@@ -33,11 +33,40 @@ declare type TestArea = {
         description: string;
     };
 };
+declare type Toast = {
+    deleteFile: {
+        success: {
+            title: String;
+            description: String;
+        };
+        fail: {
+            title: String;
+            description: String;
+        };
+    };
+    uploadFile: {
+        success: {
+            title: String;
+            description: String;
+        };
+        fail: {
+            title: String;
+            description: String;
+        };
+    };
+    Test: {
+        fail: {
+            title: String;
+            description: String;
+        };
+    };
+};
 export declare type Language = {
     files: string;
     test: string;
     fileArea: FileArea;
     buttons: Buttons;
     testArea: TestArea;
+    toast: Toast;
 };
 export {};

package/dist/store/index.d.ts

@@ -1,7 +1,10 @@
 declare const store: import("redux").Store<{
     files: never[];
     message: string;
-}, any> & {
+    isLoading: boolean;
+    isChanging: boolean;
+    isOffline: boolean;
+}, any, unknown> & {
     dispatch: unknown;
 };
 export default store;

package/dist/store/modules/actions.d.ts

@@ -10,11 +10,12 @@ export declare const getFilesActionSuccess: ({ files }: any) => {
         files: any;
     };
 };
-export declare const deleteFilesAction: (name: string, id: string) => {
+export declare const deleteFilesAction: (name: string, id: string, language: string) => {
     type: string;
     payload: {
         name: string;
         id: string;
+        language: string;
     };
 };
 export declare const deleteFilesActionSuccess: ({ files }: any) => {
@@ -23,12 +24,13 @@ export declare const deleteFilesActionSuccess: ({ files }: any) => {
         files: any;
     };
 };
-export declare const uploadFilesAction: (file: any, id: string, pressets: [string]) => {
+export declare const uploadFilesAction: (file: any, id: string, pressets: [string], language: string) => {
     type: string;
     payload: {
         file: any;
         id: string;
         pressets: [string];
+        language: string;
     };
 };
 export declare const uploadFilesActionSuccess: ({ files }: any) => {
@@ -52,3 +54,21 @@ export declare const testActionSuccess: ({ message }: any) => {
         message: any;
     };
 };
+export declare const commonLoadingStart: () => {
+    type: string;
+};
+export declare const commonLoadingFinish: () => {
+    type: string;
+};
+export declare const commonChangingStart: () => {
+    type: string;
+};
+export declare const commonChangingFinish: () => {
+    type: string;
+};
+export declare const commonNetworkOnline: () => {
+    type: string;
+};
+export declare const commonNetworkOffline: () => {
+    type: string;
+};

package/dist/store/modules/reducer.d.ts

@@ -1,7 +1,13 @@
 export default function filesReducer(state: {
     files: never[];
     message: string;
+    isLoading: boolean;
+    isChanging: boolean;
+    isOffline: boolean;
 } | undefined, action: any): {
     files: never[];
     message: string;
+    isLoading: boolean;
+    isChanging: boolean;
+    isOffline: boolean;
 };

package/dist/store/modules/sagas.d.ts

@@ -8,9 +8,6 @@ export declare function getFilesSaga(action: any): Generator<import("redux-saga/
 }>;
 export declare function deleteFilesSaga(action: any): Generator<import("redux-saga/effects").CallEffect<unknown> | import("redux-saga/effects").PutEffect<{
     type: string;
-    payload: {
-        files: any;
-    };
 }>, void, {
     data: any;
 }>;
@@ -24,9 +21,6 @@ export declare function testSaga(action: any): Generator<import("redux-saga/effe
 }>;
 export declare function uploadFilesSaga(action: any): Generator<import("redux-saga/effects").CallEffect<unknown> | import("redux-saga/effects").PutEffect<{
     type: string;
-    payload: {
-        files: any;
-    };
 }>, void, {
     data: any;
 }>;

package/dist/store/modules/types.d.ts

@@ -7,5 +7,11 @@ declare const Types: {
     UPLOAD_FILES_SUCCESS: string;
     TEST_REQUEST: string;
     TEST_SUCCESS: string;
+    LOADING_START: string;
+    LOADING_FINISH: string;
+    CHANGING_START: string;
+    CHANGING_FINISH: string;
+    NETWORK_ONLINE: string;
+    NETWORK_OFFLINE: string;
 };
 export default Types;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.113",
+  "version": "0.1.115",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -75,6 +75,7 @@
     "react-icons": "^5.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": ">=5",
+    "react-toastify": "^10.0.5",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-promise": "^0.6.0",

package/src/components/CustomToast/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { toast as reactToast } from 'react-toastify';
+
+import { CustomContainerToast } from './styles';
+
+interface CustomToastContentProps {
+  title: String;
+  description?: String;
+}
+
+const CustomToastContent: React.FC<CustomToastContentProps> = ({
+  title,
+  description
+}) => {
+  return (
+    <>
+      <div className="custom-toastify-content">
+        <strong className="custom-toastify-title">{title}</strong>
+        {description && (
+          <p className="custom-toastify-description">{description}</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+const toast = {
+  default: ({ title, description }: CustomToastContentProps) =>
+    reactToast(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  success: ({ title, description }: CustomToastContentProps) =>
+    reactToast.success(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  error: ({ title, description }: CustomToastContentProps) =>
+    reactToast.error(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+  warn: ({ title, description }: CustomToastContentProps) =>
+    reactToast.warn(
+      <CustomToastContent
+        title={title}
+        description={description}
+      />
+    ),
+};
+
+const ContainerToast: React.FC = () => {
+  return <CustomContainerToast autoClose={4000} />;
+};
+
+export { ContainerToast, toast };

package/src/components/CustomToast/styles.tsx

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+interface CustomContainerToastProps {
+}
+
+export const CustomContainerToast = styled(ToastContainer)<CustomContainerToastProps>`
+  .Toastify__toast {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+    padding: 6px 12px;
+    border-radius: 5px;
+
+    .custom-toastify-content {
+      display: flex;
+      flex-direction: column;
+    }
+    .custom-toastify-icon {
+      margin-right: 10px;
+    }
+    .custom-toastify-title {
+      color: #3d4859;
+      font-size: 0.875rem;
+      margin-bottom: 2px;
+    }
+    .custom-toastify-description {
+      color: #5a5d68;
+      font-size: 0.813rem;
+      margin-bottom: 2px;
+    }
+    .custom-toastify-action {
+      margin-top: 14px;
+    }
+  }
+
+  .Toastify__toast--default {
+    background: #fff;
+    border-left: 5px solid #3366FF;
+  }
+
+  .Toastify__toast--success {
+    background: #fff;
+    border-left: 5px solid #3366FF;
+  }
+
+  .Toastify__toast--error {
+    background: #fff;
+    border-left: 5px solid #f9675b;
+  }
+
+  .Toastify__toast--warning {
+    border-left: 5px solid #f9a75b;
+    background: #fff;
+  }
+
+  .Toastify__close-button {
+    color: #858f9e;
+  }
+
+  .Toastify__toast-body {
+    margin: auto 0px;
+    font-size: 1rem;
+    flex: 1 1 0%;
+    display: flex;
+    align-items: center;
+  }
+
+  .Toastify__progress-bar {
+    background: #3d48593d;
+  }
+`;

package/src/components/FileArea/index.tsx

@@ -31,6 +31,7 @@ export const FileArea = () => {
   const t = getLanguage(language)
   const dispatch = useDispatch();
   const initFiles = useSelector((state: any) => state.files);
+  const isLoading = useSelector((state: any) => state.isLoading);
   const tags = propTags ? propTags.tags : [];
 
   useEffect(() => {
@@ -41,6 +42,8 @@ export const FileArea = () => {
     if(!!initFiles){
       setFiles(initFiles)
       setInitialFiles(initFiles)
+      setModal(false)
+      setModalDelete(false)
     }
   }, [initFiles])
 
@@ -66,20 +69,20 @@ export const FileArea = () => {
   const handleOpenModalDelete = (name: string) => {
     setFileDelete(name + '.pdf')
     setModalDelete(!modalDelete)
-
   }
 
   const deleteFile = () => {
-    dispatch(deleteFilesAction(fileDelete, id))
+    dispatch(deleteFilesAction(fileDelete, id, language))
   }
 
   const handleUploadFile = () => {
-    dispatch(uploadFilesAction(uploadFile, id, [presset]))
+    dispatch(uploadFilesAction(uploadFile, id, [presset], language))
   };
 
   const renderFiles = () => {  
     return (
-      <S.Container>
+      <S.Container isLoading={isLoading}>
+        <div id='loading' />
         <S.Header>
           <div className='infos'>
             <h2>{t.files}</h2>

package/src/components/FileArea/styles.tsx

@@ -1,6 +1,43 @@
-import styled from 'styled-components';
+import styled, { css }  from 'styled-components';
+
+interface ContainerProps {
+  isLoading?: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  ${(props) =>
+    props.isLoading &&
+    css`
+      #loading {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #979aa5;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 9999;
+      }
+
+      #loading::after {
+        content: "";
+        border: 4px solid #f3f3f3; /* Cor do símbolo de carregamento */
+        border-top: 4px solid #3498db; /* Cor do símbolo de carregamento */
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}
+
 
-export const Container = styled.div`
   .tag {
     padding: 4px 8px 4px 8px;
     background: #C7F9ED;

package/src/interface/Language.ts

@@ -36,10 +36,40 @@ type TestArea = {
   };
 };
 
+type Toast = {
+  deleteFile: {
+    success: {
+      title: String,
+      description: String
+    },
+    fail: {
+      title: String,
+      description: String
+    }
+  },
+  uploadFile: {
+    success: {
+      title: String,
+      description: String
+    },
+    fail: {
+      title: String,
+      description: String
+    }
+  },
+  Test: {
+    fail: {
+      title: String,
+      description: String
+    }
+  }
+}
+
 export type Language = {
   files: string;
   test: string;
   fileArea: FileArea;
   buttons: Buttons;
   testArea: TestArea;
+  toast: Toast
 };

package/src/store/modules/actions.ts

@@ -14,10 +14,10 @@ export const getFilesActionSuccess = ({ files }: any) => {
     }
 }
 
-export const deleteFilesAction = (name: string, id: string) => {
+export const deleteFilesAction = (name: string, id: string, language: string) => {
     return {
         type: types.DELETE_FILES_REQUEST,
-        payload: { name, id }
+        payload: { name, id, language }
     }
 }
 
@@ -28,10 +28,10 @@ export const deleteFilesActionSuccess = ({ files }: any) => {
     }
 }
 
-export const uploadFilesAction = (file: any, id: string, pressets: [string]) => {
+export const uploadFilesAction = (file: any, id: string, pressets: [string], language: string) => {
     return {
         type: types.UPLOAD_FILES_REQUEST,
-        payload: { file, id, pressets }
+        payload: { file, id, pressets, language }
     }
 }
 
@@ -54,4 +54,28 @@ export const testActionSuccess = ({ message }: any) => {
         type: types.TEST_SUCCESS,
         payload: { message }
     }
-}
+}
+
+export const commonLoadingStart = () => ({
+    type: types.LOADING_START,
+  });
+  
+  export const commonLoadingFinish = () => ({
+    type: types.LOADING_FINISH,
+  });
+  
+  export const commonChangingStart = () => ({
+    type: types.CHANGING_START,
+  });
+  
+  export const commonChangingFinish = () => ({
+    type: types.CHANGING_FINISH,
+  });
+  
+  export const commonNetworkOnline = () => ({
+    type: types.NETWORK_ONLINE,
+  });
+  
+  export const commonNetworkOffline = () => ({
+    type: types.NETWORK_OFFLINE,
+  });

package/src/store/modules/reducer.ts

@@ -3,7 +3,10 @@ import types from './types'
 
 const INITIAL_STATE = {
     files: [],
-    message: ''
+    message: '',
+    isLoading: false,
+    isChanging: false,
+    isOffline: true,
 }
 
 export default function filesReducer(state = INITIAL_STATE, action: any) {
@@ -18,6 +21,24 @@ export default function filesReducer(state = INITIAL_STATE, action: any) {
             case types.TEST_SUCCESS:
                 draft.message = action.payload.message;
                 break;
+            case types.LOADING_START:
+                draft.isLoading = true;
+                break;
+            case types.LOADING_FINISH:
+                draft.isLoading = false;
+                break;
+            case types.CHANGING_START:
+                draft.isChanging = true;
+                break;
+            case types.CHANGING_FINISH:
+                draft.isChanging = false;
+                break;
+            case types.NETWORK_ONLINE:
+                draft.isOffline = false;
+                break;
+            case types.NETWORK_OFFLINE:
+                draft.isOffline = true;
+                break;
             default:
                 return action.payload;
         }

package/src/store/modules/sagas.ts

@@ -1,7 +1,14 @@
 import { takeLatest, all, put, call } from 'redux-saga/effects';
 import api from '../../service/Api'
 import Types from './types'
-import { getFilesActionSuccess, deleteFilesActionSuccess, testActionSuccess, uploadFilesActionSuccess } from './actions'
+import { getFilesActionSuccess, 
+         deleteFilesActionSuccess, 
+         testActionSuccess, 
+         uploadFilesActionSuccess, 
+         commonLoadingStart,
+         commonLoadingFinish, } from './actions'
+import { toast } from '../../components/CustomToast'
+import { getLanguage } from '../../utils/getLanguage'
 
 export function* getFilesSaga(action: any) {
   try {
@@ -14,13 +21,19 @@ export function* getFilesSaga(action: any) {
 }
 
 export function* deleteFilesSaga(action: any) {
+  const t = getLanguage(action.payload.language)
   try {
+    yield put(commonLoadingStart());
     const { id, name } = action.payload
+
     yield call(api.delete, `/delete/${id}/${name}`);
     const { data } = yield call(api.get, `/files/${id}`);
-    yield put(deleteFilesActionSuccess({ files: data.files }));
+    yield put(deleteFilesActionSuccess({ files: data.files, success: true }));
   } catch (error) {
+    toast.error({title: t.toast.deleteFile.fail.title, description: t.toast.deleteFile.fail.description});
     console.log('-----------deleteFilesSaga.error------------------->', error);
+  } finally {
+    yield put(commonLoadingFinish());
   }
 }
 
@@ -35,12 +48,14 @@ export function* testSaga(action: any) {
 }
 
 export function* uploadFilesSaga(action: any) {
+  const t = getLanguage(action.payload.language)
   try {
+    yield put(commonLoadingStart());
     const { id, file, pressets } = action.payload;
     const tags = pressets.join(',');
 
     const blob = new Blob([file.content]);
-    
+
     const formData = new FormData();
     formData.append('file', blob, file.properties.path);
 
@@ -55,7 +70,10 @@ export function* uploadFilesSaga(action: any) {
     const { data } = yield call(api.get, `/files/${id}`);
     yield put(uploadFilesActionSuccess({ files: data.files }));
   } catch (error) {
+    toast.error({title: t.toast.uploadFile.fail.title, description: t.toast.uploadFile.fail.description});
     console.log('-----------uploadFilesSaga.error------------------->', error);
+  } finally {
+    yield put(commonLoadingFinish());
   }
 }
 

package/src/store/modules/types.ts

@@ -6,7 +6,13 @@ const Types = {
   UPLOAD_FILES_REQUEST: 'UPLOAD_FILES_REQUEST',
   UPLOAD_FILES_SUCCESS: 'UPLOAD_FILES_SUCCESS',
   TEST_REQUEST: 'TEST_REQUEST',
-  TEST_SUCCESS: 'TEST_SUCCESS'
+  TEST_SUCCESS: 'TEST_SUCCESS',
+  LOADING_START: 'LOADING_START',
+  LOADING_FINISH: 'LOADING_FINISH',
+  CHANGING_START: 'CHANGING_START',
+  CHANGING_FINISH: 'CHANGING_FINISH',
+  NETWORK_ONLINE: 'NETWORK_ONLINE',
+  NETWORK_OFFLINE: 'NETWORK_OFFLINE',
 };
 
 export default Types;