code7-leia 0.1.48 → 0.1.52

package/src/components/FileArea/components/AreaUpload/index.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { getLanguage } from '../../../../utils/getLanguage'
+import { useDropzone, FileRejection } from 'react-dropzone';
+import PropTypes from 'prop-types';
+
+import { Container} from './styles';
+
+interface FileProperties {
+  id: number;
+  lastModified: number;
+  lastModifiedDate: Date;
+  name: string;
+  size: number;
+  type: string;
+}
+
+interface AreaUploadProps {
+  formatFile?: string;
+  multipleFile?: boolean;
+  initialFiles?: File[];
+  removeItem?: (file: FileProperties) => void;
+  setFile?: (file: { content: ArrayBuffer | string; properties: File }) => void;
+  onChange?: (files: File[]) => void;
+  hasListFiles?: boolean;
+}
+
+const AreaUpload: React.FC<AreaUploadProps> = ({
+  formatFile = 'application/pdf',
+  multipleFile = false,
+  initialFiles = [],
+  setFile = () => {},
+  onChange = () => {},
+}) => {
+  const [myFiles, setMyFiles] = useState<File[]>([]);
+  const t = getLanguage('pt-br')
+
+  useEffect(() => {
+    setMyFiles([...initialFiles, ...myFiles]);
+  }, []);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+      if (fileRejections && fileRejections.length > 0) {
+        console.error('Arquivos rejeitados:', fileRejections);
+      }
+
+      onChange(acceptedFiles);
+
+      const files = [...myFiles, ...acceptedFiles];
+      const filesWithId = files.map((item, index) => ({
+        id: index + 1,
+        lastModified: item.lastModified,
+        name: item.name,
+        size: item.size,
+        type: item.type,
+      }));
+      setMyFiles(filesWithId as unknown as File[]);
+
+      acceptedFiles.forEach((file) => {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          const binaryStr = reader.result;
+          setFile({ content: binaryStr as ArrayBuffer, properties: file });
+        };
+        reader.readAsArrayBuffer(file);
+      });
+    },
+    [myFiles]
+  );
+
+  const {
+    getRootProps,
+    getInputProps,
+    open,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+  } = useDropzone({
+    accept: formatFile as any,
+    noClick: true,
+    noKeyboard: true,
+    multiple: multipleFile,
+    onDrop,
+  });
+
+  return (
+    <>
+      {multipleFile || myFiles?.length === 0 ? (
+        <Container
+          {...getRootProps({ isDragActive, isDragAccept, isDragReject })}
+        >
+          <input {...getInputProps()} />
+
+          <span>
+            <p>
+              {t.fileArea.modal.descriptionUpload}
+            </p>
+          </span>
+          <button type="button" onClick={open}>
+            {t.fileArea.modal.chooseFile}
+          </button>
+        </Container>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+AreaUpload.propTypes = {
+  formatFile: PropTypes.string,
+  multipleFile: PropTypes.bool,
+  initialFiles: PropTypes.arrayOf(PropTypes.object as any),
+  removeItem: PropTypes.func,
+  setFile: PropTypes.func,
+  onChange: PropTypes.func,
+  hasListFiles: PropTypes.bool,
+};
+
+AreaUpload.defaultProps = {
+  formatFile: 'application/json',
+  multipleFile: false,
+  initialFiles: [],
+  removeItem: () => {},
+  setFile: () => {},
+  onChange: () => {},
+  hasListFiles: true,
+};
+
+export default AreaUpload;

package/src/components/FileArea/components/AreaUpload/styles.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+  isDragAccept?: boolean;
+  isDragReject?: boolean;
+  isDragActive?: boolean;
+}
+
+const getColor = (props: ContainerProps) => {
+  if (props.isDragAccept) {
+    return '#6690ff';
+  }
+  if (props.isDragReject) {
+    return '#e18976';
+  }
+  if (props.isDragActive) {
+    return '#6690ff';
+  }
+  return '#979aa5';
+};
+
+export const Container = styled.div<ContainerProps>`
+  background-color: #f3f5f9;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 4px;
+  border-color: var(${(props) => getColor(props)});
+  border-style: dashed;
+  color: #5a5d68;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+
+  & > span {
+    margin: 8px 10px 0 0;
+    display: flex;
+  }
+
+  button {
+    padding: 8px 16px 8px 16px;
+    border-radius: 4px;
+    border: 2px #102693 solid;
+    margin-top: 10px;
+  }
+`;
+
+export const ListFiles = styled.div`
+  &.horizontal-itens {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & button {
+      margin: 4px;
+      white-space: nowrap;
+    }
+
+    .tag-file {
+      display: flex;
+      gap: 8px;
+      padding: 10px 24px !important;
+      color: #102693 !important;
+      font-size: 14px;
+      letter-spacing: 0px;
+    }
+
+    .tag-icon {
+      cursor: pointer;
+    }
+  }
+`;

package/src/components/FileArea/index.tsx

@@ -1,11 +1,8 @@
 import React, { useEffect, useState} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { FaUpload, FaList, FaPlus } from 'react-icons/fa';
 
-// import { formatAxios } from '../../utils/formatAxios'
-
-import { useLocation } from 'react-router-dom';
-
 import type { FileData } from '../../interface/FileData'
 
 import { getLanguage } from '../../utils/getLanguage'
@@ -18,14 +15,19 @@ import ModalFooter from './components/Modal/ModalFooter'
 import ModalContent from './components/Modal/ModalContent'
 import EmptyState from '../EmptyState';
 import Select from '../Select'
+import AreaUpload from './components/AreaUpload';
+import { useSharedProps } from '../../contexts/SharedPropsProvider';
+import { getFilesAction } from '../../store/Files/Files.actions';
 
 export const FileArea = () => {
   const [files, setFiles] = useState<FileData[]>([]);
   const [initialFiles, setInitialFiles] = useState<FileData[]>([]);
-  const { pathname } = useLocation();
+  const [uploadFile, setUploadFile] = useState<{ content: ArrayBuffer | string; properties: File }>();
   const [modal, setModal] = useState(false)
-  const id = pathname.split('/')[4]
-  const t = getLanguage('pt-br')
+  const { id, language } = useSharedProps();
+  const t = getLanguage(language)
+  const dispatch = useDispatch();
+  const initFiles = useSelector((state: any) => state.initFiles);
   const tags = [
     "pae",
     "boteria",
@@ -35,45 +37,16 @@ export const FileArea = () => {
   ]
 
   useEffect(() => {
-    setFiles([
-        {
-          "name": "Documentação conceitual Code7_v3",
-          "tags": "boteria, code7"
-        },
-        {
-          "name": "PAE_Programa_Apoio_ao_Empregado",
-          "tags": "pae, vr"
-        },
-        {
-          "name": "Vidalink",
-          "tags": "vidalink, vr"
-        },
-        {
-          "name": "[GUIA PRÁTICO] Como criar o chatbot perfeito",
-          "tags": "ebook, code7"
-        }
-      ])
-
-    setInitialFiles([
-      {
-        "name": "Documentação conceitual Code7_v3",
-        "tags": "boteria, code7"
-      },
-      {
-        "name": "PAE_Programa_Apoio_ao_Empregado",
-        "tags": "pae, vr"
-      },
-      {
-        "name": "Vidalink",
-        "tags": "vidalink, vr"
-      },
-      {
-        "name": "[GUIA PRÁTICO] Como criar o chatbot perfeito",
-        "tags": "ebook, code7"
-      }
-    ])
+    dispatch(getFilesAction(id))
   }, [])
 
+  useEffect(() => {
+    setFiles(initFiles)
+    setInitialFiles(initFiles)
+  }, [initFiles])
+
+
+
   useEffect(() => {
     console.log('files, id, t: ', files, id, t)
   }, [files])
@@ -99,6 +72,7 @@ export const FileArea = () => {
 
   const handleSelect = (value: string | number) => {
     console.log(value);
+    console.log(uploadFile);
   };
 
   const renderFiles = () => {  
@@ -164,7 +138,9 @@ export const FileArea = () => {
           >
             <ModalContent>
               <div className='choose-file'>
-                <input type="file" id="file" name="file" />
+              <AreaUpload
+                setFile={setUploadFile}
+              />
               </div>
               <div className='presset'>
                 <p>Presset</p>

package/src/components/FileArea/styles.tsx

@@ -32,9 +32,9 @@ export const Container = styled.div`
   }
 
   .button {
-    padding: 8px 16px 8px 16px
-    border-radius: 4px
-    gap: 10px
+    padding: 8px 16px 8px 16px;
+    border-radius: 4px;
+    gap: 10px;
   }
 
   .cancel {
@@ -46,6 +46,12 @@ export const Container = styled.div`
     background: #102693;
     color: white;
   }
+
+  .presset {
+    padding-top: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 `;
 
 export const Header = styled.div`

package/src/contexts/SharedPropsProvider.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useContext } from 'react';
+
+interface Props {
+  id: string;
+  language: "en" | "pt-br" | "es";
+  children?: React.ReactNode;
+}
+
+interface SharedPropsContextType {
+  props: Props;
+}
+
+const SharedPropsContext = createContext<SharedPropsContextType | undefined>(undefined);
+
+export const useSharedProps = () => {
+  const context = useContext(SharedPropsContext);
+  if (!context) {
+    throw new Error('useSharedProps deve ser usado dentro de um SharedPropsProvider');
+  }
+  return context.props;
+};
+
+export const SharedPropsProvider: React.FC<Props> = ({ children, ...props }) => {
+  return (
+    <SharedPropsContext.Provider value={{ props }}>
+      {children}
+    </SharedPropsContext.Provider>
+  );
+};

package/src/service/Api.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const API_TOKEN = 'API_TOKEN';
+
+const url = process.env.REACT_APP_API_URL || 'http://localhost:5000/';
+
+axios.defaults.baseURL = `${url}/`;
+
+export default axios.create();

package/src/service/Files/Files.ts

@@ -0,0 +1,8 @@
+import api from '../Api'
+import { FileData } from '../../interface/FileData'
+
+export const getFiles = async (id: string) => {
+  const files:[FileData] = await api.get(`/files/${id}`)
+
+  return files
+}

package/src/store/Files/Files.actions.ts

@@ -0,0 +1,8 @@
+import { getFiles } from '../../service/Files/Files';
+
+export function getFilesAction (id: string) {
+    return {
+        type: 'GET_FILES',
+        payload: getFiles(id)
+    }
+}

package/src/store/Files/Files.reducer.ts

@@ -0,0 +1,8 @@
+export default function (state = [], action: any) {
+    switch (action.type) {
+        case 'GET_FILES':
+            return action.payload;
+        default:
+            return state;
+    }
+}

package/src/store/store.ts

@@ -0,0 +1,12 @@
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import reduxPromise from 'redux-promise';
+import FilesReducer from './Files/Files.reducer';
+import { FileData } from '../interface/FileData'
+
+const rootReducer = combineReducers({
+  files: FilesReducer as unknown as [FileData],
+});
+
+const store = createStore(rootReducer, applyMiddleware(reduxPromise));
+
+export default store;