From 2388ae66b061bc02c5200867cf080f249bc342c0 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sun, 3 May 2020 21:39:30 +0500
Subject: [PATCH 01/66] TrayIcon show and hide on focus

---
 src/components/TrayIcon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TrayIcon.js b/src/components/TrayIcon.js
index 94c22e0a03..c14b1f4450 100644
--- a/src/components/TrayIcon.js
+++ b/src/components/TrayIcon.js
@@ -17,7 +17,7 @@ import { createEventChannelFromEmitter } from '../sagaUtils';
 
 export function TrayIcon() {
 	const appName = remote.app.name;
-	const isMainWindowToBeShown = useSelector(({ mainWindowState: { visible } }) => !visible);
+	const isMainWindowToBeShown = useSelector(({ mainWindowState: { focused } }) => !focused);
 	const isTrayIconEnabled = useSelector(({ isTrayIconEnabled }) => isTrayIconEnabled);
 
 	const badge = useSelector(({ servers }) => {

From 4d12049f6a00ec8d0be7840e87d4edaf1823c73f Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Mon, 1 Jun 2020 17:03:54 +0500
Subject: [PATCH 02/66] downlads page created

---
 src/actions.js                                |  1 +
 src/components/DownloadsManagerView/index.js  | 30 +++++++++++++++
 src/components/DownloadsManagerView/styles.js | 23 ++++++++++++
 src/components/Shell/index.js                 |  2 +
 src/components/SideBar/index.js               | 13 +++++++
 src/components/SideBar/styles.js              | 37 +++++++++++++++++++
 src/reducers/currentServerUrl.js              |  5 +++
 7 files changed, 111 insertions(+)
 create mode 100644 src/components/DownloadsManagerView/index.js
 create mode 100644 src/components/DownloadsManagerView/styles.js

diff --git a/src/actions.js b/src/actions.js
index a99802ceb4..89dac89da1 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -44,6 +44,7 @@ export const SELECT_CLIENT_CERTIFICATE_DIALOG_CERTIFICATE_SELECTED = 'select-cli
 export const SELECT_CLIENT_CERTIFICATE_DIALOG_DISMISSED = 'select-client-certificatedialog/dismissed';
 export const SERVERS_READY = 'servers/ready';
 export const SIDE_BAR_ADD_NEW_SERVER_CLICKED = 'side-bar/add-new-server-clicked';
+export const SIDE_BAR_DOWNLOADS_BUTTON_CLICKED = 'side-bar/downloads-button-clicked';
 export const SIDE_BAR_OPEN_DEVTOOLS_FOR_SERVER_CLICKED = 'side-bar/open-devtools-for-server-clicked';
 export const SIDE_BAR_RELOAD_SERVER_CLICKED = 'side-bar/reload-server-clicked';
 export const SIDE_BAR_REMOVE_SERVER_CLICKED = 'side-bar/remove-server-clicked';
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
new file mode 100644
index 0000000000..79ff180672
--- /dev/null
+++ b/src/components/DownloadsManagerView/index.js
@@ -0,0 +1,30 @@
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Callout,
+	Field,
+	FieldGroup,
+	Margins,
+	TextInput,
+	Tile,
+} from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Wrapper, Content } from './styles';
+import { RocketChatLogo } from '../RocketChatLogo';
+
+
+export function DownloadsManagerView() {
+	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
+	console.log(isVisible);
+	return <Wrapper isVisible= {isVisible}>
+		<Content>
+			<Margins block='x16'>
+				<RocketChatLogo alternate/>
+			</Margins>
+		</Content>
+	</Wrapper>;
+}
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
new file mode 100644
index 0000000000..3073f60ada
--- /dev/null
+++ b/src/components/DownloadsManagerView/styles.js
@@ -0,0 +1,23 @@
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.section`
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #FFF;
+
+	overflow-y: auto;
+	align-items: center;
+	-webkit-app-region: drag;
+	justify-content: center;
+
+	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
+`;
+
+export const Content = styled.div`
+	width: 520px;
+	max-width: 100%;
+`;
diff --git a/src/components/Shell/index.js b/src/components/Shell/index.js
index e62b0ba4b3..1f06720410 100644
--- a/src/components/Shell/index.js
+++ b/src/components/Shell/index.js
@@ -6,6 +6,7 @@ import { GlobalStyles, Wrapper, WindowDragBar, ViewsWrapper } from './styles';
 import { SideBar } from '../SideBar';
 import { ServersView } from '../ServersView';
 import { AddServerView } from '../AddServerView';
+import { DownloadsManagerView } from '../DownloadsManagerView';
 import { AboutDialog } from '../AboutDialog';
 import { ScreenSharingDialog } from '../ScreenSharingDialog';
 import { SelectClientCertificateDialog } from '../SelectClientCertificateDialog';
@@ -29,6 +30,7 @@ export function Shell() {
 			<ViewsWrapper isFull={isFull}>
 				<ServersView />
 				<AddServerView />
+				<DownloadsManagerView />
 			</ViewsWrapper>
 		</Wrapper>
 		<AboutDialog />
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 116cb027eb..897af7221e 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -13,11 +13,14 @@ import {
 	SIDE_BAR_OPEN_DEVTOOLS_FOR_SERVER_CLICKED,
 	SIDE_BAR_ADD_NEW_SERVER_CLICKED,
 	WEBVIEW_FAVICON_CHANGED,
+	SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
 } from '../../actions';
 import { useSaga } from '../SagaMiddlewareProvider';
 import {
 	AddServerButton,
 	AddServerButtonLabel,
+	DownloadsManagerButton,
+	DownloadsManagerLabel,
 	Avatar,
 	Badge,
 	Content,
@@ -158,6 +161,10 @@ export function SideBar() {
 		dispatch({ type: SIDE_BAR_ADD_NEW_SERVER_CLICKED });
 	};
 
+	const handelDownloadsButtonClicked = () => {
+		dispatch({ type: SIDE_BAR_DOWNLOADS_BUTTON_CLICKED });
+	};
+
 	const { t } = useTranslation();
 
 	return <Wrapper background={background} color={color} isVisible={isVisible}>
@@ -188,6 +195,12 @@ export function SideBar() {
 					onClick={handleAddServerButtonClicked}
 				>+</AddServerButtonLabel>
 			</AddServerButton>
+			<DownloadsManagerButton>
+				<DownloadsManagerLabel
+					tooltip='Downloads'
+					onClick={handelDownloadsButtonClicked}
+				>-</DownloadsManagerLabel>
+			</DownloadsManagerButton>
 		</Content>
 	</Wrapper>;
 }
diff --git a/src/components/SideBar/styles.js b/src/components/SideBar/styles.js
index fdbbec823e..ea424aefa2 100644
--- a/src/components/SideBar/styles.js
+++ b/src/components/SideBar/styles.js
@@ -207,3 +207,40 @@ export const AddServerButtonLabel = styled.span`
 
 	${ withTooltip }
 `;
+
+export const DownloadsManagerButton = styled.button`
+	font-family: inherit;
+	position: relative;
+	flex: 0 0 auto;
+	box-sizing: border-box;
+	margin: 4px 0;
+	font-size: 2.5rem;
+	line-height: 1.25;
+	display: flex;
+	flex-direction: row;
+	height: 40px;
+	padding: 0;
+	color: inherit;
+	border: none;
+	background: none;
+	align-items: center;
+	justify-content: center;
+`;
+
+export const DownloadsManagerLabel = styled.span`
+	display: block;
+	line-height: 30px;
+	width: 40px;
+	height: 40px;
+	transition: opacity var(--transitions-duration);
+	opacity: 0.6;
+	color: inherit;
+	background-color: rgba(0, 0, 0, 0.1);
+	cursor: pointer;
+
+	&:hover {
+		opacity: 1;
+	}
+
+	${ withTooltip }
+`;
diff --git a/src/reducers/currentServerUrl.js b/src/reducers/currentServerUrl.js
index eacabf2bb9..5f85e6ef32 100644
--- a/src/reducers/currentServerUrl.js
+++ b/src/reducers/currentServerUrl.js
@@ -4,6 +4,7 @@ import {
 	MENU_BAR_SELECT_SERVER_CLICKED,
 	SERVERS_READY,
 	SIDE_BAR_ADD_NEW_SERVER_CLICKED,
+	SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
 	SIDE_BAR_REMOVE_SERVER_CLICKED,
 	SIDE_BAR_SERVER_SELECTED,
 	TOUCH_BAR_SELECT_SERVER_TOUCHED,
@@ -41,6 +42,10 @@ export const currentServerUrl = (state = null, { type, payload }) => {
 		case SIDE_BAR_ADD_NEW_SERVER_CLICKED:
 			return null;
 
+		case SIDE_BAR_DOWNLOADS_BUTTON_CLICKED:
+			console.log('Downloads clicked');
+			return 'Downloads';
+
 		case WEBVIEW_FOCUS_REQUESTED: {
 			const { url } = payload;
 			return url;

From fb9c20b262ecbe930888016569d901ec337258a3 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Mon, 1 Jun 2020 22:11:29 +0500
Subject: [PATCH 03/66] downloads icon and icon position

---
 src/components/DownloadsManagerView/index.js | 1 -
 src/components/SideBar/index.js              | 5 ++++-
 src/components/SideBar/styles.js             | 8 +++++---
 src/reducers/currentServerUrl.js             | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 79ff180672..608f52fdc1 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -19,7 +19,6 @@ import { RocketChatLogo } from '../RocketChatLogo';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	console.log(isVisible);
 	return <Wrapper isVisible= {isVisible}>
 		<Content>
 			<Margins block='x16'>
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 897af7221e..d9d2453afd 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -5,6 +5,7 @@ import React, { useState, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { takeEvery } from 'redux-saga/effects';
+import { Icon } from '@rocket.chat/fuselage';
 
 import {
 	SIDE_BAR_SERVER_SELECTED,
@@ -199,7 +200,9 @@ export function SideBar() {
 				<DownloadsManagerLabel
 					tooltip='Downloads'
 					onClick={handelDownloadsButtonClicked}
-				>-</DownloadsManagerLabel>
+				>
+					<Icon name='download'/>
+				</DownloadsManagerLabel>
 			</DownloadsManagerButton>
 		</Content>
 	</Wrapper>;
diff --git a/src/components/SideBar/styles.js b/src/components/SideBar/styles.js
index ea424aefa2..4cc846a817 100644
--- a/src/components/SideBar/styles.js
+++ b/src/components/SideBar/styles.js
@@ -218,20 +218,22 @@ export const DownloadsManagerButton = styled.button`
 	line-height: 1.25;
 	display: flex;
 	flex-direction: row;
-	height: 40px;
+	height: 35px;
 	padding: 0;
 	color: inherit;
 	border: none;
 	background: none;
 	align-items: center;
 	justify-content: center;
+	margin-top: auto;
+	bottom: 5%;
 `;
 
 export const DownloadsManagerLabel = styled.span`
 	display: block;
 	line-height: 30px;
-	width: 40px;
-	height: 40px;
+	width: 35px;
+	height: 35px;
 	transition: opacity var(--transitions-duration);
 	opacity: 0.6;
 	color: inherit;
diff --git a/src/reducers/currentServerUrl.js b/src/reducers/currentServerUrl.js
index 5f85e6ef32..7ba64ce932 100644
--- a/src/reducers/currentServerUrl.js
+++ b/src/reducers/currentServerUrl.js
@@ -43,7 +43,7 @@ export const currentServerUrl = (state = null, { type, payload }) => {
 			return null;
 
 		case SIDE_BAR_DOWNLOADS_BUTTON_CLICKED:
-			console.log('Downloads clicked');
+
 			return 'Downloads';
 
 		case WEBVIEW_FOCUS_REQUESTED: {

From 47b388891b112cea63e83b632e9532136d38272a Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 3 Jun 2020 00:11:17 +0500
Subject: [PATCH 04/66] title and subtitle

---
 .../DownloadsComponents/DownloadItem.js       | 43 +++++++++++++++++++
 src/components/DownloadsManagerView/index.js  | 28 +++++++-----
 src/components/DownloadsManagerView/styles.js | 26 +++++++++--
 3 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 src/components/DownloadsComponents/DownloadItem.js

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
new file mode 100644
index 0000000000..1dd7b2ca37
--- /dev/null
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -0,0 +1,43 @@
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Callout,
+	Field,
+	FieldGroup,
+	Margins,
+	TextInput,
+	Tile,
+	Grid,
+	Icon,
+} from '@rocket.chat/fuselage';
+
+import React from 'react';
+
+
+export default function DownloadItem() {
+	return <Box height='x200' width='100%'>
+		<Grid md={true}>
+			<Grid.Item md='2'>
+				<Box height='200px' width='200px'>
+					<img src='' alt='' style={{ height: '200px', width: '200px' }} />
+				</Box>
+			</Grid.Item>
+			<Grid.Item md='4'>
+				<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+					<h3>Filename.png</h3>
+					<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+						<span>@Server</span> <span>11:00PM</span> <span>25MB</span>
+					</div>
+					<p>https://google.com</p>
+					<a href='#'>Show in Folder</a>
+				</div>
+			</Grid.Item>
+			<Grid.Item md='1'>
+				<div style={{ display: 'flex', justifyContent: 'center' }}>
+					<Icon name='cross' />
+				</div>
+			</Grid.Item>
+		</Grid>
+	</Box>;
+}
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 608f52fdc1..cc147abe40 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -8,22 +8,30 @@ import {
 	Margins,
 	TextInput,
 	Tile,
+	Grid,
 } from '@rocket.chat/fuselage';
-import { useTranslation } from 'react-i18next';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { Wrapper, Content } from './styles';
-import { RocketChatLogo } from '../RocketChatLogo';
+// import { useTranslation } from 'react-i18next';
+import React from 'react';
+import { useSelector } from 'react-redux';
 
+import { Wrapper, Content, Title, Subtitle } from './styles';
+import DownloadItem from '../DownloadsComponents/DownloadItem';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	return <Wrapper isVisible= {isVisible}>
+	return <Wrapper isVisible={isVisible}>
 		<Content>
-			<Margins block='x16'>
-				<RocketChatLogo alternate/>
-			</Margins>
+			<Grid xl={true}>
+				<Grid.Item xl='8'>
+					<Tile>
+						<Title>Downloads Manager</Title>
+						<Subtitle>See all your downloads here</Subtitle>
+					</Tile>
+				</Grid.Item>
+				<Grid.Item xl='4'>
+
+				</Grid.Item>
+			</Grid>
 		</Content>
 	</Wrapper>;
 }
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index 3073f60ada..a4239a159c 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -1,16 +1,17 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 
+
 export const Wrapper = styled.section`
 	position: absolute;
 	left: 0;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	background-color: #FFF;
+	background-color: bisque;
 
 	overflow-y: auto;
-	align-items: center;
+	// align-items: center;
 	-webkit-app-region: drag;
 	justify-content: center;
 
@@ -18,6 +19,25 @@ export const Wrapper = styled.section`
 `;
 
 export const Content = styled.div`
-	width: 520px;
+	position: relative;
+	top: 10%;
+	width: 90%;
+	// height: 100%;
 	max-width: 100%;
+	// max-height: 100%;
+`;
+
+
+export const Title = styled.h1`
+	// color: blue;
 `;
+
+export const Subtitle = styled.h4`
+	color: lightslategrey;
+`;
+
+
+// export const MainGrid = styled.Grid`
+// 	height: 100%;
+// 	overflow-y: auto;
+// `;

From 1ba42ed96da363b45eb777250ef40f4e20a879cd Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 3 Jun 2020 00:14:30 +0500
Subject: [PATCH 05/66] basic download item

---
 src/components/DownloadsManagerView/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index cc147abe40..dfc8517ead 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -31,6 +31,10 @@ export function DownloadsManagerView() {
 				<Grid.Item xl='4'>
 
 				</Grid.Item>
+				<Grid.Item>
+					<DownloadItem>
+					</DownloadItem>
+				</Grid.Item>
 			</Grid>
 		</Content>
 	</Wrapper>;

From 92929e3145a89e261e26f7784c2bb06d4ad3c803 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 13 Jun 2020 23:07:27 +0500
Subject: [PATCH 06/66] download item ui rough

---
 package.json                                  |    2 +
 rollup.config.js                              |    4 +
 .../DownloadsComponents/DownloadItem.js       |   55 +-
 .../DownloadsComponents/DownloadsList.js      |    8 +
 src/components/DownloadsManagerView/index.js  |   57 +-
 src/components/DownloadsManagerView/styles.js |   14 +-
 src/main.js                                   |   34 +-
 src/preload/links.js                          |    1 +
 yarn.lock                                     | 1060 ++++++++++++++++-
 9 files changed, 1174 insertions(+), 61 deletions(-)
 create mode 100644 src/components/DownloadsComponents/DownloadsList.js

diff --git a/package.json b/package.json
index f8b4ec5d45..bd99700590 100644
--- a/package.json
+++ b/package.json
@@ -87,12 +87,14 @@
     "gulp-cli": "^2.0.1",
     "gulp-execa": "^2.0.0",
     "mocha": "^7.0.1",
+    "react-sweet-progress": "^1.1.2",
     "rollup": "^1.1.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^3.1.2",
     "rollup-plugin-replace": "^2.1.0",
     "to-ico": "^1.1.5",
     "xvfb-maybe": "^0.2.1"
diff --git a/rollup.config.js b/rollup.config.js
index 085880c965..a888b29aec 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,6 +6,7 @@ import copy from 'rollup-plugin-copy';
 import json from 'rollup-plugin-json';
 import nodeResolve from 'rollup-plugin-node-resolve';
 import replace from 'rollup-plugin-replace';
+import postcss from 'rollup-plugin-postcss';
 
 import appManifest from './package.json';
 
@@ -33,6 +34,9 @@ const bundleOptions = {
 		babel(),
 		nodeResolve(),
 		commonjs(),
+		postcss({
+			plugins: [],
+		}),
 	],
 };
 
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 1dd7b2ca37..3954ea77fb 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -11,33 +11,36 @@ import {
 	Grid,
 	Icon,
 } from '@rocket.chat/fuselage';
+import React, { useEffect } from 'react';
+import { Progress } from 'react-sweet-progress';
+import 'react-sweet-progress/lib/style.css';
 
-import React from 'react';
+// recieve props for individual download item
+export default function DownloadItem({ filename, filesize, url }) {
+	// const date = new Date().toLocaleTimeString();
 
-
-export default function DownloadItem() {
-	return <Box height='x200' width='100%'>
-		<Grid md={true}>
-			<Grid.Item md='2'>
-				<Box height='200px' width='200px'>
-					<img src='' alt='' style={{ height: '200px', width: '200px' }} />
+	return <Margins all='x32'>
+		<Tile elevation='2' style={ { width: '75%' } }>
+			<Grid>
+				{/* Box component styles not working properly */}
+				<Box height='16.5rem' width='100%' display='flex' alignItems='center'>
+					<Grid.Item md={ 2 } style={ { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
+						<div style={ { height: '200px', width: '200px', backgroundColor: 'lightblue', borderRadius: '10px' } }></div>
+					</Grid.Item>
+					<Grid.Item style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
+						<h3>{ 'filename' }</h3>
+						<div style={ { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '75%' } }>
+							<span>@Server</span> <span> { 'date' }</span> <span>{ 'filesize' || '25MB' }</span>
+						</div>
+						<Progress theme={ { default: { color: 'lightblue' } } } percent={ 88 } status='default' />
+						<p>{ 'url' || 'https://google.com' }</p>
+						<a href='#'> Show in Folder</a>
+					</Grid.Item>
+					<Grid.Item md='1'>
+						<Icon name='cross' size='x64' />
+					</Grid.Item>
 				</Box>
-			</Grid.Item>
-			<Grid.Item md='4'>
-				<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-					<h3>Filename.png</h3>
-					<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
-						<span>@Server</span> <span>11:00PM</span> <span>25MB</span>
-					</div>
-					<p>https://google.com</p>
-					<a href='#'>Show in Folder</a>
-				</div>
-			</Grid.Item>
-			<Grid.Item md='1'>
-				<div style={{ display: 'flex', justifyContent: 'center' }}>
-					<Icon name='cross' />
-				</div>
-			</Grid.Item>
-		</Grid>
-	</Box>;
+			</Grid>
+		</Tile>
+	</Margins>;
 }
diff --git a/src/components/DownloadsComponents/DownloadsList.js b/src/components/DownloadsComponents/DownloadsList.js
new file mode 100644
index 0000000000..2adc9886ef
--- /dev/null
+++ b/src/components/DownloadsComponents/DownloadsList.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+import DownloadItem from './DownloadItem';
+
+export default function DownloadsList({ items }) {
+	// placeholder for multiple downloads
+	return items.map((item) => <DownloadItem />);
+};
\ No newline at end of file
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index dfc8517ead..05df13b110 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -9,32 +9,61 @@ import {
 	TextInput,
 	Tile,
 	Grid,
+	Divider,
 } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { remote, ipcRenderer } from 'electron';
 
 import { Wrapper, Content, Title, Subtitle } from './styles';
-import DownloadItem from '../DownloadsComponents/DownloadItem';
+import DownloadsList from '../DownloadsComponents/DownloadsList';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	return <Wrapper isVisible={isVisible}>
+
+	// const [url, setUrl] = useState('');
+	// const [filename, setFileName] = useState('');
+	// const [filesize, setFileSize] = useState(0);
+
+	// useEffect(() => {
+	// 	const handleFileSize = (event, totalsize) => {
+	// 		console.log('hello yes changed');
+	// 		setFileSize(totalsize);
+	// 		console.log(totalsize);
+	// 		console.log(filesize);
+	// 	};
+
+	// 	ipcRenderer.on('download-complete', handleFileSize);
+	// 	return () => {
+	// 		ipcRenderer.removeListener('download-complete', handleFileSize);
+	// 	};
+	// }, []);
+
+	return <Wrapper isVisible={ isVisible }>
 		<Content>
-			<Grid xl={true}>
-				<Grid.Item xl='8'>
-					<Tile>
-						<Title>Downloads Manager</Title>
-						<Subtitle>See all your downloads here</Subtitle>
-					</Tile>
-				</Grid.Item>
-				<Grid.Item xl='4'>
+			<Grid xl={ true } style={ { display: 'flex', justifyContent: 'center' } }>
+
+				<Box width='70%' display='flex' flexDirection='row'>
+					<Grid.Item xl={ 8 }>
+						<Tile>
+							<Box paddingInlineStart='9.375rem'>
+								<h1>Downloads</h1>
+								<h3>See all your downloads here</h3>
+							</Box>
+						</Tile>
+					</Grid.Item>
+					<Grid.Item xl={ 4 }>
+					</Grid.Item>
+				</Box>
 
+				<Grid.Item xl={ 9 } width='75%'>
+					<Divider />
 				</Grid.Item>
-				<Grid.Item>
-					<DownloadItem>
-					</DownloadItem>
+				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+					<DownloadsList items={ [1, 2, 3] } />
 				</Grid.Item>
+
 			</Grid>
 		</Content>
 	</Wrapper>;
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index a4239a159c..9d88c59e97 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -8,11 +8,11 @@ export const Wrapper = styled.section`
 	top: 0;
 	right: 0;
 	bottom: 0;
-	background-color: bisque;
+	background-color: white;
 
 	overflow-y: auto;
 	// align-items: center;
-	-webkit-app-region: drag;
+	// -webkit-app-region: drag;
 	justify-content: center;
 
 	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
@@ -20,8 +20,8 @@ export const Wrapper = styled.section`
 
 export const Content = styled.div`
 	position: relative;
-	top: 10%;
-	width: 90%;
+	// top: 10%;
+	width: 100%;
 	// height: 100%;
 	max-width: 100%;
 	// max-height: 100%;
@@ -35,9 +35,3 @@ export const Title = styled.h1`
 export const Subtitle = styled.h4`
 	color: lightslategrey;
 `;
-
-
-// export const MainGrid = styled.Grid`
-// 	height: 100%;
-// 	overflow-y: auto;
-// `;
diff --git a/src/main.js b/src/main.js
index 7a89f302ed..1bf8d0f58a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -70,8 +70,8 @@ const createMainWindow = () => {
 	const mainWindow = new BrowserWindow({
 		width: 1000,
 		height: 600,
-		minWidth: 400,
-		minHeight: 400,
+		minWidth: 500,
+		minHeight: 500,
 		titleBarStyle: 'hidden',
 		backgroundColor: '#2f343d',
 		show: false,
@@ -81,13 +81,41 @@ const createMainWindow = () => {
 		},
 	});
 
-	mainWindow.addListener('close', preventEvent);
+	mainWindow.addListener('close', (e) => {
+		preventEvent(e);
+		console.log('closing');
+	});
 
 	mainWindow.webContents.addListener('will-attach-webview', (event, webPreferences) => {
 		delete webPreferences.enableBlinkFeatures;
 	});
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
+
+	// Downloads handler. Handles all downloads from links. 
+	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
+		// Set the save path, making Electron not to prompt a save dialog.
+
+		item.on('updated', (event, state) => {
+			if (state === 'interrupted') {
+				console.log('Download is interrupted but can be resumed');
+			} else if (state === 'progressing') {
+				if (item.isPaused()) {
+					console.log('Download is paused');
+				} else {
+					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
+				}
+			}
+		});
+		item.once('done', (event, state) => {
+			if (state === 'completed') {
+				mainWindow.webContents.send('download-complete', item.getTotalBytes());
+				console.log('Download successfully');
+			} else {
+				console.log(`Download failed: ${ state }`);
+			}
+		});
+	});
 };
 
 const initialize = async () => {
diff --git a/src/preload/links.js b/src/preload/links.js
index b28a7a0719..f1dd626a98 100644
--- a/src/preload/links.js
+++ b/src/preload/links.js
@@ -16,6 +16,7 @@ const handleAnchorClick = (event) => {
 	const canDownload = /^\/file-upload\//.test(href) || download;
 	if (canDownload) {
 		const downloadUrl = a.href;
+		console.log(downloadUrl);
 		remote.getCurrentWebContents().downloadURL(downloadUrl);
 		event.preventDefault();
 		return;
diff --git a/yarn.lock b/yarn.lock
index 2aca0ca69d..db6ed67028 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1223,6 +1223,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/q@^1.5.1":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
+  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1307,6 +1312,11 @@ ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+alphanum-sort@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -1365,6 +1375,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1767,6 +1782,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 bignumber.js@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-2.4.0.tgz#838a992da9f9d737e0f4b2db0be62bb09dd0c5e8"
@@ -1811,6 +1831,11 @@ bmp-js@0.0.3:
   resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.0.3.tgz#64113e9c7cf1202b376ed607bf30626ebe57b18a"
   integrity sha1-ZBE+nHzxICs3btYHvzBibr5XsYo=
 
+boolbase@^1.0.0, boolbase@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+
 boolean@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.1.tgz#35ecf2b4a2ee191b0b44986f14eb5f052a5cbb4f"
@@ -1866,6 +1891,16 @@ browser-stdout@1.3.1:
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
+browserslist@^4.0.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
+  dependencies:
+    caniuse-lite "^1.0.30001043"
+    electron-to-chromium "^1.3.413"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
+
 browserslist@^4.8.3, browserslist@^4.8.5:
   version "4.8.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
@@ -2001,6 +2036,25 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2052,6 +2106,21 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+caniuse-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-lite "^1.0.0"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
+
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043:
+  version "1.0.30001079"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz#ed3e5225cd9a6850984fdd88bf24ce45d69b9c22"
+  integrity sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==
+
 caniuse-lite@^1.0.30001023:
   version "1.0.30001027"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001027.tgz#283e2ef17d94889cc216a22c6f85303d78ca852d"
@@ -2079,6 +2148,17 @@ chai@^4.2.0:
     pathval "^1.1.0"
     type-detect "^4.0.5"
 
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2096,6 +2176,14 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
+  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2165,6 +2253,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 cli-boxes@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
@@ -2240,6 +2333,15 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
+coa@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
+  dependencies:
+    "@types/q" "^1.5.1"
+    chalk "^2.4.1"
+    q "^1.1.2"
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -2299,7 +2401,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^3.1.2:
+color@^3.0.0, color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -2352,6 +2454,13 @@ concat-stream@1.6.2, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
+concat-with-sourcemaps@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
+  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
+  dependencies:
+    source-map "^0.6.1"
+
 config-chain@^1.1.11:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -2600,6 +2709,16 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+cosmiconfig@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.1"
+    parse-json "^4.0.0"
+
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -2636,6 +2755,156 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-color-names@0.0.4, css-color-names@^0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
+
+css-declaration-sorter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
+  dependencies:
+    postcss "^7.0.1"
+    timsort "^0.3.0"
+
+css-modules-loader-core@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
+  integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
+  dependencies:
+    icss-replace-symbols "1.1.0"
+    postcss "6.0.1"
+    postcss-modules-extract-imports "1.1.0"
+    postcss-modules-local-by-default "1.2.0"
+    postcss-modules-scope "1.1.0"
+    postcss-modules-values "1.3.0"
+
+css-select-base-adapter@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
+
+css-select@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
+
+css-selector-tokenizer@^0.7.0:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz#11e5e27c9a48d90284f22d45061c303d7a25ad87"
+  integrity sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+    regexpu-core "^4.6.0"
+
+css-tree@1.0.0-alpha.37:
+  version "1.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
+  dependencies:
+    mdn-data "2.0.4"
+    source-map "^0.6.1"
+
+css-tree@1.0.0-alpha.39:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
+  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
+  dependencies:
+    mdn-data "2.0.6"
+    source-map "^0.6.1"
+
+css-what@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
+  integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+cssnano-preset-default@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
+  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
+  dependencies:
+    css-declaration-sorter "^4.0.1"
+    cssnano-util-raw-cache "^4.0.1"
+    postcss "^7.0.0"
+    postcss-calc "^7.0.1"
+    postcss-colormin "^4.0.3"
+    postcss-convert-values "^4.0.1"
+    postcss-discard-comments "^4.0.2"
+    postcss-discard-duplicates "^4.0.2"
+    postcss-discard-empty "^4.0.1"
+    postcss-discard-overridden "^4.0.1"
+    postcss-merge-longhand "^4.0.11"
+    postcss-merge-rules "^4.0.3"
+    postcss-minify-font-values "^4.0.2"
+    postcss-minify-gradients "^4.0.2"
+    postcss-minify-params "^4.0.2"
+    postcss-minify-selectors "^4.0.2"
+    postcss-normalize-charset "^4.0.1"
+    postcss-normalize-display-values "^4.0.2"
+    postcss-normalize-positions "^4.0.2"
+    postcss-normalize-repeat-style "^4.0.2"
+    postcss-normalize-string "^4.0.2"
+    postcss-normalize-timing-functions "^4.0.2"
+    postcss-normalize-unicode "^4.0.1"
+    postcss-normalize-url "^4.0.1"
+    postcss-normalize-whitespace "^4.0.2"
+    postcss-ordered-values "^4.1.2"
+    postcss-reduce-initial "^4.0.3"
+    postcss-reduce-transforms "^4.0.2"
+    postcss-svgo "^4.0.2"
+    postcss-unique-selectors "^4.0.1"
+
+cssnano-util-get-arguments@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
+  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
+
+cssnano-util-get-match@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
+  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
+
+cssnano-util-raw-cache@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
+  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
+  dependencies:
+    postcss "^7.0.0"
+
+cssnano-util-same-parent@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
+  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
+
+cssnano@^4.1.10:
+  version "4.1.10"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
+  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    cssnano-preset-default "^4.0.7"
+    is-resolvable "^1.0.0"
+    postcss "^7.0.0"
+
+csso@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
+  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
+  dependencies:
+    css-tree "1.0.0-alpha.39"
+
 csstype@^2.5.7:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
@@ -2903,11 +3172,37 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-serializer@0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
   integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
 
+domelementtype@1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
+
+domelementtype@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
+  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
+
+domutils@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -2915,7 +3210,7 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^5.1.0:
+dot-prop@^5.1.0, dot-prop@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
   integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
@@ -3061,6 +3356,11 @@ electron-to-chromium@^1.3.341:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.347.tgz#ba9724a8e8122a0b081836892e1e08eef7fa4cd7"
   integrity sha512-IityliF5ZY4nLa4DaXOGrWVeTK3OcN6LJECVe60DOX/SEF0zohVRxZHJXu4ZA8bW0A3K6Skcn67G20MGXOqhaA==
 
+electron-to-chromium@^1.3.413:
+  version "1.3.464"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.464.tgz#fe13feaa08f6f865d3c89d5d72e54c194f463aa5"
+  integrity sha512-Oo+0+CN9d2z6FToQW6Hwvi9ez09Y/usKwr0tsDsyg43a871zVJCi1nR0v03djLbRNcaCKjtrnVf2XJhTxEpPCg==
+
 electron-updater@^4.0.6:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.2.0.tgz#f9ecfc657f65ead737d42b9efecf628d3756b550"
@@ -3101,6 +3401,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 emscripten-wasm-loader@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/emscripten-wasm-loader/-/emscripten-wasm-loader-3.0.3.tgz#60d4f33dd62fc41cf6d98fbca94b24bc246f133b"
@@ -3129,6 +3434,11 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+entities@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
+  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
+
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@@ -3232,7 +3542,7 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3403,6 +3713,11 @@ esutils@^2.0.0, esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
+  integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
+
 execa@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.0.tgz#7f37d6ec17f09e6b8fc53288611695b6d12b9daf"
@@ -3559,6 +3874,11 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
@@ -3830,6 +4150,13 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
+generic-names@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
+  integrity sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==
+  dependencies:
+    loader-utils "^1.1.0"
+
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -4229,6 +4556,18 @@ hard-rejection@^2.0.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -4285,7 +4624,7 @@ has-yarn@^2.1.0:
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
   integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
 
-has@^1.0.3:
+has@^1.0.0, has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -4297,6 +4636,11 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hex-color-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -4323,6 +4667,21 @@ hosted-git-info@^3.0.2:
   dependencies:
     lru-cache "^5.1.1"
 
+hsl-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
+
+hsla-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
+
+html-comment-regex@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
+
 html-parse-stringify2@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
@@ -4394,6 +4753,11 @@ iconv-lite@^0.5.1:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
+
 ignore-walk@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
@@ -4416,6 +4780,28 @@ image-size@^0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
+  dependencies:
+    import-from "^2.1.0"
+
+import-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
+  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
+  dependencies:
+    import-from "^3.0.0"
+
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 import-fresh@^3.0.0, import-fresh@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
@@ -4424,6 +4810,20 @@ import-fresh@^3.0.0, import-fresh@^3.1.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
+  dependencies:
+    resolve-from "^3.0.0"
+
+import-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966"
+  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
+  dependencies:
+    resolve-from "^5.0.0"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -4451,6 +4851,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -4519,6 +4924,11 @@ ip-regex@^1.0.1:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-1.0.3.tgz#dc589076f659f419c222039a33316f1c7387effd"
   integrity sha1-3FiQdvZZ9BnCIgOaMzFvHHOH7/0=
 
+is-absolute-url@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
+
 is-absolute@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
@@ -4587,6 +4997,18 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-color-stop@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+  dependencies:
+    css-color-names "^0.0.4"
+    hex-color-regex "^1.1.0"
+    hsl-regex "^1.0.0"
+    hsla-regex "^1.0.0"
+    rgb-regex "^1.0.1"
+    rgba-regex "^1.0.0"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -4624,6 +5046,11 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
+is-directory@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
 is-electron-renderer@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-electron-renderer/-/is-electron-renderer-2.0.1.tgz#a469d056f975697c58c98c6023eb0aa79af895a2"
@@ -4794,6 +5221,11 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
+is-resolvable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
+
 is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
@@ -4804,6 +5236,13 @@ is-string@^1.0.5:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
+is-svg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
+  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
+  dependencies:
+    html-comment-regex "^1.1.0"
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -5006,6 +5445,13 @@ json5@2.0.0:
   dependencies:
     minimist "^1.2.0"
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.0, json5@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
@@ -5204,6 +5650,15 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+loader-utils@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -5232,6 +5687,11 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -5242,6 +5702,11 @@ lodash.ismatch@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
   integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
 
+lodash.memoize@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
 lodash.omit@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
@@ -5267,6 +5732,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.uniq@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
+  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+
 lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -5390,6 +5860,16 @@ matcher@^2.1.0:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+mdn-data@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+mdn-data@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
+  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
+
 mem@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/mem/-/mem-6.0.1.tgz#3f8ad1b0f8c4e00daf07f104e95b9d78131d7908"
@@ -5585,6 +6065,11 @@ minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
 minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
@@ -5635,6 +6120,13 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mkdirp@~0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
 mocha@^7.0.0, mocha@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-7.0.1.tgz#276186d35a4852f6249808c6dd4a1376cbf6c6ce"
@@ -5794,6 +6286,11 @@ node-releases@^1.1.47:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.53:
+  version "1.1.58"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
+  integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==
+
 noop-logger@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
@@ -5829,6 +6326,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-url@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
+
 normalize-url@^4.1.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
@@ -5879,6 +6381,13 @@ npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nth-check@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
+  dependencies:
+    boolbase "~1.0.0"
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -6077,6 +6586,11 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -6112,6 +6626,21 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-queue@^6.3.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.4.0.tgz#5050b379393ea1814d6f9613a654f687d92c0466"
+  integrity sha512-X7ddxxiQ+bLR/CUt3/BVKrGcJDNxBr0pEEFKHHB6vTPWNUhgDv36GpIH18RmGM3YGPpBT+JWGjDDqsVGuF0ERw==
+  dependencies:
+    eventemitter3 "^4.0.0"
+    p-timeout "^3.1.0"
+
+p-timeout@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
+  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
+  dependencies:
+    p-finally "^1.0.0"
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -6350,6 +6879,11 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
+pify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
+  integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -6376,6 +6910,13 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
+  dependencies:
+    find-up "^2.1.0"
+
 plugin-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
@@ -6401,6 +6942,358 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-calc@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
+  integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
+  dependencies:
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
+
+postcss-colormin@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
+  dependencies:
+    browserslist "^4.0.0"
+    color "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-convert-values@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-discard-comments@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-duplicates@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
+  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-empty@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-discard-overridden@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-load-config@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
+  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    import-cwd "^2.0.0"
+
+postcss-merge-longhand@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
+  dependencies:
+    css-color-names "0.0.4"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    stylehacks "^4.0.0"
+
+postcss-merge-rules@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    cssnano-util-same-parent "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+    vendors "^1.0.0"
+
+postcss-minify-font-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-gradients@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    is-color-stop "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-minify-params@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    browserslist "^4.0.0"
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    uniqs "^2.0.0"
+
+postcss-minify-selectors@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
+postcss-modules-extract-imports@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  integrity sha1-thTJcgvmgW6u41+zpfqh26agXds=
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-scope@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
+postcss-modules-values@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
+postcss-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-2.0.0.tgz#473d0d7326651d8408585c2a154115d5cb36cce0"
+  integrity sha512-eqp+Bva+U2cwQO7dECJ8/V+X+uH1HduNeITB0CPPFAu6d/8LKQ32/j+p9rQ2YL1QytVcrNU0X+fBqgGmQIA1Rw==
+  dependencies:
+    css-modules-loader-core "^1.1.0"
+    generic-names "^2.0.1"
+    lodash.camelcase "^4.3.0"
+    postcss "^7.0.1"
+    string-hash "^1.1.1"
+
+postcss-normalize-charset@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
+  dependencies:
+    postcss "^7.0.0"
+
+postcss-normalize-display-values@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-positions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-repeat-style@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-string@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
+  dependencies:
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-timing-functions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-unicode@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-url@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
+  dependencies:
+    is-absolute-url "^2.0.0"
+    normalize-url "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-normalize-whitespace@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
+  dependencies:
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-ordered-values@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
+  dependencies:
+    cssnano-util-get-arguments "^4.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-reduce-initial@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
+  dependencies:
+    browserslist "^4.0.0"
+    caniuse-api "^3.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+
+postcss-reduce-transforms@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
+  dependencies:
+    cssnano-util-get-match "^4.0.0"
+    has "^1.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+
+postcss-selector-parser@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
+  dependencies:
+    dot-prop "^5.2.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss-svgo@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
+  dependencies:
+    is-svg "^3.0.0"
+    postcss "^7.0.0"
+    postcss-value-parser "^3.0.0"
+    svgo "^1.0.0"
+
+postcss-unique-selectors@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
+  dependencies:
+    alphanum-sort "^1.0.0"
+    postcss "^7.0.0"
+    uniqs "^2.0.0"
+
+postcss-value-parser@^3.0.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss-value-parser@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+
+postcss@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
+  integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
+postcss@^6.0.1:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prebuild-install@^5.3.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.3.tgz#ef4052baac60d465f5ba6bf003c9c1de79b9da8e"
@@ -6467,6 +7360,11 @@ progress@^2.0.0, progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise.series@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
+  integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
+
 prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -6540,7 +7438,7 @@ puppeteer@^1.10.0:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
-q@^1.5.1:
+q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -6605,6 +7503,13 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-sweet-progress@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/react-sweet-progress/-/react-sweet-progress-1.1.2.tgz#b27c6baa7c08a12cf0896565431ba477af249892"
+  integrity sha512-FUfiKpox5LJ9YTeK/HsaLp/oOsuxWBJQir6oAYKLY5nsa2pb04PtxzddSy6Y1fn8osaILpXIcItJRQYnHp42CA==
+  dependencies:
+    classnames "^2.2.5"
+
 react@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@@ -6996,11 +7901,21 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
+resolve-from@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-options@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
@@ -7027,6 +7942,13 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.3
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.16.1:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -7052,6 +7974,16 @@ reusify@^1.0.0:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rgb-regex@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
+
+rgba-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
+
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -7133,6 +8065,26 @@ rollup-plugin-node-resolve@^5.2.0:
     resolve "^1.11.1"
     rollup-pluginutils "^2.8.1"
 
+rollup-plugin-postcss@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.2.tgz#e862033b96fabb73390fd4ccbee0155385d30e46"
+  integrity sha512-29ocL0CqjLj9sUghTG64ZwFxwbo2d0WyOTVtqPg6SEMZyFmKke9TClBf4/CcdFaWHqS+YZGsUpq3mzIBSYrw+A==
+  dependencies:
+    chalk "^4.0.0"
+    concat-with-sourcemaps "^1.1.0"
+    cssnano "^4.1.10"
+    import-cwd "^3.0.0"
+    p-queue "^6.3.0"
+    pify "^5.0.0"
+    postcss "^7.0.27"
+    postcss-load-config "^2.1.0"
+    postcss-modules "^2.0.0"
+    promise.series "^0.2.0"
+    resolve "^1.16.1"
+    rollup-pluginutils "^2.8.2"
+    safe-identifier "^0.4.1"
+    style-inject "^0.3.0"
+
 rollup-plugin-replace@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
@@ -7141,7 +8093,7 @@ rollup-plugin-replace@^2.1.0:
     magic-string "^0.25.2"
     rollup-pluginutils "^2.6.0"
 
-rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1:
+rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -7186,6 +8138,11 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-identifier@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.1.tgz#b6516bf72594f03142b5f914f4c01842ccb1b678"
+  integrity sha512-73tOz5TXsq3apuCc3vC8c9QRhhdNZGiBhHmPPjqpH4TO5oCDqk8UIsDcSs/RG6dYcFAkOOva0pqHS3u7hh7XXA==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -7205,7 +8162,7 @@ sanitize-filename@^1.6.2, sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sax@>=0.6.0, sax@^1.2.4:
+sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -7517,6 +8474,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stack-generator@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
@@ -7569,6 +8531,11 @@ stream-to@~0.2.0:
   resolved "https://registry.yarnpkg.com/stream-to/-/stream-to-0.2.2.tgz#84306098d85fdb990b9fa300b1b3ccf55e8ef01d"
   integrity sha1-hDBgmNhf25kLn6MAsbPM9V6O8B0=
 
+string-hash@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -7720,6 +8687,20 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
+style-inject@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
+  integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
+
+stylehacks@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
+  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
+  dependencies:
+    browserslist "^4.0.0"
+    postcss "^7.0.0"
+    postcss-selector-parser "^3.0.0"
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -7734,13 +8715,32 @@ supports-color@6.0.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^5.3.0:
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -7756,6 +8756,25 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
+svgo@^1.0.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
+  dependencies:
+    chalk "^2.4.1"
+    coa "^2.0.2"
+    css-select "^2.0.0"
+    css-select-base-adapter "^0.1.1"
+    css-tree "1.0.0-alpha.37"
+    csso "^4.0.2"
+    js-yaml "^3.13.1"
+    mkdirp "~0.5.1"
+    object.values "^1.1.0"
+    sax "~1.2.4"
+    stable "^0.1.8"
+    unquote "~1.1.1"
+    util.promisify "~1.0.0"
+
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -7893,6 +8912,11 @@ time-stamp@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
   integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
+timsort@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+
 tinycolor2@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -8159,6 +9183,16 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+uniqs@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
+
 unique-stream@^2.0.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
@@ -8186,6 +9220,11 @@ unixify@^1.0.0:
   dependencies:
     normalize-path "^2.1.1"
 
+unquote@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -8296,6 +9335,11 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
 
+vendors@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"

From 579c3609e79620a8ce7813a10a2f467a1cad24d9 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Tue, 23 Jun 2020 01:48:40 +0500
Subject: [PATCH 07/66] progress-bar working

---
 package.json                                  |  4 +-
 src/components/AboutDialog/index.js           |  4 +-
 .../DownloadsComponents/DownloadItem.js       | 31 ++----
 src/components/DownloadsManagerView/index.js  | 99 +++++++++++++------
 src/components/ServersView/ServerPane.js      |  4 +-
 src/main.js                                   | 23 ++++-
 src/sagas/index.js                            |  4 +-
 src/sagas/servers.js                          |  3 +-
 yarn.lock                                     | 62 ++++++++----
 9 files changed, 147 insertions(+), 87 deletions(-)

diff --git a/package.json b/package.json
index bd99700590..90df12b7fe 100644
--- a/package.json
+++ b/package.json
@@ -65,8 +65,8 @@
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/fuselage": "^0.2.0-dev.111",
-    "@rocket.chat/fuselage-hooks": "^0.2.0-dev.94",
+    "@rocket.chat/fuselage": "0.6.3-dev.57",
+    "@rocket.chat/fuselage-hooks": "0.6.3-dev.57",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",
     "chai": "^4.2.0",
diff --git a/src/components/AboutDialog/index.js b/src/components/AboutDialog/index.js
index 6738b31d73..6f7a5f8d75 100644
--- a/src/components/AboutDialog/index.js
+++ b/src/components/AboutDialog/index.js
@@ -1,4 +1,4 @@
-import { Box, Button, Field, Flex, Loading, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
+import { Box, Button, Field, Flex, Throbber, Margins, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { remote } from 'electron';
 import React, { useState, useRef, useEffect, useMemo } from 'react';
@@ -129,7 +129,7 @@ export function AboutDialog() {
 							<Margins block='x12'>
 								{checkingForUpdatesMessage
 									? <Box textStyle='c1' textColor='info'>{checkingForUpdatesMessage}</Box>
-									: <Loading size='x16' />}
+									: <Throbber size='x16' />}
 							</Margins>
 						</Box>}
 
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 3954ea77fb..f499a48905 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,24 +1,11 @@
-import {
-	Box,
-	Button,
-	ButtonGroup,
-	Callout,
-	Field,
-	FieldGroup,
-	Margins,
-	TextInput,
-	Tile,
-	Grid,
-	Icon,
-} from '@rocket.chat/fuselage';
+import { Box, Margins, Tile, Grid, Icon } from '@rocket.chat/fuselage';
 import React, { useEffect } from 'react';
 import { Progress } from 'react-sweet-progress';
 import 'react-sweet-progress/lib/style.css';
 
 // recieve props for individual download item
-export default function DownloadItem({ filename, filesize, url }) {
-	// const date = new Date().toLocaleTimeString();
-
+export default function DownloadItem({ filename, filesize, url, percentage, timeDownloaded }) {
+	console.log(percentage);
 	return <Margins all='x32'>
 		<Tile elevation='2' style={ { width: '75%' } }>
 			<Grid>
@@ -28,16 +15,16 @@ export default function DownloadItem({ filename, filesize, url }) {
 						<div style={ { height: '200px', width: '200px', backgroundColor: 'lightblue', borderRadius: '10px' } }></div>
 					</Grid.Item>
 					<Grid.Item style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-						<h3>{ 'filename' }</h3>
+						<h3>{ filename }</h3>
 						<div style={ { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '75%' } }>
-							<span>@Server</span> <span> { 'date' }</span> <span>{ 'filesize' || '25MB' }</span>
+							<span>@Server</span> <span> { timeDownloaded }</span> <span>{ filesize || '25MB' }</span>
 						</div>
-						<Progress theme={ { default: { color: 'lightblue' } } } percent={ 88 } status='default' />
-						<p>{ 'url' || 'https://google.com' }</p>
+						<Progress theme={ { default: { color: 'lightblue' } } } percent={ Math.floor(percentage) } status='default' />
+						<a href={url}>{ `${ url.substring(0, 50) }...` || 'https://google.com' }</a>
 						<a href='#'> Show in Folder</a>
 					</Grid.Item>
-					<Grid.Item md='1'>
-						<Icon name='cross' size='x64' />
+					<Grid.Item md='1' style={{ display: 'flex', justifyContent: 'center' }}>
+						<Icon name='cross' size='x32' />
 					</Grid.Item>
 				</Box>
 			</Grid>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 05df13b110..027994b1dc 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,44 +1,79 @@
-import {
-	Box,
-	Button,
-	ButtonGroup,
-	Callout,
-	Field,
-	FieldGroup,
-	Margins,
-	TextInput,
-	Tile,
-	Grid,
-	Divider,
-} from '@rocket.chat/fuselage';
+import { Box, Tile, Grid, Divider } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { remote, ipcRenderer } from 'electron';
 
-import { Wrapper, Content, Title, Subtitle } from './styles';
-import DownloadsList from '../DownloadsComponents/DownloadsList';
+import { Wrapper, Content } from './styles';
+import DownloadItem from '../DownloadsComponents/DownloadItem';
+
+
+function formatBytes(bytes, decimals = 2, size = false) {
+	if (bytes === 0) {
+		return '0 Bytes';
+	}
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	if (size) {
+		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
+	}
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+}
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
+	const [url, setUrl] = useState('');
+	const [percentage, setPercentage] = useState(0);
+	const [filename, setFileName] = useState('');
+	const [filesize, setFileSize] = useState(0);
+	const [totalBytes, setTotalBytes] = useState(0);
+	let timeDownloaded;
+	useEffect(() => {
+		const handleFileSize = (event, props) => {
+			console.log('hello yes changed');
+			console.log(props);
+			setFileName(props.filename);
+			setTotalBytes(props.totalBytes);
+			const filesize = formatBytes(props.totalBytes, 2, true);
+			setFileSize(filesize);
+			setUrl(props.url);
+		};
+
+		ipcRenderer.on('download-start', handleFileSize);
+		return () => {
+			ipcRenderer.removeListener('download-start', handleFileSize);
+		};
+	}, []);
+
+	useEffect(() => {
+		const handleProgress = (event, bytes) => {
+			console.log('progress');
+			console.log(` Current Bytes: ${ bytes }`);
+			console.log(formatBytes(bytes, 2, true));
+			// console.log(` Total Filesize: ${ filesize } `);
+			const percentage = (bytes / totalBytes) * 100;
+			setPercentage(percentage);
+			if (percentage === 100) {
+				const downloadTime = new Date().toLocaleTimeString();
+				timeDownloaded = downloadTime;
+			}
+		};
 
-	// const [url, setUrl] = useState('');
-	// const [filename, setFileName] = useState('');
-	// const [filesize, setFileSize] = useState(0);
+		ipcRenderer.on('downloading', handleProgress);
+		return () => {
+			ipcRenderer.removeListener('downloading', handleProgress);
+		};
+	}, [totalBytes]);
 
-	// useEffect(() => {
-	// 	const handleFileSize = (event, totalsize) => {
-	// 		console.log('hello yes changed');
-	// 		setFileSize(totalsize);
-	// 		console.log(totalsize);
-	// 		console.log(filesize);
-	// 	};
+	// Creat function to create download item, fill the global state with the new item.
+	// function newDownload
 
-	// 	ipcRenderer.on('download-complete', handleFileSize);
-	// 	return () => {
-	// 		ipcRenderer.removeListener('download-complete', handleFileSize);
-	// 	};
-	// }, []);
+	// Save and load downloadItem information
 
 	return <Wrapper isVisible={ isVisible }>
 		<Content>
@@ -47,7 +82,7 @@ export function DownloadsManagerView() {
 				<Box width='70%' display='flex' flexDirection='row'>
 					<Grid.Item xl={ 8 }>
 						<Tile>
-							<Box paddingInlineStart='9.375rem'>
+							<Box>
 								<h1>Downloads</h1>
 								<h3>See all your downloads here</h3>
 							</Box>
@@ -61,7 +96,7 @@ export function DownloadsManagerView() {
 					<Divider />
 				</Grid.Item>
 				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-					<DownloadsList items={ [1, 2, 3] } />
+					<DownloadItem filesize={ filesize } filename={ filename } url={ url } percentage={ percentage } timeDownloaded={ timeDownloaded } />
 				</Grid.Item>
 
 			</Grid>
diff --git a/src/components/ServersView/ServerPane.js b/src/components/ServersView/ServerPane.js
index cf79696a70..d38359689a 100644
--- a/src/components/ServersView/ServerPane.js
+++ b/src/components/ServersView/ServerPane.js
@@ -1,4 +1,4 @@
-import { Box, Button, ButtonGroup, Flex, Loading, Margins } from '@rocket.chat/fuselage';
+import { Box, Button, ButtonGroup, Flex, Throbber, Margins } from '@rocket.chat/fuselage';
 import { remote } from 'electron';
 import React, { useState, useRef, useEffect } from 'react';
 import { takeEvery } from 'redux-saga/effects';
@@ -141,7 +141,7 @@ export function ServerPane({
 
 							<Box>
 								{isReloading && <Margins block='x12'>
-									<Loading inheritColor size='x16' />
+									<Throbber inheritColor size='x16' />
 								</Margins>}
 
 								{!isReloading && <ButtonGroup align='center'>
diff --git a/src/main.js b/src/main.js
index 1bf8d0f58a..0452b92c7d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,7 @@ import { app, BrowserWindow } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
+import { readFromStorage } from './localStorage';
 import { setupErrorHandling } from './errorHandling';
 
 if (process.env.NODE_ENV === 'development') {
@@ -92,10 +93,23 @@ const createMainWindow = () => {
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
-	// Downloads handler. Handles all downloads from links. 
-	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
-		// Set the save path, making Electron not to prompt a save dialog.
+	// Downloads handler. Handles all downloads from links.
+	mainWindow.webContents.session.on('will-download', (event, item, webContents, ...args) => {
+		console.log({ event, item, webContents, args });
+		// const servers = readFromStorage('servers');
+		// const currentServerUrl = readFromStorage('currentServerUrl');
+		// console.log(servers);
+		// console.log(currentServerUrl);
+		// let serverTitle;
+		// for (const server of servers) {
+		// 	if (server.url === currentServerUrl) {
+		// 		serverTitle = server.title;
+		// 	}
+		// }
+
 
+		// Set the save path, making Electron not to prompt a save dialog.
+		mainWindow.webContents.send('download-start', { totalBytes: item.getTotalBytes(), filename: item.getFilename(), url: item.getURL() });
 		item.on('updated', (event, state) => {
 			if (state === 'interrupted') {
 				console.log('Download is interrupted but can be resumed');
@@ -103,13 +117,14 @@ const createMainWindow = () => {
 				if (item.isPaused()) {
 					console.log('Download is paused');
 				} else {
+					mainWindow.webContents.send('downloading', item.getReceivedBytes());
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
 		});
 		item.once('done', (event, state) => {
 			if (state === 'completed') {
-				mainWindow.webContents.send('download-complete', item.getTotalBytes());
+				// mainWindow.webContents.send('download-complete', item.getTotalBytes());
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);
diff --git a/src/sagas/index.js b/src/sagas/index.js
index 0777afb6bb..58e8f05163 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -5,7 +5,7 @@ import { navigationEventsSaga } from './navigationEvents';
 import { preferencesSaga } from './preferences';
 import { serversSaga } from './servers';
 import { spellCheckingSaga } from './spellChecking';
-import { updatesSaga } from './updates';
+// import { updatesSaga } from './updates';
 
 export function *rootSaga() {
 	yield fork(deepLinksSaga);
@@ -13,5 +13,5 @@ export function *rootSaga() {
 	yield fork(preferencesSaga);
 	yield fork(serversSaga);
 	yield fork(spellCheckingSaga);
-	yield fork(updatesSaga);
+	// yield fork(updatesSaga);
 }
diff --git a/src/sagas/servers.js b/src/sagas/servers.js
index 1c7a73f269..f002a444a5 100644
--- a/src/sagas/servers.js
+++ b/src/sagas/servers.js
@@ -128,7 +128,8 @@ function *loadCurrentServerUrl(servers) {
 	if (!servers.some(({ url }) => url === currentServerUrl)) {
 		currentServerUrl = null;
 	}
-
+	// // During testing
+	// 	return 'Downloads';
 	return currentServerUrl;
 }
 
diff --git a/yarn.lock b/yarn.lock
index db6ed67028..697ccee71c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -923,6 +923,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
   integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
 
+"@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
 "@emotion/is-prop-valid@0.8.6":
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
@@ -969,7 +974,7 @@
     "@emotion/styled-base" "^10.0.27"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/stylis@0.8.5":
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
@@ -1085,6 +1090,14 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
+"@rocket.chat/css-in-js@^0.6.3-dev.57+eddfb15":
+  version "0.6.3-dev.57"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.57.tgz#69ada2ecd1c1f5046a5152f5cc8b4eff2a643cfb"
+  integrity sha512-qC1cZI8YQX7hZmZWDRU9XGwIStpPe854GRgaaVxpyELynGbL8PHWhQ+gOB9ce33/Kk6d4HB/QpueIVxrD15c1g==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/stylis" "^0.8.5"
+
 "@rocket.chat/eslint-config@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@rocket.chat/eslint-config/-/eslint-config-0.4.0.tgz#d648decd02ae739eac17a32e1630332a75318ea1"
@@ -1092,34 +1105,31 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
-"@rocket.chat/fuselage-hooks@^0.2.0-dev.94":
-  version "0.2.0-dev.106"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.2.0-dev.106.tgz#ea12ba486ba203ae0f0da553ee7ff97223c42dd3"
-  integrity sha512-u1DFKDG8engtVOEAYG1gUiyDQqw03VEqim+Ikzks87B89liIrc/IwnZ4PBuFCfJ9WT7LMJeTvXfiJqEH6YpoPw==
+"@rocket.chat/fuselage-hooks@0.6.3-dev.57":
+  version "0.6.3-dev.57"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.57.tgz#28a0e7a607f139fce6b797cab7e72078cf883fac"
+  integrity sha512-C8lTIzKX68OF4n1oc9++rYJxIowo+eQ9O2Xaor1EoWh22XqN5f96YW1xs33lFntNy/8CZLY//usuEx6h1HaTSg==
 
-"@rocket.chat/fuselage-tokens@^0.2.0-alpha.29":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.2.0.tgz#2aad87843d68b36bbdd4fd8f7f4931984d11bc8f"
-  integrity sha512-mHAoZ4mAXXYJ+Sz6DYwe/StO7HyMUNdYw+2U+9uzyO5Zyy5e88+lxD2+HI0UQ7AC6cM/Y77s1kNhTwDpP70oHw==
+"@rocket.chat/fuselage-tokens@^0.6.3-dev.57+eddfb15":
+  version "0.6.3-dev.57"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.57.tgz#336723f12ac1c6da07ab58269931f2f2a415216d"
+  integrity sha512-+71s0lfmI8DQ5NqNLsCHGw0KqUB3EtqLyODAXJjUy7QqEBUbsN4xCpdYZWsKlB2XPcbwPMibJjOWP6Bo9Z+2hA==
 
-"@rocket.chat/fuselage@^0.2.0-dev.111":
-  version "0.2.0-dev.111"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.2.0-dev.111.tgz#df7f233946adc827a96ccf93397e1ac4ca8d64fb"
-  integrity sha512-0orbZizv3D+mQyecC0Ut4VLcDIL8V/iWEaLtFpUp85rYWZVS0QYehdCc5yu/D4Ql3lhi5sPmF3QeQ6LP3YE/5Q==
+"@rocket.chat/fuselage@0.6.3-dev.57":
+  version "0.6.3-dev.57"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.57.tgz#8edb5028b9a967c79a8b3379ea322cc0d5a6d8dc"
+  integrity sha512-NoKgEE6wXxZsAoRxy0C0P770shLgldf9hIUQDJAn6Z+TKbl0qq+J7X/5WVjCzjtuKW9/9FZ2v6Wj6M6qlpDEYA==
   dependencies:
-    "@rocket.chat/fuselage-tokens" "^0.2.0-alpha.29"
-    "@rocket.chat/icons" "^0.2.0-alpha.29"
+    "@rocket.chat/css-in-js" "^0.6.3-dev.57+eddfb15"
+    "@rocket.chat/fuselage-tokens" "^0.6.3-dev.57+eddfb15"
+    invariant "^2.2.4"
+    react-keyed-flatten-children "^1.2.0"
 
 "@rocket.chat/icons@^0.2.0-alpha.23":
   version "0.2.0-alpha.28"
   resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.2.0-alpha.28.tgz#2c186c27eb0100c4cd115992a27846e830d3f52e"
   integrity sha512-z+LrEdOLIY8Cj/0oRi73Lg3jZZ7lsXXNkqfwT0wJjA6WKaPC+cOIOEW0y3YSV3NgHVupvuBJh9pK6xJTnU66Wg==
 
-"@rocket.chat/icons@^0.2.0-alpha.29":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.2.0.tgz#34e0bb441f00e701edd1dbc2fadbaaffe0764702"
-  integrity sha512-EUXi/TGe2YBVASoWPHm+FeRyq6gxNJjByNtc6wb1s0wyPxESD3rPpRkxR1PKjQtSTzNSFW8woEVT1UNPly7v1g==
-
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -7491,6 +7501,18 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-is@^16.8.6:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-keyed-flatten-children@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/react-keyed-flatten-children/-/react-keyed-flatten-children-1.2.0.tgz#44c741f9f5acca1a7294c3f7a11f1d31c417c1e1"
+  integrity sha512-gJoD3br3tK59+AOKlzb+7G39YtkSC4gWjQjDbWOmHjW7pxgYomnRBemKXuNBafnPYSKpjp7evOlxtGEHwiP11g==
+  dependencies:
+    react-is "^16.8.6"
+
 react-redux@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"

From bb8f411febf0f0090e36912940be38bda3cfc7e3 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 24 Jun 2020 01:34:19 +0500
Subject: [PATCH 08/66] added search and select inputs

---
 .../DownloadsComponents/DownloadItem.js       | 13 ++++++----
 src/components/DownloadsManagerView/index.js  | 26 ++++++++++++++-----
 src/components/DownloadsManagerView/styles.js |  2 +-
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index f499a48905..397be3b8e0 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -9,10 +9,13 @@ export default function DownloadItem({ filename, filesize, url, percentage, time
 	return <Margins all='x32'>
 		<Tile elevation='2' style={ { width: '75%' } }>
 			<Grid>
-				{/* Box component styles not working properly */}
+				{/* Box component styles not working properly */ }
 				<Box height='16.5rem' width='100%' display='flex' alignItems='center'>
 					<Grid.Item md={ 2 } style={ { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
-						<div style={ { height: '200px', width: '200px', backgroundColor: 'lightblue', borderRadius: '10px' } }></div>
+						<div style={ { height: '200px', width: '200px', backgroundColor: 'lightgrey', borderRadius: '10px' } }></div>
+						{/* <Box height='200px' width='200px' backgroundColor='lightgrey' borderRadius='10px' display='flex' justifyContent='center'>
+							<Icon size='12rem' name='clip' />
+						</Box> */}
 					</Grid.Item>
 					<Grid.Item style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
 						<h3>{ filename }</h3>
@@ -20,10 +23,10 @@ export default function DownloadItem({ filename, filesize, url, percentage, time
 							<span>@Server</span> <span> { timeDownloaded }</span> <span>{ filesize || '25MB' }</span>
 						</div>
 						<Progress theme={ { default: { color: 'lightblue' } } } percent={ Math.floor(percentage) } status='default' />
-						<a href={url}>{ `${ url.substring(0, 50) }...` || 'https://google.com' }</a>
-						<a href='#'> Show in Folder</a>
+						<a href={ url }>{ `${ url.substring(0, 50) }...` || 'https://google.com' }</a>
+						<a href='#' style={ { textDecoration: 'none', color: '#2F80ED' } }> Show in Folder</a>
 					</Grid.Item>
-					<Grid.Item md='1' style={{ display: 'flex', justifyContent: 'center' }}>
+					<Grid.Item md='1' style={ { display: 'flex', justifyContent: 'center' } }>
 						<Icon name='cross' size='x32' />
 					</Grid.Item>
 				</Box>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 027994b1dc..a6d603e723 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,4 +1,4 @@
-import { Box, Tile, Grid, Divider } from '@rocket.chat/fuselage';
+import { Box, Tile, Grid, Divider, SearchInput, Select, Icon } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
@@ -78,15 +78,27 @@ export function DownloadsManagerView() {
 	return <Wrapper isVisible={ isVisible }>
 		<Content>
 			<Grid xl={ true } style={ { display: 'flex', justifyContent: 'center' } }>
+				<Grid.Item xl={ 4 } >
+					<SearchInput width='400px' placeholder='Search Downloads' addon={ <Icon name='send' size='x20' /> } />
+				</Grid.Item>
+				<Grid.Item xl={ 1 } >
+				</Grid.Item>
+				<Grid.Item xl={ 3 } >
+					<Select width='250px' placeholder='Filter Server' options={ [[1, 'Rocket.Chat'], [2, 'Server2'], [3, 'Test Server']] } />
+				</Grid.Item>
+				<Grid.Item xl={ 1 } >
+					<Icon name='medium-vew' size='x32' />
+				</Grid.Item>
+				<Grid.Item xl={ 1 } >
+					<Icon name='kebab' size='x32' />
+				</Grid.Item>
 
 				<Box width='70%' display='flex' flexDirection='row'>
 					<Grid.Item xl={ 8 }>
-						<Tile>
-							<Box>
-								<h1>Downloads</h1>
-								<h3>See all your downloads here</h3>
-							</Box>
-						</Tile>
+						<Box>
+							<h1>Downloads</h1>
+							<h3>See all your downloads here</h3>
+						</Box>
 					</Grid.Item>
 					<Grid.Item xl={ 4 }>
 					</Grid.Item>
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index 9d88c59e97..f914cd01b3 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -20,7 +20,7 @@ export const Wrapper = styled.section`
 
 export const Content = styled.div`
 	position: relative;
-	// top: 10%;
+	top: 10%;
 	width: 100%;
 	// height: 100%;
 	max-width: 100%;

From 65305fa880084c5de175a97779a906b3df05bb73 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 03:10:29 +0500
Subject: [PATCH 09/66] download-item-ui nearly done

---
 package.json                                  |   2 +-
 .../DownloadsComponents/DownloadItem.js       |  48 +++---
 src/components/DownloadsManagerView/index.js  | 158 ++++++++++--------
 src/components/DownloadsManagerView/styles.js |   2 +
 src/reducers/servers.js                       |   5 +
 src/sagas/servers.js                          |   4 +-
 yarn.lock                                     |   8 +-
 7 files changed, 124 insertions(+), 103 deletions(-)

diff --git a/package.json b/package.json
index 90df12b7fe..c6b35bcde3 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@bugsnag/js": "^6.3.2",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "@rocket.chat/icons": "^0.2.0-alpha.23",
+    "@rocket.chat/icons": "0.6.3-dev.57",
     "debug": "^4.1.1",
     "dictionary-de": "^2.0.3",
     "dictionary-en-gb": "^2.2.1",
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 397be3b8e0..4f56386e37 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -7,30 +7,30 @@ import 'react-sweet-progress/lib/style.css';
 export default function DownloadItem({ filename, filesize, url, percentage, timeDownloaded }) {
 	console.log(percentage);
 	return <Margins all='x32'>
-		<Tile elevation='2' style={ { width: '75%' } }>
-			<Grid>
-				{/* Box component styles not working properly */ }
-				<Box height='16.5rem' width='100%' display='flex' alignItems='center'>
-					<Grid.Item md={ 2 } style={ { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
-						<div style={ { height: '200px', width: '200px', backgroundColor: 'lightgrey', borderRadius: '10px' } }></div>
-						{/* <Box height='200px' width='200px' backgroundColor='lightgrey' borderRadius='10px' display='flex' justifyContent='center'>
-							<Icon size='12rem' name='clip' />
-						</Box> */}
-					</Grid.Item>
-					<Grid.Item style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-						<h3>{ filename }</h3>
-						<div style={ { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', width: '75%' } }>
-							<span>@Server</span> <span> { timeDownloaded }</span> <span>{ filesize || '25MB' }</span>
-						</div>
-						<Progress theme={ { default: { color: 'lightblue' } } } percent={ Math.floor(percentage) } status='default' />
-						<a href={ url }>{ `${ url.substring(0, 50) }...` || 'https://google.com' }</a>
-						<a href='#' style={ { textDecoration: 'none', color: '#2F80ED' } }> Show in Folder</a>
-					</Grid.Item>
-					<Grid.Item md='1' style={ { display: 'flex', justifyContent: 'center' } }>
-						<Icon name='cross' size='x32' />
-					</Grid.Item>
-				</Box>
-			</Grid>
+		{/* <Grid md={true}> */ }
+		<Tile elevation='2' style={ { width: '95%' } }>
+			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
+				<Grid.Item xl={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
+					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+						<Icon size='7rem' name='clip' />
+						<Box fonScale='s2' color='primary-500' display='block'>.mp3</Box>
+					</Box>
+				</Grid.Item>
+				<Grid.Item xl={ 9 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
+					<Box fontSize='h1' lineHeight='h1'>filename</Box>
+					<Box display='flex' flexDirection='row' justifyContent='space-between' width='50%'>
+						<Box fontSize='s2' color='info'>@Server</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ 'filesize' || '25MB' }</Box>
+					</Box>
+					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ 88 } status='default' />
+					<Box fontSize='s2' >{ 'url' || 'https://google.com' }</Box>
+					<a href='#' style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</a>
+				</Grid.Item>
+				<Grid.Item xl={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
+					<Icon name='cross' size='x32' />
+				</Grid.Item>
+			</Box>
 		</Tile>
+
+		{/* </Grid> */ }
 	</Margins>;
 }
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index a6d603e723..e8648ba7cb 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,4 +1,4 @@
-import { Box, Tile, Grid, Divider, SearchInput, Select, Icon } from '@rocket.chat/fuselage';
+import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
@@ -27,48 +27,52 @@ function formatBytes(bytes, decimals = 2, size = false) {
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	const [url, setUrl] = useState('');
-	const [percentage, setPercentage] = useState(0);
-	const [filename, setFileName] = useState('');
-	const [filesize, setFileSize] = useState(0);
-	const [totalBytes, setTotalBytes] = useState(0);
-	let timeDownloaded;
-	useEffect(() => {
-		const handleFileSize = (event, props) => {
-			console.log('hello yes changed');
-			console.log(props);
-			setFileName(props.filename);
-			setTotalBytes(props.totalBytes);
-			const filesize = formatBytes(props.totalBytes, 2, true);
-			setFileSize(filesize);
-			setUrl(props.url);
-		};
-
-		ipcRenderer.on('download-start', handleFileSize);
-		return () => {
-			ipcRenderer.removeListener('download-start', handleFileSize);
-		};
-	}, []);
-
-	useEffect(() => {
-		const handleProgress = (event, bytes) => {
-			console.log('progress');
-			console.log(` Current Bytes: ${ bytes }`);
-			console.log(formatBytes(bytes, 2, true));
-			// console.log(` Total Filesize: ${ filesize } `);
-			const percentage = (bytes / totalBytes) * 100;
-			setPercentage(percentage);
-			if (percentage === 100) {
-				const downloadTime = new Date().toLocaleTimeString();
-				timeDownloaded = downloadTime;
-			}
-		};
-
-		ipcRenderer.on('downloading', handleProgress);
-		return () => {
-			ipcRenderer.removeListener('downloading', handleProgress);
-		};
-	}, [totalBytes]);
+	const servers = useSelector(({ servers }) => servers);
+	const currentServerUrl = useSelector(({ currentServerUrl }) => currentServerUrl);
+	console.log({ servers, currentServerUrl });
+
+	// const [url, setUrl] = useState('');
+	// const [percentage, setPercentage] = useState(0);
+	// const [filename, setFileName] = useState('');
+	// const [filesize, setFileSize] = useState(0);
+	// const [totalBytes, setTotalBytes] = useState(0);
+	// let timeDownloaded;
+	// useEffect(() => {
+	// 	const handleFileSize = (event, props) => {
+	// 		console.log('hello yes changed');
+	// 		console.log(props);
+	// 		setFileName(props.filename);
+	// 		setTotalBytes(props.totalBytes);
+	// 		const filesize = formatBytes(props.totalBytes, 2, true);
+	// 		setFileSize(filesize);
+	// 		setUrl(props.url);
+	// 	};
+
+	// 	ipcRenderer.on('download-start', handleFileSize);
+	// 	return () => {
+	// 		ipcRenderer.removeListener('download-start', handleFileSize);
+	// 	};
+	// }, []);
+
+	// useEffect(() => {
+	// 	const handleProgress = (event, bytes) => {
+	// 		console.log('progress');
+	// 		console.log(` Current Bytes: ${ bytes }`);
+	// 		console.log(formatBytes(bytes, 2, true));
+	// 		// console.log(` Total Filesize: ${ filesize } `);
+	// 		const percentage = (bytes / totalBytes) * 100;
+	// 		setPercentage(percentage);
+	// 		if (percentage === 100) {
+	// 			const downloadTime = new Date().toLocaleTimeString();
+	// 			timeDownloaded = downloadTime;
+	// 		}
+	// 	};
+
+	// 	ipcRenderer.on('downloading', handleProgress);
+	// 	return () => {
+	// 		ipcRenderer.removeListener('downloading', handleProgress);
+	// 	};
+	// }, [totalBytes]);
 
 	// Creat function to create download item, fill the global state with the new item.
 	// function newDownload
@@ -77,41 +81,51 @@ export function DownloadsManagerView() {
 
 	return <Wrapper isVisible={ isVisible }>
 		<Content>
-			<Grid xl={ true } style={ { display: 'flex', justifyContent: 'center' } }>
-				<Grid.Item xl={ 4 } >
-					<SearchInput width='400px' placeholder='Search Downloads' addon={ <Icon name='send' size='x20' /> } />
-				</Grid.Item>
-				<Grid.Item xl={ 1 } >
-				</Grid.Item>
-				<Grid.Item xl={ 3 } >
-					<Select width='250px' placeholder='Filter Server' options={ [[1, 'Rocket.Chat'], [2, 'Server2'], [3, 'Test Server']] } />
-				</Grid.Item>
-				<Grid.Item xl={ 1 } >
-					<Icon name='medium-vew' size='x32' />
-				</Grid.Item>
-				<Grid.Item xl={ 1 } >
-					<Icon name='kebab' size='x32' />
-				</Grid.Item>
-
-				<Box width='70%' display='flex' flexDirection='row'>
-					<Grid.Item xl={ 8 }>
+			<Box width='85%'>
+
+				<Grid xl={ true }>
+
+					<Grid.Item xl={ 6 } >
+						<SearchInput placeholder='Search Downloads' width='500px' addon={ <Icon name='send' size='x20' /> } />
+					</Grid.Item>
+
+					<Grid.Item xl={ 4 } >
+						<Select width='300px' placeholder='Filter by Server' options={ [[1, 'Rocket.Chat'], [2, 'Server2'], [3, 'Test Server']] } />
+					</Grid.Item>
+
+					<Grid.Item xl={ 1 } >
+						<Button ghost>
+							<Icon name='medium-view' size='x32' />
+						</Button>
+					</Grid.Item>
+
+					<Grid.Item xl={ 1 } >
+						<Button ghost>
+							<Icon name='kebab' size='x32' />
+						</Button>
+					</Grid.Item>
+
+					<Grid.Item xl={ 10 }>
 						<Box>
-							<h1>Downloads</h1>
-							<h3>See all your downloads here</h3>
+							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
+							<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
 						</Box>
 					</Grid.Item>
-					<Grid.Item xl={ 4 }>
+
+					<Grid.Item xl={ 12 }>
+						<Tabs>
+							<Tabs.Item selected>Downloads</Tabs.Item>
+							<Tabs.Item>Paused</Tabs.Item>
+							<Tabs.Item>Cancelled</Tabs.Item>
+						</Tabs>
 					</Grid.Item>
-				</Box>
 
-				<Grid.Item xl={ 9 } width='75%'>
-					<Divider />
-				</Grid.Item>
-				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-					<DownloadItem filesize={ filesize } filename={ filename } url={ url } percentage={ percentage } timeDownloaded={ timeDownloaded } />
-				</Grid.Item>
+					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+						<DownloadItem />
+					</Grid.Item>
 
-			</Grid>
+				</Grid>
+			</Box>
 		</Content>
 	</Wrapper>;
 }
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index f914cd01b3..9e635e939f 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -24,6 +24,8 @@ export const Content = styled.div`
 	width: 100%;
 	// height: 100%;
 	max-width: 100%;
+	display: flex;
+	justify-content: center;
 	// max-height: 100%;
 `;
 
diff --git a/src/reducers/servers.js b/src/reducers/servers.js
index 18d28bc7c9..3a8847caa7 100644
--- a/src/reducers/servers.js
+++ b/src/reducers/servers.js
@@ -8,6 +8,7 @@ import {
 	WEBVIEW_TITLE_CHANGED,
 	WEBVIEW_UNREAD_CHANGED,
 	WEBVIEW_FAVICON_CHANGED,
+	WEBVIEW_SERVER_ID
 } from '../actions';
 
 const upsert = (state, server) => {
@@ -70,6 +71,10 @@ export const servers = (state = [], { type, payload }) => {
 
 			return state;
 		}
+		case WEBVIEW_SERVER_ID: {
+			const id = payload;
+			return url;
+		}
 	}
 
 	return state;
diff --git a/src/sagas/servers.js b/src/sagas/servers.js
index f002a444a5..2d961c86d2 100644
--- a/src/sagas/servers.js
+++ b/src/sagas/servers.js
@@ -129,8 +129,8 @@ function *loadCurrentServerUrl(servers) {
 		currentServerUrl = null;
 	}
 	// // During testing
-	// 	return 'Downloads';
-	return currentServerUrl;
+	return 'Downloads';
+	// return currentServerUrl;
 }
 
 export function *serversSaga() {
diff --git a/yarn.lock b/yarn.lock
index 697ccee71c..a9ef41b022 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1125,10 +1125,10 @@
     invariant "^2.2.4"
     react-keyed-flatten-children "^1.2.0"
 
-"@rocket.chat/icons@^0.2.0-alpha.23":
-  version "0.2.0-alpha.28"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.2.0-alpha.28.tgz#2c186c27eb0100c4cd115992a27846e830d3f52e"
-  integrity sha512-z+LrEdOLIY8Cj/0oRi73Lg3jZZ7lsXXNkqfwT0wJjA6WKaPC+cOIOEW0y3YSV3NgHVupvuBJh9pK6xJTnU66Wg==
+"@rocket.chat/icons@0.6.3-dev.57":
+  version "0.6.3-dev.57"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.6.3-dev.57.tgz#1268f616a6c17c5ad1876bdeec993a78a10fd3dc"
+  integrity sha512-Agxr3iD+0fYTCikFX/Cesco0CAdlTbl03Uso3aOVLJynndWuzZyuB5eo5X4S+rL0L/L+MvALOSSbI/b3w1VjiA==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"

From b9505a8dfcde105b6faf58dc9a2f83764983f3d1 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 04:05:51 +0500
Subject: [PATCH 10/66] attach webcontent id to server

---
 src/actions.js                                |  1 +
 src/components/DownloadsManagerView/styles.js |  2 +-
 src/components/ServersView/ServerPane.js      |  5 ++++-
 src/reducers/servers.js                       | 12 +++++++-----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/actions.js b/src/actions.js
index 89dac89da1..4ced936a23 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -84,3 +84,4 @@ export const WEBVIEW_SPELL_CHECKING_DICTIONARY_FILES_CHOSEN = 'webview/spell-che
 export const WEBVIEW_SPELL_CHECKING_DICTIONARY_TOGGLED = 'webview/spell-checking-dictionary-toggled';
 export const WEBVIEW_TITLE_CHANGED = 'webview/title-changed';
 export const WEBVIEW_UNREAD_CHANGED = 'webview/unread-changed';
+// export const WEBVIEW_SERVER_ID = 'webview/server-id';
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index 9e635e939f..f9a6b6224d 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -20,7 +20,7 @@ export const Wrapper = styled.section`
 
 export const Content = styled.div`
 	position: relative;
-	top: 10%;
+	// top: 10%;
 	width: 100%;
 	// height: 100%;
 	max-width: 100%;
diff --git a/src/components/ServersView/ServerPane.js b/src/components/ServersView/ServerPane.js
index d38359689a..b60f9563d7 100644
--- a/src/components/ServersView/ServerPane.js
+++ b/src/components/ServersView/ServerPane.js
@@ -5,12 +5,14 @@ import { takeEvery } from 'redux-saga/effects';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
+
 import {
 	WEBVIEW_LOADING_STARTED,
 	WEBVIEW_LOADING_DONE,
 	WEBVIEW_LOADING_FAILED,
 	WEBVIEW_CERTIFICATE_DENIED,
 	LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
+	// WEBVIEW_SERVER_ID,
 } from '../../actions';
 import { useSaga } from '../SagaMiddlewareProvider';
 import { useWebviewFocus } from './useWebviewFocus';
@@ -117,7 +119,8 @@ export function ServerPane({
 			remoteModule
 			preload={`${ remote.app.getAppPath() }/app/preload.js`}
 			isVisible={!isFailed && !isReloading}
-			onWebContentsChange={(webContents) => setWebContents(webContents)}
+			onWebContentsChange={(webContents) => setWebContents(webContents) }
+			// dispatch({ type: WEBVIEW_SERVER_ID, payload: { id: webContents.id, url } });
 		/>
 		<ErrorPane isVisible={isFailed || isReloading}>
 			<FailureImage style={{ position: 'absolute', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 0 }} />
diff --git a/src/reducers/servers.js b/src/reducers/servers.js
index 3a8847caa7..171544613e 100644
--- a/src/reducers/servers.js
+++ b/src/reducers/servers.js
@@ -8,7 +8,7 @@ import {
 	WEBVIEW_TITLE_CHANGED,
 	WEBVIEW_UNREAD_CHANGED,
 	WEBVIEW_FAVICON_CHANGED,
-	WEBVIEW_SERVER_ID
+	// WEBVIEW_SERVER_ID,
 } from '../actions';
 
 const upsert = (state, server) => {
@@ -71,10 +71,12 @@ export const servers = (state = [], { type, payload }) => {
 
 			return state;
 		}
-		case WEBVIEW_SERVER_ID: {
-			const id = payload;
-			return url;
-		}
+		// case WEBVIEW_SERVER_ID: {
+		// 	const { servers } = state;
+		// 	const { id, url } = payload;
+
+		// 	console.log({ servers, id, url });
+		// }
 	}
 
 	return state;

From d5d1d33e7713d1798ae3a30eee2c7c0e4f7b86a7 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 06:46:53 +0500
Subject: [PATCH 11/66] server title added to download

---
 src/actions.js                                |  2 +-
 .../DownloadsComponents/DownloadItem.js       |  4 +-
 src/components/DownloadsManagerView/index.js  | 91 ++++++++++---------
 src/components/DownloadsManagerView/styles.js |  2 +-
 src/components/ServersView/ServerPane.js      |  8 +-
 src/main.js                                   |  2 +-
 src/reducers/servers.js                       | 15 +--
 7 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/src/actions.js b/src/actions.js
index 4ced936a23..0fde0aa8dd 100644
--- a/src/actions.js
+++ b/src/actions.js
@@ -84,4 +84,4 @@ export const WEBVIEW_SPELL_CHECKING_DICTIONARY_FILES_CHOSEN = 'webview/spell-che
 export const WEBVIEW_SPELL_CHECKING_DICTIONARY_TOGGLED = 'webview/spell-checking-dictionary-toggled';
 export const WEBVIEW_TITLE_CHANGED = 'webview/title-changed';
 export const WEBVIEW_UNREAD_CHANGED = 'webview/unread-changed';
-// export const WEBVIEW_SERVER_ID = 'webview/server-id';
+export const WEBVIEW_SERVER_ID = 'webview/server-id';
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 4f56386e37..63cbc4178a 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -4,7 +4,7 @@ import { Progress } from 'react-sweet-progress';
 import 'react-sweet-progress/lib/style.css';
 
 // recieve props for individual download item
-export default function DownloadItem({ filename, filesize, url, percentage, timeDownloaded }) {
+export default function DownloadItem({ filename, filesize, url, percentage, timeDownloaded, serverTitle }) {
 	console.log(percentage);
 	return <Margins all='x32'>
 		{/* <Grid md={true}> */ }
@@ -19,7 +19,7 @@ export default function DownloadItem({ filename, filesize, url, percentage, time
 				<Grid.Item xl={ 9 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
 					<Box fontSize='h1' lineHeight='h1'>filename</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='50%'>
-						<Box fontSize='s2' color='info'>@Server</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ 'filesize' || '25MB' }</Box>
+						<Box fontSize='s2' color='info'>{serverTitle || '@Server'}</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ 'filesize' || '25MB' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ 88 } status='default' />
 					<Box fontSize='s2' >{ 'url' || 'https://google.com' }</Box>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index e8648ba7cb..f74116a848 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -31,52 +31,59 @@ export function DownloadsManagerView() {
 	const currentServerUrl = useSelector(({ currentServerUrl }) => currentServerUrl);
 	console.log({ servers, currentServerUrl });
 
-	// const [url, setUrl] = useState('');
-	// const [percentage, setPercentage] = useState(0);
-	// const [filename, setFileName] = useState('');
-	// const [filesize, setFileSize] = useState(0);
-	// const [totalBytes, setTotalBytes] = useState(0);
+	const [url, setUrl] = useState('');
+	const [percentage, setPercentage] = useState(0);
+	const [filename, setFileName] = useState('');
+	const [filesize, setFileSize] = useState(0);
+	const [totalBytes, setTotalBytes] = useState(0);
+	const [serverTitle, setServerTitle] = useState('');
 	// let timeDownloaded;
-	// useEffect(() => {
-	// 	const handleFileSize = (event, props) => {
-	// 		console.log('hello yes changed');
-	// 		console.log(props);
-	// 		setFileName(props.filename);
-	// 		setTotalBytes(props.totalBytes);
-	// 		const filesize = formatBytes(props.totalBytes, 2, true);
-	// 		setFileSize(filesize);
-	// 		setUrl(props.url);
-	// 	};
-
-	// 	ipcRenderer.on('download-start', handleFileSize);
-	// 	return () => {
-	// 		ipcRenderer.removeListener('download-start', handleFileSize);
-	// 	};
-	// }, []);
-
-	// useEffect(() => {
-	// 	const handleProgress = (event, bytes) => {
-	// 		console.log('progress');
-	// 		console.log(` Current Bytes: ${ bytes }`);
-	// 		console.log(formatBytes(bytes, 2, true));
-	// 		// console.log(` Total Filesize: ${ filesize } `);
-	// 		const percentage = (bytes / totalBytes) * 100;
-	// 		setPercentage(percentage);
-	// 		if (percentage === 100) {
-	// 			const downloadTime = new Date().toLocaleTimeString();
-	// 			timeDownloaded = downloadTime;
-	// 		}
-	// 	};
-
-	// 	ipcRenderer.on('downloading', handleProgress);
-	// 	return () => {
-	// 		ipcRenderer.removeListener('downloading', handleProgress);
-	// 	};
-	// }, [totalBytes]);
+	useEffect(() => {
+		const handleFileSize = (event, props) => {
+			console.log('hello yes changed');
+			console.log(props);
+			setFileName(props.filename);
+			setTotalBytes(props.totalBytes);
+			const filesize = formatBytes(props.totalBytes, 2, true);
+			setFileSize(filesize);
+			setUrl(props.url);
+			const index = servers.findIndex(({ id }) => id === props.id);
+			setServerTitle(servers[index].title);
+		};
+
+		ipcRenderer.on('download-start', handleFileSize);
+		return () => {
+			ipcRenderer.removeListener('download-start', handleFileSize);
+		};
+	}, [servers]);
+
+	useEffect(() => {
+		const handleProgress = (event, bytes) => {
+			console.log('progress');
+			console.log(` Current Bytes: ${ bytes }`);
+			console.log(formatBytes(bytes, 2, true));
+			// console.log(` Total Filesize: ${ filesize } `);
+			const percentage = (bytes / totalBytes) * 100;
+			setPercentage(percentage);
+			if (percentage === 100) {
+				const downloadTime = new Date().toLocaleTimeString();
+				timeDownloaded = downloadTime;
+			}
+		};
+
+		ipcRenderer.on('downloading', handleProgress);
+		return () => {
+			ipcRenderer.removeListener('downloading', handleProgress);
+		};
+	}, [totalBytes]);
 
 	// Creat function to create download item, fill the global state with the new item.
 	// function newDownload
 
+	// const createNewDownload = () => {
+		
+	// 	return <DownloadItem/>
+	// }
 	// Save and load downloadItem information
 
 	return <Wrapper isVisible={ isVisible }>
@@ -121,7 +128,7 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						<DownloadItem />
+						<DownloadItem serverTitle={serverTitle} percentage={percentage} filename={filename} filesize={filesize} url={url} />
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index f9a6b6224d..9e635e939f 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -20,7 +20,7 @@ export const Wrapper = styled.section`
 
 export const Content = styled.div`
 	position: relative;
-	// top: 10%;
+	top: 10%;
 	width: 100%;
 	// height: 100%;
 	max-width: 100%;
diff --git a/src/components/ServersView/ServerPane.js b/src/components/ServersView/ServerPane.js
index b60f9563d7..477228c2ce 100644
--- a/src/components/ServersView/ServerPane.js
+++ b/src/components/ServersView/ServerPane.js
@@ -12,7 +12,7 @@ import {
 	WEBVIEW_LOADING_FAILED,
 	WEBVIEW_CERTIFICATE_DENIED,
 	LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
-	// WEBVIEW_SERVER_ID,
+	WEBVIEW_SERVER_ID,
 } from '../../actions';
 import { useSaga } from '../SagaMiddlewareProvider';
 import { useWebviewFocus } from './useWebviewFocus';
@@ -119,8 +119,10 @@ export function ServerPane({
 			remoteModule
 			preload={`${ remote.app.getAppPath() }/app/preload.js`}
 			isVisible={!isFailed && !isReloading}
-			onWebContentsChange={(webContents) => setWebContents(webContents) }
-			// dispatch({ type: WEBVIEW_SERVER_ID, payload: { id: webContents.id, url } });
+			onWebContentsChange={(webContents) => {
+				dispatch({ type: WEBVIEW_SERVER_ID, payload: { id: webContents.id, serverUrl: url } });
+				return setWebContents(webContents);
+			}}
 		/>
 		<ErrorPane isVisible={isFailed || isReloading}>
 			<FailureImage style={{ position: 'absolute', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 0 }} />
diff --git a/src/main.js b/src/main.js
index 0452b92c7d..1848ef4fe5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -109,7 +109,7 @@ const createMainWindow = () => {
 
 
 		// Set the save path, making Electron not to prompt a save dialog.
-		mainWindow.webContents.send('download-start', { totalBytes: item.getTotalBytes(), filename: item.getFilename(), url: item.getURL() });
+		mainWindow.webContents.send('download-start', { totalBytes: item.getTotalBytes(), filename: item.getFilename(), url: item.getURL(), id: webContents.id });
 		item.on('updated', (event, state) => {
 			if (state === 'interrupted') {
 				console.log('Download is interrupted but can be resumed');
diff --git a/src/reducers/servers.js b/src/reducers/servers.js
index 171544613e..30e9489bbc 100644
--- a/src/reducers/servers.js
+++ b/src/reducers/servers.js
@@ -8,7 +8,7 @@ import {
 	WEBVIEW_TITLE_CHANGED,
 	WEBVIEW_UNREAD_CHANGED,
 	WEBVIEW_FAVICON_CHANGED,
-	// WEBVIEW_SERVER_ID,
+	WEBVIEW_SERVER_ID,
 } from '../actions';
 
 const upsert = (state, server) => {
@@ -71,12 +71,13 @@ export const servers = (state = [], { type, payload }) => {
 
 			return state;
 		}
-		// case WEBVIEW_SERVER_ID: {
-		// 	const { servers } = state;
-		// 	const { id, url } = payload;
-
-		// 	console.log({ servers, id, url });
-		// }
+		case WEBVIEW_SERVER_ID: {
+			const { id, serverUrl } = payload;
+			const index = state.findIndex(({ url }) => url === serverUrl);
+			state[index].webContentId = id;
+			console.log(state);
+			return state;
+		}
 	}
 
 	return state;

From 9f124250ef35fedc27cdbb4670fbcd03b8c881da Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 06:57:52 +0500
Subject: [PATCH 12/66] insatlled electron-store

---
 package.json                                 |  1 +
 src/components/DownloadsManagerView/index.js | 13 +++--
 yarn.lock                                    | 50 +++++++++++++++++++-
 3 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index c6b35bcde3..9f7ac5771a 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "electron-fetch": "^1.4.0",
     "electron-hunspell": "^1.1.2",
     "electron-reload": "^1.5.0",
+    "electron-store": "^5.2.0",
     "electron-updater": "^4.0.6",
     "i18next": "^19.0.0",
     "i18next-node-fs-backend": "^2.1.1",
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index f74116a848..69cd1c9907 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -31,13 +31,17 @@ export function DownloadsManagerView() {
 	const currentServerUrl = useSelector(({ currentServerUrl }) => currentServerUrl);
 	console.log({ servers, currentServerUrl });
 
+	// Downloads Array 
+	const [downloads setDownloads] = useState([]);
+
+
 	const [url, setUrl] = useState('');
 	const [percentage, setPercentage] = useState(0);
 	const [filename, setFileName] = useState('');
 	const [filesize, setFileSize] = useState(0);
 	const [totalBytes, setTotalBytes] = useState(0);
 	const [serverTitle, setServerTitle] = useState('');
-	// let timeDownloaded;
+	let timeDownloaded;
 	useEffect(() => {
 		const handleFileSize = (event, props) => {
 			console.log('hello yes changed');
@@ -80,10 +84,9 @@ export function DownloadsManagerView() {
 	// Creat function to create download item, fill the global state with the new item.
 	// function newDownload
 
-	// const createNewDownload = () => {
-		
-	// 	return <DownloadItem/>
-	// }
+	// const createNewDownload = ({ url, percentage, fileSize, fileName, serverTitle }) => {
+	// 	return <DownloadItem serverTitle={serverTitle} percentage={percentage} filename={fileName} filesize={fileSize} url={url} />;
+	// };
 	// Save and load downloadItem information
 
 	return <Wrapper isVisible={ isVisible }>
diff --git a/yarn.lock b/yarn.lock
index a9ef41b022..3997353a7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2471,6 +2471,22 @@ concat-with-sourcemaps@^1.1.0:
   dependencies:
     source-map "^0.6.1"
 
+conf@^6.2.1:
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/conf/-/conf-6.2.4.tgz#49d23c4e21ef2ac2860f7b5ed25b7b7e484f769f"
+  integrity sha512-GjgyPRLo1qK1LR9RWAdUagqo+DP18f5HWCFk4va7GS+wpxQTOzfuKTwKOvGW2c01/YXNicAyyoyuSddmdkBzZQ==
+  dependencies:
+    ajv "^6.10.2"
+    debounce-fn "^3.0.1"
+    dot-prop "^5.0.0"
+    env-paths "^2.2.0"
+    json-schema-typed "^7.0.1"
+    make-dir "^3.0.0"
+    onetime "^5.1.0"
+    pkg-up "^3.0.1"
+    semver "^6.2.0"
+    write-file-atomic "^3.0.0"
+
 config-chain@^1.1.11:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
@@ -2954,6 +2970,13 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
+debounce-fn@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/debounce-fn/-/debounce-fn-3.0.1.tgz#034afe8b904d985d1ec1aa589cd15f388741d680"
+  integrity sha512-aBoJh5AhpqlRoHZjHmOzZlRx+wz2xVwGL9rjs+Kj0EWUrL4/h4K7OD176thl2Tdoqui/AaA4xhHrNArGLAaI3Q==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3220,7 +3243,7 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^5.1.0, dot-prop@^5.2.0:
+dot-prop@^5.0.0, dot-prop@^5.1.0, dot-prop@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
   integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
@@ -3361,6 +3384,14 @@ electron-reload@^1.5.0:
   dependencies:
     chokidar "^3.0.2"
 
+electron-store@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/electron-store/-/electron-store-5.2.0.tgz#a15718fc1fa21acfd07af55f9b94f9fa6a536665"
+  integrity sha512-iU3WDqEDAYNYR9XV7p0tJajq/zs9z7Nrn0sAoR5nDyn8h/9dr9kusKbTxD8NtVEBD1TB1pkGMqcbIt/y6knDwQ==
+  dependencies:
+    conf "^6.2.1"
+    type-fest "^0.7.1"
+
 electron-to-chromium@^1.3.341:
   version "1.3.347"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.347.tgz#ba9724a8e8122a0b081836892e1e08eef7fa4cd7"
@@ -5433,6 +5464,11 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
+json-schema-typed@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/json-schema-typed/-/json-schema-typed-7.0.3.tgz#23ff481b8b4eebcd2ca123b4fa0409e66469a2d9"
+  integrity sha512-7DE8mpG+/fVw+dTpjbxnx47TaMnDfOI1jwft9g1VybltZCduyRQPJPvc+zzKY9WPHxhPWczyFuYa6I8Mw4iU5A==
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -6927,6 +6963,13 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pkg-up@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 plugin-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
@@ -9093,6 +9136,11 @@ type-fest@^0.6.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
   integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
+type-fest@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
+  integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
+
 type-fest@^0.8.0, type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"

From 31b53c5e81489db54775ea2b262e6db3d7516a61 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 16:49:11 +0500
Subject: [PATCH 13/66] download store initial

---
 .../DownloadsComponents/DownloadItem.js       | 10 ++---
 src/components/DownloadsManagerView/index.js  | 43 ++++++++++++++-----
 src/main.js                                   | 34 +++++++++------
 3 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 63cbc4178a..b177646e7d 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -4,7 +4,7 @@ import { Progress } from 'react-sweet-progress';
 import 'react-sweet-progress/lib/style.css';
 
 // recieve props for individual download item
-export default function DownloadItem({ filename, filesize, url, percentage, timeDownloaded, serverTitle }) {
+export default function DownloadItem({ fileName, fileSize, url, percentage, serverTitle }) {
 	console.log(percentage);
 	return <Margins all='x32'>
 		{/* <Grid md={true}> */ }
@@ -17,12 +17,12 @@ export default function DownloadItem({ filename, filesize, url, percentage, time
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 9 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-					<Box fontSize='h1' lineHeight='h1'>filename</Box>
+					<Box fontSize='h1' lineHeight='h1'>{fileName}</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='50%'>
-						<Box fontSize='s2' color='info'>{serverTitle || '@Server'}</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ 'filesize' || '25MB' }</Box>
+						<Box fontSize='s2' color='info'>{serverTitle || '@Server'}</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
 					</Box>
-					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ 88 } status='default' />
-					<Box fontSize='s2' >{ 'url' || 'https://google.com' }</Box>
+					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
+					<Box fontSize='s2' >{ url.substring(0, 45) || 'https://google.com' }</Box>
 					<a href='#' style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</a>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 69cd1c9907..ae615009b4 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -31,17 +31,35 @@ export function DownloadsManagerView() {
 	const currentServerUrl = useSelector(({ currentServerUrl }) => currentServerUrl);
 	console.log({ servers, currentServerUrl });
 
-	// Downloads Array 
-	const [downloads setDownloads] = useState([]);
+
+	// Downloads Array
+	const [downloads, setDownloads] = useState([]);
 
 
 	const [url, setUrl] = useState('');
 	const [percentage, setPercentage] = useState(0);
-	const [filename, setFileName] = useState('');
-	const [filesize, setFileSize] = useState(0);
+	const [fileName, setFileName] = useState('');
+	const [fileSize, setFileSize] = useState(0);
 	const [totalBytes, setTotalBytes] = useState(0);
 	const [serverTitle, setServerTitle] = useState('');
-	let timeDownloaded;
+	// let timeDownloaded;
+
+	// useEffect(() => {
+	// 	const intializeDownloads = (event, downloads) => {
+	// 		setDownloads(downloads);
+	// 		console.log(downloads);
+	// 	};
+	// 	ipcRenderer.on('initialize-downloads', intializeDownloads);
+	// 	return () => {
+	// 		ipcRenderer.removeListener('initialize-downloads', intializeDownloads);
+	// 	};
+	// }, [downloads]);
+
+	// useEffect(() => {
+	// 	console.log('trigger');
+
+	// }, [downloads, fileName, fileSize, serverTitle, url]);
+
 	useEffect(() => {
 		const handleFileSize = (event, props) => {
 			console.log('hello yes changed');
@@ -51,7 +69,8 @@ export function DownloadsManagerView() {
 			const filesize = formatBytes(props.totalBytes, 2, true);
 			setFileSize(filesize);
 			setUrl(props.url);
-			const index = servers.findIndex(({ id }) => id === props.id);
+			const index = servers.findIndex(({ webContentId }) => webContentId === props.id);
+			console.log(index);
 			setServerTitle(servers[index].title);
 		};
 
@@ -70,8 +89,12 @@ export function DownloadsManagerView() {
 			const percentage = (bytes / totalBytes) * 100;
 			setPercentage(percentage);
 			if (percentage === 100) {
-				const downloadTime = new Date().toLocaleTimeString();
-				timeDownloaded = downloadTime;
+				// const downloadTime = new Date().toLocaleTimeString();
+				// timeDownloaded = downloadTime;
+				// const updatedDownloads = downloads;
+				// updatedDownloads.push({ url, fileName, fileSize, serverTitle, percentage: 100 });
+				// setDownloads(updatedDownloads);
+				ipcRenderer.send('download-complete', { url, fileName, fileSize });
 			}
 		};
 
@@ -79,7 +102,7 @@ export function DownloadsManagerView() {
 		return () => {
 			ipcRenderer.removeListener('downloading', handleProgress);
 		};
-	}, [totalBytes]);
+	}, [fileName, fileSize, serverTitle, totalBytes, url]);
 
 	// Creat function to create download item, fill the global state with the new item.
 	// function newDownload
@@ -131,7 +154,7 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						<DownloadItem serverTitle={serverTitle} percentage={percentage} filename={filename} filesize={filesize} url={url} />
+						<DownloadItem serverTitle={serverTitle} percentage={percentage} filename={fileName} filesize={fileSize} url={url} />
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/main.js b/src/main.js
index 1848ef4fe5..78f9d3e848 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,17 @@
 import path from 'path';
 
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
 import { readFromStorage } from './localStorage';
 import { setupErrorHandling } from './errorHandling';
 
+
+const Store = require('electron-store');
+
+const store = new Store();
+
 if (process.env.NODE_ENV === 'development') {
 	setupElectronReload(__dirname, {
 		electron: process.execPath,
@@ -93,21 +98,22 @@ const createMainWindow = () => {
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
-	// Downloads handler. Handles all downloads from links.
-	mainWindow.webContents.session.on('will-download', (event, item, webContents, ...args) => {
-		console.log({ event, item, webContents, args });
-		// const servers = readFromStorage('servers');
-		// const currentServerUrl = readFromStorage('currentServerUrl');
-		// console.log(servers);
-		// console.log(currentServerUrl);
-		// let serverTitle;
-		// for (const server of servers) {
-		// 	if (server.url === currentServerUrl) {
-		// 		serverTitle = server.title;
-		// 	}
-		// }
+	// Load All Downloads from LocalStorage in Main Process
+	// const downloads = store.get('downloads', []);
+	// mainWindow.webContents.send('initalize-downloads', downloads);
 
 
+	ipcMain.on('download-complete', (event, downloadItem) => {
+		const downloads = store.get('downloads', []);
+		downloads.push(downloadItem);
+		console.log(downloads);
+		store.set('downloads', downloads);
+		console.log(downloadItem);
+	});
+	// Downloads handler. Handles all downloads from links.
+	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
+		// console.log({ event, item, webContents });
+
 		// Set the save path, making Electron not to prompt a save dialog.
 		mainWindow.webContents.send('download-start', { totalBytes: item.getTotalBytes(), filename: item.getFilename(), url: item.getURL(), id: webContents.id });
 		item.on('updated', (event, state) => {

From fafd8da95569bb248a8f6cd4c2d716a61fbba210 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 21:27:33 +0500
Subject: [PATCH 14/66] downloads list loading

---
 src/components/DownloadsManagerView/index.js | 79 ++++++++++++--------
 src/main.js                                  | 22 ++++--
 2 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index ae615009b4..5034d8c6c3 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -2,7 +2,7 @@ import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } fro
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { remote, ipcRenderer } from 'electron';
+import { ipcRenderer } from 'electron';
 
 import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
@@ -44,33 +44,44 @@ export function DownloadsManagerView() {
 	const [serverTitle, setServerTitle] = useState('');
 	// let timeDownloaded;
 
-	// useEffect(() => {
-	// 	const intializeDownloads = (event, downloads) => {
-	// 		setDownloads(downloads);
-	// 		console.log(downloads);
-	// 	};
-	// 	ipcRenderer.on('initialize-downloads', intializeDownloads);
-	// 	return () => {
-	// 		ipcRenderer.removeListener('initialize-downloads', intializeDownloads);
-	// 	};
-	// }, [downloads]);
 
-	// useEffect(() => {
-	// 	console.log('trigger');
+	useEffect(() => {
+		const intializeDownloads = (event, downloads) => {
+			console.log('Initialized Downloads');
+			setDownloads(Object.values(downloads));
+			console.log(downloads);
+		};
+		ipcRenderer.on('initialize-downloads', intializeDownloads);
+		return () => {
+			ipcRenderer.removeListener('initialize-downloads', intializeDownloads);
+		};
+	}, []);
 
-	// }, [downloads, fileName, fileSize, serverTitle, url]);
+	// Download Completed, Send data back
+	useEffect(() => {
+		const downloadComplete = () => {
+			console.log('trigger');
+			ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage: 100, serverTitle });
+		};
 
+		ipcRenderer.on('download-complete', downloadComplete);
+		return () => {
+			ipcRenderer.removeListener('download-complete', downloadComplete);
+		};
+	}, [fileName, fileSize, serverTitle, url]);
+
+	// Initalize  A Download
 	useEffect(() => {
 		const handleFileSize = (event, props) => {
-			console.log('hello yes changed');
-			console.log(props);
+			console.log('New Download');
+			// console.log(props);
 			setFileName(props.filename);
 			setTotalBytes(props.totalBytes);
 			const filesize = formatBytes(props.totalBytes, 2, true);
 			setFileSize(filesize);
 			setUrl(props.url);
 			const index = servers.findIndex(({ webContentId }) => webContentId === props.id);
-			console.log(index);
+			// console.log(index);
 			setServerTitle(servers[index].title);
 		};
 
@@ -80,29 +91,31 @@ export function DownloadsManagerView() {
 		};
 	}, [servers]);
 
+
+	// Hanndle Progress Percentage and Update
 	useEffect(() => {
 		const handleProgress = (event, bytes) => {
-			console.log('progress');
-			console.log(` Current Bytes: ${ bytes }`);
-			console.log(formatBytes(bytes, 2, true));
+			console.log('Progress');
+			// console.log(` Current Bytes: ${ bytes }`);
+			// console.log(formatBytes(bytes, 2, true));
 			// console.log(` Total Filesize: ${ filesize } `);
 			const percentage = (bytes / totalBytes) * 100;
 			setPercentage(percentage);
-			if (percentage === 100) {
-				// const downloadTime = new Date().toLocaleTimeString();
-				// timeDownloaded = downloadTime;
-				// const updatedDownloads = downloads;
-				// updatedDownloads.push({ url, fileName, fileSize, serverTitle, percentage: 100 });
-				// setDownloads(updatedDownloads);
-				ipcRenderer.send('download-complete', { url, fileName, fileSize });
-			}
+			// if (percentage === 100) {
+			// 	// const downloadTime = new Date().toLocaleTimeString();
+			// 	// timeDownloaded = downloadTime;
+			// 	// const updatedDownloads = downloads;
+			// 	// updatedDownloads.push({ url, fileName, fileSize, serverTitle, percentage: 100 });
+			// 	// setDownloads(updatedDownloads);
+			// 	ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage, serverTitle });
+			// }
 		};
 
 		ipcRenderer.on('downloading', handleProgress);
 		return () => {
 			ipcRenderer.removeListener('downloading', handleProgress);
 		};
-	}, [fileName, fileSize, serverTitle, totalBytes, url]);
+	}, [totalBytes]);
 
 	// Creat function to create download item, fill the global state with the new item.
 	// function newDownload
@@ -112,6 +125,11 @@ export function DownloadsManagerView() {
 	// };
 	// Save and load downloadItem information
 
+	useEffect(() => {
+		console.log('Loading Downloads');
+		ipcRenderer.send('load-downloads');
+	}, []);
+
 	return <Wrapper isVisible={ isVisible }>
 		<Content>
 			<Box width='85%'>
@@ -154,7 +172,8 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						<DownloadItem serverTitle={serverTitle} percentage={percentage} filename={fileName} filesize={fileSize} url={url} />
+						{ downloads.map((downloadItem) => <DownloadItem {...downloadItem} />)}
+
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/main.js b/src/main.js
index 78f9d3e848..3982ff24aa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -87,7 +87,7 @@ const createMainWindow = () => {
 		},
 	});
 
-	mainWindow.addListener('close', (e) => {
+	mainWindow.addListener('close', async (e) => {
 		preventEvent(e);
 		console.log('closing');
 	});
@@ -98,17 +98,23 @@ const createMainWindow = () => {
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
+	console.log(store.get('downloads', {}));
+
 	// Load All Downloads from LocalStorage in Main Process
-	// const downloads = store.get('downloads', []);
-	// mainWindow.webContents.send('initalize-downloads', downloads);
+	ipcMain.on('load-downloads', async () => {
+		console.log('Loading Downloads');
+		const downloads = await store.get('downloads', {});
+		mainWindow.webContents.send('initialize-downloads', downloads);
+	});
+	// store.clear();
 
 
-	ipcMain.on('download-complete', (event, downloadItem) => {
-		const downloads = store.get('downloads', []);
-		downloads.push(downloadItem);
+	ipcMain.on('download-complete', async (event, downloadItem) => {
+		const downloads = await store.get('downloads', {});
+		downloads[downloadItem.fileName] = downloadItem;
 		console.log(downloads);
 		store.set('downloads', downloads);
-		console.log(downloadItem);
+		// console.log(downloadItem);
 	});
 	// Downloads handler. Handles all downloads from links.
 	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
@@ -130,7 +136,7 @@ const createMainWindow = () => {
 		});
 		item.once('done', (event, state) => {
 			if (state === 'completed') {
-				// mainWindow.webContents.send('download-complete', item.getTotalBytes());
+				mainWindow.webContents.send('download-complete');
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);

From ee2866118eb65d0f26b6bc4691c271661f1a5bba Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 27 Jun 2020 21:43:02 +0500
Subject: [PATCH 15/66] cleaning up - checkpoint commit

---
 src/components/DownloadsManagerView/index.js | 11 -----------
 src/main.js                                  |  6 ++++--
 2 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 5034d8c6c3..4a43360e01 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -97,18 +97,8 @@ export function DownloadsManagerView() {
 		const handleProgress = (event, bytes) => {
 			console.log('Progress');
 			// console.log(` Current Bytes: ${ bytes }`);
-			// console.log(formatBytes(bytes, 2, true));
-			// console.log(` Total Filesize: ${ filesize } `);
 			const percentage = (bytes / totalBytes) * 100;
 			setPercentage(percentage);
-			// if (percentage === 100) {
-			// 	// const downloadTime = new Date().toLocaleTimeString();
-			// 	// timeDownloaded = downloadTime;
-			// 	// const updatedDownloads = downloads;
-			// 	// updatedDownloads.push({ url, fileName, fileSize, serverTitle, percentage: 100 });
-			// 	// setDownloads(updatedDownloads);
-			// 	ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage, serverTitle });
-			// }
 		};
 
 		ipcRenderer.on('downloading', handleProgress);
@@ -123,7 +113,6 @@ export function DownloadsManagerView() {
 	// const createNewDownload = ({ url, percentage, fileSize, fileName, serverTitle }) => {
 	// 	return <DownloadItem serverTitle={serverTitle} percentage={percentage} filename={fileName} filesize={fileSize} url={url} />;
 	// };
-	// Save and load downloadItem information
 
 	useEffect(() => {
 		console.log('Loading Downloads');
diff --git a/src/main.js b/src/main.js
index 3982ff24aa..037f949034 100644
--- a/src/main.js
+++ b/src/main.js
@@ -98,7 +98,10 @@ const createMainWindow = () => {
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
-	console.log(store.get('downloads', {}));
+
+	// Logs and Helpers
+	// console.log(store.get('downloads', {}));
+	// store.clear();
 
 	// Load All Downloads from LocalStorage in Main Process
 	ipcMain.on('load-downloads', async () => {
@@ -106,7 +109,6 @@ const createMainWindow = () => {
 		const downloads = await store.get('downloads', {});
 		mainWindow.webContents.send('initialize-downloads', downloads);
 	});
-	// store.clear();
 
 
 	ipcMain.on('download-complete', async (event, downloadItem) => {

From cac8dd20ff3a68a1cfb5bb8fc4034fba43e8f020 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 2 Jul 2020 02:59:55 +0500
Subject: [PATCH 16/66] show in folder button

---
 .../DownloadsComponents/DownloadItem.js       |  96 ++++++++++++--
 .../DownloadsComponents/DownloadsList.js      |   8 --
 src/components/DownloadsManagerView/index.js  | 124 +++++-------------
 src/components/DownloadsManagerView/styles.js |   9 --
 src/main.js                                   |  18 +--
 5 files changed, 131 insertions(+), 124 deletions(-)
 delete mode 100644 src/components/DownloadsComponents/DownloadsList.js

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index b177646e7d..0e9d7ba30b 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,12 +1,88 @@
-import { Box, Margins, Tile, Grid, Icon } from '@rocket.chat/fuselage';
-import React, { useEffect } from 'react';
+import { Box, Margins, Tile, Grid, Icon, Button } from '@rocket.chat/fuselage';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ipcRenderer } from 'electron';
 import { Progress } from 'react-sweet-progress';
 import 'react-sweet-progress/lib/style.css';
 
-// recieve props for individual download item
-export default function DownloadItem({ fileName, fileSize, url, percentage, serverTitle }) {
-	console.log(percentage);
+// Utility function for bytes conversion. TODO: seperate into another file.
+function formatBytes(bytes, decimals = 2, size = false) {
+	if (bytes === 0) {
+		return '0 Bytes';
+	}
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	if (size) {
+		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
+	}
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+}
+
+
+// Recieve props for individual download item
+export default function DownloadItem(props) {
+	// console.log(props);
+	const servers = useSelector(({ servers }) => servers);
+	// console.log(servers);
+
+	const { url } = props;
+	const { fileName } = props;
+	const { totalBytes } = props;
+	const { itemId } = props;
+	const { serverId } = props;
+	const date = props.date || new Date(itemId).toDateString();
+	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
+	const [percentage, setPercentage] = useState(props.percentage);
+	const [path, setPath] = useState(props.path);
+
+	let serverTitle;
+
+	if (serverId) {
+		const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
+		serverTitle = servers[index].title;
+	} else {
+		serverTitle = props.serverTitle;
+	}
+
+
+	// Download Completed, Send data back
+	useEffect(() => {
+		const downloadComplete = () => {
+			console.log('Download Complete');
+			ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path });
+		};
+
+		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
+		return () => {
+			ipcRenderer.removeListener('download-complete', downloadComplete);
+		};
+	});
+
+
+	// TODO: Convert to only recieve dynamic progressed bytes data.
+	useEffect(() => {
+		const handleProgress = (event, props) => {
+			console.log('Progress');
+			// console.log(` Current Bytes: ${ bytes }`);
+			const percentage = (props.bytes / totalBytes) * 100;
+			setPercentage(Math.floor(percentage));
+			setPath(props.savePath);
+			// console.log(props);
+		};
+		// Listen on unique event only
+		ipcRenderer.on(`downloading-${ itemId }`, handleProgress);
+		return () => {
+			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
+		};
+	}, [itemId, totalBytes]);
+
 	return <Margins all='x32'>
+
 		{/* <Grid md={true}> */ }
 		<Tile elevation='2' style={ { width: '95%' } }>
 			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
@@ -17,20 +93,20 @@ export default function DownloadItem({ fileName, fileSize, url, percentage, serv
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 9 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-					<Box fontSize='h1' lineHeight='h1'>{fileName}</Box>
+					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='50%'>
-						<Box fontSize='s2' color='info'>{serverTitle || '@Server'}</Box> <Box fontSize='s2' color='info'> { 'date' }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
+						<Box fontSize='s2' color='info'>{ serverTitle || '@Server' }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-					<Box fontSize='s2' >{ url.substring(0, 45) || 'https://google.com' }</Box>
-					<a href='#' style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</a>
+					<Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box>
+					{/* // TODO: Implement Show in Folder */ }
+					<Box is={Button} ghost onClick={() => props.handleFileOpen(path)} style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
 					<Icon name='cross' size='x32' />
 				</Grid.Item>
 			</Box>
 		</Tile>
-
 		{/* </Grid> */ }
 	</Margins>;
 }
diff --git a/src/components/DownloadsComponents/DownloadsList.js b/src/components/DownloadsComponents/DownloadsList.js
deleted file mode 100644
index 2adc9886ef..0000000000
--- a/src/components/DownloadsComponents/DownloadsList.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-import DownloadItem from './DownloadItem';
-
-export default function DownloadsList({ items }) {
-	// placeholder for multiple downloads
-	return items.map((item) => <DownloadItem />);
-};
\ No newline at end of file
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 4a43360e01..8b24e74eea 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -2,53 +2,51 @@ import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } fro
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
 
 
-function formatBytes(bytes, decimals = 2, size = false) {
-	if (bytes === 0) {
-		return '0 Bytes';
-	}
-
-	const k = 1024;
-	const dm = decimals < 0 ? 0 : decimals;
-	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	if (size) {
-		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
-	}
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-}
-
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
-	const currentServerUrl = useSelector(({ currentServerUrl }) => currentServerUrl);
-	console.log({ servers, currentServerUrl });
 
+	// const servers = useSelector(({ servers }) => servers);
+	// console.log({ servers });
+
+	const handleLinks = (e) => {
+		e.preventDefault();
+		shell.openExternal(e.target.href);
+	};
+
+	const handleFileOpen = (e, path) => {
+		console.log(e);
+		shell.showItemInFolder(path);
+	};
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
 
 
-	const [url, setUrl] = useState('');
-	const [percentage, setPercentage] = useState(0);
-	const [fileName, setFileName] = useState('');
-	const [fileSize, setFileSize] = useState(0);
-	const [totalBytes, setTotalBytes] = useState(0);
-	const [serverTitle, setServerTitle] = useState('');
-	// let timeDownloaded;
-
+	useEffect(() => {
+		const createDownload = (event, props) => {
+			console.log('Creating New Download');
+			const updatedDownloads = [...downloads];
+			updatedDownloads.push([props.itemId, props]);
+			setDownloads(updatedDownloads);
+			console.log(props.itemId);
+		};
+		ipcRenderer.on('create-download-item', createDownload);
+		return () => {
+			ipcRenderer.removeListener('create-download-item', createDownload);
+		};
+	}, [downloads]);
 
 	useEffect(() => {
 		const intializeDownloads = (event, downloads) => {
-			console.log('Initialized Downloads');
-			setDownloads(Object.values(downloads));
+			const updatedDownloads = Object.entries(downloads).map(([key, value]) => [key, value]);
+			setDownloads(updatedDownloads);
 			console.log(downloads);
 		};
 		ipcRenderer.on('initialize-downloads', intializeDownloads);
@@ -57,62 +55,12 @@ export function DownloadsManagerView() {
 		};
 	}, []);
 
-	// Download Completed, Send data back
-	useEffect(() => {
-		const downloadComplete = () => {
-			console.log('trigger');
-			ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage: 100, serverTitle });
-		};
-
-		ipcRenderer.on('download-complete', downloadComplete);
-		return () => {
-			ipcRenderer.removeListener('download-complete', downloadComplete);
-		};
-	}, [fileName, fileSize, serverTitle, url]);
-
-	// Initalize  A Download
-	useEffect(() => {
-		const handleFileSize = (event, props) => {
-			console.log('New Download');
-			// console.log(props);
-			setFileName(props.filename);
-			setTotalBytes(props.totalBytes);
-			const filesize = formatBytes(props.totalBytes, 2, true);
-			setFileSize(filesize);
-			setUrl(props.url);
-			const index = servers.findIndex(({ webContentId }) => webContentId === props.id);
-			// console.log(index);
-			setServerTitle(servers[index].title);
-		};
-
-		ipcRenderer.on('download-start', handleFileSize);
-		return () => {
-			ipcRenderer.removeListener('download-start', handleFileSize);
-		};
-	}, [servers]);
-
+	const updateDownloads = (itemId, downloadItem) => {
+		const updatedDownloads = [...downloads];
+		updatedDownloads.push([itemId, downloadItem]);
+		setDownloads(updatedDownloads);
+	};
 
-	// Hanndle Progress Percentage and Update
-	useEffect(() => {
-		const handleProgress = (event, bytes) => {
-			console.log('Progress');
-			// console.log(` Current Bytes: ${ bytes }`);
-			const percentage = (bytes / totalBytes) * 100;
-			setPercentage(percentage);
-		};
-
-		ipcRenderer.on('downloading', handleProgress);
-		return () => {
-			ipcRenderer.removeListener('downloading', handleProgress);
-		};
-	}, [totalBytes]);
-
-	// Creat function to create download item, fill the global state with the new item.
-	// function newDownload
-
-	// const createNewDownload = ({ url, percentage, fileSize, fileName, serverTitle }) => {
-	// 	return <DownloadItem serverTitle={serverTitle} percentage={percentage} filename={fileName} filesize={fileSize} url={url} />;
-	// };
 
 	useEffect(() => {
 		console.log('Loading Downloads');
@@ -130,7 +78,7 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 4 } >
-						<Select width='300px' placeholder='Filter by Server' options={ [[1, 'Rocket.Chat'], [2, 'Server2'], [3, 'Test Server']] } />
+						<Select width='300px' placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
 					</Grid.Item>
 
 					<Grid.Item xl={ 1 } >
@@ -161,8 +109,8 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{ downloads.map((downloadItem) => <DownloadItem {...downloadItem} />)}
-
+						{/* Download Item List */}
+						{ downloads.map(([itemId, downloadItem]) => <DownloadItem itemId={itemId} {...downloadItem} updateDownloads = {updateDownloads} key={itemId} handleFileOpen={handleFileOpen} handleLinks={handleLinks} />)}
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index 9e635e939f..b7d77b8320 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -28,12 +28,3 @@ export const Content = styled.div`
 	justify-content: center;
 	// max-height: 100%;
 `;
-
-
-export const Title = styled.h1`
-	// color: blue;
-`;
-
-export const Subtitle = styled.h4`
-	color: lightslategrey;
-`;
diff --git a/src/main.js b/src/main.js
index 037f949034..002adb91a9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,6 @@ import { app, BrowserWindow, ipcMain } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
-import { readFromStorage } from './localStorage';
 import { setupErrorHandling } from './errorHandling';
 
 
@@ -101,9 +100,9 @@ const createMainWindow = () => {
 
 	// Logs and Helpers
 	// console.log(store.get('downloads', {}));
-	// store.clear();
+	store.clear();
 
-	// Load All Downloads from LocalStorage in Main Process
+	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {
 		console.log('Loading Downloads');
 		const downloads = await store.get('downloads', {});
@@ -111,19 +110,19 @@ const createMainWindow = () => {
 	});
 
 
+	// Listen and save a single download being completed.
 	ipcMain.on('download-complete', async (event, downloadItem) => {
 		const downloads = await store.get('downloads', {});
-		downloads[downloadItem.fileName] = downloadItem;
+		downloads[downloadItem.itemId] = downloadItem;
 		console.log(downloads);
 		store.set('downloads', downloads);
-		// console.log(downloadItem);
 	});
 	// Downloads handler. Handles all downloads from links.
 	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
 		// console.log({ event, item, webContents });
+		const itemId = Date.now();
+		mainWindow.webContents.send('create-download-item', { itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id }); // Request download item creation in UI and send unqiue ID.
 
-		// Set the save path, making Electron not to prompt a save dialog.
-		mainWindow.webContents.send('download-start', { totalBytes: item.getTotalBytes(), filename: item.getFilename(), url: item.getURL(), id: webContents.id });
 		item.on('updated', (event, state) => {
 			if (state === 'interrupted') {
 				console.log('Download is interrupted but can be resumed');
@@ -131,14 +130,15 @@ const createMainWindow = () => {
 				if (item.isPaused()) {
 					console.log('Download is paused');
 				} else {
-					mainWindow.webContents.send('downloading', item.getReceivedBytes());
+					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), savePath: item.getSavePath() });
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
 		});
 		item.once('done', (event, state) => {
 			if (state === 'completed') {
-				mainWindow.webContents.send('download-complete');
+				mainWindow.webContents.send(`download-complete-${ itemId }`); // Send to specific DownloadItem
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);

From 53c9e900b5e59bb419b1bc9bf42d9d4acc974094 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 2 Jul 2020 22:08:12 +0500
Subject: [PATCH 17/66] Remove downloads autoclearing

---
 src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 002adb91a9..7205b54ff6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ const createMainWindow = () => {
 
 	// Logs and Helpers
 	// console.log(store.get('downloads', {}));
-	store.clear();
+	// store.clear();
 
 	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {

From daa694f42d9d2c6c89261141deeaf3e124731bea Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 2 Jul 2020 22:11:24 +0500
Subject: [PATCH 18/66] currentServeUrl reset to normal

---
 src/sagas/servers.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/sagas/servers.js b/src/sagas/servers.js
index 2d961c86d2..d1b98e76ec 100644
--- a/src/sagas/servers.js
+++ b/src/sagas/servers.js
@@ -129,8 +129,8 @@ function *loadCurrentServerUrl(servers) {
 		currentServerUrl = null;
 	}
 	// // During testing
-	return 'Downloads';
-	// return currentServerUrl;
+	// return 'Downloads';
+	return currentServerUrl;
 }
 
 export function *serversSaga() {

From 637b2d4f0e9fef13bf63b4f43d3a407a25b66076 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Mon, 13 Jul 2020 18:44:04 +0500
Subject: [PATCH 19/66] pause, resume, cancel

---
 .../DownloadsComponents/DownloadGrid.js       | 45 +++++++++++++++++++
 .../DownloadsComponents/DownloadItem.js       | 33 +++++++++++---
 src/main.js                                   | 26 +++++++++--
 3 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 src/components/DownloadsComponents/DownloadGrid.js

diff --git a/src/components/DownloadsComponents/DownloadGrid.js b/src/components/DownloadsComponents/DownloadGrid.js
new file mode 100644
index 0000000000..d9413146df
--- /dev/null
+++ b/src/components/DownloadsComponents/DownloadGrid.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Tabs, Margins } from '@rocket.chat/fuselage';
+
+import image from '../../download.png';
+
+export default function DownloadGrid(props) {
+	return <Margins all='x32'>
+		<Grid sm={ true }>
+			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
+				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
+					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
+
+				</Box>
+			</Grid.Item>
+			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
+				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
+					<Box fonScale='s2' >Pokemon.mp3 <Icon name='kebab'></Icon></Box>
+				</Box>
+			</Grid.Item>
+			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
+				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
+					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
+
+				</Box>
+			</Grid.Item>
+			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
+				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
+
+					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
+				</Box>
+			</Grid.Item>
+			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
+				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
+
+					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
+				</Box>
+			</Grid.Item>
+		</Grid>
+	</Margins>;
+}
\ No newline at end of file
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 0e9d7ba30b..686d5c3ddf 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -39,6 +39,7 @@ export default function DownloadItem(props) {
 	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
 	const [percentage, setPercentage] = useState(props.percentage);
 	const [path, setPath] = useState(props.path);
+	const [status, setStatus] = useState('Complete');
 
 	let serverTitle;
 
@@ -54,12 +55,12 @@ export default function DownloadItem(props) {
 	useEffect(() => {
 		const downloadComplete = () => {
 			console.log('Download Complete');
-			ipcRenderer.send('download-complete', { url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path });
+			ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
 		return () => {
-			ipcRenderer.removeListener('download-complete', downloadComplete);
+			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
 		};
 	});
 
@@ -72,6 +73,7 @@ export default function DownloadItem(props) {
 			const percentage = (props.bytes / totalBytes) * 100;
 			setPercentage(Math.floor(percentage));
 			setPath(props.savePath);
+			setStatus('Progressing');
 			// console.log(props);
 		};
 		// Listen on unique event only
@@ -81,28 +83,45 @@ export default function DownloadItem(props) {
 		};
 	}, [itemId, totalBytes]);
 
+
+	const handleCancel = () => {
+		setStatus('Cancelled');
+		ipcRenderer.send(`cancel-${ itemId }`);
+		ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage, serverTitle, itemId, date, path });
+	};
+	const handlePause = () => {
+		setStatus('Paused');
+		ipcRenderer.send(`pause-${ itemId }`);
+	};
+
 	return <Margins all='x32'>
 
 		{/* <Grid md={true}> */ }
 		<Tile elevation='2' style={ { width: '95%' } }>
 			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
-				<Grid.Item xl={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
+				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
 					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 						<Icon size='7rem' name='clip' />
 						<Box fonScale='s2' color='primary-500' display='block'>.mp3</Box>
 					</Box>
 				</Grid.Item>
-				<Grid.Item xl={ 9 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
+				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
 					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
-					<Box display='flex' flexDirection='row' justifyContent='space-between' width='50%'>
+					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
 						<Box fontSize='s2' color='info'>{ serverTitle || '@Server' }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
+						<Box fontSize='s2' color='info'>{ '87KB/s' }</Box>
+						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
 					<Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box>
 					{/* // TODO: Implement Show in Folder */ }
-					<Box is={Button} ghost onClick={() => props.handleFileOpen(path)} style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
+					<Box display='flex' flexDirection='row' justifyContent='space-between'>
+						<Box is={ Button } ghost onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
+						<Box is={ Button } display={ false ? 'none' : 'inline' } ghost onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Pause</Box>
+						<Box is={ Button } ghost onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
+					</Box>
 				</Grid.Item>
-				<Grid.Item xl={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
+				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
 					<Icon name='cross' size='x32' />
 				</Grid.Item>
 			</Box>
diff --git a/src/main.js b/src/main.js
index 7205b54ff6..50865f8c6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -99,8 +99,8 @@ const createMainWindow = () => {
 
 
 	// Logs and Helpers
-	// console.log(store.get('downloads', {}));
-	// store.clear();
+	console.log(store.get('downloads', {}));
+	store.clear();
 
 	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {
@@ -114,14 +114,31 @@ const createMainWindow = () => {
 	ipcMain.on('download-complete', async (event, downloadItem) => {
 		const downloads = await store.get('downloads', {});
 		downloads[downloadItem.itemId] = downloadItem;
-		console.log(downloads);
+		// console.log(downloads);
 		store.set('downloads', downloads);
 	});
 	// Downloads handler. Handles all downloads from links.
 	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
+
 		// console.log({ event, item, webContents });
+		const mime = item.getMimeType();
+		let paused = false;
 		const itemId = Date.now();
-		mainWindow.webContents.send('create-download-item', { itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id }); // Request download item creation in UI and send unqiue ID.
+		mainWindow.webContents.send('create-download-item', { itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+
+		// Cancelled Download
+		ipcMain.on(`cancel-${ itemId }`, () => item.cancel());
+
+		// Paused Download
+		ipcMain.on(`pause-${ itemId }`, () => {
+			console.log(item.getReceivedBytes());
+			if (paused) {
+				item.resume();
+			} else {
+				item.pause();
+			}
+			paused = !paused;
+		});
 
 		item.on('updated', (event, state) => {
 			if (state === 'interrupted') {
@@ -142,6 +159,7 @@ const createMainWindow = () => {
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);
+				mainWindow.webContents.send
 			}
 		});
 	});

From 2f0eb090cafd7140bc929198a2ba3d7954efada2 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Tue, 14 Jul 2020 23:19:38 +0500
Subject: [PATCH 20/66] search by filename filter

---
 package.json                                  |  1 +
 .../DownloadsComponents/DownloadItem.js       |  6 ++--
 src/components/DownloadsManagerView/index.js  | 31 +++++++++++++------
 src/main.js                                   |  3 +-
 yarn.lock                                     | 15 ++++++++-
 5 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 9f7ac5771a..4a625294d1 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "react-dom": "^16.12.0",
     "react-i18next": "^11.3.1",
     "react-redux": "^7.1.3",
+    "react-search-input": "^0.11.3",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
     "rimraf": "^3.0.1"
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 686d5c3ddf..2f91eea211 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -35,6 +35,7 @@ export default function DownloadItem(props) {
 	const { totalBytes } = props;
 	const { itemId } = props;
 	const { serverId } = props;
+	const { mime } = props;
 	const date = props.date || new Date(itemId).toDateString();
 	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
 	const [percentage, setPercentage] = useState(props.percentage);
@@ -55,7 +56,8 @@ export default function DownloadItem(props) {
 	useEffect(() => {
 		const downloadComplete = () => {
 			console.log('Download Complete');
-			ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path });
+			setStatus('Complete');
+			ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path, mime });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
@@ -87,7 +89,7 @@ export default function DownloadItem(props) {
 	const handleCancel = () => {
 		setStatus('Cancelled');
 		ipcRenderer.send(`cancel-${ itemId }`);
-		ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage, serverTitle, itemId, date, path });
+		ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	};
 	const handlePause = () => {
 		setStatus('Paused');
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 8b24e74eea..69296632c7 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -3,6 +3,7 @@ import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } fro
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
+import { createFilter } from 'react-search-input';
 
 import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
@@ -11,6 +12,8 @@ import DownloadItem from '../DownloadsComponents/DownloadItem';
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
+	// const [filterValue, setFilterValue] = useState('');
+	const FILTER_KEY = 'fileName';
 
 	// const servers = useSelector(({ servers }) => servers);
 	// console.log({ servers });
@@ -20,20 +23,30 @@ export function DownloadsManagerView() {
 		shell.openExternal(e.target.href);
 	};
 
-	const handleFileOpen = (e, path) => {
-		console.log(e);
+	const handleFileOpen = (path) => {
+		console.log(path);
 		shell.showItemInFolder(path);
 	};
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
+	const [filteredDownloads, setFilterDownloads] = useState([]);
 
+	const handleSearch = (event) => {
+		console.log(Boolean(event.target.value));
+		console.log(downloads);
+		// setFilterValue(event.target.value);
+
+		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, FILTER_KEY)) : downloads;
+		console.log(filteredDownloads);
+		setFilterDownloads(filteredDownloads);
+	};
 
 	useEffect(() => {
 		const createDownload = (event, props) => {
 			console.log('Creating New Download');
 			const updatedDownloads = [...downloads];
-			updatedDownloads.push([props.itemId, props]);
+			updatedDownloads.push(props);
 			setDownloads(updatedDownloads);
 			console.log(props.itemId);
 		};
@@ -45,9 +58,9 @@ export function DownloadsManagerView() {
 
 	useEffect(() => {
 		const intializeDownloads = (event, downloads) => {
-			const updatedDownloads = Object.entries(downloads).map(([key, value]) => [key, value]);
-			setDownloads(updatedDownloads);
-			console.log(downloads);
+			setDownloads(Object.values(downloads));
+			setFilterDownloads(Object.values(downloads));
+			console.log(Object.values(downloads));
 		};
 		ipcRenderer.on('initialize-downloads', intializeDownloads);
 		return () => {
@@ -74,7 +87,7 @@ export function DownloadsManagerView() {
 				<Grid xl={ true }>
 
 					<Grid.Item xl={ 6 } >
-						<SearchInput placeholder='Search Downloads' width='500px' addon={ <Icon name='send' size='x20' /> } />
+						<SearchInput onChange={ handleSearch } placeholder='Search Downloads' width='500px' addon={ <Icon name='send' size='x20' /> } />
 					</Grid.Item>
 
 					<Grid.Item xl={ 4 } >
@@ -109,8 +122,8 @@ export function DownloadsManagerView() {
 					</Grid.Item>
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{/* Download Item List */}
-						{ downloads.map(([itemId, downloadItem]) => <DownloadItem itemId={itemId} {...downloadItem} updateDownloads = {updateDownloads} key={itemId} handleFileOpen={handleFileOpen} handleLinks={handleLinks} />)}
+						{/* Download Item List */ }
+						{ filteredDownloads.map((downloadItem) => <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } />) }
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/main.js b/src/main.js
index 50865f8c6c..e7f2749fbc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -100,7 +100,7 @@ const createMainWindow = () => {
 
 	// Logs and Helpers
 	console.log(store.get('downloads', {}));
-	store.clear();
+	// store.clear();
 
 	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {
@@ -159,7 +159,6 @@ const createMainWindow = () => {
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);
-				mainWindow.webContents.send
 			}
 		});
 	});
diff --git a/yarn.lock b/yarn.lock
index 3997353a7f..e273d493ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4177,6 +4177,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^3.0.0:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
+  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
+
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -7418,7 +7423,7 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7568,6 +7573,14 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-search-input@^0.11.3:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/react-search-input/-/react-search-input-0.11.3.tgz#3dd1f9fc584b6bc40a6ee133ae042b6fbb7ae8dd"
+  integrity sha512-Yo05lNR5YLeIY+mTEk0lMkYHX0qkTlElJmxMTw5JlZPu92EP8YWwIY3QSbEFULvX4wiTfyDdUovTUpp2VockpA==
+  dependencies:
+    fuse.js "^3.0.0"
+    prop-types "^15.5.8"
+
 react-sweet-progress@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/react-sweet-progress/-/react-sweet-progress-1.1.2.tgz#b27c6baa7c08a12cf0896565431ba477af249892"

From c5d357cb8f1a77eb40eeacd57a54bb649980eaee Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 15 Jul 2020 22:27:45 +0500
Subject: [PATCH 21/66] server and filetype filters testing

---
 .../DownloadsComponents/DownloadItem.js       | 13 +++----
 src/components/DownloadsManagerView/index.js  | 36 ++++++++++++++++---
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 2f91eea211..ffdd7f187c 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -29,7 +29,7 @@ export default function DownloadItem(props) {
 	// console.log(props);
 	const servers = useSelector(({ servers }) => servers);
 	// console.log(servers);
-
+	let paused = false;
 	const { url } = props;
 	const { fileName } = props;
 	const { totalBytes } = props;
@@ -94,6 +94,7 @@ export default function DownloadItem(props) {
 	const handlePause = () => {
 		setStatus('Paused');
 		ipcRenderer.send(`pause-${ itemId }`);
+		paused = !paused;
 	};
 
 	return <Margins all='x32'>
@@ -104,13 +105,13 @@ export default function DownloadItem(props) {
 				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
 					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 						<Icon size='7rem' name='clip' />
-						<Box fonScale='s2' color='primary-500' display='block'>.mp3</Box>
+						<Box fonScale='s2' color='primary-500' display='block'>{mime}</Box>
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
 					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
-						<Box fontSize='s2' color='info'>{ serverTitle || '@Server' }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
+						<Box fontSize='s2' color='info'>{ serverTitle }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
 						<Box fontSize='s2' color='info'>{ '87KB/s' }</Box>
 						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
 					</Box>
@@ -118,9 +119,9 @@ export default function DownloadItem(props) {
 					<Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box>
 					{/* // TODO: Implement Show in Folder */ }
 					<Box display='flex' flexDirection='row' justifyContent='space-between'>
-						<Box is={ Button } ghost onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
-						<Box is={ Button } display={ false ? 'none' : 'inline' } ghost onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Pause</Box>
-						<Box is={ Button } ghost onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
+						<Box is={ Button } ghost display={ status === 'Complete' ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
+						<Box is={ Button } ghost display={ status === 'Complete' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{paused ? 'Resume' : 'Pause'}</Box>
+						<Box is={ Button } ghost display={ status === 'Complete' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 69296632c7..be8efdaccb 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -13,7 +13,9 @@ export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
 	// const [filterValue, setFilterValue] = useState('');
-	const FILTER_KEY = 'fileName';
+	const FILENAME_FILTER = 'fileName';
+	const SERVER_FILTER = 'serverTitle';
+	const MIME_FILTER = 'mime';
 
 	// const servers = useSelector(({ servers }) => servers);
 	// console.log({ servers });
@@ -37,7 +39,27 @@ export function DownloadsManagerView() {
 		console.log(downloads);
 		// setFilterValue(event.target.value);
 
-		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, FILTER_KEY)) : downloads;
+		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, FILENAME_FILTER)) : downloads;
+		console.log(filteredDownloads);
+		setFilterDownloads(filteredDownloads);
+	};
+
+	const handleServerFilter = (event) => {
+		console.log(Boolean(event.target.value));
+		console.log(downloads);
+		// setFilterValue(event.target.value);
+
+		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, SERVER_FILTER)) : downloads;
+		console.log(filteredDownloads);
+		setFilterDownloads(filteredDownloads);
+	};
+
+	const handleMimeFilter = (event) => {
+		console.log(Boolean(event.target.value));
+		console.log(downloads);
+		// setFilterValue(event.target.value);
+
+		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, MIME_FILTER)) : downloads;
 		console.log(filteredDownloads);
 		setFilterDownloads(filteredDownloads);
 	};
@@ -86,12 +108,16 @@ export function DownloadsManagerView() {
 
 				<Grid xl={ true }>
 
-					<Grid.Item xl={ 6 } >
+					<Grid.Item xl={ 4 } >
 						<SearchInput onChange={ handleSearch } placeholder='Search Downloads' width='500px' addon={ <Icon name='send' size='x20' /> } />
 					</Grid.Item>
 
-					<Grid.Item xl={ 4 } >
-						<Select width='300px' placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
+					<Grid.Item xl={ 3 } >
+						<Select width='300px' onChange={ handleServerFilter } placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
+					</Grid.Item>
+
+					<Grid.Item xl={ 2 } >
+						<Select width='300px' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ [[1, 'audio'], [2, 'text'], [3, 'image'], [4, 'video'], [5, 'file']] } />
 					</Grid.Item>
 
 					<Grid.Item xl={ 1 } >

From 13fc3aae54b4a39c3468fcc0492bda9c442eddc5 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 18 Jul 2020 19:09:57 +0500
Subject: [PATCH 22/66] all tabs working

---
 .../DownloadsComponents/DownloadItem.js       |  39 ++++--
 src/components/DownloadsManagerView/index.js  | 127 +++++++++++-------
 src/main.js                                   |   9 +-
 3 files changed, 111 insertions(+), 64 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index ffdd7f187c..7d59cc6f29 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -36,11 +36,13 @@ export default function DownloadItem(props) {
 	const { itemId } = props;
 	const { serverId } = props;
 	const { mime } = props;
+	// const { percentage } = props;
+	const { updateDownloads } = props;
 	const date = props.date || new Date(itemId).toDateString();
 	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
 	const [percentage, setPercentage] = useState(props.percentage);
 	const [path, setPath] = useState(props.path);
-	const [status, setStatus] = useState('Complete');
+	const [status, setStatus] = useState('All Downloads');
 
 	let serverTitle;
 
@@ -56,8 +58,9 @@ export default function DownloadItem(props) {
 	useEffect(() => {
 		const downloadComplete = () => {
 			console.log('Download Complete');
-			setStatus('Complete');
-			ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path, mime });
+			setStatus('All Downloads');
+			props.updateDownloads({ status: 'All Downloads', serverTitle, itemId });
+			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path, mime });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
@@ -69,13 +72,14 @@ export default function DownloadItem(props) {
 
 	// TODO: Convert to only recieve dynamic progressed bytes data.
 	useEffect(() => {
-		const handleProgress = (event, props) => {
+		const handleProgress = (event, data) => {
 			console.log('Progress');
 			// console.log(` Current Bytes: ${ bytes }`);
-			const percentage = (props.bytes / totalBytes) * 100;
+			const percentage = Math.floor((data.bytes / totalBytes) * 100);
+			updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId });
 			setPercentage(Math.floor(percentage));
-			setPath(props.savePath);
-			setStatus('Progressing');
+			setPath(data.savePath);
+			// setStatus('Downloads');
 			// console.log(props);
 		};
 		// Listen on unique event only
@@ -83,20 +87,27 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
 		};
-	}, [itemId, totalBytes]);
+	});
 
 
-	const handleCancel = () => {
-		setStatus('Cancelled');
+	const handleCancel = async () => {
+		await setStatus('Cancelled');
 		ipcRenderer.send(`cancel-${ itemId }`);
-		ipcRenderer.send('download-complete', { status, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+		props.updateDownloads({ status: 'Cancelled', percentage, itemId });
+		ipcRenderer.send('download-complete', { status: 'Cancelled', url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	};
-	const handlePause = () => {
-		setStatus('Paused');
+	const handlePause = async () => {
+		console.log(percentage);
+		await setStatus('Paused');
 		ipcRenderer.send(`pause-${ itemId }`);
+		props.updateDownloads({ status: 'Paused', percentage, itemId });
 		paused = !paused;
 	};
 
+	const printProgress = () => {
+		console.log(percentage);
+	};
+
 	return <Margins all='x32'>
 
 		{/* <Grid md={true}> */ }
@@ -125,7 +136,7 @@ export default function DownloadItem(props) {
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
-					<Icon name='cross' size='x32' />
+					<Button ghost onClick={ printProgress} ><Icon name='cross' size='x32' /></Button>
 				</Grid.Item>
 			</Box>
 		</Tile>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index be8efdaccb..7f5b18987b 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -17,8 +17,10 @@ export function DownloadsManagerView() {
 	const SERVER_FILTER = 'serverTitle';
 	const MIME_FILTER = 'mime';
 
-	// const servers = useSelector(({ servers }) => servers);
-	// console.log({ servers });
+	// Downloads Array
+	const [downloads, setDownloads] = useState([]);
+	const [filteredDownloads, setFilterDownloads] = useState([]);
+	const [tab, setTab] = useState('All Downloads');
 
 	const handleLinks = (e) => {
 		e.preventDefault();
@@ -30,9 +32,13 @@ export function DownloadsManagerView() {
 		shell.showItemInFolder(path);
 	};
 
-	// Downloads Array
-	const [downloads, setDownloads] = useState([]);
-	const [filteredDownloads, setFilterDownloads] = useState([]);
+	const handleTabChange = (event) => {
+		// console.log(event.target.innerText);
+		if (tab !== event.target.innerText) {
+			setTab(event.target.innerText);
+		}
+	};
+
 
 	const handleSearch = (event) => {
 		console.log(Boolean(event.target.value));
@@ -64,24 +70,36 @@ export function DownloadsManagerView() {
 		setFilterDownloads(filteredDownloads);
 	};
 
+	const reset = () => {
+		ipcRenderer.send('reset');
+	};
+
+	const updateDownloads = (data) => {
+		console.log(data);
+		const updatedDownloads = downloads.map((downloadItem) => {
+			if (downloadItem.itemId === data.itemId) {
+				for (const key of Object.keys(data)) {
+					console.log(key);
+					downloadItem[key] = data[key];
+				}
+				console.log(downloadItem);
+			}
+			return downloadItem;
+		});
+		setDownloads(updatedDownloads);
+	};
+
+	// 			USE EFFECTS
+
+
 	useEffect(() => {
-		const createDownload = (event, props) => {
-			console.log('Creating New Download');
-			const updatedDownloads = [...downloads];
-			updatedDownloads.push(props);
-			setDownloads(updatedDownloads);
-			console.log(props.itemId);
-		};
-		ipcRenderer.on('create-download-item', createDownload);
-		return () => {
-			ipcRenderer.removeListener('create-download-item', createDownload);
-		};
-	}, [downloads]);
+		console.log('Loading Downloads');
+		ipcRenderer.send('load-downloads');
+	}, []);
 
 	useEffect(() => {
 		const intializeDownloads = (event, downloads) => {
 			setDownloads(Object.values(downloads));
-			setFilterDownloads(Object.values(downloads));
 			console.log(Object.values(downloads));
 		};
 		ipcRenderer.on('initialize-downloads', intializeDownloads);
@@ -90,48 +108,59 @@ export function DownloadsManagerView() {
 		};
 	}, []);
 
-	const updateDownloads = (itemId, downloadItem) => {
-		const updatedDownloads = [...downloads];
-		updatedDownloads.push([itemId, downloadItem]);
-		setDownloads(updatedDownloads);
-	};
+	useEffect(() => {
+		const createDownload = (event, props) => {
+			console.log('Creating New Download');
+			const updatedDownloads = [...downloads];
+			updatedDownloads.push(props);
+			setDownloads(updatedDownloads);
+			console.log(props.itemId);
+		};
+		ipcRenderer.on('create-download-item', createDownload);
+		return () => {
+			ipcRenderer.removeListener('create-download-item', createDownload);
+		};
+	}, [downloads]);
 
 
 	useEffect(() => {
-		console.log('Loading Downloads');
-		ipcRenderer.send('load-downloads');
-	}, []);
+		console.log(downloads);
+		const filteredDownloads = tab === 'All Downloads' ? downloads : downloads.filter((download) => download.status === tab);
+		setFilterDownloads(filteredDownloads);
+	}, [downloads, tab]);
+
 
 	return <Wrapper isVisible={ isVisible }>
 		<Content>
 			<Box width='85%'>
 
-				<Grid xl={ true }>
+				<Grid xl={ true } >
 
-					<Grid.Item xl={ 4 } >
-						<SearchInput onChange={ handleSearch } placeholder='Search Downloads' width='500px' addon={ <Icon name='send' size='x20' /> } />
-					</Grid.Item>
+					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
+						<Grid.Item xl={ 3 } sm={ 2 } >
+							<SearchInput width='100%' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
+						</Grid.Item>
 
-					<Grid.Item xl={ 3 } >
-						<Select width='300px' onChange={ handleServerFilter } placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
-					</Grid.Item>
+						<Grid.Item xl={ 3 } sm={ 2 } >
+							<Select width='100%' placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
+						</Grid.Item>
 
-					<Grid.Item xl={ 2 } >
-						<Select width='300px' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ [[1, 'audio'], [2, 'text'], [3, 'image'], [4, 'video'], [5, 'file']] } />
-					</Grid.Item>
+						<Grid.Item xl={ 2 } sm={ 2 } >
+							<Select width='100%' placeholder='Filter by File type' options={ [[1, 'audio'], [2, 'text'], [3, 'image'], [4, 'video'], [5, 'file']] } />
+						</Grid.Item>
 
-					<Grid.Item xl={ 1 } >
-						<Button ghost>
-							<Icon name='medium-view' size='x32' />
-						</Button>
-					</Grid.Item>
+						<Grid.Item xl={ 1 } sm={ 1 } >
+							<Button ghost>
+								<Icon name='medium-view' size='x32' />
+							</Button>
+						</Grid.Item>
 
-					<Grid.Item xl={ 1 } >
-						<Button ghost>
-							<Icon name='kebab' size='x32' />
-						</Button>
+						<Grid.Item xl={ 1 } sm={ 1 } >
+							<Button ghost onClick={reset}>
+								<Icon name='kebab' size='x32' />
+							</Button>
+						</Grid.Item>
 					</Grid.Item>
-
 					<Grid.Item xl={ 10 }>
 						<Box>
 							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
@@ -141,9 +170,9 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 12 }>
 						<Tabs>
-							<Tabs.Item selected>Downloads</Tabs.Item>
-							<Tabs.Item>Paused</Tabs.Item>
-							<Tabs.Item>Cancelled</Tabs.Item>
+							<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+							<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
+							<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
 						</Tabs>
 					</Grid.Item>
 
diff --git a/src/main.js b/src/main.js
index e7f2749fbc..a4c7a297b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -109,6 +109,13 @@ const createMainWindow = () => {
 		mainWindow.webContents.send('initialize-downloads', downloads);
 	});
 
+	ipcMain.on('reset', async () => {
+		console.log('Reset');
+		await store.clear();
+		const downloads = await store.get('downloads', {});
+		mainWindow.webContents.send('initialize-downloads', downloads);
+	});
+
 
 	// Listen and save a single download being completed.
 	ipcMain.on('download-complete', async (event, downloadItem) => {
@@ -124,7 +131,7 @@ const createMainWindow = () => {
 		const mime = item.getMimeType();
 		let paused = false;
 		const itemId = Date.now();
-		mainWindow.webContents.send('create-download-item', { itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
 
 		// Cancelled Download
 		ipcMain.on(`cancel-${ itemId }`, () => item.cancel());

From 95255542fc4fb7ad8364a09ff5b8f1608cb356d9 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 29 Jul 2020 03:15:01 +0500
Subject: [PATCH 23/66] retry downloads

---
 .../DownloadsComponents/DownloadItem.js       | 85 +++++++++++--------
 src/components/DownloadsManagerView/index.js  | 82 ++++++++++--------
 src/main.js                                   | 18 ++--
 3 files changed, 106 insertions(+), 79 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 7d59cc6f29..18ceb171b9 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,7 +1,7 @@
 import { Box, Margins, Tile, Grid, Icon, Button } from '@rocket.chat/fuselage';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote, clipboard } from 'electron';
 import { Progress } from 'react-sweet-progress';
 import 'react-sweet-progress/lib/style.css';
 
@@ -40,10 +40,12 @@ export default function DownloadItem(props) {
 	const { updateDownloads } = props;
 	const date = props.date || new Date(itemId).toDateString();
 	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
-	const [percentage, setPercentage] = useState(props.percentage);
-	const [path, setPath] = useState(props.path);
-	const [status, setStatus] = useState('All Downloads');
+	// const [percentage, setPercentage] = useState(props.percentage || 0);
+	const [percentage, setPercentage] = useState(props.percentage || 0);
+	const [path, setPath] = useState(props.path || '');
+	const [status, setStatus] = useState(props.status || 'All Downloads');
 
+	const completed = useMemo(() => percentage === 100, [percentage]);
 	let serverTitle;
 
 	if (serverId) {
@@ -54,32 +56,17 @@ export default function DownloadItem(props) {
 	}
 
 
-	// Download Completed, Send data back
-	useEffect(() => {
-		const downloadComplete = () => {
-			console.log('Download Complete');
-			setStatus('All Downloads');
-			props.updateDownloads({ status: 'All Downloads', serverTitle, itemId });
-			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path, mime });
-		};
-
-		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
-		return () => {
-			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
-		};
-	});
-
-
-	// TODO: Convert to only recieve dynamic progressed bytes data.
+	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
 		const handleProgress = (event, data) => {
 			console.log('Progress');
 			// console.log(` Current Bytes: ${ bytes }`);
 			const percentage = Math.floor((data.bytes / totalBytes) * 100);
+			// setPercentage(percentage);
 			updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId });
-			setPercentage(Math.floor(percentage));
+			setPercentage(percentage);
 			setPath(data.savePath);
-			// setStatus('Downloads');
+			// console.log({ percentage, totalBytes });
 			// console.log(props);
 		};
 		// Listen on unique event only
@@ -87,25 +74,45 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
 		};
+	}, [itemId, path, percentage, serverTitle, totalBytes, updateDownloads]);
+
+
+	// Download Completed, Send data back
+	useEffect(() => {
+		const downloadComplete = () => {
+			console.log('Download Complete');
+			setStatus('All Downloads');
+			props.updateDownloads({ status: 'All Downloads', serverTitle: `${ serverTitle }2`, itemId });
+			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle: `${ serverTitle }2`, itemId, date, path, mime });
+		};
+
+		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
+		return () => {
+			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
+		};
 	});
 
 
-	const handleCancel = async () => {
-		await setStatus('Cancelled');
+	const handleCancel = () => {
+		setStatus('Cancelled');
 		ipcRenderer.send(`cancel-${ itemId }`);
 		props.updateDownloads({ status: 'Cancelled', percentage, itemId });
 		ipcRenderer.send('download-complete', { status: 'Cancelled', url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	};
-	const handlePause = async () => {
+	const handlePause = () => {
 		console.log(percentage);
-		await setStatus('Paused');
+		setStatus('Paused');
 		ipcRenderer.send(`pause-${ itemId }`);
 		props.updateDownloads({ status: 'Paused', percentage, itemId });
 		paused = !paused;
 	};
+	const handleRetry = () => {
+		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
+		props.clear(itemId);
+	};
 
-	const printProgress = () => {
-		console.log(percentage);
+	const printProps = () => {
+		console.log({ path, totalBytes, percentage, completed, status });
 	};
 
 	return <Margins all='x32'>
@@ -116,7 +123,7 @@ export default function DownloadItem(props) {
 				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
 					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 						<Icon size='7rem' name='clip' />
-						<Box fonScale='s2' color='primary-500' display='block'>{mime}</Box>
+						<Box fonScale='s2' color='primary-500' display='block'>{mime.split('/')[1]}</Box>
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
@@ -127,16 +134,22 @@ export default function DownloadItem(props) {
 						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-					<Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box>
+					{/* <Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box> */}
 					{/* // TODO: Implement Show in Folder */ }
 					<Box display='flex' flexDirection='row' justifyContent='space-between'>
-						<Box is={ Button } ghost display={ status === 'Complete' ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
-						<Box is={ Button } ghost display={ status === 'Complete' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{paused ? 'Resume' : 'Pause'}</Box>
-						<Box is={ Button } ghost display={ status === 'Complete' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
+						{/* Completed */}
+						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
+						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => clipboard.write({ text: url }) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Copy Link</Box>
+						{/* Progressing and Paused */}
+						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{paused ? 'Resume' : 'Pause'}</Box>
+						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
+						{/* Cancelled */}
+						<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }>Retry</Box>
+
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
-					<Button ghost onClick={ printProgress} ><Icon name='cross' size='x32' /></Button>
+					<Button ghost onClick={ printProps } ><Icon name='cross' size='x32' /></Button>
 				</Grid.Item>
 			</Box>
 		</Tile>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 7f5b18987b..06bf700994 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,6 +1,6 @@
 import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
 import { createFilter } from 'react-search-input';
@@ -11,16 +11,13 @@ import DownloadItem from '../DownloadsComponents/DownloadItem';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	const servers = useSelector(({ servers }) => servers);
-	// const [filterValue, setFilterValue] = useState('');
-	const FILENAME_FILTER = 'fileName';
-	const SERVER_FILTER = 'serverTitle';
-	const MIME_FILTER = 'mime';
-
+	const options = [[1, 'All'], [2, 'Rocket.Chat'], [3, 'Rocket.Chat2']];
+	// const mimeTypes = []
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
-	const [filteredDownloads, setFilterDownloads] = useState([]);
 	const [tab, setTab] = useState('All Downloads');
+	const [searchVal, setSearchVal] = useState('');
+	const [serverVal, setServerVal] = useState('');
 
 	const handleLinks = (e) => {
 		e.preventDefault();
@@ -39,25 +36,26 @@ export function DownloadsManagerView() {
 		}
 	};
 
+	const clear = (itemId) => {
+		const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+		setDownloads(newDownloads);
+	};
+	const clearAll = () => {
+		ipcRenderer.send('reset');
+	};
 
 	const handleSearch = (event) => {
-		console.log(Boolean(event.target.value));
-		console.log(downloads);
-		// setFilterValue(event.target.value);
-
-		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, FILENAME_FILTER)) : downloads;
-		console.log(filteredDownloads);
-		setFilterDownloads(filteredDownloads);
+		// console.log(Boolean(event.target.value));
+		if (event.target.value !== searchVal) {
+			setSearchVal(event.target.value);
+		}
 	};
 
-	const handleServerFilter = (event) => {
-		console.log(Boolean(event.target.value));
-		console.log(downloads);
-		// setFilterValue(event.target.value);
-
-		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, SERVER_FILTER)) : downloads;
-		console.log(filteredDownloads);
-		setFilterDownloads(filteredDownloads);
+	const handleServerFilter = (index) => {
+		console.log(index);
+		if (options[index - 1][1] !== serverVal) {
+			setServerVal(options[index - 1][1]);
+		}
 	};
 
 	const handleMimeFilter = (event) => {
@@ -70,19 +68,16 @@ export function DownloadsManagerView() {
 		setFilterDownloads(filteredDownloads);
 	};
 
-	const reset = () => {
-		ipcRenderer.send('reset');
-	};
 
 	const updateDownloads = (data) => {
 		console.log(data);
 		const updatedDownloads = downloads.map((downloadItem) => {
 			if (downloadItem.itemId === data.itemId) {
 				for (const key of Object.keys(data)) {
-					console.log(key);
+					// console.log(key);
 					downloadItem[key] = data[key];
 				}
-				console.log(downloadItem);
+				// console.log(downloadItem);
 			}
 			return downloadItem;
 		});
@@ -123,11 +118,22 @@ export function DownloadsManagerView() {
 	}, [downloads]);
 
 
-	useEffect(() => {
-		console.log(downloads);
-		const filteredDownloads = tab === 'All Downloads' ? downloads : downloads.filter((download) => download.status === tab);
-		setFilterDownloads(filteredDownloads);
-	}, [downloads, tab]);
+	// useEffect(() => {
+	// 	console.log(downloads);
+	// 	let filteredDownloads;
+	// 	if (prevValues.prevTab !== tab) {
+	// 		filteredDownloads = tab === 'All Downloads' ? downloads : downloads.filter((download) => download.status === tab);
+	// 	}
+	// 	if (prevValues.prevSearchVal !== searchVal) {
+	// 		filteredDownloads = searchVal ? filteredDownloads.filter(createFilter(searchVal, FILENAME_FILTER)) : filteredDownloads;
+	// 	}
+	// 	setFilterDownloads(filteredDownloads);
+	// }, [downloads, tab, searchVal, prevValues.prevTab, prevValues.prevSearchVal]);
+
+	const filteredDownloads = useMemo(() => {
+		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || download.status === tab) && (!serverVal || serverVal === download.serverTitle)).sort((a, b) => b.itemId - a.itemId);
+	}, [downloads, searchVal, tab, serverVal]);
 
 
 	return <Wrapper isVisible={ isVisible }>
@@ -142,11 +148,13 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 3 } sm={ 2 } >
-							<Select width='100%' placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } />
+							{/* <Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } /> */}
+							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+
 						</Grid.Item>
 
 						<Grid.Item xl={ 2 } sm={ 2 } >
-							<Select width='100%' placeholder='Filter by File type' options={ [[1, 'audio'], [2, 'text'], [3, 'image'], [4, 'video'], [5, 'file']] } />
+							<Select width='100%' placeholder='Filter by File type' options={ [[1, 'Images'], [2, 'Videos'], [3, 'Audios'], [4, 'Texts'], [5, 'Files']] } />
 						</Grid.Item>
 
 						<Grid.Item xl={ 1 } sm={ 1 } >
@@ -156,7 +164,7 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Button ghost onClick={reset}>
+							<Button ghost onClick={ clearAll }>
 								<Icon name='kebab' size='x32' />
 							</Button>
 						</Grid.Item>
@@ -178,7 +186,7 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
 						{/* Download Item List */ }
-						{ filteredDownloads.map((downloadItem) => <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } />) }
+						{ filteredDownloads.map((downloadItem) => <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />) }
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/main.js b/src/main.js
index a4c7a297b3..1bbcaaee76 100644
--- a/src/main.js
+++ b/src/main.js
@@ -125,20 +125,25 @@ const createMainWindow = () => {
 		store.set('downloads', downloads);
 	});
 	// Downloads handler. Handles all downloads from links.
-	mainWindow.webContents.session.on('will-download', (event, item, webContents) => {
-
+	mainWindow.webContents.session.on('will-download', async (event, item, webContents) => {
+		// item.pause();
 		// console.log({ event, item, webContents });
 		const mime = item.getMimeType();
 		let paused = false;
 		const itemId = Date.now();
-		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURL(), serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
-
+		const url = item.getURL()[0];
+		const serverTitle = url.split('#')[1];
+		// const savePath = await item.getSavePath();
+		// console.log(savePath);
+		console.log(serverTitle);
+		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURLChain()[0], serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+		let bytesRecieved;
 		// Cancelled Download
+		console.log(item.getURLChain());
 		ipcMain.on(`cancel-${ itemId }`, () => item.cancel());
 
 		// Paused Download
 		ipcMain.on(`pause-${ itemId }`, () => {
-			console.log(item.getReceivedBytes());
 			if (paused) {
 				item.resume();
 			} else {
@@ -151,9 +156,10 @@ const createMainWindow = () => {
 			if (state === 'interrupted') {
 				console.log('Download is interrupted but can be resumed');
 			} else if (state === 'progressing') {
-				if (item.isPaused()) {
+				if (item.isPaused() ) {
 					console.log('Download is paused');
 				} else {
+					// bytesRecieved = item.getReceivedBytes();
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
 					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), savePath: item.getSavePath() });
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);

From 8fdf3c67256d1745f99b4935c851969fbeb9b115 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 29 Jul 2020 19:57:58 +0500
Subject: [PATCH 24/66] date headings and filter by filetype

---
 .../DownloadsComponents/DownloadItem.js       | 38 +++++++--------
 src/components/DownloadsManagerView/index.js  | 46 +++++++++++++------
 src/downloadUtils.js                          | 24 ++++++++++
 src/main.js                                   | 23 ++++++----
 4 files changed, 91 insertions(+), 40 deletions(-)
 create mode 100644 src/downloadUtils.js

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 18ceb171b9..5980dc631f 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -34,7 +34,7 @@ export default function DownloadItem(props) {
 	const { fileName } = props;
 	const { totalBytes } = props;
 	const { itemId } = props;
-	const { serverId } = props;
+	// const { serverId } = props;
 	const { mime } = props;
 	// const { percentage } = props;
 	const { updateDownloads } = props;
@@ -47,34 +47,36 @@ export default function DownloadItem(props) {
 
 	const completed = useMemo(() => percentage === 100, [percentage]);
 	let serverTitle;
+	let Mbps = props.Mbps || 0;
 
-	if (serverId) {
+	if (props.serverTitle) {
+		serverTitle = props.serverTitle;
+	} else {
 		const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
 		serverTitle = servers[index].title;
-	} else {
-		serverTitle = props.serverTitle;
 	}
 
 
+	const handleProgress = (event, data) => {
+		console.log('Progress');
+		// console.log(` Current Bytes: ${ bytes }`);
+		const percentage = Math.floor((data.bytes / totalBytes) * 100);
+		// setPercentage(percentage);
+		updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId, Mbps: data.Mbps });
+		setPercentage(percentage);
+		setPath(data.savePath);
+		// console.log({ percentage, totalBytes });
+		console.log(data.Mbps);
+		// Mbps = data.Mbps;
+	};
 	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
-		const handleProgress = (event, data) => {
-			console.log('Progress');
-			// console.log(` Current Bytes: ${ bytes }`);
-			const percentage = Math.floor((data.bytes / totalBytes) * 100);
-			// setPercentage(percentage);
-			updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId });
-			setPercentage(percentage);
-			setPath(data.savePath);
-			// console.log({ percentage, totalBytes });
-			// console.log(props);
-		};
 		// Listen on unique event only
 		ipcRenderer.on(`downloading-${ itemId }`, handleProgress);
 		return () => {
 			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
 		};
-	}, [itemId, path, percentage, serverTitle, totalBytes, updateDownloads]);
+	});
 
 
 	// Download Completed, Send data back
@@ -112,7 +114,7 @@ export default function DownloadItem(props) {
 	};
 
 	const printProps = () => {
-		console.log({ path, totalBytes, percentage, completed, status });
+		console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
 	};
 
 	return <Margins all='x32'>
@@ -130,7 +132,7 @@ export default function DownloadItem(props) {
 					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
 						<Box fontSize='s2' color='info'>{ serverTitle }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
-						<Box fontSize='s2' color='info'>{ '87KB/s' }</Box>
+						<Box fontSize='s2' color='info'>{ Mbps }</Box>
 						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 06bf700994..146d49a9a6 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -9,15 +9,25 @@ import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
 
 
+const mapping = {
+	application: 'Files',
+	image: 'Images',
+	video: 'Videos',
+	audio: 'Audios',
+};
+
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const options = [[1, 'All'], [2, 'Rocket.Chat'], [3, 'Rocket.Chat2']];
+	const fileTypes = [[1, 'All'], [2, 'Images'], [3, 'Videos'], [4, 'Audios'], [5, 'Texts'], [6, 'Files']];
 	// const mimeTypes = []
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
 	const [tab, setTab] = useState('All Downloads');
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useState('');
+	const [typeVal, setTypeVal] = useState('');
+	let timeHeading;
 
 	const handleLinks = (e) => {
 		e.preventDefault();
@@ -58,14 +68,11 @@ export function DownloadsManagerView() {
 		}
 	};
 
-	const handleMimeFilter = (event) => {
-		console.log(Boolean(event.target.value));
-		console.log(downloads);
-		// setFilterValue(event.target.value);
-
-		const filteredDownloads = event.target.value ? downloads.filter(createFilter(event.target.value, MIME_FILTER)) : downloads;
-		console.log(filteredDownloads);
-		setFilterDownloads(filteredDownloads);
+	const handleMimeFilter = (index) => {
+		console.log(index);
+		if (fileTypes[index - 1][1] !== typeVal) {
+			setTypeVal(fileTypes[index - 1][1]);
+		}
 	};
 
 
@@ -106,10 +113,10 @@ export function DownloadsManagerView() {
 	useEffect(() => {
 		const createDownload = (event, props) => {
 			console.log('Creating New Download');
+			console.log(props);
 			const updatedDownloads = [...downloads];
 			updatedDownloads.push(props);
 			setDownloads(updatedDownloads);
-			console.log(props.itemId);
 		};
 		ipcRenderer.on('create-download-item', createDownload);
 		return () => {
@@ -132,8 +139,8 @@ export function DownloadsManagerView() {
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || download.status === tab) && (!serverVal || serverVal === download.serverTitle)).sort((a, b) => b.itemId - a.itemId);
-	}, [downloads, searchVal, tab, serverVal]);
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || download.status === tab) && (!serverVal || serverVal === download.serverTitle) && (!typeVal || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
+	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
 
 	return <Wrapper isVisible={ isVisible }>
@@ -154,7 +161,7 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 2 } sm={ 2 } >
-							<Select width='100%' placeholder='Filter by File type' options={ [[1, 'Images'], [2, 'Videos'], [3, 'Audios'], [4, 'Texts'], [5, 'Files']] } />
+							<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
 						</Grid.Item>
 
 						<Grid.Item xl={ 1 } sm={ 1 } >
@@ -186,7 +193,20 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
 						{/* Download Item List */ }
-						{ filteredDownloads.map((downloadItem) => <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />) }
+						{filteredDownloads.map((downloadItem) => {
+							if (!timeHeading) {
+								timeHeading = new Date(downloadItem.itemId).toDateString();
+							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
+								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />;
+							}
+							timeHeading = new Date(downloadItem.itemId).toDateString();
+							return (
+								<>
+									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{timeHeading}</Box>
+									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />
+								</>
+							);
+						}) }
 					</Grid.Item>
 
 				</Grid>
diff --git a/src/downloadUtils.js b/src/downloadUtils.js
new file mode 100644
index 0000000000..d6f258db81
--- /dev/null
+++ b/src/downloadUtils.js
@@ -0,0 +1,24 @@
+export function formatBytes(bytes, decimals = 2, size = false) {
+	if (bytes === 0) {
+		return '0 Bytes';
+	}
+
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	if (size) {
+		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
+	}
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+}
+
+
+export const mapping = {
+	application: 'Files',
+	image: 'Images',
+	video: 'Videos',
+	audio: 'Audios',
+};
diff --git a/src/main.js b/src/main.js
index 1bbcaaee76..10d54994c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -131,12 +131,12 @@ const createMainWindow = () => {
 		const mime = item.getMimeType();
 		let paused = false;
 		const itemId = Date.now();
-		const url = item.getURL()[0];
+		const url = item.getURLChain()[0];
 		const serverTitle = url.split('#')[1];
-		// const savePath = await item.getSavePath();
-		// console.log(savePath);
-		console.log(serverTitle);
-		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url: item.getURLChain()[0], serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+		console.log(url);
+		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+		let startTime = new Date().getTime();
+		let endTime;
 		let bytesRecieved;
 		// Cancelled Download
 		console.log(item.getURLChain());
@@ -151,17 +151,22 @@ const createMainWindow = () => {
 			}
 			paused = !paused;
 		});
-
 		item.on('updated', (event, state) => {
 			if (state === 'interrupted') {
 				console.log('Download is interrupted but can be resumed');
 			} else if (state === 'progressing') {
-				if (item.isPaused() ) {
+				if (item.isPaused()) {
 					console.log('Download is paused');
 				} else {
-					// bytesRecieved = item.getReceivedBytes();
+					endTime = new Date().getTime();
+					const duration = (endTime - startTime) / 1000;
+					const bps = (item.getReceivedBytes() - bytesRecieved) / duration;
+					const Mbps = (bps / 1048576).toFixed(2);
+					startTime = endTime;
+					bytesRecieved = item.getReceivedBytes();
+
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), savePath: item.getSavePath() });
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: bytesRecieved, savePath: item.getSavePath(), Mbps });
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}

From f8903712b301acaff13fe1ccb348d64f946e1627 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 30 Jul 2020 03:14:08 +0500
Subject: [PATCH 25/66] fixing small eslint codechecks

---
 package.json                                  |  1 -
 .../DownloadsComponents/DownloadGrid.js       | 45 ---------------
 .../DownloadsComponents/DownloadItem.js       | 56 ++++++++++++++++---
 src/components/DownloadsManagerView/index.js  | 19 +++++--
 yarn.lock                                     | 15 +----
 5 files changed, 61 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/DownloadsComponents/DownloadGrid.js

diff --git a/package.json b/package.json
index 4a625294d1..9f7ac5771a 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "react-dom": "^16.12.0",
     "react-i18next": "^11.3.1",
     "react-redux": "^7.1.3",
-    "react-search-input": "^0.11.3",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
     "rimraf": "^3.0.1"
diff --git a/src/components/DownloadsComponents/DownloadGrid.js b/src/components/DownloadsComponents/DownloadGrid.js
deleted file mode 100644
index d9413146df..0000000000
--- a/src/components/DownloadsComponents/DownloadGrid.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Tabs, Margins } from '@rocket.chat/fuselage';
-
-import image from '../../download.png';
-
-export default function DownloadGrid(props) {
-	return <Margins all='x32'>
-		<Grid sm={ true }>
-			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
-				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
-					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
-
-				</Box>
-			</Grid.Item>
-			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
-				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
-					<Box fonScale='s2' >Pokemon.mp3 <Icon name='kebab'></Icon></Box>
-				</Box>
-			</Grid.Item>
-			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
-				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
-					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
-
-				</Box>
-			</Grid.Item>
-			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
-				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
-
-					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
-				</Box>
-			</Grid.Item>
-			<Grid.Item sm={ 2 } style={ { display: 'flex', justifyContent: 'center', padding: '15px' } }>
-				<Box height='200px' width='200px' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-					<img src={ image } width='175px' height='175px' alt="" style={ { borderRadius: '10px' } } />
-
-					<Box fonScale='s2' display='block'>Pokemon.mp3</Box>
-				</Box>
-			</Grid.Item>
-		</Grid>
-	</Margins>;
-}
\ No newline at end of file
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 5980dc631f..c49954ec59 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -47,7 +47,7 @@ export default function DownloadItem(props) {
 
 	const completed = useMemo(() => percentage === 100, [percentage]);
 	let serverTitle;
-	let Mbps = props.Mbps || 0;
+	const Mbps = props.Mbps || 0;
 
 	if (props.serverTitle) {
 		serverTitle = props.serverTitle;
@@ -117,15 +117,54 @@ export default function DownloadItem(props) {
 		console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
 	};
 
-	return <Margins all='x32'>
+	return props.layout === 'compact' ? (<Box width='100%' display='flex' justifyContent='center'>
+		<Grid.Item sm={ 2 }>
+			<Box display='flex' justifyContent='space-between' alignItems='center' height='50px'>
+				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */}
+				<Box fontScale='p2'>1594.png</Box>
+				<Icon name='play'></Icon>
+				<Icon name='cross'></Icon>
+			</Box>
+		</Grid.Item>
 
+		<Grid.Item sm={ 1 }>
+			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
+				<p>Rocket.Chat</p>
+			</Box>
+		</Grid.Item>
+		<Grid.Item sm={ 1 }>
+			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
+				<p>3.24MB</p>
+			</Box>
+		</Grid.Item>
+		<Grid.Item sm={ 1 }>
+			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
+				<p>0.3Mbps/s</p>
+			</Box>
+		</Grid.Item>
+		<Grid.Item sm={ 1 }>
+			<Box display='flex' alignItems='center' height='50px' >
+				<Progress theme={ { default: { color: '#2F80ED' } } } percent={ 80 } status='default' />
+			</Box>
+		</Grid.Item>
+		<Grid.Item sm={ 1 }>
+			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
+				<p>Thu 2018</p>
+			</Box>
+		</Grid.Item>
+		<Grid.Item sm={ 1 }>
+			<Box display='flex' alignItems='center' height='50px'>
+				<Icon name='kebab'></Icon>
+			</Box>
+		</Grid.Item>
+	</Box>) : (<Margins all='x32'>
 		{/* <Grid md={true}> */ }
 		<Tile elevation='2' style={ { width: '95%' } }>
 			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
 				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
 					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 						<Icon size='7rem' name='clip' />
-						<Box fonScale='s2' color='primary-500' display='block'>{mime.split('/')[1]}</Box>
+						<Box fonScale='s2' color='primary-500' display='block'>{ mime.split('/')[1] }</Box>
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
@@ -136,16 +175,15 @@ export default function DownloadItem(props) {
 						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-					{/* <Box fontSize='s2' >{ (url && url.substring(0, 45)) }</Box> */}
 					{/* // TODO: Implement Show in Folder */ }
 					<Box display='flex' flexDirection='row' justifyContent='space-between'>
-						{/* Completed */}
+						{/* Completed */ }
 						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
 						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => clipboard.write({ text: url }) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Copy Link</Box>
-						{/* Progressing and Paused */}
-						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{paused ? 'Resume' : 'Pause'}</Box>
+						{/* Progressing and Paused */ }
+						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? 'Resume' : 'Pause' }</Box>
 						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
-						{/* Cancelled */}
+						{/* Cancelled */ }
 						<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }>Retry</Box>
 
 					</Box>
@@ -156,5 +194,5 @@ export default function DownloadItem(props) {
 			</Box>
 		</Tile>
 		{/* </Grid> */ }
-	</Margins>;
+	</Margins>);
 }
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 146d49a9a6..b6cd18b607 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,9 +1,8 @@
-import { Box, Tile, Grid, Divider, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
+import { Box, Grid, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
-import { createFilter } from 'react-search-input';
 
 import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
@@ -27,6 +26,7 @@ export function DownloadsManagerView() {
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useState('');
 	const [typeVal, setTypeVal] = useState('');
+	const [layout, setLayout] = useState('expanded');
 	let timeHeading;
 
 	const handleLinks = (e) => {
@@ -45,6 +45,13 @@ export function DownloadsManagerView() {
 			setTab(event.target.innerText);
 		}
 	};
+	const handleLayout = () => {
+		if (layout === 'compact') {
+			setLayout('expanded');
+		} else {
+			setLayout('compact');
+		}
+	};
 
 	const clear = (itemId) => {
 		const newDownloads = downloads.filter((download) => download.itemId !== itemId);
@@ -165,7 +172,7 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Button ghost>
+							<Button ghost onClick={ handleLayout }>
 								<Icon name='medium-view' size='x32' />
 							</Button>
 						</Grid.Item>
@@ -197,13 +204,13 @@ export function DownloadsManagerView() {
 							if (!timeHeading) {
 								timeHeading = new Date(downloadItem.itemId).toDateString();
 							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />;
+								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={layout} handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />;
 							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
 							return (
 								<>
 									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{timeHeading}</Box>
-									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />
+									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={layout} handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />
 								</>
 							);
 						}) }
diff --git a/yarn.lock b/yarn.lock
index e273d493ca..3997353a7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4177,11 +4177,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-fuse.js@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
-  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -7423,7 +7418,7 @@ promise.series@^0.2.0:
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
   integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7573,14 +7568,6 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
-react-search-input@^0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/react-search-input/-/react-search-input-0.11.3.tgz#3dd1f9fc584b6bc40a6ee133ae042b6fbb7ae8dd"
-  integrity sha512-Yo05lNR5YLeIY+mTEk0lMkYHX0qkTlElJmxMTw5JlZPu92EP8YWwIY3QSbEFULvX4wiTfyDdUovTUpp2VockpA==
-  dependencies:
-    fuse.js "^3.0.0"
-    prop-types "^15.5.8"
-
 react-sweet-progress@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/react-sweet-progress/-/react-sweet-progress-1.1.2.tgz#b27c6baa7c08a12cf0896565431ba477af249892"

From ac0d82c0eff373962da7237849dbf4cf44f677b6 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Fri, 31 Jul 2020 00:15:33 +0500
Subject: [PATCH 26/66] basic compact view

---
 .../DownloadsComponents/DownloadItem.js       |  68 +++++-------
 src/components/DownloadsManagerView/index.js  | 100 ++++++++++--------
 src/downloadUtils.js                          |   3 +-
 src/main.js                                   |   7 +-
 4 files changed, 90 insertions(+), 88 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index c49954ec59..8157a4f15d 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -3,25 +3,9 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
 import { Progress } from 'react-sweet-progress';
-import 'react-sweet-progress/lib/style.css';
-
-// Utility function for bytes conversion. TODO: seperate into another file.
-function formatBytes(bytes, decimals = 2, size = false) {
-	if (bytes === 0) {
-		return '0 Bytes';
-	}
-
-	const k = 1024;
-	const dm = decimals < 0 ? 0 : decimals;
-	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-	if (size) {
-		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
-	}
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-}
+import 'react-sweet-progress/lib/style.css';
+import { formatBytes } from '../../downloadUtils';
 
 
 // Recieve props for individual download item
@@ -34,13 +18,10 @@ export default function DownloadItem(props) {
 	const { fileName } = props;
 	const { totalBytes } = props;
 	const { itemId } = props;
-	// const { serverId } = props;
 	const { mime } = props;
-	// const { percentage } = props;
 	const { updateDownloads } = props;
 	const date = props.date || new Date(itemId).toDateString();
 	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
-	// const [percentage, setPercentage] = useState(props.percentage || 0);
 	const [percentage, setPercentage] = useState(props.percentage || 0);
 	const [path, setPath] = useState(props.path || '');
 	const [status, setStatus] = useState(props.status || 'All Downloads');
@@ -61,13 +42,10 @@ export default function DownloadItem(props) {
 		console.log('Progress');
 		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		// setPercentage(percentage);
 		updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId, Mbps: data.Mbps });
 		setPercentage(percentage);
 		setPath(data.savePath);
-		// console.log({ percentage, totalBytes });
 		console.log(data.Mbps);
-		// Mbps = data.Mbps;
 	};
 	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
@@ -81,11 +59,11 @@ export default function DownloadItem(props) {
 
 	// Download Completed, Send data back
 	useEffect(() => {
-		const downloadComplete = () => {
+		const downloadComplete = (data) => {
 			console.log('Download Complete');
 			setStatus('All Downloads');
-			props.updateDownloads({ status: 'All Downloads', serverTitle: `${ serverTitle }2`, itemId });
-			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle: `${ serverTitle }2`, itemId, date, path, mime });
+			props.updateDownloads({ status: 'All Downloads', serverTitle, itemId, percentage: 100 });
+			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
@@ -113,43 +91,48 @@ export default function DownloadItem(props) {
 		props.clear(itemId);
 	};
 
-	const printProps = () => {
-		console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
-	};
+	// const printProps = () => {
+	// 	console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
+	// };
 
 	return props.layout === 'compact' ? (<Box width='100%' display='flex' justifyContent='center'>
 		<Grid.Item sm={ 2 }>
 			<Box display='flex' justifyContent='space-between' alignItems='center' height='50px'>
-				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */}
-				<Box fontScale='p2'>1594.png</Box>
-				<Icon name='play'></Icon>
-				<Icon name='cross'></Icon>
+				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
+				<Box fontScale='p2'>{ fileName }</Box>
+				{/* Completed */ }
+				<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='chevron-up'></Icon></Box>
+				{/* Progressing and Paused */ }
+				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? <Icon name='play'></Icon> : <Icon name='pause'></Icon> }</Box>
+				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='cross'></Icon></Box>
+				{/* Cancelled */ }
+				<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='refresh'></Icon></Box>
 			</Box>
 		</Grid.Item>
 
 		<Grid.Item sm={ 1 }>
 			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>Rocket.Chat</p>
+				<p>{ serverTitle }</p>
 			</Box>
 		</Grid.Item>
 		<Grid.Item sm={ 1 }>
 			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>3.24MB</p>
+				<p>{ fileSize }</p>
 			</Box>
 		</Grid.Item>
 		<Grid.Item sm={ 1 }>
 			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>0.3Mbps/s</p>
+				<p>{ Mbps ? `${ Mbps }Mbps/s` : null }</p>
 			</Box>
 		</Grid.Item>
 		<Grid.Item sm={ 1 }>
 			<Box display='flex' alignItems='center' height='50px' >
-				<Progress theme={ { default: { color: '#2F80ED' } } } percent={ 80 } status='default' />
+				<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
 			</Box>
 		</Grid.Item>
 		<Grid.Item sm={ 1 }>
 			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>Thu 2018</p>
+				<p>{ date }</p>
 			</Box>
 		</Grid.Item>
 		<Grid.Item sm={ 1 }>
@@ -171,8 +154,9 @@ export default function DownloadItem(props) {
 					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
 					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
 						<Box fontSize='s2' color='info'>{ serverTitle }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
-						<Box fontSize='s2' color='info'>{ Mbps }</Box>
-						<Box fontSize='s2' color='info'>{ '60s Left' }</Box>
+						<Box fontSize='s2' color='info'>{ Mbps ? `${ Mbps }Mbps/s` : null }</Box>
+						{/* ESTIMATED (TODO) */ }
+						{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
 					</Box>
 					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
 					{/* // TODO: Implement Show in Folder */ }
@@ -189,7 +173,7 @@ export default function DownloadItem(props) {
 					</Box>
 				</Grid.Item>
 				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
-					<Button ghost onClick={ printProps } ><Icon name='cross' size='x32' /></Button>
+					<Button ghost onClick={ () => props.clear(itemId) } ><Icon name='cross' size='x32' /></Button>
 				</Grid.Item>
 			</Box>
 		</Tile>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index b6cd18b607..52c6dbff54 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,4 +1,4 @@
-import { Box, Grid, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
+import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
@@ -6,20 +6,15 @@ import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper, Content } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
-
-
-const mapping = {
-	application: 'Files',
-	image: 'Images',
-	video: 'Videos',
-	audio: 'Audios',
-};
+import { mapping } from '../../downloadUtils';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	const options = [[1, 'All'], [2, 'Rocket.Chat'], [3, 'Rocket.Chat2']];
+	const servers = useSelector(({ servers }) => servers);
+	const options = [[1, 'All']];
+	servers.map((server, index) => options.push([index + 2, server.title]));
 	const fileTypes = [[1, 'All'], [2, 'Images'], [3, 'Videos'], [4, 'Audios'], [5, 'Texts'], [6, 'Files']];
-	// const mimeTypes = []
+
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
 	const [tab, setTab] = useState('All Downloads');
@@ -29,13 +24,8 @@ export function DownloadsManagerView() {
 	const [layout, setLayout] = useState('expanded');
 	let timeHeading;
 
-	const handleLinks = (e) => {
-		e.preventDefault();
-		shell.openExternal(e.target.href);
-	};
-
 	const handleFileOpen = (path) => {
-		console.log(path);
+		// console.log(path);
 		shell.showItemInFolder(path);
 	};
 
@@ -53,10 +43,13 @@ export function DownloadsManagerView() {
 		}
 	};
 
+	// Remove a single download from list
 	const clear = (itemId) => {
 		const newDownloads = downloads.filter((download) => download.itemId !== itemId);
 		setDownloads(newDownloads);
+		ipcRenderer.send('remove', itemId);
 	};
+	// Remove All downloads from list
 	const clearAll = () => {
 		ipcRenderer.send('reset');
 	};
@@ -88,10 +81,8 @@ export function DownloadsManagerView() {
 		const updatedDownloads = downloads.map((downloadItem) => {
 			if (downloadItem.itemId === data.itemId) {
 				for (const key of Object.keys(data)) {
-					// console.log(key);
 					downloadItem[key] = data[key];
 				}
-				// console.log(downloadItem);
 			}
 			return downloadItem;
 		});
@@ -100,7 +91,6 @@ export function DownloadsManagerView() {
 
 	// 			USE EFFECTS
 
-
 	useEffect(() => {
 		console.log('Loading Downloads');
 		ipcRenderer.send('load-downloads');
@@ -132,21 +122,9 @@ export function DownloadsManagerView() {
 	}, [downloads]);
 
 
-	// useEffect(() => {
-	// 	console.log(downloads);
-	// 	let filteredDownloads;
-	// 	if (prevValues.prevTab !== tab) {
-	// 		filteredDownloads = tab === 'All Downloads' ? downloads : downloads.filter((download) => download.status === tab);
-	// 	}
-	// 	if (prevValues.prevSearchVal !== searchVal) {
-	// 		filteredDownloads = searchVal ? filteredDownloads.filter(createFilter(searchVal, FILENAME_FILTER)) : filteredDownloads;
-	// 	}
-	// 	setFilterDownloads(filteredDownloads);
-	// }, [downloads, tab, searchVal, prevValues.prevTab, prevValues.prevSearchVal]);
-
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || download.status === tab) && (!serverVal || serverVal === download.serverTitle) && (!typeVal || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === 'All Downloads' || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
 	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
 
@@ -158,11 +136,10 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
 						<Grid.Item xl={ 3 } sm={ 2 } >
-							<SearchInput width='100%' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
+							<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
 						</Grid.Item>
 
 						<Grid.Item xl={ 3 } sm={ 2 } >
-							{/* <Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ servers.map((server, index) => [index + 1, server.title]) } /> */}
 							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
 
 						</Grid.Item>
@@ -172,14 +149,19 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Button ghost onClick={ handleLayout }>
-								<Icon name='medium-view' size='x32' />
-							</Button>
+							<Box width='100%' textAlign='end'>
+								<Button ghost onClick={ handleLayout }>
+									<Icon name='medium-view' size='x32' />
+									<Box>Change View</Box>
+								</Button>
+							</Box>
+
 						</Grid.Item>
 
-						<Grid.Item xl={ 1 } sm={ 1 } >
+						<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
 							<Button ghost onClick={ clearAll }>
-								<Icon name='kebab' size='x32' />
+								<Icon name='trash' size='x32' />
+								<Box>Delete All</Box>
 							</Button>
 						</Grid.Item>
 					</Grid.Item>
@@ -198,19 +180,49 @@ export function DownloadsManagerView() {
 						</Tabs>
 					</Grid.Item>
 
+					{/* <Grid.Item sm={ 8 } style={  }>
+						<Grid.Item sm={ 2 }>
+							<Box >File Name</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >Server Title</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >File Size</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >Speed</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >Progress</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >Date</Box>
+						</Grid.Item>
+						<Grid.Item sm={ 1 }>
+							<Box >Remove</Box>
+						</Grid.Item>
+
+					</Grid.Item>
+
+					<Grid.Item sm={ 8 }>
+							<Divider />
+					</Grid.Item> */}
+
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
 						{/* Download Item List */ }
-						{filteredDownloads.map((downloadItem) => {
+						{ filteredDownloads.map((downloadItem) => {
+							// Condition for Data Headings
 							if (!timeHeading) {
 								timeHeading = new Date(downloadItem.itemId).toDateString();
 							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={layout} handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />;
+								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
 							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
 							return (
 								<>
-									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{timeHeading}</Box>
-									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={layout} handleFileOpen={ handleFileOpen } handleLinks={ handleLinks } clear= { clear } />
+									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{ timeHeading }</Box>
+									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
 								</>
 							);
 						}) }
diff --git a/src/downloadUtils.js b/src/downloadUtils.js
index d6f258db81..23ef4bc8f0 100644
--- a/src/downloadUtils.js
+++ b/src/downloadUtils.js
@@ -1,3 +1,4 @@
+// Utility function for bytes conversion. TODO: seperate into another file.
 export function formatBytes(bytes, decimals = 2, size = false) {
 	if (bytes === 0) {
 		return '0 Bytes';
@@ -15,7 +16,7 @@ export function formatBytes(bytes, decimals = 2, size = false) {
 	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
 }
 
-
+//  Filetype to Mimetype mapping
 export const mapping = {
 	application: 'Files',
 	image: 'Images',
diff --git a/src/main.js b/src/main.js
index 10d54994c6..70a84a849d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -116,6 +116,11 @@ const createMainWindow = () => {
 		mainWindow.webContents.send('initialize-downloads', downloads);
 	});
 
+	ipcMain.on('remove', async (event, itemdId) => {
+		console.log(`Removing: ${ itemdId } `);
+		await store.delete(`downloads.${ itemdId }`);
+	});
+
 
 	// Listen and save a single download being completed.
 	ipcMain.on('download-complete', async (event, downloadItem) => {
@@ -173,7 +178,7 @@ const createMainWindow = () => {
 		});
 		item.once('done', (event, state) => {
 			if (state === 'completed') {
-				mainWindow.webContents.send(`download-complete-${ itemId }`); // Send to specific DownloadItem
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { path, percentage: 100 }); // Send to specific DownloadItem
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);

From 0cfb85903d161be9803fc5481913c20566c33a27 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 31 Jul 2020 12:51:03 -0300
Subject: [PATCH 27/66] Review

---
 package.json                                  |   6 +-
 .../DownloadsComponents/DownloadItem.js       | 329 +++++++++++-------
 src/components/DownloadsManagerView/index.js  | 187 +++++-----
 yarn.lock                                     |  46 ++-
 4 files changed, 323 insertions(+), 245 deletions(-)

diff --git a/package.json b/package.json
index 9f7ac5771a..7c40772f89 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,10 @@
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/fuselage": "0.6.3-dev.57",
-    "@rocket.chat/fuselage-hooks": "0.6.3-dev.57",
+    "@rocket.chat/css-in-js": "^0.13.1",
+		"@rocket.chat/fuselage": "^0.13.2",
+		"@rocket.chat/fuselage-hooks": "^0.13.2",
+		"@rocket.chat/icons": "^0.13.1",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",
     "chai": "^4.2.0",
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 8157a4f15d..7136dfef93 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,52 +1,59 @@
-import { Box, Margins, Tile, Grid, Icon, Button } from '@rocket.chat/fuselage';
-import React, { useEffect, useState, useMemo } from 'react';
+import { Box, Grid, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
+import React, { useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
-import { Progress } from 'react-sweet-progress';
+import { Progress as SweetProgress } from 'react-sweet-progress';
 
 import 'react-sweet-progress/lib/style.css';
 import { formatBytes } from '../../downloadUtils';
 
 
+const STATUS = {
+	CANCELLED: 'cancelled',
+	PAUSED: 'paused',
+};
+
 // Recieve props for individual download item
-export default function DownloadItem(props) {
+export default function DownloadItem({
+	url,
+	fileName,
+	totalBytes,
+	itemId,
+	mime,
+	updateDownloads,
+	date = new Date(itemId).toDateString(),
+	Mbps: mbps,
+	serverTitle,
+	fileSize = formatBytes(totalBytes, 2, true),
+	...props
+}) {
 	// console.log(props);
 	const servers = useSelector(({ servers }) => servers);
-	// console.log(servers);
-	let paused = false;
-	const { url } = props;
-	const { fileName } = props;
-	const { totalBytes } = props;
-	const { itemId } = props;
-	const { mime } = props;
-	const { updateDownloads } = props;
-	const date = props.date || new Date(itemId).toDateString();
-	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
-	const [percentage, setPercentage] = useState(props.percentage || 0);
-	const [path, setPath] = useState(props.path || '');
-	const [status, setStatus] = useState(props.status || 'All Downloads');
-
-	const completed = useMemo(() => percentage === 100, [percentage]);
-	let serverTitle;
-	const Mbps = props.Mbps || 0;
-
-	if (props.serverTitle) {
-		serverTitle = props.serverTitle;
-	} else {
+
+	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
+	const [path, setPath] = useDebouncedState(props.path || '', 100);
+	const [status, setStatus] = useDebouncedState(props.status || 'All Downloads', 100);
+
+	const completed = percentage === 100;
+	const paused = status === STATUS.PAUSED;
+
+
+	if (!serverTitle) {
 		const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
 		serverTitle = servers[index].title;
 	}
 
 
-	const handleProgress = (event, data) => {
+	const handleProgress = useMutableCallback((event, data) => {
 		console.log('Progress');
 		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
 		updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId, Mbps: data.Mbps });
 		setPercentage(percentage);
 		setPath(data.savePath);
-		console.log(data.Mbps);
-	};
+	});
+
 	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
 		// Listen on unique event only
@@ -54,7 +61,7 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
 		};
-	});
+	}, [handleProgress, itemId]);
 
 
 	// Download Completed, Send data back
@@ -70,113 +77,171 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
 		};
-	});
+	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setStatus, url]);
 
-
-	const handleCancel = () => {
-		setStatus('Cancelled');
+	const handleCancel = useMutableCallback(() => {
+		setStatus(STATUS.CANCELLED);
 		ipcRenderer.send(`cancel-${ itemId }`);
-		props.updateDownloads({ status: 'Cancelled', percentage, itemId });
-		ipcRenderer.send('download-complete', { status: 'Cancelled', url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
-	};
-	const handlePause = () => {
+		props.updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
+		ipcRenderer.send('download-complete', { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+	});
+
+	const handlePause = useMutableCallback(() => {
 		console.log(percentage);
-		setStatus('Paused');
+		setStatus(STATUS.PAUSED);
 		ipcRenderer.send(`pause-${ itemId }`);
-		props.updateDownloads({ status: 'Paused', percentage, itemId });
-		paused = !paused;
-	};
-	const handleRetry = () => {
+		props.updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
+	});
+
+	const handleRetry = useMutableCallback(() => {
 		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
 		props.clear(itemId);
-	};
-
-	// const printProps = () => {
-	// 	console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
-	// };
-
-	return props.layout === 'compact' ? (<Box width='100%' display='flex' justifyContent='center'>
-		<Grid.Item sm={ 2 }>
-			<Box display='flex' justifyContent='space-between' alignItems='center' height='50px'>
-				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
-				<Box fontScale='p2'>{ fileName }</Box>
-				{/* Completed */ }
-				<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='chevron-up'></Icon></Box>
-				{/* Progressing and Paused */ }
-				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? <Icon name='play'></Icon> : <Icon name='pause'></Icon> }</Box>
-				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='cross'></Icon></Box>
-				{/* Cancelled */ }
-				<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='refresh'></Icon></Box>
-			</Box>
-		</Grid.Item>
-
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ serverTitle }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ fileSize }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ Mbps ? `${ Mbps }Mbps/s` : null }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box display='flex' alignItems='center' height='50px' >
-				<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ date }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box display='flex' alignItems='center' height='50px'>
-				<Icon name='kebab'></Icon>
-			</Box>
-		</Grid.Item>
-	</Box>) : (<Margins all='x32'>
-		{/* <Grid md={true}> */ }
-		<Tile elevation='2' style={ { width: '95%' } }>
-			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
-				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
-					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-						<Icon size='7rem' name='clip' />
-						<Box fonScale='s2' color='primary-500' display='block'>{ mime.split('/')[1] }</Box>
-					</Box>
-				</Grid.Item>
-				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
-					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
-						<Box fontSize='s2' color='info'>{ serverTitle }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
-						<Box fontSize='s2' color='info'>{ Mbps ? `${ Mbps }Mbps/s` : null }</Box>
-						{/* ESTIMATED (TODO) */ }
-						{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
-					</Box>
-					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-					{/* // TODO: Implement Show in Folder */ }
-					<Box display='flex' flexDirection='row' justifyContent='space-between'>
-						{/* Completed */ }
-						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
-						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => clipboard.write({ text: url }) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Copy Link</Box>
-						{/* Progressing and Paused */ }
-						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? 'Resume' : 'Pause' }</Box>
-						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
-						{/* Cancelled */ }
-						<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }>Retry</Box>
-
-					</Box>
-				</Grid.Item>
-				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
-					<Button ghost onClick={ () => props.clear(itemId) } ><Icon name='cross' size='x32' /></Button>
-				</Grid.Item>
-			</Box>
-		</Tile>
-		{/* </Grid> */ }
-	</Margins>);
+	});
+
+	const handleDelete = useMutableCallback(() => props.clear(itemId));
+
+	const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
+
+	// TODO TOAST
+	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
+
+	return props.layout === 'compact' ? <Compact
+		serverTitle={serverTitle}
+		mime={ mime.split('/')[1] }
+		date={date}
+		fileName={fileName}
+		fileSize={fileSize}
+		mbps={mbps}
+		percentage={percentage}
+		isCompleted={completed}
+		isPaused={paused}
+		isCancelled={status !== STATUS.CANCELLED}
+		handleFileOpen={handleFileOpen}
+		handleCopyLink={handleCopyLink}
+		handlePause={handlePause}
+		handleCancel={handleCancel}
+		handleRetry={handleRetry}
+		handleDelete={handleDelete}
+		mb = {props.mb}/> : <Extended
+		serverTitle={serverTitle}
+		mime={ mime.split('/')[1] }
+		date={date}
+		fileName={fileName}
+		fileSize={fileSize}
+		mbps={mbps}
+		percentage={percentage}
+		isCompleted={completed}
+		isPaused={paused}
+		isCancelled={status !== STATUS.CANCELLED}
+		handleFileOpen={handleFileOpen}
+		handleCopyLink={handleCopyLink}
+		handlePause={handlePause}
+		handleCancel={handleCancel}
+		handleRetry={handleRetry}
+		handleDelete={handleDelete}
+		mb = {props.mb}
+	/>;
 }
+
+const Compact = React.memo(({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) => <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' {...props}>
+	<Box display='flex' flexGrow={1} width='100%'>
+		<Box fontScale='p1' withTruncatedText flexGrow={1}>{ fileName }</Box>
+		<Box display='flex' justifyContent='space-between' alignItems='center'>
+			{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
+			{/* TODO INSERT TITLES FOR EACH ACTION */}
+			{/* Completed */ }
+			{ isCompleted && <ActionButton onClick={ handleFileOpen }><Icon name='chevron-up'/></ActionButton>}
+			{/* Progressing and Paused */ }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? <Icon name='play'/> : <Icon name='pause'/> }</ActionButton> }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }><Icon name='cross'/></ActionButton> }
+			{/* Cancelled */ }
+			{ isCancelled && <ActionButton onClick={ handleRetry }><Icon name='refresh'/></ActionButton>}
+		</Box>
+	</Box>
+	<Box display='flex' flexGrow={1} width='100%'>
+		<Info withTruncatedText>{ serverTitle }</Info>
+		<Info withTruncatedText mi='x8'>{ fileSize }</Info>
+		{ mbps && <Info mi='x8'>{`${ mbps }Mbps/s`}</Info> }
+		<Progress percent={ percentage } mi='x8'/>
+		<Info withTruncatedText mi='x8'>{ date }</Info>
+		{/* <Box display='flex' alignItems='center'>
+			<Icon name='kebab'/> */}
+		{/* </Box> */}
+	</Box>
+</Box>);
+
+const Extended = React.memo(({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) => <Box width='100%' display='flex' alignItems='center' {...props}>
+	{/* USE AVATAR FUSELAGE (TODO) */ }
+	<Box size='x124' flexShrink={0} bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+		<Icon size='x60' name='clip' />
+		<Box fonScale='s2' color='primary-500' display='block'>{ mime }</Box>
+	</Box>
+	<Box display='flex' flexDirection='column' flexGrow={1} mi='x16'>
+		<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
+		<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
+			<Info>{ serverTitle }</Info>
+			<Info> { date }</Info>
+			<Info>{ fileSize || '25MB' }</Info>
+			{ mbps > 0 && <Info>{ `${ mbps }Mbps/s` }</Info>}
+			{/* ESTIMATED (TODO) */ }
+			{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
+		</Box>
+		<Box mb='x8'>
+			<Progress percent={ percentage } />
+		</Box>
+		{/* // TODO: Implement Show in Folder */ }
+		<ButtonGroup>
+			{/* Completed */ }
+			{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+			{ isCompleted && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+			{/* Progressing and Paused */ }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton>}
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton>}
+			{/* Cancelled */ }
+			{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton>}
+			<ActionButton onClick={ handleDelete }>Delete</ActionButton>
+		</ButtonGroup>
+	</Box>
+</Box>);
+
+const Info = (props) => <Box fontSize='s1' color='info' {...props}/>;
+
+const ActionButton = (props) => <Button color='primary-500' small ghost {...props}/>;
+
+const Progress = ({ percent, ...props }) => <Box flexGrow={1} {...props}><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 52c6dbff54..90225e6168 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,10 +1,11 @@
 import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
 
-import { Wrapper, Content } from './styles';
+import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
 import { mapping } from '../../downloadUtils';
 
@@ -17,11 +18,12 @@ export function DownloadsManagerView() {
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
-	const [tab, setTab] = useState('All Downloads');
+
+	const [tab, setTab] = useLocalStorage('download-tab', 'All Downloads');
 	const [searchVal, setSearchVal] = useState('');
-	const [serverVal, setServerVal] = useState('');
-	const [typeVal, setTypeVal] = useState('');
-	const [layout, setLayout] = useState('expanded');
+	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
+	const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
+	const [layout, setLayout] = useLocalStorage('download-layout', 'expanded');
 	let timeHeading;
 
 	const handleFileOpen = (path) => {
@@ -35,6 +37,7 @@ export function DownloadsManagerView() {
 			setTab(event.target.innerText);
 		}
 	};
+
 	const handleLayout = () => {
 		if (layout === 'compact') {
 			setLayout('expanded');
@@ -129,107 +132,105 @@ export function DownloadsManagerView() {
 
 
 	return <Wrapper isVisible={ isVisible }>
-		<Content>
-			<Box width='85%'>
-
-				<Grid xl={ true } >
+		<Box p='x24'>
+
+			<Grid xl={ true } >
+				<Grid.Item xl={ 10 }>
+					<Box>
+						<Box fontSize='x32' lineHeight='2'>Downloads</Box>
+						<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
+					</Box>
+				</Grid.Item>
+
+				<Grid.Item xl={ 12 }>
+					<Tabs>
+						<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+						<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
+						<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
+					</Tabs>
+				</Grid.Item>
+
+				<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
+					<Grid.Item xl={ 3 } sm={ 2 } >
+						<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
+					</Grid.Item>
 
-					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
-						</Grid.Item>
+					<Grid.Item xl={ 3 } sm={ 2 } >
+						<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
 
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+					</Grid.Item>
 
-						</Grid.Item>
+					<Grid.Item xl={ 2 } sm={ 2 } >
+						<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+					</Grid.Item>
 
-						<Grid.Item xl={ 2 } sm={ 2 } >
-							<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-						</Grid.Item>
+					<Grid.Item xl={ 1 } sm={ 1 } >
+						<Box width='100%' textAlign='end'>
+							<Button ghost onClick={ handleLayout }>
+								<Icon name='medium-view' size='x32' />
+								<Box>Change View</Box>
+							</Button>
+						</Box>
 
-						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Box width='100%' textAlign='end'>
-								<Button ghost onClick={ handleLayout }>
-									<Icon name='medium-view' size='x32' />
-									<Box>Change View</Box>
-								</Button>
-							</Box>
+					</Grid.Item>
 
-						</Grid.Item>
+					<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
+						<Button ghost onClick={ clearAll }>
+							<Icon name='trash' size='x32' />
+							<Box>Delete All</Box>
+						</Button>
+					</Grid.Item>
+				</Grid.Item>
 
-						<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
-							<Button ghost onClick={ clearAll }>
-								<Icon name='trash' size='x32' />
-								<Box>Delete All</Box>
-							</Button>
-						</Grid.Item>
+				{/* <Grid.Item sm={ 8 } style={  }>
+					<Grid.Item sm={ 2 }>
+						<Box >File Name</Box>
 					</Grid.Item>
-					<Grid.Item xl={ 10 }>
-						<Box>
-							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
-							<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
-						</Box>
+					<Grid.Item sm={ 1 }>
+						<Box >Server Title</Box>
 					</Grid.Item>
-
-					<Grid.Item xl={ 12 }>
-						<Tabs>
-							<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
-							<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
-							<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
-						</Tabs>
+					<Grid.Item sm={ 1 }>
+						<Box >File Size</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Speed</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Progress</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Date</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Remove</Box>
 					</Grid.Item>
 
-					{/* <Grid.Item sm={ 8 } style={  }>
-						<Grid.Item sm={ 2 }>
-							<Box >File Name</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Server Title</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >File Size</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Speed</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Progress</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Date</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Remove</Box>
-						</Grid.Item>
+				</Grid.Item>
 
-					</Grid.Item>
+				<Grid.Item sm={ 8 }>
+						<Divider />
+				</Grid.Item> */}
 
-					<Grid.Item sm={ 8 }>
-							<Divider />
-					</Grid.Item> */}
-
-					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{/* Download Item List */ }
-						{ filteredDownloads.map((downloadItem) => {
-							// Condition for Data Headings
-							if (!timeHeading) {
-								timeHeading = new Date(downloadItem.itemId).toDateString();
-							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
-							}
+				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+					{/* Download Item List */ }
+					{ filteredDownloads.map((downloadItem) => {
+						// Condition for Data Headings
+						if (!timeHeading) {
 							timeHeading = new Date(downloadItem.itemId).toDateString();
-							return (
-								<>
-									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{ timeHeading }</Box>
-									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
-								</>
-							);
-						}) }
-					</Grid.Item>
-
-				</Grid>
-			</Box>
-		</Content>
+						} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
+							return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
+						}
+						timeHeading = new Date(downloadItem.itemId).toDateString();
+						return (
+							<>
+								<Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>
+								<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
+							</>
+						);
+					}) }
+				</Grid.Item>
+
+			</Grid>
+		</Box>
 	</Wrapper>;
 }
diff --git a/yarn.lock b/yarn.lock
index 3997353a7f..c2c93f0ec5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1090,10 +1090,10 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
-"@rocket.chat/css-in-js@^0.6.3-dev.57+eddfb15":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.57.tgz#69ada2ecd1c1f5046a5152f5cc8b4eff2a643cfb"
-  integrity sha512-qC1cZI8YQX7hZmZWDRU9XGwIStpPe854GRgaaVxpyELynGbL8PHWhQ+gOB9ce33/Kk6d4HB/QpueIVxrD15c1g==
+"@rocket.chat/css-in-js@^0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.13.1.tgz#39c0cbf1cd8921d2046669f605033672c16a01d4"
+  integrity sha512-uNgsYE3ZV4Z+FGBsvnxDg763F5NdaUNnAxG58j3c304fY8j+camvly99WtR3onIqOGCi/ixhyYPbkFYF/3rvKw==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/stylis" "^0.8.5"
@@ -1105,23 +1105,26 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
-"@rocket.chat/fuselage-hooks@0.6.3-dev.57":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.57.tgz#28a0e7a607f139fce6b797cab7e72078cf883fac"
-  integrity sha512-C8lTIzKX68OF4n1oc9++rYJxIowo+eQ9O2Xaor1EoWh22XqN5f96YW1xs33lFntNy/8CZLY//usuEx6h1HaTSg==
+"@rocket.chat/fuselage-hooks@^0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.13.2.tgz#269cbc4608c18bfee277e1b9fe765c9e46d2c910"
+  integrity sha512-vjPgbFuJOmIao8VDuWstDiT+/Z+fmPcoDWYcwRUWeAlSyb47bojwbihYn9AJDFMRgo8Hq3yFz3OigvKeqq1oSA==
+  dependencies:
+    "@rocket.chat/fuselage-tokens" "^0.13.1"
+    use-subscription "^1.4.1"
 
-"@rocket.chat/fuselage-tokens@^0.6.3-dev.57+eddfb15":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.57.tgz#336723f12ac1c6da07ab58269931f2f2a415216d"
-  integrity sha512-+71s0lfmI8DQ5NqNLsCHGw0KqUB3EtqLyODAXJjUy7QqEBUbsN4xCpdYZWsKlB2XPcbwPMibJjOWP6Bo9Z+2hA==
+"@rocket.chat/fuselage-tokens@^0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.13.1.tgz#3d283d650d9330dd7187870f469f3a59b937865c"
+  integrity sha512-sPV3bWMNnJ44iZ1GJL/zVm/keCAEtUkSUqfrvgFS64OX9s9ChWPVDT9+u+VI1cbSMToThCC6ZrRSp9Ve+ATYhw==
 
-"@rocket.chat/fuselage@0.6.3-dev.57":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.57.tgz#8edb5028b9a967c79a8b3379ea322cc0d5a6d8dc"
-  integrity sha512-NoKgEE6wXxZsAoRxy0C0P770shLgldf9hIUQDJAn6Z+TKbl0qq+J7X/5WVjCzjtuKW9/9FZ2v6Wj6M6qlpDEYA==
+"@rocket.chat/fuselage@^0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.13.2.tgz#65b7ad4dcdad03258780b13f664c6653dded2622"
+  integrity sha512-BGXYBEsjYGWSx8qx+6Ecr/dZZXEOA8AKkshyEcjP16Sd8h9Ux2Hivm+MIxNHPZv6+6fuZToq5K2megraCFrHcA==
   dependencies:
-    "@rocket.chat/css-in-js" "^0.6.3-dev.57+eddfb15"
-    "@rocket.chat/fuselage-tokens" "^0.6.3-dev.57+eddfb15"
+    "@rocket.chat/css-in-js" "^0.13.1"
+    "@rocket.chat/fuselage-tokens" "^0.13.1"
     invariant "^2.2.4"
     react-keyed-flatten-children "^1.2.0"
 
@@ -9352,6 +9355,13 @@ url-regex@^3.0.0:
   dependencies:
     ip-regex "^1.0.1"
 
+use-subscription@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.1.tgz#edcbcc220f1adb2dd4fa0b2f61b6cc308e620069"
+  integrity sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==
+  dependencies:
+    object-assign "^4.1.1"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From 26d18109c7ea97873cb14bee42352c02ac445c75 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Fri, 31 Jul 2020 12:51:03 -0300
Subject: [PATCH 28/66] Review

---
 package.json                                  |   6 +-
 .../DownloadsComponents/DownloadItem.js       | 329 +++++++++++-------
 src/components/DownloadsManagerView/index.js  | 187 +++++-----
 yarn.lock                                     |  46 ++-
 4 files changed, 323 insertions(+), 245 deletions(-)

diff --git a/package.json b/package.json
index 9f7ac5771a..7c40772f89 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,10 @@
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/fuselage": "0.6.3-dev.57",
-    "@rocket.chat/fuselage-hooks": "0.6.3-dev.57",
+    "@rocket.chat/css-in-js": "^0.13.1",
+		"@rocket.chat/fuselage": "^0.13.2",
+		"@rocket.chat/fuselage-hooks": "^0.13.2",
+		"@rocket.chat/icons": "^0.13.1",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",
     "chai": "^4.2.0",
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 8157a4f15d..7136dfef93 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,52 +1,59 @@
-import { Box, Margins, Tile, Grid, Icon, Button } from '@rocket.chat/fuselage';
-import React, { useEffect, useState, useMemo } from 'react';
+import { Box, Grid, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
+import React, { useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
-import { Progress } from 'react-sweet-progress';
+import { Progress as SweetProgress } from 'react-sweet-progress';
 
 import 'react-sweet-progress/lib/style.css';
 import { formatBytes } from '../../downloadUtils';
 
 
+const STATUS = {
+	CANCELLED: 'cancelled',
+	PAUSED: 'paused',
+};
+
 // Recieve props for individual download item
-export default function DownloadItem(props) {
+export default function DownloadItem({
+	url,
+	fileName,
+	totalBytes,
+	itemId,
+	mime,
+	updateDownloads,
+	date = new Date(itemId).toDateString(),
+	Mbps: mbps,
+	serverTitle,
+	fileSize = formatBytes(totalBytes, 2, true),
+	...props
+}) {
 	// console.log(props);
 	const servers = useSelector(({ servers }) => servers);
-	// console.log(servers);
-	let paused = false;
-	const { url } = props;
-	const { fileName } = props;
-	const { totalBytes } = props;
-	const { itemId } = props;
-	const { mime } = props;
-	const { updateDownloads } = props;
-	const date = props.date || new Date(itemId).toDateString();
-	const fileSize = props.fileSize || formatBytes(props.totalBytes, 2, true);
-	const [percentage, setPercentage] = useState(props.percentage || 0);
-	const [path, setPath] = useState(props.path || '');
-	const [status, setStatus] = useState(props.status || 'All Downloads');
-
-	const completed = useMemo(() => percentage === 100, [percentage]);
-	let serverTitle;
-	const Mbps = props.Mbps || 0;
-
-	if (props.serverTitle) {
-		serverTitle = props.serverTitle;
-	} else {
+
+	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
+	const [path, setPath] = useDebouncedState(props.path || '', 100);
+	const [status, setStatus] = useDebouncedState(props.status || 'All Downloads', 100);
+
+	const completed = percentage === 100;
+	const paused = status === STATUS.PAUSED;
+
+
+	if (!serverTitle) {
 		const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
 		serverTitle = servers[index].title;
 	}
 
 
-	const handleProgress = (event, data) => {
+	const handleProgress = useMutableCallback((event, data) => {
 		console.log('Progress');
 		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
 		updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId, Mbps: data.Mbps });
 		setPercentage(percentage);
 		setPath(data.savePath);
-		console.log(data.Mbps);
-	};
+	});
+
 	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
 		// Listen on unique event only
@@ -54,7 +61,7 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
 		};
-	});
+	}, [handleProgress, itemId]);
 
 
 	// Download Completed, Send data back
@@ -70,113 +77,171 @@ export default function DownloadItem(props) {
 		return () => {
 			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
 		};
-	});
+	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setStatus, url]);
 
-
-	const handleCancel = () => {
-		setStatus('Cancelled');
+	const handleCancel = useMutableCallback(() => {
+		setStatus(STATUS.CANCELLED);
 		ipcRenderer.send(`cancel-${ itemId }`);
-		props.updateDownloads({ status: 'Cancelled', percentage, itemId });
-		ipcRenderer.send('download-complete', { status: 'Cancelled', url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
-	};
-	const handlePause = () => {
+		props.updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
+		ipcRenderer.send('download-complete', { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+	});
+
+	const handlePause = useMutableCallback(() => {
 		console.log(percentage);
-		setStatus('Paused');
+		setStatus(STATUS.PAUSED);
 		ipcRenderer.send(`pause-${ itemId }`);
-		props.updateDownloads({ status: 'Paused', percentage, itemId });
-		paused = !paused;
-	};
-	const handleRetry = () => {
+		props.updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
+	});
+
+	const handleRetry = useMutableCallback(() => {
 		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
 		props.clear(itemId);
-	};
-
-	// const printProps = () => {
-	// 	console.log({ path, totalBytes, percentage, completed, status, serverTitle, mime });
-	// };
-
-	return props.layout === 'compact' ? (<Box width='100%' display='flex' justifyContent='center'>
-		<Grid.Item sm={ 2 }>
-			<Box display='flex' justifyContent='space-between' alignItems='center' height='50px'>
-				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
-				<Box fontScale='p2'>{ fileName }</Box>
-				{/* Completed */ }
-				<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='chevron-up'></Icon></Box>
-				{/* Progressing and Paused */ }
-				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? <Icon name='play'></Icon> : <Icon name='pause'></Icon> }</Box>
-				<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='cross'></Icon></Box>
-				{/* Cancelled */ }
-				<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }><Icon name='refresh'></Icon></Box>
-			</Box>
-		</Grid.Item>
-
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ serverTitle }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ fileSize }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ Mbps ? `${ Mbps }Mbps/s` : null }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box display='flex' alignItems='center' height='50px' >
-				<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box fontWeight='p2' height='50px' verticalAlign='middle'>
-				<p>{ date }</p>
-			</Box>
-		</Grid.Item>
-		<Grid.Item sm={ 1 }>
-			<Box display='flex' alignItems='center' height='50px'>
-				<Icon name='kebab'></Icon>
-			</Box>
-		</Grid.Item>
-	</Box>) : (<Margins all='x32'>
-		{/* <Grid md={true}> */ }
-		<Tile elevation='2' style={ { width: '95%' } }>
-			<Box height='11.5rem' width='100%' display='flex' alignItems='center'>
-				<Grid.Item xl={ 2 } sm={ 2 } style={ { display: 'flex', alignItems: 'center', justifyContent: 'center' } }>
-					<Box height='150px' width='150px' backgroundColor='lightgrey' borderRadius='10px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-						<Icon size='7rem' name='clip' />
-						<Box fonScale='s2' color='primary-500' display='block'>{ mime.split('/')[1] }</Box>
-					</Box>
-				</Grid.Item>
-				<Grid.Item xl={ 9 } sm={ 5 } style={ { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-around', padding: '1.2rem 0' } }>
-					<Box fontSize='h1' lineHeight='h1'>{ fileName }</Box>
-					<Box display='flex' flexDirection='row' justifyContent='space-between' width='100%'>
-						<Box fontSize='s2' color='info'>{ serverTitle }</Box> <Box fontSize='s2' color='info'> { date }</Box> <Box fontSize='s2' color='info'>{ fileSize || '25MB' }</Box>
-						<Box fontSize='s2' color='info'>{ Mbps ? `${ Mbps }Mbps/s` : null }</Box>
-						{/* ESTIMATED (TODO) */ }
-						{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
-					</Box>
-					<Progress theme={ { default: { color: '#2F80ED' } } } percent={ percentage } status='default' />
-					{/* // TODO: Implement Show in Folder */ }
-					<Box display='flex' flexDirection='row' justifyContent='space-between'>
-						{/* Completed */ }
-						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => props.handleFileOpen(path) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Show in Folder</Box>
-						<Box is={ Button } ghost display={ completed ? 'inline' : 'none' } onClick={ () => clipboard.write({ text: url }) } style={ { textDecoration: 'none', color: '#2F80ED' } }>Copy Link</Box>
-						{/* Progressing and Paused */ }
-						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handlePause() } style={ { textDecoration: 'none', color: '#2F80ED' } }>{ paused ? 'Resume' : 'Pause' }</Box>
-						<Box is={ Button } ghost display={ completed || status === 'Cancelled' ? 'none' : 'inline' } onClick={ () => handleCancel() } style={ { textDecoration: 'none', color: '#2F80ED' } }>Cancel</Box>
-						{/* Cancelled */ }
-						<Box is={ Button } ghost display={ status === 'Cancelled' ? 'inline' : 'none' } onClick={ handleRetry } style={ { textDecoration: 'none', color: '#2F80ED' } }>Retry</Box>
-
-					</Box>
-				</Grid.Item>
-				<Grid.Item xl={ 1 } sm={ 1 } style={ { display: 'flex', justifyContent: 'center' } }>
-					<Button ghost onClick={ () => props.clear(itemId) } ><Icon name='cross' size='x32' /></Button>
-				</Grid.Item>
-			</Box>
-		</Tile>
-		{/* </Grid> */ }
-	</Margins>);
+	});
+
+	const handleDelete = useMutableCallback(() => props.clear(itemId));
+
+	const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
+
+	// TODO TOAST
+	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
+
+	return props.layout === 'compact' ? <Compact
+		serverTitle={serverTitle}
+		mime={ mime.split('/')[1] }
+		date={date}
+		fileName={fileName}
+		fileSize={fileSize}
+		mbps={mbps}
+		percentage={percentage}
+		isCompleted={completed}
+		isPaused={paused}
+		isCancelled={status !== STATUS.CANCELLED}
+		handleFileOpen={handleFileOpen}
+		handleCopyLink={handleCopyLink}
+		handlePause={handlePause}
+		handleCancel={handleCancel}
+		handleRetry={handleRetry}
+		handleDelete={handleDelete}
+		mb = {props.mb}/> : <Extended
+		serverTitle={serverTitle}
+		mime={ mime.split('/')[1] }
+		date={date}
+		fileName={fileName}
+		fileSize={fileSize}
+		mbps={mbps}
+		percentage={percentage}
+		isCompleted={completed}
+		isPaused={paused}
+		isCancelled={status !== STATUS.CANCELLED}
+		handleFileOpen={handleFileOpen}
+		handleCopyLink={handleCopyLink}
+		handlePause={handlePause}
+		handleCancel={handleCancel}
+		handleRetry={handleRetry}
+		handleDelete={handleDelete}
+		mb = {props.mb}
+	/>;
 }
+
+const Compact = React.memo(({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) => <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' {...props}>
+	<Box display='flex' flexGrow={1} width='100%'>
+		<Box fontScale='p1' withTruncatedText flexGrow={1}>{ fileName }</Box>
+		<Box display='flex' justifyContent='space-between' alignItems='center'>
+			{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
+			{/* TODO INSERT TITLES FOR EACH ACTION */}
+			{/* Completed */ }
+			{ isCompleted && <ActionButton onClick={ handleFileOpen }><Icon name='chevron-up'/></ActionButton>}
+			{/* Progressing and Paused */ }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? <Icon name='play'/> : <Icon name='pause'/> }</ActionButton> }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }><Icon name='cross'/></ActionButton> }
+			{/* Cancelled */ }
+			{ isCancelled && <ActionButton onClick={ handleRetry }><Icon name='refresh'/></ActionButton>}
+		</Box>
+	</Box>
+	<Box display='flex' flexGrow={1} width='100%'>
+		<Info withTruncatedText>{ serverTitle }</Info>
+		<Info withTruncatedText mi='x8'>{ fileSize }</Info>
+		{ mbps && <Info mi='x8'>{`${ mbps }Mbps/s`}</Info> }
+		<Progress percent={ percentage } mi='x8'/>
+		<Info withTruncatedText mi='x8'>{ date }</Info>
+		{/* <Box display='flex' alignItems='center'>
+			<Icon name='kebab'/> */}
+		{/* </Box> */}
+	</Box>
+</Box>);
+
+const Extended = React.memo(({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) => <Box width='100%' display='flex' alignItems='center' {...props}>
+	{/* USE AVATAR FUSELAGE (TODO) */ }
+	<Box size='x124' flexShrink={0} bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+		<Icon size='x60' name='clip' />
+		<Box fonScale='s2' color='primary-500' display='block'>{ mime }</Box>
+	</Box>
+	<Box display='flex' flexDirection='column' flexGrow={1} mi='x16'>
+		<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
+		<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
+			<Info>{ serverTitle }</Info>
+			<Info> { date }</Info>
+			<Info>{ fileSize || '25MB' }</Info>
+			{ mbps > 0 && <Info>{ `${ mbps }Mbps/s` }</Info>}
+			{/* ESTIMATED (TODO) */ }
+			{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
+		</Box>
+		<Box mb='x8'>
+			<Progress percent={ percentage } />
+		</Box>
+		{/* // TODO: Implement Show in Folder */ }
+		<ButtonGroup>
+			{/* Completed */ }
+			{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+			{ isCompleted && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+			{/* Progressing and Paused */ }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton>}
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton>}
+			{/* Cancelled */ }
+			{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton>}
+			<ActionButton onClick={ handleDelete }>Delete</ActionButton>
+		</ButtonGroup>
+	</Box>
+</Box>);
+
+const Info = (props) => <Box fontSize='s1' color='info' {...props}/>;
+
+const ActionButton = (props) => <Button color='primary-500' small ghost {...props}/>;
+
+const Progress = ({ percent, ...props }) => <Box flexGrow={1} {...props}><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 52c6dbff54..90225e6168 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,10 +1,11 @@
 import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
 
-import { Wrapper, Content } from './styles';
+import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
 import { mapping } from '../../downloadUtils';
 
@@ -17,11 +18,12 @@ export function DownloadsManagerView() {
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
-	const [tab, setTab] = useState('All Downloads');
+
+	const [tab, setTab] = useLocalStorage('download-tab', 'All Downloads');
 	const [searchVal, setSearchVal] = useState('');
-	const [serverVal, setServerVal] = useState('');
-	const [typeVal, setTypeVal] = useState('');
-	const [layout, setLayout] = useState('expanded');
+	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
+	const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
+	const [layout, setLayout] = useLocalStorage('download-layout', 'expanded');
 	let timeHeading;
 
 	const handleFileOpen = (path) => {
@@ -35,6 +37,7 @@ export function DownloadsManagerView() {
 			setTab(event.target.innerText);
 		}
 	};
+
 	const handleLayout = () => {
 		if (layout === 'compact') {
 			setLayout('expanded');
@@ -129,107 +132,105 @@ export function DownloadsManagerView() {
 
 
 	return <Wrapper isVisible={ isVisible }>
-		<Content>
-			<Box width='85%'>
-
-				<Grid xl={ true } >
+		<Box p='x24'>
+
+			<Grid xl={ true } >
+				<Grid.Item xl={ 10 }>
+					<Box>
+						<Box fontSize='x32' lineHeight='2'>Downloads</Box>
+						<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
+					</Box>
+				</Grid.Item>
+
+				<Grid.Item xl={ 12 }>
+					<Tabs>
+						<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+						<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
+						<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
+					</Tabs>
+				</Grid.Item>
+
+				<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
+					<Grid.Item xl={ 3 } sm={ 2 } >
+						<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
+					</Grid.Item>
 
-					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
-						</Grid.Item>
+					<Grid.Item xl={ 3 } sm={ 2 } >
+						<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
 
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+					</Grid.Item>
 
-						</Grid.Item>
+					<Grid.Item xl={ 2 } sm={ 2 } >
+						<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+					</Grid.Item>
 
-						<Grid.Item xl={ 2 } sm={ 2 } >
-							<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-						</Grid.Item>
+					<Grid.Item xl={ 1 } sm={ 1 } >
+						<Box width='100%' textAlign='end'>
+							<Button ghost onClick={ handleLayout }>
+								<Icon name='medium-view' size='x32' />
+								<Box>Change View</Box>
+							</Button>
+						</Box>
 
-						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Box width='100%' textAlign='end'>
-								<Button ghost onClick={ handleLayout }>
-									<Icon name='medium-view' size='x32' />
-									<Box>Change View</Box>
-								</Button>
-							</Box>
+					</Grid.Item>
 
-						</Grid.Item>
+					<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
+						<Button ghost onClick={ clearAll }>
+							<Icon name='trash' size='x32' />
+							<Box>Delete All</Box>
+						</Button>
+					</Grid.Item>
+				</Grid.Item>
 
-						<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
-							<Button ghost onClick={ clearAll }>
-								<Icon name='trash' size='x32' />
-								<Box>Delete All</Box>
-							</Button>
-						</Grid.Item>
+				{/* <Grid.Item sm={ 8 } style={  }>
+					<Grid.Item sm={ 2 }>
+						<Box >File Name</Box>
 					</Grid.Item>
-					<Grid.Item xl={ 10 }>
-						<Box>
-							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
-							<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
-						</Box>
+					<Grid.Item sm={ 1 }>
+						<Box >Server Title</Box>
 					</Grid.Item>
-
-					<Grid.Item xl={ 12 }>
-						<Tabs>
-							<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
-							<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
-							<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
-						</Tabs>
+					<Grid.Item sm={ 1 }>
+						<Box >File Size</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Speed</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Progress</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Date</Box>
+					</Grid.Item>
+					<Grid.Item sm={ 1 }>
+						<Box >Remove</Box>
 					</Grid.Item>
 
-					{/* <Grid.Item sm={ 8 } style={  }>
-						<Grid.Item sm={ 2 }>
-							<Box >File Name</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Server Title</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >File Size</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Speed</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Progress</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Date</Box>
-						</Grid.Item>
-						<Grid.Item sm={ 1 }>
-							<Box >Remove</Box>
-						</Grid.Item>
+				</Grid.Item>
 
-					</Grid.Item>
+				<Grid.Item sm={ 8 }>
+						<Divider />
+				</Grid.Item> */}
 
-					<Grid.Item sm={ 8 }>
-							<Divider />
-					</Grid.Item> */}
-
-					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{/* Download Item List */ }
-						{ filteredDownloads.map((downloadItem) => {
-							// Condition for Data Headings
-							if (!timeHeading) {
-								timeHeading = new Date(downloadItem.itemId).toDateString();
-							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
-							}
+				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+					{/* Download Item List */ }
+					{ filteredDownloads.map((downloadItem) => {
+						// Condition for Data Headings
+						if (!timeHeading) {
 							timeHeading = new Date(downloadItem.itemId).toDateString();
-							return (
-								<>
-									<Box fontSize='x16' lineHeight='2' color='info' alignSelf='start' paddingInlineStart='x20'>{ timeHeading }</Box>
-									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
-								</>
-							);
-						}) }
-					</Grid.Item>
-
-				</Grid>
-			</Box>
-		</Content>
+						} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
+							return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
+						}
+						timeHeading = new Date(downloadItem.itemId).toDateString();
+						return (
+							<>
+								<Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>
+								<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
+							</>
+						);
+					}) }
+				</Grid.Item>
+
+			</Grid>
+		</Box>
 	</Wrapper>;
 }
diff --git a/yarn.lock b/yarn.lock
index 3997353a7f..c2c93f0ec5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1090,10 +1090,10 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
-"@rocket.chat/css-in-js@^0.6.3-dev.57+eddfb15":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.6.3-dev.57.tgz#69ada2ecd1c1f5046a5152f5cc8b4eff2a643cfb"
-  integrity sha512-qC1cZI8YQX7hZmZWDRU9XGwIStpPe854GRgaaVxpyELynGbL8PHWhQ+gOB9ce33/Kk6d4HB/QpueIVxrD15c1g==
+"@rocket.chat/css-in-js@^0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.13.1.tgz#39c0cbf1cd8921d2046669f605033672c16a01d4"
+  integrity sha512-uNgsYE3ZV4Z+FGBsvnxDg763F5NdaUNnAxG58j3c304fY8j+camvly99WtR3onIqOGCi/ixhyYPbkFYF/3rvKw==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/stylis" "^0.8.5"
@@ -1105,23 +1105,26 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
-"@rocket.chat/fuselage-hooks@0.6.3-dev.57":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.6.3-dev.57.tgz#28a0e7a607f139fce6b797cab7e72078cf883fac"
-  integrity sha512-C8lTIzKX68OF4n1oc9++rYJxIowo+eQ9O2Xaor1EoWh22XqN5f96YW1xs33lFntNy/8CZLY//usuEx6h1HaTSg==
+"@rocket.chat/fuselage-hooks@^0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.13.2.tgz#269cbc4608c18bfee277e1b9fe765c9e46d2c910"
+  integrity sha512-vjPgbFuJOmIao8VDuWstDiT+/Z+fmPcoDWYcwRUWeAlSyb47bojwbihYn9AJDFMRgo8Hq3yFz3OigvKeqq1oSA==
+  dependencies:
+    "@rocket.chat/fuselage-tokens" "^0.13.1"
+    use-subscription "^1.4.1"
 
-"@rocket.chat/fuselage-tokens@^0.6.3-dev.57+eddfb15":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.6.3-dev.57.tgz#336723f12ac1c6da07ab58269931f2f2a415216d"
-  integrity sha512-+71s0lfmI8DQ5NqNLsCHGw0KqUB3EtqLyODAXJjUy7QqEBUbsN4xCpdYZWsKlB2XPcbwPMibJjOWP6Bo9Z+2hA==
+"@rocket.chat/fuselage-tokens@^0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.13.1.tgz#3d283d650d9330dd7187870f469f3a59b937865c"
+  integrity sha512-sPV3bWMNnJ44iZ1GJL/zVm/keCAEtUkSUqfrvgFS64OX9s9ChWPVDT9+u+VI1cbSMToThCC6ZrRSp9Ve+ATYhw==
 
-"@rocket.chat/fuselage@0.6.3-dev.57":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.6.3-dev.57.tgz#8edb5028b9a967c79a8b3379ea322cc0d5a6d8dc"
-  integrity sha512-NoKgEE6wXxZsAoRxy0C0P770shLgldf9hIUQDJAn6Z+TKbl0qq+J7X/5WVjCzjtuKW9/9FZ2v6Wj6M6qlpDEYA==
+"@rocket.chat/fuselage@^0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.13.2.tgz#65b7ad4dcdad03258780b13f664c6653dded2622"
+  integrity sha512-BGXYBEsjYGWSx8qx+6Ecr/dZZXEOA8AKkshyEcjP16Sd8h9Ux2Hivm+MIxNHPZv6+6fuZToq5K2megraCFrHcA==
   dependencies:
-    "@rocket.chat/css-in-js" "^0.6.3-dev.57+eddfb15"
-    "@rocket.chat/fuselage-tokens" "^0.6.3-dev.57+eddfb15"
+    "@rocket.chat/css-in-js" "^0.13.1"
+    "@rocket.chat/fuselage-tokens" "^0.13.1"
     invariant "^2.2.4"
     react-keyed-flatten-children "^1.2.0"
 
@@ -9352,6 +9355,13 @@ url-regex@^3.0.0:
   dependencies:
     ip-regex "^1.0.1"
 
+use-subscription@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.1.tgz#edcbcc220f1adb2dd4fa0b2f61b6cc308e620069"
+  integrity sha512-7+IIwDG/4JICrWHL/Q/ZPK5yozEnvRm6vHImu0LKwQlmWGKeiF7mbAenLlK/cTNXrTtXHU/SFASQHzB6+oSJMQ==
+  dependencies:
+    object-assign "^4.1.1"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From b11d639cb52421d658852bb867039d3144c7c943 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 03:05:53 +0500
Subject: [PATCH 29/66] fix cancelled status bug

---
 src/components/DownloadsComponents/DownloadItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 7136dfef93..fdf866f0b8 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -115,7 +115,7 @@ export default function DownloadItem({
 		percentage={percentage}
 		isCompleted={completed}
 		isPaused={paused}
-		isCancelled={status !== STATUS.CANCELLED}
+		isCancelled={status === STATUS.CANCELLED}
 		handleFileOpen={handleFileOpen}
 		handleCopyLink={handleCopyLink}
 		handlePause={handlePause}
@@ -132,7 +132,7 @@ export default function DownloadItem({
 		percentage={percentage}
 		isCompleted={completed}
 		isPaused={paused}
-		isCancelled={status !== STATUS.CANCELLED}
+		isCancelled={status === STATUS.CANCELLED}
 		handleFileOpen={handleFileOpen}
 		handleCopyLink={handleCopyLink}
 		handlePause={handlePause}

From 70224b521e28b8cf54009e3523a23abac1185488 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 03:31:10 +0500
Subject: [PATCH 30/66] tooltips for buttons

---
 .../DownloadsComponents/DownloadItem.js       |  8 ++---
 src/components/DownloadsManagerView/index.js  | 35 ++-----------------
 2 files changed, 6 insertions(+), 37 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index fdf866f0b8..f9e9fc526f 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -168,12 +168,12 @@ const Compact = React.memo(({
 			{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
 			{/* TODO INSERT TITLES FOR EACH ACTION */}
 			{/* Completed */ }
-			{ isCompleted && <ActionButton onClick={ handleFileOpen }><Icon name='chevron-up'/></ActionButton>}
+			{ isCompleted && <ActionButton onClick={ handleFileOpen } title='open in folder'><Icon name='chevron-up'/></ActionButton>}
 			{/* Progressing and Paused */ }
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? <Icon name='play'/> : <Icon name='pause'/> }</ActionButton> }
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }><Icon name='cross'/></ActionButton> }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={isPaused ? 'resume' : 'pause'}>{ isPaused ? <Icon name='play'/> : <Icon name='pause'/> }</ActionButton> }
+			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='remove'><Icon name='cross'/></ActionButton> }
 			{/* Cancelled */ }
-			{ isCancelled && <ActionButton onClick={ handleRetry }><Icon name='refresh'/></ActionButton>}
+			{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh'/></ActionButton>}
 		</Box>
 	</Box>
 	<Box display='flex' flexGrow={1} width='100%'>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 90225e6168..5140341f75 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -167,8 +167,7 @@ export function DownloadsManagerView() {
 					<Grid.Item xl={ 1 } sm={ 1 } >
 						<Box width='100%' textAlign='end'>
 							<Button ghost onClick={ handleLayout }>
-								<Icon name='medium-view' size='x32' />
-								<Box>Change View</Box>
+								<Icon name='medium-view' size='x32' title='Change Downloads View' />
 							</Button>
 						</Box>
 
@@ -176,41 +175,11 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
 						<Button ghost onClick={ clearAll }>
-							<Icon name='trash' size='x32' />
-							<Box>Delete All</Box>
+							<Icon name='trash' size='x32' title='Remove All'/>
 						</Button>
 					</Grid.Item>
 				</Grid.Item>
 
-				{/* <Grid.Item sm={ 8 } style={  }>
-					<Grid.Item sm={ 2 }>
-						<Box >File Name</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >Server Title</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >File Size</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >Speed</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >Progress</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >Date</Box>
-					</Grid.Item>
-					<Grid.Item sm={ 1 }>
-						<Box >Remove</Box>
-					</Grid.Item>
-
-				</Grid.Item>
-
-				<Grid.Item sm={ 8 }>
-						<Divider />
-				</Grid.Item> */}
-
 				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
 					{/* Download Item List */ }
 					{ filteredDownloads.map((downloadItem) => {

From 9d27776e5f1ac001b3de8d4a43b282aee8a9ad5b Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 03:36:54 +0500
Subject: [PATCH 31/66] added status.all constant

---
 src/components/DownloadsComponents/DownloadItem.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index f9e9fc526f..80b1024c7f 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -9,9 +9,10 @@ import 'react-sweet-progress/lib/style.css';
 import { formatBytes } from '../../downloadUtils';
 
 
-const STATUS = {
-	CANCELLED: 'cancelled',
-	PAUSED: 'paused',
+export const STATUS = {
+	CANCELLED: 'Cancelled',
+	PAUSED: 'Paused',
+	All: 'All Downloads',
 };
 
 // Recieve props for individual download item
@@ -49,7 +50,7 @@ export default function DownloadItem({
 		console.log('Progress');
 		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ status: 'All Downloads', percentage, serverTitle, itemId, Mbps: data.Mbps });
+		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps });
 		setPercentage(percentage);
 		setPath(data.savePath);
 	});
@@ -69,8 +70,8 @@ export default function DownloadItem({
 		const downloadComplete = (data) => {
 			console.log('Download Complete');
 			setStatus('All Downloads');
-			props.updateDownloads({ status: 'All Downloads', serverTitle, itemId, percentage: 100 });
-			ipcRenderer.send('download-complete', { status: 'All Downloads', url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime });
+			props.updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100 });
+			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
@@ -94,6 +95,7 @@ export default function DownloadItem({
 	});
 
 	const handleRetry = useMutableCallback(() => {
+		// Adding ServerTitle to Download URL for use in retrying the cancelled download
 		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
 		props.clear(itemId);
 	});

From aa5cbb3450ab68e9f55a395785122a2486e5ddeb Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 03:46:51 +0500
Subject: [PATCH 32/66] finished status constant

---
 src/components/DownloadsComponents/DownloadItem.js | 12 +++---------
 src/components/DownloadsManagerView/index.js       | 12 ++++++------
 src/downloadUtils.js                               |  7 +++++++
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 80b1024c7f..ce821f1cbc 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -6,15 +6,9 @@ import { ipcRenderer, remote, clipboard } from 'electron';
 import { Progress as SweetProgress } from 'react-sweet-progress';
 
 import 'react-sweet-progress/lib/style.css';
-import { formatBytes } from '../../downloadUtils';
+import { formatBytes, STATUS } from '../../downloadUtils';
 
 
-export const STATUS = {
-	CANCELLED: 'Cancelled',
-	PAUSED: 'Paused',
-	All: 'All Downloads',
-};
-
 // Recieve props for individual download item
 export default function DownloadItem({
 	url,
@@ -34,7 +28,7 @@ export default function DownloadItem({
 
 	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
 	const [path, setPath] = useDebouncedState(props.path || '', 100);
-	const [status, setStatus] = useDebouncedState(props.status || 'All Downloads', 100);
+	const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
 
 	const completed = percentage === 100;
 	const paused = status === STATUS.PAUSED;
@@ -69,7 +63,7 @@ export default function DownloadItem({
 	useEffect(() => {
 		const downloadComplete = (data) => {
 			console.log('Download Complete');
-			setStatus('All Downloads');
+			setStatus(STATUS.ALL);
 			props.updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100 });
 			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime });
 		};
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 5140341f75..7b2a8f111a 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -7,7 +7,7 @@ import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
-import { mapping } from '../../downloadUtils';
+import { mapping, STATUS } from '../../downloadUtils';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
@@ -19,7 +19,7 @@ export function DownloadsManagerView() {
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
 
-	const [tab, setTab] = useLocalStorage('download-tab', 'All Downloads');
+	const [tab, setTab] = useLocalStorage('download-tab', STATUS.ALL);
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
 	const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
@@ -144,9 +144,9 @@ export function DownloadsManagerView() {
 
 				<Grid.Item xl={ 12 }>
 					<Tabs>
-						<Tabs.Item selected={ tab === 'All Downloads' } onClick={ handleTabChange }>All Downloads</Tabs.Item>
-						<Tabs.Item selected={ tab === 'Paused' } onClick={ handleTabChange }>Paused</Tabs.Item>
-						<Tabs.Item selected={ tab === 'Cancelled' } onClick={ handleTabChange }>Cancelled</Tabs.Item>
+						<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+						<Tabs.Item selected={ tab === STATUS.PAUSED } onClick={ handleTabChange }>Paused</Tabs.Item>
+						<Tabs.Item selected={ tab === STATUS.CANCELLED} onClick={ handleTabChange }>Cancelled</Tabs.Item>
 					</Tabs>
 				</Grid.Item>
 
@@ -175,7 +175,7 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
 						<Button ghost onClick={ clearAll }>
-							<Icon name='trash' size='x32' title='Remove All'/>
+							<Icon name='trash' size='x32' title='Remove All' />
 						</Button>
 					</Grid.Item>
 				</Grid.Item>
diff --git a/src/downloadUtils.js b/src/downloadUtils.js
index 23ef4bc8f0..de258879c4 100644
--- a/src/downloadUtils.js
+++ b/src/downloadUtils.js
@@ -23,3 +23,10 @@ export const mapping = {
 	video: 'Videos',
 	audio: 'Audios',
 };
+
+
+export const STATUS = {
+	CANCELLED: 'Cancelled',
+	PAUSED: 'Paused',
+	ALL: 'All Downloads',
+};

From 3924945c3c34cc9672db2beea0d8044a808ee154 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 04:21:38 +0500
Subject: [PATCH 33/66] seperated item layout components

---
 src/components/DownloadsComponents/Compact.js |  51 ++++++++
 .../DownloadsComponents/DownloadItem.js       | 112 ++----------------
 .../DownloadsComponents/Extended.js           |  60 ++++++++++
 .../DownloadsManagerView}/downloadUtils.js    |  13 ++
 src/components/DownloadsManagerView/index.js  |   2 +-
 5 files changed, 132 insertions(+), 106 deletions(-)
 create mode 100644 src/components/DownloadsComponents/Compact.js
 create mode 100644 src/components/DownloadsComponents/Extended.js
 rename src/{ => components/DownloadsManagerView}/downloadUtils.js (56%)

diff --git a/src/components/DownloadsComponents/Compact.js b/src/components/DownloadsComponents/Compact.js
new file mode 100644
index 0000000000..731bd104f5
--- /dev/null
+++ b/src/components/DownloadsComponents/Compact.js
@@ -0,0 +1,51 @@
+import { Box, Icon } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
+
+export default React.memo(function Compact({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) {
+	return <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' { ...props }>
+		<Box display='flex' flexGrow={ 1 } width='100%'>
+			<Box fontScale='p1' withTruncatedText flexGrow={ 1 }>{ fileName }</Box>
+			<Box display='flex' justifyContent='space-between' alignItems='center'>
+				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
+				{/* TODO INSERT TITLES FOR EACH ACTION */ }
+				{/* Completed */ }
+				{ isCompleted && <ActionButton onClick={ handleFileOpen } title='open in folder'><Icon name='chevron-up' /></ActionButton> }
+				{/* Progressing and Paused */ }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={ isPaused ? 'resume' : 'pause' }>{ isPaused ? <Icon name='play' /> : <Icon name='pause' /> }</ActionButton> }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='remove'><Icon name='cross' /></ActionButton> }
+				{/* Cancelled */ }
+				{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh' /></ActionButton> }
+			</Box>
+		</Box>
+		<Box display='flex' flexGrow={ 1 } width='100%'>
+			<Info withTruncatedText>{ serverTitle }</Info>
+			<Info withTruncatedText mi='x8'>{ fileSize }</Info>
+			{ mbps && <Info mi='x8'>{ `${ mbps }Mbps/s` }</Info> }
+			<Progress percent={ percentage } mi='x8' />
+			<Info withTruncatedText mi='x8'>{ date }</Info>
+			{/* <Box display='flex' alignItems='center'>
+			<Icon name='kebab'/> */}
+			{/* </Box> */ }
+		</Box>
+	</Box>;
+});
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index ce821f1cbc..01b23f107c 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -3,10 +3,13 @@ import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hoo
 import React, { useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
-import { Progress as SweetProgress } from 'react-sweet-progress';
+// import { Progress as SweetProgress } from 'react-sweet-progress';
+
+// import 'react-sweet-progress/lib/style.css';
+import { formatBytes, STATUS } from '../DownloadsManagerView/downloadUtils';
+import Extended from './Extended';
+import Compact from './Compact';
 
-import 'react-sweet-progress/lib/style.css';
-import { formatBytes, STATUS } from '../../downloadUtils';
 
 
 // Recieve props for individual download item
@@ -139,105 +142,4 @@ export default function DownloadItem({
 	/>;
 }
 
-const Compact = React.memo(({
-	serverTitle,
-	mime,
-	date,
-	fileName,
-	fileSize,
-	mbps,
-	percentage,
-	isCompleted,
-	isPaused,
-	isCancelled,
-	handleFileOpen,
-	handleCopyLink,
-	handlePause,
-	handleCancel,
-	handleRetry,
-	handleDelete,
-	...props
-}) => <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' {...props}>
-	<Box display='flex' flexGrow={1} width='100%'>
-		<Box fontScale='p1' withTruncatedText flexGrow={1}>{ fileName }</Box>
-		<Box display='flex' justifyContent='space-between' alignItems='center'>
-			{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
-			{/* TODO INSERT TITLES FOR EACH ACTION */}
-			{/* Completed */ }
-			{ isCompleted && <ActionButton onClick={ handleFileOpen } title='open in folder'><Icon name='chevron-up'/></ActionButton>}
-			{/* Progressing and Paused */ }
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={isPaused ? 'resume' : 'pause'}>{ isPaused ? <Icon name='play'/> : <Icon name='pause'/> }</ActionButton> }
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='remove'><Icon name='cross'/></ActionButton> }
-			{/* Cancelled */ }
-			{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh'/></ActionButton>}
-		</Box>
-	</Box>
-	<Box display='flex' flexGrow={1} width='100%'>
-		<Info withTruncatedText>{ serverTitle }</Info>
-		<Info withTruncatedText mi='x8'>{ fileSize }</Info>
-		{ mbps && <Info mi='x8'>{`${ mbps }Mbps/s`}</Info> }
-		<Progress percent={ percentage } mi='x8'/>
-		<Info withTruncatedText mi='x8'>{ date }</Info>
-		{/* <Box display='flex' alignItems='center'>
-			<Icon name='kebab'/> */}
-		{/* </Box> */}
-	</Box>
-</Box>);
-
-const Extended = React.memo(({
-	serverTitle,
-	mime,
-	date,
-	fileName,
-	fileSize,
-	mbps,
-	percentage,
-	isCompleted,
-	isPaused,
-	isCancelled,
-	handleFileOpen,
-	handleCopyLink,
-	handlePause,
-	handleCancel,
-	handleRetry,
-	handleDelete,
-	...props
-}) => <Box width='100%' display='flex' alignItems='center' {...props}>
-	{/* USE AVATAR FUSELAGE (TODO) */ }
-	<Box size='x124' flexShrink={0} bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-		<Icon size='x60' name='clip' />
-		<Box fonScale='s2' color='primary-500' display='block'>{ mime }</Box>
-	</Box>
-	<Box display='flex' flexDirection='column' flexGrow={1} mi='x16'>
-		<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
-		<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
-			<Info>{ serverTitle }</Info>
-			<Info> { date }</Info>
-			<Info>{ fileSize || '25MB' }</Info>
-			{ mbps > 0 && <Info>{ `${ mbps }Mbps/s` }</Info>}
-			{/* ESTIMATED (TODO) */ }
-			{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
-		</Box>
-		<Box mb='x8'>
-			<Progress percent={ percentage } />
-		</Box>
-		{/* // TODO: Implement Show in Folder */ }
-		<ButtonGroup>
-			{/* Completed */ }
-			{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
-			{ isCompleted && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
-			{/* Progressing and Paused */ }
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton>}
-			{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton>}
-			{/* Cancelled */ }
-			{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton>}
-			<ActionButton onClick={ handleDelete }>Delete</ActionButton>
-		</ButtonGroup>
-	</Box>
-</Box>);
-
-const Info = (props) => <Box fontSize='s1' color='info' {...props}/>;
-
-const ActionButton = (props) => <Button color='primary-500' small ghost {...props}/>;
-
-const Progress = ({ percent, ...props }) => <Box flexGrow={1} {...props}><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
+
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
new file mode 100644
index 0000000000..e3ba028016
--- /dev/null
+++ b/src/components/DownloadsComponents/Extended.js
@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { Box, Icon, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
+
+
+export default React.memo(function Extended({
+	serverTitle,
+	mime,
+	date,
+	fileName,
+	fileSize,
+	mbps,
+	percentage,
+	isCompleted,
+	isPaused,
+	isCancelled,
+	handleFileOpen,
+	handleCopyLink,
+	handlePause,
+	handleCancel,
+	handleRetry,
+	handleDelete,
+	...props
+}) {
+	return <Box width='100%' display='flex' alignItems='center' { ...props }>
+		{/* USE AVATAR FUSELAGE (TODO) */ }
+		<Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+			<Icon size='x60' name='clip' />
+			<Box fonScale='s2' color='primary-500' display='block'>{ mime }</Box>
+		</Box>
+		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
+			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
+				<Info>{ serverTitle }</Info>
+				<Info> { date }</Info>
+				<Info>{ fileSize || '25MB' }</Info>
+				{ mbps > 0 && <Info>{ `${ mbps }Mbps/s` }</Info> }
+				{/* ESTIMATED (TODO) */ }
+				{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
+			</Box>
+			<Box mb='x8'>
+				<Progress percent={ percentage } />
+			</Box>
+			{/* // TODO: Implement Show in Folder */ }
+			<ButtonGroup>
+				{/* Completed */ }
+				{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+				{ isCompleted && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+				{/* Progressing and Paused */ }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
+				{/* Cancelled */ }
+				{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
+				<ActionButton onClick={ handleDelete }>Delete</ActionButton>
+			</ButtonGroup>
+		</Box>
+	</Box>;
+});
diff --git a/src/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
similarity index 56%
rename from src/downloadUtils.js
rename to src/components/DownloadsManagerView/downloadUtils.js
index de258879c4..069bb132b6 100644
--- a/src/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -1,3 +1,16 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import React, { useMemo } from 'react';
+import { Progress as SweetProgress } from 'react-sweet-progress';
+
+import 'react-sweet-progress/lib/style.css';
+
+export const Info = (props) => <Box fontSize='s1' color='info' {...props}/>;
+
+export const ActionButton = (props) => <Button color='primary-500' small ghost {...props}/>;
+
+export const Progress = ({ percent, ...props }) => <Box flexGrow={1} {...props}><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
+
+
 // Utility function for bytes conversion. TODO: seperate into another file.
 export function formatBytes(bytes, decimals = 2, size = false) {
 	if (bytes === 0) {
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 7b2a8f111a..de692006b0 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -7,7 +7,7 @@ import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
-import { mapping, STATUS } from '../../downloadUtils';
+import { mapping, STATUS } from './downloadUtils';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');

From c54c6e1c025a39c210f78617ed2cdc6e1fdaec72 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 13 Aug 2020 04:41:38 +0500
Subject: [PATCH 34/66] modals for destructive actions

---
 .../DownloadsComponents/DownloadItem.js       |   1 -
 .../DownloadsComponents/WarningModal.js       |  26 +++
 src/components/DownloadsManagerView/index.js  | 182 +++++++++++-------
 3 files changed, 135 insertions(+), 74 deletions(-)
 create mode 100644 src/components/DownloadsComponents/WarningModal.js

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 01b23f107c..a12fa5d01f 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -11,7 +11,6 @@ import Extended from './Extended';
 import Compact from './Compact';
 
 
-
 // Recieve props for individual download item
 export default function DownloadItem({
 	url,
diff --git a/src/components/DownloadsComponents/WarningModal.js b/src/components/DownloadsComponents/WarningModal.js
new file mode 100644
index 0000000000..5202563dba
--- /dev/null
+++ b/src/components/DownloadsComponents/WarningModal.js
@@ -0,0 +1,26 @@
+import { Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
+import React from 'react';
+
+
+const WarningModal = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }) =>
+	<Modal.Backdrop>
+		<Modal { ...props }>
+			<Modal.Header>
+				<Icon color='danger' name='modal-warning' size={ 20 } />
+				<Modal.Title>{ 'Are you sure?' }</Modal.Title>
+				<Modal.Close onClick={ close } />
+			</Modal.Header>
+			<Modal.Content fontScale='p1'>
+				{ text }
+			</Modal.Content>
+			<Modal.Footer>
+				<ButtonGroup align='end'>
+					<Button ghost onClick={ cancel || close }>{ cancelText || 'Cancel' }</Button>
+					<Button primary danger onClick={ confirm }>{ confirmText }</Button>
+				</ButtonGroup>
+			</Modal.Footer>
+		</Modal>;
+	</Modal.Backdrop>;
+
+
+export default WarningModal;
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index de692006b0..d474fd2700 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,13 +1,14 @@
 import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
 import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 // import { useTranslation } from 'react-i18next';
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
 import { mapping, STATUS } from './downloadUtils';
+import WarningModal from '../DownloadsComponents/WarningModal';
 
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
@@ -18,7 +19,7 @@ export function DownloadsManagerView() {
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
-
+	const [modal, setModal] = useState();
 	const [tab, setTab] = useLocalStorage('download-tab', STATUS.ALL);
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
@@ -46,16 +47,16 @@ export function DownloadsManagerView() {
 		}
 	};
 
-	// Remove a single download from list
-	const clear = (itemId) => {
-		const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-		setDownloads(newDownloads);
-		ipcRenderer.send('remove', itemId);
-	};
-	// Remove All downloads from list
-	const clearAll = () => {
-		ipcRenderer.send('reset');
-	};
+	// // Remove a single download from list
+	// const clear = (itemId) => {
+	// 	const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+	// 	setDownloads(newDownloads);
+	// 	ipcRenderer.send('remove', itemId);
+	// };
+	// // Remove All downloads from list
+	// const clearAll = () => {
+	// 	ipcRenderer.send('reset');
+	// };
 
 	const handleSearch = (event) => {
 		// console.log(Boolean(event.target.value));
@@ -92,6 +93,40 @@ export function DownloadsManagerView() {
 		setDownloads(updatedDownloads);
 	};
 
+	// Modal Action
+
+	const closeModal = useCallback(() => {
+		setModal(null);
+	}, [setModal]);
+
+	const handleClearAll = useCallback(() => {
+		const clearAll = () => {
+			closeModal();
+			ipcRenderer.send('reset');
+		};
+		setModal(<WarningModal
+			close={ closeModal }
+			confirm={ clearAll }
+			text={ 'Remove All Downloads?' }
+			confirmText={ 'Yes' }
+		/>);
+	}, [closeModal]);
+
+	const handleClear = useCallback(() => {
+		const clear = (itemId) => {
+			closeModal();
+			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+			setDownloads(newDownloads);
+			ipcRenderer.send('remove', itemId);
+		};
+		setModal(<WarningModal
+			close={ closeModal }
+			confirm={ clear }
+			text={ 'Remove this download?' }
+			confirmText={ 'Yes' }
+		/>);
+	}, [closeModal, downloads]);
+
 	// 			USE EFFECTS
 
 	useEffect(() => {
@@ -131,75 +166,76 @@ export function DownloadsManagerView() {
 	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
 
-	return <Wrapper isVisible={ isVisible }>
-		<Box p='x24'>
-
-			<Grid xl={ true } >
-				<Grid.Item xl={ 10 }>
-					<Box>
-						<Box fontSize='x32' lineHeight='2'>Downloads</Box>
-						<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
-					</Box>
-				</Grid.Item>
-
-				<Grid.Item xl={ 12 }>
-					<Tabs>
-						<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All Downloads</Tabs.Item>
-						<Tabs.Item selected={ tab === STATUS.PAUSED } onClick={ handleTabChange }>Paused</Tabs.Item>
-						<Tabs.Item selected={ tab === STATUS.CANCELLED} onClick={ handleTabChange }>Cancelled</Tabs.Item>
-					</Tabs>
-				</Grid.Item>
-
-				<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
-					<Grid.Item xl={ 3 } sm={ 2 } >
-						<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
-					</Grid.Item>
-
-					<Grid.Item xl={ 3 } sm={ 2 } >
-						<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+	return <>
+		<Wrapper isVisible={ isVisible }>
+			<Box p='x24'>
 
+				<Grid xl={ true } >
+					<Grid.Item xl={ 10 }>
+						<Box>
+							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
+							<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
+						</Box>
 					</Grid.Item>
 
-					<Grid.Item xl={ 2 } sm={ 2 } >
-						<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+					<Grid.Item xl={ 12 }>
+						<Tabs>
+							<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+							<Tabs.Item selected={ tab === STATUS.PAUSED } onClick={ handleTabChange }>Paused</Tabs.Item>
+							<Tabs.Item selected={ tab === STATUS.CANCELLED } onClick={ handleTabChange }>Cancelled</Tabs.Item>
+						</Tabs>
 					</Grid.Item>
 
-					<Grid.Item xl={ 1 } sm={ 1 } >
-						<Box width='100%' textAlign='end'>
-							<Button ghost onClick={ handleLayout }>
-								<Icon name='medium-view' size='x32' title='Change Downloads View' />
-							</Button>
-						</Box>
+					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
+						<Grid.Item xl={ 3 } sm={ 2 } >
+							<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
+						</Grid.Item>
 
-					</Grid.Item>
+						<Grid.Item xl={ 3 } sm={ 2 } >
+							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+
+						</Grid.Item>
+
+						<Grid.Item xl={ 2 } sm={ 2 } >
+							<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+						</Grid.Item>
 
-					<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
-						<Button ghost onClick={ clearAll }>
-							<Icon name='trash' size='x32' title='Remove All' />
-						</Button>
+						<Grid.Item xl={ 1 } sm={ 1 } >
+							<Box width='100%' textAlign='end'>
+								<Button ghost onClick={ handleLayout }>
+									<Icon name='medium-view' size='x32' title='Change Downloads View' />
+								</Button>
+							</Box>
+
+						</Grid.Item>
+
+						<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
+							<Button ghost onClick={ handleClearAll }>
+								<Icon name='trash' size='x32' title='Remove All' />
+							</Button>
+						</Grid.Item>
 					</Grid.Item>
-				</Grid.Item>
 
-				<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-					{/* Download Item List */ }
-					{ filteredDownloads.map((downloadItem) => {
-						// Condition for Data Headings
-						if (!timeHeading) {
+					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+						{/* Download Item List */ }
+						{ filteredDownloads.map((downloadItem) => {
+							// Condition for Data Headings
+							if (!timeHeading) {
+								timeHeading = new Date(downloadItem.itemId).toDateString();
+							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
+								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />;
+							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
-						} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-							return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />;
-						}
-						timeHeading = new Date(downloadItem.itemId).toDateString();
-						return (
-							<>
-								<Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>
-								<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ clear } />
-							</>
-						);
-					}) }
-				</Grid.Item>
-
-			</Grid>
-		</Box>
-	</Wrapper>;
+							return (
+								<>
+									<Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>
+									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
+								</>
+							);
+						}) }
+					</Grid.Item>
+
+				</Grid>
+			</Box>
+		</Wrapper>{ modal }</>;
 }

From e63bf5cb0c341e6a5d8bfca22858b0b269fbdd8c Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Fri, 14 Aug 2020 20:57:13 +0500
Subject: [PATCH 35/66] initial thumnail images only

---
 package.json                                  | 11 ++-
 .../DownloadsComponents/DownloadItem.js       | 29 +++---
 .../DownloadsComponents/Extended.js           | 11 ++-
 src/components/DownloadsManagerView/index.js  | 16 +---
 src/main.js                                   | 11 ++-
 yarn.lock                                     | 91 ++++++++++++++++++-
 6 files changed, 130 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 7c40772f89..660ef37782 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "react-redux": "^7.1.3",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
-    "rimraf": "^3.0.1"
+    "rimraf": "^3.0.1",
+    "sharp": "^0.25.4"
   },
   "devDependencies": {
     "@babel/core": "^7.6.3",
@@ -65,11 +66,11 @@
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
-    "@rocket.chat/eslint-config": "^0.4.0",
     "@rocket.chat/css-in-js": "^0.13.1",
-		"@rocket.chat/fuselage": "^0.13.2",
-		"@rocket.chat/fuselage-hooks": "^0.13.2",
-		"@rocket.chat/icons": "^0.13.1",
+    "@rocket.chat/eslint-config": "^0.4.0",
+    "@rocket.chat/fuselage": "^0.13.2",
+    "@rocket.chat/fuselage-hooks": "^0.13.2",
+    "@rocket.chat/icons": "^0.13.1",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",
     "chai": "^4.2.0",
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index a12fa5d01f..809c54802b 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,11 +1,8 @@
-import { Box, Grid, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
-// import { Progress as SweetProgress } from 'react-sweet-progress';
 
-// import 'react-sweet-progress/lib/style.css';
 import { formatBytes, STATUS } from '../DownloadsManagerView/downloadUtils';
 import Extended from './Extended';
 import Compact from './Compact';
@@ -31,6 +28,7 @@ export default function DownloadItem({
 	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
 	const [path, setPath] = useDebouncedState(props.path || '', 100);
 	const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
+	const [thumb, setThumb] = useState();
 
 	const completed = percentage === 100;
 	const paused = status === STATUS.PAUSED;
@@ -46,7 +44,7 @@ export default function DownloadItem({
 		console.log('Progress');
 		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps });
+		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, path: data.savePath });
 		setPercentage(percentage);
 		setPath(data.savePath);
 	});
@@ -63,23 +61,25 @@ export default function DownloadItem({
 
 	// Download Completed, Send data back
 	useEffect(() => {
-		const downloadComplete = (data) => {
+		const downloadComplete = (event, data) => {
 			console.log('Download Complete');
+			console.log(data);
 			setStatus(STATUS.ALL);
-			props.updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100 });
-			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime });
+			setThumb(data.thumb);
+			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100 });
+			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumb: data.thumb });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
 		return () => {
 			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
 		};
-	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setStatus, url]);
+	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setStatus, updateDownloads, url]);
 
 	const handleCancel = useMutableCallback(() => {
 		setStatus(STATUS.CANCELLED);
 		ipcRenderer.send(`cancel-${ itemId }`);
-		props.updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
+		updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
 		ipcRenderer.send('download-complete', { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	});
 
@@ -87,7 +87,7 @@ export default function DownloadItem({
 		console.log(percentage);
 		setStatus(STATUS.PAUSED);
 		ipcRenderer.send(`pause-${ itemId }`);
-		props.updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
+		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
 	});
 
 	const handleRetry = useMutableCallback(() => {
@@ -103,6 +103,8 @@ export default function DownloadItem({
 	// TODO TOAST
 	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
 
+	const printState = () => console.log({ path, thumb });
+
 	return props.layout === 'compact' ? <Compact
 		serverTitle={serverTitle}
 		mime={ mime.split('/')[1] }
@@ -121,6 +123,7 @@ export default function DownloadItem({
 		handleRetry={handleRetry}
 		handleDelete={handleDelete}
 		mb = {props.mb}/> : <Extended
+		thumbnail={thumb}
 		serverTitle={serverTitle}
 		mime={ mime.split('/')[1] }
 		date={date}
@@ -132,7 +135,7 @@ export default function DownloadItem({
 		isPaused={paused}
 		isCancelled={status === STATUS.CANCELLED}
 		handleFileOpen={handleFileOpen}
-		handleCopyLink={handleCopyLink}
+		handleCopyLink={printState}
 		handlePause={handlePause}
 		handleCancel={handleCancel}
 		handleRetry={handleRetry}
@@ -140,5 +143,3 @@ export default function DownloadItem({
 		mb = {props.mb}
 	/>;
 }
-
-
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index e3ba028016..cd8fd94c7d 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -1,11 +1,12 @@
 
 import React from 'react';
-import { Box, Icon, ButtonGroup } from '@rocket.chat/fuselage';
+import { Box, Icon, ButtonGroup, Avatar } from '@rocket.chat/fuselage';
 
 import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
 
 
 export default React.memo(function Extended({
+	thumbnail,
 	serverTitle,
 	mime,
 	date,
@@ -26,10 +27,12 @@ export default React.memo(function Extended({
 }) {
 	return <Box width='100%' display='flex' alignItems='center' { ...props }>
 		{/* USE AVATAR FUSELAGE (TODO) */ }
-		<Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+
+		{ thumbnail ? <Avatar url={ thumbnail } size='x124' /> : <Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 			<Icon size='x60' name='clip' />
-			<Box fonScale='s2' color='primary-500' display='block'>{ mime }</Box>
-		</Box>
+			<Box fontScale='s2' color='primary-500' display='block'>{ mime }</Box>
+		</Box> }
+
 		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
 			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
 			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index d474fd2700..af3fd28884 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -20,6 +20,7 @@ export function DownloadsManagerView() {
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
 	const [modal, setModal] = useState();
+
 	const [tab, setTab] = useLocalStorage('download-tab', STATUS.ALL);
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
@@ -47,17 +48,6 @@ export function DownloadsManagerView() {
 		}
 	};
 
-	// // Remove a single download from list
-	// const clear = (itemId) => {
-	// 	const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-	// 	setDownloads(newDownloads);
-	// 	ipcRenderer.send('remove', itemId);
-	// };
-	// // Remove All downloads from list
-	// const clearAll = () => {
-	// 	ipcRenderer.send('reset');
-	// };
-
 	const handleSearch = (event) => {
 		// console.log(Boolean(event.target.value));
 		if (event.target.value !== searchVal) {
@@ -112,8 +102,8 @@ export function DownloadsManagerView() {
 		/>);
 	}, [closeModal]);
 
-	const handleClear = useCallback(() => {
-		const clear = (itemId) => {
+	const handleClear = useCallback((itemId) => {
+		const clear = () => {
 			closeModal();
 			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
 			setDownloads(newDownloads);
diff --git a/src/main.js b/src/main.js
index 70a84a849d..d0c59c98ff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,11 @@
 import path from 'path';
 
+import sharp from 'sharp';
 import { app, BrowserWindow, ipcMain } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
+// import icon from './icons/icon.svg';
 import { setupErrorHandling } from './errorHandling';
 
 
@@ -176,9 +178,14 @@ const createMainWindow = () => {
 				}
 			}
 		});
-		item.once('done', (event, state) => {
+		item.once('done', async (event, state) => {
 			if (state === 'completed') {
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { path, percentage: 100 }); // Send to specific DownloadItem
+				const path = item.savePath;
+				const thumb = await sharp(path).resize(100, 100).png().toBuffer();
+				// console.log(item.savePath);
+				// console.log(thumb);
+				console.log(`data:image/png;base64,${ thumb.toString('base64') }`);
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumb: `data:image/png;base64,${ thumb.toString('base64') }` }); // Send to specific DownloadItem
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);
diff --git a/yarn.lock b/yarn.lock
index c2c93f0ec5..476d9d3a07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2246,6 +2246,11 @@ chownr@^1.1.1, chownr@^1.1.3:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
   integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 chromium-pickle-js@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz#04a106672c18b085ab774d983dfa3ea138f22205"
@@ -3033,6 +3038,13 @@ decompress-response@^4.2.0:
   dependencies:
     mimic-response "^2.0.0"
 
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
 deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
@@ -6069,6 +6081,11 @@ mimic-response@^2.0.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.0.0.tgz#996a51c60adf12cb8a87d7fb8ef24c2f3d5ebb46"
   integrity sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==
 
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -6114,7 +6131,7 @@ minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@^1.2.5:
+minimist@^1.2.3, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -6169,6 +6186,11 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
@@ -6304,6 +6326,11 @@ node-abi@^2.7.0:
   dependencies:
     semver "^5.4.1"
 
+node-addon-api@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.0.tgz#812446a1001a54f71663bed188314bba07e09247"
+  integrity sha512-sSHCgWfJ+Lui/u+0msF3oyCgvdkhxDbkCS6Q8uiJquzOimkJBvX6hl5aSSA7DR1XbMpdM8r7phjcF63sF4rkKg==
+
 node-environment-flags@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.6.tgz#a30ac13621f6f7d674260a54dede048c3982c088"
@@ -7371,6 +7398,27 @@ prebuild-install@^5.3.3:
     tunnel-agent "^0.6.0"
     which-pm-runs "^1.0.0"
 
+prebuild-install@^5.3.4:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.5.tgz#e7e71e425298785ea9d22d4f958dbaccf8bb0e1b"
+  integrity sha512-YmMO7dph9CYKi5IR/BzjOJlRzpxGGVo1EsLSUZ0mt/Mq0HWZIHOKHHcHdT69yG54C9m6i45GpItwRHpk0Py7Uw==
+  dependencies:
+    detect-libc "^1.0.3"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp "^0.5.1"
+    napi-build-utils "^1.0.1"
+    node-abi "^2.7.0"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^3.0.3"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+    which-pm-runs "^1.0.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -8287,6 +8335,11 @@ semver@^7.1.2:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6"
   integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA==
 
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 serialize-error@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-5.0.0.tgz#a7ebbcdb03a5d71a6ed8461ffe0fc1a1afed62ac"
@@ -8324,6 +8377,21 @@ sharp@^0.23.4:
     tar "^5.0.5"
     tunnel-agent "^0.6.0"
 
+sharp@^0.25.4:
+  version "0.25.4"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.25.4.tgz#1a8e542144a07ab7e9316ab89de80182b827c363"
+  integrity sha512-umSzJJ1oBwIOfwFFt/fJ7JgCva9FvrEU2cbbm7u/3hSDZhXvkME8WE5qpaJqLIe2Har5msF5UG4CzYlEg5o3BQ==
+  dependencies:
+    color "^3.1.2"
+    detect-libc "^1.0.3"
+    node-addon-api "^3.0.0"
+    npmlog "^4.1.2"
+    prebuild-install "^5.3.4"
+    semver "^7.3.2"
+    simple-get "^4.0.0"
+    tar "^6.0.2"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -8375,6 +8443,15 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-get@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
+  integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -8904,6 +8981,18 @@ tar@^5.0.5:
     mkdirp "^0.5.0"
     yallist "^4.0.0"
 
+tar@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
+  integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.0"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"

From ec08084d81457a532d2545a47146f6cda4ca91a8 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Fri, 14 Aug 2020 21:01:32 +0500
Subject: [PATCH 36/66] added useMutabelCallbacks

---
 .../DownloadsComponents/DownloadItem.js       |  7 +++--
 src/components/DownloadsManagerView/index.js  | 30 +++++++++----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 809c54802b..7980ed4ece 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -90,14 +90,15 @@ export default function DownloadItem({
 		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
 	});
 
+
+	const handleDelete = useMutableCallback(() => props.clear(itemId));
+
 	const handleRetry = useMutableCallback(() => {
 		// Adding ServerTitle to Download URL for use in retrying the cancelled download
 		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
-		props.clear(itemId);
+		handleDelete();
 	});
 
-	const handleDelete = useMutableCallback(() => props.clear(itemId));
-
 	const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
 
 	// TODO TOAST
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index af3fd28884..d30bb2ea22 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,5 +1,5 @@
 import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
-import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
@@ -28,49 +28,49 @@ export function DownloadsManagerView() {
 	const [layout, setLayout] = useLocalStorage('download-layout', 'expanded');
 	let timeHeading;
 
-	const handleFileOpen = (path) => {
+	const handleFileOpen = useMutableCallback((path) => {
 		// console.log(path);
 		shell.showItemInFolder(path);
-	};
+	});
 
-	const handleTabChange = (event) => {
+	const handleTabChange = useMutableCallback((event) => {
 		// console.log(event.target.innerText);
 		if (tab !== event.target.innerText) {
 			setTab(event.target.innerText);
 		}
-	};
+	});
 
-	const handleLayout = () => {
+	const handleLayout = useMutableCallback(() => {
 		if (layout === 'compact') {
 			setLayout('expanded');
 		} else {
 			setLayout('compact');
 		}
-	};
+	});
 
-	const handleSearch = (event) => {
+	const handleSearch = useMutableCallback((event) => {
 		// console.log(Boolean(event.target.value));
 		if (event.target.value !== searchVal) {
 			setSearchVal(event.target.value);
 		}
-	};
+	});
 
-	const handleServerFilter = (index) => {
+	const handleServerFilter = useMutableCallback((index) => {
 		console.log(index);
 		if (options[index - 1][1] !== serverVal) {
 			setServerVal(options[index - 1][1]);
 		}
-	};
+	});
 
-	const handleMimeFilter = (index) => {
+	const handleMimeFilter = useMutableCallback((index) => {
 		console.log(index);
 		if (fileTypes[index - 1][1] !== typeVal) {
 			setTypeVal(fileTypes[index - 1][1]);
 		}
-	};
+	});
 
 
-	const updateDownloads = (data) => {
+	const updateDownloads = useMutableCallback((data) => {
 		console.log(data);
 		const updatedDownloads = downloads.map((downloadItem) => {
 			if (downloadItem.itemId === data.itemId) {
@@ -81,7 +81,7 @@ export function DownloadsManagerView() {
 			return downloadItem;
 		});
 		setDownloads(updatedDownloads);
-	};
+	});
 
 	// Modal Action
 

From bdf52b3a6ec381b5be8292e35855fbe81c195ff2 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 15 Aug 2020 21:27:54 +0500
Subject: [PATCH 37/66] fixed network speed estimate

---
 .../DownloadsComponents/DownloadItem.js       | 25 +++++++------
 .../DownloadsComponents/Extended.js           |  8 +++--
 src/components/DownloadsManagerView/index.js  | 24 ++++++-------
 src/main.js                                   | 35 ++++++++-----------
 4 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 7980ed4ece..448ee72d63 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -1,5 +1,5 @@
 import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
 
@@ -10,6 +10,7 @@ import Compact from './Compact';
 
 // Recieve props for individual download item
 export default function DownloadItem({
+	thumbnail,
 	url,
 	fileName,
 	totalBytes,
@@ -18,6 +19,7 @@ export default function DownloadItem({
 	updateDownloads,
 	date = new Date(itemId).toDateString(),
 	Mbps: mbps,
+	Kbps: kbps,
 	serverTitle,
 	fileSize = formatBytes(totalBytes, 2, true),
 	...props
@@ -28,7 +30,6 @@ export default function DownloadItem({
 	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
 	const [path, setPath] = useDebouncedState(props.path || '', 100);
 	const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
-	const [thumb, setThumb] = useState();
 
 	const completed = percentage === 100;
 	const paused = status === STATUS.PAUSED;
@@ -42,14 +43,11 @@ export default function DownloadItem({
 
 	const handleProgress = useMutableCallback((event, data) => {
 		console.log('Progress');
-		// console.log(` Current Bytes: ${ bytes }`);
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, path: data.savePath });
+		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, Kbps: data.Kbps });
 		setPercentage(percentage);
-		setPath(data.savePath);
 	});
 
-	// TODO: Convert to only recieve dynamic progressed bytes data. NEED TO THROTTLE
 	useEffect(() => {
 		// Listen on unique event only
 		ipcRenderer.on(`downloading-${ itemId }`, handleProgress);
@@ -65,16 +63,16 @@ export default function DownloadItem({
 			console.log('Download Complete');
 			console.log(data);
 			setStatus(STATUS.ALL);
-			setThumb(data.thumb);
-			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100 });
-			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumb: data.thumb });
+			setPath(data.Path);
+			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail });
+			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
 		};
 
 		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
 		return () => {
 			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
 		};
-	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setStatus, updateDownloads, url]);
+	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setStatus, updateDownloads, url]);
 
 	const handleCancel = useMutableCallback(() => {
 		setStatus(STATUS.CANCELLED);
@@ -104,7 +102,7 @@ export default function DownloadItem({
 	// TODO TOAST
 	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
 
-	const printState = () => console.log({ path, thumb });
+	// const printState = () => console.log({ path, thumbnail });
 
 	return props.layout === 'compact' ? <Compact
 		serverTitle={serverTitle}
@@ -124,19 +122,20 @@ export default function DownloadItem({
 		handleRetry={handleRetry}
 		handleDelete={handleDelete}
 		mb = {props.mb}/> : <Extended
-		thumbnail={thumb}
+		thumbnail={thumbnail}
 		serverTitle={serverTitle}
 		mime={ mime.split('/')[1] }
 		date={date}
 		fileName={fileName}
 		fileSize={fileSize}
 		mbps={mbps}
+		kbps= {kbps}
 		percentage={percentage}
 		isCompleted={completed}
 		isPaused={paused}
 		isCancelled={status === STATUS.CANCELLED}
 		handleFileOpen={handleFileOpen}
-		handleCopyLink={printState}
+		handleCopyLink={handleCopyLink}
 		handlePause={handlePause}
 		handleCancel={handleCancel}
 		handleRetry={handleRetry}
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index cd8fd94c7d..dafb4bdbdf 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -13,6 +13,7 @@ export default React.memo(function Extended({
 	fileName,
 	fileSize,
 	mbps,
+	kbps,
 	percentage,
 	isCompleted,
 	isPaused,
@@ -25,6 +26,7 @@ export default React.memo(function Extended({
 	handleDelete,
 	...props
 }) {
+	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
 	return <Box width='100%' display='flex' alignItems='center' { ...props }>
 		{/* USE AVATAR FUSELAGE (TODO) */ }
 
@@ -38,15 +40,15 @@ export default React.memo(function Extended({
 			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
 				<Info>{ serverTitle }</Info>
 				<Info> { date }</Info>
-				<Info>{ fileSize || '25MB' }</Info>
-				{ mbps > 0 && <Info>{ `${ mbps }Mbps/s` }</Info> }
+				<Info>{ fileSize }</Info>
+				{ isCompleted || <Info>{ speed }</Info> }
 				{/* ESTIMATED (TODO) */ }
 				{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
 			</Box>
 			<Box mb='x8'>
 				<Progress percent={ percentage } />
 			</Box>
-			{/* // TODO: Implement Show in Folder */ }
+
 			<ButtonGroup>
 				{/* Completed */ }
 				{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index d30bb2ea22..c17c311f21 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,4 +1,4 @@
-import { Box, Grid, SearchInput, Select, Icon, Button, Tabs, Tooltip } from '@rocket.chat/fuselage';
+import { Box, Grid, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
 import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 // import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
@@ -13,8 +13,8 @@ import WarningModal from '../DownloadsComponents/WarningModal';
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
-	const options = [[1, 'All']];
-	servers.map((server, index) => options.push([index + 2, server.title]));
+	const serverOptions = [[1, 'All']];
+	servers.map((server, index) => serverOptions.push([index + 2, server.title]));
 	const fileTypes = [[1, 'All'], [2, 'Images'], [3, 'Videos'], [4, 'Audios'], [5, 'Texts'], [6, 'Files']];
 
 	// Downloads Array
@@ -29,12 +29,10 @@ export function DownloadsManagerView() {
 	let timeHeading;
 
 	const handleFileOpen = useMutableCallback((path) => {
-		// console.log(path);
 		shell.showItemInFolder(path);
 	});
 
 	const handleTabChange = useMutableCallback((event) => {
-		// console.log(event.target.innerText);
 		if (tab !== event.target.innerText) {
 			setTab(event.target.innerText);
 		}
@@ -49,21 +47,18 @@ export function DownloadsManagerView() {
 	});
 
 	const handleSearch = useMutableCallback((event) => {
-		// console.log(Boolean(event.target.value));
 		if (event.target.value !== searchVal) {
 			setSearchVal(event.target.value);
 		}
 	});
 
 	const handleServerFilter = useMutableCallback((index) => {
-		console.log(index);
-		if (options[index - 1][1] !== serverVal) {
-			setServerVal(options[index - 1][1]);
+		if (serverOptions[index - 1][1] !== serverVal) {
+			setServerVal(serverOptions[index - 1][1]);
 		}
 	});
 
 	const handleMimeFilter = useMutableCallback((index) => {
-		console.log(index);
 		if (fileTypes[index - 1][1] !== typeVal) {
 			setTypeVal(fileTypes[index - 1][1]);
 		}
@@ -138,7 +133,7 @@ export function DownloadsManagerView() {
 	useEffect(() => {
 		const createDownload = (event, props) => {
 			console.log('Creating New Download');
-			console.log(props);
+			// console.log(props);
 			const updatedDownloads = [...downloads];
 			updatedDownloads.push(props);
 			setDownloads(updatedDownloads);
@@ -182,7 +177,7 @@ export function DownloadsManagerView() {
 						</Grid.Item>
 
 						<Grid.Item xl={ 3 } sm={ 2 } >
-							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ options } />
+							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
 
 						</Grid.Item>
 
@@ -213,12 +208,13 @@ export function DownloadsManagerView() {
 							if (!timeHeading) {
 								timeHeading = new Date(downloadItem.itemId).toDateString();
 							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />;
+								return <DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />;
 							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
+							// console.log(timeHeading);
 							return (
 								<>
-									<Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>
+									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>}
 									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
 								</>
 							);
diff --git a/src/main.js b/src/main.js
index d0c59c98ff..299ec9d639 100644
--- a/src/main.js
+++ b/src/main.js
@@ -123,7 +123,6 @@ const createMainWindow = () => {
 		await store.delete(`downloads.${ itemdId }`);
 	});
 
-
 	// Listen and save a single download being completed.
 	ipcMain.on('download-complete', async (event, downloadItem) => {
 		const downloads = await store.get('downloads', {});
@@ -131,22 +130,20 @@ const createMainWindow = () => {
 		// console.log(downloads);
 		store.set('downloads', downloads);
 	});
+
 	// Downloads handler. Handles all downloads from links.
 	mainWindow.webContents.session.on('will-download', async (event, item, webContents) => {
-		// item.pause();
-		// console.log({ event, item, webContents });
 		const mime = item.getMimeType();
-		let paused = false;
 		const itemId = Date.now();
 		const url = item.getURLChain()[0];
 		const serverTitle = url.split('#')[1];
-		console.log(url);
-		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
-		let startTime = new Date().getTime();
+		const startTime = new Date().getTime();
+		let paused = false;
 		let endTime;
-		let bytesRecieved;
+
+		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+
 		// Cancelled Download
-		console.log(item.getURLChain());
 		ipcMain.on(`cancel-${ itemId }`, () => item.cancel());
 
 		// Paused Download
@@ -167,25 +164,23 @@ const createMainWindow = () => {
 				} else {
 					endTime = new Date().getTime();
 					const duration = (endTime - startTime) / 1000;
-					const bps = (item.getReceivedBytes() - bytesRecieved) / duration;
-					const Mbps = (bps / 1048576).toFixed(2);
-					startTime = endTime;
-					bytesRecieved = item.getReceivedBytes();
+					const Bps = (item.getReceivedBytes() / duration).toFixed(2);
+					const Kbps = (Bps / 1024).toFixed(2);
+					const Mbps = (Kbps / 1024).toFixed(2);
 
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: bytesRecieved, savePath: item.getSavePath(), Mbps });
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps });
+					console.log(`Duration: ${ duration }`);
+					console.log(`Kbps: ${ Kbps }`);
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
 		});
 		item.once('done', async (event, state) => {
 			if (state === 'completed') {
-				const path = item.savePath;
-				const thumb = await sharp(path).resize(100, 100).png().toBuffer();
-				// console.log(item.savePath);
-				// console.log(thumb);
-				console.log(`data:image/png;base64,${ thumb.toString('base64') }`);
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumb: `data:image/png;base64,${ thumb.toString('base64') }` }); // Send to specific DownloadItem
+				const path = item.getSavePath();
+				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
 				console.log('Download successfully');
 			} else {
 				console.log(`Download failed: ${ state }`);

From de5d5d19ab37f5826c3ed284ad6301e788cd1abe Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 19 Aug 2020 18:37:22 +0500
Subject: [PATCH 38/66] added keyboard shortcut and window-menu option

---
 src/components/MenuBar/WindowMenu.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/MenuBar/WindowMenu.js b/src/components/MenuBar/WindowMenu.js
index 3090b30f99..b3325e3224 100644
--- a/src/components/MenuBar/WindowMenu.js
+++ b/src/components/MenuBar/WindowMenu.js
@@ -8,6 +8,7 @@ import {
 	MENU_BAR_ADD_NEW_SERVER_CLICKED,
 	MENU_BAR_SELECT_SERVER_CLICKED,
 	MENU_BAR_TOGGLE_IS_SHOW_WINDOW_ON_UNREAD_CHANGED_ENABLED_CLICKED,
+	SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
 } from '../../actions';
 
 export const WindowMenu = forwardRef(function WindowMenu(_, ref) {
@@ -38,6 +39,13 @@ export const WindowMenu = forwardRef(function WindowMenu(_, ref) {
 				/>)}
 				<MenuItem type='separator' />
 			</>}
+			<MenuItem
+				type='checkbox'
+				label={'Downloads Page'}
+				checked={currentServerUrl === 'Downloads'}
+				accelerator={'CommandOrControl+D'}
+				onClick={({ checked }) => dispatch({ type: SIDE_BAR_DOWNLOADS_BUTTON_CLICKED, payload: checked })}
+			/>
 			<MenuItem
 				type='checkbox'
 				label={t('menus.showOnUnreadMessage')}

From b1ee32a30690e99af07405a2a83f650f01248287 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Wed, 19 Aug 2020 23:08:11 +0500
Subject: [PATCH 39/66] event string and estimated time left

---
 .../DownloadsComponents/DownloadItem.js       | 24 +++++++++++--------
 .../DownloadsComponents/Extended.js           | 13 ++++++----
 .../DownloadsManagerView/downloadUtils.js     | 10 ++++++++
 src/components/DownloadsManagerView/index.js  | 12 +++++-----
 src/main.js                                   |  8 +++++--
 5 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 448ee72d63..12cdccc3a5 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
 
-import { formatBytes, STATUS } from '../DownloadsManagerView/downloadUtils';
+import { formatBytes, STATUS, DOWNLOAD_EVENT } from '../DownloadsManagerView/downloadUtils';
 import Extended from './Extended';
 import Compact from './Compact';
 
@@ -30,6 +30,8 @@ export default function DownloadItem({
 	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
 	const [path, setPath] = useDebouncedState(props.path || '', 100);
 	const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
+	const [timeLeft, setTimeLeft] = useDebouncedState(props.timeLeft || null, 100);
+
 
 	const completed = percentage === 100;
 	const paused = status === STATUS.PAUSED;
@@ -46,13 +48,14 @@ export default function DownloadItem({
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
 		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, Kbps: data.Kbps });
 		setPercentage(percentage);
+		setTimeLeft(data.timeLeft);
 	});
 
 	useEffect(() => {
 		// Listen on unique event only
-		ipcRenderer.on(`downloading-${ itemId }`, handleProgress);
+		ipcRenderer.on(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
 		return () => {
-			ipcRenderer.removeListener(`downloading-${ itemId }`, handleProgress);
+			ipcRenderer.removeListener(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
 		};
 	}, [handleProgress, itemId]);
 
@@ -63,28 +66,28 @@ export default function DownloadItem({
 			console.log('Download Complete');
 			console.log(data);
 			setStatus(STATUS.ALL);
-			setPath(data.Path);
+			setPath(data.path);
 			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail });
-			ipcRenderer.send('download-complete', { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
+			ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
 		};
 
-		ipcRenderer.on(`download-complete-${ itemId }`, downloadComplete);
+		ipcRenderer.on(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
 		return () => {
-			ipcRenderer.removeListener(`download-complete-${ itemId }`, downloadComplete);
+			ipcRenderer.removeListener(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
 		};
 	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setStatus, updateDownloads, url]);
 
 	const handleCancel = useMutableCallback(() => {
 		setStatus(STATUS.CANCELLED);
-		ipcRenderer.send(`cancel-${ itemId }`);
+		ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
 		updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
-		ipcRenderer.send('download-complete', { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+		ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE.concat(itemId), { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	});
 
 	const handlePause = useMutableCallback(() => {
 		console.log(percentage);
 		setStatus(STATUS.PAUSED);
-		ipcRenderer.send(`pause-${ itemId }`);
+		ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
 		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
 	});
 
@@ -130,6 +133,7 @@ export default function DownloadItem({
 		fileSize={fileSize}
 		mbps={mbps}
 		kbps= {kbps}
+		timeLeft={timeLeft}
 		percentage={percentage}
 		isCompleted={completed}
 		isPaused={paused}
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index dafb4bdbdf..56a41cad82 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -14,6 +14,7 @@ export default React.memo(function Extended({
 	fileSize,
 	mbps,
 	kbps,
+	timeLeft,
 	percentage,
 	isCompleted,
 	isPaused,
@@ -26,14 +27,16 @@ export default React.memo(function Extended({
 	handleDelete,
 	...props
 }) {
+	console.log(timeLeft);
 	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
 	return <Box width='100%' display='flex' alignItems='center' { ...props }>
 		{/* USE AVATAR FUSELAGE (TODO) */ }
 
-		{ thumbnail ? <Avatar url={ thumbnail } size='x124' /> : <Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-			<Icon size='x60' name='clip' />
-			<Box fontScale='s2' color='primary-500' display='block'>{ mime }</Box>
-		</Box> }
+		{ thumbnail ? <Avatar url={ thumbnail } size='x124' />
+			: <Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
+				<Icon size='x60' name='clip' />
+				<Box fontScale='s2' color='primary-500' display='block'>{ mime }</Box>
+			</Box> }
 
 		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
 			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
@@ -43,7 +46,7 @@ export default React.memo(function Extended({
 				<Info>{ fileSize }</Info>
 				{ isCompleted || <Info>{ speed }</Info> }
 				{/* ESTIMATED (TODO) */ }
-				{/* <Box fontSize='s2' color='info'>{ '60s Left' }</Box> */ }
+				{ timeLeft && <Info>{ timeLeft }s left</Info> }
 			</Box>
 			<Box mb='x8'>
 				<Progress percent={ percentage } />
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index 069bb132b6..662f686e70 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -37,6 +37,16 @@ export const mapping = {
 	audio: 'Audios',
 };
 
+export const DOWNLOAD_EVENT = {
+	PAUSE_ID: 'pause-',
+	CANCEL_ID: 'cancel-',
+	COMPLETE: 'download-complete',
+	COMPLETE_ID: 'download-complete-',
+	DOWNLOADING_ID: 'downloading-',
+	LOAD: 'load-downloads',
+	INITIALIZE: 'initialize-downloads',
+	CREATE: 'create-download-item',
+};
 
 export const STATUS = {
 	CANCELLED: 'Cancelled',
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index c17c311f21..1ab90fff0c 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -7,7 +7,7 @@ import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
-import { mapping, STATUS } from './downloadUtils';
+import { mapping, STATUS, DOWNLOAD_EVENT } from './downloadUtils';
 import WarningModal from '../DownloadsComponents/WarningModal';
 
 export function DownloadsManagerView() {
@@ -116,7 +116,7 @@ export function DownloadsManagerView() {
 
 	useEffect(() => {
 		console.log('Loading Downloads');
-		ipcRenderer.send('load-downloads');
+		ipcRenderer.send(DOWNLOAD_EVENT.LOAD);
 	}, []);
 
 	useEffect(() => {
@@ -124,9 +124,9 @@ export function DownloadsManagerView() {
 			setDownloads(Object.values(downloads));
 			console.log(Object.values(downloads));
 		};
-		ipcRenderer.on('initialize-downloads', intializeDownloads);
+		ipcRenderer.on(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
 		return () => {
-			ipcRenderer.removeListener('initialize-downloads', intializeDownloads);
+			ipcRenderer.removeListener(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
 		};
 	}, []);
 
@@ -138,9 +138,9 @@ export function DownloadsManagerView() {
 			updatedDownloads.push(props);
 			setDownloads(updatedDownloads);
 		};
-		ipcRenderer.on('create-download-item', createDownload);
+		ipcRenderer.on(DOWNLOAD_EVENT.CREATE, createDownload);
 		return () => {
-			ipcRenderer.removeListener('create-download-item', createDownload);
+			ipcRenderer.removeListener(DOWNLOAD_EVENT.CREATE, createDownload);
 		};
 	}, [downloads]);
 
diff --git a/src/main.js b/src/main.js
index 299ec9d639..8fd5d356f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -138,6 +138,7 @@ const createMainWindow = () => {
 		const url = item.getURLChain()[0];
 		const serverTitle = url.split('#')[1];
 		const startTime = new Date().getTime();
+		const totalBytes = item.getTotalBytes();
 		let paused = false;
 		let endTime;
 
@@ -167,11 +168,14 @@ const createMainWindow = () => {
 					const Bps = (item.getReceivedBytes() / duration).toFixed(2);
 					const Kbps = (Bps / 1024).toFixed(2);
 					const Mbps = (Kbps / 1024).toFixed(2);
+					const recievedBytes = item.getReceivedBytes();
+					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
 
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps });
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft });
+					console.log(`Time Left: ${ timeLeft }`);
 					console.log(`Duration: ${ duration }`);
-					console.log(`Kbps: ${ Kbps }`);
+					console.log(`Bps: ${ Bps }`);
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}

From 5974b825e081cef50b1f6bf86e7b80a32f9e44a0 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 20 Aug 2020 02:56:51 +0500
Subject: [PATCH 40/66] cancel from dialog box bug fix

---
 src/components/DownloadsComponents/Extended.js |  1 -
 src/components/DownloadsManagerView/index.js   | 13 +++++++++++++
 src/main.js                                    |  1 +
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index 56a41cad82..a12bc2986d 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -27,7 +27,6 @@ export default React.memo(function Extended({
 	handleDelete,
 	...props
 }) {
-	console.log(timeLeft);
 	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
 	return <Box width='100%' display='flex' alignItems='center' { ...props }>
 		{/* USE AVATAR FUSELAGE (TODO) */ }
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 1ab90fff0c..ca466b363b 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -97,6 +97,7 @@ export function DownloadsManagerView() {
 		/>);
 	}, [closeModal]);
 
+
 	const handleClear = useCallback((itemId) => {
 		const clear = () => {
 			closeModal();
@@ -144,6 +145,18 @@ export function DownloadsManagerView() {
 		};
 	}, [downloads]);
 
+	useEffect(() => {
+		const clear = (event, itemId) => {
+			console.log(itemId);
+			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+			setDownloads(newDownloads);
+		};
+		ipcRenderer.on('download-cancelled', clear);
+		return () => {
+			ipcRenderer.removeListener('download-cancelled', clear);
+		};
+	});
+
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
diff --git a/src/main.js b/src/main.js
index 8fd5d356f6..4d6ab87294 100644
--- a/src/main.js
+++ b/src/main.js
@@ -187,6 +187,7 @@ const createMainWindow = () => {
 				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
 				console.log('Download successfully');
 			} else {
+				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
 				console.log(`Download failed: ${ state }`);
 			}
 		});

From 5c677e01bc9a9343925de08d037bf0070db75775 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 20 Aug 2020 04:10:29 +0500
Subject: [PATCH 41/66] filename change bug fix

---
 .../DownloadsComponents/DownloadItem.js         |  2 +-
 src/components/DownloadsManagerView/index.js    |  1 +
 src/main.js                                     | 17 +++++++++++------
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 12cdccc3a5..9016a21fd9 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -46,7 +46,7 @@ export default function DownloadItem({
 	const handleProgress = useMutableCallback((event, data) => {
 		console.log('Progress');
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, Kbps: data.Kbps });
+		updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
 		setPercentage(percentage);
 		setTimeLeft(data.timeLeft);
 	});
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index ca466b363b..7b573ead23 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -4,6 +4,7 @@ import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
+import InfiniteScroll from 'react-infinite-scroller';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
diff --git a/src/main.js b/src/main.js
index 4d6ab87294..692912881b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@ import { app, BrowserWindow, ipcMain } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
-// import icon from './icons/icon.svg';
 import { setupErrorHandling } from './errorHandling';
 
 
@@ -170,12 +169,15 @@ const createMainWindow = () => {
 					const Mbps = (Kbps / 1024).toFixed(2);
 					const recievedBytes = item.getReceivedBytes();
 					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
+					const path = item.getSavePath();
+					const pathsArray = path.split('/');
+					const fileName = pathsArray[pathsArray.length - 1];
 
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft });
-					console.log(`Time Left: ${ timeLeft }`);
-					console.log(`Duration: ${ duration }`);
-					console.log(`Bps: ${ Bps }`);
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
+					// console.log(`Time Left: ${ timeLeft }`);
+					// console.log(`Duration: ${ duration }`);
+					// console.log(`Bps: ${ Bps }`);
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
@@ -183,9 +185,12 @@ const createMainWindow = () => {
 		item.once('done', async (event, state) => {
 			if (state === 'completed') {
 				const path = item.getSavePath();
+				const pathsArray = path.split('/');
+				const fileName = pathsArray[pathsArray.length - 1];
 				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
 				console.log('Download successfully');
+				console.log(fileName);
 			} else {
 				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
 				console.log(`Download failed: ${ state }`);

From 7e52f6e4285fc5c080fd8d1603e8f9a8ea638722 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 20 Aug 2020 04:14:20 +0500
Subject: [PATCH 42/66] unimported module removed

---
 .../DownloadsComponents/DownloadItem.js         |  2 +-
 src/main.js                                     | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 12cdccc3a5..9016a21fd9 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -46,7 +46,7 @@ export default function DownloadItem({
 	const handleProgress = useMutableCallback((event, data) => {
 		console.log('Progress');
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ status: STATUS.ALL, percentage, serverTitle, itemId, Mbps: data.Mbps, Kbps: data.Kbps });
+		updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
 		setPercentage(percentage);
 		setTimeLeft(data.timeLeft);
 	});
diff --git a/src/main.js b/src/main.js
index 4d6ab87294..692912881b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@ import { app, BrowserWindow, ipcMain } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
-// import icon from './icons/icon.svg';
 import { setupErrorHandling } from './errorHandling';
 
 
@@ -170,12 +169,15 @@ const createMainWindow = () => {
 					const Mbps = (Kbps / 1024).toFixed(2);
 					const recievedBytes = item.getReceivedBytes();
 					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
+					const path = item.getSavePath();
+					const pathsArray = path.split('/');
+					const fileName = pathsArray[pathsArray.length - 1];
 
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft });
-					console.log(`Time Left: ${ timeLeft }`);
-					console.log(`Duration: ${ duration }`);
-					console.log(`Bps: ${ Bps }`);
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
+					// console.log(`Time Left: ${ timeLeft }`);
+					// console.log(`Duration: ${ duration }`);
+					// console.log(`Bps: ${ Bps }`);
 					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
@@ -183,9 +185,12 @@ const createMainWindow = () => {
 		item.once('done', async (event, state) => {
 			if (state === 'completed') {
 				const path = item.getSavePath();
+				const pathsArray = path.split('/');
+				const fileName = pathsArray[pathsArray.length - 1];
 				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
 				console.log('Download successfully');
+				console.log(fileName);
 			} else {
 				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
 				console.log(`Download failed: ${ state }`);

From 63eee864751a12e8d63070a91e29d879a7a2d708 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 20 Aug 2020 04:20:32 +0500
Subject: [PATCH 43/66] code cleanup

---
 src/components/DownloadsComponents/DownloadItem.js   |  4 ----
 src/components/DownloadsManagerView/downloadUtils.js |  6 +++---
 src/components/DownloadsManagerView/index.js         |  7 -------
 src/main.js                                          | 11 -----------
 src/reducers/servers.js                              |  1 -
 5 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 9016a21fd9..034c985933 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -44,7 +44,6 @@ export default function DownloadItem({
 
 
 	const handleProgress = useMutableCallback((event, data) => {
-		console.log('Progress');
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
 		updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
 		setPercentage(percentage);
@@ -63,8 +62,6 @@ export default function DownloadItem({
 	// Download Completed, Send data back
 	useEffect(() => {
 		const downloadComplete = (event, data) => {
-			console.log('Download Complete');
-			console.log(data);
 			setStatus(STATUS.ALL);
 			setPath(data.path);
 			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail });
@@ -105,7 +102,6 @@ export default function DownloadItem({
 	// TODO TOAST
 	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
 
-	// const printState = () => console.log({ path, thumbnail });
 
 	return props.layout === 'compact' ? <Compact
 		serverTitle={serverTitle}
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index 662f686e70..bee9358ff6 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -4,11 +4,11 @@ import { Progress as SweetProgress } from 'react-sweet-progress';
 
 import 'react-sweet-progress/lib/style.css';
 
-export const Info = (props) => <Box fontSize='s1' color='info' {...props}/>;
+export const Info = (props) => <Box fontSize='s1' color='info' { ...props } />;
 
-export const ActionButton = (props) => <Button color='primary-500' small ghost {...props}/>;
+export const ActionButton = (props) => <Button color='primary-500' small ghost { ...props } />;
 
-export const Progress = ({ percent, ...props }) => <Box flexGrow={1} {...props}><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
+export const Progress = ({ percent, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
 
 
 // Utility function for bytes conversion. TODO: seperate into another file.
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 7b573ead23..5a1dbd3206 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -4,7 +4,6 @@ import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
-import InfiniteScroll from 'react-infinite-scroller';
 
 import { Wrapper } from './styles';
 import DownloadItem from '../DownloadsComponents/DownloadItem';
@@ -67,7 +66,6 @@ export function DownloadsManagerView() {
 
 
 	const updateDownloads = useMutableCallback((data) => {
-		console.log(data);
 		const updatedDownloads = downloads.map((downloadItem) => {
 			if (downloadItem.itemId === data.itemId) {
 				for (const key of Object.keys(data)) {
@@ -117,14 +115,12 @@ export function DownloadsManagerView() {
 	// 			USE EFFECTS
 
 	useEffect(() => {
-		console.log('Loading Downloads');
 		ipcRenderer.send(DOWNLOAD_EVENT.LOAD);
 	}, []);
 
 	useEffect(() => {
 		const intializeDownloads = (event, downloads) => {
 			setDownloads(Object.values(downloads));
-			console.log(Object.values(downloads));
 		};
 		ipcRenderer.on(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
 		return () => {
@@ -134,8 +130,6 @@ export function DownloadsManagerView() {
 
 	useEffect(() => {
 		const createDownload = (event, props) => {
-			console.log('Creating New Download');
-			// console.log(props);
 			const updatedDownloads = [...downloads];
 			updatedDownloads.push(props);
 			setDownloads(updatedDownloads);
@@ -148,7 +142,6 @@ export function DownloadsManagerView() {
 
 	useEffect(() => {
 		const clear = (event, itemId) => {
-			console.log(itemId);
 			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
 			setDownloads(newDownloads);
 		};
diff --git a/src/main.js b/src/main.js
index 692912881b..906dae6a0c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -105,20 +105,17 @@ const createMainWindow = () => {
 
 	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {
-		console.log('Loading Downloads');
 		const downloads = await store.get('downloads', {});
 		mainWindow.webContents.send('initialize-downloads', downloads);
 	});
 
 	ipcMain.on('reset', async () => {
-		console.log('Reset');
 		await store.clear();
 		const downloads = await store.get('downloads', {});
 		mainWindow.webContents.send('initialize-downloads', downloads);
 	});
 
 	ipcMain.on('remove', async (event, itemdId) => {
-		console.log(`Removing: ${ itemdId } `);
 		await store.delete(`downloads.${ itemdId }`);
 	});
 
@@ -126,7 +123,6 @@ const createMainWindow = () => {
 	ipcMain.on('download-complete', async (event, downloadItem) => {
 		const downloads = await store.get('downloads', {});
 		downloads[downloadItem.itemId] = downloadItem;
-		// console.log(downloads);
 		store.set('downloads', downloads);
 	});
 
@@ -175,10 +171,6 @@ const createMainWindow = () => {
 
 					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
 					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
-					// console.log(`Time Left: ${ timeLeft }`);
-					// console.log(`Duration: ${ duration }`);
-					// console.log(`Bps: ${ Bps }`);
-					console.log(`Received bytes: ${ item.getReceivedBytes() }`);
 				}
 			}
 		});
@@ -189,11 +181,8 @@ const createMainWindow = () => {
 				const fileName = pathsArray[pathsArray.length - 1];
 				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
 				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
-				console.log('Download successfully');
-				console.log(fileName);
 			} else {
 				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
-				console.log(`Download failed: ${ state }`);
 			}
 		});
 	});
diff --git a/src/reducers/servers.js b/src/reducers/servers.js
index 30e9489bbc..992850b632 100644
--- a/src/reducers/servers.js
+++ b/src/reducers/servers.js
@@ -75,7 +75,6 @@ export const servers = (state = [], { type, payload }) => {
 			const { id, serverUrl } = payload;
 			const index = state.findIndex(({ url }) => url === serverUrl);
 			state[index].webContentId = id;
-			console.log(state);
 			return state;
 		}
 	}

From 5b9a7b236af0b72102e24a54d8676d37afb5bb4c Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sat, 22 Aug 2020 23:08:32 +0500
Subject: [PATCH 44/66] progress bar changes color

---
 src/components/DownloadsComponents/Compact.js | 23 +++++++++++--------
 .../DownloadsComponents/DownloadItem.js       |  4 +++-
 .../DownloadsComponents/Extended.js           | 10 ++++----
 .../DownloadsManagerView/downloadUtils.js     |  4 ++--
 src/components/DownloadsManagerView/index.js  |  6 ++---
 src/main.js                                   | 10 +++++---
 6 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/DownloadsComponents/Compact.js b/src/components/DownloadsComponents/Compact.js
index 731bd104f5..c0c22097bd 100644
--- a/src/components/DownloadsComponents/Compact.js
+++ b/src/components/DownloadsComponents/Compact.js
@@ -6,10 +6,11 @@ import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUt
 export default React.memo(function Compact({
 	serverTitle,
 	mime,
-	date,
+	// date,
 	fileName,
 	fileSize,
 	mbps,
+	kbps,
 	percentage,
 	isCompleted,
 	isPaused,
@@ -22,27 +23,29 @@ export default React.memo(function Compact({
 	handleDelete,
 	...props
 }) {
+	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
+	const status = isCompleted ? 'Success' : props.status;
 	return <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' { ...props }>
 		<Box display='flex' flexGrow={ 1 } width='100%'>
-			<Box fontScale='p1' withTruncatedText flexGrow={ 1 }>{ fileName }</Box>
+			<Box fontScale='s2' withTruncatedText flexGrow={ 1 }>{ fileName }</Box>
 			<Box display='flex' justifyContent='space-between' alignItems='center'>
-				{/* <img src={ image } height='30px' width='30px' style={ { borderRadius: '5px' } } alt="" /> */ }
-				{/* TODO INSERT TITLES FOR EACH ACTION */ }
 				{/* Completed */ }
-				{ isCompleted && <ActionButton onClick={ handleFileOpen } title='open in folder'><Icon name='chevron-up' /></ActionButton> }
+				{ isCompleted && <ActionButton onClick={ handleFileOpen } title='Show in folder'><Icon name='chevron-up' /></ActionButton> }
 				{/* Progressing and Paused */ }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={ isPaused ? 'resume' : 'pause' }>{ isPaused ? <Icon name='play' /> : <Icon name='pause' /> }</ActionButton> }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='remove'><Icon name='cross' /></ActionButton> }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={ isPaused ? 'Resume' : 'Pause' }>{ isPaused ? <Icon name='play' /> : <Icon name='pause' /> }</ActionButton> }
+				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='Cancel'><Icon name='circle-cross' /></ActionButton> }
 				{/* Cancelled */ }
 				{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh' /></ActionButton> }
+				<ActionButton onClick={ handleDelete } title='Remove'><Icon name='cross' /></ActionButton>
+
 			</Box>
 		</Box>
 		<Box display='flex' flexGrow={ 1 } width='100%'>
 			<Info withTruncatedText>{ serverTitle }</Info>
 			<Info withTruncatedText mi='x8'>{ fileSize }</Info>
-			{ mbps && <Info mi='x8'>{ `${ mbps }Mbps/s` }</Info> }
-			<Progress percent={ percentage } mi='x8' />
-			<Info withTruncatedText mi='x8'>{ date }</Info>
+			{ isCompleted || <Info mi='x8'>{ speed }</Info> }
+			<Progress percent={ percentage } status={ status } mi='x8' />
+			{/* <Info withTruncatedText mi='x8'>{ date }</Info> */ }
 			{/* <Box display='flex' alignItems='center'>
 			<Icon name='kebab'/> */}
 			{/* </Box> */ }
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 034c985933..863ae647cc 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -24,7 +24,6 @@ export default function DownloadItem({
 	fileSize = formatBytes(totalBytes, 2, true),
 	...props
 }) {
-	// console.log(props);
 	const servers = useSelector(({ servers }) => servers);
 
 	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
@@ -107,9 +106,11 @@ export default function DownloadItem({
 		serverTitle={serverTitle}
 		mime={ mime.split('/')[1] }
 		date={date}
+		status={status}
 		fileName={fileName}
 		fileSize={fileSize}
 		mbps={mbps}
+		kbps= {kbps}
 		percentage={percentage}
 		isCompleted={completed}
 		isPaused={paused}
@@ -125,6 +126,7 @@ export default function DownloadItem({
 		serverTitle={serverTitle}
 		mime={ mime.split('/')[1] }
 		date={date}
+		status={status}
 		fileName={fileName}
 		fileSize={fileSize}
 		mbps={mbps}
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index a12bc2986d..f3c5f7bd3f 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -9,7 +9,7 @@ export default React.memo(function Extended({
 	thumbnail,
 	serverTitle,
 	mime,
-	date,
+	// date,
 	fileName,
 	fileSize,
 	mbps,
@@ -28,9 +28,8 @@ export default React.memo(function Extended({
 	...props
 }) {
 	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
+	const status = isCompleted ? 'Success' : props.status;
 	return <Box width='100%' display='flex' alignItems='center' { ...props }>
-		{/* USE AVATAR FUSELAGE (TODO) */ }
-
 		{ thumbnail ? <Avatar url={ thumbnail } size='x124' />
 			: <Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
 				<Icon size='x60' name='clip' />
@@ -41,14 +40,13 @@ export default React.memo(function Extended({
 			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
 			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
 				<Info>{ serverTitle }</Info>
-				<Info> { date }</Info>
+				{/* <Info> { date }</Info> */}
 				<Info>{ fileSize }</Info>
 				{ isCompleted || <Info>{ speed }</Info> }
-				{/* ESTIMATED (TODO) */ }
 				{ timeLeft && <Info>{ timeLeft }s left</Info> }
 			</Box>
 			<Box mb='x8'>
-				<Progress percent={ percentage } />
+				<Progress percent={ percentage } status = { status } />
 			</Box>
 
 			<ButtonGroup>
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index bee9358ff6..be457a5640 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -8,7 +8,7 @@ export const Info = (props) => <Box fontSize='s1' color='info' { ...props } />;
 
 export const ActionButton = (props) => <Button color='primary-500' small ghost { ...props } />;
 
-export const Progress = ({ percent, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ default: { color: '#2F80ED' } }), []) } percent={ percent } status='default' /> </Box>;
+export const Progress = ({ percent, status, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ All: { color: '#2F80ED' }, Cancelled: { color: 'red' }, Paused: { color: 'orange' }, Success: { color: 'green' } }), []) } percent={ percent } status = { status } /> </Box>;
 
 
 // Utility function for bytes conversion. TODO: seperate into another file.
@@ -51,5 +51,5 @@ export const DOWNLOAD_EVENT = {
 export const STATUS = {
 	CANCELLED: 'Cancelled',
 	PAUSED: 'Paused',
-	ALL: 'All Downloads',
+	ALL: 'All',
 };
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 5a1dbd3206..b3078dcfb1 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -154,7 +154,7 @@ export function DownloadsManagerView() {
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === 'All Downloads' || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === 'All' || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
 	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
 
@@ -172,7 +172,7 @@ export function DownloadsManagerView() {
 
 					<Grid.Item xl={ 12 }>
 						<Tabs>
-							<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All Downloads</Tabs.Item>
+							<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All</Tabs.Item>
 							<Tabs.Item selected={ tab === STATUS.PAUSED } onClick={ handleTabChange }>Paused</Tabs.Item>
 							<Tabs.Item selected={ tab === STATUS.CANCELLED } onClick={ handleTabChange }>Cancelled</Tabs.Item>
 						</Tabs>
@@ -195,7 +195,7 @@ export function DownloadsManagerView() {
 						<Grid.Item xl={ 1 } sm={ 1 } >
 							<Box width='100%' textAlign='end'>
 								<Button ghost onClick={ handleLayout }>
-									<Icon name='medium-view' size='x32' title='Change Downloads View' />
+									<Icon name={ layout === 'compact' ? 'extended-view' : 'condensed-view' } size='x32' title='Change Downloads View' />
 								</Button>
 							</Box>
 
diff --git a/src/main.js b/src/main.js
index 906dae6a0c..1f10dd7c6d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -136,11 +136,15 @@ const createMainWindow = () => {
 		const totalBytes = item.getTotalBytes();
 		let paused = false;
 		let endTime;
+		let isCancelledByDialog = true;
 
-		mainWindow.webContents.send('create-download-item', { status: 'All Downloads', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+		mainWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
 
 		// Cancelled Download
-		ipcMain.on(`cancel-${ itemId }`, () => item.cancel());
+		ipcMain.on(`cancel-${ itemId }`, () => {
+			isCancelledByDialog = false;
+			item.cancel();
+		});
 
 		// Paused Download
 		ipcMain.on(`pause-${ itemId }`, () => {
@@ -181,7 +185,7 @@ const createMainWindow = () => {
 				const fileName = pathsArray[pathsArray.length - 1];
 				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
 				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
-			} else {
+			} else if (isCancelledByDialog) {
 				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
 			}
 		});

From 4a52139681c1bbb652f1637d739b4aef21e7b416 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Mon, 24 Aug 2020 23:06:21 +0500
Subject: [PATCH 45/66] fixed speed showing while cancelled

---
 src/components/DownloadsComponents/Compact.js |  2 +-
 .../DownloadsComponents/DownloadItem.js       | 89 ++++++++++---------
 .../DownloadsComponents/Extended.js           |  4 +-
 src/components/DownloadsManagerView/index.js  |  7 +-
 4 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/components/DownloadsComponents/Compact.js b/src/components/DownloadsComponents/Compact.js
index c0c22097bd..b062895165 100644
--- a/src/components/DownloadsComponents/Compact.js
+++ b/src/components/DownloadsComponents/Compact.js
@@ -36,7 +36,7 @@ export default React.memo(function Compact({
 				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='Cancel'><Icon name='circle-cross' /></ActionButton> }
 				{/* Cancelled */ }
 				{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh' /></ActionButton> }
-				<ActionButton onClick={ handleDelete } title='Remove'><Icon name='cross' /></ActionButton>
+				<ActionButton onClick={ () => handleDelete(false) } title='Remove'><Icon name='cross' /></ActionButton>
 
 			</Box>
 		</Box>
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 863ae647cc..e195ebcdd5 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -61,8 +61,10 @@ export default function DownloadItem({
 	// Download Completed, Send data back
 	useEffect(() => {
 		const downloadComplete = (event, data) => {
+			console.log('Saved');
 			setStatus(STATUS.ALL);
 			setPath(data.path);
+			setTimeLeft(null);
 			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail });
 			ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
 		};
@@ -71,10 +73,11 @@ export default function DownloadItem({
 		return () => {
 			ipcRenderer.removeListener(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
 		};
-	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setStatus, updateDownloads, url]);
+	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setPercentage, setStatus, setTimeLeft, updateDownloads, url]);
 
 	const handleCancel = useMutableCallback(() => {
 		setStatus(STATUS.CANCELLED);
+		setTimeLeft(null);
 		ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
 		updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
 		ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE.concat(itemId), { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
@@ -88,12 +91,12 @@ export default function DownloadItem({
 	});
 
 
-	const handleDelete = useMutableCallback(() => props.clear(itemId));
+	const handleDelete = useMutableCallback((isRetry) => props.clear(itemId, isRetry));
 
 	const handleRetry = useMutableCallback(() => {
 		// Adding ServerTitle to Download URL for use in retrying the cancelled download
 		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
-		handleDelete();
+		handleDelete(true);
 	});
 
 	const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
@@ -103,45 +106,45 @@ export default function DownloadItem({
 
 
 	return props.layout === 'compact' ? <Compact
-		serverTitle={serverTitle}
+		serverTitle={ serverTitle }
 		mime={ mime.split('/')[1] }
-		date={date}
-		status={status}
-		fileName={fileName}
-		fileSize={fileSize}
-		mbps={mbps}
-		kbps= {kbps}
-		percentage={percentage}
-		isCompleted={completed}
-		isPaused={paused}
-		isCancelled={status === STATUS.CANCELLED}
-		handleFileOpen={handleFileOpen}
-		handleCopyLink={handleCopyLink}
-		handlePause={handlePause}
-		handleCancel={handleCancel}
-		handleRetry={handleRetry}
-		handleDelete={handleDelete}
-		mb = {props.mb}/> : <Extended
-		thumbnail={thumbnail}
-		serverTitle={serverTitle}
-		mime={ mime.split('/')[1] }
-		date={date}
-		status={status}
-		fileName={fileName}
-		fileSize={fileSize}
-		mbps={mbps}
-		kbps= {kbps}
-		timeLeft={timeLeft}
-		percentage={percentage}
-		isCompleted={completed}
-		isPaused={paused}
-		isCancelled={status === STATUS.CANCELLED}
-		handleFileOpen={handleFileOpen}
-		handleCopyLink={handleCopyLink}
-		handlePause={handlePause}
-		handleCancel={handleCancel}
-		handleRetry={handleRetry}
-		handleDelete={handleDelete}
-		mb = {props.mb}
-	/>;
+		date={ date }
+		status={ status }
+		fileName={ fileName }
+		fileSize={ fileSize }
+		mbps={ mbps }
+		kbps={ kbps }
+		percentage={ percentage }
+		isCompleted={ completed }
+		isPaused={ paused }
+		isCancelled={ status === STATUS.CANCELLED }
+		handleFileOpen={ handleFileOpen }
+		handleCopyLink={ handleCopyLink }
+		handlePause={ handlePause }
+		handleCancel={ handleCancel }
+		handleRetry={ handleRetry }
+		handleDelete={ handleDelete }
+		mb={ props.mb } /> : <Extended
+			thumbnail={ thumbnail }
+			serverTitle={ serverTitle }
+			mime={ mime.split('/')[1] }
+			date={ date }
+			status={ status }
+			fileName={ fileName }
+			fileSize={ fileSize }
+			mbps={ mbps }
+			kbps={ kbps }
+			timeLeft={ timeLeft }
+			percentage={ percentage }
+			isCompleted={ completed }
+			isPaused={ paused }
+			isCancelled={ status === STATUS.CANCELLED }
+			handleFileOpen={ handleFileOpen }
+			handleCopyLink={ handleCopyLink }
+			handlePause={ handlePause }
+			handleCancel={ handleCancel }
+			handleRetry={ handleRetry }
+			handleDelete={ handleDelete }
+			mb={ props.mb }
+		/>;
 }
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index f3c5f7bd3f..628751ca5d 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -42,7 +42,7 @@ export default React.memo(function Extended({
 				<Info>{ serverTitle }</Info>
 				{/* <Info> { date }</Info> */}
 				<Info>{ fileSize }</Info>
-				{ isCompleted || <Info>{ speed }</Info> }
+				{ isCompleted || isCancelled || <Info>{ speed }</Info> }
 				{ timeLeft && <Info>{ timeLeft }s left</Info> }
 			</Box>
 			<Box mb='x8'>
@@ -58,7 +58,7 @@ export default React.memo(function Extended({
 				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
 				{/* Cancelled */ }
 				{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-				<ActionButton onClick={ handleDelete }>Delete</ActionButton>
+				<ActionButton onClick={ () => handleDelete(false) }>Delete</ActionButton>
 			</ButtonGroup>
 		</Box>
 	</Box>;
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index b3078dcfb1..424e5bbe87 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -97,13 +97,18 @@ export function DownloadsManagerView() {
 	}, [closeModal]);
 
 
-	const handleClear = useCallback((itemId) => {
+	const handleClear = useCallback((itemId, isRetry) => {
 		const clear = () => {
 			closeModal();
 			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
 			setDownloads(newDownloads);
 			ipcRenderer.send('remove', itemId);
 		};
+		console.log(Boolean(isRetry));
+		if (isRetry) {
+			clear();
+			return;
+		}
 		setModal(<WarningModal
 			close={ closeModal }
 			confirm={ clear }

From eedded43f54dbcff716cdd3e5b8217ed42da9e55 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Thu, 27 Aug 2020 03:13:20 +0500
Subject: [PATCH 46/66] progress bar colors changed

---
 src/components/DownloadsComponents/Compact.js |  6 +--
 .../DownloadsComponents/DownloadItem.js       | 46 +++++++++----------
 .../DownloadsComponents/Extended.js           |  1 -
 .../DownloadsManagerView/downloadUtils.js     |  2 +-
 src/components/DownloadsManagerView/index.js  |  2 +-
 5 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/DownloadsComponents/Compact.js b/src/components/DownloadsComponents/Compact.js
index b062895165..687cd787e8 100644
--- a/src/components/DownloadsComponents/Compact.js
+++ b/src/components/DownloadsComponents/Compact.js
@@ -43,12 +43,8 @@ export default React.memo(function Compact({
 		<Box display='flex' flexGrow={ 1 } width='100%'>
 			<Info withTruncatedText>{ serverTitle }</Info>
 			<Info withTruncatedText mi='x8'>{ fileSize }</Info>
-			{ isCompleted || <Info mi='x8'>{ speed }</Info> }
+			{ isCompleted || isCancelled || <Info mi='x8'>{ speed }</Info> }
 			<Progress percent={ percentage } status={ status } mi='x8' />
-			{/* <Info withTruncatedText mi='x8'>{ date }</Info> */ }
-			{/* <Box display='flex' alignItems='center'>
-			<Icon name='kebab'/> */}
-			{/* </Box> */ }
 		</Box>
 	</Box>;
 });
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index e195ebcdd5..848c4d72ff 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -80,7 +80,7 @@ export default function DownloadItem({
 		setTimeLeft(null);
 		ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
 		updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
-		ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE.concat(itemId), { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+		ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
 	});
 
 	const handlePause = useMutableCallback(() => {
@@ -125,26 +125,26 @@ export default function DownloadItem({
 		handleRetry={ handleRetry }
 		handleDelete={ handleDelete }
 		mb={ props.mb } /> : <Extended
-			thumbnail={ thumbnail }
-			serverTitle={ serverTitle }
-			mime={ mime.split('/')[1] }
-			date={ date }
-			status={ status }
-			fileName={ fileName }
-			fileSize={ fileSize }
-			mbps={ mbps }
-			kbps={ kbps }
-			timeLeft={ timeLeft }
-			percentage={ percentage }
-			isCompleted={ completed }
-			isPaused={ paused }
-			isCancelled={ status === STATUS.CANCELLED }
-			handleFileOpen={ handleFileOpen }
-			handleCopyLink={ handleCopyLink }
-			handlePause={ handlePause }
-			handleCancel={ handleCancel }
-			handleRetry={ handleRetry }
-			handleDelete={ handleDelete }
-			mb={ props.mb }
-		/>;
+		thumbnail={ thumbnail }
+		serverTitle={ serverTitle }
+		mime={ mime.split('/')[1] }
+		date={ date }
+		status={ status }
+		fileName={ fileName }
+		fileSize={ fileSize }
+		mbps={ mbps }
+		kbps={ kbps }
+		timeLeft={ timeLeft }
+		percentage={ percentage }
+		isCompleted={ completed }
+		isPaused={ paused }
+		isCancelled={ status === STATUS.CANCELLED }
+		handleFileOpen={ handleFileOpen }
+		handleCopyLink={ handleCopyLink }
+		handlePause={ handlePause }
+		handleCancel={ handleCancel }
+		handleRetry={ handleRetry }
+		handleDelete={ handleDelete }
+		mb={ props.mb }
+	/>;
 }
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index 628751ca5d..0172cfc4a1 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -40,7 +40,6 @@ export default React.memo(function Extended({
 			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
 			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
 				<Info>{ serverTitle }</Info>
-				{/* <Info> { date }</Info> */}
 				<Info>{ fileSize }</Info>
 				{ isCompleted || isCancelled || <Info>{ speed }</Info> }
 				{ timeLeft && <Info>{ timeLeft }s left</Info> }
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index be457a5640..5c4828c3cd 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -8,7 +8,7 @@ export const Info = (props) => <Box fontSize='s1' color='info' { ...props } />;
 
 export const ActionButton = (props) => <Button color='primary-500' small ghost { ...props } />;
 
-export const Progress = ({ percent, status, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ All: { color: '#2F80ED' }, Cancelled: { color: 'red' }, Paused: { color: 'orange' }, Success: { color: 'green' } }), []) } percent={ percent } status = { status } /> </Box>;
+export const Progress = ({ percent, status, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ All: { color: '#2F80ED' }, Cancelled: { color: '#f5455c' }, Paused: { color: '#f3be08' }, Success: { color: '#19ac7c' } }), []) } percent={ percent } status = { status } /> </Box>;
 
 
 // Utility function for bytes conversion. TODO: seperate into another file.
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 424e5bbe87..55925d148d 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -159,7 +159,7 @@ export function DownloadsManagerView() {
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === 'All' || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
 	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
 

From 2a0755aabe7c0120fd4b1aa365619aa16d6a5d3f Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sun, 30 Aug 2020 20:52:03 +0500
Subject: [PATCH 47/66] changed delete button text

---
 src/components/DownloadsComponents/Extended.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index 0172cfc4a1..6210cb8cc7 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -57,7 +57,7 @@ export default React.memo(function Extended({
 				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
 				{/* Cancelled */ }
 				{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-				<ActionButton onClick={ () => handleDelete(false) }>Delete</ActionButton>
+				<ActionButton onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
 			</ButtonGroup>
 		</Box>
 	</Box>;

From 3c288aec026429865f481e10880c6a41b1ff4d2c Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sun, 30 Aug 2020 22:18:53 +0500
Subject: [PATCH 48/66] removed logs

---
 src/components/DownloadsComponents/DownloadItem.js |  3 ++-
 src/components/DownloadsManagerView/index.js       | 10 ++++------
 src/main.js                                        |  5 -----
 src/preload/links.js                               |  1 -
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 848c4d72ff..6cbe06faa5 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -45,6 +45,7 @@ export default function DownloadItem({
 	const handleProgress = useMutableCallback((event, data) => {
 		const percentage = Math.floor((data.bytes / totalBytes) * 100);
 		updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
+		setStatus(STATUS.ALL);
 		setPercentage(percentage);
 		setTimeLeft(data.timeLeft);
 	});
@@ -61,7 +62,6 @@ export default function DownloadItem({
 	// Download Completed, Send data back
 	useEffect(() => {
 		const downloadComplete = (event, data) => {
-			console.log('Saved');
 			setStatus(STATUS.ALL);
 			setPath(data.path);
 			setTimeLeft(null);
@@ -84,6 +84,7 @@ export default function DownloadItem({
 	});
 
 	const handlePause = useMutableCallback(() => {
+		console.log('paused');
 		console.log(percentage);
 		setStatus(STATUS.PAUSED);
 		ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 55925d148d..36b19688b3 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -104,7 +104,6 @@ export function DownloadsManagerView() {
 			setDownloads(newDownloads);
 			ipcRenderer.send('remove', itemId);
 		};
-		console.log(Boolean(isRetry));
 		if (isRetry) {
 			clear();
 			return;
@@ -223,12 +222,11 @@ export function DownloadsManagerView() {
 								return <DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />;
 							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
-							// console.log(timeHeading);
 							return (
-								<>
-									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>}
-									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
-								</>
+								<React.Fragment key={ downloadItem.itemId }>
+									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box> }
+									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads }  layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
+								</React.Fragment>
 							);
 						}) }
 					</Grid.Item>
diff --git a/src/main.js b/src/main.js
index 1f10dd7c6d..0fe3c2f333 100644
--- a/src/main.js
+++ b/src/main.js
@@ -89,7 +89,6 @@ const createMainWindow = () => {
 
 	mainWindow.addListener('close', async (e) => {
 		preventEvent(e);
-		console.log('closing');
 	});
 
 	mainWindow.webContents.addListener('will-attach-webview', (event, webPreferences) => {
@@ -99,10 +98,6 @@ const createMainWindow = () => {
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
 
-	// Logs and Helpers
-	console.log(store.get('downloads', {}));
-	// store.clear();
-
 	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
 	ipcMain.on('load-downloads', async () => {
 		const downloads = await store.get('downloads', {});
diff --git a/src/preload/links.js b/src/preload/links.js
index f1dd626a98..b28a7a0719 100644
--- a/src/preload/links.js
+++ b/src/preload/links.js
@@ -16,7 +16,6 @@ const handleAnchorClick = (event) => {
 	const canDownload = /^\/file-upload\//.test(href) || download;
 	if (canDownload) {
 		const downloadUrl = a.href;
-		console.log(downloadUrl);
 		remote.getCurrentWebContents().downloadURL(downloadUrl);
 		event.preventDefault();
 		return;

From 2077f6974a6dd4d134403784354d4493afb16750 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Sun, 30 Aug 2020 23:11:27 +0500
Subject: [PATCH 49/66] key prop warning

---
 src/components/DownloadsManagerView/index.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 36b19688b3..27b7c92bd0 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -104,6 +104,7 @@ export function DownloadsManagerView() {
 			setDownloads(newDownloads);
 			ipcRenderer.send('remove', itemId);
 		};
+
 		if (isRetry) {
 			clear();
 			return;
@@ -223,10 +224,10 @@ export function DownloadsManagerView() {
 							}
 							timeHeading = new Date(downloadItem.itemId).toDateString();
 							return (
-								<React.Fragment key={ downloadItem.itemId }>
-									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box> }
-									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads }  layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
-								</React.Fragment>
+								<>
+									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>}
+									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
+								</>
 							);
 						}) }
 					</Grid.Item>

From d3c0871247e714e9e0164ebb24420d322d8ff8e3 Mon Sep 17 00:00:00 2001
From: Taimur Azhar <taimurazhar1997@gmail.com>
Date: Mon, 31 Aug 2020 00:03:57 +0500
Subject: [PATCH 50/66] small fixes

---
 package.json                                         | 1 -
 src/components/DownloadsComponents/DownloadItem.js   | 2 +-
 src/components/DownloadsManagerView/downloadUtils.js | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0b7bec6d13..3b1c81f173 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/css-in-js": "^0.13.1",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/css-in-js": "^0.13.1",
 		"@rocket.chat/fuselage": "^0.13.2",
 		"@rocket.chat/fuselage-hooks": "^0.13.2",
 		"@rocket.chat/icons": "^0.13.1",
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index 6cbe06faa5..d8afeb340b 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -65,7 +65,7 @@ export default function DownloadItem({
 			setStatus(STATUS.ALL);
 			setPath(data.path);
 			setTimeLeft(null);
-			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail });
+			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail, path: data.path });
 			ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
 		};
 
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index 5c4828c3cd..720a154f44 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -35,6 +35,7 @@ export const mapping = {
 	image: 'Images',
 	video: 'Videos',
 	audio: 'Audios',
+	text: 'Texts',
 };
 
 export const DOWNLOAD_EVENT = {

From 92ef3957052f6ff8f7fde06c13da3f6976962a88 Mon Sep 17 00:00:00 2001
From: Martin <martin.schoeler@rocket.chat>
Date: Fri, 25 Sep 2020 19:16:20 -0300
Subject: [PATCH 51/66] New UI Design

---
 package.json                                  |   2 +-
 src/components/DownloadsComponents/Compact.js |  50 ------
 .../DownloadsComponents/DownloadItem.js       |  24 +--
 .../DownloadsComponents/Extended.js           |  61 ++++---
 .../DownloadsManagerView/downloadUtils.js     |   6 +-
 src/components/DownloadsManagerView/index.js  | 165 +++++++-----------
 src/components/DownloadsManagerView/styles.js |  19 +-
 src/components/Shell/styles.js                |   1 +
 src/public/images/file-icon.svg               |   7 +
 9 files changed, 127 insertions(+), 208 deletions(-)
 delete mode 100644 src/components/DownloadsComponents/Compact.js
 create mode 100644 src/public/images/file-icon.svg

diff --git a/package.json b/package.json
index 3b1c81f173..80d536698a 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "@fiahfy/icns-convert": "^0.0.8",
     "@rocket.chat/css-in-js": "^0.13.1",
     "@rocket.chat/eslint-config": "^0.4.0",
-		"@rocket.chat/fuselage": "^0.13.2",
+    "@rocket.chat/fuselage": "^0.6.3-dev.95",
 		"@rocket.chat/fuselage-hooks": "^0.13.2",
 		"@rocket.chat/icons": "^0.13.1",
     "babel-eslint": "^10.0.3",
diff --git a/src/components/DownloadsComponents/Compact.js b/src/components/DownloadsComponents/Compact.js
deleted file mode 100644
index 687cd787e8..0000000000
--- a/src/components/DownloadsComponents/Compact.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Box, Icon } from '@rocket.chat/fuselage';
-import React from 'react';
-
-import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
-
-export default React.memo(function Compact({
-	serverTitle,
-	mime,
-	// date,
-	fileName,
-	fileSize,
-	mbps,
-	kbps,
-	percentage,
-	isCompleted,
-	isPaused,
-	isCancelled,
-	handleFileOpen,
-	handleCopyLink,
-	handlePause,
-	handleCancel,
-	handleRetry,
-	handleDelete,
-	...props
-}) {
-	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
-	const status = isCompleted ? 'Success' : props.status;
-	return <Box width='100%' display='flex' justifyContent='center' flexDirection='column' alignItems='center' { ...props }>
-		<Box display='flex' flexGrow={ 1 } width='100%'>
-			<Box fontScale='s2' withTruncatedText flexGrow={ 1 }>{ fileName }</Box>
-			<Box display='flex' justifyContent='space-between' alignItems='center'>
-				{/* Completed */ }
-				{ isCompleted && <ActionButton onClick={ handleFileOpen } title='Show in folder'><Icon name='chevron-up' /></ActionButton> }
-				{/* Progressing and Paused */ }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause } title={ isPaused ? 'Resume' : 'Pause' }>{ isPaused ? <Icon name='play' /> : <Icon name='pause' /> }</ActionButton> }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel } title='Cancel'><Icon name='circle-cross' /></ActionButton> }
-				{/* Cancelled */ }
-				{ isCancelled && <ActionButton onClick={ handleRetry } title='Retry'><Icon name='refresh' /></ActionButton> }
-				<ActionButton onClick={ () => handleDelete(false) } title='Remove'><Icon name='cross' /></ActionButton>
-
-			</Box>
-		</Box>
-		<Box display='flex' flexGrow={ 1 } width='100%'>
-			<Info withTruncatedText>{ serverTitle }</Info>
-			<Info withTruncatedText mi='x8'>{ fileSize }</Info>
-			{ isCompleted || isCancelled || <Info mi='x8'>{ speed }</Info> }
-			<Progress percent={ percentage } status={ status } mi='x8' />
-		</Box>
-	</Box>;
-});
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsComponents/DownloadItem.js
index d8afeb340b..c67f9229a2 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsComponents/DownloadItem.js
@@ -5,7 +5,6 @@ import { ipcRenderer, remote, clipboard } from 'electron';
 
 import { formatBytes, STATUS, DOWNLOAD_EVENT } from '../DownloadsManagerView/downloadUtils';
 import Extended from './Extended';
-import Compact from './Compact';
 
 
 // Recieve props for individual download item
@@ -84,8 +83,6 @@ export default function DownloadItem({
 	});
 
 	const handlePause = useMutableCallback(() => {
-		console.log('paused');
-		console.log(percentage);
 		setStatus(STATUS.PAUSED);
 		ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
 		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
@@ -106,26 +103,7 @@ export default function DownloadItem({
 	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
 
 
-	return props.layout === 'compact' ? <Compact
-		serverTitle={ serverTitle }
-		mime={ mime.split('/')[1] }
-		date={ date }
-		status={ status }
-		fileName={ fileName }
-		fileSize={ fileSize }
-		mbps={ mbps }
-		kbps={ kbps }
-		percentage={ percentage }
-		isCompleted={ completed }
-		isPaused={ paused }
-		isCancelled={ status === STATUS.CANCELLED }
-		handleFileOpen={ handleFileOpen }
-		handleCopyLink={ handleCopyLink }
-		handlePause={ handlePause }
-		handleCancel={ handleCancel }
-		handleRetry={ handleRetry }
-		handleDelete={ handleDelete }
-		mb={ props.mb } /> : <Extended
+	return <Extended
 		thumbnail={ thumbnail }
 		serverTitle={ serverTitle }
 		mime={ mime.split('/')[1] }
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
index 6210cb8cc7..0762e63a51 100644
--- a/src/components/DownloadsComponents/Extended.js
+++ b/src/components/DownloadsComponents/Extended.js
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { Box, Icon, ButtonGroup, Avatar } from '@rocket.chat/fuselage';
+import { Box, Icon, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
 
 import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
 
@@ -29,36 +29,45 @@ export default React.memo(function Extended({
 }) {
 	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
 	const status = isCompleted ? 'Success' : props.status;
-	return <Box width='100%' display='flex' alignItems='center' { ...props }>
-		{ thumbnail ? <Avatar url={ thumbnail } size='x124' />
-			: <Box size='x124' flexShrink={ 0 } bg='neutral-500-50' borderRadius='4px' display='flex' flexDirection='column' alignItems='center' justifyContent='center'>
-				<Icon size='x60' name='clip' />
-				<Box fontScale='s2' color='primary-500' display='block'>{ mime }</Box>
-			</Box> }
+	return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' { ...props }>
 
-		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
-			<Box fontSize='s2' withTruncatedText color='default' pbe='x8'>{ fileName }</Box>
-			<Box display='flex' flexDirection='row' justifyContent='space-between' mb='x8'>
+		<Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
+			<Box display='flex' flexDirection='column' width='x36' height='x44'>
+				<Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
+				<Box fontSize='x12' fontWeight='600' textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime }</Box>
+			</Box>
+			<Box width='x144' mis='x8'>
+				<Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
 				<Info>{ serverTitle }</Info>
-				<Info>{ fileSize }</Info>
-				{ isCompleted || isCancelled || <Info>{ speed }</Info> }
-				{ timeLeft && <Info>{ timeLeft }s left</Info> }
 			</Box>
-			<Box mb='x8'>
-				<Progress percent={ percentage } status = { status } />
+		</Box>
+
+		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
+			
+			<Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
+				<Box display='flex' flexDirection='row' alignItems='center'>
+					<Info mie='x12'>{percentage}% of { fileSize }</Info>
+					{ isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
+					{ timeLeft && <Info>{ timeLeft }s left</Info> }
+				</Box>
+
+				<ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
+					{/* Completed */ }
+					{ isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+					{ isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+					{/* Progressing and Paused */ }
+					{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
+					{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
+					{/* Cancelled */ }
+					{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
+					<ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
+				</ButtonGroup>
+			</Box>
+			<Box mbe='x8'>
+				<ProgressBar percentage={ percentage } error = { isCancelled && 'Download Cancelled' } />
 			</Box>
 
-			<ButtonGroup>
-				{/* Completed */ }
-				{ isCompleted && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
-				{ isCompleted && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
-				{/* Progressing and Paused */ }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
-				{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
-				{/* Cancelled */ }
-				{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-				<ActionButton onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
-			</ButtonGroup>
+			
 		</Box>
 	</Box>;
 });
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index 720a154f44..90c069e653 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -1,12 +1,14 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 import { Progress as SweetProgress } from 'react-sweet-progress';
+import { ClickableLink } from './styles';
+
 
 import 'react-sweet-progress/lib/style.css';
 
-export const Info = (props) => <Box fontSize='s1' color='info' { ...props } />;
+export const Info = (props) => <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
 
-export const ActionButton = (props) => <Button color='primary-500' small ghost { ...props } />;
+export const ActionButton = (props) => <ClickableLink fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
 
 export const Progress = ({ percent, status, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ All: { color: '#2F80ED' }, Cancelled: { color: '#f5455c' }, Paused: { color: '#f3be08' }, Success: { color: '#19ac7c' } }), []) } percent={ percent } status = { status } /> </Box>;
 
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index 27b7c92bd0..f62ba4776b 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -1,6 +1,6 @@
-import { Box, Grid, SearchInput, Select, Icon, Button, Tabs } from '@rocket.chat/fuselage';
+import { Box, Grid, SearchInput, Select, Icon, Button, Pagination, Divider } from '@rocket.chat/fuselage';
 import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-// import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
@@ -13,9 +13,12 @@ import WarningModal from '../DownloadsComponents/WarningModal';
 export function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
-	const serverOptions = [[1, 'All']];
-	servers.map((server, index) => serverOptions.push([index + 2, server.title]));
-	const fileTypes = [[1, 'All'], [2, 'Images'], [3, 'Videos'], [4, 'Audios'], [5, 'Texts'], [6, 'Files']];
+	const serverOptions = [['all', 'All']];
+	servers.map((server) => serverOptions.push([server.title, server.title]));
+	const fileTypes = [['all', 'All'], ['images', 'Images'], ['videos', 'Videos'], ['audios', 'Audios'], ['text', 'Texts'], ['files', 'Files']];
+	const fileStatus = [[STATUS.ALL, 'All'], [STATUS.PAUSED, 'Paused'], [STATUS.CANCELLED, 'Cancelled']];
+	const { t } = useTranslation();
+
 
 	// Downloads Array
 	const [downloads, setDownloads] = useState([]);
@@ -25,43 +28,28 @@ export function DownloadsManagerView() {
 	const [searchVal, setSearchVal] = useState('');
 	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
 	const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
-	const [layout, setLayout] = useLocalStorage('download-layout', 'expanded');
-	let timeHeading;
+	const [currentPagination, setCurrentPagination] = useState(0);
+	const [itemsPerPage, setItemsPerPage] = useState(25);
 
 	const handleFileOpen = useMutableCallback((path) => {
 		shell.showItemInFolder(path);
 	});
 
 	const handleTabChange = useMutableCallback((event) => {
-		if (tab !== event.target.innerText) {
-			setTab(event.target.innerText);
-		}
-	});
-
-	const handleLayout = useMutableCallback(() => {
-		if (layout === 'compact') {
-			setLayout('expanded');
-		} else {
-			setLayout('compact');
-		}
+		setTab(event);
 	});
 
 	const handleSearch = useMutableCallback((event) => {
-		if (event.target.value !== searchVal) {
-			setSearchVal(event.target.value);
-		}
+		setSearchVal(event.target.value);
 	});
 
-	const handleServerFilter = useMutableCallback((index) => {
-		if (serverOptions[index - 1][1] !== serverVal) {
-			setServerVal(serverOptions[index - 1][1]);
-		}
+	const handleServerFilter = useMutableCallback((event) => {
+		setServerVal(event);
 	});
 
-	const handleMimeFilter = useMutableCallback((index) => {
-		if (fileTypes[index - 1][1] !== typeVal) {
-			setTypeVal(fileTypes[index - 1][1]);
-		}
+	const handleMimeFilter = useMutableCallback((event) => {
+		setTypeVal(event);
+
 	});
 
 
@@ -84,17 +72,11 @@ export function DownloadsManagerView() {
 	}, [setModal]);
 
 	const handleClearAll = useCallback(() => {
-		const clearAll = () => {
-			closeModal();
-			ipcRenderer.send('reset');
-		};
-		setModal(<WarningModal
-			close={ closeModal }
-			confirm={ clearAll }
-			text={ 'Remove All Downloads?' }
-			confirmText={ 'Yes' }
-		/>);
-	}, [closeModal]);
+		setSearchVal('');
+		setTypeVal('');
+		setServerVal('');
+		setTab('')
+	}, []);
 
 
 	const handleClear = useCallback((itemId, isRetry) => {
@@ -156,83 +138,66 @@ export function DownloadsManagerView() {
 		};
 	});
 
+	const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${current + 1} - ${ Math.min(current + itemsPerPage, count)} of ${count}`, []);
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'All' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'All' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
+		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
 	}, [searchVal, downloads, tab, serverVal, typeVal]);
 
-
 	return <>
 		<Wrapper isVisible={ isVisible }>
-			<Box p='x24'>
-
-				<Grid xl={ true } >
-					<Grid.Item xl={ 10 }>
-						<Box>
-							<Box fontSize='x32' lineHeight='2'>Downloads</Box>
-							<Box fontSize='x20' lineHeight='2' color='info'>See all your downloads here</Box>
-						</Box>
-					</Grid.Item>
-
-					<Grid.Item xl={ 12 }>
-						<Tabs>
-							<Tabs.Item selected={ tab === STATUS.ALL } onClick={ handleTabChange }>All</Tabs.Item>
-							<Tabs.Item selected={ tab === STATUS.PAUSED } onClick={ handleTabChange }>Paused</Tabs.Item>
-							<Tabs.Item selected={ tab === STATUS.CANCELLED } onClick={ handleTabChange }>Cancelled</Tabs.Item>
-						</Tabs>
-					</Grid.Item>
-
-					<Grid.Item xl={ 12 } style={ { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } }>
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<SearchInput width='150px' onChange={ handleSearch } placeholder='Search' addon={ <Icon name='send' size='x20' /> } />
-						</Grid.Item>
-
-						<Grid.Item xl={ 3 } sm={ 2 } >
-							<Select width='100%' onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
-
-						</Grid.Item>
-
-						<Grid.Item xl={ 2 } sm={ 2 } >
-							<Select width='100%' onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-						</Grid.Item>
-
-						<Grid.Item xl={ 1 } sm={ 1 } >
-							<Box width='100%' textAlign='end'>
-								<Button ghost onClick={ handleLayout }>
-									<Icon name={ layout === 'compact' ? 'extended-view' : 'condensed-view' } size='x32' title='Change Downloads View' />
-								</Button>
-							</Box>
-
-						</Grid.Item>
-
-						<Grid.Item xl={ 1 } sm={ 1 } className='tooltip' >
-							<Button ghost onClick={ handleClearAll }>
-								<Icon name='trash' size='x32' title='Remove All' />
-							</Button>
-						</Grid.Item>
-					</Grid.Item>
-
+			<Box
+			minHeight='x64'
+			paddingBlock='x16'
+			paddingInline='x162'
+			display='flex'
+			flexDirection='row'
+			flexWrap='nowrap'
+			alignItems='center'
+			color='neutral-800'
+			>
+				<Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
+			</Box>
+			<Divider></Divider>
+			<Box paddingInline='x162'>
+
+				<Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
+					<Box display='flex' mie='x8' width='35%' >
+						<SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
+					</Box>
+					<Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
+					<Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+					<Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
+					<Box display='flex'>
+						<Button small ghost onClick={ handleClearAll }>
+							<Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
+						</Button>
+					</Box>
+				</Box>
+				<Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
 						{/* Download Item List */ }
-						{ filteredDownloads.map((downloadItem) => {
+						{ filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) => {
 							// Condition for Data Headings
-							if (!timeHeading) {
-								timeHeading = new Date(downloadItem.itemId).toDateString();
-							} else if (timeHeading === new Date(downloadItem.itemId).toDateString()) {
-								return <DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />;
-							}
-							timeHeading = new Date(downloadItem.itemId).toDateString();
 							return (
 								<>
-									{ <Box fontSize='x16' color='info' alignSelf='start'>{ timeHeading }</Box>}
-									<DownloadItem mb='x16' { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } layout={ layout } handleFileOpen={ handleFileOpen } clear={ handleClear } />
+									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } clear={ handleClear } />
 								</>
 							);
 						}) }
 					</Grid.Item>
-
 				</Grid>
 			</Box>
+			<Pagination
+					divider
+					paddingInline='x162'
+					current={currentPagination}
+					itemsPerPage={itemsPerPage}
+					showingResultsLabel={showingResultsLabel}
+					count={(filteredDownloads && filteredDownloads.length) || 0}
+					onSetItemsPerPage={setItemsPerPage}
+					onSetCurrent={setCurrentPagination}
+				/>
 		</Wrapper>{ modal }</>;
 }
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index b7d77b8320..5697eff653 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -3,17 +3,15 @@ import styled from '@emotion/styled';
 
 
 export const Wrapper = styled.section`
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
 	background-color: white;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
 
 	overflow-y: auto;
 	// align-items: center;
 	// -webkit-app-region: drag;
-	justify-content: center;
+	justify-content: flex-start;
 
 	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
 `;
@@ -28,3 +26,12 @@ export const Content = styled.div`
 	justify-content: center;
 	// max-height: 100%;
 `;
+
+export const ClickableLink = styled.a`
+	cursor: pointer;
+
+	&:hover,
+	&:focus {
+		${ ({ isRemove }) => css`color: ${ !isRemove ? '#2F343D' : '#F5455C' };` };
+	}
+`;
\ No newline at end of file
diff --git a/src/components/Shell/styles.js b/src/components/Shell/styles.js
index ba4532b190..019001a4a7 100644
--- a/src/components/Shell/styles.js
+++ b/src/components/Shell/styles.js
@@ -49,4 +49,5 @@ export const ViewsWrapper = styled.div`
 	position: relative;
 	flex: 1 0 auto;
 	align-self: stretch;
+	max-width: 100%;
 `;
diff --git a/src/public/images/file-icon.svg b/src/public/images/file-icon.svg
new file mode 100644
index 0000000000..d2ed613295
--- /dev/null
+++ b/src/public/images/file-icon.svg
@@ -0,0 +1,7 @@
+<svg width="36" height="44" viewBox="0 0 36 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23858 0 0 2.23858 0 5V39C0 41.7614 2.23858 44 5 44H31C33.7614 44 36 41.7614 36 39V12L30 6L24 0H5Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23858 0 0 2.23858 0 5V39C0 41.7614 2.23858 44 5 44H31C33.7614 44 36 41.7614 36 39V12L30 6L24 0H5Z" fill="white"/>
+<path d="M36 12H38V11.1716L37.4142 10.5858L36 12ZM24 0L25.4142 -1.41421L24.8284 -2H24V0ZM2 5C2 3.34315 3.34315 2 5 2V-2C1.13401 -2 -2 1.13401 -2 5H2ZM2 39V5H-2V39H2ZM5 42C3.34315 42 2 40.6569 2 39H-2C-2 42.866 1.13401 46 5 46V42ZM31 42H5V46H31V42ZM34 39C34 40.6569 32.6569 42 31 42V46C34.866 46 38 42.866 38 39H34ZM34 12V39H38V12H34ZM37.4142 10.5858L31.4142 4.58579L28.5858 7.41421L34.5858 13.4142L37.4142 10.5858ZM31.4142 4.58579L25.4142 -1.41421L22.5858 1.41421L28.5858 7.41421L31.4142 4.58579ZM5 2H24V-2H5V2Z" fill="#CBCED1" mask="url(#path-1-inside-1)"/>
+</svg>

From c82122e8e247cd0789dcf3501e8a5893a86f681e Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 4 Nov 2020 02:02:32 -0300
Subject: [PATCH 52/66] Update Fuselage

---
 package.json                                  |  9 ++--
 src/components/AboutDialog/index.js           |  6 +--
 src/components/ScreenSharingDialog/index.js   |  2 +-
 .../SelectClientCertificateDialog/index.js    |  8 ++--
 src/components/ServersView/ServerPane.js      |  6 +--
 src/components/UpdateDialog/index.js          |  8 ++--
 yarn.lock                                     | 46 +++++++++----------
 7 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 80d536698a..2fd07b279b 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,10 @@
     "@bugsnag/js": "^6.3.2",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
-    "@rocket.chat/icons": "0.6.3-dev.57",
+    "@rocket.chat/css-in-js": "^0.17.2",
+    "@rocket.chat/fuselage": "^0.17.2",
+    "@rocket.chat/fuselage-hooks": "^0.17.2",
+    "@rocket.chat/icons": "^0.17.2",
     "debug": "^4.1.1",
     "dictionary-de": "^2.0.3",
     "dictionary-en-gb": "^2.2.1",
@@ -66,11 +69,7 @@
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.8.3",
     "@fiahfy/icns-convert": "^0.0.8",
-    "@rocket.chat/css-in-js": "^0.13.1",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rocket.chat/fuselage": "^0.6.3-dev.95",
-		"@rocket.chat/fuselage-hooks": "^0.13.2",
-		"@rocket.chat/icons": "^0.13.1",
     "babel-eslint": "^10.0.3",
     "builtin-modules": "^3.0.0",
     "chai": "^4.2.0",
diff --git a/src/components/AboutDialog/index.js b/src/components/AboutDialog/index.js
index 6f7a5f8d75..088f62b258 100644
--- a/src/components/AboutDialog/index.js
+++ b/src/components/AboutDialog/index.js
@@ -105,7 +105,7 @@ export function AboutDialog() {
 			<Flex.Item align='center'>
 				<Box>
 					<Trans i18nKey='dialog.about.version' version={version}>
-							Version: <Box is='span' textStyle='p2' style={{ userSelect: 'text' }}>{{ version }}</Box>
+							Version: <Box is='span' fontScale='p2' style={{ userSelect: 'text' }}>{{ version }}</Box>
 					</Trans>
 				</Box>
 			</Flex.Item>
@@ -128,7 +128,7 @@ export function AboutDialog() {
 						{checkingForUpdates && <Box>
 							<Margins block='x12'>
 								{checkingForUpdatesMessage
-									? <Box textStyle='c1' textColor='info'>{checkingForUpdatesMessage}</Box>
+									? <Box fontScale='c1' color='info'>{checkingForUpdatesMessage}</Box>
 									: <Throbber size='x16' />}
 							</Margins>
 						</Box>}
@@ -149,7 +149,7 @@ export function AboutDialog() {
 			</Flex.Container>}
 
 			<Flex.Item align='center'>
-				<Box textStyle='micro'>
+				<Box fontScale='micro'>
 					{t('dialog.about.copyright', { copyright })}
 				</Box>
 			</Flex.Item>
diff --git a/src/components/ScreenSharingDialog/index.js b/src/components/ScreenSharingDialog/index.js
index 2be82a3b7d..4a548a9078 100644
--- a/src/components/ScreenSharingDialog/index.js
+++ b/src/components/ScreenSharingDialog/index.js
@@ -43,7 +43,7 @@ export function ScreenSharingDialog() {
 
 	return <Dialog isVisible={isVisible} onClose={() => dispatch({ type: SCREEN_SHARING_DIALOG_SOURCE_SELECTED, payload: null })}>
 		<Flex.Item align='center'>
-			<Box textStyle='h1'>{t('dialog.screenshare.announcement')}</Box>
+			<Box fontScale='h1'>{t('dialog.screenshare.announcement')}</Box>
 		</Flex.Item>
 		<Flex.Container wrap='wrap' alignItems='stretch' justifyContent='center'>
 			<Box>
diff --git a/src/components/SelectClientCertificateDialog/index.js b/src/components/SelectClientCertificateDialog/index.js
index 33ef7fa3dd..673aeec7a1 100644
--- a/src/components/SelectClientCertificateDialog/index.js
+++ b/src/components/SelectClientCertificateDialog/index.js
@@ -42,7 +42,7 @@ export function SelectClientCertificateDialog() {
 	const { t } = useTranslation();
 
 	return <Dialog isVisible={isVisible} onClose={handleClose}>
-		<Box textStyle='h1'>{t('dialog.selectClientCertificate.announcement')}</Box>
+		<Box fontScale='h1'>{t('dialog.selectClientCertificate.announcement')}</Box>
 		<Margins inline='neg-x12'>
 			<Scrollable>
 				<Box>
@@ -53,13 +53,13 @@ export function SelectClientCertificateDialog() {
 									<Box>
 										<Margins inline='x8'>
 											<Box>
-												<Box textStyle='s1'>
+												<Box fontScale='s1'>
 													{certificate.subjectName}
 												</Box>
-												<Box textStyle='p2'>
+												<Box fontScale='p2'>
 													{certificate.issuerName}
 												</Box>
-												<Box textStyle='c1'>
+												<Box fontScale='c1'>
 													{t('dialog.selectClientCertificate.validDates', {
 														validStart: new Date(certificate.validStart * 1000),
 														validExpiry: new Date(certificate.validExpiry * 1000),
diff --git a/src/components/ServersView/ServerPane.js b/src/components/ServersView/ServerPane.js
index 477228c2ce..2a1e7e653e 100644
--- a/src/components/ServersView/ServerPane.js
+++ b/src/components/ServersView/ServerPane.js
@@ -127,17 +127,17 @@ export function ServerPane({
 		<ErrorPane isVisible={isFailed || isReloading}>
 			<FailureImage style={{ position: 'absolute', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 0 }} />
 			<Flex.Container direction='column' justifyContent='center' alignItems='center'>
-				<Box is='section' textColor='alternative' style={{ zIndex: 1 }}>
+				<Box is='section' color='alternative' style={{ zIndex: 1 }}>
 					<Flex.Item>
 						<Flex.Container direction='column'>
 							<Margins block='x12'>
 								<Box>
 									<Margins block='x8' inline='auto'>
-										<Box textStyle='h1'>
+										<Box fontScale='h1'>
 											{t('loadingError.announcement')}
 										</Box>
 
-										<Box textStyle='s1'>
+										<Box fontScale='s1'>
 											{t('loadingError.title')}
 										</Box>
 									</Margins>
diff --git a/src/components/UpdateDialog/index.js b/src/components/UpdateDialog/index.js
index 67f7cb12ee..5aadcbd606 100644
--- a/src/components/UpdateDialog/index.js
+++ b/src/components/UpdateDialog/index.js
@@ -61,7 +61,7 @@ export function UpdateDialog() {
 		<Flex.Container direction='column' alignItems='center'>
 			<Box>
 				<Margins block='x8'>
-					<Box textStyle='h1'>{t('dialog.update.announcement')}</Box>
+					<Box fontScale='h1'>{t('dialog.update.announcement')}</Box>
 					<Box>{t('dialog.update.message')}</Box>
 				</Margins>
 
@@ -70,16 +70,16 @@ export function UpdateDialog() {
 						<Box>
 							<Margins inline='x16'>
 								<Flex.Container direction='column' alignItems='center'>
-									<Box textColor='info'>
+									<Box color='info'>
 										<Box>{t('dialog.update.currentVersion')}</Box>
-										<Box textStyle='p2'>{currentVersion}</Box>
+										<Box fontScale='p2'>{currentVersion}</Box>
 									</Box>
 								</Flex.Container>
 								<Chevron right size='32' />
 								<Flex.Container direction='column' alignItems='center'>
 									<Box>
 										<Box>{t('dialog.update.newVersion')}</Box>
-										<Box textStyle='p2'>{newVersion}</Box>
+										<Box fontScale='p2'>{newVersion}</Box>
 									</Box>
 								</Flex.Container>
 							</Margins>
diff --git a/yarn.lock b/yarn.lock
index 476d9d3a07..75a5a4685c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1090,10 +1090,10 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
   integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
 
-"@rocket.chat/css-in-js@^0.13.1":
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.13.1.tgz#39c0cbf1cd8921d2046669f605033672c16a01d4"
-  integrity sha512-uNgsYE3ZV4Z+FGBsvnxDg763F5NdaUNnAxG58j3c304fY8j+camvly99WtR3onIqOGCi/ixhyYPbkFYF/3rvKw==
+"@rocket.chat/css-in-js@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.17.2.tgz#700decac1a7ed475f46b57e44f0671bc4ff7e86e"
+  integrity sha512-MfUhoj/nxzGX3wJnvuQoLgTb0ML8O+FFwOfc1OKKnCj1A4+zjsZn5rQls+xtI5k4R5dhSrnHioWK9bRDxKjUjw==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/stylis" "^0.8.5"
@@ -1105,33 +1105,33 @@
   dependencies:
     eslint-plugin-import "^2.17.2"
 
-"@rocket.chat/fuselage-hooks@^0.13.2":
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.13.2.tgz#269cbc4608c18bfee277e1b9fe765c9e46d2c910"
-  integrity sha512-vjPgbFuJOmIao8VDuWstDiT+/Z+fmPcoDWYcwRUWeAlSyb47bojwbihYn9AJDFMRgo8Hq3yFz3OigvKeqq1oSA==
+"@rocket.chat/fuselage-hooks@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-hooks/-/fuselage-hooks-0.17.2.tgz#27d95ab9a443de21b3b8fb9b07eebc397d872a35"
+  integrity sha512-p9LQezoHIRIgTBfX0jJEqMOc91aLqsIxjj367aFHfa30zB3B7eQr57M9WaZdkolSbqHb5GGDismInqA/9C61Dg==
   dependencies:
-    "@rocket.chat/fuselage-tokens" "^0.13.1"
+    "@rocket.chat/fuselage-tokens" "^0.17.2"
     use-subscription "^1.4.1"
 
-"@rocket.chat/fuselage-tokens@^0.13.1":
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.13.1.tgz#3d283d650d9330dd7187870f469f3a59b937865c"
-  integrity sha512-sPV3bWMNnJ44iZ1GJL/zVm/keCAEtUkSUqfrvgFS64OX9s9ChWPVDT9+u+VI1cbSMToThCC6ZrRSp9Ve+ATYhw==
+"@rocket.chat/fuselage-tokens@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.17.2.tgz#4cdf416ba9575d396fe140b8fff81d1b1efd4eae"
+  integrity sha512-Nw6CTu/7zJtAmuVtSY3BDNMIkN7lq0q39wW/aGkNreIdmU9DO+KcOYcbwVPrrmI5QTSFOFnu/mM5uo0Iih2v8w==
 
-"@rocket.chat/fuselage@^0.13.2":
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.13.2.tgz#65b7ad4dcdad03258780b13f664c6653dded2622"
-  integrity sha512-BGXYBEsjYGWSx8qx+6Ecr/dZZXEOA8AKkshyEcjP16Sd8h9Ux2Hivm+MIxNHPZv6+6fuZToq5K2megraCFrHcA==
+"@rocket.chat/fuselage@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/fuselage/-/fuselage-0.17.2.tgz#5841767ec00b203c6b279009aaca698bbb566aa3"
+  integrity sha512-wEAXpJ5uTEBYWka0pVvZ9cHTO29hdQBMpA9QyAvRdmp3K2wqQZEG2SQfwoYQnYYOwJyOm1NRBnrrbLamLGbuTg==
   dependencies:
-    "@rocket.chat/css-in-js" "^0.13.1"
-    "@rocket.chat/fuselage-tokens" "^0.13.1"
+    "@rocket.chat/css-in-js" "^0.17.2"
+    "@rocket.chat/fuselage-tokens" "^0.17.2"
     invariant "^2.2.4"
     react-keyed-flatten-children "^1.2.0"
 
-"@rocket.chat/icons@0.6.3-dev.57":
-  version "0.6.3-dev.57"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.6.3-dev.57.tgz#1268f616a6c17c5ad1876bdeec993a78a10fd3dc"
-  integrity sha512-Agxr3iD+0fYTCikFX/Cesco0CAdlTbl03Uso3aOVLJynndWuzZyuB5eo5X4S+rL0L/L+MvALOSSbI/b3w1VjiA==
+"@rocket.chat/icons@^0.17.2":
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/icons/-/icons-0.17.2.tgz#29b7c2537a810393d0425630414d179e893a50cf"
+  integrity sha512-2DjRTEQRpGn3eTS0lk2rrJrQCXO5mLTVouHrPWGD50dISJ/0AV/TVKKECLjyZybjx0PY9WvqIbuv2tx8sZQisA==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"

From 467bf35dcdb3520b25271410de0926a45c1d7fb6 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 4 Nov 2020 02:42:37 -0300
Subject: [PATCH 53/66] Undo some comments

---
 src/reducers/currentServerUrl.js | 1 -
 src/sagas/index.js               | 4 ++--
 src/sagas/servers.js             | 3 +--
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/reducers/currentServerUrl.js b/src/reducers/currentServerUrl.js
index 7ba64ce932..3d7fa62893 100644
--- a/src/reducers/currentServerUrl.js
+++ b/src/reducers/currentServerUrl.js
@@ -43,7 +43,6 @@ export const currentServerUrl = (state = null, { type, payload }) => {
 			return null;
 
 		case SIDE_BAR_DOWNLOADS_BUTTON_CLICKED:
-
 			return 'Downloads';
 
 		case WEBVIEW_FOCUS_REQUESTED: {
diff --git a/src/sagas/index.js b/src/sagas/index.js
index 58e8f05163..0777afb6bb 100644
--- a/src/sagas/index.js
+++ b/src/sagas/index.js
@@ -5,7 +5,7 @@ import { navigationEventsSaga } from './navigationEvents';
 import { preferencesSaga } from './preferences';
 import { serversSaga } from './servers';
 import { spellCheckingSaga } from './spellChecking';
-// import { updatesSaga } from './updates';
+import { updatesSaga } from './updates';
 
 export function *rootSaga() {
 	yield fork(deepLinksSaga);
@@ -13,5 +13,5 @@ export function *rootSaga() {
 	yield fork(preferencesSaga);
 	yield fork(serversSaga);
 	yield fork(spellCheckingSaga);
-	// yield fork(updatesSaga);
+	yield fork(updatesSaga);
 }
diff --git a/src/sagas/servers.js b/src/sagas/servers.js
index d1b98e76ec..1c7a73f269 100644
--- a/src/sagas/servers.js
+++ b/src/sagas/servers.js
@@ -128,8 +128,7 @@ function *loadCurrentServerUrl(servers) {
 	if (!servers.some(({ url }) => url === currentServerUrl)) {
 		currentServerUrl = null;
 	}
-	// // During testing
-	// return 'Downloads';
+
 	return currentServerUrl;
 }
 

From 462cc8bd3a5e0988035e3e6983608fdb14080056 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 4 Nov 2020 03:44:40 -0300
Subject: [PATCH 54/66] Rearrange components

---
 package.json                                  |    2 -
 rollup.config.js                              |    4 -
 .../DownloadsComponents/Extended.js           |   73 --
 .../DownloadsManagerView/ActionButton.js      |    7 +
 .../DownloadItem.js                           |   78 +-
 src/components/DownloadsManagerView/Info.js   |    6 +
 .../WarningModal.js                           |    0
 .../DownloadsManagerView/downloadUtils.js     |   15 -
 src/components/DownloadsManagerView/index.js  |   62 +-
 src/components/DownloadsManagerView/styles.js |    6 +-
 src/components/Shell/index.js                 |    2 +-
 yarn.lock                                     | 1057 +----------------
 12 files changed, 100 insertions(+), 1212 deletions(-)
 delete mode 100644 src/components/DownloadsComponents/Extended.js
 create mode 100644 src/components/DownloadsManagerView/ActionButton.js
 rename src/components/{DownloadsComponents => DownloadsManagerView}/DownloadItem.js (58%)
 create mode 100644 src/components/DownloadsManagerView/Info.js
 rename src/components/{DownloadsComponents => DownloadsManagerView}/WarningModal.js (100%)

diff --git a/package.json b/package.json
index 2fd07b279b..45128b87c4 100644
--- a/package.json
+++ b/package.json
@@ -90,14 +90,12 @@
     "gulp-cli": "^2.0.1",
     "gulp-execa": "^2.0.0",
     "mocha": "^7.0.1",
-    "react-sweet-progress": "^1.1.2",
     "rollup": "^1.1.0",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^3.1.2",
     "rollup-plugin-replace": "^2.1.0",
     "to-ico": "^1.1.5",
     "xvfb-maybe": "^0.2.1"
diff --git a/rollup.config.js b/rollup.config.js
index a888b29aec..085880c965 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,7 +6,6 @@ import copy from 'rollup-plugin-copy';
 import json from 'rollup-plugin-json';
 import nodeResolve from 'rollup-plugin-node-resolve';
 import replace from 'rollup-plugin-replace';
-import postcss from 'rollup-plugin-postcss';
 
 import appManifest from './package.json';
 
@@ -34,9 +33,6 @@ const bundleOptions = {
 		babel(),
 		nodeResolve(),
 		commonjs(),
-		postcss({
-			plugins: [],
-		}),
 	],
 };
 
diff --git a/src/components/DownloadsComponents/Extended.js b/src/components/DownloadsComponents/Extended.js
deleted file mode 100644
index 0762e63a51..0000000000
--- a/src/components/DownloadsComponents/Extended.js
+++ /dev/null
@@ -1,73 +0,0 @@
-
-import React from 'react';
-import { Box, Icon, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
-
-import { Info, Progress, ActionButton } from '../DownloadsManagerView/downloadUtils';
-
-
-export default React.memo(function Extended({
-	thumbnail,
-	serverTitle,
-	mime,
-	// date,
-	fileName,
-	fileSize,
-	mbps,
-	kbps,
-	timeLeft,
-	percentage,
-	isCompleted,
-	isPaused,
-	isCancelled,
-	handleFileOpen,
-	handleCopyLink,
-	handlePause,
-	handleCancel,
-	handleRetry,
-	handleDelete,
-	...props
-}) {
-	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
-	const status = isCompleted ? 'Success' : props.status;
-	return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' { ...props }>
-
-		<Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
-			<Box display='flex' flexDirection='column' width='x36' height='x44'>
-				<Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
-				<Box fontSize='x12' fontWeight='600' textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime }</Box>
-			</Box>
-			<Box width='x144' mis='x8'>
-				<Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
-				<Info>{ serverTitle }</Info>
-			</Box>
-		</Box>
-
-		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
-			
-			<Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
-				<Box display='flex' flexDirection='row' alignItems='center'>
-					<Info mie='x12'>{percentage}% of { fileSize }</Info>
-					{ isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
-					{ timeLeft && <Info>{ timeLeft }s left</Info> }
-				</Box>
-
-				<ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
-					{/* Completed */ }
-					{ isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
-					{ isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
-					{/* Progressing and Paused */ }
-					{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
-					{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
-					{/* Cancelled */ }
-					{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-					<ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
-				</ButtonGroup>
-			</Box>
-			<Box mbe='x8'>
-				<ProgressBar percentage={ percentage } error = { isCancelled && 'Download Cancelled' } />
-			</Box>
-
-			
-		</Box>
-	</Box>;
-});
diff --git a/src/components/DownloadsManagerView/ActionButton.js b/src/components/DownloadsManagerView/ActionButton.js
new file mode 100644
index 0000000000..37301c5e30
--- /dev/null
+++ b/src/components/DownloadsManagerView/ActionButton.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { ClickableLink } from './styles';
+
+const ActionButton = (props) => <ClickableLink fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
+
+export default ActionButton;
diff --git a/src/components/DownloadsComponents/DownloadItem.js b/src/components/DownloadsManagerView/DownloadItem.js
similarity index 58%
rename from src/components/DownloadsComponents/DownloadItem.js
rename to src/components/DownloadsManagerView/DownloadItem.js
index c67f9229a2..18e1d21d0a 100644
--- a/src/components/DownloadsComponents/DownloadItem.js
+++ b/src/components/DownloadsManagerView/DownloadItem.js
@@ -1,14 +1,14 @@
+import { Box, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
 import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { ipcRenderer, remote, clipboard } from 'electron';
 
-import { formatBytes, STATUS, DOWNLOAD_EVENT } from '../DownloadsManagerView/downloadUtils';
-import Extended from './Extended';
+import { formatBytes, STATUS, DOWNLOAD_EVENT } from './downloadUtils';
+import Info from './Info';
+import ActionButton from './ActionButton';
 
-
-// Recieve props for individual download item
-export default function DownloadItem({
+function DownloadItem({
 	thumbnail,
 	url,
 	fileName,
@@ -88,7 +88,6 @@ export default function DownloadItem({
 		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
 	});
 
-
 	const handleDelete = useMutableCallback((isRetry) => props.clear(itemId, isRetry));
 
 	const handleRetry = useMutableCallback(() => {
@@ -102,28 +101,47 @@ export default function DownloadItem({
 	// TODO TOAST
 	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
 
-
-	return <Extended
-		thumbnail={ thumbnail }
-		serverTitle={ serverTitle }
-		mime={ mime.split('/')[1] }
-		date={ date }
-		status={ status }
-		fileName={ fileName }
-		fileSize={ fileSize }
-		mbps={ mbps }
-		kbps={ kbps }
-		timeLeft={ timeLeft }
-		percentage={ percentage }
-		isCompleted={ completed }
-		isPaused={ paused }
-		isCancelled={ status === STATUS.CANCELLED }
-		handleFileOpen={ handleFileOpen }
-		handleCopyLink={ handleCopyLink }
-		handlePause={ handlePause }
-		handleCancel={ handleCancel }
-		handleRetry={ handleRetry }
-		handleDelete={ handleDelete }
-		mb={ props.mb }
-	/>;
+	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
+	const isCompleted = completed;
+	const isCancelled = status === STATUS.CANCELLED;
+	const isPaused = paused;
+
+	return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' mb={props.mb}>
+		<Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
+			<Box display='flex' flexDirection='column' width='x36' height='x44'>
+				<Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
+				<Box fontSize='x12' fontWeight='600' textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime.split('/')[1] }</Box>
+			</Box>
+			<Box width='x144' mis='x8'>
+				<Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
+				<Info>{ serverTitle }</Info>
+			</Box>
+		</Box>
+
+		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
+			<Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
+				<Box display='flex' flexDirection='row' alignItems='center'>
+					<Info mie='x12'>{percentage}% of { fileSize }</Info>
+					{ isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
+					{ timeLeft && <Info>{ timeLeft }s left</Info> }
+				</Box>
+				<ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
+					{/* Completed */ }
+					{ isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+					{ isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+					{/* Progressing and Paused */ }
+					{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
+					{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
+					{/* Cancelled */ }
+					{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
+					<ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
+				</ButtonGroup>
+			</Box>
+			<Box mbe='x8'>
+				<ProgressBar percentage={ percentage } error = { isCancelled ? 'Download Cancelled' : undefined } />
+			</Box>
+		</Box>
+	</Box>;
 }
+
+export default DownloadItem;
diff --git a/src/components/DownloadsManagerView/Info.js b/src/components/DownloadsManagerView/Info.js
new file mode 100644
index 0000000000..86b8997d5d
--- /dev/null
+++ b/src/components/DownloadsManagerView/Info.js
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+const Info = (props) => <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
+
+export default Info;
diff --git a/src/components/DownloadsComponents/WarningModal.js b/src/components/DownloadsManagerView/WarningModal.js
similarity index 100%
rename from src/components/DownloadsComponents/WarningModal.js
rename to src/components/DownloadsManagerView/WarningModal.js
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
index 90c069e653..07d9720044 100644
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ b/src/components/DownloadsManagerView/downloadUtils.js
@@ -1,18 +1,3 @@
-import { Box, Button } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
-import { Progress as SweetProgress } from 'react-sweet-progress';
-import { ClickableLink } from './styles';
-
-
-import 'react-sweet-progress/lib/style.css';
-
-export const Info = (props) => <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
-
-export const ActionButton = (props) => <ClickableLink fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
-
-export const Progress = ({ percent, status, ...props }) => <Box flexGrow={ 1 } { ...props }><SweetProgress theme={ useMemo(() => ({ All: { color: '#2F80ED' }, Cancelled: { color: '#f5455c' }, Paused: { color: '#f3be08' }, Success: { color: '#19ac7c' } }), []) } percent={ percent } status = { status } /> </Box>;
-
-
 // Utility function for bytes conversion. TODO: seperate into another file.
 export function formatBytes(bytes, decimals = 2, size = false) {
 	if (bytes === 0) {
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
index f62ba4776b..6a051fd35b 100644
--- a/src/components/DownloadsManagerView/index.js
+++ b/src/components/DownloadsManagerView/index.js
@@ -6,11 +6,11 @@ import { useSelector } from 'react-redux';
 import { ipcRenderer, shell } from 'electron';
 
 import { Wrapper } from './styles';
-import DownloadItem from '../DownloadsComponents/DownloadItem';
+import DownloadItem from './DownloadItem';
 import { mapping, STATUS, DOWNLOAD_EVENT } from './downloadUtils';
-import WarningModal from '../DownloadsComponents/WarningModal';
+import WarningModal from './WarningModal';
 
-export function DownloadsManagerView() {
+function DownloadsManagerView() {
 	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
 	const servers = useSelector(({ servers }) => servers);
 	const serverOptions = [['all', 'All']];
@@ -49,10 +49,8 @@ export function DownloadsManagerView() {
 
 	const handleMimeFilter = useMutableCallback((event) => {
 		setTypeVal(event);
-
 	});
 
-
 	const updateDownloads = useMutableCallback((data) => {
 		const updatedDownloads = downloads.map((downloadItem) => {
 			if (downloadItem.itemId === data.itemId) {
@@ -75,8 +73,8 @@ export function DownloadsManagerView() {
 		setSearchVal('');
 		setTypeVal('');
 		setServerVal('');
-		setTab('')
-	}, []);
+		setTab('');
+	}, [setServerVal, setTab, setTypeVal]);
 
 
 	const handleClear = useCallback((itemId, isRetry) => {
@@ -138,7 +136,7 @@ export function DownloadsManagerView() {
 		};
 	});
 
-	const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${current + 1} - ${ Math.min(current + itemsPerPage, count)} of ${count}`, []);
+	const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${ current + 1 } - ${ Math.min(current + itemsPerPage, count) } of ${ count }`, []);
 
 	const filteredDownloads = useMemo(() => {
 		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
@@ -148,14 +146,14 @@ export function DownloadsManagerView() {
 	return <>
 		<Wrapper isVisible={ isVisible }>
 			<Box
-			minHeight='x64'
-			paddingBlock='x16'
-			paddingInline='x162'
-			display='flex'
-			flexDirection='row'
-			flexWrap='nowrap'
-			alignItems='center'
-			color='neutral-800'
+				minHeight='x64'
+				paddingBlock='x16'
+				paddingInline='x162'
+				display='flex'
+				flexDirection='row'
+				flexWrap='nowrap'
+				alignItems='center'
+				color='neutral-800'
 			>
 				<Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
 			</Box>
@@ -177,27 +175,23 @@ export function DownloadsManagerView() {
 				</Box>
 				<Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
 					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{/* Download Item List */ }
-						{ filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) => {
-							// Condition for Data Headings
-							return (
-								<>
-									<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } clear={ handleClear } />
-								</>
-							);
-						}) }
+						{ filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
+							<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } clear={ handleClear } />,
+						) }
 					</Grid.Item>
 				</Grid>
 			</Box>
 			<Pagination
-					divider
-					paddingInline='x162'
-					current={currentPagination}
-					itemsPerPage={itemsPerPage}
-					showingResultsLabel={showingResultsLabel}
-					count={(filteredDownloads && filteredDownloads.length) || 0}
-					onSetItemsPerPage={setItemsPerPage}
-					onSetCurrent={setCurrentPagination}
-				/>
+				divider
+				paddingInline='x162'
+				current={currentPagination}
+				itemsPerPage={itemsPerPage}
+				showingResultsLabel={showingResultsLabel}
+				count={(filteredDownloads && filteredDownloads.length) || 0}
+				onSetItemsPerPage={setItemsPerPage}
+				onSetCurrent={setCurrentPagination}
+			/>
 		</Wrapper>{ modal }</>;
 }
+
+export default DownloadsManagerView;
diff --git a/src/components/DownloadsManagerView/styles.js b/src/components/DownloadsManagerView/styles.js
index 5697eff653..49ae04093d 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/components/DownloadsManagerView/styles.js
@@ -9,8 +9,6 @@ export const Wrapper = styled.section`
 	flex-direction: column;
 
 	overflow-y: auto;
-	// align-items: center;
-	// -webkit-app-region: drag;
 	justify-content: flex-start;
 
 	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
@@ -20,11 +18,9 @@ export const Content = styled.div`
 	position: relative;
 	top: 10%;
 	width: 100%;
-	// height: 100%;
 	max-width: 100%;
 	display: flex;
 	justify-content: center;
-	// max-height: 100%;
 `;
 
 export const ClickableLink = styled.a`
@@ -34,4 +30,4 @@ export const ClickableLink = styled.a`
 	&:focus {
 		${ ({ isRemove }) => css`color: ${ !isRemove ? '#2F343D' : '#F5455C' };` };
 	}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/Shell/index.js b/src/components/Shell/index.js
index 1f06720410..d9a1853e36 100644
--- a/src/components/Shell/index.js
+++ b/src/components/Shell/index.js
@@ -6,7 +6,7 @@ import { GlobalStyles, Wrapper, WindowDragBar, ViewsWrapper } from './styles';
 import { SideBar } from '../SideBar';
 import { ServersView } from '../ServersView';
 import { AddServerView } from '../AddServerView';
-import { DownloadsManagerView } from '../DownloadsManagerView';
+import DownloadsManagerView from '../DownloadsManagerView';
 import { AboutDialog } from '../AboutDialog';
 import { ScreenSharingDialog } from '../ScreenSharingDialog';
 import { SelectClientCertificateDialog } from '../SelectClientCertificateDialog';
diff --git a/yarn.lock b/yarn.lock
index 75a5a4685c..0cec7d6c3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1236,11 +1236,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/q@^1.5.1":
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
-  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
-
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1325,11 +1320,6 @@ ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -1388,11 +1378,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1795,11 +1780,6 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 bignumber.js@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-2.4.0.tgz#838a992da9f9d737e0f4b2db0be62bb09dd0c5e8"
@@ -1844,11 +1824,6 @@ bmp-js@0.0.3:
   resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.0.3.tgz#64113e9c7cf1202b376ed607bf30626ebe57b18a"
   integrity sha1-ZBE+nHzxICs3btYHvzBibr5XsYo=
 
-boolbase@^1.0.0, boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
-
 boolean@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/boolean/-/boolean-3.0.1.tgz#35ecf2b4a2ee191b0b44986f14eb5f052a5cbb4f"
@@ -1904,16 +1879,6 @@ browser-stdout@1.3.1:
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
-browserslist@^4.0.0:
-  version "4.12.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
-  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
-  dependencies:
-    caniuse-lite "^1.0.30001043"
-    electron-to-chromium "^1.3.413"
-    node-releases "^1.1.53"
-    pkg-up "^2.0.0"
-
 browserslist@^4.8.3, browserslist@^4.8.5:
   version "4.8.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
@@ -2049,25 +2014,6 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -2119,21 +2065,6 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043:
-  version "1.0.30001079"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001079.tgz#ed3e5225cd9a6850984fdd88bf24ce45d69b9c22"
-  integrity sha512-2KaYheg0iOY+CMmDuAB3DHehrXhhb4OZU4KBVGDr/YKyYAcpudaiUQ9PJ9rxrPlKEoJ3ATasQ5AN48MqpwS43Q==
-
 caniuse-lite@^1.0.30001023:
   version "1.0.30001027"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001027.tgz#283e2ef17d94889cc216a22c6f85303d78ca852d"
@@ -2161,17 +2092,6 @@ chai@^4.2.0:
     pathval "^1.1.0"
     type-detect "^4.0.5"
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2189,14 +2109,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.0.0.tgz#6e98081ed2d17faab615eb52ac66ec1fe6209e72"
-  integrity sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2271,11 +2183,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
-
 cli-boxes@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
@@ -2351,15 +2258,6 @@ cloneable-readable@^1.0.0:
     process-nextick-args "^2.0.0"
     readable-stream "^2.3.5"
 
-coa@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
-  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
-  dependencies:
-    "@types/q" "^1.5.1"
-    chalk "^2.4.1"
-    q "^1.1.2"
-
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -2419,7 +2317,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-color@^3.0.0, color@^3.1.2:
+color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
   integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
@@ -2472,13 +2370,6 @@ concat-stream@1.6.2, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-concat-with-sourcemaps@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e"
-  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
-  dependencies:
-    source-map "^0.6.1"
-
 conf@^6.2.1:
   version "6.2.4"
   resolved "https://registry.yarnpkg.com/conf/-/conf-6.2.4.tgz#49d23c4e21ef2ac2860f7b5ed25b7b7e484f769f"
@@ -2743,16 +2634,6 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -2789,156 +2670,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
-css-modules-loader-core@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
-  integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
-  dependencies:
-    icss-replace-symbols "1.1.0"
-    postcss "6.0.1"
-    postcss-modules-extract-imports "1.1.0"
-    postcss-modules-local-by-default "1.2.0"
-    postcss-modules-scope "1.1.0"
-    postcss-modules-values "1.3.0"
-
-css-select-base-adapter@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
-  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
-
-css-select@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
-  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^3.2.1"
-    domutils "^1.7.0"
-    nth-check "^1.0.2"
-
-css-selector-tokenizer@^0.7.0:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz#11e5e27c9a48d90284f22d45061c303d7a25ad87"
-  integrity sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==
-  dependencies:
-    cssesc "^3.0.0"
-    fastparse "^1.1.2"
-    regexpu-core "^4.6.0"
-
-css-tree@1.0.0-alpha.37:
-  version "1.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
-  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
-  dependencies:
-    mdn-data "2.0.4"
-    source-map "^0.6.1"
-
-css-tree@1.0.0-alpha.39:
-  version "1.0.0-alpha.39"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
-  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
-  dependencies:
-    mdn-data "2.0.6"
-    source-map "^0.6.1"
-
-css-what@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
-  integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
-
-cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
-
-csso@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
-  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
-  dependencies:
-    css-tree "1.0.0-alpha.39"
-
 csstype@^2.5.7:
   version "2.6.8"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
@@ -3220,37 +2951,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
-  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
   integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
 
-domelementtype@1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
-  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
-
-domelementtype@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
-  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
-
-domutils@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -3258,7 +2963,7 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dot-prop@^5.0.0, dot-prop@^5.1.0, dot-prop@^5.2.0:
+dot-prop@^5.0.0, dot-prop@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
   integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
@@ -3412,11 +3117,6 @@ electron-to-chromium@^1.3.341:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.347.tgz#ba9724a8e8122a0b081836892e1e08eef7fa4cd7"
   integrity sha512-IityliF5ZY4nLa4DaXOGrWVeTK3OcN6LJECVe60DOX/SEF0zohVRxZHJXu4ZA8bW0A3K6Skcn67G20MGXOqhaA==
 
-electron-to-chromium@^1.3.413:
-  version "1.3.464"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.464.tgz#fe13feaa08f6f865d3c89d5d72e54c194f463aa5"
-  integrity sha512-Oo+0+CN9d2z6FToQW6Hwvi9ez09Y/usKwr0tsDsyg43a871zVJCi1nR0v03djLbRNcaCKjtrnVf2XJhTxEpPCg==
-
 electron-updater@^4.0.6:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.2.0.tgz#f9ecfc657f65ead737d42b9efecf628d3756b550"
@@ -3457,11 +3157,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
-
 emscripten-wasm-loader@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/emscripten-wasm-loader/-/emscripten-wasm-loader-3.0.3.tgz#60d4f33dd62fc41cf6d98fbca94b24bc246f133b"
@@ -3490,11 +3185,6 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-entities@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
-  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
-
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@@ -3598,7 +3288,7 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -3769,11 +3459,6 @@ esutils@^2.0.0, esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
-  integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
-
 execa@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.0.tgz#7f37d6ec17f09e6b8fc53288611695b6d12b9daf"
@@ -3930,11 +3615,6 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fastparse@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
-  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
-
 fastq@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
@@ -4206,13 +3886,6 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-generic-names@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872"
-  integrity sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ==
-  dependencies:
-    loader-utils "^1.1.0"
-
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.1"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
@@ -4612,18 +4285,6 @@ hard-rejection@^2.0.0:
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
-  dependencies:
-    ansi-regex "^2.0.0"
-
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -4680,7 +4341,7 @@ has-yarn@^2.1.0:
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
   integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
 
-has@^1.0.0, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
@@ -4692,11 +4353,6 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
 hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -4723,21 +4379,6 @@ hosted-git-info@^3.0.2:
   dependencies:
     lru-cache "^5.1.1"
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-comment-regex@^1.1.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
-  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
 html-parse-stringify2@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
@@ -4809,11 +4450,6 @@ iconv-lite@^0.5.1:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
-  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
-
 ignore-walk@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
@@ -4836,28 +4472,6 @@ image-size@^0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
-  dependencies:
-    import-from "^2.1.0"
-
-import-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
-  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
-  dependencies:
-    import-from "^3.0.0"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
 import-fresh@^3.0.0, import-fresh@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
@@ -4866,20 +4480,6 @@ import-fresh@^3.0.0, import-fresh@^3.1.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
-  dependencies:
-    resolve-from "^3.0.0"
-
-import-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966"
-  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
-  dependencies:
-    resolve-from "^5.0.0"
-
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -4907,11 +4507,6 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -4980,11 +4575,6 @@ ip-regex@^1.0.1:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-1.0.3.tgz#dc589076f659f419c222039a33316f1c7387effd"
   integrity sha1-3FiQdvZZ9BnCIgOaMzFvHHOH7/0=
 
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
 is-absolute@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
@@ -5053,18 +4643,6 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -5102,11 +4680,6 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
-
 is-electron-renderer@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-electron-renderer/-/is-electron-renderer-2.0.1.tgz#a469d056f975697c58c98c6023eb0aa79af895a2"
@@ -5277,11 +4850,6 @@ is-relative@^1.0.0:
   dependencies:
     is-unc-path "^1.0.0"
 
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
-
 is-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
@@ -5292,13 +4860,6 @@ is-string@^1.0.5:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
-  dependencies:
-    html-comment-regex "^1.1.0"
-
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -5506,13 +5067,6 @@ json5@2.0.0:
   dependencies:
     minimist "^1.2.0"
 
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
 json5@^2.1.0, json5@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
@@ -5711,15 +5265,6 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-loader-utils@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
-  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^1.0.1"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -5748,11 +5293,6 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -5763,11 +5303,6 @@ lodash.ismatch@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
   integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
 
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
 lodash.omit@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
@@ -5793,11 +5328,6 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
 lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -5921,16 +5451,6 @@ matcher@^2.1.0:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-mdn-data@2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
-  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
-
-mdn-data@2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
-  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
-
 mem@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/mem/-/mem-6.0.1.tgz#3f8ad1b0f8c4e00daf07f104e95b9d78131d7908"
@@ -6131,7 +5651,7 @@ minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@^1.2.3, minimist@^1.2.5:
+minimist@^1.2.3:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -6191,13 +5711,6 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@~0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
 mocha@^7.0.0, mocha@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-7.0.1.tgz#276186d35a4852f6249808c6dd4a1376cbf6c6ce"
@@ -6362,11 +5875,6 @@ node-releases@^1.1.47:
   dependencies:
     semver "^6.3.0"
 
-node-releases@^1.1.53:
-  version "1.1.58"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
-  integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==
-
 noop-logger@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
@@ -6402,11 +5910,6 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-
 normalize-url@^4.1.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
@@ -6457,13 +5960,6 @@ npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
-  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
-  dependencies:
-    boolbase "~1.0.0"
-
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -6662,11 +6158,6 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -6702,21 +6193,6 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-queue@^6.3.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.4.0.tgz#5050b379393ea1814d6f9613a654f687d92c0466"
-  integrity sha512-X7ddxxiQ+bLR/CUt3/BVKrGcJDNxBr0pEEFKHHB6vTPWNUhgDv36GpIH18RmGM3YGPpBT+JWGjDDqsVGuF0ERw==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    p-timeout "^3.1.0"
-
-p-timeout@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
-  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
-  dependencies:
-    p-finally "^1.0.0"
-
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -6955,11 +6431,6 @@ pify@^3.0.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
   integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
 
-pify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f"
-  integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -6986,13 +6457,6 @@ pkg-dir@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-up@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
@@ -7025,358 +6489,6 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-calc@^7.0.1:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
-  integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
-  dependencies:
-    postcss "^7.0.27"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.0.2"
-
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-load-config@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
-  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
-  dependencies:
-    cosmiconfig "^5.0.0"
-    import-cwd "^2.0.0"
-
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
-postcss-modules-extract-imports@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
-  integrity sha1-thTJcgvmgW6u41+zpfqh26agXds=
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-modules-local-by-default@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
-  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
-  dependencies:
-    css-selector-tokenizer "^0.7.0"
-    postcss "^6.0.1"
-
-postcss-modules-scope@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
-  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
-  dependencies:
-    css-selector-tokenizer "^0.7.0"
-    postcss "^6.0.1"
-
-postcss-modules-values@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
-  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
-  dependencies:
-    icss-replace-symbols "^1.1.0"
-    postcss "^6.0.1"
-
-postcss-modules@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-2.0.0.tgz#473d0d7326651d8408585c2a154115d5cb36cce0"
-  integrity sha512-eqp+Bva+U2cwQO7dECJ8/V+X+uH1HduNeITB0CPPFAu6d/8LKQ32/j+p9rQ2YL1QytVcrNU0X+fBqgGmQIA1Rw==
-  dependencies:
-    css-modules-loader-core "^1.1.0"
-    generic-names "^2.0.1"
-    lodash.camelcase "^4.3.0"
-    postcss "^7.0.1"
-    string-hash "^1.1.1"
-
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-selector-parser@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
-  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
-  dependencies:
-    dot-prop "^5.2.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
-  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
-  dependencies:
-    is-svg "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
-postcss@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
-  integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=
-  dependencies:
-    chalk "^1.1.3"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
-postcss@^6.0.1:
-  version "6.0.23"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.27:
-  version "7.0.32"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
 prebuild-install@^5.3.3:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.3.tgz#ef4052baac60d465f5ba6bf003c9c1de79b9da8e"
@@ -7464,11 +6576,6 @@ progress@^2.0.0, progress@^2.0.1:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-promise.series@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"
-  integrity sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=
-
 prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -7542,7 +6649,7 @@ puppeteer@^1.10.0:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
-q@^1.1.2, q@^1.5.1:
+q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -7619,13 +6726,6 @@ react-redux@^7.1.3:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
-react-sweet-progress@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/react-sweet-progress/-/react-sweet-progress-1.1.2.tgz#b27c6baa7c08a12cf0896565431ba477af249892"
-  integrity sha512-FUfiKpox5LJ9YTeK/HsaLp/oOsuxWBJQir6oAYKLY5nsa2pb04PtxzddSy6Y1fn8osaILpXIcItJRQYnHp42CA==
-  dependencies:
-    classnames "^2.2.5"
-
 react@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
@@ -8017,21 +7117,11 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve-from@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
-  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-
 resolve-options@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/resolve-options/-/resolve-options-1.1.0.tgz#32bb9e39c06d67338dc9378c0d6d6074566ad131"
@@ -8058,13 +7148,6 @@ resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.3
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.16.1:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
-  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
-  dependencies:
-    path-parse "^1.0.6"
-
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -8090,16 +7173,6 @@ reusify@^1.0.0:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -8181,26 +7254,6 @@ rollup-plugin-node-resolve@^5.2.0:
     resolve "^1.11.1"
     rollup-pluginutils "^2.8.1"
 
-rollup-plugin-postcss@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-3.1.2.tgz#e862033b96fabb73390fd4ccbee0155385d30e46"
-  integrity sha512-29ocL0CqjLj9sUghTG64ZwFxwbo2d0WyOTVtqPg6SEMZyFmKke9TClBf4/CcdFaWHqS+YZGsUpq3mzIBSYrw+A==
-  dependencies:
-    chalk "^4.0.0"
-    concat-with-sourcemaps "^1.1.0"
-    cssnano "^4.1.10"
-    import-cwd "^3.0.0"
-    p-queue "^6.3.0"
-    pify "^5.0.0"
-    postcss "^7.0.27"
-    postcss-load-config "^2.1.0"
-    postcss-modules "^2.0.0"
-    promise.series "^0.2.0"
-    resolve "^1.16.1"
-    rollup-pluginutils "^2.8.2"
-    safe-identifier "^0.4.1"
-    style-inject "^0.3.0"
-
 rollup-plugin-replace@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz#f41ae5372e11e7a217cde349c8b5d5fd115e70e3"
@@ -8209,7 +7262,7 @@ rollup-plugin-replace@^2.1.0:
     magic-string "^0.25.2"
     rollup-pluginutils "^2.6.0"
 
-rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
+rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0, rollup-pluginutils@^2.8.1:
   version "2.8.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
   integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
@@ -8254,11 +7307,6 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-identifier@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.1.tgz#b6516bf72594f03142b5f914f4c01842ccb1b678"
-  integrity sha512-73tOz5TXsq3apuCc3vC8c9QRhhdNZGiBhHmPPjqpH4TO5oCDqk8UIsDcSs/RG6dYcFAkOOva0pqHS3u7hh7XXA==
-
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -8278,7 +7326,7 @@ sanitize-filename@^1.6.2, sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
+sax@>=0.6.0, sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -8619,11 +7667,6 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
 stack-generator@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.5.tgz#fb00e5b4ee97de603e0773ea78ce944d81596c36"
@@ -8676,11 +7719,6 @@ stream-to@~0.2.0:
   resolved "https://registry.yarnpkg.com/stream-to/-/stream-to-0.2.2.tgz#84306098d85fdb990b9fa300b1b3ccf55e8ef01d"
   integrity sha1-hDBgmNhf25kLn6MAsbPM9V6O8B0=
 
-string-hash@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
-
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -8832,20 +7870,6 @@ strip-json-comments@^3.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-style-inject@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3"
-  integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
-
-stylehacks@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
-  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -8860,32 +7884,13 @@ supports-color@6.0.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
-  dependencies:
-    has-flag "^1.0.0"
-
-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -8901,25 +7906,6 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-svgo@^1.0.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
-  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
-  dependencies:
-    chalk "^2.4.1"
-    coa "^2.0.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "^0.1.1"
-    css-tree "1.0.0-alpha.37"
-    csso "^4.0.2"
-    js-yaml "^3.13.1"
-    mkdirp "~0.5.1"
-    object.values "^1.1.0"
-    sax "~1.2.4"
-    stable "^0.1.8"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -9069,11 +8055,6 @@ time-stamp@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
   integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
-timsort@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
-
 tinycolor2@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -9345,16 +8326,6 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
 unique-stream@^2.0.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"
@@ -9382,11 +8353,6 @@ unixify@^1.0.0:
   dependencies:
     normalize-path "^2.1.1"
 
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -9504,11 +8470,6 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
 
-vendors@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
-  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"

From 556fc77b772ef90032e835c8ef4e35a628f6d804 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 4 Nov 2020 11:33:59 -0300
Subject: [PATCH 55/66] Move code to downloads module

---
 src/downloads.js |  97 +++++++++++++++++++++++++++++++++++++++++++
 src/main.js      | 106 +++--------------------------------------------
 2 files changed, 102 insertions(+), 101 deletions(-)
 create mode 100644 src/downloads.js

diff --git a/src/downloads.js b/src/downloads.js
new file mode 100644
index 0000000000..edab6508de
--- /dev/null
+++ b/src/downloads.js
@@ -0,0 +1,97 @@
+import sharp from 'sharp';
+import { ipcMain } from 'electron';
+
+
+export const setupDownloads = (mainWindow) => {
+	const Store = require('electron-store');
+
+	const store = new Store();
+
+	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
+	ipcMain.on('load-downloads', async () => {
+		const downloads = await store.get('downloads', {});
+		mainWindow.webContents.send('initialize-downloads', downloads);
+	});
+
+	ipcMain.on('reset', async () => {
+		await store.clear();
+		const downloads = await store.get('downloads', {});
+		mainWindow.webContents.send('initialize-downloads', downloads);
+	});
+
+	ipcMain.on('remove', async (event, itemdId) => {
+		await store.delete(`downloads.${ itemdId }`);
+	});
+
+	// Listen and save a single download being completed.
+	ipcMain.on('download-complete', async (event, downloadItem) => {
+		const downloads = await store.get('downloads', {});
+		downloads[downloadItem.itemId] = downloadItem;
+		store.set('downloads', downloads);
+	});
+
+	// Downloads handler. Handles all downloads from links.
+	mainWindow.webContents.session.on('will-download', async (event, item, webContents) => {
+		const mime = item.getMimeType();
+		const itemId = Date.now();
+		const url = item.getURLChain()[0];
+		const serverTitle = url.split('#')[1];
+		const startTime = new Date().getTime();
+		const totalBytes = item.getTotalBytes();
+		let paused = false;
+		let endTime;
+		let isCancelledByDialog = true;
+
+		mainWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+
+		// Cancelled Download
+		ipcMain.on(`cancel-${ itemId }`, () => {
+			isCancelledByDialog = false;
+			item.cancel();
+		});
+
+		// Paused Download
+		ipcMain.on(`pause-${ itemId }`, () => {
+			if (paused) {
+				item.resume();
+			} else {
+				item.pause();
+			}
+			paused = !paused;
+		});
+		item.on('updated', (event, state) => {
+			if (state === 'interrupted') {
+				console.log('Download is interrupted but can be resumed');
+			} else if (state === 'progressing') {
+				if (item.isPaused()) {
+					console.log('Download is paused');
+				} else {
+					endTime = new Date().getTime();
+					const duration = (endTime - startTime) / 1000;
+					const Bps = (item.getReceivedBytes() / duration).toFixed(2);
+					const Kbps = (Bps / 1024).toFixed(2);
+					const Mbps = (Kbps / 1024).toFixed(2);
+					const recievedBytes = item.getReceivedBytes();
+					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
+					const path = item.getSavePath();
+					const pathsArray = path.split('/');
+					const fileName = pathsArray[pathsArray.length - 1];
+
+					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
+					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
+				}
+			}
+		});
+		item.once('done', async (event, state) => {
+			if (state === 'completed') {
+				const path = item.getSavePath();
+				const pathsArray = path.split('/');
+				const fileName = pathsArray[pathsArray.length - 1];
+				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
+				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
+			} else if (isCancelledByDialog) {
+				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
+			}
+		});
+	});
+};
diff --git a/src/main.js b/src/main.js
index 0fe3c2f333..e59443f13b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,16 +1,11 @@
 import path from 'path';
 
-import sharp from 'sharp';
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow } from 'electron';
 import setupElectronReload from 'electron-reload';
 import rimraf from 'rimraf';
 
 import { setupErrorHandling } from './errorHandling';
-
-
-const Store = require('electron-store');
-
-const store = new Store();
+import { setupDownloads } from './downloads';
 
 if (process.env.NODE_ENV === 'development') {
 	setupElectronReload(__dirname, {
@@ -76,8 +71,8 @@ const createMainWindow = () => {
 	const mainWindow = new BrowserWindow({
 		width: 1000,
 		height: 600,
-		minWidth: 500,
-		minHeight: 500,
+		minWidth: 400,
+		minHeight: 400,
 		titleBarStyle: 'hidden',
 		backgroundColor: '#2f343d',
 		show: false,
@@ -87,104 +82,13 @@ const createMainWindow = () => {
 		},
 	});
 
-	mainWindow.addListener('close', async (e) => {
-		preventEvent(e);
-	});
-
 	mainWindow.webContents.addListener('will-attach-webview', (event, webPreferences) => {
 		delete webPreferences.enableBlinkFeatures;
 	});
 
 	mainWindow.loadFile(`${ app.getAppPath() }/app/public/app.html`);
 
-
-	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
-	ipcMain.on('load-downloads', async () => {
-		const downloads = await store.get('downloads', {});
-		mainWindow.webContents.send('initialize-downloads', downloads);
-	});
-
-	ipcMain.on('reset', async () => {
-		await store.clear();
-		const downloads = await store.get('downloads', {});
-		mainWindow.webContents.send('initialize-downloads', downloads);
-	});
-
-	ipcMain.on('remove', async (event, itemdId) => {
-		await store.delete(`downloads.${ itemdId }`);
-	});
-
-	// Listen and save a single download being completed.
-	ipcMain.on('download-complete', async (event, downloadItem) => {
-		const downloads = await store.get('downloads', {});
-		downloads[downloadItem.itemId] = downloadItem;
-		store.set('downloads', downloads);
-	});
-
-	// Downloads handler. Handles all downloads from links.
-	mainWindow.webContents.session.on('will-download', async (event, item, webContents) => {
-		const mime = item.getMimeType();
-		const itemId = Date.now();
-		const url = item.getURLChain()[0];
-		const serverTitle = url.split('#')[1];
-		const startTime = new Date().getTime();
-		const totalBytes = item.getTotalBytes();
-		let paused = false;
-		let endTime;
-		let isCancelledByDialog = true;
-
-		mainWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
-
-		// Cancelled Download
-		ipcMain.on(`cancel-${ itemId }`, () => {
-			isCancelledByDialog = false;
-			item.cancel();
-		});
-
-		// Paused Download
-		ipcMain.on(`pause-${ itemId }`, () => {
-			if (paused) {
-				item.resume();
-			} else {
-				item.pause();
-			}
-			paused = !paused;
-		});
-		item.on('updated', (event, state) => {
-			if (state === 'interrupted') {
-				console.log('Download is interrupted but can be resumed');
-			} else if (state === 'progressing') {
-				if (item.isPaused()) {
-					console.log('Download is paused');
-				} else {
-					endTime = new Date().getTime();
-					const duration = (endTime - startTime) / 1000;
-					const Bps = (item.getReceivedBytes() / duration).toFixed(2);
-					const Kbps = (Bps / 1024).toFixed(2);
-					const Mbps = (Kbps / 1024).toFixed(2);
-					const recievedBytes = item.getReceivedBytes();
-					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
-					const path = item.getSavePath();
-					const pathsArray = path.split('/');
-					const fileName = pathsArray[pathsArray.length - 1];
-
-					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
-				}
-			}
-		});
-		item.once('done', async (event, state) => {
-			if (state === 'completed') {
-				const path = item.getSavePath();
-				const pathsArray = path.split('/');
-				const fileName = pathsArray[pathsArray.length - 1];
-				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
-			} else if (isCancelledByDialog) {
-				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
-			}
-		});
-	});
+	setupDownloads(mainWindow);
 };
 
 const initialize = async () => {

From de6c2131349c3c79551e518e60fdf7b1e4f30b8d Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 5 Nov 2020 00:10:13 -0300
Subject: [PATCH 56/66] Convert modules to TypeScript

---
 package.json                                  |   1 +
 .../DownloadsManagerView/ActionButton.js      |   7 -
 .../DownloadsManagerView/DownloadItem.js      | 147 ------------
 src/components/DownloadsManagerView/Info.js   |   6 -
 .../DownloadsManagerView/WarningModal.js      |  26 ---
 .../DownloadsManagerView/downloadUtils.js     |  43 ----
 src/components/DownloadsManagerView/index.js  | 197 ----------------
 src/downloads.js                              |  97 --------
 src/downloads.ts                              | 102 ++++++++
 src/types/fuselage.d.ts                       |  19 +-
 .../DownloadsManagerView/ActionButton.tsx     |   8 +
 .../DownloadsManagerView/DownloadItem.tsx     | 165 +++++++++++++
 .../components/DownloadsManagerView/Info.tsx  |   7 +
 .../DownloadsManagerView/WarningModal.tsx     |  33 +++
 .../DownloadsManagerView/downloadUtils.ts     |  61 +++++
 .../components/DownloadsManagerView/index.tsx | 218 ++++++++++++++++++
 .../DownloadsManagerView/styles.ts}           |  15 +-
 src/ui/components/Shell/index.tsx             |   2 +-
 yarn.lock                                     |   7 +
 19 files changed, 633 insertions(+), 528 deletions(-)
 delete mode 100644 src/components/DownloadsManagerView/ActionButton.js
 delete mode 100644 src/components/DownloadsManagerView/DownloadItem.js
 delete mode 100644 src/components/DownloadsManagerView/Info.js
 delete mode 100644 src/components/DownloadsManagerView/WarningModal.js
 delete mode 100644 src/components/DownloadsManagerView/downloadUtils.js
 delete mode 100644 src/components/DownloadsManagerView/index.js
 delete mode 100644 src/downloads.js
 create mode 100644 src/downloads.ts
 create mode 100644 src/ui/components/DownloadsManagerView/ActionButton.tsx
 create mode 100644 src/ui/components/DownloadsManagerView/DownloadItem.tsx
 create mode 100644 src/ui/components/DownloadsManagerView/Info.tsx
 create mode 100644 src/ui/components/DownloadsManagerView/WarningModal.tsx
 create mode 100644 src/ui/components/DownloadsManagerView/downloadUtils.ts
 create mode 100644 src/ui/components/DownloadsManagerView/index.tsx
 rename src/{components/DownloadsManagerView/styles.js => ui/components/DownloadsManagerView/styles.ts} (58%)

diff --git a/package.json b/package.json
index f619d15366..c575832b5d 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/rimraf": "^3.0.0",
+    "@types/sharp": "^0.26.0",
     "@typescript-eslint/eslint-plugin": "^4.2.0",
     "@typescript-eslint/parser": "^4.2.0",
     "babel-eslint": "^10.1.0",
diff --git a/src/components/DownloadsManagerView/ActionButton.js b/src/components/DownloadsManagerView/ActionButton.js
deleted file mode 100644
index 37301c5e30..0000000000
--- a/src/components/DownloadsManagerView/ActionButton.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { ClickableLink } from './styles';
-
-const ActionButton = (props) => <ClickableLink fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
-
-export default ActionButton;
diff --git a/src/components/DownloadsManagerView/DownloadItem.js b/src/components/DownloadsManagerView/DownloadItem.js
deleted file mode 100644
index 18e1d21d0a..0000000000
--- a/src/components/DownloadsManagerView/DownloadItem.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Box, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
-import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
-import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { ipcRenderer, remote, clipboard } from 'electron';
-
-import { formatBytes, STATUS, DOWNLOAD_EVENT } from './downloadUtils';
-import Info from './Info';
-import ActionButton from './ActionButton';
-
-function DownloadItem({
-	thumbnail,
-	url,
-	fileName,
-	totalBytes,
-	itemId,
-	mime,
-	updateDownloads,
-	date = new Date(itemId).toDateString(),
-	Mbps: mbps,
-	Kbps: kbps,
-	serverTitle,
-	fileSize = formatBytes(totalBytes, 2, true),
-	...props
-}) {
-	const servers = useSelector(({ servers }) => servers);
-
-	const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
-	const [path, setPath] = useDebouncedState(props.path || '', 100);
-	const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
-	const [timeLeft, setTimeLeft] = useDebouncedState(props.timeLeft || null, 100);
-
-
-	const completed = percentage === 100;
-	const paused = status === STATUS.PAUSED;
-
-
-	if (!serverTitle) {
-		const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
-		serverTitle = servers[index].title;
-	}
-
-
-	const handleProgress = useMutableCallback((event, data) => {
-		const percentage = Math.floor((data.bytes / totalBytes) * 100);
-		updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
-		setStatus(STATUS.ALL);
-		setPercentage(percentage);
-		setTimeLeft(data.timeLeft);
-	});
-
-	useEffect(() => {
-		// Listen on unique event only
-		ipcRenderer.on(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
-		return () => {
-			ipcRenderer.removeListener(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
-		};
-	}, [handleProgress, itemId]);
-
-
-	// Download Completed, Send data back
-	useEffect(() => {
-		const downloadComplete = (event, data) => {
-			setStatus(STATUS.ALL);
-			setPath(data.path);
-			setTimeLeft(null);
-			updateDownloads({ status: STATUS.ALL, serverTitle, itemId, percentage: 100, thumbnail: data.thumbnail, path: data.path });
-			ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
-		};
-
-		ipcRenderer.on(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
-		return () => {
-			ipcRenderer.removeListener(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
-		};
-	}, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setPercentage, setStatus, setTimeLeft, updateDownloads, url]);
-
-	const handleCancel = useMutableCallback(() => {
-		setStatus(STATUS.CANCELLED);
-		setTimeLeft(null);
-		ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
-		updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
-		ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
-	});
-
-	const handlePause = useMutableCallback(() => {
-		setStatus(STATUS.PAUSED);
-		ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
-		updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
-	});
-
-	const handleDelete = useMutableCallback((isRetry) => props.clear(itemId, isRetry));
-
-	const handleRetry = useMutableCallback(() => {
-		// Adding ServerTitle to Download URL for use in retrying the cancelled download
-		remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
-		handleDelete(true);
-	});
-
-	const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
-
-	// TODO TOAST
-	const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
-
-	const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
-	const isCompleted = completed;
-	const isCancelled = status === STATUS.CANCELLED;
-	const isPaused = paused;
-
-	return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' mb={props.mb}>
-		<Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
-			<Box display='flex' flexDirection='column' width='x36' height='x44'>
-				<Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
-				<Box fontSize='x12' fontWeight='600' textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime.split('/')[1] }</Box>
-			</Box>
-			<Box width='x144' mis='x8'>
-				<Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
-				<Info>{ serverTitle }</Info>
-			</Box>
-		</Box>
-
-		<Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
-			<Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
-				<Box display='flex' flexDirection='row' alignItems='center'>
-					<Info mie='x12'>{percentage}% of { fileSize }</Info>
-					{ isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
-					{ timeLeft && <Info>{ timeLeft }s left</Info> }
-				</Box>
-				<ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
-					{/* Completed */ }
-					{ isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
-					{ isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
-					{/* Progressing and Paused */ }
-					{ !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
-					{ !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
-					{/* Cancelled */ }
-					{ isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-					<ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
-				</ButtonGroup>
-			</Box>
-			<Box mbe='x8'>
-				<ProgressBar percentage={ percentage } error = { isCancelled ? 'Download Cancelled' : undefined } />
-			</Box>
-		</Box>
-	</Box>;
-}
-
-export default DownloadItem;
diff --git a/src/components/DownloadsManagerView/Info.js b/src/components/DownloadsManagerView/Info.js
deleted file mode 100644
index 86b8997d5d..0000000000
--- a/src/components/DownloadsManagerView/Info.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Info = (props) => <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
-
-export default Info;
diff --git a/src/components/DownloadsManagerView/WarningModal.js b/src/components/DownloadsManagerView/WarningModal.js
deleted file mode 100644
index 5202563dba..0000000000
--- a/src/components/DownloadsManagerView/WarningModal.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
-import React from 'react';
-
-
-const WarningModal = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }) =>
-	<Modal.Backdrop>
-		<Modal { ...props }>
-			<Modal.Header>
-				<Icon color='danger' name='modal-warning' size={ 20 } />
-				<Modal.Title>{ 'Are you sure?' }</Modal.Title>
-				<Modal.Close onClick={ close } />
-			</Modal.Header>
-			<Modal.Content fontScale='p1'>
-				{ text }
-			</Modal.Content>
-			<Modal.Footer>
-				<ButtonGroup align='end'>
-					<Button ghost onClick={ cancel || close }>{ cancelText || 'Cancel' }</Button>
-					<Button primary danger onClick={ confirm }>{ confirmText }</Button>
-				</ButtonGroup>
-			</Modal.Footer>
-		</Modal>;
-	</Modal.Backdrop>;
-
-
-export default WarningModal;
diff --git a/src/components/DownloadsManagerView/downloadUtils.js b/src/components/DownloadsManagerView/downloadUtils.js
deleted file mode 100644
index 07d9720044..0000000000
--- a/src/components/DownloadsManagerView/downloadUtils.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Utility function for bytes conversion. TODO: seperate into another file.
-export function formatBytes(bytes, decimals = 2, size = false) {
-	if (bytes === 0) {
-		return '0 Bytes';
-	}
-
-	const k = 1024;
-	const dm = decimals < 0 ? 0 : decimals;
-	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	if (size) {
-		return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
-	}
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-}
-
-//  Filetype to Mimetype mapping
-export const mapping = {
-	application: 'Files',
-	image: 'Images',
-	video: 'Videos',
-	audio: 'Audios',
-	text: 'Texts',
-};
-
-export const DOWNLOAD_EVENT = {
-	PAUSE_ID: 'pause-',
-	CANCEL_ID: 'cancel-',
-	COMPLETE: 'download-complete',
-	COMPLETE_ID: 'download-complete-',
-	DOWNLOADING_ID: 'downloading-',
-	LOAD: 'load-downloads',
-	INITIALIZE: 'initialize-downloads',
-	CREATE: 'create-download-item',
-};
-
-export const STATUS = {
-	CANCELLED: 'Cancelled',
-	PAUSED: 'Paused',
-	ALL: 'All',
-};
diff --git a/src/components/DownloadsManagerView/index.js b/src/components/DownloadsManagerView/index.js
deleted file mode 100644
index 6a051fd35b..0000000000
--- a/src/components/DownloadsManagerView/index.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import { Box, Grid, SearchInput, Select, Icon, Button, Pagination, Divider } from '@rocket.chat/fuselage';
-import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useTranslation } from 'react-i18next';
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { useSelector } from 'react-redux';
-import { ipcRenderer, shell } from 'electron';
-
-import { Wrapper } from './styles';
-import DownloadItem from './DownloadItem';
-import { mapping, STATUS, DOWNLOAD_EVENT } from './downloadUtils';
-import WarningModal from './WarningModal';
-
-function DownloadsManagerView() {
-	const isVisible = useSelector(({ currentServerUrl }) => currentServerUrl === 'Downloads');
-	const servers = useSelector(({ servers }) => servers);
-	const serverOptions = [['all', 'All']];
-	servers.map((server) => serverOptions.push([server.title, server.title]));
-	const fileTypes = [['all', 'All'], ['images', 'Images'], ['videos', 'Videos'], ['audios', 'Audios'], ['text', 'Texts'], ['files', 'Files']];
-	const fileStatus = [[STATUS.ALL, 'All'], [STATUS.PAUSED, 'Paused'], [STATUS.CANCELLED, 'Cancelled']];
-	const { t } = useTranslation();
-
-
-	// Downloads Array
-	const [downloads, setDownloads] = useState([]);
-	const [modal, setModal] = useState();
-
-	const [tab, setTab] = useLocalStorage('download-tab', STATUS.ALL);
-	const [searchVal, setSearchVal] = useState('');
-	const [serverVal, setServerVal] = useLocalStorage('download-server', '');
-	const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
-	const [currentPagination, setCurrentPagination] = useState(0);
-	const [itemsPerPage, setItemsPerPage] = useState(25);
-
-	const handleFileOpen = useMutableCallback((path) => {
-		shell.showItemInFolder(path);
-	});
-
-	const handleTabChange = useMutableCallback((event) => {
-		setTab(event);
-	});
-
-	const handleSearch = useMutableCallback((event) => {
-		setSearchVal(event.target.value);
-	});
-
-	const handleServerFilter = useMutableCallback((event) => {
-		setServerVal(event);
-	});
-
-	const handleMimeFilter = useMutableCallback((event) => {
-		setTypeVal(event);
-	});
-
-	const updateDownloads = useMutableCallback((data) => {
-		const updatedDownloads = downloads.map((downloadItem) => {
-			if (downloadItem.itemId === data.itemId) {
-				for (const key of Object.keys(data)) {
-					downloadItem[key] = data[key];
-				}
-			}
-			return downloadItem;
-		});
-		setDownloads(updatedDownloads);
-	});
-
-	// Modal Action
-
-	const closeModal = useCallback(() => {
-		setModal(null);
-	}, [setModal]);
-
-	const handleClearAll = useCallback(() => {
-		setSearchVal('');
-		setTypeVal('');
-		setServerVal('');
-		setTab('');
-	}, [setServerVal, setTab, setTypeVal]);
-
-
-	const handleClear = useCallback((itemId, isRetry) => {
-		const clear = () => {
-			closeModal();
-			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-			setDownloads(newDownloads);
-			ipcRenderer.send('remove', itemId);
-		};
-
-		if (isRetry) {
-			clear();
-			return;
-		}
-		setModal(<WarningModal
-			close={ closeModal }
-			confirm={ clear }
-			text={ 'Remove this download?' }
-			confirmText={ 'Yes' }
-		/>);
-	}, [closeModal, downloads]);
-
-	// 			USE EFFECTS
-
-	useEffect(() => {
-		ipcRenderer.send(DOWNLOAD_EVENT.LOAD);
-	}, []);
-
-	useEffect(() => {
-		const intializeDownloads = (event, downloads) => {
-			setDownloads(Object.values(downloads));
-		};
-		ipcRenderer.on(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
-		return () => {
-			ipcRenderer.removeListener(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
-		};
-	}, []);
-
-	useEffect(() => {
-		const createDownload = (event, props) => {
-			const updatedDownloads = [...downloads];
-			updatedDownloads.push(props);
-			setDownloads(updatedDownloads);
-		};
-		ipcRenderer.on(DOWNLOAD_EVENT.CREATE, createDownload);
-		return () => {
-			ipcRenderer.removeListener(DOWNLOAD_EVENT.CREATE, createDownload);
-		};
-	}, [downloads]);
-
-	useEffect(() => {
-		const clear = (event, itemId) => {
-			const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-			setDownloads(newDownloads);
-		};
-		ipcRenderer.on('download-cancelled', clear);
-		return () => {
-			ipcRenderer.removeListener('download-cancelled', clear);
-		};
-	});
-
-	const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${ current + 1 } - ${ Math.min(current + itemsPerPage, count) } of ${ count }`, []);
-
-	const filteredDownloads = useMemo(() => {
-		const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-		return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
-	}, [searchVal, downloads, tab, serverVal, typeVal]);
-
-	return <>
-		<Wrapper isVisible={ isVisible }>
-			<Box
-				minHeight='x64'
-				paddingBlock='x16'
-				paddingInline='x162'
-				display='flex'
-				flexDirection='row'
-				flexWrap='nowrap'
-				alignItems='center'
-				color='neutral-800'
-			>
-				<Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
-			</Box>
-			<Divider></Divider>
-			<Box paddingInline='x162'>
-
-				<Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
-					<Box display='flex' mie='x8' width='35%' >
-						<SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
-					</Box>
-					<Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
-					<Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-					<Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
-					<Box display='flex'>
-						<Button small ghost onClick={ handleClearAll }>
-							<Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
-						</Button>
-					</Box>
-				</Box>
-				<Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
-					<Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-						{ filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
-							<DownloadItem { ...downloadItem } updateDownloads={ updateDownloads } key={ downloadItem.itemId } handleFileOpen={ handleFileOpen } clear={ handleClear } />,
-						) }
-					</Grid.Item>
-				</Grid>
-			</Box>
-			<Pagination
-				divider
-				paddingInline='x162'
-				current={currentPagination}
-				itemsPerPage={itemsPerPage}
-				showingResultsLabel={showingResultsLabel}
-				count={(filteredDownloads && filteredDownloads.length) || 0}
-				onSetItemsPerPage={setItemsPerPage}
-				onSetCurrent={setCurrentPagination}
-			/>
-		</Wrapper>{ modal }</>;
-}
-
-export default DownloadsManagerView;
diff --git a/src/downloads.js b/src/downloads.js
deleted file mode 100644
index edab6508de..0000000000
--- a/src/downloads.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import sharp from 'sharp';
-import { ipcMain } from 'electron';
-
-
-export const setupDownloads = (mainWindow) => {
-	const Store = require('electron-store');
-
-	const store = new Store();
-
-	// Load all downloads from LocalStorage into Main Process and send to Download Manager.
-	ipcMain.on('load-downloads', async () => {
-		const downloads = await store.get('downloads', {});
-		mainWindow.webContents.send('initialize-downloads', downloads);
-	});
-
-	ipcMain.on('reset', async () => {
-		await store.clear();
-		const downloads = await store.get('downloads', {});
-		mainWindow.webContents.send('initialize-downloads', downloads);
-	});
-
-	ipcMain.on('remove', async (event, itemdId) => {
-		await store.delete(`downloads.${ itemdId }`);
-	});
-
-	// Listen and save a single download being completed.
-	ipcMain.on('download-complete', async (event, downloadItem) => {
-		const downloads = await store.get('downloads', {});
-		downloads[downloadItem.itemId] = downloadItem;
-		store.set('downloads', downloads);
-	});
-
-	// Downloads handler. Handles all downloads from links.
-	mainWindow.webContents.session.on('will-download', async (event, item, webContents) => {
-		const mime = item.getMimeType();
-		const itemId = Date.now();
-		const url = item.getURLChain()[0];
-		const serverTitle = url.split('#')[1];
-		const startTime = new Date().getTime();
-		const totalBytes = item.getTotalBytes();
-		let paused = false;
-		let endTime;
-		let isCancelledByDialog = true;
-
-		mainWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
-
-		// Cancelled Download
-		ipcMain.on(`cancel-${ itemId }`, () => {
-			isCancelledByDialog = false;
-			item.cancel();
-		});
-
-		// Paused Download
-		ipcMain.on(`pause-${ itemId }`, () => {
-			if (paused) {
-				item.resume();
-			} else {
-				item.pause();
-			}
-			paused = !paused;
-		});
-		item.on('updated', (event, state) => {
-			if (state === 'interrupted') {
-				console.log('Download is interrupted but can be resumed');
-			} else if (state === 'progressing') {
-				if (item.isPaused()) {
-					console.log('Download is paused');
-				} else {
-					endTime = new Date().getTime();
-					const duration = (endTime - startTime) / 1000;
-					const Bps = (item.getReceivedBytes() / duration).toFixed(2);
-					const Kbps = (Bps / 1024).toFixed(2);
-					const Mbps = (Kbps / 1024).toFixed(2);
-					const recievedBytes = item.getReceivedBytes();
-					const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
-					const path = item.getSavePath();
-					const pathsArray = path.split('/');
-					const fileName = pathsArray[pathsArray.length - 1];
-
-					// Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-					mainWindow.webContents.send(`downloading-${ itemId }`, { bytes: item.getReceivedBytes(), Mbps, Kbps, timeLeft, fileName });
-				}
-			}
-		});
-		item.once('done', async (event, state) => {
-			if (state === 'completed') {
-				const path = item.getSavePath();
-				const pathsArray = path.split('/');
-				const fileName = pathsArray[pathsArray.length - 1];
-				const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
-				mainWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
-			} else if (isCancelledByDialog) {
-				mainWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
-			}
-		});
-	});
-};
diff --git a/src/downloads.ts b/src/downloads.ts
new file mode 100644
index 0000000000..b21395ba63
--- /dev/null
+++ b/src/downloads.ts
@@ -0,0 +1,102 @@
+import { BrowserWindow, ipcMain } from 'electron';
+import Store from 'electron-store';
+import sharp from 'sharp';
+
+
+export const setupDownloads = (rootWindow: BrowserWindow): void => {
+  const store = new Store();
+
+  // Load all downloads from LocalStorage into Main Process and send to Download Manager.
+  ipcMain.on('load-downloads', async () => {
+    const downloads = await store.get('downloads', {});
+    rootWindow.webContents.send('initialize-downloads', downloads);
+  });
+
+  ipcMain.on('reset', async () => {
+    store.clear();
+    const downloads = await store.get('downloads', {});
+    rootWindow.webContents.send('initialize-downloads', downloads);
+  });
+
+  ipcMain.on('remove', async (_event, itemdId) => {
+    store.delete(`downloads.${ itemdId }`);
+  });
+
+  // Listen and save a single download being completed.
+  ipcMain.on('download-complete', async (_event, downloadItem) => {
+    const downloads = await store.get('downloads', {});
+    downloads[downloadItem.itemId] = downloadItem;
+    store.set('downloads', downloads);
+  });
+
+  // Downloads handler. Handles all downloads from links.
+  rootWindow.webContents.session.on('will-download', async (_event, item, webContents) => {
+    const mime = item.getMimeType();
+    const itemId = Date.now();
+    const url = item.getURLChain()[0];
+    const serverTitle = url.split('#')[1];
+    const startTime = new Date().getTime();
+    const totalBytes = item.getTotalBytes();
+    let paused = false;
+    let endTime;
+    let isCancelledByDialog = true;
+
+    rootWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
+
+    // Cancelled Download
+    ipcMain.on(`cancel-${ itemId }`, () => {
+      isCancelledByDialog = false;
+      item.cancel();
+    });
+
+    // Paused Download
+    ipcMain.on(`pause-${ itemId }`, () => {
+      if (paused) {
+        item.resume();
+      } else {
+        item.pause();
+      }
+      paused = !paused;
+    });
+    item.on('updated', (_event, state) => {
+      if (state === 'interrupted') {
+        console.log('Download is interrupted but can be resumed');
+      } else if (state === 'progressing') {
+        if (item.isPaused()) {
+          console.log('Download is paused');
+        } else {
+          endTime = new Date().getTime();
+          const duration = (endTime - startTime) / 1000;
+          const Bps = item.getReceivedBytes() / duration;
+          const Kbps = Bps / 1024;
+          const Mbps = Kbps / 1024;
+          const recievedBytes = item.getReceivedBytes();
+          const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
+          const path = item.getSavePath();
+          const pathsArray = path.split('/');
+          const fileName = pathsArray[pathsArray.length - 1];
+
+          // Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
+          rootWindow.webContents.send(`downloading-${ itemId }`, {
+            bytes: item.getReceivedBytes(),
+            Mbps: Mbps.toFixed(2),
+            Kbps: Kbps.toFixed(2),
+            timeLeft,
+            fileName,
+          });
+        }
+      }
+    });
+    item.once('done', async (_event, state) => {
+      if (state === 'completed') {
+        const path = item.getSavePath();
+        const pathsArray = path.split('/');
+        const fileName = pathsArray[pathsArray.length - 1];
+        const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
+        rootWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
+      } else if (isCancelledByDialog) {
+        rootWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
+      }
+    });
+  });
+};
diff --git a/src/types/fuselage.d.ts b/src/types/fuselage.d.ts
index 5cf9d4f292..5303d7dc6b 100644
--- a/src/types/fuselage.d.ts
+++ b/src/types/fuselage.d.ts
@@ -217,6 +217,16 @@ declare module '@rocket.chat/fuselage' {
   type FieldGroupProps = BoxProps;
   export const FieldGroup: ForwardRefExoticComponent<FieldGroupProps>;
 
+  type GridProps = BoxProps & {
+    xl: number | boolean;
+  };
+  type GridItemProps = BoxProps & {
+    xl: number | boolean;
+  };
+  export const Grid: ForwardRefExoticComponent<GridProps> & {
+    Item: ForwardRefExoticComponent<GridItemProps>;
+  };
+
   type IconProps = Omit<BoxProps, 'size'> & {
     size?: BoxProps['width'];
   };
@@ -250,6 +260,7 @@ declare module '@rocket.chat/fuselage' {
   type PaginationProps = BoxProps & {
     count: number;
     current?: number;
+    divider?: boolean;
     itemsPerPage?: 25 | 50 | 100;
     itemsPerPageLabel?: () => string;
     showingResultsLabel?: (props: { count: number; current: number; itemsPerPage: 25 | 50 | 100 }) => string;
@@ -263,6 +274,12 @@ declare module '@rocket.chat/fuselage' {
   };
   export const PasswordInput: ForwardRefExoticComponent<PasswordInputProps>;
 
+  type ProgressBarProps = BoxProps & {
+    percentage?: number;
+    error?: string;
+  };
+  export const ProgressBar: ForwardRefExoticComponent<ProgressBarProps>;
+
   type SearchInputProps = BoxProps & {
     addon?: ReactNode;
     error?: string;
@@ -335,7 +352,7 @@ declare module '@rocket.chat/fuselage' {
   }>;
   export const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
 
-  type SelectOptions = [string, string][];
+  type SelectOptions = readonly (readonly [string, string])[];
   type SelectProps = BoxProps & {
     error?: string;
     options: SelectOptions;
diff --git a/src/ui/components/DownloadsManagerView/ActionButton.tsx b/src/ui/components/DownloadsManagerView/ActionButton.tsx
new file mode 100644
index 0000000000..765f42fa8a
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/ActionButton.tsx
@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+
+import { ClickableLink, ClickableLinkProps } from './styles';
+
+const ActionButton: FC<ClickableLinkProps> = (props) =>
+  <ClickableLink is='a' fontSize='x12' withTruncatedText color='neutral-600' {...props} />;
+
+export default ActionButton;
diff --git a/src/ui/components/DownloadsManagerView/DownloadItem.tsx b/src/ui/components/DownloadsManagerView/DownloadItem.tsx
new file mode 100644
index 0000000000..359f8f6ffa
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/DownloadItem.tsx
@@ -0,0 +1,165 @@
+import { Box, BoxProps, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
+import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
+import { ipcRenderer, remote, clipboard } from 'electron';
+import React, { FC, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '../../../store/rootReducer';
+import ActionButton from './ActionButton';
+import Info from './Info';
+import { formatBytes, STATUS, DOWNLOAD_EVENT, Download } from './downloadUtils';
+
+type DownloadItemProps = BoxProps
+& Download
+& {
+  updateDownloads: (downloads: Download) => void;
+  clear: (itemId: string, isRetry: boolean) => void;
+  handleFileOpen: (path: string) => void;
+};
+
+const DownloadItem: FC<DownloadItemProps> = ({
+  thumbnail,
+  url,
+  fileName,
+  totalBytes,
+  itemId,
+  mime,
+  updateDownloads,
+  Mbps: mbps,
+  Kbps: kbps,
+  serverTitle,
+  ...props
+}) => {
+  const servers = useSelector(({ servers }: RootState) => servers);
+  const date = new Date(itemId).toDateString();
+  const fileSize = formatBytes(totalBytes, 2, true);
+
+  const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
+  const [path, setPath] = useDebouncedState(props.path || '', 100);
+  const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
+  const [timeLeft, setTimeLeft] = useDebouncedState(props.timeLeft || null, 100);
+
+  const completed = percentage === 100;
+  const paused = status === STATUS.PAUSED;
+
+  if (!serverTitle) {
+    const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
+    serverTitle = servers[index].title;
+  }
+
+  const handleProgress = useMutableCallback((_event, data) => {
+    const percentage = Math.floor((data.bytes / totalBytes) * 100);
+    updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
+    setStatus(STATUS.ALL);
+    setPercentage(percentage);
+    setTimeLeft(data.timeLeft);
+  });
+
+  useEffect(() => {
+    // Listen on unique event only
+    ipcRenderer.on(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
+    return () => {
+      ipcRenderer.removeListener(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
+    };
+  }, [handleProgress, itemId]);
+
+
+  // Download Completed, Send data back
+  useEffect(() => {
+    const downloadComplete = (_event: unknown, data: {
+      path: string;
+      thumbnail: unknown;
+    }): void => {
+      setStatus(STATUS.ALL);
+      setPath(data.path);
+      setTimeLeft(null);
+      updateDownloads({
+        status: STATUS.ALL,
+        serverTitle,
+        itemId,
+        percentage: 100,
+        thumbnail: data.thumbnail,
+        path: data.path,
+      });
+      ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
+    };
+
+    ipcRenderer.on(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
+    return () => {
+      ipcRenderer.removeListener(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
+    };
+  }, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setPercentage, setStatus, setTimeLeft, updateDownloads, url]);
+
+  const handleCancel = useMutableCallback(() => {
+    setStatus(STATUS.CANCELLED);
+    setTimeLeft(null);
+    ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
+    updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
+    ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
+  });
+
+  const handlePause = useMutableCallback(() => {
+    setStatus(STATUS.PAUSED);
+    ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
+    updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
+  });
+
+  const handleDelete = useMutableCallback((isRetry: boolean) => {
+    props.clear(itemId, isRetry);
+  });
+
+  const handleRetry = useMutableCallback(() => {
+    // Adding ServerTitle to Download URL for use in retrying the cancelled download
+    remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
+    handleDelete(true);
+  });
+
+  const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
+
+  // TODO TOAST
+  const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
+
+  const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
+  const isCompleted = completed;
+  const isCancelled = status === STATUS.CANCELLED;
+  const isPaused = paused;
+
+  return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' mb={props.mb}>
+    <Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
+      <Box display='flex' flexDirection='column' width='x36' height='x44'>
+        <Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
+        <Box fontSize='x12' fontWeight={600} textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime.split('/')[1] }</Box>
+      </Box>
+      <Box width='x144' mis='x8'>
+        <Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
+        <Info>{ serverTitle }</Info>
+      </Box>
+    </Box>
+
+    <Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
+      <Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
+        <Box display='flex' flexDirection='row' alignItems='center'>
+          <Info mie='x12'>{percentage}% of { fileSize }</Info>
+          { isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
+          { timeLeft && <Info>{ timeLeft }s left</Info> }
+        </Box>
+        <ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
+          {/* Completed */ }
+          { isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
+          { isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
+          {/* Progressing and Paused */ }
+          { !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
+          { !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
+          {/* Cancelled */ }
+          { isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
+          <ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
+        </ButtonGroup>
+      </Box>
+      <Box mbe='x8'>
+        <ProgressBar percentage={percentage} error={isCancelled ? 'Download Cancelled' : undefined} />
+      </Box>
+    </Box>
+  </Box>;
+};
+
+export default DownloadItem;
diff --git a/src/ui/components/DownloadsManagerView/Info.tsx b/src/ui/components/DownloadsManagerView/Info.tsx
new file mode 100644
index 0000000000..3c67ca0909
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/Info.tsx
@@ -0,0 +1,7 @@
+import { Box, BoxProps } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const Info: FC<BoxProps> = (props) =>
+  <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
+
+export default Info;
diff --git a/src/ui/components/DownloadsManagerView/WarningModal.tsx b/src/ui/components/DownloadsManagerView/WarningModal.tsx
new file mode 100644
index 0000000000..86a23b274a
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/WarningModal.tsx
@@ -0,0 +1,33 @@
+import { Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+type WarningModalProps = {
+  text?: string;
+  confirmText?: string;
+  close?: () => void;
+  cancel?: () => void;
+  confirm?: () => void;
+  cancelText?: string;
+};
+
+const WarningModal: FC<WarningModalProps> = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }) =>
+  <Modal.Backdrop>
+    <Modal { ...props }>
+      <Modal.Header>
+        <Icon color='danger' name='modal-warning' size={ 20 } />
+        <Modal.Title>{ 'Are you sure?' }</Modal.Title>
+        <Modal.Close onClick={ close } />
+      </Modal.Header>
+      <Modal.Content fontScale='p1'>
+        { text }
+      </Modal.Content>
+      <Modal.Footer>
+        <ButtonGroup align='end'>
+          <Button ghost onClick={ cancel || close }>{ cancelText || 'Cancel' }</Button>
+          <Button primary danger onClick={ confirm }>{ confirmText }</Button>
+        </ButtonGroup>
+      </Modal.Footer>
+    </Modal>;
+  </Modal.Backdrop>;
+
+export default WarningModal;
diff --git a/src/ui/components/DownloadsManagerView/downloadUtils.ts b/src/ui/components/DownloadsManagerView/downloadUtils.ts
new file mode 100644
index 0000000000..36b622bcbe
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/downloadUtils.ts
@@ -0,0 +1,61 @@
+// Utility function for bytes conversion. TODO: seperate into another file.
+export const formatBytes = (bytes: number, decimals = 2, size = false): string => {
+  if (bytes === 0) {
+    return '0 Bytes';
+  }
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  if (size) {
+    return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
+  }
+
+  return String(parseFloat((bytes / Math.pow(k, i)).toFixed(dm)));
+};
+
+//  Filetype to Mimetype mapping
+export const mapping = {
+  application: 'Files',
+  image: 'Images',
+  video: 'Videos',
+  audio: 'Audios',
+  text: 'Texts',
+} as const;
+
+export const DOWNLOAD_EVENT = {
+  PAUSE_ID: 'pause-',
+  CANCEL_ID: 'cancel-',
+  COMPLETE: 'download-complete',
+  COMPLETE_ID: 'download-complete-',
+  DOWNLOADING_ID: 'downloading-',
+  LOAD: 'load-downloads',
+  INITIALIZE: 'initialize-downloads',
+  CREATE: 'create-download-item',
+} as const;
+
+export const STATUS = {
+  CANCELLED: 'Cancelled',
+  PAUSED: 'Paused',
+  ALL: 'All',
+} as const;
+
+export type Download = {
+  itemId: string;
+  status: typeof STATUS[keyof typeof STATUS];
+  percentage: number;
+  serverTitle?: unknown;
+  Mbps?: unknown;
+  Kbps?: unknown;
+  fileName?: string;
+  thumbnail?: unknown;
+  path?: string;
+  mime?: string;
+  url?: string;
+  totalBytes?: number;
+  timeLeft?: unknown;
+  serverId?: unknown;
+};
diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
new file mode 100644
index 0000000000..0f45d886cf
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/index.tsx
@@ -0,0 +1,218 @@
+import { Box, Grid, SearchInput, Select, Icon, Button, Pagination, Divider, PaginationProps } from '@rocket.chat/fuselage';
+import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { ipcRenderer, IpcRendererEvent, shell } from 'electron';
+import React, { useState, useEffect, useMemo, useCallback, FC, ReactElement, ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { RootState } from '../../../store/rootReducer';
+import DownloadItem from './DownloadItem';
+import WarningModal from './WarningModal';
+import { mapping, STATUS, DOWNLOAD_EVENT, Download } from './downloadUtils';
+import { Wrapper } from './styles';
+
+const fileTypes = [
+  ['all', 'All'],
+  ['images', 'Images'],
+  ['videos', 'Videos'],
+  ['audios', 'Audios'],
+  ['text', 'Texts'],
+  ['files', 'Files'],
+] as const;
+
+const fileStatus = [
+  [STATUS.ALL, 'All'],
+  [STATUS.PAUSED, 'Paused'],
+  [STATUS.CANCELLED, 'Cancelled'],
+] as const;
+
+const DownloadsManagerView: FC = () => {
+  const { t } = useTranslation();
+  const isVisible = useSelector(({ currentServerUrl }: RootState) => currentServerUrl === 'Downloads');
+  const servers = useSelector(({ servers }: RootState) => servers);
+  const serverOptions: [string, string][] = [['all', 'All']];
+  servers.forEach((server) => {
+    serverOptions.push([server.title, server.title]);
+  });
+
+  // Downloads Array
+  const [downloads, setDownloads] = useState<Download[]>([]);
+  const [modal, setModal] = useState<ReactElement>();
+
+  const [tab, setTab] = useLocalStorage<typeof STATUS[keyof typeof STATUS] | ''>('download-tab', STATUS.ALL);
+  const [searchVal, setSearchVal] = useState('');
+  const [serverVal, setServerVal] = useLocalStorage('download-server', '');
+  const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
+  const [currentPagination, setCurrentPagination] = useState(0);
+  const [itemsPerPage, setItemsPerPage] = useState<PaginationProps['itemsPerPage']>(25);
+
+  const handleFileOpen = useMutableCallback((path: string) => {
+    shell.showItemInFolder(path);
+  });
+
+  const handleTabChange = useMutableCallback((event) => {
+    setTab(event);
+  });
+
+  const handleSearch = useMutableCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearchVal(event.target.value);
+  });
+
+  const handleServerFilter = useMutableCallback((event) => {
+    setServerVal(event);
+  });
+
+  const handleMimeFilter = useMutableCallback((event) => {
+    setTypeVal(event);
+  });
+
+  const updateDownloads = useMutableCallback((data) => {
+    const updatedDownloads = downloads.map((downloadItem) => {
+      if (downloadItem.itemId === data.itemId) {
+        for (const key of Object.keys(data)) {
+          downloadItem[key] = data[key];
+        }
+      }
+      return downloadItem;
+    });
+    setDownloads(updatedDownloads);
+  });
+
+  // Modal Action
+
+  const closeModal = useCallback(() => {
+    setModal(null);
+  }, [setModal]);
+
+  const handleClearAll = useCallback((): void => {
+    setSearchVal('');
+    setTypeVal('');
+    setServerVal('');
+    setTab('');
+  }, [setServerVal, setTab, setTypeVal]);
+
+
+  const handleClear = useCallback((itemId: string, isRetry: boolean): void => {
+    const clear = (): void => {
+      closeModal();
+      const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+      setDownloads(newDownloads);
+      ipcRenderer.send('remove', itemId);
+    };
+
+    if (isRetry) {
+      clear();
+      return;
+    }
+    setModal(<WarningModal
+      close={ closeModal }
+      confirm={ clear }
+      text={ 'Remove this download?' }
+      confirmText={ 'Yes' }
+    />);
+  }, [closeModal, downloads]);
+
+  // 			USE EFFECTS
+
+  useEffect(() => {
+    ipcRenderer.send(DOWNLOAD_EVENT.LOAD);
+  }, []);
+
+  useEffect(() => {
+    const intializeDownloads = (_event: IpcRendererEvent, downloads: Record<string, Download>): void => {
+      setDownloads(Object.values(downloads) as Download[]);
+    };
+    ipcRenderer.on(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
+    return () => {
+      ipcRenderer.removeListener(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
+    };
+  }, []);
+
+  useEffect(() => {
+    const createDownload = (_event: IpcRendererEvent, download: Download): void => {
+      const updatedDownloads = [...downloads];
+      updatedDownloads.push(download);
+      setDownloads(updatedDownloads);
+    };
+    ipcRenderer.on(DOWNLOAD_EVENT.CREATE, createDownload);
+    return () => {
+      ipcRenderer.removeListener(DOWNLOAD_EVENT.CREATE, createDownload);
+    };
+  }, [downloads]);
+
+  useEffect(() => {
+    const clear = (_event: unknown, itemId: string): void => {
+      const newDownloads = downloads.filter((download) => download.itemId !== itemId);
+      setDownloads(newDownloads);
+    };
+    ipcRenderer.on('download-cancelled', clear);
+    return () => {
+      ipcRenderer.removeListener('download-cancelled', clear);
+    };
+  });
+
+  const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${ current + 1 } - ${ Math.min(current + itemsPerPage, count) } of ${ count }`, []);
+
+  const filteredDownloads = useMemo(() => {
+    const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
+    return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId.localeCompare(a.itemId));
+  }, [searchVal, downloads, tab, serverVal, typeVal]);
+
+  return <>
+    <Wrapper isVisible={ isVisible }>
+      <Box
+        minHeight='x64'
+        paddingBlock='x16'
+        paddingInline='x162'
+        display='flex'
+        flexDirection='row'
+        flexWrap='nowrap'
+        alignItems='center'
+        color='neutral-800'
+      >
+        <Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
+      </Box>
+      <Divider></Divider>
+      <Box paddingInline='x162'>
+
+        <Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
+          <Box display='flex' mie='x8' width='35%' >
+            <SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
+          </Box>
+          <Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
+          <Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+          <Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
+          <Box display='flex'>
+            <Button small ghost onClick={ handleClearAll }>
+              <Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
+            </Button>
+          </Box>
+        </Box>
+        <Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
+          <Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+            { filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
+              <DownloadItem
+                key={downloadItem.itemId}
+                {...downloadItem}
+                updateDownloads={updateDownloads}
+                handleFileOpen={handleFileOpen}
+                clear={handleClear}
+              />,
+            ) }
+          </Grid.Item>
+        </Grid>
+      </Box>
+      <Pagination
+        divider
+        paddingInline='x162'
+        current={currentPagination}
+        itemsPerPage={itemsPerPage}
+        showingResultsLabel={showingResultsLabel}
+        count={(filteredDownloads && filteredDownloads.length) || 0}
+        onSetItemsPerPage={setItemsPerPage}
+        onSetCurrent={setCurrentPagination}
+      />
+    </Wrapper>{ modal }</>;
+};
+
+export default DownloadsManagerView;
diff --git a/src/components/DownloadsManagerView/styles.js b/src/ui/components/DownloadsManagerView/styles.ts
similarity index 58%
rename from src/components/DownloadsManagerView/styles.js
rename to src/ui/components/DownloadsManagerView/styles.ts
index 49ae04093d..e1d8fe7a59 100644
--- a/src/components/DownloadsManagerView/styles.js
+++ b/src/ui/components/DownloadsManagerView/styles.ts
@@ -1,8 +1,13 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
+import { Box, BoxProps } from '@rocket.chat/fuselage';
+import { FC } from 'react';
 
+type WrapperProps = {
+  isVisible: boolean;
+};
 
-export const Wrapper = styled.section`
+export const Wrapper: FC<WrapperProps> = styled.section`
 	background-color: white;
 	height: 100%;
 	display: flex;
@@ -14,7 +19,7 @@ export const Wrapper = styled.section`
 	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
 `;
 
-export const Content = styled.div`
+export const Content: FC = styled.div`
 	position: relative;
 	top: 10%;
 	width: 100%;
@@ -23,7 +28,11 @@ export const Content = styled.div`
 	justify-content: center;
 `;
 
-export const ClickableLink = styled.a`
+export type ClickableLinkProps = BoxProps & {
+  isRemove?: boolean;
+};
+
+export const ClickableLink: FC<ClickableLinkProps> = styled(Box)`
 	cursor: pointer;
 
 	&:hover,
diff --git a/src/ui/components/Shell/index.tsx b/src/ui/components/Shell/index.tsx
index b12f9f8a10..ffe2c3ae71 100644
--- a/src/ui/components/Shell/index.tsx
+++ b/src/ui/components/Shell/index.tsx
@@ -1,10 +1,10 @@
 import React, { useLayoutEffect, FC } from 'react';
 import { useSelector } from 'react-redux';
 
-import DownloadsManagerView from '../../../components/DownloadsManagerView';
 import { RootState } from '../../../store/rootReducer';
 import { AboutDialog } from '../AboutDialog';
 import { AddServerView } from '../AddServerView';
+import DownloadsManagerView from '../DownloadsManagerView';
 import { ScreenSharingDialog } from '../ScreenSharingDialog';
 import { SelectClientCertificateDialog } from '../SelectClientCertificateDialog';
 import { ServersView } from '../ServersView';
diff --git a/yarn.lock b/yarn.lock
index 312ca2b5d2..2574072e05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2176,6 +2176,13 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
   integrity sha512-+nVsLKlcUCeMzD2ufHEYuJ9a2ovstb6Dp52A5VsoKxDXgvE051XgHI/33I1EymwkRGQkwnA0LkhnUzituGs4EQ==
 
+"@types/sharp@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.26.0.tgz#2fa8419dbdaca8dd38f73888b27b207f188a8669"
+  integrity sha512-oJrR8eiwpL7qykn2IeFRduXM4za7z+7yOUEbKVtuDQ/F6htDLHYO6IbzhaJQHV5n6O3adIh4tJvtgPyLyyydqg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"

From 6c3e03a82993b476969278566716f1387f5324d8 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Sun, 8 Nov 2020 22:44:52 -0300
Subject: [PATCH 57/66] Replace currentServerUrl with currentView

---
 src/app/actions.ts                            |  8 +-
 src/app/main/persistence.ts                   | 12 ++-
 src/app/selectors.ts                          |  2 +-
 src/servers/actions.ts                        |  2 +-
 src/servers/main.ts                           |  4 +-
 src/servers/reducers.ts                       | 87 ++-----------------
 src/servers/renderer.ts                       |  4 +-
 src/store/rootReducer.ts                      |  8 +-
 src/ui/components/AddServerView/index.tsx     |  4 +-
 .../components/DownloadsManagerView/index.tsx |  2 +-
 src/ui/components/ServersView/index.tsx       | 14 ++-
 src/ui/components/SideBar/index.tsx           | 16 +++-
 src/ui/components/SideBar/useSorting.tsx      |  4 +-
 src/ui/main/menuBar.ts                        | 34 ++++----
 src/ui/main/rootWindow.ts                     |  4 +-
 src/ui/main/touchBar.ts                       |  4 +-
 src/ui/reducers/currentView.ts                | 82 +++++++++++++++++
 17 files changed, 159 insertions(+), 132 deletions(-)
 create mode 100644 src/ui/reducers/currentView.ts

diff --git a/src/app/actions.ts b/src/app/actions.ts
index a8fa008904..cb488c25a3 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -2,10 +2,8 @@ import {
   externalProtocols,
   trustedCertificates,
 } from '../navigation/reducers';
-import {
-  currentServerUrl,
-  servers,
-} from '../servers/reducers';
+import { servers } from '../servers/reducers';
+import { currentView } from '../ui/reducers/currentView';
 import { isMenuBarEnabled } from '../ui/reducers/isMenuBarEnabled';
 import { isShowWindowOnUnreadChangedEnabled } from '../ui/reducers/isShowWindowOnUnreadChangedEnabled';
 import { isSideBarEnabled } from '../ui/reducers/isSideBarEnabled';
@@ -28,7 +26,7 @@ export type AppActionTypeToPayloadMap = {
   [APP_PATH_SET]: string;
   [APP_VERSION_SET]: string;
   [APP_SETTINGS_LOADED]: {
-    currentServerUrl: ReturnType<typeof currentServerUrl>;
+    currentView: ReturnType<typeof currentView>;
     doCheckForUpdatesOnStartup: ReturnType<typeof doCheckForUpdatesOnStartup>;
     externalProtocols: ReturnType<typeof externalProtocols>;
     isEachUpdatesSettingConfigurable: ReturnType<typeof isEachUpdatesSettingConfigurable>;
diff --git a/src/app/main/persistence.ts b/src/app/main/persistence.ts
index ec85dcc679..141b04e143 100644
--- a/src/app/main/persistence.ts
+++ b/src/app/main/persistence.ts
@@ -5,7 +5,17 @@ import { selectPersistableValues } from '../selectors';
 
 type PersistableValues = ReturnType<typeof selectPersistableValues>;
 
-const migrations = {};
+const migrations = {
+  '>=3.1.0': (store: ElectronStore<PersistableValues & { currentServerUrl: string }>) => {
+    if (!store.has('currentServerUrl')) {
+      return;
+    }
+
+    const currentServerUrl = store.get('currentServerUrl');
+    store.set('currentView', currentServerUrl ? { url: currentServerUrl } : 'add-new-server');
+    store.delete('currentServerUrl');
+  },
+};
 
 let electronStore: ElectronStore<PersistableValues>;
 
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
index 879a7c8365..83d8efeb3e 100644
--- a/src/app/selectors.ts
+++ b/src/app/selectors.ts
@@ -5,7 +5,7 @@ import { RootState } from '../store/rootReducer';
 import { APP_SETTINGS_LOADED } from './actions';
 
 export const selectPersistableValues = createStructuredSelector<Partial<RootState>, ActionOf<typeof APP_SETTINGS_LOADED>['payload']>({
-  currentServerUrl: ({ currentServerUrl }) => currentServerUrl,
+  currentView: ({ currentView }) => currentView,
   doCheckForUpdatesOnStartup: ({ doCheckForUpdatesOnStartup }) => doCheckForUpdatesOnStartup,
   isMenuBarEnabled: ({ isMenuBarEnabled }) => isMenuBarEnabled,
   isShowWindowOnUnreadChangedEnabled: ({ isShowWindowOnUnreadChangedEnabled }) => isShowWindowOnUnreadChangedEnabled,
diff --git a/src/servers/actions.ts b/src/servers/actions.ts
index e64baac8da..ec0ccb6f42 100644
--- a/src/servers/actions.ts
+++ b/src/servers/actions.ts
@@ -7,7 +7,7 @@ export const SERVER_URL_RESOLVED = 'server/url-resolved';
 export type ServersActionTypeToPayloadMap = {
   [SERVERS_LOADED]: {
     servers: Server[];
-    currentServerUrl: Server['url'];
+    selected: Server['url'];
   };
   [SERVER_URL_RESOLUTION_REQUESTED]: Server['url'];
   [SERVER_URL_RESOLVED]: ServerUrlResolutionResult;
diff --git a/src/servers/main.ts b/src/servers/main.ts
index fcce05af55..8fe0acc3d5 100644
--- a/src/servers/main.ts
+++ b/src/servers/main.ts
@@ -135,7 +135,7 @@ export const setupServers = async (localStorage: Record<string, string>): Promis
   });
 
   let servers = select(({ servers }) => servers);
-  let currentServerUrl = select(({ currentServerUrl }) => currentServerUrl);
+  let currentServerUrl = select(({ currentView }) => (typeof currentView === 'object' ? currentView.url : null));
 
   const serversMap = new Map<Server['url'], Server>(
     servers
@@ -201,7 +201,7 @@ export const setupServers = async (localStorage: Record<string, string>): Promis
     type: SERVERS_LOADED,
     payload: {
       servers,
-      currentServerUrl,
+      selected: currentServerUrl,
     },
   });
 };
diff --git a/src/servers/reducers.ts b/src/servers/reducers.ts
index cbf3a76723..ce717543f0 100644
--- a/src/servers/reducers.ts
+++ b/src/servers/reducers.ts
@@ -1,17 +1,11 @@
 import { Reducer } from 'redux';
 
 import { APP_SETTINGS_LOADED } from '../app/actions';
-import { DEEP_LINKS_SERVER_ADDED, DEEP_LINKS_SERVER_FOCUSED } from '../deepLinks/actions';
+import { DEEP_LINKS_SERVER_ADDED } from '../deepLinks/actions';
 import { ActionOf } from '../store/actions';
 import {
   ADD_SERVER_VIEW_SERVER_ADDED,
-  MENU_BAR_ADD_NEW_SERVER_CLICKED,
-  MENU_BAR_SELECT_SERVER_CLICKED,
-  SIDE_BAR_ADD_NEW_SERVER_CLICKED,
   SIDE_BAR_REMOVE_SERVER_CLICKED,
-  SIDE_BAR_SERVER_SELECTED,
-  TOUCH_BAR_SELECT_SERVER_TOUCHED,
-  WEBVIEW_FOCUS_REQUESTED,
   SIDE_BAR_SERVERS_SORTED,
   WEBVIEW_DID_NAVIGATE,
   WEBVIEW_SIDEBAR_STYLE_CHANGED,
@@ -21,85 +15,16 @@ import {
   WEBVIEW_DID_START_LOADING,
   WEBVIEW_DID_FAIL_LOAD,
   WEBVIEW_SERVER_ID,
-  SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
 } from '../ui/actions';
 import { SERVERS_LOADED } from './actions';
 import { Server } from './common';
 
-type CurrentServerUrlAction = (
-  ActionOf<typeof ADD_SERVER_VIEW_SERVER_ADDED>
-  | ActionOf<typeof DEEP_LINKS_SERVER_ADDED>
-  | ActionOf<typeof DEEP_LINKS_SERVER_FOCUSED>
-  | ActionOf<typeof MENU_BAR_ADD_NEW_SERVER_CLICKED>
-  | ActionOf<typeof MENU_BAR_SELECT_SERVER_CLICKED>
-  | ActionOf<typeof SERVERS_LOADED>
-  | ActionOf<typeof SIDE_BAR_ADD_NEW_SERVER_CLICKED>
-  | ActionOf<typeof SIDE_BAR_REMOVE_SERVER_CLICKED>
-  | ActionOf<typeof SIDE_BAR_SERVER_SELECTED>
-  | ActionOf<typeof TOUCH_BAR_SELECT_SERVER_TOUCHED>
-  | ActionOf<typeof WEBVIEW_FOCUS_REQUESTED>
-  | ActionOf<typeof APP_SETTINGS_LOADED>
-  | ActionOf<typeof SIDE_BAR_DOWNLOADS_BUTTON_CLICKED>
-);
-
-type CurrentServerUrlState = string | null;
-
-const ensureUrlFormat = (serverUrl: string | null): string =>
-  (serverUrl ? new URL(serverUrl).href : null);
-
-export const currentServerUrl = (state: CurrentServerUrlState = null, action: CurrentServerUrlAction): CurrentServerUrlState => {
-  switch (action.type) {
-    case ADD_SERVER_VIEW_SERVER_ADDED:
-    case DEEP_LINKS_SERVER_ADDED:
-    case DEEP_LINKS_SERVER_FOCUSED: {
-      const url = action.payload;
-      return url;
-    }
-
-    case MENU_BAR_ADD_NEW_SERVER_CLICKED:
-      return null;
-
-    case MENU_BAR_SELECT_SERVER_CLICKED: {
-      const url = action.payload;
-      return url;
-    }
-
-    case TOUCH_BAR_SELECT_SERVER_TOUCHED:
-      return action.payload;
-
-    case SIDE_BAR_SERVER_SELECTED:
-      return action.payload;
-
-    case SIDE_BAR_REMOVE_SERVER_CLICKED: {
-      if (state === action.payload) {
-        return null;
-      }
-      return state;
-    }
-
-    case SIDE_BAR_ADD_NEW_SERVER_CLICKED:
-      return null;
-
-    case WEBVIEW_FOCUS_REQUESTED: {
-      const { url } = action.payload;
-      return url;
-    }
-
-    case SERVERS_LOADED: {
-      const { currentServerUrl = state } = action.payload;
-      return ensureUrlFormat(currentServerUrl);
-    }
-
-    case APP_SETTINGS_LOADED: {
-      const { currentServerUrl = state } = action.payload;
-      return ensureUrlFormat(currentServerUrl);
-    }
-
-    case SIDE_BAR_DOWNLOADS_BUTTON_CLICKED:
-      return 'Downloads';
+const ensureUrlFormat = (serverUrl: string | null): string => {
+  try {
+    return serverUrl ? new URL(serverUrl).href : null;
+  } catch (error) {
+    return null;
   }
-
-  return state;
 };
 
 type ServersActionTypes = (
diff --git a/src/servers/renderer.ts b/src/servers/renderer.ts
index 68717fa5eb..7dbe5cf156 100644
--- a/src/servers/renderer.ts
+++ b/src/servers/renderer.ts
@@ -65,9 +65,9 @@ const selectBadgeAndFavicon = createStructuredSelector<RootState, RootWindowIcon
     return undefined;
   },
   favicon: ({
-    currentServerUrl,
+    currentView,
     servers,
-  }: RootState) => servers.find((server) => server.url === currentServerUrl)?.favicon,
+  }: RootState) => (typeof currentView === 'object' ? servers.find((server) => server.url === currentView.url)?.favicon : undefined),
 });
 
 let faviconImage: HTMLImageElement;
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index d3686134b5..3c1797598e 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -7,10 +7,8 @@ import {
   externalProtocols,
   trustedCertificates,
 } from '../navigation/reducers';
-import {
-  currentServerUrl,
-  servers,
-} from '../servers/reducers';
+import { servers } from '../servers/reducers';
+import { currentView } from '../ui/reducers/currentView';
 import { isMenuBarEnabled } from '../ui/reducers/isMenuBarEnabled';
 import { isMessageBoxFocused } from '../ui/reducers/isMessageBoxFocused';
 import { isShowWindowOnUnreadChangedEnabled } from '../ui/reducers/isShowWindowOnUnreadChangedEnabled';
@@ -34,7 +32,7 @@ const reducersMap = {
   appPath,
   appVersion,
   clientCertificates,
-  currentServerUrl,
+  currentView,
   doCheckForUpdatesOnStartup,
   externalProtocols,
   isCheckingForUpdates,
diff --git a/src/ui/components/AddServerView/index.tsx b/src/ui/components/AddServerView/index.tsx
index 80abf38846..f9a3abf70a 100644
--- a/src/ui/components/AddServerView/index.tsx
+++ b/src/ui/components/AddServerView/index.tsx
@@ -29,9 +29,7 @@ import { Wrapper } from './styles';
 const defaultServerUrl = new URL('https://open.rocket.chat/');
 
 export const AddServerView: FC = () => {
-  const currentServerUrl = useSelector(({ currentServerUrl }: RootState) => currentServerUrl);
-
-  const isVisible = currentServerUrl === null;
+  const isVisible = useSelector(({ currentView }: RootState) => currentView === 'add-new-server');
   const dispatch = useDispatch<Dispatch<RootAction>>();
   const { t } = useTranslation();
   const [input, setInput] = useState('');
diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
index 0f45d886cf..23df4b668b 100644
--- a/src/ui/components/DownloadsManagerView/index.tsx
+++ b/src/ui/components/DownloadsManagerView/index.tsx
@@ -28,7 +28,7 @@ const fileStatus = [
 
 const DownloadsManagerView: FC = () => {
   const { t } = useTranslation();
-  const isVisible = useSelector(({ currentServerUrl }: RootState) => currentServerUrl === 'Downloads');
+  const isVisible = useSelector(({ currentView }: RootState) => currentView === 'downloads');
   const servers = useSelector(({ servers }: RootState) => servers);
   const serverOptions: [string, string][] = [['all', 'All']];
   servers.forEach((server) => {
diff --git a/src/ui/components/ServersView/index.tsx b/src/ui/components/ServersView/index.tsx
index 56f0d69853..9ae84ad2a2 100644
--- a/src/ui/components/ServersView/index.tsx
+++ b/src/ui/components/ServersView/index.tsx
@@ -1,20 +1,28 @@
 import React, { FC } from 'react';
 import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
 
 import { RootState } from '../../../store/rootReducer';
 import { ReparentingContainer } from '../utils/ReparentingContainer';
 import { ServerPane } from './ServerPane';
 
 export const ServersView: FC = () => {
-  const servers = useSelector(({ servers }: RootState) => servers);
-  const currentServerUrl = useSelector(({ currentServerUrl }: RootState) => currentServerUrl);
+  const servers = useSelector(
+    createSelector(
+      ({ currentView }: RootState) => currentView,
+      ({ servers }: RootState) => servers,
+      (currentView, servers) => servers.map((server) => Object.assign(server, {
+        selected: typeof currentView === 'object' ? server.url === currentView.url : false,
+      })),
+    ),
+  );
 
   return <ReparentingContainer>
     {servers.map((server) => <ServerPane
       key={server.url}
       lastPath={server.lastPath}
       serverUrl={server.url}
-      isSelected={currentServerUrl === server.url}
+      isSelected={server.selected}
       isFailed={server.failed}
     />)}
   </ReparentingContainer>;
diff --git a/src/ui/components/SideBar/index.tsx b/src/ui/components/SideBar/index.tsx
index da71267ea5..26e56da68f 100644
--- a/src/ui/components/SideBar/index.tsx
+++ b/src/ui/components/SideBar/index.tsx
@@ -5,6 +5,7 @@ import React, { useMemo, FC, DragEvent, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Dispatch } from 'redux';
+import { createSelector } from 'reselect';
 
 import { RootAction } from '../../../store/actions';
 import { RootState } from '../../../store/rootReducer';
@@ -113,15 +114,22 @@ const ServerButton: FC<ServerButtonProps> = ({
 };
 
 export const SideBar: FC = () => {
-  const servers = useSelector(({ servers }: RootState) => servers);
+  const servers = useSelector(
+    createSelector(
+      ({ currentView }: RootState) => currentView,
+      ({ servers }: RootState) => servers,
+      (currentView, servers) => servers.map((server) => Object.assign(server, {
+        selected: typeof currentView === 'object' ? server.url === currentView.url : false,
+      })),
+    ),
+  );
   const isSideBarEnabled = useSelector(({ isSideBarEnabled }: RootState) => isSideBarEnabled);
-  const currentServerUrl = useSelector(({ currentServerUrl }: RootState) => currentServerUrl);
   const isVisible = servers.length > 0 && isSideBarEnabled;
 
   const {
     background,
     color,
-  } = servers.find(({ url }) => url === currentServerUrl)?.style || {};
+  } = servers.find(({ selected }) => selected)?.style || {};
 
   const isEachShortcutVisible = useKeyboardShortcuts();
   const {
@@ -155,7 +163,7 @@ export const SideBar: FC = () => {
             ? `${ server.title } - ${ server.url }`
             : server.title}
           shortcutNumber={order <= 9 ? String(order + 1) : undefined}
-          isSelected={currentServerUrl === server.url}
+          isSelected={server.selected}
           favicon={server.favicon}
           hasUnreadMessages={!!server.badge}
           mentionCount={typeof server.badge === 'number' ? server.badge : undefined}
diff --git a/src/ui/components/SideBar/useSorting.tsx b/src/ui/components/SideBar/useSorting.tsx
index 7ed97beaea..1ecc0f6678 100644
--- a/src/ui/components/SideBar/useSorting.tsx
+++ b/src/ui/components/SideBar/useSorting.tsx
@@ -9,8 +9,8 @@ import {
   SIDE_BAR_SERVER_SELECTED,
 } from '../../actions';
 
-export const useSorting = (servers: Server[]): {
-  sortedServers: Server[];
+export const useSorting = <S extends Server>(servers: S[]): {
+  sortedServers: S[];
   draggedServerUrl: string;
   handleDragStart: (url: string) => (event: DragEvent) => void;
   handleDragEnd: (event: DragEvent) => void;
diff --git a/src/ui/main/menuBar.ts b/src/ui/main/menuBar.ts
index 50831e3da5..a19794ec5e 100644
--- a/src/ui/main/menuBar.ts
+++ b/src/ui/main/menuBar.ts
@@ -152,7 +152,7 @@ const createEditMenu = createSelector(
 );
 
 const selectViewDeps = createStructuredSelector({
-  currentServerUrl: ({ currentServerUrl }: RootState) => currentServerUrl,
+  currentView: ({ currentView }: RootState) => currentView,
   isSideBarEnabled: ({ isSideBarEnabled }: RootState) => isSideBarEnabled,
   isTrayIconEnabled: ({ isTrayIconEnabled }: RootState) => isTrayIconEnabled,
   isMenuBarEnabled: ({ isMenuBarEnabled }: RootState) => isMenuBarEnabled,
@@ -162,7 +162,7 @@ const selectViewDeps = createStructuredSelector({
 const createViewMenu = createSelector(
   selectViewDeps,
   ({
-    currentServerUrl,
+    currentView,
     isSideBarEnabled,
     isTrayIconEnabled,
     isMenuBarEnabled,
@@ -175,7 +175,7 @@ const createViewMenu = createSelector(
         id: 'reload',
         label: t('menus.reload'),
         accelerator: 'CommandOrControl+R',
-        enabled: !!currentServerUrl,
+        enabled: typeof currentView === 'object' && !!currentView.url,
         click: async () => {
           const browserWindow = await getRootWindow();
 
@@ -183,14 +183,14 @@ const createViewMenu = createSelector(
             browserWindow.showInactive();
           }
           browserWindow.focus();
-          const guestWebContents = getWebContentsByServerUrl(currentServerUrl);
+          const guestWebContents = getWebContentsByServerUrl(typeof currentView === 'object' ? currentView.url : null);
           guestWebContents.reload();
         },
       },
       {
         id: 'reloadIgnoringCache',
         label: t('menus.reloadIgnoringCache'),
-        enabled: !!currentServerUrl,
+        enabled: typeof currentView === 'object' && !!currentView.url,
         click: async () => {
           const browserWindow = await getRootWindow();
 
@@ -198,17 +198,17 @@ const createViewMenu = createSelector(
             browserWindow.showInactive();
           }
           browserWindow.focus();
-          const guestWebContents = getWebContentsByServerUrl(currentServerUrl);
+          const guestWebContents = getWebContentsByServerUrl(typeof currentView === 'object' ? currentView.url : null);
           guestWebContents.reloadIgnoringCache();
         },
       },
       {
         id: 'openDevTools',
         label: t('menus.openDevTools'),
-        enabled: !!currentServerUrl,
+        enabled: typeof currentView === 'object' && !!currentView.url,
         accelerator: process.platform === 'darwin' ? 'Command+Alt+I' : 'Ctrl+Shift+I',
         click: () => {
-          const guestWebContents = getWebContentsByServerUrl(currentServerUrl);
+          const guestWebContents = getWebContentsByServerUrl(typeof currentView === 'object' ? currentView.url : null);
           guestWebContents.toggleDevTools();
         },
       },
@@ -216,7 +216,7 @@ const createViewMenu = createSelector(
       {
         id: 'back',
         label: t('menus.back'),
-        enabled: !!currentServerUrl,
+        enabled: typeof currentView === 'object' && !!currentView.url,
         accelerator: process.platform === 'darwin' ? 'Command+[' : 'Alt+Left',
         click: async () => {
           const browserWindow = await getRootWindow();
@@ -225,14 +225,14 @@ const createViewMenu = createSelector(
             browserWindow.showInactive();
           }
           browserWindow.focus();
-          const guestWebContents = getWebContentsByServerUrl(currentServerUrl);
+          const guestWebContents = getWebContentsByServerUrl(typeof currentView === 'object' ? currentView.url : null);
           guestWebContents.goBack();
         },
       },
       {
         id: 'forward',
         label: t('menus.forward'),
-        enabled: !!currentServerUrl,
+        enabled: typeof currentView === 'object' && !!currentView.url,
         accelerator: process.platform === 'darwin' ? 'Command+]' : 'Alt+Right',
         click: async () => {
           const browserWindow = await getRootWindow();
@@ -241,7 +241,7 @@ const createViewMenu = createSelector(
             browserWindow.showInactive();
           }
           browserWindow.focus();
-          const guestWebContents = getWebContentsByServerUrl(currentServerUrl);
+          const guestWebContents = getWebContentsByServerUrl(typeof currentView === 'object' ? currentView.url : null);
           guestWebContents.goForward();
         },
       },
@@ -369,7 +369,7 @@ const createViewMenu = createSelector(
 
 const selectWindowDeps = createStructuredSelector({
   servers: ({ servers }:RootState) => servers,
-  currentServerUrl: ({ currentServerUrl }:RootState) => currentServerUrl,
+  currentView: ({ currentView }: RootState) => currentView,
   isShowWindowOnUnreadChangedEnabled: ({ isShowWindowOnUnreadChangedEnabled }:RootState) => isShowWindowOnUnreadChangedEnabled,
 });
 
@@ -377,7 +377,7 @@ const createWindowMenu = createSelector(
   selectWindowDeps,
   ({
     servers,
-    currentServerUrl,
+    currentView,
     isShowWindowOnUnreadChangedEnabled,
   }): MenuItemConstructorOptions => ({
     id: 'windowMenu',
@@ -404,9 +404,9 @@ const createWindowMenu = createSelector(
       ...on(servers.length > 0, () => [
         ...servers.map((server, i): MenuItemConstructorOptions => ({
           id: server.url,
-          type: currentServerUrl ? 'checkbox' : 'normal',
+          type: typeof currentView === 'object' && currentView.url === server.url ? 'checkbox' : 'normal',
           label: server.title.replace(/&/g, '&&'),
-          checked: currentServerUrl === server.url,
+          checked: typeof currentView === 'object' && currentView.url === server.url,
           accelerator: `CommandOrControl+${ i + 1 }`,
           click: async () => {
             const browserWindow = await getRootWindow();
@@ -426,7 +426,7 @@ const createWindowMenu = createSelector(
       {
         id: 'downloads',
         label: t('menus.downloads'),
-        checked: currentServerUrl === 'Downloads',
+        checked: currentView === 'downloads',
         accelerator: 'CommandOrControl+D',
         click: () => {
           dispatch({ type: SIDE_BAR_DOWNLOADS_BUTTON_CLICKED });
diff --git a/src/ui/main/rootWindow.ts b/src/ui/main/rootWindow.ts
index 426992ed94..3fb1b20f67 100644
--- a/src/ui/main/rootWindow.ts
+++ b/src/ui/main/rootWindow.ts
@@ -175,10 +175,10 @@ export const setupRootWindow = (): void => {
     }),
 
     watch(({
+      currentView,
       servers,
-      currentServerUrl,
     }) => {
-      const currentServer = servers.find(({ url }) => url === currentServerUrl);
+      const currentServer = typeof currentView === 'object' ? servers.find(({ url }) => url === currentView.url) : null;
       return (currentServer && currentServer.title) || app.name;
     }, async (windowTitle) => {
       const browserWindow = await getRootWindow();
diff --git a/src/ui/main/touchBar.ts b/src/ui/main/touchBar.ts
index 4fd51e4f21..d1c10f3d43 100644
--- a/src/ui/main/touchBar.ts
+++ b/src/ui/main/touchBar.ts
@@ -116,8 +116,8 @@ const toggleMessageFormattingButtons = (messageBoxFormattingButtons: TouchBarSeg
   });
 };
 
-const selectCurrentServer = ({ servers, currentServerUrl }: RootState): Server =>
-  servers.find(({ url }) => url === currentServerUrl);
+const selectCurrentServer = ({ servers, currentView }: RootState): Server =>
+  (typeof currentView === 'object' ? servers.find(({ url }) => url === currentView.url) : null);
 
 class TouchBarService extends Service {
   protected initialize(): void {
diff --git a/src/ui/reducers/currentView.ts b/src/ui/reducers/currentView.ts
new file mode 100644
index 0000000000..fc076d33f6
--- /dev/null
+++ b/src/ui/reducers/currentView.ts
@@ -0,0 +1,82 @@
+import { APP_SETTINGS_LOADED } from '../../app/actions';
+import {
+  DEEP_LINKS_SERVER_ADDED,
+  DEEP_LINKS_SERVER_FOCUSED,
+} from '../../deepLinks/actions';
+import { SERVERS_LOADED } from '../../servers/actions';
+import { ActionOf } from '../../store/actions';
+import {
+  ADD_SERVER_VIEW_SERVER_ADDED,
+  MENU_BAR_ADD_NEW_SERVER_CLICKED,
+  MENU_BAR_SELECT_SERVER_CLICKED,
+  SIDE_BAR_ADD_NEW_SERVER_CLICKED,
+  SIDE_BAR_DOWNLOADS_BUTTON_CLICKED,
+  SIDE_BAR_REMOVE_SERVER_CLICKED,
+  SIDE_BAR_SERVER_SELECTED,
+  TOUCH_BAR_SELECT_SERVER_TOUCHED,
+  WEBVIEW_FOCUS_REQUESTED,
+} from '../actions';
+
+type CurrentViewAction = (
+  ActionOf<typeof ADD_SERVER_VIEW_SERVER_ADDED>
+  | ActionOf<typeof APP_SETTINGS_LOADED>
+  | ActionOf<typeof DEEP_LINKS_SERVER_ADDED>
+  | ActionOf<typeof DEEP_LINKS_SERVER_FOCUSED>
+  | ActionOf<typeof MENU_BAR_ADD_NEW_SERVER_CLICKED>
+  | ActionOf<typeof MENU_BAR_SELECT_SERVER_CLICKED>
+  | ActionOf<typeof SERVERS_LOADED>
+  | ActionOf<typeof SIDE_BAR_ADD_NEW_SERVER_CLICKED>
+  | ActionOf<typeof SIDE_BAR_DOWNLOADS_BUTTON_CLICKED>
+  | ActionOf<typeof SIDE_BAR_REMOVE_SERVER_CLICKED>
+  | ActionOf<typeof SIDE_BAR_SERVER_SELECTED>
+  | ActionOf<typeof TOUCH_BAR_SELECT_SERVER_TOUCHED>
+  | ActionOf<typeof WEBVIEW_FOCUS_REQUESTED>
+);
+
+type CurrentViewState = 'add-new-server' | 'downloads' | { url: string; };
+
+export const currentView = (state: CurrentViewState = 'add-new-server', action: CurrentViewAction): CurrentViewState => {
+  switch (action.type) {
+    case ADD_SERVER_VIEW_SERVER_ADDED:
+    case DEEP_LINKS_SERVER_ADDED:
+    case DEEP_LINKS_SERVER_FOCUSED:
+    case MENU_BAR_SELECT_SERVER_CLICKED:
+    case TOUCH_BAR_SELECT_SERVER_TOUCHED:
+    case SIDE_BAR_SERVER_SELECTED: {
+      const url = action.payload;
+      return { url };
+    }
+
+    case WEBVIEW_FOCUS_REQUESTED: {
+      const { url } = action.payload;
+      return { url };
+    }
+
+    case SERVERS_LOADED: {
+      const { selected } = action.payload;
+      return selected ? { url: selected } : 'add-new-server';
+    }
+
+    case APP_SETTINGS_LOADED: {
+      const { currentView } = action.payload;
+      return currentView;
+    }
+
+    case MENU_BAR_ADD_NEW_SERVER_CLICKED:
+    case SIDE_BAR_ADD_NEW_SERVER_CLICKED:
+      return 'add-new-server';
+
+    case SIDE_BAR_REMOVE_SERVER_CLICKED: {
+      if (state === action.payload) {
+        return 'add-new-server';
+      }
+
+      return state;
+    }
+
+    case SIDE_BAR_DOWNLOADS_BUTTON_CLICKED:
+      return 'downloads';
+  }
+
+  return state;
+};

From 8bfbb0e26261574eecc549ba38ab45691d8deec4 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 10 Nov 2020 17:10:14 -0300
Subject: [PATCH 58/66] Rollback accidental addition of dependencies

---
 package.json |  18 ---
 yarn.lock    | 302 +--------------------------------------------------
 2 files changed, 5 insertions(+), 315 deletions(-)

diff --git a/package.json b/package.json
index c575832b5d..7d94f907d3 100644
--- a/package.json
+++ b/package.json
@@ -41,30 +41,15 @@
     "@rocket.chat/fuselage-hooks": "^0.17.2",
     "@rocket.chat/icons": "^0.17.2",
     "abort-controller": "^3.0.0",
-    "debug": "^4.1.1",
-    "dictionary-de": "^2.0.3",
-    "dictionary-en-gb": "^2.2.1",
-    "dictionary-en-us": "^2.2.1",
-    "dictionary-es-es": "^1.0.1",
-    "dictionary-fr": "^2.4.1",
-    "dictionary-pt-br": "^2.0.1",
-    "dictionary-ru": "^2.0.1",
-    "dictionary-tr": "^1.3.3",
-    "electron-fetch": "^1.4.0",
-    "electron-hunspell": "^1.1.2",
-    "electron-reload": "^1.5.0",
     "electron-store": "^6.0.0",
     "electron-updater": "^4.3.5",
     "i18next": "^19.7.0",
-    "i18next-node-fs-backend": "^2.1.1",
-    "mem": "^6.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-i18next": "^11.7.3",
     "react-keyed-flatten-children": "^1.3.0",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",
-    "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.2",
@@ -88,7 +73,6 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/plugin-typescript": "^6.0.0",
     "@types/electron-devtools-installer": "^2.2.0",
-    "@types/i18next-node-fs-backend": "^2.1.0",
     "@types/jest": "^26.0.14",
     "@types/meteor": "^1.4.49",
     "@types/node": "^12",
@@ -103,8 +87,6 @@
     "@typescript-eslint/parser": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "builtin-modules": "^3.1.0",
-    "chai": "^4.2.0",
-    "chai-string": "^1.5.0",
     "chokidar": "^3.4.2",
     "conventional-changelog-cli": "^2.1.0",
     "convert-svg-to-png": "^0.5.0",
diff --git a/yarn.lock b/yarn.lock
index 2574072e05..9925398734 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1692,50 +1692,6 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@redux-saga/core@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
-  integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
-  dependencies:
-    "@babel/runtime" "^7.6.3"
-    "@redux-saga/deferred" "^1.1.2"
-    "@redux-saga/delay-p" "^1.1.2"
-    "@redux-saga/is" "^1.1.2"
-    "@redux-saga/symbols" "^1.1.2"
-    "@redux-saga/types" "^1.1.0"
-    redux "^4.0.4"
-    typescript-tuple "^2.2.1"
-
-"@redux-saga/deferred@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
-  integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
-
-"@redux-saga/delay-p@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
-  integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
-  dependencies:
-    "@redux-saga/symbols" "^1.1.2"
-
-"@redux-saga/is@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
-  integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
-  dependencies:
-    "@redux-saga/symbols" "^1.1.2"
-    "@redux-saga/types" "^1.1.0"
-
-"@redux-saga/symbols@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
-  integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
-
-"@redux-saga/types@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
-  integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
-
 "@rocket.chat/css-in-js@^0.17.2":
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/@rocket.chat/css-in-js/-/css-in-js-0.17.2.tgz#700decac1a7ed475f46b57e44f0671bc4ff7e86e"
@@ -1993,13 +1949,6 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/i18next-node-fs-backend@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/i18next-node-fs-backend/-/i18next-node-fs-backend-2.1.0.tgz#83616bc8589f155438f150b83ec59b92e5347668"
-  integrity sha512-bOOeT89UO/bYLJoQHdN5S3pggj7mMmFfQMBpDdUQOQIQkENGpnTwhNsIM/kjl1NE2HEihjlRZUNVV60Ze86UZA==
-  dependencies:
-    i18next ">=17.0.11"
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -2596,11 +2545,6 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
-assertion-error@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
-  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
-
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -3129,23 +3073,6 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chai-string@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/chai-string/-/chai-string-1.5.0.tgz#0bdb2d8a5f1dbe90bc78ec493c1c1c180dd4d3d2"
-  integrity sha512-sydDC3S3pNAQMYwJrs6dQX0oBQ6KfIPuOZ78n7rocW0eJJlsHPh2t3kwW7xfwYA/1Bf6/arGtSUo16rxR2JFlw==
-
-chai@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
-  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
-  dependencies:
-    assertion-error "^1.1.0"
-    check-error "^1.0.2"
-    deep-eql "^3.0.1"
-    get-func-name "^2.0.0"
-    pathval "^1.1.0"
-    type-detect "^4.0.5"
-
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -3176,26 +3103,6 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-check-error@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
-  integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
-
-chokidar@^3.0.2:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.0.tgz#12c0714668c55800f659e262d4962a97faf554a6"
-  integrity sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==
-  dependencies:
-    anymatch "~3.1.1"
-    braces "~3.0.2"
-    glob-parent "~5.1.0"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.2.0"
-  optionalDependencies:
-    fsevents "~2.1.1"
-
 chokidar@^3.4.2:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
@@ -3841,13 +3748,6 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
-deep-eql@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
-  integrity sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==
-  dependencies:
-    type-detect "^4.0.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -3922,46 +3822,6 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
   integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
-dictionary-de@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dictionary-de/-/dictionary-de-2.0.3.tgz#df50c749fddbff601f5bd044aef4622a365a15b2"
-  integrity sha512-fbNcCIjDrdNvu7DzMzkOY77vIaGqiDQqf9vtwGud1fcSxVWwX6EdtHcosmgG7AA10u3QgDVkymMaX9mr3elwRw==
-
-dictionary-en-gb@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/dictionary-en-gb/-/dictionary-en-gb-2.2.1.tgz#8ef21b484b0ce89cdebd60c1b2b65f56df9a475f"
-  integrity sha512-kYhSoaD9yOaq/h14DyT/+hyjs5X96kFdnlmy582wr+hCOIRuv1hqAe9gWM+oUQAA1+MH8fAKzyAsTxS8ps/qsg==
-
-dictionary-en-us@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/dictionary-en-us/-/dictionary-en-us-2.2.1.tgz#f57ef9ae0edcfa0a70db6558843de5a01cb87771"
-  integrity sha512-Z8mycV0ywTfjbUTi0JZfQHqBZhu4CYFtpf7KluSGpt3xHpFlal2S/hiK50tlPynOtR5K3pG5wCradnz1yxwOHA==
-
-dictionary-es-es@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/dictionary-es-es/-/dictionary-es-es-1.0.1.tgz#c532b118b29c20854f7f6c32d901162b7950662e"
-  integrity sha512-DfKnkKC5B2NVH61jA6EKAC4re09VxMBHwZLEqrJXiKdpLkWsJXtf3+ITdVAIbk7sFvBYYmI2zEK9ETyv5E5/Dg==
-
-dictionary-fr@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/dictionary-fr/-/dictionary-fr-2.4.1.tgz#b013bb547f3ceae2fdb59a5bf4e618e7983ebb45"
-  integrity sha512-hgOBOvNNw1hf2AZajXzVqUuzI8Lnoqj2tqU+jerV6XshuRmGh6d0fNhNIH5juqsR+L4M8kCL0R91F1ONCden4Q==
-
-dictionary-pt-br@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/dictionary-pt-br/-/dictionary-pt-br-2.0.1.tgz#c1f363658735fb4c692b022066d5d9e9734853a7"
-  integrity sha512-TvPlZWXzKya6vnajLKfKr/FwOeT2bmGHlWlasA4MVhmTZeXH0Fif37uLigQGLWZlqncz7iX57iXGAwvN5SbDIg==
-
-dictionary-ru@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/dictionary-ru/-/dictionary-ru-2.0.1.tgz#92a763f821f629d985b2b5ed554a7d25eb055a46"
-  integrity sha512-jCBYpgYuu5UBaHVaTr8qIXRDVTa7skkhd5PdVL0sh1clg6pcinsqXJcM7qj7UnjwrnCr/k3zueHG4k025MZS+Q==
-
-dictionary-tr@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/dictionary-tr/-/dictionary-tr-1.3.3.tgz#85aa9aa434c8258cec5bc28b405e983543de7e2d"
-  integrity sha512-p054brtIocq0evXT7aiHR8x1eGMH3GMdWRzC7JlKF/7bWVW/Cp1LFudv2cEPPLG4G9EKPjWY6jOscjYU7HnSNA==
-
 diff-sequences@^25.2.6:
   version "25.2.6"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
@@ -4105,20 +3965,6 @@ electron-devtools-installer@^3.1.1:
     semver "^7.2.1"
     unzip-crx-3 "^0.2.0"
 
-electron-fetch@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/electron-fetch/-/electron-fetch-1.4.0.tgz#a830d400f8ad358acba9b3c591e6ed477916bac5"
-  integrity sha512-rednYIpMbuzekTroNndQOFl95c4I/wMEbH9jxGoDEoKrM07b7FWydy6I3pbiAbCxDcYpmHtzMY6ykyLagR7JHw==
-  dependencies:
-    encoding "^0.1.12"
-
-electron-hunspell@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/electron-hunspell/-/electron-hunspell-1.1.2.tgz#58b64fc09ad3d8e99ea74846f333c4efedc4fa03"
-  integrity sha512-Wrue7/aOlOEabhMm4GQSfvGADKHzCDkuYIEOINSEwMjHrvwTj7e1gI1kIO5wc+JdSL1uhFjwROfrqiLmnxqIKg==
-  dependencies:
-    hunspell-asm "^4.0.2"
-
 electron-notarize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/electron-notarize/-/electron-notarize-1.0.0.tgz#bc925b1ccc3f79e58e029e8c4706572b01a9fd8f"
@@ -4141,13 +3987,6 @@ electron-publish@22.9.1:
     lazy-val "^1.0.4"
     mime "^2.4.6"
 
-electron-reload@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/electron-reload/-/electron-reload-1.5.0.tgz#179ab1f6941fcf0ed261c37b16dc465e201348f5"
-  integrity sha512-L9X6LzsL3Bt2j0eJ4/MBrI9Vt902KvVUtBB7J4qrL1A9sXqC2fE0lpvUAlOThpJYh6zWO1l86U/YiEN9bDURHw==
-  dependencies:
-    chokidar "^3.0.2"
-
 electron-store@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/electron-store/-/electron-store-6.0.1.tgz#2178b9dc37aeb749d99cf9d1d1bc090890b922dc"
@@ -4203,27 +4042,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emscripten-wasm-loader@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/emscripten-wasm-loader/-/emscripten-wasm-loader-3.0.3.tgz#60d4f33dd62fc41cf6d98fbca94b24bc246f133b"
-  integrity sha512-fyq2maBt5LOou27LEBlL5H6G04BxgSamXkvmMsAuIT6rd8ioH4BxNQhuyl6jVPeODh6U8Wk1BoFZxzHpg3o8wA==
-  dependencies:
-    getroot "^1.0.0"
-    nanoid "^2.0.3"
-    unixify "^1.0.0"
-
 encodeurl@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-encoding@^0.1.12:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
-  dependencies:
-    iconv-lite "~0.4.13"
-
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4977,11 +4800,6 @@ fsevents@^2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.0.tgz#4150396a427ecb5baa747725b70270a72b17bc17"
   integrity sha512-pKnaUh2TNvk+/egJdBw1h46LwyLx8BzEq+MGCf/RMCVfEHHsGOCWG00dqk91kUPPArIIwMBg9T/virxwzP03cA==
 
-fsevents@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
-  integrity sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==
-
 fsevents@~2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
@@ -5021,11 +4839,6 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-func-name@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
-  integrity sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=
-
 get-intrinsic@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
@@ -5087,13 +4900,6 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-getroot@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/getroot/-/getroot-1.0.0.tgz#ac4635c5fa4037741d6ead61ccc16367439efcbe"
-  integrity sha512-W9Q31kOv921dQuZBeAbK4R/dAPbC0WkhZD3alLcdVwjSkEtS1aX8twrzG3I5yo0sQ88M/d4JOqVbRiCuI/XPNA==
-  dependencies:
-    tslib "^1.7.1"
-
 git-raw-commits@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-2.0.0.tgz#d92addf74440c14bcc5c83ecce3fb7f8a79118b5"
@@ -5424,30 +5230,14 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-hunspell-asm@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/hunspell-asm/-/hunspell-asm-4.0.2.tgz#20c50ea50a52467534a809b3095a064231e7171e"
-  integrity sha512-u3ZuEYKGYnLZlIs+k5S+KdY+Q57mYD46fTwZJCiSXdES+fhxcLNF5mJ0nxjqrPAgE/8Kow6XLxRdRd/HDUPQZg==
-  dependencies:
-    emscripten-wasm-loader "^3.0.3"
-    nanoid "^2.1.5"
-
-i18next-node-fs-backend@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/i18next-node-fs-backend/-/i18next-node-fs-backend-2.1.3.tgz#483fa9eda4c152d62a3a55bcae2a5727ba887559"
-  integrity sha512-CreMFiVl3ChlMc5ys/e0QfuLFOZyFcL40Jj6jaKD6DxZ/GCUMxPI9BpU43QMWUgC7r+PClpxg2cGXAl0CjG04g==
-  dependencies:
-    js-yaml "3.13.1"
-    json5 "2.0.0"
-
-i18next@>=17.0.11, i18next@^19.7.0:
+i18next@^19.7.0:
   version "19.8.3"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.8.3.tgz#10df7222db8c23389b13bceb9ba67a5e20a0241e"
   integrity sha512-eVrqAw2gGGYYJaJMYw4VM1FNFawLD4b84IsoTZMVXeWHaxAM2gyTa34j2Sip15UkBz/LrSxdFJj0Jhlrz7EvHA==
   dependencies:
     "@babel/runtime" "^7.12.0"
 
-iconv-lite@0.4.24, iconv-lite@~0.4.13:
+iconv-lite@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -6674,7 +6464,7 @@ js-queue@2.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@3.13.1, js-yaml@^3.13.1:
+js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -6828,13 +6618,6 @@ json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
-json5@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.0.0.tgz#b61abf97aa178c4b5853a66cc8eecafd03045d78"
-  integrity sha512-0EdQvHuLm7yJ7lyG5dp7Q3X2ku++BG5ZHaJ5FTnaXpKqDrw4pMxel5Bt3oAYMthnrthFBdnZ1FcsXTPyrQlV0w==
-  dependencies:
-    minimist "^1.2.0"
-
 json5@2.x, json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
@@ -7178,13 +6961,6 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-age-cleaner@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
-  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
-  dependencies:
-    p-defer "^1.0.0"
-
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
@@ -7219,14 +6995,6 @@ matcher@^2.1.0:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-mem@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-6.0.1.tgz#3f8ad1b0f8c4e00daf07f104e95b9d78131d7908"
-  integrity sha512-uIRYASflIsXqvKe+7aXbLrydaRzz4qiK6amqZDQI++eRtW3UoKtnDcGeCAOREgll7YMxO5E4VB9+3B0LFmy96g==
-  dependencies:
-    map-age-cleaner "^0.1.3"
-    mimic-fn "^3.0.0"
-
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@@ -7493,11 +7261,6 @@ nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
   integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
 
-nanoid@^2.0.3, nanoid@^2.1.5:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
-  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -7836,11 +7599,6 @@ p-cancelable@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
   integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
 
-p-defer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
-  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
-
 p-each-series@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
@@ -8028,11 +7786,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathval@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
-  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
-
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -8517,13 +8270,6 @@ readable-stream@^3.0.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readdirp@~3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.2.0.tgz#c30c33352b12c96dfb4b895421a49fd5a9593839"
-  integrity sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==
-  dependencies:
-    picomatch "^2.0.4"
-
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -8577,14 +8323,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-saga@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
-  integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
-  dependencies:
-    "@redux-saga/core" "^1.1.3"
-
-redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
+redux@^4.0.0, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -9879,11 +9618,6 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.7.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
-  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
-
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -9932,7 +9666,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5:
+type-detect@4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -9969,25 +9703,6 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript-compare@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
-  integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
-  dependencies:
-    typescript-logic "^0.0.0"
-
-typescript-logic@^0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
-  integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
-
-typescript-tuple@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
-  integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
-  dependencies:
-    typescript-compare "^0.0.2"
-
 typescript@^4.0.3:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.5.tgz#ae9dddfd1069f1cb5beb3ef3b2170dd7c1332389"
@@ -10056,13 +9771,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unixify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unixify/-/unixify-1.0.0.tgz#3a641c8c2ffbce4da683a5c70f03a462940c2090"
-  integrity sha1-OmQcjC/7zk2mg6XHDwOkYpQMIJA=
-  dependencies:
-    normalize-path "^2.1.1"
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"

From ccb263604eb696e5d8972ca809c37d4d863bd270 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 11 Nov 2020 22:55:48 -0300
Subject: [PATCH 59/66] Add more number formatters

---
 src/i18n/common.ts | 93 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 92 insertions(+), 1 deletion(-)

diff --git a/src/i18n/common.ts b/src/i18n/common.ts
index ec8efb22cb..8652bfc171 100644
--- a/src/i18n/common.ts
+++ b/src/i18n/common.ts
@@ -2,12 +2,103 @@ import { InitOptions } from 'i18next';
 
 export const fallbackLng = 'en' as const;
 
+const byteUnits = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte'];
+
+const formatBytes = (bytes: number): string => {
+  const order = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), byteUnits.length - 1);
+  const unit = byteUnits[order];
+
+  const formatter = new Intl.NumberFormat(undefined, {
+    notation: 'compact',
+    style: 'unit',
+    unit,
+    maximumFractionDigits: 1,
+  });
+  return formatter.format(bytes / Math.pow(1024, order));
+};
+
+const formatByteSpeed = (bytesPerSecond: number): string => {
+  const order = Math.min(Math.floor(Math.log(bytesPerSecond) / Math.log(1024)), byteUnits.length - 1);
+  const unit = `${ byteUnits[order] }-per-second`;
+
+  const formatter = new Intl.NumberFormat(undefined, {
+    notation: 'compact',
+    style: 'unit',
+    unit,
+    maximumFractionDigits: 1,
+  });
+  return formatter.format(bytesPerSecond / Math.pow(1024, order));
+};
+
+const formatPercentage = (ratio: number): string => {
+  const formatter = new Intl.NumberFormat(undefined, {
+    style: 'percent',
+    maximumFractionDigits: 0,
+  });
+  return formatter.format(ratio);
+};
+
+const formatDuration = (duration: number): string => {
+  const formatter = new Intl.RelativeTimeFormat(undefined, {
+    style: 'narrow',
+    numeric: 'always',
+  });
+
+  duration /= 1000;
+
+  if (duration / 60 < 1) {
+    return formatter.format(duration, 'second');
+  }
+  duration /= 60;
+
+  if (duration / 60 < 1) {
+    return formatter.format(duration, 'minute');
+  }
+  duration /= 60;
+
+  if (duration / 24 < 1) {
+    return formatter.format(duration, 'hour');
+  }
+  duration /= 24;
+
+  if (duration / 7 < 1) {
+    return formatter.format(duration, 'day');
+  }
+  duration /= 7;
+
+  if (duration / 30 < 1) {
+    return formatter.format(duration, 'week');
+  }
+  duration /= 30;
+
+  if (duration / 12 < 1) {
+    return formatter.format(duration, 'month');
+  }
+  duration /= 12;
+
+  return formatter.format(duration, 'year');
+};
+
 export const interpolation: InitOptions['interpolation'] = {
-  format: (value, _format, lng) => {
+  format: (value, format, lng) => {
     if (value instanceof Date && !Number.isNaN(value.getTime())) {
       return new Intl.DateTimeFormat(lng).format(value);
     }
 
+    switch (format) {
+      case 'byteSize':
+        return formatBytes(value);
+
+      case 'byteSpeed':
+        return formatByteSpeed(value);
+
+      case 'percentage':
+        return formatPercentage(value);
+
+      case 'duration':
+        return formatDuration(value);
+    }
+
     return String(value);
   },
 };

From d965b487286d9aba4adb9c9cbb7932fef7233a62 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 02:55:48 -0300
Subject: [PATCH 60/66] Delegate download handling to the main process

---
 package.json                                  |   7 -
 src/app/actions.ts                            |   2 +
 src/app/selectors.ts                          |   1 +
 src/downloads.ts                              | 102 -------
 src/downloads/actions.ts                      |  13 +
 src/downloads/common.ts                       |  23 ++
 src/downloads/main.ts                         | 188 ++++++++++++
 src/downloads/reducers/downloads.ts           |  56 ++++
 src/i18n/en.i18n.json                         |  21 ++
 src/ipc/channels.ts                           |   8 +
 src/main.ts                                   |   5 +-
 src/servers/common.ts                         |   2 +-
 src/servers/reducers.ts                       |  29 +-
 src/store/actions.ts                          |   2 +
 src/store/rootReducer.ts                      |   2 +
 src/ui/actions.ts                             |   2 -
 .../DownloadsManagerView/ActionButton.tsx     |  14 +-
 .../DownloadsManagerView/DownloadItem.tsx     | 267 ++++++++----------
 .../DownloadsManagerView/FileIcon.tsx         |  38 +++
 .../components/DownloadsManagerView/Info.tsx  |   7 -
 .../DownloadsManagerView/WarningModal.tsx     |  33 ---
 .../DownloadsManagerView/downloadUtils.ts     |  34 ---
 .../components/DownloadsManagerView/index.tsx | 214 +++++---------
 .../components/DownloadsManagerView/styles.ts |  18 +-
 src/ui/components/SideBar/index.tsx           |  10 +-
 src/ui/main/menuBar.ts                        |   2 +-
 src/ui/main/touchBar.ts                       |   2 +-
 src/ui/main/webviews.ts                       |  38 +--
 src/ui/reducers/currentView.ts                |   2 +-
 yarn.lock                                     |  86 +-----
 30 files changed, 597 insertions(+), 631 deletions(-)
 delete mode 100644 src/downloads.ts
 create mode 100644 src/downloads/actions.ts
 create mode 100644 src/downloads/common.ts
 create mode 100644 src/downloads/main.ts
 create mode 100644 src/downloads/reducers/downloads.ts
 create mode 100644 src/ui/components/DownloadsManagerView/FileIcon.tsx
 delete mode 100644 src/ui/components/DownloadsManagerView/Info.tsx
 delete mode 100644 src/ui/components/DownloadsManagerView/WarningModal.tsx

diff --git a/package.json b/package.json
index 7d94f907d3..428fc68440 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,6 @@
     "reselect": "^4.0.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.2",
-    "sharp": "^0.26.2",
     "tslib": "^2.0.1"
   },
   "devDependencies": {
@@ -82,7 +81,6 @@
     "@types/react-redux": "^7.1.9",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/rimraf": "^3.0.0",
-    "@types/sharp": "^0.26.0",
     "@typescript-eslint/eslint-plugin": "^4.2.0",
     "@typescript-eslint/parser": "^4.2.0",
     "babel-eslint": "^10.1.0",
@@ -106,11 +104,6 @@
     "typescript": "^4.0.3",
     "xvfb-maybe": "^0.2.1"
   },
-  "resolutions": {
-    "sharp/prebuild-install/node-abi": "^2.19.1",
-    "@fiahfy/ico-convert/node-abi": "^2.19.1",
-    "@fiahfy/icns-convert/node-abi": "^2.19.1"
-  },
   "engines": {
     "node": ">=12.8.x"
   },
diff --git a/src/app/actions.ts b/src/app/actions.ts
index cb488c25a3..57d97cf4b3 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -1,3 +1,4 @@
+import { downloads } from '../downloads/reducers/downloads';
 import {
   externalProtocols,
   trustedCertificates,
@@ -28,6 +29,7 @@ export type AppActionTypeToPayloadMap = {
   [APP_SETTINGS_LOADED]: {
     currentView: ReturnType<typeof currentView>;
     doCheckForUpdatesOnStartup: ReturnType<typeof doCheckForUpdatesOnStartup>;
+    downloads: ReturnType<typeof downloads>;
     externalProtocols: ReturnType<typeof externalProtocols>;
     isEachUpdatesSettingConfigurable: ReturnType<typeof isEachUpdatesSettingConfigurable>;
     isMenuBarEnabled: ReturnType<typeof isMenuBarEnabled>;
diff --git a/src/app/selectors.ts b/src/app/selectors.ts
index 83d8efeb3e..4411729eac 100644
--- a/src/app/selectors.ts
+++ b/src/app/selectors.ts
@@ -7,6 +7,7 @@ import { APP_SETTINGS_LOADED } from './actions';
 export const selectPersistableValues = createStructuredSelector<Partial<RootState>, ActionOf<typeof APP_SETTINGS_LOADED>['payload']>({
   currentView: ({ currentView }) => currentView,
   doCheckForUpdatesOnStartup: ({ doCheckForUpdatesOnStartup }) => doCheckForUpdatesOnStartup,
+  downloads: ({ downloads }) => downloads,
   isMenuBarEnabled: ({ isMenuBarEnabled }) => isMenuBarEnabled,
   isShowWindowOnUnreadChangedEnabled: ({ isShowWindowOnUnreadChangedEnabled }) => isShowWindowOnUnreadChangedEnabled,
   isSideBarEnabled: ({ isSideBarEnabled }) => isSideBarEnabled,
diff --git a/src/downloads.ts b/src/downloads.ts
deleted file mode 100644
index b21395ba63..0000000000
--- a/src/downloads.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { BrowserWindow, ipcMain } from 'electron';
-import Store from 'electron-store';
-import sharp from 'sharp';
-
-
-export const setupDownloads = (rootWindow: BrowserWindow): void => {
-  const store = new Store();
-
-  // Load all downloads from LocalStorage into Main Process and send to Download Manager.
-  ipcMain.on('load-downloads', async () => {
-    const downloads = await store.get('downloads', {});
-    rootWindow.webContents.send('initialize-downloads', downloads);
-  });
-
-  ipcMain.on('reset', async () => {
-    store.clear();
-    const downloads = await store.get('downloads', {});
-    rootWindow.webContents.send('initialize-downloads', downloads);
-  });
-
-  ipcMain.on('remove', async (_event, itemdId) => {
-    store.delete(`downloads.${ itemdId }`);
-  });
-
-  // Listen and save a single download being completed.
-  ipcMain.on('download-complete', async (_event, downloadItem) => {
-    const downloads = await store.get('downloads', {});
-    downloads[downloadItem.itemId] = downloadItem;
-    store.set('downloads', downloads);
-  });
-
-  // Downloads handler. Handles all downloads from links.
-  rootWindow.webContents.session.on('will-download', async (_event, item, webContents) => {
-    const mime = item.getMimeType();
-    const itemId = Date.now();
-    const url = item.getURLChain()[0];
-    const serverTitle = url.split('#')[1];
-    const startTime = new Date().getTime();
-    const totalBytes = item.getTotalBytes();
-    let paused = false;
-    let endTime;
-    let isCancelledByDialog = true;
-
-    rootWindow.webContents.send('create-download-item', { status: 'All', serverTitle, itemId, totalBytes: item.getTotalBytes(), fileName: item.getFilename(), url, serverId: webContents.id, mime }); // Request download item creation in UI and send unqiue ID.
-
-    // Cancelled Download
-    ipcMain.on(`cancel-${ itemId }`, () => {
-      isCancelledByDialog = false;
-      item.cancel();
-    });
-
-    // Paused Download
-    ipcMain.on(`pause-${ itemId }`, () => {
-      if (paused) {
-        item.resume();
-      } else {
-        item.pause();
-      }
-      paused = !paused;
-    });
-    item.on('updated', (_event, state) => {
-      if (state === 'interrupted') {
-        console.log('Download is interrupted but can be resumed');
-      } else if (state === 'progressing') {
-        if (item.isPaused()) {
-          console.log('Download is paused');
-        } else {
-          endTime = new Date().getTime();
-          const duration = (endTime - startTime) / 1000;
-          const Bps = item.getReceivedBytes() / duration;
-          const Kbps = Bps / 1024;
-          const Mbps = Kbps / 1024;
-          const recievedBytes = item.getReceivedBytes();
-          const timeLeft = Bps ? Math.round((totalBytes - recievedBytes) / Bps) : null;
-          const path = item.getSavePath();
-          const pathsArray = path.split('/');
-          const fileName = pathsArray[pathsArray.length - 1];
-
-          // Sending Download Information. TODO: Seperate bytes as information sent is being repeated.
-          rootWindow.webContents.send(`downloading-${ itemId }`, {
-            bytes: item.getReceivedBytes(),
-            Mbps: Mbps.toFixed(2),
-            Kbps: Kbps.toFixed(2),
-            timeLeft,
-            fileName,
-          });
-        }
-      }
-    });
-    item.once('done', async (_event, state) => {
-      if (state === 'completed') {
-        const path = item.getSavePath();
-        const pathsArray = path.split('/');
-        const fileName = pathsArray[pathsArray.length - 1];
-        const thumbnail = mime.split('/')[0] === 'image' ? await sharp(path).resize(100, 100).png().toBuffer() : null;
-        rootWindow.webContents.send(`download-complete-${ itemId }`, { percentage: 100, path, fileName, thumbnail: thumbnail && `data:image/png;base64,${ thumbnail.toString('base64') }` }); // Send to specific DownloadItem
-      } else if (isCancelledByDialog) {
-        rootWindow.webContents.send('download-cancelled', itemId); // Remove Item from UI if interrupted or cancelled
-      }
-    });
-  });
-};
diff --git a/src/downloads/actions.ts b/src/downloads/actions.ts
new file mode 100644
index 0000000000..f9bfb3224b
--- /dev/null
+++ b/src/downloads/actions.ts
@@ -0,0 +1,13 @@
+import { Download } from './common';
+
+export const DOWNLOAD_CREATED = 'downloads/created';
+export const DOWNLOAD_REMOVED = 'dowloads/removed';
+export const DOWNLOADS_CLEARED = 'downloads/cleared';
+export const DOWNLOAD_UPDATED = 'downloads/updated';
+
+export type DownloadsActionTypeToPayloadMap = {
+  [DOWNLOAD_CREATED]: Download;
+  [DOWNLOAD_UPDATED]: Pick<Download, 'itemId'> & Partial<Download>;
+  [DOWNLOAD_REMOVED]: Download['itemId'];
+  [DOWNLOADS_CLEARED]: void;
+}
diff --git a/src/downloads/common.ts b/src/downloads/common.ts
new file mode 100644
index 0000000000..4272a45834
--- /dev/null
+++ b/src/downloads/common.ts
@@ -0,0 +1,23 @@
+import { Server } from '../servers/common';
+
+export const DownloadStatus = {
+  ALL: 'All',
+  PAUSED: 'Paused',
+  CANCELLED: 'Cancelled',
+} as const;
+
+export type Download = {
+  itemId: number;
+  state: 'progressing' | 'paused' | 'completed' | 'cancelled' | 'interrupted';
+  status: typeof DownloadStatus[keyof typeof DownloadStatus];
+  fileName: string;
+  receivedBytes: number;
+  totalBytes: number;
+  startTime: number;
+  endTime: number | undefined;
+  url: string;
+  serverUrl: Server['url'];
+  serverTitle: Server['title'];
+  savePath: string;
+  mimeType: string;
+};
diff --git a/src/downloads/main.ts b/src/downloads/main.ts
new file mode 100644
index 0000000000..97bf95914c
--- /dev/null
+++ b/src/downloads/main.ts
@@ -0,0 +1,188 @@
+import path from 'path';
+
+import { clipboard, DownloadItem, Event, session, shell, WebContents, webContents } from 'electron';
+
+import { handle } from '../ipc/main';
+import { dispatch, select } from '../store';
+import {
+  DOWNLOAD_CREATED,
+  DOWNLOAD_REMOVED,
+  DOWNLOAD_UPDATED,
+} from './actions';
+import { Download, DownloadStatus } from './common';
+
+const items = new Map<Download['itemId'], DownloadItem>();
+
+const handleWillDownloadEvent = async (_event: Event, item: DownloadItem, serverWebContents: WebContents): Promise<void> => {
+  const itemId = Date.now();
+
+  items.set(itemId, item);
+
+  const fileName = item.getFilename();
+
+  const extension = path.extname(fileName)?.slice(1).toLowerCase();
+
+  if (extension) {
+    item.setSaveDialogOptions({
+      filters: [
+        {
+          name: `*.${ extension }`,
+          extensions: [extension],
+        },
+        {
+          name: '*.*',
+          extensions: ['*'],
+        },
+      ],
+    });
+  }
+
+  const server = select(({ servers }) => servers.find((server) => server.webContentsId === serverWebContents.id));
+
+  dispatch({
+    type: DOWNLOAD_CREATED,
+    payload: {
+      itemId,
+      state: item.isPaused() ? 'paused' : item.getState(),
+      status: item.isPaused() ? DownloadStatus.PAUSED : DownloadStatus.ALL,
+      fileName: item.getFilename(),
+      receivedBytes: item.getReceivedBytes(),
+      totalBytes: item.getTotalBytes(),
+      startTime: item.getStartTime() * 1000,
+      endTime: undefined,
+      url: item.getURL(),
+      serverUrl: server?.url,
+      serverTitle: server?.title,
+      mimeType: item.getMimeType(),
+      savePath: item.getSavePath(),
+    },
+  });
+
+  item.on('updated', () => {
+    dispatch({
+      type: DOWNLOAD_UPDATED,
+      payload: {
+        itemId,
+        state: item.isPaused() ? 'paused' : item.getState(),
+        status: item.isPaused() ? DownloadStatus.PAUSED : DownloadStatus.ALL,
+        fileName: item.getFilename(),
+        receivedBytes: item.getReceivedBytes(),
+        totalBytes: item.getTotalBytes(),
+        startTime: item.getStartTime() * 1000,
+        endTime: Date.now(),
+        url: item.getURL(),
+        mimeType: item.getMimeType(),
+        savePath: item.getSavePath(),
+      },
+    });
+  });
+
+  item.on('done', () => {
+    dispatch({
+      type: DOWNLOAD_UPDATED,
+      payload: {
+        itemId,
+        state: item.isPaused() ? 'paused' : item.getState(),
+        status: item.getState() === 'cancelled' ? DownloadStatus.CANCELLED : DownloadStatus.ALL,
+        fileName: item.getFilename(),
+        receivedBytes: item.getReceivedBytes(),
+        totalBytes: item.getTotalBytes(),
+        startTime: item.getStartTime() * 1000,
+        endTime: Date.now(),
+        url: item.getURL(),
+        mimeType: item.getMimeType(),
+        savePath: item.getSavePath(),
+      },
+    });
+
+    items.delete(itemId);
+  });
+};
+
+export const setupDownloads = (): void => {
+  session.fromPartition('persist:rocketchat-server').on('will-download', handleWillDownloadEvent);
+
+  handle('downloads/show-in-folder', async (_webContents, itemId) => {
+    const download = select(({ downloads }) => downloads[itemId]);
+
+    if (!download) {
+      return;
+    }
+
+    shell.showItemInFolder(download.savePath);
+  });
+
+  handle('downloads/copy-link', async (_webContent, itemId) => {
+    const download = select(({ downloads }) => downloads[itemId]);
+
+    if (!download) {
+      return;
+    }
+
+    clipboard.write({ text: download.url });
+  });
+
+  handle('downloads/pause', async (_webContent, itemId) => {
+    if (!items.has(itemId)) {
+      return;
+    }
+
+    const item = items.get(itemId);
+
+    if (item.isPaused()) {
+      return;
+    }
+
+    item.pause();
+  });
+
+  handle('downloads/resume', async (_webContent, itemId) => {
+    if (!items.has(itemId)) {
+      return;
+    }
+
+    const item = items.get(itemId);
+
+    if (!item.canResume()) {
+      return;
+    }
+
+    item.resume();
+  });
+
+  handle('downloads/cancel', async (_webContent, itemId) => {
+    if (!items.has(itemId)) {
+      return;
+    }
+
+    const item = items.get(itemId);
+    item.cancel();
+  });
+
+  handle('downloads/retry', async (_webContent, itemId) => {
+    const { url, webContentsId } = select(({ downloads, servers }) => {
+      const { url, serverUrl } = downloads[itemId];
+      const { webContentsId } = servers.find((server) => server.url === serverUrl);
+      return { url, webContentsId };
+    });
+
+    dispatch({
+      type: DOWNLOAD_REMOVED,
+      payload: itemId,
+    });
+
+    webContents.fromId(webContentsId).downloadURL(url);
+  });
+
+  handle('downloads/remove', async (_webContent, itemId) => {
+    if (items.has(itemId)) {
+      const item = items.get(itemId);
+      item.cancel();
+    }
+
+    dispatch({
+      type: DOWNLOAD_REMOVED,
+      payload: itemId,
+    });
+  });
+};
diff --git a/src/downloads/reducers/downloads.ts b/src/downloads/reducers/downloads.ts
new file mode 100644
index 0000000000..ab4f61bd5d
--- /dev/null
+++ b/src/downloads/reducers/downloads.ts
@@ -0,0 +1,56 @@
+import { APP_SETTINGS_LOADED } from '../../app/actions';
+import { ActionOf } from '../../store/actions';
+import {
+  DOWNLOADS_CLEARED,
+  DOWNLOAD_CREATED,
+  DOWNLOAD_REMOVED,
+  DOWNLOAD_UPDATED,
+} from '../actions';
+import { Download } from '../common';
+
+type DownloadsAction = (
+  ActionOf<typeof APP_SETTINGS_LOADED>
+  | ActionOf<typeof DOWNLOAD_CREATED>
+  | ActionOf<typeof DOWNLOAD_UPDATED>
+  | ActionOf<typeof DOWNLOADS_CLEARED>
+  | ActionOf<typeof DOWNLOAD_REMOVED>
+);
+
+export const downloads = (
+  state: Record<Download['itemId'], Download> = {},
+  action: DownloadsAction,
+): Record<Download['itemId'], Download> => {
+  switch (action.type) {
+    case APP_SETTINGS_LOADED:
+      return action.payload.downloads ?? {};
+
+    case DOWNLOAD_CREATED: {
+      const download = action.payload;
+      return {
+        ...state,
+        [download.itemId]: download,
+      };
+    }
+
+    case DOWNLOAD_UPDATED: {
+      const newState = { ...state };
+      newState[action.payload.itemId] = {
+        ...newState[action.payload.itemId],
+        ...action.payload,
+      };
+      return newState;
+    }
+
+    case DOWNLOAD_REMOVED: {
+      const newState = { ...state };
+      delete newState[action.payload];
+      return newState;
+    }
+
+    case DOWNLOADS_CLEARED:
+      return {};
+
+    default:
+      return state;
+  }
+};
diff --git a/src/i18n/en.i18n.json b/src/i18n/en.i18n.json
index 5da13a8cbc..e6d5dc7c79 100644
--- a/src/i18n/en.i18n.json
+++ b/src/i18n/en.i18n.json
@@ -41,6 +41,12 @@
       "yes": "Yes",
       "no": "No"
     },
+    "downloadRemoval": {
+      "title": "Are you sure?",
+      "message": "Remove this download?",
+      "yes": "Yes",
+      "no": "No"
+    },
     "resetAppData": {
       "title": "Reset app data",
       "message": "This will sign you out from all your teams and reset the app back to its original settings. This cannot be undone.",
@@ -96,6 +102,19 @@
       "no": "No"
     }
   },
+  "downloads": {
+    "item": {
+      "cancel": "Cancel",
+      "copyLink": "Copy link",
+      "errored": "Download cancelled",
+      "pause": "Pause",
+      "progressSize": "{{receivedBytes, byteSize}} of {{totalBytes, byteSize}} ({{ratio, percentage}})",
+      "remove": "Remove from list",
+      "resume": "Resume",
+      "retry": "Retry",
+      "showInFolder": "Show in Folder"
+    }
+  },
   "error": {
     "authNeeded": "Auth needed, try <strong>{{- auth}}</strong>",
     "connectTimeout": "Timeout trying to connect",
@@ -119,6 +138,7 @@
     "cut": "Cu&t",
     "disableGpu": "Disable GPU",
     "documentation": "Documentation",
+    "downloads": "Downloads",
     "editMenu": "&Edit",
     "fileMenu": "&File",
     "forward": "&Forward",
@@ -163,6 +183,7 @@
   },
   "sidebar": {
     "addNewServer": "Add new server",
+    "downloads": "Downloads",
     "item": {
       "reload": "Reload server",
       "remove": "Remove server",
diff --git a/src/ipc/channels.ts b/src/ipc/channels.ts
index 940474e031..b0ccbf308c 100644
--- a/src/ipc/channels.ts
+++ b/src/ipc/channels.ts
@@ -1,5 +1,6 @@
 import { AnyAction } from 'redux';
 
+import { Download } from '../downloads/common';
 import { SystemIdleState } from '../userPresence/common';
 
 type ChannelToArgsMap = {
@@ -8,6 +9,13 @@ type ChannelToArgsMap = {
   'servers/fetch-info': (urlHref: string) => [urlHref: string, version: string];
   'notifications/fetch-icon': (urlHref: string) => string;
   'power-monitor/get-system-idle-state': (idleThreshold: number) => SystemIdleState;
+  'downloads/show-in-folder': (itemId: Download['itemId']) => void;
+  'downloads/copy-link': (itemId: Download['itemId']) => void;
+  'downloads/pause': (itemId: Download['itemId']) => void;
+  'downloads/resume': (itemId: Download['itemId']) => void;
+  'downloads/cancel': (itemId: Download['itemId']) => void;
+  'downloads/retry': (itemId: Download['itemId']) => void;
+  'downloads/remove': (itemId: Download['itemId']) => void;
 };
 
 export type Channel = keyof ChannelToArgsMap;
diff --git a/src/main.ts b/src/main.ts
index 2566f16922..22e3cade68 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,7 @@ import {
 } from './app/main/data';
 import { setUserDataDirectory } from './app/main/dev';
 import { setupDeepLinks, processDeepLinksInArgs } from './deepLinks/main';
-import { setupDownloads } from './downloads';
+import { setupDownloads } from './downloads/main';
 import { setupMainErrorHandling } from './errors';
 import i18n from './i18n/main';
 import { setupNavigation } from './navigation/main';
@@ -22,7 +22,6 @@ import {
   createRootWindow,
   showRootWindow,
   exportLocalStorage,
-  getRootWindow,
 } from './ui/main/rootWindow';
 import touchBar from './ui/main/touchBar';
 import trayIcon from './ui/main/trayIcon';
@@ -66,7 +65,7 @@ const start = async (): Promise<void> => {
   await setupNavigation();
   setupPowerMonitor();
   await setupUpdates();
-  setupDownloads(await getRootWindow());
+  setupDownloads();
 
   dock.setUp();
   menuBar.setUp();
diff --git a/src/servers/common.ts b/src/servers/common.ts
index f5dfc02aab..f6ecb37ed0 100644
--- a/src/servers/common.ts
+++ b/src/servers/common.ts
@@ -9,7 +9,7 @@ export type Server = {
   };
   lastPath?: string;
   failed?: boolean;
-  webContentId?: number;
+  webContentsId?: number;
 };
 
 export const enum ServerUrlResolutionStatus {
diff --git a/src/servers/reducers.ts b/src/servers/reducers.ts
index ce717543f0..f0c43ca7ee 100644
--- a/src/servers/reducers.ts
+++ b/src/servers/reducers.ts
@@ -14,7 +14,8 @@ import {
   WEBVIEW_FAVICON_CHANGED,
   WEBVIEW_DID_START_LOADING,
   WEBVIEW_DID_FAIL_LOAD,
-  WEBVIEW_SERVER_ID,
+  WEBVIEW_ATTACHED,
+  WEBVIEW_DETACHED,
 } from '../ui/actions';
 import { SERVERS_LOADED } from './actions';
 import { Server } from './common';
@@ -41,7 +42,8 @@ type ServersActionTypes = (
   | ActionOf<typeof APP_SETTINGS_LOADED>
   | ActionOf<typeof WEBVIEW_DID_START_LOADING>
   | ActionOf<typeof WEBVIEW_DID_FAIL_LOAD>
-  | ActionOf<typeof WEBVIEW_SERVER_ID>
+  | ActionOf<typeof WEBVIEW_ATTACHED>
+  | ActionOf<typeof WEBVIEW_DETACHED>
 );
 
 const upsert = (state: Server[], server: Server): Server[] => {
@@ -54,6 +56,16 @@ const upsert = (state: Server[], server: Server): Server[] => {
   return state.map((_server, i) => (i === index ? { ..._server, ...server } : _server));
 };
 
+const update = (state: Server[], server: Server): Server[] => {
+  const index = state.findIndex(({ url }) => url === server.url);
+
+  if (index === -1) {
+    return state;
+  }
+
+  return state.map((_server, i) => (i === index ? { ..._server, ...server } : _server));
+};
+
 export const servers: Reducer<Server[], ServersActionTypes> = (state = [], action) => {
   switch (action.type) {
     case ADD_SERVER_VIEW_SERVER_ADDED:
@@ -131,11 +143,14 @@ export const servers: Reducer<Server[], ServersActionTypes> = (state = [], actio
       }));
     }
 
-    case WEBVIEW_SERVER_ID: {
-      const { id, serverUrl } = action.payload;
-      const index = state.findIndex(({ url }) => url === serverUrl);
-      state[index].webContentId = id;
-      return state;
+    case WEBVIEW_ATTACHED: {
+      const { url, webContentsId } = action.payload;
+      return update(state, { url, webContentsId });
+    }
+
+    case WEBVIEW_DETACHED: {
+      const { url } = action.payload;
+      return update(state, { url, webContentsId: undefined });
     }
 
     default:
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 57998e01b2..620d23a487 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,5 +1,6 @@
 import { AppActionTypeToPayloadMap } from '../app/actions';
 import { DeepLinksActionTypeToPayloadMap } from '../deepLinks/actions';
+import { DownloadsActionTypeToPayloadMap } from '../downloads/actions';
 import { I18nActionTypeToPayloadMap } from '../i18n/actions';
 import { NavigationActionTypeToPayloadMap } from '../navigation/actions';
 import { NotificationsActionTypeToPayloadMap } from '../notifications/actions';
@@ -14,6 +15,7 @@ import { FluxStandardAction } from './fsa';
 type ActionTypeToPayloadMap = (
   AppActionTypeToPayloadMap
   & DeepLinksActionTypeToPayloadMap
+  & DownloadsActionTypeToPayloadMap
   & I18nActionTypeToPayloadMap
   & NavigationActionTypeToPayloadMap
   & NotificationsActionTypeToPayloadMap
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index 3c1797598e..091d281901 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -2,6 +2,7 @@ import { combineReducers } from 'redux';
 
 import { appPath } from '../app/reducers/appPath';
 import { appVersion } from '../app/reducers/appVersion';
+import { downloads } from '../downloads/reducers/downloads';
 import {
   clientCertificates,
   externalProtocols,
@@ -34,6 +35,7 @@ const reducersMap = {
   clientCertificates,
   currentView,
   doCheckForUpdatesOnStartup,
+  downloads,
   externalProtocols,
   isCheckingForUpdates,
   isEachUpdatesSettingConfigurable,
diff --git a/src/ui/actions.ts b/src/ui/actions.ts
index ca403a60eb..65cbd9ba19 100644
--- a/src/ui/actions.ts
+++ b/src/ui/actions.ts
@@ -37,7 +37,6 @@ export const WEBVIEW_MESSAGE_BOX_BLURRED = 'webview/message-box-blurred';
 export const WEBVIEW_MESSAGE_BOX_FOCUSED = 'webview/message-box-focused';
 export const WEBVIEW_SCREEN_SHARING_SOURCE_REQUESTED = 'webview/screen-sharing-source-requested';
 export const WEBVIEW_SCREEN_SHARING_SOURCE_RESPONDED = 'webview/screen-sharing-source-responded';
-export const WEBVIEW_SERVER_ID = 'webview/server-id';
 export const WEBVIEW_SIDEBAR_STYLE_CHANGED = 'webview/sidebar-style-changed';
 export const WEBVIEW_TITLE_CHANGED = 'webview/title-changed';
 export const WEBVIEW_UNREAD_CHANGED = 'webview/unread-changed';
@@ -79,7 +78,6 @@ export type UiActionTypeToPayloadMap = {
   [WEBVIEW_MESSAGE_BOX_FOCUSED]: never;
   [WEBVIEW_SCREEN_SHARING_SOURCE_REQUESTED]: never;
   [WEBVIEW_SCREEN_SHARING_SOURCE_RESPONDED]: string;
-  [WEBVIEW_SERVER_ID]: { serverUrl: Server['url']; id: number };
   [WEBVIEW_SIDEBAR_STYLE_CHANGED]: { url: Server['url']; style: Server['style'] };
   [WEBVIEW_TITLE_CHANGED]: { url: Server['url']; title: Server['title'] };
   [WEBVIEW_UNREAD_CHANGED]: { url: Server['url']; badge: Server['badge'] };
diff --git a/src/ui/components/DownloadsManagerView/ActionButton.tsx b/src/ui/components/DownloadsManagerView/ActionButton.tsx
index 765f42fa8a..d42faf0194 100644
--- a/src/ui/components/DownloadsManagerView/ActionButton.tsx
+++ b/src/ui/components/DownloadsManagerView/ActionButton.tsx
@@ -1,8 +1,14 @@
-import React, { FC } from 'react';
+import { Box } from '@rocket.chat/fuselage';
+import React, { AllHTMLAttributes, FC } from 'react';
 
-import { ClickableLink, ClickableLinkProps } from './styles';
+type ActionButtonProps = {
+  onClick: AllHTMLAttributes<HTMLAnchorElement>['onClick'];
+}
 
-const ActionButton: FC<ClickableLinkProps> = (props) =>
-  <ClickableLink is='a' fontSize='x12' withTruncatedText color='neutral-600' {...props} />;
+const ActionButton: FC<ActionButtonProps> = (props) => <>
+  <Box marginInline={4} withRichContent>
+    <a href='#' {...props} />
+  </Box>
+</>;
 
 export default ActionButton;
diff --git a/src/ui/components/DownloadsManagerView/DownloadItem.tsx b/src/ui/components/DownloadsManagerView/DownloadItem.tsx
index 359f8f6ffa..045af59b05 100644
--- a/src/ui/components/DownloadsManagerView/DownloadItem.tsx
+++ b/src/ui/components/DownloadsManagerView/DownloadItem.tsx
@@ -1,162 +1,141 @@
-import { Box, BoxProps, ButtonGroup, ProgressBar } from '@rocket.chat/fuselage';
-import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
-import { ipcRenderer, remote, clipboard } from 'electron';
-import React, { FC, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import { Box, BoxProps, ProgressBar } from '@rocket.chat/fuselage';
+import React, { FC, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { RootState } from '../../../store/rootReducer';
+import { Download } from '../../../downloads/common';
+import { invoke } from '../../../ipc/renderer';
 import ActionButton from './ActionButton';
-import Info from './Info';
-import { formatBytes, STATUS, DOWNLOAD_EVENT, Download } from './downloadUtils';
-
-type DownloadItemProps = BoxProps
-& Download
-& {
-  updateDownloads: (downloads: Download) => void;
-  clear: (itemId: string, isRetry: boolean) => void;
-  handleFileOpen: (path: string) => void;
-};
+import FileIcon from './FileIcon';
+
+type DownloadItemProps = (
+  Download
+  & BoxProps
+);
 
 const DownloadItem: FC<DownloadItemProps> = ({
-  thumbnail,
-  url,
+  itemId,
+  state,
+  status,
   fileName,
+  receivedBytes,
   totalBytes,
-  itemId,
-  mime,
-  updateDownloads,
-  Mbps: mbps,
-  Kbps: kbps,
+  startTime,
+  endTime,
+  url,
+  mimeType,
   serverTitle,
+  serverUrl,
+  savePath,
   ...props
 }) => {
-  const servers = useSelector(({ servers }: RootState) => servers);
-  const date = new Date(itemId).toDateString();
-  const fileSize = formatBytes(totalBytes, 2, true);
-
-  const [percentage, setPercentage] = useDebouncedState(props.percentage || 0, 100);
-  const [path, setPath] = useDebouncedState(props.path || '', 100);
-  const [status, setStatus] = useDebouncedState(props.status || STATUS.ALL, 100);
-  const [timeLeft, setTimeLeft] = useDebouncedState(props.timeLeft || null, 100);
-
-  const completed = percentage === 100;
-  const paused = status === STATUS.PAUSED;
-
-  if (!serverTitle) {
-    const index = servers.findIndex(({ webContentId }) => webContentId === props.serverId);
-    serverTitle = servers[index].title;
-  }
-
-  const handleProgress = useMutableCallback((_event, data) => {
-    const percentage = Math.floor((data.bytes / totalBytes) * 100);
-    updateDownloads({ itemId, status: STATUS.ALL, percentage, serverTitle, Mbps: data.Mbps, Kbps: data.Kbps, fileName: data.fileName });
-    setStatus(STATUS.ALL);
-    setPercentage(percentage);
-    setTimeLeft(data.timeLeft);
-  });
-
-  useEffect(() => {
-    // Listen on unique event only
-    ipcRenderer.on(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
-    return () => {
-      ipcRenderer.removeListener(DOWNLOAD_EVENT.DOWNLOADING_ID.concat(itemId), handleProgress);
-    };
-  }, [handleProgress, itemId]);
-
-
-  // Download Completed, Send data back
-  useEffect(() => {
-    const downloadComplete = (_event: unknown, data: {
-      path: string;
-      thumbnail: unknown;
-    }): void => {
-      setStatus(STATUS.ALL);
-      setPath(data.path);
-      setTimeLeft(null);
-      updateDownloads({
-        status: STATUS.ALL,
-        serverTitle,
-        itemId,
-        percentage: 100,
-        thumbnail: data.thumbnail,
-        path: data.path,
-      });
-      ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.ALL, url, fileName, fileSize, percentage: 100, serverTitle, itemId, date, path: data.path, mime, thumbnail: data.thumbnail });
-    };
-
-    ipcRenderer.on(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
-    return () => {
-      ipcRenderer.removeListener(DOWNLOAD_EVENT.COMPLETE_ID.concat(itemId), downloadComplete);
-    };
-  }, [date, fileName, fileSize, itemId, mime, props, serverTitle, setPath, setPercentage, setStatus, setTimeLeft, updateDownloads, url]);
-
-  const handleCancel = useMutableCallback(() => {
-    setStatus(STATUS.CANCELLED);
-    setTimeLeft(null);
-    ipcRenderer.send(DOWNLOAD_EVENT.CANCEL_ID.concat(itemId));
-    updateDownloads({ status: STATUS.CANCELLED, percentage, itemId });
-    ipcRenderer.send(DOWNLOAD_EVENT.COMPLETE, { status: STATUS.CANCELLED, url, fileName, fileSize, percentage, serverTitle, itemId, date, path, mime });
-  });
-
-  const handlePause = useMutableCallback(() => {
-    setStatus(STATUS.PAUSED);
-    ipcRenderer.send(DOWNLOAD_EVENT.PAUSE_ID.concat(itemId));
-    updateDownloads({ status: STATUS.PAUSED, percentage, itemId });
-  });
-
-  const handleDelete = useMutableCallback((isRetry: boolean) => {
-    props.clear(itemId, isRetry);
-  });
-
-  const handleRetry = useMutableCallback(() => {
-    // Adding ServerTitle to Download URL for use in retrying the cancelled download
-    remote.getCurrentWebContents().downloadURL(`${ url }#${ serverTitle }`);
-    handleDelete(true);
-  });
-
-  const handleFileOpen = useMutableCallback(() => props.handleFileOpen(path));
-
-  // TODO TOAST
-  const handleCopyLink = useMutableCallback(() => clipboard.write({ text: url }));
-
-  const speed = mbps > 0.1 ? `${ mbps }Mbps` : `${ kbps }Kbps`;
-  const isCompleted = completed;
-  const isCancelled = status === STATUS.CANCELLED;
-  const isPaused = paused;
-
-  return <Box width='100%' height='x44' mbe='x26' display='flex' alignItems='center' mb={props.mb}>
-    <Box width='x188' flexShrink={ 0 } borderRadius='4px' display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
-      <Box display='flex' flexDirection='column' width='x36' height='x44'>
-        <Box is='img' src='images/file-icon.svg' alt={name} width='x36' />
-        <Box fontSize='x12' fontWeight={600} textAlign='center' mbs='-20px' color='neutral-600' display='block'>{ mime.split('/')[1] }</Box>
-      </Box>
-      <Box width='x144' mis='x8'>
-        <Box fontSize='x14' withTruncatedText color={ isCancelled ? 'danger-500' : 'default' } mbe='x4'>{ fileName }</Box>
-        <Info>{ serverTitle }</Info>
+  const { t, i18n } = useTranslation();
+
+  const progressSize = useMemo(() => {
+    if (!receivedBytes || !totalBytes) {
+      return undefined;
+    }
+
+    if (state === 'completed') {
+      return i18n.format(totalBytes, 'byteSize');
+    }
+
+    return t('downloads.item.progressSize', {
+      receivedBytes,
+      totalBytes,
+      ratio: receivedBytes / totalBytes,
+    });
+  }, [i18n, receivedBytes, state, t, totalBytes]);
+
+  const progressSpeed = useMemo(() => {
+    if (!receivedBytes || !totalBytes || !startTime || !endTime || state !== 'progressing') {
+      return undefined;
+    }
+
+    return i18n.format(receivedBytes / (endTime - startTime) * 1000, 'byteSpeed');
+  }, [endTime, i18n, receivedBytes, startTime, state, totalBytes]);
+
+  const estimatedTimeLeft = useMemo(() => {
+    if (!receivedBytes || !totalBytes || !startTime || !endTime || state !== 'progressing') {
+      return undefined;
+    }
+
+    const remainingBytes = totalBytes - receivedBytes;
+    const speed = receivedBytes / (endTime - startTime);
+    return i18n.format(remainingBytes / speed, 'duration');
+  }, [endTime, i18n, receivedBytes, startTime, state, totalBytes]);
+
+  const handlePause = useCallback(() => {
+    invoke('downloads/pause', itemId);
+  }, [itemId]);
+
+  const handleResume = useCallback(() => {
+    invoke('downloads/resume', itemId);
+  }, [itemId]);
+
+  const handleCancel = useCallback(async () => {
+    invoke('downloads/cancel', itemId);
+  }, [itemId]);
+
+  const handleShowInFolder = useCallback((): void => {
+    invoke('downloads/show-in-folder', itemId);
+  }, [itemId]);
+
+  const handleRetry = useCallback(() => {
+    invoke('downloads/retry', itemId);
+  }, [itemId]);
+
+  const handleRemove = useCallback(() => {
+    invoke('downloads/remove', itemId);
+  }, [itemId]);
+
+  const handleCopyLink = useCallback(() => {
+    invoke('downloads/copy-link', itemId);
+  }, [itemId]);
+
+  const errored = state === 'interrupted' || state === 'cancelled';
+  const percentage = useMemo(() => Math.floor(receivedBytes / totalBytes * 100), [receivedBytes, totalBytes]);
+
+  return <Box width='100%' height={44} mbe={26} display='flex' alignItems='center' {...props}>
+    <Box width={188} flexShrink={0} display='flex' flexDirection='row' alignItems='center' justifyContent='center'>
+      <FileIcon fileName={fileName} mimeType={mimeType} />
+      <Box width={144} mis={8}>
+        <Box mbe={4} color={errored ? 'danger-500' : 'default'} fontScale='p1' withTruncatedText>{fileName}</Box>
+        <Box color='neutral-600' fontScale='c1' withTruncatedText>{serverTitle}</Box>
       </Box>
     </Box>
 
-    <Box display='flex' flexDirection='column' flexGrow={ 1 } mi='x16'>
-      <Box display='flex' flexDirection='row' mbe='x6' alignItems='center' justifyContent='space-between'>
+    <Box display='flex' flexDirection='column' flexGrow={1} mi={16}>
+      <Box display='flex' flexDirection='row' mbe={6} alignItems='center' justifyContent='space-between'>
         <Box display='flex' flexDirection='row' alignItems='center'>
-          <Info mie='x12'>{percentage}% of { fileSize }</Info>
-          { isCompleted || isCancelled || <Info mie='x12'>{ speed }</Info> }
-          { timeLeft && <Info>{ timeLeft }s left</Info> }
+          {progressSize ? <Box mie={12} color='neutral-600' fontScale='c1' withTruncatedText>{progressSize}</Box> : null}
+          {progressSpeed ? <Box mie={12} color='neutral-600' fontScale='c1' withTruncatedText>{progressSpeed}</Box> : null}
+          {estimatedTimeLeft ? <Box color='neutral-600' fontScale='c1' withTruncatedText>{estimatedTimeLeft}</Box> : null}
+        </Box>
+        <Box display='flex' fontScale='c1'>
+          <ActionButton onClick={handleCopyLink}>{t('downloads.item.copyLink')}</ActionButton>
+          {state === 'progressing' && <>
+            <ActionButton onClick={handlePause}>{t('downloads.item.pause')}</ActionButton>
+            <ActionButton onClick={handleCancel}>{t('downloads.item.cancel')}</ActionButton>
+          </>}
+          {state === 'paused' && <>
+            <ActionButton onClick={handleResume}>{t('downloads.item.resume')}</ActionButton>
+            <ActionButton onClick={handleCancel}>{t('downloads.item.cancel')}</ActionButton>
+          </>}
+          {state === 'completed' && <>
+            <ActionButton onClick={handleShowInFolder}>{t('downloads.item.showInFolder')}</ActionButton>
+            <ActionButton onClick={handleRemove}>{t('downloads.item.remove')}</ActionButton>
+          </>}
+          {errored && <>
+            <ActionButton onClick={handleRetry}>{t('downloads.item.retry')}</ActionButton>
+            <ActionButton onClick={handleRemove}>{t('downloads.item.remove')}</ActionButton>
+          </>}
         </Box>
-        <ButtonGroup fontSize='x12' withTruncatedText color='neutral-700' >
-          {/* Completed */ }
-          { isCompleted && !isCancelled && <ActionButton onClick={ handleFileOpen }>Show in Folder</ActionButton> }
-          { isCompleted && !isCancelled && <ActionButton onClick={ handleCopyLink }>Copy Link</ActionButton> }
-          {/* Progressing and Paused */ }
-          { !isCompleted && !isCancelled && <ActionButton onClick={ handlePause }>{ isPaused ? 'Resume' : 'Pause' }</ActionButton> }
-          { !isCompleted && !isCancelled && <ActionButton onClick={ handleCancel }>Cancel</ActionButton> }
-          {/* Cancelled */ }
-          { isCancelled && <ActionButton onClick={ handleRetry }>Retry</ActionButton> }
-          <ActionButton isRemove onClick={ () => handleDelete(false) }>Remove from List</ActionButton>
-        </ButtonGroup>
       </Box>
-      <Box mbe='x8'>
-        <ProgressBar percentage={percentage} error={isCancelled ? 'Download Cancelled' : undefined} />
+      <Box mbe={8} position='relative'>
+        <ProgressBar
+          percentage={percentage}
+          error={errored ? t('downloads.item.errored') : undefined}
+        />
       </Box>
     </Box>
   </Box>;
diff --git a/src/ui/components/DownloadsManagerView/FileIcon.tsx b/src/ui/components/DownloadsManagerView/FileIcon.tsx
new file mode 100644
index 0000000000..906fecc657
--- /dev/null
+++ b/src/ui/components/DownloadsManagerView/FileIcon.tsx
@@ -0,0 +1,38 @@
+import path from 'path';
+
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC, useMemo } from 'react';
+
+type FileIconProps = {
+  fileName: string;
+  mimeType: string;
+};
+
+const FileIcon: FC<FileIconProps> = ({ fileName, mimeType }) => {
+  const label = useMemo(() => {
+    const extension = path.extname(fileName);
+
+    if (extension) {
+      return extension.slice(1);
+    }
+
+    return /^\w+\/([-.\w]+)(?:\+[-.\w]+)?$/.exec(mimeType)?.[1];
+  }, [fileName, mimeType]);
+
+  return <Box display='flex' flexDirection='column' width='x36' height='x44'>
+    <Box is='img' src='images/file-icon.svg' alt={label} width='x36' />
+    <Box
+      width={32}
+      mi={2}
+      mbs={-20}
+      color='neutral-600'
+      fontScale='c2'
+      textAlign='center'
+      withTruncatedText
+    >
+      {label}
+    </Box>
+  </Box>;
+};
+
+export default FileIcon;
diff --git a/src/ui/components/DownloadsManagerView/Info.tsx b/src/ui/components/DownloadsManagerView/Info.tsx
deleted file mode 100644
index 3c67ca0909..0000000000
--- a/src/ui/components/DownloadsManagerView/Info.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Box, BoxProps } from '@rocket.chat/fuselage';
-import React, { FC } from 'react';
-
-const Info: FC<BoxProps> = (props) =>
-  <Box fontSize='x12' withTruncatedText color='neutral-600' { ...props } />;
-
-export default Info;
diff --git a/src/ui/components/DownloadsManagerView/WarningModal.tsx b/src/ui/components/DownloadsManagerView/WarningModal.tsx
deleted file mode 100644
index 86a23b274a..0000000000
--- a/src/ui/components/DownloadsManagerView/WarningModal.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Button, ButtonGroup, Icon, Modal } from '@rocket.chat/fuselage';
-import React, { FC } from 'react';
-
-type WarningModalProps = {
-  text?: string;
-  confirmText?: string;
-  close?: () => void;
-  cancel?: () => void;
-  confirm?: () => void;
-  cancelText?: string;
-};
-
-const WarningModal: FC<WarningModalProps> = ({ text, confirmText, close, cancel, cancelText, confirm, ...props }) =>
-  <Modal.Backdrop>
-    <Modal { ...props }>
-      <Modal.Header>
-        <Icon color='danger' name='modal-warning' size={ 20 } />
-        <Modal.Title>{ 'Are you sure?' }</Modal.Title>
-        <Modal.Close onClick={ close } />
-      </Modal.Header>
-      <Modal.Content fontScale='p1'>
-        { text }
-      </Modal.Content>
-      <Modal.Footer>
-        <ButtonGroup align='end'>
-          <Button ghost onClick={ cancel || close }>{ cancelText || 'Cancel' }</Button>
-          <Button primary danger onClick={ confirm }>{ confirmText }</Button>
-        </ButtonGroup>
-      </Modal.Footer>
-    </Modal>;
-  </Modal.Backdrop>;
-
-export default WarningModal;
diff --git a/src/ui/components/DownloadsManagerView/downloadUtils.ts b/src/ui/components/DownloadsManagerView/downloadUtils.ts
index 36b622bcbe..7229d57289 100644
--- a/src/ui/components/DownloadsManagerView/downloadUtils.ts
+++ b/src/ui/components/DownloadsManagerView/downloadUtils.ts
@@ -25,37 +25,3 @@ export const mapping = {
   audio: 'Audios',
   text: 'Texts',
 } as const;
-
-export const DOWNLOAD_EVENT = {
-  PAUSE_ID: 'pause-',
-  CANCEL_ID: 'cancel-',
-  COMPLETE: 'download-complete',
-  COMPLETE_ID: 'download-complete-',
-  DOWNLOADING_ID: 'downloading-',
-  LOAD: 'load-downloads',
-  INITIALIZE: 'initialize-downloads',
-  CREATE: 'create-download-item',
-} as const;
-
-export const STATUS = {
-  CANCELLED: 'Cancelled',
-  PAUSED: 'Paused',
-  ALL: 'All',
-} as const;
-
-export type Download = {
-  itemId: string;
-  status: typeof STATUS[keyof typeof STATUS];
-  percentage: number;
-  serverTitle?: unknown;
-  Mbps?: unknown;
-  Kbps?: unknown;
-  fileName?: string;
-  thumbnail?: unknown;
-  path?: string;
-  mime?: string;
-  url?: string;
-  totalBytes?: number;
-  timeLeft?: unknown;
-  serverId?: unknown;
-};
diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
index 23df4b668b..aae311e01f 100644
--- a/src/ui/components/DownloadsManagerView/index.tsx
+++ b/src/ui/components/DownloadsManagerView/index.tsx
@@ -1,14 +1,13 @@
 import { Box, Grid, SearchInput, Select, Icon, Button, Pagination, Divider, PaginationProps } from '@rocket.chat/fuselage';
 import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { ipcRenderer, IpcRendererEvent, shell } from 'electron';
-import React, { useState, useEffect, useMemo, useCallback, FC, ReactElement, ChangeEvent } from 'react';
+import React, { useState, useMemo, useCallback, FC, ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
+import { DownloadStatus } from '../../../downloads/common';
 import { RootState } from '../../../store/rootReducer';
 import DownloadItem from './DownloadItem';
-import WarningModal from './WarningModal';
-import { mapping, STATUS, DOWNLOAD_EVENT, Download } from './downloadUtils';
+import { mapping } from './downloadUtils';
 import { Wrapper } from './styles';
 
 const fileTypes = [
@@ -21,35 +20,28 @@ const fileTypes = [
 ] as const;
 
 const fileStatus = [
-  [STATUS.ALL, 'All'],
-  [STATUS.PAUSED, 'Paused'],
-  [STATUS.CANCELLED, 'Cancelled'],
+  [DownloadStatus.ALL, 'All'],
+  [DownloadStatus.PAUSED, 'Paused'],
+  [DownloadStatus.CANCELLED, 'Cancelled'],
 ] as const;
 
 const DownloadsManagerView: FC = () => {
-  const { t } = useTranslation();
   const isVisible = useSelector(({ currentView }: RootState) => currentView === 'downloads');
-  const servers = useSelector(({ servers }: RootState) => servers);
-  const serverOptions: [string, string][] = [['all', 'All']];
-  servers.forEach((server) => {
-    serverOptions.push([server.title, server.title]);
-  });
+  const serverOptions = useSelector<RootState, [string, string][]>(({ servers }) => [
+    ['all', 'All'],
+    ...servers.map<[string, string]>((server) => [server.title, server.title]),
+  ]);
+  const downloads = useSelector(({ downloads }: RootState) => Object.values(downloads));
 
-  // Downloads Array
-  const [downloads, setDownloads] = useState<Download[]>([]);
-  const [modal, setModal] = useState<ReactElement>();
+  const { t } = useTranslation();
 
-  const [tab, setTab] = useLocalStorage<typeof STATUS[keyof typeof STATUS] | ''>('download-tab', STATUS.ALL);
+  const [tab, setTab] = useLocalStorage<typeof DownloadStatus[keyof typeof DownloadStatus] | ''>('download-tab', DownloadStatus.ALL);
   const [searchVal, setSearchVal] = useState('');
   const [serverVal, setServerVal] = useLocalStorage('download-server', '');
   const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
   const [currentPagination, setCurrentPagination] = useState(0);
   const [itemsPerPage, setItemsPerPage] = useState<PaginationProps['itemsPerPage']>(25);
 
-  const handleFileOpen = useMutableCallback((path: string) => {
-    shell.showItemInFolder(path);
-  });
-
   const handleTabChange = useMutableCallback((event) => {
     setTab(event);
   });
@@ -66,24 +58,8 @@ const DownloadsManagerView: FC = () => {
     setTypeVal(event);
   });
 
-  const updateDownloads = useMutableCallback((data) => {
-    const updatedDownloads = downloads.map((downloadItem) => {
-      if (downloadItem.itemId === data.itemId) {
-        for (const key of Object.keys(data)) {
-          downloadItem[key] = data[key];
-        }
-      }
-      return downloadItem;
-    });
-    setDownloads(updatedDownloads);
-  });
-
   // Modal Action
 
-  const closeModal = useCallback(() => {
-    setModal(null);
-  }, [setModal]);
-
   const handleClearAll = useCallback((): void => {
     setSearchVal('');
     setTypeVal('');
@@ -91,128 +67,64 @@ const DownloadsManagerView: FC = () => {
     setTab('');
   }, [setServerVal, setTab, setTypeVal]);
 
-
-  const handleClear = useCallback((itemId: string, isRetry: boolean): void => {
-    const clear = (): void => {
-      closeModal();
-      const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-      setDownloads(newDownloads);
-      ipcRenderer.send('remove', itemId);
-    };
-
-    if (isRetry) {
-      clear();
-      return;
-    }
-    setModal(<WarningModal
-      close={ closeModal }
-      confirm={ clear }
-      text={ 'Remove this download?' }
-      confirmText={ 'Yes' }
-    />);
-  }, [closeModal, downloads]);
-
-  // 			USE EFFECTS
-
-  useEffect(() => {
-    ipcRenderer.send(DOWNLOAD_EVENT.LOAD);
-  }, []);
-
-  useEffect(() => {
-    const intializeDownloads = (_event: IpcRendererEvent, downloads: Record<string, Download>): void => {
-      setDownloads(Object.values(downloads) as Download[]);
-    };
-    ipcRenderer.on(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
-    return () => {
-      ipcRenderer.removeListener(DOWNLOAD_EVENT.INITIALIZE, intializeDownloads);
-    };
-  }, []);
-
-  useEffect(() => {
-    const createDownload = (_event: IpcRendererEvent, download: Download): void => {
-      const updatedDownloads = [...downloads];
-      updatedDownloads.push(download);
-      setDownloads(updatedDownloads);
-    };
-    ipcRenderer.on(DOWNLOAD_EVENT.CREATE, createDownload);
-    return () => {
-      ipcRenderer.removeListener(DOWNLOAD_EVENT.CREATE, createDownload);
-    };
-  }, [downloads]);
-
-  useEffect(() => {
-    const clear = (_event: unknown, itemId: string): void => {
-      const newDownloads = downloads.filter((download) => download.itemId !== itemId);
-      setDownloads(newDownloads);
-    };
-    ipcRenderer.on('download-cancelled', clear);
-    return () => {
-      ipcRenderer.removeListener('download-cancelled', clear);
-    };
-  });
-
   const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${ current + 1 } - ${ Math.min(current + itemsPerPage, count) } of ${ count }`, []);
 
   const filteredDownloads = useMemo(() => {
     const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-    return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === STATUS.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mime.split('/')[0]] === typeVal)).sort((a, b) => b.itemId.localeCompare(a.itemId));
+    return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === DownloadStatus.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mimeType.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
   }, [searchVal, downloads, tab, serverVal, typeVal]);
 
-  return <>
-    <Wrapper isVisible={ isVisible }>
-      <Box
-        minHeight='x64'
-        paddingBlock='x16'
-        paddingInline='x162'
-        display='flex'
-        flexDirection='row'
-        flexWrap='nowrap'
-        alignItems='center'
-        color='neutral-800'
-      >
-        <Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
-      </Box>
-      <Divider></Divider>
-      <Box paddingInline='x162'>
-
-        <Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
-          <Box display='flex' mie='x8' width='35%' >
-            <SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
-          </Box>
-          <Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
-          <Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-          <Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
-          <Box display='flex'>
-            <Button small ghost onClick={ handleClearAll }>
-              <Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
-            </Button>
-          </Box>
+  return <Wrapper visible={isVisible}>
+    <Box
+      minHeight='x64'
+      paddingBlock='x16'
+      paddingInline='x162'
+      display='flex'
+      flexDirection='row'
+      flexWrap='nowrap'
+      alignItems='center'
+      color='neutral-800'
+    >
+      <Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
+    </Box>
+    <Divider />
+    <Box paddingInline='x162'>
+
+      <Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
+        <Box display='flex' mie='x8' width='35%' >
+          <SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
+        </Box>
+        <Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
+        <Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
+        <Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
+        <Box display='flex'>
+          <Button small ghost onClick={handleClearAll}>
+            <Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
+          </Button>
         </Box>
-        <Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
-          <Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-            { filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
-              <DownloadItem
-                key={downloadItem.itemId}
-                {...downloadItem}
-                updateDownloads={updateDownloads}
-                handleFileOpen={handleFileOpen}
-                clear={handleClear}
-              />,
-            ) }
-          </Grid.Item>
-        </Grid>
       </Box>
-      <Pagination
-        divider
-        paddingInline='x162'
-        current={currentPagination}
-        itemsPerPage={itemsPerPage}
-        showingResultsLabel={showingResultsLabel}
-        count={(filteredDownloads && filteredDownloads.length) || 0}
-        onSetItemsPerPage={setItemsPerPage}
-        onSetCurrent={setCurrentPagination}
-      />
-    </Wrapper>{ modal }</>;
+      <Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
+        <Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
+          { filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
+            <DownloadItem
+              key={downloadItem.itemId}
+              {...downloadItem}
+            />,
+          ) }
+        </Grid.Item>
+      </Grid>
+    </Box>
+    <Pagination
+      divider
+      paddingInline='x162'
+      current={currentPagination}
+      itemsPerPage={itemsPerPage}
+      showingResultsLabel={showingResultsLabel}
+      count={(filteredDownloads && filteredDownloads.length) || 0}
+      onSetItemsPerPage={setItemsPerPage}
+      onSetCurrent={setCurrentPagination}
+    />
+  </Wrapper>;
 };
 
 export default DownloadsManagerView;
diff --git a/src/ui/components/DownloadsManagerView/styles.ts b/src/ui/components/DownloadsManagerView/styles.ts
index e1d8fe7a59..55b9911e11 100644
--- a/src/ui/components/DownloadsManagerView/styles.ts
+++ b/src/ui/components/DownloadsManagerView/styles.ts
@@ -1,10 +1,9 @@
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import { Box, BoxProps } from '@rocket.chat/fuselage';
 import { FC } from 'react';
 
 type WrapperProps = {
-  isVisible: boolean;
+  visible: boolean;
 };
 
 export const Wrapper: FC<WrapperProps> = styled.section`
@@ -16,7 +15,7 @@ export const Wrapper: FC<WrapperProps> = styled.section`
 	overflow-y: auto;
 	justify-content: flex-start;
 
-	${ ({ isVisible }) => css`display: ${ isVisible ? 'flex' : 'none' };` };
+	${ ({ visible }) => css`display: ${ visible ? 'flex' : 'none' };` };
 `;
 
 export const Content: FC = styled.div`
@@ -27,16 +26,3 @@ export const Content: FC = styled.div`
 	display: flex;
 	justify-content: center;
 `;
-
-export type ClickableLinkProps = BoxProps & {
-  isRemove?: boolean;
-};
-
-export const ClickableLink: FC<ClickableLinkProps> = styled(Box)`
-	cursor: pointer;
-
-	&:hover,
-	&:focus {
-		${ ({ isRemove }) => css`color: ${ !isRemove ? '#2F343D' : '#F5455C' };` };
-	}
-`;
diff --git a/src/ui/components/SideBar/index.tsx b/src/ui/components/SideBar/index.tsx
index 26e56da68f..5d816cf774 100644
--- a/src/ui/components/SideBar/index.tsx
+++ b/src/ui/components/SideBar/index.tsx
@@ -71,11 +71,11 @@ const ServerButton: FC<ServerButtonProps> = ({
   };
 
   const initials = useMemo(() => title
-    .replace(url, parseUrl(url).hostname)
-    .split(/[^A-Za-z0-9]+/g)
-    .slice(0, 2)
-    .map((text) => text.slice(0, 1).toUpperCase())
-    .join(''), [title, url]);
+    ?.replace(url, parseUrl(url).hostname)
+    ?.split(/[^A-Za-z0-9]+/g)
+    ?.slice(0, 2)
+    ?.map((text) => text.slice(0, 1).toUpperCase())
+    ?.join(''), [title, url]);
 
   const handleServerContextMenu = (event: MouseEvent): void => {
     event.preventDefault();
diff --git a/src/ui/main/menuBar.ts b/src/ui/main/menuBar.ts
index a19794ec5e..5626a73333 100644
--- a/src/ui/main/menuBar.ts
+++ b/src/ui/main/menuBar.ts
@@ -405,7 +405,7 @@ const createWindowMenu = createSelector(
         ...servers.map((server, i): MenuItemConstructorOptions => ({
           id: server.url,
           type: typeof currentView === 'object' && currentView.url === server.url ? 'checkbox' : 'normal',
-          label: server.title.replace(/&/g, '&&'),
+          label: server.title?.replace(/&/g, '&&'),
           checked: typeof currentView === 'object' && currentView.url === server.url,
           accelerator: `CommandOrControl+${ i + 1 }`,
           click: async () => {
diff --git a/src/ui/main/touchBar.ts b/src/ui/main/touchBar.ts
index d1c10f3d43..571ede0d97 100644
--- a/src/ui/main/touchBar.ts
+++ b/src/ui/main/touchBar.ts
@@ -103,7 +103,7 @@ const updateServerSelectionPopover = (serverSelectionPopover: TouchBarPopover, c
 
 const updateServerSelectionScrubber = (serverSelectionScrubber: TouchBarScrubber, servers: Server[]): void => {
   serverSelectionScrubber.items = servers.map((server) => ({
-    label: server.title.padEnd(30),
+    label: server.title?.padEnd(30),
     icon: server.favicon
       ? nativeImage.createFromDataURL(server.favicon)
       : null,
diff --git a/src/ui/main/webviews.ts b/src/ui/main/webviews.ts
index 2d75072463..dc3fd885bb 100644
--- a/src/ui/main/webviews.ts
+++ b/src/ui/main/webviews.ts
@@ -32,13 +32,12 @@ import {
   SPELL_CHECKING_LANGUAGE_TOGGLED,
   SPELL_CHECKING_TOGGLED,
 } from '../../spellChecking/actions';
-import { dispatch, listen } from '../../store';
+import { dispatch, listen, select } from '../../store';
 import {
   LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED,
   SIDE_BAR_CONTEXT_MENU_TRIGGERED,
   SIDE_BAR_REMOVE_SERVER_CLICKED,
   WEBVIEW_ATTACHED,
-  WEBVIEW_DETACHED,
   WEBVIEW_DID_FAIL_LOAD,
   WEBVIEW_DID_NAVIGATE,
   WEBVIEW_DID_START_LOADING,
@@ -60,6 +59,16 @@ const initializeServerWebContents = (serverUrl: string, guestWebContents: WebCon
 
   guestWebContents.addListener('destroyed', () => {
     webContentsByServerUrl.delete(serverUrl);
+
+    const hasServer = select(({ servers }) => servers.some((server) => server.url === serverUrl));
+
+    if (hasServer) {
+      return;
+    }
+
+    session.fromPartition('persist:rocketchat-server').clearStorageData({
+      origin: serverUrl,
+    });
   });
 
   const handleDidStartLoading = (): void => {
@@ -386,12 +395,6 @@ export const attachGuestWebContentsEvents = async (): Promise<void> => {
     initializeServerWebContents(action.payload.url, guestWebContents, rootWindow);
   });
 
-  listen(WEBVIEW_DETACHED, (action) => {
-    session.fromPartition('persist:rocketchat-server').clearStorageData({
-      origin: action.payload.url,
-    });
-  });
-
   listen(LOADING_ERROR_VIEW_RELOAD_SERVER_CLICKED, (action) => {
     const guestWebContents = getWebContentsByServerUrl(action.payload.url);
     guestWebContents.loadURL(action.payload.url);
@@ -464,25 +467,6 @@ export const attachGuestWebContentsEvents = async (): Promise<void> => {
     }
   });
 
-  webviewsSession.addListener('will-download', (_event, item, _webContents) => {
-    const extension = path.extname(item.getFilename())?.slice(1).toLowerCase();
-
-    if (extension) {
-      item.setSaveDialogOptions({
-        filters: [
-          {
-            name: `*.${ extension }`,
-            extensions: [extension],
-          },
-          {
-            name: '*.*',
-            extensions: ['*'],
-          },
-        ],
-      });
-    }
-  });
-
   rootWindow.webContents.addListener('will-attach-webview', handleWillAttachWebview);
   rootWindow.webContents.addListener('did-attach-webview', handleDidAttachWebview);
 
diff --git a/src/ui/reducers/currentView.ts b/src/ui/reducers/currentView.ts
index fc076d33f6..c68bd59e43 100644
--- a/src/ui/reducers/currentView.ts
+++ b/src/ui/reducers/currentView.ts
@@ -67,7 +67,7 @@ export const currentView = (state: CurrentViewState = 'add-new-server', action:
       return 'add-new-server';
 
     case SIDE_BAR_REMOVE_SERVER_CLICKED: {
-      if (state === action.payload) {
+      if (typeof state === 'object' && state.url === action.payload) {
         return 'add-new-server';
       }
 
diff --git a/yarn.lock b/yarn.lock
index 9925398734..83937e445c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2125,13 +2125,6 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
   integrity sha512-+nVsLKlcUCeMzD2ufHEYuJ9a2ovstb6Dp52A5VsoKxDXgvE051XgHI/33I1EymwkRGQkwnA0LkhnUzituGs4EQ==
 
-"@types/sharp@^0.26.0":
-  version "0.26.0"
-  resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.26.0.tgz#2fa8419dbdaca8dd38f73888b27b207f188a8669"
-  integrity sha512-oJrR8eiwpL7qykn2IeFRduXM4za7z+7yOUEbKVtuDQ/F6htDLHYO6IbzhaJQHV5n6O3adIh4tJvtgPyLyyydqg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -3741,13 +3734,6 @@ decompress-response@^4.2.0:
   dependencies:
     mimic-response "^2.0.0"
 
-decompress-response@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
-  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
-  dependencies:
-    mimic-response "^3.1.0"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -7144,11 +7130,6 @@ mimic-response@^2.0.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.0.0.tgz#996a51c60adf12cb8a87d7fb8ef24c2f3d5ebb46"
   integrity sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==
 
-mimic-response@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
-  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
-
 min-indent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
@@ -7191,7 +7172,7 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.1.1, minimist@^1.2.3, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -7224,11 +7205,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
-  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
-
 mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -7310,11 +7286,6 @@ node-abi@^2.19.1, node-abi@^2.7.0:
   dependencies:
     semver "^5.4.1"
 
-node-addon-api@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.2.tgz#04bc7b83fd845ba785bb6eae25bc857e1ef75681"
-  integrity sha512-+D4s2HCnxPd5PjjI0STKwncjXTUKKqm74MDMz9OPXavjsGmjkvwgLtA5yoxJUdmpj52+2u+RrXgPipahKczMKg==
-
 node-dir@^0.1.17:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@@ -7919,27 +7890,6 @@ prebuild-install@^5.3.3:
     tunnel-agent "^0.6.0"
     which-pm-runs "^1.0.0"
 
-prebuild-install@^5.3.5:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291"
-  integrity sha512-s8Aai8++QQGi4sSbs/M1Qku62PFK49Jm1CbgXklGz4nmHveDq0wzJkg7Na5QbnO1uNH8K7iqx2EQ/mV0MZEmOg==
-  dependencies:
-    detect-libc "^1.0.3"
-    expand-template "^2.0.3"
-    github-from-package "0.0.0"
-    minimist "^1.2.3"
-    mkdirp-classic "^0.5.3"
-    napi-build-utils "^1.0.1"
-    node-abi "^2.7.0"
-    noop-logger "^0.1.1"
-    npmlog "^4.0.1"
-    pump "^3.0.0"
-    rc "^1.2.7"
-    simple-get "^3.0.3"
-    tar-fs "^2.0.0"
-    tunnel-agent "^0.6.0"
-    which-pm-runs "^1.0.0"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8775,21 +8725,6 @@ sharp@^0.23.4:
     tar "^5.0.5"
     tunnel-agent "^0.6.0"
 
-sharp@^0.26.2:
-  version "0.26.2"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
-  integrity sha512-bGBPCxRAvdK9bX5HokqEYma4j/Q5+w8Nrmb2/sfgQCLEUx/HblcpmOfp59obL3+knIKnOhyKmDb4tEOhvFlp6Q==
-  dependencies:
-    color "^3.1.2"
-    detect-libc "^1.0.3"
-    node-addon-api "^3.0.2"
-    npmlog "^4.1.2"
-    prebuild-install "^5.3.5"
-    semver "^7.3.2"
-    simple-get "^4.0.0"
-    tar-fs "^2.1.0"
-    tunnel-agent "^0.6.0"
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -8860,15 +8795,6 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
-simple-get@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
-  integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ==
-  dependencies:
-    decompress-response "^6.0.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -9355,16 +9281,6 @@ tar-fs@^2.0.0:
     pump "^3.0.0"
     tar-stream "^2.0.0"
 
-tar-fs@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
-  integrity sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
 tar-stream@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.0.tgz#d1aaa3661f05b38b5acc9b7020efdca5179a2cc3"

From 9b8d80578b75e7f538dda00790390888d94e5f03 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 14:54:23 -0300
Subject: [PATCH 61/66] Update Jest configuration

---
 jest.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index 2fa8d68db1..6e1e3c2ed7 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,7 +11,7 @@ module.exports = {
       ],
       globals: {
         'ts-jest': {
-          tsConfig: {
+          tsconfig: {
             noUnusedLocals: false,
             noUnusedParameters: false,
           },
@@ -29,7 +29,7 @@ module.exports = {
       ],
       globals: {
         'ts-jest': {
-          tsConfig: {
+          tsconfig: {
             noUnusedLocals: false,
             noUnusedParameters: false,
           },

From cd2bbd01617a3f4d9a58e7c9f34bb54690ef41b5 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 15:58:57 -0300
Subject: [PATCH 62/66] Remove unused module

---
 .../DownloadsManagerView/downloadUtils.ts     | 27 -------------------
 .../components/DownloadsManagerView/index.tsx |  9 ++++++-
 2 files changed, 8 insertions(+), 28 deletions(-)
 delete mode 100644 src/ui/components/DownloadsManagerView/downloadUtils.ts

diff --git a/src/ui/components/DownloadsManagerView/downloadUtils.ts b/src/ui/components/DownloadsManagerView/downloadUtils.ts
deleted file mode 100644
index 7229d57289..0000000000
--- a/src/ui/components/DownloadsManagerView/downloadUtils.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// Utility function for bytes conversion. TODO: seperate into another file.
-export const formatBytes = (bytes: number, decimals = 2, size = false): string => {
-  if (bytes === 0) {
-    return '0 Bytes';
-  }
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  if (size) {
-    return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
-  }
-
-  return String(parseFloat((bytes / Math.pow(k, i)).toFixed(dm)));
-};
-
-//  Filetype to Mimetype mapping
-export const mapping = {
-  application: 'Files',
-  image: 'Images',
-  video: 'Videos',
-  audio: 'Audios',
-  text: 'Texts',
-} as const;
diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
index aae311e01f..f2b3469c6f 100644
--- a/src/ui/components/DownloadsManagerView/index.tsx
+++ b/src/ui/components/DownloadsManagerView/index.tsx
@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
 import { DownloadStatus } from '../../../downloads/common';
 import { RootState } from '../../../store/rootReducer';
 import DownloadItem from './DownloadItem';
-import { mapping } from './downloadUtils';
 import { Wrapper } from './styles';
 
 const fileTypes = [
@@ -25,6 +24,14 @@ const fileStatus = [
   [DownloadStatus.CANCELLED, 'Cancelled'],
 ] as const;
 
+const mapping = {
+  application: 'Files',
+  image: 'Images',
+  video: 'Videos',
+  audio: 'Audios',
+  text: 'Texts',
+} as const;
+
 const DownloadsManagerView: FC = () => {
   const isVisible = useSelector(({ currentView }: RootState) => currentView === 'downloads');
   const serverOptions = useSelector<RootState, [string, string][]>(({ servers }) => [

From 73fb57070a7483aabfd6f88928f2908ad62ea75a Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 16:29:44 -0300
Subject: [PATCH 63/66] Fix fsevents issue affecting Jest

---
 package.json | 3 +++
 yarn.lock    | 9 ++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 428fc68440..64802c6639 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,9 @@
     "typescript": "^4.0.3",
     "xvfb-maybe": "^0.2.1"
   },
+  "resolutions": {
+    "**/jest-haste-map/fsevents": "2.1.3"
+  },
   "engines": {
     "node": ">=12.8.x"
   },
diff --git a/yarn.lock b/yarn.lock
index 83937e445c..57838858ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4781,12 +4781,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^2.1.2:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.0.tgz#4150396a427ecb5baa747725b70270a72b17bc17"
-  integrity sha512-pKnaUh2TNvk+/egJdBw1h46LwyLx8BzEq+MGCf/RMCVfEHHsGOCWG00dqk91kUPPArIIwMBg9T/virxwzP03cA==
-
-fsevents@~2.1.2:
+fsevents@2.1.3, fsevents@^2.1.2, fsevents@~2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
@@ -7279,7 +7274,7 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-abi@^2.19.1, node-abi@^2.7.0:
+node-abi@^2.7.0:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.19.1.tgz#6aa32561d0a5e2fdb6810d8c25641b657a8cea85"
   integrity sha512-HbtmIuByq44yhAzK7b9j/FelKlHYISKQn0mtvcBrU5QBkhoCMp5bu8Hv5AI34DcKfOAcJBcOEMwLlwO62FFu9A==

From 082d00482d16570e8400cdff8ba9b02795834e89 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 19:24:51 -0300
Subject: [PATCH 64/66] Update filters

---
 src/i18n/en.i18n.json                         |  23 +-
 src/types/fuselage.d.ts                       |   3 +-
 .../components/DownloadsManagerView/index.tsx | 230 ++++++++++--------
 .../components/DownloadsManagerView/styles.ts |  28 ---
 4 files changed, 157 insertions(+), 127 deletions(-)
 delete mode 100644 src/ui/components/DownloadsManagerView/styles.ts

diff --git a/src/i18n/en.i18n.json b/src/i18n/en.i18n.json
index e6d5dc7c79..bd8b740a10 100644
--- a/src/i18n/en.i18n.json
+++ b/src/i18n/en.i18n.json
@@ -103,6 +103,26 @@
     }
   },
   "downloads": {
+    "title": "Downloads",
+    "filters": {
+      "search": "Search",
+      "server": "Server",
+      "mimeType": "Type",
+      "status": "Status",
+      "clear": "Clear filters",
+      "all": "All",
+      "mimes": {
+        "images": "Images",
+        "videos": "Videos",
+        "audios": "Audios",
+        "texts": "Texts",
+        "files": "Files"
+      },
+      "statuses": {
+        "paused": "Paused",
+        "cancelled": "Cancelled"
+      }
+    },
     "item": {
       "cancel": "Cancel",
       "copyLink": "Copy link",
@@ -113,7 +133,8 @@
       "resume": "Resume",
       "retry": "Retry",
       "showInFolder": "Show in Folder"
-    }
+    },
+    "showingResults": "Showing results {{first}} - {{last}} of {{count}}"
   },
   "error": {
     "authNeeded": "Auth needed, try <strong>{{- auth}}</strong>",
diff --git a/src/types/fuselage.d.ts b/src/types/fuselage.d.ts
index 5303d7dc6b..91e4d49adb 100644
--- a/src/types/fuselage.d.ts
+++ b/src/types/fuselage.d.ts
@@ -353,9 +353,10 @@ declare module '@rocket.chat/fuselage' {
   export const Scrollable: ForwardRefExoticComponent<ScrollableProps>;
 
   type SelectOptions = readonly (readonly [string, string])[];
-  type SelectProps = BoxProps & {
+  type SelectProps = Omit<BoxProps, 'onChange'> & {
     error?: string;
     options: SelectOptions;
+    onChange: (value: SelectOptions[number][0]) => void;
   };
   export const Select: ForwardRefExoticComponent<SelectProps>;
 
diff --git a/src/ui/components/DownloadsManagerView/index.tsx b/src/ui/components/DownloadsManagerView/index.tsx
index f2b3469c6f..138dcff6cc 100644
--- a/src/ui/components/DownloadsManagerView/index.tsx
+++ b/src/ui/components/DownloadsManagerView/index.tsx
@@ -1,137 +1,173 @@
-import { Box, Grid, SearchInput, Select, Icon, Button, Pagination, Divider, PaginationProps } from '@rocket.chat/fuselage';
-import { useLocalStorage, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import { Box, SearchInput, Select, Icon, Button, Pagination, PaginationProps, Scrollable } from '@rocket.chat/fuselage';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 import React, { useState, useMemo, useCallback, FC, ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { DownloadStatus } from '../../../downloads/common';
+import { Download, DownloadStatus } from '../../../downloads/common';
 import { RootState } from '../../../store/rootReducer';
 import DownloadItem from './DownloadItem';
-import { Wrapper } from './styles';
-
-const fileTypes = [
-  ['all', 'All'],
-  ['images', 'Images'],
-  ['videos', 'Videos'],
-  ['audios', 'Audios'],
-  ['text', 'Texts'],
-  ['files', 'Files'],
-] as const;
-
-const fileStatus = [
-  [DownloadStatus.ALL, 'All'],
-  [DownloadStatus.PAUSED, 'Paused'],
-  [DownloadStatus.CANCELLED, 'Cancelled'],
-] as const;
-
-const mapping = {
-  application: 'Files',
-  image: 'Images',
-  video: 'Videos',
-  audio: 'Audios',
-  text: 'Texts',
-} as const;
 
 const DownloadsManagerView: FC = () => {
   const isVisible = useSelector(({ currentView }: RootState) => currentView === 'downloads');
-  const serverOptions = useSelector<RootState, [string, string][]>(({ servers }) => [
-    ['all', 'All'],
-    ...servers.map<[string, string]>((server) => [server.title, server.title]),
-  ]);
-  const downloads = useSelector(({ downloads }: RootState) => Object.values(downloads));
+
+  const [searchFilter, setSearchFilter] = useLocalStorage('download-search', '');
+
+  const handleSearchFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setSearchFilter(event.target.value);
+  }, [setSearchFilter]);
 
   const { t } = useTranslation();
 
-  const [tab, setTab] = useLocalStorage<typeof DownloadStatus[keyof typeof DownloadStatus] | ''>('download-tab', DownloadStatus.ALL);
-  const [searchVal, setSearchVal] = useState('');
-  const [serverVal, setServerVal] = useLocalStorage('download-server', '');
-  const [typeVal, setTypeVal] = useLocalStorage('download-type', '');
-  const [currentPagination, setCurrentPagination] = useState(0);
-  const [itemsPerPage, setItemsPerPage] = useState<PaginationProps['itemsPerPage']>(25);
+  const serverFilterOptions = useSelector<RootState, [string, string][]>(({ downloads }) => [
+    ['*', t('downloads.filters.all')],
+    ...Object.values(downloads)
+      .filter(({ serverUrl, serverTitle }) => serverUrl && serverTitle)
+      .map<[string, string]>(({ serverUrl, serverTitle }) => [serverUrl, serverTitle]),
+  ]);
 
-  const handleTabChange = useMutableCallback((event) => {
-    setTab(event);
-  });
+  const [serverFilter, setServerFilter] = useLocalStorage<(typeof serverFilterOptions)[number][0]>('download-server', '');
 
-  const handleSearch = useMutableCallback((event: ChangeEvent<HTMLInputElement>) => {
-    setSearchVal(event.target.value);
-  });
+  const handleServerFilterChange = useCallback((value: (typeof serverFilterOptions)[number][0]) => {
+    setServerFilter(value);
+  }, [setServerFilter]);
 
-  const handleServerFilter = useMutableCallback((event) => {
-    setServerVal(event);
-  });
+  const mimeTypeOptions = useMemo<[string, string][]>(() => [
+    ['*', t('downloads.filters.all')],
+    ['image', t('downloads.filters.mimes.images')],
+    ['video', t('downloads.filters.mimes.videos')],
+    ['audio', t('downloads.filters.mimes.audios')],
+    ['text', t('downloads.filters.mimes.texts')],
+    ['application', t('downloads.filters.mimes.files')],
+  ], [t]);
 
-  const handleMimeFilter = useMutableCallback((event) => {
-    setTypeVal(event);
-  });
+  const [mimeTypeFilter, setMimeTypeFilter] = useLocalStorage<(typeof mimeTypeOptions)[number][0]>('download-type', '');
+
+  const handleMimeFilter = useCallback((value: (typeof mimeTypeOptions)[number][0]) => {
+    setMimeTypeFilter(value);
+  }, [setMimeTypeFilter]);
+
+  const statusFilterOptions = useMemo<[string, string][]>(() => [
+    [DownloadStatus.ALL, t('downloads.filters.all')],
+    [DownloadStatus.PAUSED, t('downloads.filters.statuses.paused')],
+    [DownloadStatus.CANCELLED, t('downloads.filters.statuses.cancelled')],
+  ], [t]);
+
+  const [statusFilter, setStatusFilter] = useLocalStorage<(typeof statusFilterOptions)[number][0]>('download-tab', DownloadStatus.ALL);
 
-  // Modal Action
+  const handleTabChange = useCallback((value: (typeof statusFilterOptions)[number][0]) => {
+    setStatusFilter(value);
+  }, [setStatusFilter]);
 
   const handleClearAll = useCallback((): void => {
-    setSearchVal('');
-    setTypeVal('');
-    setServerVal('');
-    setTab('');
-  }, [setServerVal, setTab, setTypeVal]);
+    setSearchFilter('');
+    setMimeTypeFilter('');
+    setServerFilter('');
+    setStatusFilter('');
+  }, [setSearchFilter, setMimeTypeFilter, setServerFilter, setStatusFilter]);
 
-  const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => `Showing results ${ current + 1 } - ${ Math.min(current + itemsPerPage, count) } of ${ count }`, []);
+  const [itemsPerPage, setItemsPerPage] = useState<PaginationProps['itemsPerPage']>(25);
+  const [currentPagination, setCurrentPagination] = useState(0);
 
-  const filteredDownloads = useMemo(() => {
-    const searchRegex = searchVal && new RegExp(`${ searchVal }`, 'gi');
-    return downloads.filter((download) => (!searchRegex || searchRegex.test(download.fileName)) && (!tab || tab === DownloadStatus.ALL || download.status === tab) && (!serverVal || serverVal === 'all' || serverVal === download.serverTitle) && (!typeVal || typeVal === 'all' || mapping[download.mimeType.split('/')[0]] === typeVal)).sort((a, b) => b.itemId - a.itemId);
-  }, [searchVal, downloads, tab, serverVal, typeVal]);
+  const showingResultsLabel = useCallback(({ count, current, itemsPerPage }) => t('downloads.showingResults', {
+    first: current + 1,
+    last: Math.min(current + itemsPerPage, count),
+    count,
+  }), [t]);
+
+  const downloads = useSelector(({ downloads }: RootState) => {
+    type Predicate = (download: Download) => boolean;
+    const searchPredicate: Predicate = searchFilter
+      ? ({ fileName }) => fileName.indexOf(searchFilter) > -1
+      : () => true;
+    const serverPredicate: Predicate = serverFilter !== '' && serverFilter !== '*'
+      ? ({ serverUrl }) => serverUrl === serverFilter
+      : () => true;
+    const mimeTypePredicate: Predicate = mimeTypeFilter !== '' && mimeTypeFilter !== '*'
+      ? ({ mimeType }) => mimeType?.split('/')?.[0] === mimeTypeFilter
+      : () => true;
+    const statusPredicate: Predicate = statusFilter !== '' && statusFilter !== DownloadStatus.ALL
+      ? ({ status }) => status === statusFilter
+      : () => true;
+    return Object.values(downloads)
+      .filter(searchPredicate)
+      .filter(serverPredicate)
+      .filter(mimeTypePredicate)
+      .filter(statusPredicate)
+      .sort((a, b) => b.itemId - a.itemId);
+  });
 
-  return <Wrapper visible={isVisible}>
+  return <Box display={isVisible ? 'flex' : 'none'} flexDirection='column' height='100vh' backgroundColor='surface'>
     <Box
-      minHeight='x64'
-      paddingBlock='x16'
-      paddingInline='x162'
+      minHeight={64}
+      paddingInline={64}
       display='flex'
       flexDirection='row'
       flexWrap='nowrap'
       alignItems='center'
-      color='neutral-800'
+      borderBlockEndWidth={2}
+      borderBlockEndStyle='solid'
+      borderBlockEndColor='neutral-300'
     >
-      <Box is='h1' fontScale='h1' flexGrow={1}>{t('Downloads')}</Box>
+      <Box is='div' color='default' fontScale='h1'>{t('downloads.title')}</Box>
     </Box>
-    <Divider />
-    <Box paddingInline='x162'>
-
-      <Box display='flex' justifyContent='space-between' alignItems='center' mb='x40' height='x40'>
-        <Box display='flex' mie='x8' width='35%' >
-          <SearchInput value={searchVal} onChange={ handleSearch } placeholder='Search' addon={ <Icon color='neutral-700' name='magnifier' size='x20' /> } />
-        </Box>
-        <Select mie='x8' width='20%' value={serverVal} onChange={ handleServerFilter } placeholder='Filter by Server' options={ serverOptions } />
-        <Select mie='x8' width='20%' value={typeVal} onChange={ handleMimeFilter } placeholder='Filter by File type' options={ fileTypes } />
-        <Select mie='x8' width='20%' value={tab} onChange={ handleTabChange } placeholder='Filter by File Status' options={ fileStatus } />
-        <Box display='flex'>
-          <Button small ghost onClick={handleClearAll}>
-            <Icon color='neutral-700' name='trash' size='x24' title='Clear Filters' />
-          </Button>
-        </Box>
+    <Box display='flex' justifyContent='space-between' alignItems='center' marginBlock={8} paddingInline={64}>
+      <Box display='flex' flexGrow={7} flexShrink={7} flexBasis='0' paddingInline={2}>
+        <SearchInput
+          value={searchFilter}
+          placeholder={t('downloads.filters.search')}
+          addon={<Icon color='neutral-700' name='magnifier' size={20} />}
+          onChange={handleSearchFilterChange}
+        />
+      </Box>
+      <Box display='flex' flexGrow={3} flexShrink={3} flexBasis='0' paddingInline={2}>
+        <Select
+          value={serverFilter}
+          placeholder={t('downloads.filters.server')}
+          options={serverFilterOptions}
+          onChange={handleServerFilterChange}
+        />
+      </Box>
+      <Box display='flex' flexGrow={3} flexShrink={3} paddingInline={2}>
+        <Select
+          value={mimeTypeFilter}
+          placeholder={t('downloads.filters.mimeType')}
+          options={mimeTypeOptions}
+          onChange={handleMimeFilter}
+        />
+      </Box>
+      <Box display='flex' flexGrow={3} flexShrink={3} paddingInline={2}>
+        <Select
+          value={statusFilter}
+          placeholder={t('downloads.filters.status')}
+          options={statusFilterOptions}
+          onChange={handleTabChange}
+        />
+      </Box>
+      <Box display='flex' flexGrow={1} flexShrink={1} paddingInline={2}>
+        <Button small ghost title={t('downloads.filters.clear')} onClick={handleClearAll}>
+          <Icon color='neutral-700' name='trash' size={24} />
+        </Button>
       </Box>
-      <Grid xl={ true } maxHeight='75vh' overflowY='scroll' >
-        <Grid.Item xl={ 12 } style={ { display: 'flex', flexDirection: 'column', alignItems: 'center' } }>
-          { filteredDownloads.slice(currentPagination, currentPagination + itemsPerPage).map((downloadItem) =>
-            <DownloadItem
-              key={downloadItem.itemId}
-              {...downloadItem}
-            />,
-          ) }
-        </Grid.Item>
-      </Grid>
     </Box>
-    <Pagination
+    <Scrollable>
+      <Box flexGrow={1} flexShrink={1} paddingBlock={8} paddingInline={64}>
+        <Box>
+          {downloads.slice(currentPagination, currentPagination + itemsPerPage)
+            .map((downloadItem) => <DownloadItem key={downloadItem.itemId} {...downloadItem} />)}
+        </Box>
+      </Box>
+    </Scrollable>
+    {downloads.length > 0 && <Pagination
       divider
-      paddingInline='x162'
       current={currentPagination}
       itemsPerPage={itemsPerPage}
+      count={(downloads && downloads.length) || 0}
       showingResultsLabel={showingResultsLabel}
-      count={(filteredDownloads && filteredDownloads.length) || 0}
       onSetItemsPerPage={setItemsPerPage}
       onSetCurrent={setCurrentPagination}
-    />
-  </Wrapper>;
+    />}
+  </Box>;
 };
 
 export default DownloadsManagerView;
diff --git a/src/ui/components/DownloadsManagerView/styles.ts b/src/ui/components/DownloadsManagerView/styles.ts
deleted file mode 100644
index 55b9911e11..0000000000
--- a/src/ui/components/DownloadsManagerView/styles.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-import { FC } from 'react';
-
-type WrapperProps = {
-  visible: boolean;
-};
-
-export const Wrapper: FC<WrapperProps> = styled.section`
-	background-color: white;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	overflow-y: auto;
-	justify-content: flex-start;
-
-	${ ({ visible }) => css`display: ${ visible ? 'flex' : 'none' };` };
-`;
-
-export const Content: FC = styled.div`
-	position: relative;
-	top: 10%;
-	width: 100%;
-	max-width: 100%;
-	display: flex;
-	justify-content: center;
-`;

From 47b0743497fda3c87165eec716a27f1a8170f7cc Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 19:41:31 -0300
Subject: [PATCH 65/66] Rollback fsevents resolution

---
 package.json |   6 +-
 yarn.lock    | 740 +++++++++++++++++++++++++--------------------------
 2 files changed, 370 insertions(+), 376 deletions(-)

diff --git a/package.json b/package.json
index 64802c6639..080d01fd8a 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "abort-controller": "^3.0.0",
     "electron-store": "^6.0.0",
     "electron-updater": "^4.3.5",
+    "fsevents": "^2.2.1",
     "i18next": "^19.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -96,7 +97,7 @@
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-react": "^7.21.1",
     "eslint-plugin-react-hooks": "^4.1.0",
-    "jest": "^26.4.2",
+    "jest": "^26.6.3",
     "npm-run-all": "^4.1.5",
     "rollup": "^2.28.1",
     "rollup-plugin-copy": "^3.3.0",
@@ -104,9 +105,6 @@
     "typescript": "^4.0.3",
     "xvfb-maybe": "^0.2.1"
   },
-  "resolutions": {
-    "**/jest-haste-map/fsevents": "2.1.3"
-  },
   "engines": {
     "node": ">=12.8.x"
   },
diff --git a/yarn.lock b/yarn.lock
index 57838858ef..70d0e32fb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,14 +7,7 @@
   resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.0.3.tgz#bc5b5532ecafd923a61f2fb097e3b108c0106a3f"
   integrity sha512-GLyWIFBbGvpKPGo55JyRZAo4lVbnBiD52cKlw/0Vt+wnmKvWJkpZvsjVoaIolyBXDeAQKSicRtqFNPem9w0WYA==
 
-"@babel/code-frame@^7.0.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
-  integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
-  dependencies:
-    "@babel/highlight" "^7.8.3"
-
-"@babel/code-frame@^7.10.4":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
   integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
@@ -296,15 +289,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
-  integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^4.0.0"
-
 "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.12.3", "@babel/parser@^7.12.5", "@babel/parser@^7.7.0":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0"
@@ -1421,13 +1405,6 @@
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/create-cache-key-function@^26.5.0":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/create-cache-key-function/-/create-cache-key-function-26.6.2.tgz#04cf439207a4fd12418d8aee551cddc86f9ac5f5"
-  integrity sha512-LgEuqU1f/7WEIPYqwLPIvvHuc1sB6gMVbT6zWhin3txYUNYK/kGQrC1F2WR4gR34YlI9bBtViTm5z98RqVZAaw==
-  dependencies:
-    "@jest/types" "^26.6.2"
-
 "@jest/environment@^25.5.0":
   version "25.5.0"
   resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.5.0.tgz#aa33b0c21a716c65686638e7ef816c0e3a0c7b37"
@@ -1866,11 +1843,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/color-name@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
-  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
 "@types/connect@*":
   version "3.4.33"
   resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.33.tgz#31610c901eca573b8713c3330abc6e6b9f588546"
@@ -1949,20 +1921,15 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
-  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
-
-"@types/istanbul-lib-coverage@^2.0.1":
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
   integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
 
 "@types/istanbul-lib-report@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
-  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
@@ -2015,9 +1982,9 @@
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
 "@types/minimist@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
-  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.1.tgz#283f669ff76d7b8260df8ab7a4262cc83d988256"
+  integrity sha512-fZQQafSREFyuZcdWFAExYjBiCL7AUCdgsk80iO0q4yihYYdcIiH28CcuPTGFgLOCC8RlW49GSQxdHwZP+I7CNg==
 
 "@types/mongodb@*":
   version "3.5.32"
@@ -2036,14 +2003,14 @@
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "13.7.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.7.0.tgz#b417deda18cf8400f278733499ad5547ed1abec4"
-  integrity sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ==
+  version "14.14.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.7.tgz#8ea1e8f8eae2430cf440564b98c6dfce1ec5945d"
+  integrity sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==
 
 "@types/node@^12":
-  version "12.19.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.3.tgz#a6e252973214079155f749e8bef99cc80af182fa"
-  integrity sha512-8Jduo8wvvwDzEVJCOvS/G6sgilOLvvhn1eMmK3TW8/T217O7u1jdrK6ImKLv80tVryaPSVeKu6sjDEiFjd4/eg==
+  version "12.19.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.4.tgz#cdfbb62e26c7435ed9aab9c941393cc3598e9b46"
+  integrity sha512-o3oj1bETk8kBwzz1WlO6JWL/AfAA3Vm6J1B3C9CsdxHYp7XgPiH7OEXPUbZTndHlRaIElrANkQfe6ZmfJb3H2w==
 
 "@types/node@^12.0.12":
   version "12.12.27"
@@ -2092,7 +2059,7 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react@*", "@types/react@^16.9.48":
+"@types/react@*":
   version "16.9.55"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.55.tgz#47078587f5bfe028a23b6b46c7b94ac0d436acff"
   integrity sha512-6KLe6lkILeRwyyy7yG9rULKJ0sXplUsl98MGoCfpteXf9sPWFWWMknDcsvubcpaTdBuxtsLF6HDUwdApZL/xIg==
@@ -2100,6 +2067,14 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.9.48":
+  version "16.9.56"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.56.tgz#ea25847b53c5bec064933095fc366b1462e2adf0"
+  integrity sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/resize-observer-browser@^0.1.3":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.4.tgz#84879a4d6d4aaefde53d4b29c91c0c4cbcffc26f"
@@ -2141,9 +2116,9 @@
   integrity sha512-T3NQD8hXNW2sRsSbLNjF/aBo18MyJlbw0lSpQHB/eZZtScPdexN4HSa8cByYwTw9Wy7KuOFr81mlDQcQQaZ79w==
 
 "@types/yargs-parser@*":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
-  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
+  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
 "@types/yargs@^13.0.0":
   version "13.0.3"
@@ -2160,60 +2135,60 @@
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^4.2.0":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.6.1.tgz#99d77eb7a016fd5a5e749d2c44a7e4c317eb7da3"
-  integrity sha512-SNZyflefTMK2JyrPfFFzzoy2asLmZvZJ6+/L5cIqg4HfKGiW2Gr1Go1OyEVqne/U4QwmoasuMwppoBHWBWF2nA==
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.7.0.tgz#85c9bbda00c0cb604d3c241f7bc7fb171a2d3479"
+  integrity sha512-li9aiSVBBd7kU5VlQlT1AqP0uWGDK6JYKUQ9cVDnOg34VNnd9t4jr0Yqc/bKxJr/tDCPDaB4KzoSFN9fgVxe/Q==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.6.1"
-    "@typescript-eslint/scope-manager" "4.6.1"
+    "@typescript-eslint/experimental-utils" "4.7.0"
+    "@typescript-eslint/scope-manager" "4.7.0"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.6.1.tgz#a9c691dfd530a9570274fe68907c24c07a06c4aa"
-  integrity sha512-qyPqCFWlHZXkEBoV56UxHSoXW2qnTr4JrWVXOh3soBP3q0o7p4pUEMfInDwIa0dB/ypdtm7gLOS0hg0a73ijfg==
+"@typescript-eslint/experimental-utils@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.7.0.tgz#8d1058c38bec3d3bbd9c898a1c32318d80faf3c5"
+  integrity sha512-cymzovXAiD4EF+YoHAB5Oh02MpnXjvyaOb+v+BdpY7lsJXZQN34oIETeUwVT2XfV9rSNpXaIcknDLfupO/tUoA==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.6.1"
-    "@typescript-eslint/types" "4.6.1"
-    "@typescript-eslint/typescript-estree" "4.6.1"
+    "@typescript-eslint/scope-manager" "4.7.0"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/typescript-estree" "4.7.0"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
 "@typescript-eslint/parser@^4.2.0":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.6.1.tgz#b801bff67b536ecc4a840ac9289ba2be57e02428"
-  integrity sha512-lScKRPt1wM9UwyKkGKyQDqf0bh6jm8DQ5iN37urRIXDm16GEv+HGEmum2Fc423xlk5NUOkOpfTnKZc/tqKZkDQ==
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.7.0.tgz#44bdab0f788b478178368baa65d3365fdc63da1c"
+  integrity sha512-+meGV8bMP1sJHBI2AFq1GeTwofcGiur8LoIr6v+rEmD9knyCqDlrQcFHR0KDDfldHIFDU/enZ53fla6ReF4wRw==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.6.1"
-    "@typescript-eslint/types" "4.6.1"
-    "@typescript-eslint/typescript-estree" "4.6.1"
+    "@typescript-eslint/scope-manager" "4.7.0"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/typescript-estree" "4.7.0"
     debug "^4.1.1"
 
-"@typescript-eslint/scope-manager@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.6.1.tgz#21872b91cbf7adfc7083f17b8041149148baf992"
-  integrity sha512-f95+80r6VdINYscJY1KDUEDcxZ3prAWHulL4qRDfNVD0I5QAVSGqFkwHERDoLYJJWmEAkUMdQVvx7/c2Hp+Bjg==
+"@typescript-eslint/scope-manager@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.7.0.tgz#2115526085fb72723ccdc1eeae75dec7126220ed"
+  integrity sha512-ILITvqwDJYbcDCROj6+Ob0oCKNg3SH46iWcNcTIT9B5aiVssoTYkhKjxOMNzR1F7WSJkik4zmuqve5MdnA0DyA==
   dependencies:
-    "@typescript-eslint/types" "4.6.1"
-    "@typescript-eslint/visitor-keys" "4.6.1"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/visitor-keys" "4.7.0"
 
-"@typescript-eslint/types@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.6.1.tgz#d3ad7478f53f22e7339dc006ab61aac131231552"
-  integrity sha512-k2ZCHhJ96YZyPIsykickez+OMHkz06xppVLfJ+DY90i532/Cx2Z+HiRMH8YZQo7a4zVd/TwNBuRCdXlGK4yo8w==
+"@typescript-eslint/types@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.7.0.tgz#5e95ef5c740f43d942542b35811f87b62fccca69"
+  integrity sha512-uLszFe0wExJc+I7q0Z/+BnP7wao/kzX0hB5vJn4LIgrfrMLgnB2UXoReV19lkJQS1a1mHWGGODSxnBx6JQC3Sg==
 
-"@typescript-eslint/typescript-estree@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.6.1.tgz#6025cce724329413f57e4959b2d676fceeca246f"
-  integrity sha512-/J/kxiyjQQKqEr5kuKLNQ1Finpfb8gf/NpbwqFFYEBjxOsZ621r9AqwS9UDRA1Rrr/eneX/YsbPAIhU2rFLjXQ==
+"@typescript-eslint/typescript-estree@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.7.0.tgz#539531167f05ba20eb0b6785567076679e29d393"
+  integrity sha512-5XZRQznD1MfUmxu1t8/j2Af4OxbA7EFU2rbo0No7meb46eHgGkSieFdfV6omiC/DGIBhH9H9gXn7okBbVOm8jw==
   dependencies:
-    "@typescript-eslint/types" "4.6.1"
-    "@typescript-eslint/visitor-keys" "4.6.1"
+    "@typescript-eslint/types" "4.7.0"
+    "@typescript-eslint/visitor-keys" "4.7.0"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
@@ -2221,12 +2196,12 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/visitor-keys@4.6.1":
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.6.1.tgz#6b125883402d8939df7b54528d879e88f7ba3614"
-  integrity sha512-owABze4toX7QXwOLT3/D5a8NecZEjEWU1srqxENTfqsY3bwVnl3YYbOh6s1rp2wQKO9RTHFGjKes08FgE7SVMw==
+"@typescript-eslint/visitor-keys@4.7.0":
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.7.0.tgz#6783824f22acfc49e754970ed21b88ac03b80e6f"
+  integrity sha512-aDJDWuCRsf1lXOtignlfiPODkzSxxop7D0rZ91L6ZuMlcMCSh0YyK+gAfo5zN/ih6WxMwhoXgJWC3cWQdaKC+A==
   dependencies:
-    "@typescript-eslint/types" "4.6.1"
+    "@typescript-eslint/types" "4.7.0"
     eslint-visitor-keys "^2.0.0"
 
 JSONStream@^1.0.4:
@@ -2312,17 +2287,7 @@ ajv-keywords@^3.4.1:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.10.2:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.11.0.tgz#c3607cbc8ae392d8a5a536f25b21f8e5f3f87fe9"
-  integrity sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ajv@^6.12.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2379,11 +2344,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
     color-convert "^1.9.0"
 
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
-  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
-    "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
 anymatch@^2.0.0:
@@ -3251,7 +3215,7 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.19.0, commander@~2.20.3:
+commander@^2.19.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3335,101 +3299,101 @@ contains-path@^0.1.0:
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
   integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
 
-conventional-changelog-angular@^5.0.11:
-  version "5.0.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.11.tgz#99a3ca16e4a5305e0c2c2fae3ef74fd7631fc3fb"
-  integrity sha512-nSLypht/1yEflhuTogC03i7DX7sOrXGsRn14g131Potqi6cbGbGEE9PSDEHKldabB6N76HiSyw9Ph+kLmC04Qw==
+conventional-changelog-angular@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz#c979b8b921cbfe26402eb3da5bbfda02d865a2b9"
+  integrity sha512-5GLsbnkR/7A89RyHLvvoExbiGbd9xKdKqDTrArnPbOqBqG/2wIosu0fHwpeIRI8Tl94MhVNBXcLJZl92ZQ5USw==
   dependencies:
     compare-func "^2.0.0"
     q "^1.5.1"
 
-conventional-changelog-atom@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-2.0.7.tgz#221575253a04f77a2fd273eb2bf29a138f710abf"
-  integrity sha512-7dOREZwzB+tCEMjRTDfen0OHwd7vPUdmU0llTy1eloZgtOP4iSLVzYIQqfmdRZEty+3w5Jz+AbhfTJKoKw1JeQ==
+conventional-changelog-atom@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-2.0.8.tgz#a759ec61c22d1c1196925fca88fe3ae89fd7d8de"
+  integrity sha512-xo6v46icsFTK3bb7dY/8m2qvc8sZemRgdqLb/bjpBsH2UyOS8rKNTgcb5025Hri6IpANPApbXMg15QLb1LJpBw==
   dependencies:
     q "^1.5.1"
 
 conventional-changelog-cli@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-2.1.0.tgz#5da5be32203ca8382815afc85b7f9151115d5e97"
-  integrity sha512-hZ8EcpxV4LcGOZwH+U5LJQDnyA4o/uyUdmIGzmFZMB4caujavvDBo/iTgVihk0m1QKkEhJgulagrILSm1JCakA==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-2.1.1.tgz#7a11980bc399938e0509d2adf8e7a0e213eb994e"
+  integrity sha512-xMGQdKJ+4XFDDgfX5aK7UNFduvJMbvF5BB+g0OdVhA3rYdYyhctrIE2Al+WYdZeKTdg9YzMWF2iFPT8MupIwng==
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog "^3.1.23"
+    conventional-changelog "^3.1.24"
     lodash "^4.17.15"
-    meow "^7.0.0"
+    meow "^8.0.0"
     tempfile "^3.0.0"
 
-conventional-changelog-codemirror@^2.0.7:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-2.0.7.tgz#d6b6a8ce2707710c5a036e305037547fb9e15bfb"
-  integrity sha512-Oralk1kiagn3Gb5cR5BffenWjVu59t/viE6UMD/mQa1hISMPkMYhJIqX+CMeA1zXgVBO+YHQhhokEj99GP5xcg==
+conventional-changelog-codemirror@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-2.0.8.tgz#398e9530f08ce34ec4640af98eeaf3022eb1f7dc"
+  integrity sha512-z5DAsn3uj1Vfp7po3gpt2Boc+Bdwmw2++ZHa5Ak9k0UKsYAO5mH1UBTN0qSCuJZREIhX6WU4E1p3IW2oRCNzQw==
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-conventionalcommits@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.4.0.tgz#8d96687141c9bbd725a89b95c04966d364194cd4"
-  integrity sha512-ybvx76jTh08tpaYrYn/yd0uJNLt5yMrb1BphDe4WBredMlvPisvMghfpnJb6RmRNcqXeuhR6LfGZGewbkRm9yA==
+conventional-changelog-conventionalcommits@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-4.5.0.tgz#a02e0b06d11d342fdc0f00c91d78265ed0bc0a62"
+  integrity sha512-buge9xDvjjOxJlyxUnar/+6i/aVEVGA7EEh4OafBCXPlLUQPGbRUBhBUveWRxzvR8TEjhKEP4BdepnpG2FSZXw==
   dependencies:
     compare-func "^2.0.0"
     lodash "^4.17.15"
     q "^1.5.1"
 
-conventional-changelog-core@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-4.2.0.tgz#d8befd1e1f5126bf35a17668276cc8c244650469"
-  integrity sha512-8+xMvN6JvdDtPbGBqA7oRNyZD4od1h/SIzrWqHcKZjitbVXrFpozEeyn4iI4af1UwdrabQpiZMaV07fPUTGd4w==
+conventional-changelog-core@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-4.2.1.tgz#f811ad98ab2ff080becafc61407509420c9b447d"
+  integrity sha512-8cH8/DEoD3e5Q6aeogdR5oaaKs0+mG6+f+Om0ZYt3PNv7Zo0sQhu4bMDRsqAF+UTekTAtP1W/C41jH/fkm8Jtw==
   dependencies:
     add-stream "^1.0.0"
-    conventional-changelog-writer "^4.0.17"
-    conventional-commits-parser "^3.1.0"
+    conventional-changelog-writer "^4.0.18"
+    conventional-commits-parser "^3.2.0"
     dateformat "^3.0.0"
     get-pkg-repo "^1.0.0"
     git-raw-commits "2.0.0"
     git-remote-origin-url "^2.0.0"
-    git-semver-tags "^4.1.0"
+    git-semver-tags "^4.1.1"
     lodash "^4.17.15"
-    normalize-package-data "^2.3.5"
+    normalize-package-data "^3.0.0"
     q "^1.5.1"
     read-pkg "^3.0.0"
     read-pkg-up "^3.0.0"
     shelljs "^0.8.3"
-    through2 "^3.0.0"
+    through2 "^4.0.0"
 
-conventional-changelog-ember@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-2.0.8.tgz#f0f04eb7ff3c885af97db100865ab95dcfa9917f"
-  integrity sha512-JEMEcUAMg4Q9yxD341OgWlESQ4gLqMWMXIWWUqoQU8yvTJlKnrvcui3wk9JvnZQyONwM2g1MKRZuAjKxr8hAXA==
+conventional-changelog-ember@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-2.0.9.tgz#619b37ec708be9e74a220f4dcf79212ae1c92962"
+  integrity sha512-ulzIReoZEvZCBDhcNYfDIsLTHzYHc7awh+eI44ZtV5cx6LVxLlVtEmcO+2/kGIHGtw+qVabJYjdI5cJOQgXh1A==
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-eslint@^3.0.8:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.8.tgz#f8b952b7ed7253ea0ac0b30720bb381f4921b46c"
-  integrity sha512-5rTRltgWG7TpU1PqgKHMA/2ivjhrB+E+S7OCTvj0zM/QGg4vmnVH67Vq/EzvSNYtejhWC+OwzvDrLk3tqPry8A==
+conventional-changelog-eslint@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-3.0.9.tgz#689bd0a470e02f7baafe21a495880deea18b7cdb"
+  integrity sha512-6NpUCMgU8qmWmyAMSZO5NrRd7rTgErjrm4VASam2u5jrZS0n38V7Y9CzTtLT2qwz5xEChDR4BduoWIr8TfwvXA==
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-express@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-2.0.5.tgz#6e93705acdad374516ca125990012a48e710f8de"
-  integrity sha512-pW2hsjKG+xNx/Qjof8wYlAX/P61hT5gQ/2rZ2NsTpG+PgV7Rc8RCfITvC/zN9K8fj0QmV6dWmUefCteD9baEAw==
+conventional-changelog-express@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-2.0.6.tgz#420c9d92a347b72a91544750bffa9387665a6ee8"
+  integrity sha512-SDez2f3iVJw6V563O3pRtNwXtQaSmEfTCaTBPCqn0oG0mfkq0rX4hHBq5P7De2MncoRixrALj3u3oQsNK+Q0pQ==
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-jquery@^3.0.10:
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-3.0.10.tgz#fe8eb6aff322aa980af5eb68497622a5f6257ce7"
-  integrity sha512-QCW6wF8QgPkq2ruPaxc83jZxoWQxLkt/pNxIDn/oYjMiVgrtqNdd7lWe3vsl0hw5ENHNf/ejXuzDHk6suKsRpg==
+conventional-changelog-jquery@^3.0.11:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jquery/-/conventional-changelog-jquery-3.0.11.tgz#d142207400f51c9e5bb588596598e24bba8994bf"
+  integrity sha512-x8AWz5/Td55F7+o/9LQ6cQIPwrCjfJQ5Zmfqi8thwUEKHstEn4kTIofXub7plf1xvFA2TqhZlq7fy5OmV6BOMw==
   dependencies:
     q "^1.5.1"
 
-conventional-changelog-jshint@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.8.tgz#3fff4df8cb46037f77b9dc3f8e354c7f99332f13"
-  integrity sha512-hB/iI0IiZwnZ+seYI+qEQ4b+EMQSEC8jGIvhO2Vpz1E5p8FgLz75OX8oB1xJWl+s4xBMB6f8zJr0tC/BL7YOjw==
+conventional-changelog-jshint@^2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-2.0.9.tgz#f2d7f23e6acd4927a238555d92c09b50fe3852ff"
+  integrity sha512-wMLdaIzq6TNnMHMy31hql02OEQ8nCQfExw1SE0hYL5KvU+JCTuPaDO+7JiogGT2gJAxiUGATdtYYfh+nT+6riA==
   dependencies:
     compare-func "^2.0.0"
     q "^1.5.1"
@@ -3439,58 +3403,58 @@ conventional-changelog-preset-loader@^2.3.4:
   resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
   integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
 
-conventional-changelog-writer@^4.0.17:
-  version "4.0.17"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.17.tgz#4753aaa138bf5aa59c0b274cb5937efcd2722e21"
-  integrity sha512-IKQuK3bib/n032KWaSb8YlBFds+aLmzENtnKtxJy3+HqDq5kohu3g/UdNbIHeJWygfnEbZjnCKFxAW0y7ArZAw==
+conventional-changelog-writer@^4.0.18:
+  version "4.0.18"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.18.tgz#10b73baa59c7befc69b360562f8b9cd19e63daf8"
+  integrity sha512-mAQDCKyB9HsE8Ko5cCM1Jn1AWxXPYV0v8dFPabZRkvsiWUul2YyAqbIaoMKF88Zf2ffnOPSvKhboLf3fnjo5/A==
   dependencies:
     compare-func "^2.0.0"
-    conventional-commits-filter "^2.0.6"
+    conventional-commits-filter "^2.0.7"
     dateformat "^3.0.0"
     handlebars "^4.7.6"
     json-stringify-safe "^5.0.1"
     lodash "^4.17.15"
-    meow "^7.0.0"
+    meow "^8.0.0"
     semver "^6.0.0"
     split "^1.0.0"
-    through2 "^3.0.0"
-
-conventional-changelog@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-3.1.23.tgz#d696408021b579a3814aba79b38729ed86478aea"
-  integrity sha512-sScUu2NHusjRC1dPc5p8/b3kT78OYr95/Bx7Vl8CPB8tF2mG1xei5iylDTRjONV5hTlzt+Cn/tBWrKdd299b7A==
-  dependencies:
-    conventional-changelog-angular "^5.0.11"
-    conventional-changelog-atom "^2.0.7"
-    conventional-changelog-codemirror "^2.0.7"
-    conventional-changelog-conventionalcommits "^4.4.0"
-    conventional-changelog-core "^4.2.0"
-    conventional-changelog-ember "^2.0.8"
-    conventional-changelog-eslint "^3.0.8"
-    conventional-changelog-express "^2.0.5"
-    conventional-changelog-jquery "^3.0.10"
-    conventional-changelog-jshint "^2.0.8"
+    through2 "^4.0.0"
+
+conventional-changelog@^3.1.24:
+  version "3.1.24"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-3.1.24.tgz#ebd180b0fd1b2e1f0095c4b04fd088698348a464"
+  integrity sha512-ed6k8PO00UVvhExYohroVPXcOJ/K1N0/drJHx/faTH37OIZthlecuLIRX/T6uOp682CAoVoFpu+sSEaeuH6Asg==
+  dependencies:
+    conventional-changelog-angular "^5.0.12"
+    conventional-changelog-atom "^2.0.8"
+    conventional-changelog-codemirror "^2.0.8"
+    conventional-changelog-conventionalcommits "^4.5.0"
+    conventional-changelog-core "^4.2.1"
+    conventional-changelog-ember "^2.0.9"
+    conventional-changelog-eslint "^3.0.9"
+    conventional-changelog-express "^2.0.6"
+    conventional-changelog-jquery "^3.0.11"
+    conventional-changelog-jshint "^2.0.9"
     conventional-changelog-preset-loader "^2.3.4"
 
-conventional-commits-filter@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.6.tgz#0935e1240c5ca7698329affee1b6a46d33324c4c"
-  integrity sha512-4g+sw8+KA50/Qwzfr0hL5k5NWxqtrOVw4DDk3/h6L85a9Gz0/Eqp3oP+CWCNfesBvZZZEFHF7OTEbRe+yYSyKw==
+conventional-commits-filter@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz#f8d9b4f182fce00c9af7139da49365b136c8a0b3"
+  integrity sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA==
   dependencies:
     lodash.ismatch "^4.4.0"
     modify-values "^1.0.0"
 
-conventional-commits-parser@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.1.0.tgz#10140673d5e7ef5572633791456c5d03b69e8be4"
-  integrity sha512-RSo5S0WIwXZiRxUGTPuYFbqvrR4vpJ1BDdTlthFgvHt5kEdnd1+pdvwWphWn57/oIl4V72NMmOocFqqJ8mFFhA==
+conventional-commits-parser@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.2.0.tgz#9e261b139ca4b7b29bcebbc54460da36894004ca"
+  integrity sha512-XmJiXPxsF0JhAKyfA2Nn+rZwYKJ60nanlbSWwwkGwLQFbugsc0gv1rzc7VbbUWAzJfR1qR87/pNgv9NgmxtBMQ==
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.1"
     lodash "^4.17.15"
-    meow "^7.0.0"
+    meow "^8.0.0"
     split2 "^2.0.0"
-    through2 "^3.0.0"
+    through2 "^4.0.0"
     trim-off-newlines "^1.0.0"
 
 convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
@@ -3683,7 +3647,14 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@^4.0.1, debug@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"
+  integrity sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -3873,14 +3844,7 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-dot-prop@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
-  integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
-  dependencies:
-    is-obj "^2.0.0"
-
-dot-prop@^5.2.0:
+dot-prop@^5.1.0, dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
   integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
@@ -4267,15 +4231,7 @@ eslint-plugin-react@^7.21.1:
     resolve "^1.18.1"
     string.prototype.matchall "^4.0.2"
 
-eslint-scope@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
-  integrity sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-scope@^5.1.1:
+eslint-scope@^5.0.0, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -4290,12 +4246,12 @@ eslint-utils@^2.0.0, eslint-utils@^2.1.0:
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
+eslint-visitor-keys@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
   integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
-eslint-visitor-keys@^1.3.0:
+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
@@ -4306,9 +4262,9 @@ eslint-visitor-keys@^2.0.0:
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
 eslint@^7.7.0:
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.12.1.tgz#bd9a81fa67a6cfd51656cdb88812ce49ccec5801"
-  integrity sha512-HlMTEdr/LicJfN08LB3nM1rRYliDXOmfoO4vj39xN6BLpFzF00hbwBoqHk8UcJ2M/3nlARZWy/mslvGEuZFvsg==
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.13.0.tgz#7f180126c0dcdef327bfb54b211d7802decc08da"
+  integrity sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@eslint/eslintrc" "^0.2.1"
@@ -4369,13 +4325,6 @@ esquery@^1.2.0:
   dependencies:
     estraverse "^5.1.0"
 
-esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
-  integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
-  dependencies:
-    estraverse "^4.1.0"
-
 esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
@@ -4383,7 +4332,7 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
@@ -4553,9 +4502,9 @@ extsprintf@^1.2.0:
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
 fast-deep-equal@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
-  integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-glob@^3.0.3:
   version "3.1.1"
@@ -4591,11 +4540,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
 fastq@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.6.0.tgz#4ec8a38f4ac25f21492673adb7eae9cfef47d1c2"
-  integrity sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947"
+  integrity sha512-i7FVWL8HhVY+CTkwFxkN2mk3h+787ixS5S63eb78diVRc1MCssarHq3W5cj0av7YDSwmaV928RNag+U1etRQ7w==
   dependencies:
-    reusify "^1.0.0"
+    reusify "^1.0.4"
 
 fb-watchman@^2.0.0:
   version "2.0.1"
@@ -4701,9 +4650,9 @@ flat-cache@^2.0.1:
     write "1.0.3"
 
 flatted@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
-  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flow-parser@0.*:
   version "0.137.0"
@@ -4781,11 +4730,16 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@2.1.3, fsevents@^2.1.2, fsevents@~2.1.2:
+fsevents@^2.1.2, fsevents@~2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
+fsevents@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.1.tgz#1fb02ded2036a8ac288d507a65962bd87b97628d"
+  integrity sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -4900,12 +4854,12 @@ git-remote-origin-url@^2.0.0:
     gitconfiglocal "^1.0.0"
     pify "^2.3.0"
 
-git-semver-tags@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-4.1.0.tgz#0146c9bc24ee96104c99f443071c8c2d7dc848e3"
-  integrity sha512-TcxAGeo03HdErzKzi4fDD+xEL7gi8r2Y5YSxH6N2XYdVSV5UkBwfrt7Gqo1b+uSHCjy/sa9Y6BBBxxFLxfbhTg==
+git-semver-tags@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-4.1.1.tgz#63191bcd809b0ec3e151ba4751c16c444e5b5780"
+  integrity sha512-OWyMt5zBe7xFs8vglMmhM9lRQzCWL3WjHtxNNfJTMngGym7pC1kh8sP6jevfydJ6LP3ZvGxfb6ABYgPUM0mtsA==
   dependencies:
-    meow "^7.0.0"
+    meow "^8.0.0"
     semver "^6.0.0"
 
 gitconfiglocal@^1.0.0:
@@ -4920,7 +4874,14 @@ github-from-package@0.0.0:
   resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
   integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@~5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
   integrity sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==
@@ -4975,9 +4936,9 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^12.1.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.3.0.tgz#1e564ee5c4dded2ab098b0f88f24702a3c56be13"
-  integrity sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
   dependencies:
     type-fest "^0.8.1"
 
@@ -5031,12 +4992,12 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
 
-graceful-fs@^4.1.15, graceful-fs@^4.2.4:
+graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
@@ -5147,11 +5108,11 @@ hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
     react-is "^16.7.0"
 
 hosted-git-info@^2.1.4:
-  version "2.8.5"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
-  integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
-hosted-git-info@^3.0.5:
+hosted-git-info@^3.0.5, hosted-git-info@^3.0.6:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.7.tgz#a30727385ea85acfcee94e0aad9e368c792e036c"
   integrity sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ==
@@ -5252,18 +5213,18 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
-import-fresh@^3.0.0, import-fresh@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
-  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.2.tgz#fc129c160c5d68235507f4331a6baad186bdbc3e"
+  integrity sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==
   dependencies:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-fresh@^3.2.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.2.tgz#fc129c160c5d68235507f4331a6baad186bdbc3e"
-  integrity sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==
+import-fresh@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
   dependencies:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
@@ -5407,6 +5368,13 @@ is-core-module@^2.0.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.1.0.tgz#a4cc031d9b1aca63eecbd18a650e13cb4eeab946"
+  integrity sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -5467,11 +5435,9 @@ is-extglob@^2.1.1:
   integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  integrity sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=
-  dependencies:
-    number-is-nan "^1.0.0"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
@@ -6419,7 +6385,7 @@ jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest@^26.4.2:
+jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
   integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
@@ -6445,15 +6411,7 @@ js-queue@2.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-js-yaml@^3.14.0:
+js-yaml@^3.13.1, js-yaml@^3.14.0:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
   integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
@@ -6574,6 +6532,11 @@ json-parse-better-errors@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -6852,12 +6815,12 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
+lodash@^4.17.10, lodash@^4.17.13:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
-lodash@^4.17.19:
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -7029,33 +6992,38 @@ meow@^6.0.0:
     type-fest "^0.8.1"
     yargs-parser "^16.1.0"
 
-meow@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-7.1.1.tgz#7c01595e3d337fcb0ec4e8eed1666ea95903d306"
-  integrity sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==
+meow@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-8.0.0.tgz#1aa10ee61046719e334ffdc038bb5069250ec99a"
+  integrity sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg==
   dependencies:
     "@types/minimist" "^1.2.0"
     camelcase-keys "^6.2.2"
     decamelize-keys "^1.1.0"
     hard-rejection "^2.1.0"
     minimist-options "4.1.0"
-    normalize-package-data "^2.5.0"
+    normalize-package-data "^3.0.0"
     read-pkg-up "^7.0.1"
     redent "^3.0.0"
     trim-newlines "^3.0.0"
-    type-fest "^0.13.1"
-    yargs-parser "^18.1.3"
+    type-fest "^0.18.0"
+    yargs-parser "^20.2.3"
 
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.2.3, merge2@^1.3.0:
+merge2@^1.2.3:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
   integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
 
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -7126,9 +7094,9 @@ mimic-response@^2.0.0:
   integrity sha512-8ilDoEapqA4uQ3TwS0jakGONKXVJqpy+RpM+3b7pLdOjghCrEiGp9SRkFbUHAmZW9vdnrENWHjaweIoTIJExSQ==
 
 min-indent@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
-  integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 minimatch@^3.0.2, minimatch@^3.0.4:
   version "3.0.4"
@@ -7167,12 +7135,12 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.1.1, minimist@^1.2.5:
+minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
@@ -7200,7 +7168,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1:
+mkdirp@0.5.1, mkdirp@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -7212,6 +7180,13 @@ mkdirp@1.x:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+mkdirp@^0.5.1:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -7259,16 +7234,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-neo-async@^2.5.0:
+neo-async@^2.5.0, neo-async@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-neo-async@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -7336,7 +7306,7 @@ noop-logger@^0.1.1:
   resolved "https://registry.yarnpkg.com/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
   integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
 
-normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.5.0:
+normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -7346,6 +7316,16 @@ normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-package-data@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.0.tgz#1f8a7c423b3d2e85eb36985eaf81de381d01301a"
+  integrity sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw==
+  dependencies:
+    hosted-git-info "^3.0.6"
+    resolve "^1.17.0"
+    semver "^7.3.2"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -7582,13 +7562,20 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0, p-limit@^2.2.0:
+p-limit@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
   integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -7663,13 +7650,13 @@ parse-json@^4.0.0:
     json-parse-better-errors "^1.0.1"
 
 parse-json@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
-  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
+  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
+    json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
 parse5@5.1.0:
@@ -7767,12 +7754,7 @@ picomatch@^2.0.4:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.1.1.tgz#ecdfbea7704adb5fe6fb47f9866c4c0e15e905c5"
   integrity sha512-OYMyqkKzK7blWO/+XZYP6w8hH0LDvkBvdvKukti+7kqYFCiEAk+gI3DWnryapc0Dau05ugGTy0foQ6mqn4AHYA==
 
-picomatch@^2.0.5:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
-  integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
-
-picomatch@^2.2.1, picomatch@^2.2.2:
+picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -8184,10 +8166,10 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-"readable-stream@2 || 3", readable-stream@^3.1.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
-  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+readable-stream@3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
   dependencies:
     inherits "^2.0.3"
     string_decoder "^1.1.1"
@@ -8215,6 +8197,15 @@ readable-stream@^3.0.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@^3.1.1:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
+  integrity sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -8470,14 +8461,15 @@ resolve@1.1.7:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@^1.1.6:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.0.tgz#1b7ca96073ebb52e741ffd799f6b39ea462c67f5"
-  integrity sha512-+hTmAldEGE80U2wJJDC1lebb5jWqvTYAfm3YZ1ckk1gBr0MnCqUKlwK1e+anaFljIl+F5tR5IoZcm4ZDA1zMQw==
+resolve@^1.1.6, resolve@^1.10.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
   dependencies:
+    is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.3.2:
+resolve@^1.12.0, resolve@^1.13.1, resolve@^1.3.2:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -8504,7 +8496,7 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
-reusify@^1.0.0:
+reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
@@ -8566,11 +8558,11 @@ rsvp@^4.8.4:
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
 run-parallel@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
-  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
+  integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
@@ -8580,6 +8572,11 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -8771,7 +8768,12 @@ side-channel@^1.0.2:
     es-abstract "^1.17.0-next.1"
     object-inspect "^1.7.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
+signal-exit@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
@@ -8904,30 +8906,30 @@ sourcemap-codec@^1.4.4:
   integrity sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==
 
 spdx-correct@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
-  integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
-  integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
 
 spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
-  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
-  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz#c80757383c28abf7296744998cbc106ae8b854ce"
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
@@ -9224,20 +9226,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-hyperlinks@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
@@ -9377,12 +9372,12 @@ through2@^2.0.0, through2@^2.0.2:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-through2@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
-  integrity sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==
+through2@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764"
+  integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==
   dependencies:
-    readable-stream "2 || 3"
+    readable-stream "3"
 
 through@2, "through@>=2.2.7 <3":
   version "2.3.8"
@@ -9502,11 +9497,10 @@ truncate-utf8-bytes@^1.0.0:
     utf8-byte-length "^1.0.1"
 
 ts-jest@^26.4.0:
-  version "26.4.3"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.4.3.tgz#d153a616033e7ec8544b97ddbe2638cbe38d53db"
-  integrity sha512-pFDkOKFGY+nL9v5pkhm+BIFpoAuno96ff7GMnIYr/3L6slFOS365SI0fGEVYx2RKGji5M2elxhWjDMPVcOCdSw==
+  version "26.4.4"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.4.4.tgz#61f13fb21ab400853c532270e52cc0ed7e502c49"
+  integrity sha512-3lFWKbLxJm34QxyVNNCgXX1u4o/RV0myvA2y2Bxm46iGIjKlaY0own9gIckbjZJPn+WaJEnfPPJ20HHGpoq4yg==
   dependencies:
-    "@jest/create-cache-key-function" "^26.5.0"
     "@types/jest" "26.x"
     bs-logger "0.x"
     buffer-from "1.x"
@@ -9582,16 +9576,16 @@ type-detect@4.0.8:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
-type-fest@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
-  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
-
 type-fest@^0.16.0:
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.16.0.tgz#3240b891a78b0deae910dbeb86553e552a148860"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
+type-fest@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
+  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
+
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
@@ -9620,12 +9614,9 @@ typescript@^4.0.3:
   integrity sha512-ywmr/VrTVCmNTJ6iV2LwIrfG1P+lv6luD8sUJs+2eI9NLGigaN+nUQc13iHqisq7bra9lnmUSYqbJvegraBOPQ==
 
 uglify-js@^3.1.4:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.2.tgz#cb1a601e67536e9ed094a92dd1e333459643d3f9"
-  integrity sha512-uhRwZcANNWVLrxLfNFEdltoPNhECUR3lc+UdJoG9CBpMcSnKyWA94tc3eAujB1GcMY5Uwq8ZMp4qWpxWYDQmaA==
-  dependencies:
-    commander "~2.20.3"
-    source-map "~0.6.1"
+  version "3.11.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.11.5.tgz#d6788bc83cf35ff18ea78a65763e480803409bc6"
+  integrity sha512-btvv/baMqe7HxP7zJSF7Uc16h1mSfuuSplT0/qdjxseesDU+yYzH33eHBH+eMdeRXwujXspaCTooWHQVVBh09w==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
@@ -9719,9 +9710,9 @@ update-notifier@^4.1.1:
     xdg-basedir "^4.0.0"
 
 uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
+  integrity sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==
   dependencies:
     punycode "^2.1.0"
 
@@ -9760,9 +9751,9 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
 uuid@^3.3.2:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
-  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
 uuid@^8.3.0:
   version "8.3.1"
@@ -9770,9 +9761,9 @@ uuid@^8.3.0:
   integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
 
 v8-compile-cache@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
-  integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
+  integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
 
 v8-to-istanbul@^7.0.0:
   version "7.0.0"
@@ -10044,10 +10035,10 @@ yaml@^1.7.2:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
-yargs-parser@20.x, yargs-parser@^20.2.2:
-  version "20.2.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.3.tgz#92419ba867b858c868acf8bae9bf74af0dd0ce26"
-  integrity sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww==
+yargs-parser@20.x, yargs-parser@^20.2.3:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
 yargs-parser@^16.1.0:
   version "16.1.0"
@@ -10057,7 +10048,7 @@ yargs-parser@^16.1.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^18.1.2, yargs-parser@^18.1.3:
+yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
   integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
@@ -10065,6 +10056,11 @@ yargs-parser@^18.1.2, yargs-parser@^18.1.3:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.3.tgz#92419ba867b858c868acf8bae9bf74af0dd0ce26"
+  integrity sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww==
+
 yargs@^15.3.1, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"

From 630b8d1881df9f83e6b824f527cdc33d02176433 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Thu, 12 Nov 2020 19:52:03 -0300
Subject: [PATCH 66/66] Rollback fsevents resolution

---
 package.json |  6 ++++--
 yarn.lock    | 12 ++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 080d01fd8a..ca2efe3ba5 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
     "abort-controller": "^3.0.0",
     "electron-store": "^6.0.0",
     "electron-updater": "^4.3.5",
-    "fsevents": "^2.2.1",
     "i18next": "^19.7.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -86,7 +85,7 @@
     "@typescript-eslint/parser": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "builtin-modules": "^3.1.0",
-    "chokidar": "^3.4.2",
+    "chokidar": "^3.4.3",
     "conventional-changelog-cli": "^2.1.0",
     "convert-svg-to-png": "^0.5.0",
     "electron": "^10.0.1",
@@ -105,6 +104,9 @@
     "typescript": "^4.0.3",
     "xvfb-maybe": "^0.2.1"
   },
+  "optionalDependencies": {
+    "fsevents": "2.2.1"
+  },
   "engines": {
     "node": ">=12.8.x"
   },
diff --git a/yarn.lock b/yarn.lock
index 70d0e32fb9..eb91c00124 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3060,7 +3060,7 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-chokidar@^3.4.2:
+chokidar@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
   integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
@@ -4730,16 +4730,16 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.1.tgz#1fb02ded2036a8ac288d507a65962bd87b97628d"
+  integrity sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==
+
 fsevents@^2.1.2, fsevents@~2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-fsevents@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.1.tgz#1fb02ded2036a8ac288d507a65962bd87b97628d"
-  integrity sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==
-
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"