From d24c619fb6c700bc792cc05f93f685d88194fee5 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Fri, 31 Jul 2020 17:22:32 -0300
Subject: [PATCH] manual uploader wip

---
 src/Components/ExpansionPanels.js             |   2 +-
 src/Components/LoginContainerFunction.js      |   6 +-
 .../ComponentAlterarAvatar.js                 |   2 +-
 .../TabPanels/TabPanelStatusEConquistas.js    |   5 +-
 .../UserPageTabs/PanelEditarPerfil.js         |   2 +-
 .../UploadPageComponents/DragAndDrop.js       |  87 -----------
 .../UploadPageComponents/DragAndDrop.tsx      | 142 ++++++++++++++++++
 .../UploadPageComponents/FileToUpload.ts      |  69 +++++++++
 .../FineUploaderDropzone.js                   |  35 -----
 .../PartTwoComponents/DisplayThumbnail.js     |   2 +-
 .../PartTwoComponents/DragAndDropThumbnail.js |   2 +-
 .../UploadPageComponents/UploadFileWrapper.js |  10 +-
 src/Components/UserPageComponents/Cover.js    |   2 +-
 src/Components/menulist.js                    | 103 -------------
 src/Pages/UploadPage.js                       |   2 +-
 src/env.js                                    |   2 +-
 src/react-app-env.d.ts                        |   1 +
 tsconfig.json                                 |  25 +++
 18 files changed, 255 insertions(+), 244 deletions(-)
 delete mode 100644 src/Components/UploadPageComponents/DragAndDrop.js
 create mode 100644 src/Components/UploadPageComponents/DragAndDrop.tsx
 create mode 100644 src/Components/UploadPageComponents/FileToUpload.ts
 delete mode 100644 src/Components/UploadPageComponents/FineUploaderDropzone.js
 delete mode 100644 src/Components/menulist.js
 create mode 100644 src/react-app-env.d.ts
 create mode 100644 tsconfig.json

diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index 415e8a0e..0ebb3e70 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -80,7 +80,7 @@ export default function SimpleExpansionPanel() {
     <div >
       <ExpansionPanelTeste>
         <ExpansionPanelSummaryColorido
-          expandIcon=<ExpandMoreIcon/>
+          expandIcon={<ExpandMoreIcon/>}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index a6532b50..31aa61be 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -95,7 +95,7 @@ export default function LoginContainer (props) {
     }
 
     //arrumar isso
-    const   = (response) => {
+    const handleGoogleResponse = (response) => {
       console.log(response);
     }
 
@@ -113,14 +113,14 @@ export default function LoginContainer (props) {
 
                 <DialogContentDiv>
                     <SocialConnectDiv>
-                        <StyledGoogleLoginButton
+                        {/*<StyledGoogleLoginButton
                             clientId="288460085642-k4veg4fo8kddvjer8b055n9da5qtgha7.apps.googleusercontent.com"
                             onSuccess={ }
                             onFailure={ }
                             cookiePolicy={'single_host_origin'}
                         >
                         <span style={{textTransform:"none", fontSize:"13px", color : "#666"}}>Usando o Google</span>
-                        </StyledGoogleLoginButton>
+                        </StyledGoogleLoginButton>*/}
                     </SocialConnectDiv>
 
                     <H3Div>
diff --git a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
index ee319370..657c8183 100644
--- a/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
+++ b/src/Components/ModalAlterarAvatar/ComponentAlterarAvatar.js
@@ -88,7 +88,7 @@ export default function ComponentAlterarAvatar (props) {
     const {state, dispatch} = useContext(Store)
     const [uploadingImage, setUploading] = useState(false)
 
-    const handleFile = (selectorFiles : FileList) => {
+    const handleFile = (selectorFiles) => {
         const objectURL = URL.createObjectURL(selectorFiles[0])
         console.log(objectURL)
         setTempImg(objectURL)
diff --git a/src/Components/TabPanels/TabPanelStatusEConquistas.js b/src/Components/TabPanels/TabPanelStatusEConquistas.js
index f42b10b7..00a3a1f2 100644
--- a/src/Components/TabPanels/TabPanelStatusEConquistas.js
+++ b/src/Components/TabPanels/TabPanelStatusEConquistas.js
@@ -64,8 +64,9 @@ export default function TabPanelStatusEConquistas (props) {
 									name={a.title}
 									description={a.description}
 									src={a.imgsrc}
-									requirements={a.requirements}	/>
-									//requirements={[{name: "teste", description: "teste"}]}/>
+									requirements={a.requirements}
+                                    />
+									
 							</Grid>
 						)}
 				)}
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index 7eeb48fa..07a5751e 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -47,7 +47,7 @@ export default function TabPanelEditarPerfil (props) {
         handleAlterarFoto(!hoverAlterarFoto)
     }
 
-    const updateCover = (selectorFiles : FileList) => {
+    const updateCover = (selectorFiles) => {
         console.log(selectorFiles)
         console.log(selectorFiles[0].name)
     }
diff --git a/src/Components/UploadPageComponents/DragAndDrop.js b/src/Components/UploadPageComponents/DragAndDrop.js
deleted file mode 100644
index 6610fafb..00000000
--- a/src/Components/UploadPageComponents/DragAndDrop.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-
-import React, {useState} from 'react'
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import {DottedBox, BlueButton} from './StyledComponents.js';
-
-export default function DragAndDrop (props) {
-    const [dropDepth, setDropDepth] = useState(0)
-    const [inDropZone, toggleInDropZone] = useState(false)
-    const [fileList, setFileList] = useState([])
-
-    const handleDragEnter = e => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        setDropDepth(dropDepth + 1)
-    };
-
-    const handleDragLeave = e => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        setDropDepth(dropDepth - 1)
-        if (dropDepth > 0)
-            toggleInDropZone(true)
-    };
-
-    const handleDragOver = e => {
-        e.preventDefault();
-        e.stopPropagation();
-        e.dataTransfer.dropEffect = 'copy';
-        toggleInDropZone(true)
-    };
-
-    const handleDrop = e => {
-        e.preventDefault();
-        e.stopPropagation();
-        let files = [...e.dataTransfer.files]
-        
-        if (files && files.length > 0) {
-            props.acceptFile(files[0])
-        }
-    };
-
-    const handleUpload = (e, selectorFiles : FileList) => {
-        e.preventDefault();
-        props.acceptFile(selectorFiles[0])
-    }
-    return (
-        <DottedBox
-            onDrop={e => handleDrop(e)}
-            onDragOver={e => handleDragOver(e)}
-            onDragEnter={e => handleDragEnter(e)}
-            onDragLeave={e => handleDragLeave(e)}
-            >
-            <CloudUploadIcon className="icon"/>
-            <input
-                type="file"
-                onChange = {(e) => handleUpload(e, e.target.files)}
-                id="upload-file"
-                style={{display : "none"}}
-                />
-            <BlueButton>
-                <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
-                    ESCOLHER O ARQUIVO
-                </label>
-            </BlueButton>
-            <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
-        </DottedBox>
-    )
-}
diff --git a/src/Components/UploadPageComponents/DragAndDrop.tsx b/src/Components/UploadPageComponents/DragAndDrop.tsx
new file mode 100644
index 00000000..b7c4d210
--- /dev/null
+++ b/src/Components/UploadPageComponents/DragAndDrop.tsx
@@ -0,0 +1,142 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
+
+import React, {useState} from 'react'
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import {DottedBox, BlueButton} from './StyledComponents.js';
+import FileToUpload from './FileToUpload'
+import {getAxiosConfig} from '../HelperFunctions/getAxiosConfig.js'
+
+type Props = {
+    draftID : string;
+}
+
+const UploadMediaComponent: React.FC<Props> = ({draftID, children}) => {
+    const [filesToUpload, setFilesToUpload] = useState([] as FileToUpload[]);
+
+    const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files: FileList | null = e.target.files;
+        if(!files) return;
+
+        let filesToUpload: FileToUpload[] = [];
+        for (let i = 0; i < files.length; i++) {
+            let config = getAxiosConfig()
+            filesToUpload.push(new FileToUpload(files[i], files[i].name, draftID));
+        }
+
+        setFilesToUpload(filesToUpload);
+    };
+
+    const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        for (let i = 0; i < filesToUpload.length; i++) {
+            filesToUpload[i].uploadFile();
+        }
+    };
+
+    return (
+        <div className="upload-container">
+            <h2 className="upload-title">File Uploader</h2>
+            <div className="upload-form">
+                <form id="file_upload" onSubmit={onFormSubmit}>
+                    <div className="upload-file-select">
+                        <label htmlFor="file_1">Select files for upload</label>
+                        <input id="file_1" type="file" multiple onChange={onFileChange}/>
+                    </div>
+
+                    <div className="upload-file-list">
+                        {filesToUpload.map((f,i) => <div className="upload-file" key={i}>{f.name} - {f.file.size}bytes</div>)}
+                    </div>
+
+                    <div className="upload-submit">
+                        <input type="submit" value="submit"/>
+                    </div>
+                </form>
+            </div>
+        </div>
+    )
+}
+UploadMediaComponent.displayName = 'UploadMedia';
+export default UploadMediaComponent;
+
+{/*
+    const [dropDepth, setDropDepth] = useState(0)
+    const [inDropZone, toggleInDropZone] = useState(false)
+    const [fileList, setFileList] = useState([])
+
+    const handleDragEnter = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth + 1)
+    };
+
+    const handleDragLeave = e => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setDropDepth(dropDepth - 1)
+        if (dropDepth > 0)
+            toggleInDropZone(true)
+    };
+
+    const handleDragOver = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'copy';
+        toggleInDropZone(true)
+    };
+
+    const handleDrop = e => {
+        e.preventDefault();
+        e.stopPropagation();
+        let files = [...e.dataTransfer.files]
+
+        if (files && files.length > 0) {
+            props.acceptFile(files[0])
+        }
+    };
+
+    const handleUpload = (e, selectorFiles : FileList) => {
+        e.preventDefault();
+        props.acceptFile(selectorFiles[0])
+    }
+
+
+    <DottedBox
+    onDrop={e => handleDrop(e)}
+    onDragOver={e => handleDragOver(e)}
+    onDragEnter={e => handleDragEnter(e)}
+    onDragLeave={e => handleDragLeave(e)}
+    >
+    <CloudUploadIcon className="icon"/>
+    <input
+        type="file"
+        onChange = {(e) => handleUpload(e, e.target.files)}
+        id="upload-file"
+        style={{display : "none"}}
+        />
+    <BlueButton>
+        <label htmlFor="upload-file" style={{width : "inherit", cursor : "pointer"}}>
+            ESCOLHER O ARQUIVO
+        </label>
+    </BlueButton>
+    <span style={{marginTop : "6px"}}>Ou arrastar e soltar o arquivo aqui</span>
+</DottedBox>
+    */}
diff --git a/src/Components/UploadPageComponents/FileToUpload.ts b/src/Components/UploadPageComponents/FileToUpload.ts
new file mode 100644
index 00000000..96925007
--- /dev/null
+++ b/src/Components/UploadPageComponents/FileToUpload.ts
@@ -0,0 +1,69 @@
+export default class FileToUpload {
+    static chunkSize = 262144;
+    readonly request: XMLHttpRequest;
+    static uploadUrl = 'https://api.portalmec.c3sl.ufpr.br/v1/learning_objects/1231';
+    readonly file: File;
+    readonly name: string;
+    readonly draftID: string;
+    readonly _chunkIdentifier: string;
+    private _chunkNumber: number;
+    currentChunkStartByte: number;
+    currentChunkFinalByte: number;
+
+    constructor(file: File, name: string, draftID : string) {
+        this.request = new XMLHttpRequest();
+        this.request.overrideMimeType('application/octet-stream');
+
+        this.file = file;
+        this.name = name;
+        this.draftID = draftID;
+        this._chunkIdentifier = draftID + '-'  + this.name;
+        this._chunkNumber = 0;
+
+        this.currentChunkStartByte = 0;
+        this.currentChunkFinalByte = FileToUpload.chunkSize > this.file.size ? this.file.size : FileToUpload.chunkSize;
+    }
+
+    uploadFile() {
+        this.request.open('POST', FileToUpload.uploadUrl, true);
+
+        let chunk: Blob = this.file.slice(this.currentChunkStartByte, this.currentChunkFinalByte);  // split the file according to the boundaries
+        this.request.setRequestHeader('Content-Range', `bytes ${this.currentChunkStartByte}-${this.currentChunkFinalByte}/${this.file.size}`);
+
+        //this.request.setRequestHeader('uid', sessionStorage.getItem('@portalmec/uid'))
+        //this.request.setRequestHeader('client', sessionStorage.getItem('@portalmec/clientToken'))
+
+        this.request.onload = () => {
+            const remainingBytes = this.file.size - this.currentChunkFinalByte;
+
+            if(this.currentChunkFinalByte === this.file.size) {
+                alert('Yay, upload completed! Chao!');
+                return;
+            } else if (remainingBytes < FileToUpload.chunkSize) {
+                // if the remaining chunk is smaller than the chunk size we defined
+                this.currentChunkStartByte = this.currentChunkFinalByte;
+                this.currentChunkFinalByte = this.currentChunkStartByte + remainingBytes;
+            }
+            else {
+                // keep chunking
+                this.currentChunkStartByte = this.currentChunkFinalByte;
+                this.currentChunkFinalByte = this.currentChunkStartByte + FileToUpload.chunkSize;
+            }
+
+            this.uploadFile();
+            this._chunkNumber = this._chunkNumber + 1
+        }
+
+        const formData = new FormData();
+        formData.append('_chunkFilename', this.file.name);
+        formData.append('_chunkIdentifier', this._chunkIdentifier);
+        formData.append('_totalChunks', String(Math.ceil(this.file.size/FileToUpload.chunkSize)));
+        formData.append('_chunkSize', String(FileToUpload.chunkSize));
+        formData.append('_currentChunkSize', String(this.currentChunkFinalByte - this.currentChunkStartByte));
+        formData.append('_chunkNumber', String(this._chunkNumber));
+        formData.append('_totalSize', String(this.file.size));
+        formData.append('file', chunk);
+
+        this.request.send(formData);// send it now!
+    }
+}
diff --git a/src/Components/UploadPageComponents/FineUploaderDropzone.js b/src/Components/UploadPageComponents/FineUploaderDropzone.js
deleted file mode 100644
index a00b1bb0..00000000
--- a/src/Components/UploadPageComponents/FineUploaderDropzone.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import Dropzone from 'react-fine-uploader/dropzone'
-import FineUploaderTraditional from 'fine-uploader-wrappers'
-import {apiUrl, apiDomain} from '../../env.js'
-
-export default function FineUploaderDropzone (props) {
-
-    const uploader = new FineUploaderTraditional({
-       options: {
-          request: {
-             endpoint: `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
-         },
-         chunking : {
-             enabled : true,
-             partSize : 10000000,
-         },
-          deleteFile : {
-              enabled : true,
-              endpoint: `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
-          },
-          callbacks : {
-              onUploadChunk : function(id, name, chunkData) {
-                  
-              }
-          }
-       }
-    })
-    return (
-        <Dropzone style={ { border: '1px dotted', height: 200, width: 200 } }
-                  uploader={ uploader }
-        >
-            <span>Drop Files Here</span>
-        </Dropzone>
-    )
-}
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
index b18e67ed..cc123a4c 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DisplayThumbnail.js
@@ -7,7 +7,7 @@ import styled from 'styled-components'
 export default function DisplayThumbnail (props) {
     let windowWidth = window.innerWidth
 
-    const handleUpload = (e, selectorFiles : FileList) => {
+    const handleUpload = (e, selectorFiles) => {
         e.preventDefault();
         props.acceptFile(selectorFiles[0])
     }
diff --git a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
index c472b5f8..f72f957d 100644
--- a/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
+++ b/src/Components/UploadPageComponents/PartTwoComponents/DragAndDropThumbnail.js
@@ -60,7 +60,7 @@ export default function DragAndDropThumbnail (props) {
         }
     };
 
-    const handleUpload = (e, selectorFiles : FileList) => {
+    const handleUpload = (e, selectorFiles) => {
         e.preventDefault();
         props.acceptFile(selectorFiles[0])
     }
diff --git a/src/Components/UploadPageComponents/UploadFileWrapper.js b/src/Components/UploadPageComponents/UploadFileWrapper.js
index 14f7a447..9b9db27a 100644
--- a/src/Components/UploadPageComponents/UploadFileWrapper.js
+++ b/src/Components/UploadPageComponents/UploadFileWrapper.js
@@ -20,10 +20,9 @@ import React, {useState} from 'react'
 import LinkIcon from '../../img/link_icon.svg'
 import ChooseLink from './ChooseLinkSection.js'
 import {WrapperBox, StyledTextField, BlueButton, GrayButton} from './StyledComponents.js';
-import DragAndDrop from './DragAndDrop.js'
+import UploadMediaComponent from './DragAndDrop.tsx'
 import FileUploadStage from './FileUploadStage.js'
-import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
-import FineUploaderDropzone from './FineUploaderDropzone'
+
 export default function UploadFileWrapper (props) {
     /*-----------------------------------------------------------------
         - Wrapper for file upload box
@@ -63,9 +62,8 @@ export default function UploadFileWrapper (props) {
                     <div className="inner">
                         <div className="upload-title"> Enviar Recurso</div>
                         <div className="flex-column">
-                            <UploaderComponent />
-                            <DragAndDrop acceptFile={acceptFile}/>
-                            {/*<FineUploaderDropzone draftID={props.draftID}/>*/}
+                            {/*props.draftID*/}
+                            <UploadMediaComponent draftID={'123123'}/>
                             <div className="strike-box">
                                 <div className="strike"/><h3>ou</h3><div className="strike"/>
                             </div>
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
index f0a1d8cd..2af5bd74 100644
--- a/src/Components/UserPageComponents/Cover.js
+++ b/src/Components/UserPageComponents/Cover.js
@@ -34,7 +34,7 @@ export default function Cover (props) {
     const [open, toggleOpen] = useState(false)
     const controlModal = () => {toggleOpen(!open)}
 
-    const updateCover = (selectorFiles : FileList) => {
+    const updateCover = (selectorFiles) => {
         const objectURL = URL.createObjectURL(selectorFiles[0])
         console.log(objectURL)
         setTempCover(objectURL)
diff --git a/src/Components/menulist.js b/src/Components/menulist.js
deleted file mode 100644
index cb070389..00000000
--- a/src/Components/menulist.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
-Departamento de Informatica - Universidade Federal do Parana
-
-This file is part of Plataforma Integrada MEC.
-
-Plataforma Integrada MEC is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-Plataforma Integrada MEC is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-import Grow from '@material-ui/core/Grow';
-import Paper from '@material-ui/core/Paper';
-import Popper from '@material-ui/core/Popper';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = theme => ({
-  root: {
-    display: 'flex',
-  },
-  paper: {
-    marginRight: theme.spacing.unit * 2,
-  },
-});
-
-class MenuListComposition extends React.Component {
-  state = {
-    open: false,
-  };
-
-  handleToggle = () => {
-    this.setState(state => ({ open: !state.open }));
-  };
-
-  handleClose = event => {
-    if (this.anchorEl.contains(event.target)) {
-      return;
-    }
-
-    this.setState({ open: false });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { open } = this.state;
-
-    return (
-      <div className={classes.root}>
-
-        <div>
-          <Button
-            buttonRef={node => {
-              this.anchorEl = node;
-            }}
-            aria-owns={open ? 'menu-list-grow' : undefined}
-            aria-haspopup="true"
-            onClick={this.handleToggle}
-          >
-            {this.props.label}
-          </Button>
-          <Popper open={open} anchorEl={this.anchorEl} transition disablePortal>
-            {({ TransitionProps, placement }) => (
-              <Grow
-                {...TransitionProps}
-                id="menu-list-grow"
-                style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
-              >
-                <Paper>
-                  <ClickAwayListener onClickAway={this.handleClose}>
-                    <MenuList>
-                      <MenuItem onClick={this.handleClose}>Profile</MenuItem>
-                      <MenuItem onClick={this.handleClose}>My account</MenuItem>
-                      <MenuItem onClick={this.handleClose}>Logout</MenuItem>
-                    </MenuList>
-                  </ClickAwayListener>
-                </Paper>
-              </Grow>
-            )}
-          </Popper>
-        </div>
-      </div>
-    );
-  }
-}
-
-MenuListComposition.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(MenuListComposition);
diff --git a/src/Pages/UploadPage.js b/src/Pages/UploadPage.js
index 08992d89..57fad683 100644
--- a/src/Pages/UploadPage.js
+++ b/src/Pages/UploadPage.js
@@ -109,7 +109,7 @@ export default function UploadPage (props) {
     return (
         <React.Fragment>
             {
-                state.currentUser.id !== '' ?
+                state.currentUser.id === '' ?
                 (
                     <React.Fragment>
             <Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
diff --git a/src/env.js b/src/env.js
index 2450da0f..1f221ee7 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
 
-var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
     apiVersion = 'v1',
     apiUrl = apiDomain + '/' + apiVersion;
 
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 00000000..6431bc5f
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..0980b23f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}
-- 
GitLab