From 9a30974b67b1c09fdced63b0f6c89585698e8c9f Mon Sep 17 00:00:00 2001
From: Alexey Kasyanchuk <degitx@gmail.com>
Date: Mon, 2 Jan 2017 06:52:26 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0?=
 =?UTF-8?q?=20=D1=84=D0=B0=D0=B9=D0=BB=D0=BE=D0=B2=20=D0=B2=20=D0=BF=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=BA=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/recent-torrents.js |  1 -
 src/torrent-page.js    | 66 +++++++++++++++++++++++++++++++++---------
 2 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/recent-torrents.js b/src/recent-torrents.js
index c3364b1..79cbaf1 100644
--- a/src/recent-torrents.js
+++ b/src/recent-torrents.js
@@ -13,7 +13,6 @@ return (
       <ListItem 
         onClick={() => window.router('/torrent/' + torrent.hash)} 
         primaryText={torrent.name}
-        secondaryText={formatBytes(torrent.size, 1)}
         secondaryText={
             <div className='column'>
               <div>
diff --git a/src/torrent-page.js b/src/torrent-page.js
index d4a9068..dc4a002 100644
--- a/src/torrent-page.js
+++ b/src/torrent-page.js
@@ -1,20 +1,60 @@
 import React, { Component } from 'react';
 import formatBytes from './format-bytes'
 
+import {List, ListItem} from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import Divider from 'material-ui/Divider';
+
+import FileFolder from 'material-ui/svg-icons/file/folder';
+
+let buildFilesTree = (filesList) => {
+	let rootTree = {
+		__sizeBT: 0
+	};
+	filesList.forEach((file) => {
+		let pathTree = file.path.split('/');
+		let currentItem = rootTree;
+		pathTree.forEach((pathItem) => {
+			if(!(pathItem in currentItem)) 
+			{
+				currentItem[pathItem] = {
+					__sizeBT: 0
+				}
+			}
+			currentItem = currentItem[pathItem]
+			currentItem.__sizeBT += file.size;
+		})
+		rootTree.__sizeBT += file.size;
+	});
+	return rootTree;
+}
+
+const treeToTorrentFiles = (tree) => {
+	let arr = [];
+	for(let file in tree)
+	{
+		if(file == '__sizeBT')
+			continue;
+
+		arr.push(<ListItem
+			key={file}
+			primaryText={file}
+	        secondaryText={formatBytes(tree[file].__sizeBT)}
+	        nestedItems={treeToTorrentFiles(tree[file])}
+	        primaryTogglesNestedList={true}
+	        leftIcon={tree[file] && Object.keys(tree[file]).length > 1 ? <FileFolder /> : null}
+		 />);
+	}
+	return arr;
+}
+
 const TorrentFiles = (props) => {
+	let tree = buildFilesTree(props.torrent.filesList);
 	return (
-		<div className='column'>
-		{
-			props.torrent.filesList.map((file, index) => {
-				return (
-					<div className='row inline' key={index}>
-						<div>{file.path}</div>
-						<div style={{marginLeft: '8px'}}>({formatBytes(file.size)})</div>
-					</div>
-				);
-			})
-		}
-		</div>
+		<List className='w100p'>
+			<Subheader inset={true}>Content of the torrent:</Subheader>
+			{treeToTorrentFiles(tree)}
+		</List>
 	);
 };
 
@@ -32,7 +72,7 @@ export default class TorrentPage extends Component {
       {
    			this.torrent
    			?
-   			<div>
+   			<div className='column w100p'>
    				{this.torrent.name}
    				<TorrentFiles torrent={this.torrent} />
    			</div>