отображение списка файлов в папках

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>

src/torrent-page.js

@@ -1,20 +1,60 @@
 import React, { Component } from 'react';
 import formatBytes from './format-bytes'
 
-const TorrentFiles = (props) => {
+import {List, ListItem} from 'material-ui/List';
-	return (
+import Subheader from 'material-ui/Subheader';
-		<div className='column'>
+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)) 
 			{
-			props.torrent.filesList.map((file, index) => {
+				currentItem[pathItem] = {
-				return (
+					__sizeBT: 0
-					<div className='row inline' key={index}>
-						<div>{file.path}</div>
-						<div style={{marginLeft: '8px'}}>({formatBytes(file.size)})</div>
-					</div>
-				);
-			})
 				}
-		</div>
+			}
+			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 (
+		<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>