From 9dbf928111581d3578d6cd694e50ab3f1c40497c Mon Sep 17 00:00:00 2001
From: Rafael Ramalho <rafazelramalho19@gmail.com>
Date: Wed, 22 Jul 2020 17:41:17 +0100
Subject: [PATCH] Feat/redesign files bar (#1513)

---
 public/locales/en/files.json   |  4 +++
 src/bundles/files/selectors.js |  8 ++++++
 src/files/header/Header.js     | 51 +++++++++++++++-------------------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/public/locales/en/files.json b/public/locales/en/files.json
index 2450b4fe1..db4db46b4 100644
--- a/public/locales/en/files.json
+++ b/public/locales/en/files.json
@@ -91,6 +91,10 @@
   "hashUnavailable": "hash unavailable",
   "checkboxLabel": "View more options for {name}",
   "pinned": "Pinned",
+  "blocks": "Blocks",
+  "allBlocks": "all blocks",
+  "more": "More",
+  "files": "Files",
   "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <0>inspect</0> it instead.",
   "sortBy": "Sort items by {name}"
 }
diff --git a/src/bundles/files/selectors.js b/src/bundles/files/selectors.js
index 80e8d6d6c..234e1c566 100644
--- a/src/bundles/files/selectors.js
+++ b/src/bundles/files/selectors.js
@@ -18,6 +18,12 @@ const selectors = () => ({
    */
   selectFiles: (state) => state.files.pageContent,
 
+  /**
+   * @param {Model} state
+   * @param {DirectoryContent} state.files.pageContent
+   */
+  selectCurrentDirectorySize: (state) => state.files.pageContent && state.files.pageContent.content?.reduce((prev, curr) => prev + curr.size, 0),
+
   /**
    * @param {Model} state
    */
@@ -68,6 +74,8 @@ const selectors = () => ({
    */
   selectFilesErrors: (state) => state.files.failed,
 
+  selectHasUpperDirectory: (state) => !!state.files.pageContent?.upper,
+
   selectFilesPathInfo: createSelector(
     'selectRouteInfo',
     /**
diff --git a/src/files/header/Header.js b/src/files/header/Header.js
index 69e562ea5..955544b05 100644
--- a/src/files/header/Header.js
+++ b/src/files/header/Header.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import filesize from 'filesize'
-import SimplifyNumber from 'simplify-number'
+import classNames from 'classnames'
 import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 // Components
@@ -10,18 +10,12 @@ import Button from '../../components/button/Button'
 // Icons
 import GlyphDots from '../../icons/GlyphDots'
 
-function BarOption ({ children, title, isLink = false, className = '', ...etc }) {
-  className += ' tc pa3'
-
-  if (etc.onClick) className += ' pointer'
-
-  return (
-    <div className={className} {...etc}>
-      <span className='nowrap db f4 navy'>{children}</span>
-      <span className={`db ttl ${isLink ? 'navy underline' : 'gray'}`}>{title}</span>
-    </div>
-  )
-}
+const BarOption = ({ children, title, className = '', ...etc }) => (
+  <div className={classNames(className, 'tc pa3')} {...etc}>
+    <span className='nowrap db f4 navy'>{children}</span>
+    <span className='db ttl gray'>{title}</span>
+  </div>
+)
 
 function humanSize (size) {
   if (!size) return 'N/A'
@@ -47,14 +41,14 @@ class Header extends React.Component {
 
   render () {
     const {
+      currentDirectorySize,
+      hasUpperDirectory,
       files,
-      t,
-      pins,
       filesPathInfo,
       filesSize,
-      repoNumObjects,
+      onNavigate,
       repoSize,
-      onNavigate
+      t
     } = this.props
 
     return (
@@ -66,19 +60,17 @@ class Header extends React.Component {
         </div>
 
         <div className='mb3 flex justify-between items-center bg-snow-muted joyride-files-add'>
-          <BarOption title={t('app:terms.files')} isLink onClick={() => { onNavigate('/files') }}>
-            { humanSize(filesSize) }
-          </BarOption>
-
-          <BarOption title={t('app:terms.pins')} isLink onClick={() => { onNavigate('/pins') }}>
-            { pins ? SimplifyNumber(pins.length) : '-' }
-          </BarOption>
-
-          <BarOption title={t('app:terms.blocks')}>
-            { repoNumObjects ? SimplifyNumber(repoNumObjects, { decimal: 0 }) : 'N/A' }
+          <BarOption title={t('app:terms.files')}>
+            { hasUpperDirectory
+              ? (
+                <span>
+                  { humanSize(currentDirectorySize) }<span className='f5 gray'>/{ humanSize(filesSize) }</span>
+                </span>
+              )
+              : humanSize(filesSize) }
           </BarOption>
 
-          <BarOption title={t('app:terms.repo')}>
+          <BarOption title={t('allBlocks')}>
             { humanSize(repoSize) }
           </BarOption>
 
@@ -113,10 +105,11 @@ class Header extends React.Component {
 }
 
 export default connect(
-  'selectPins',
+  'selectHasUpperDirectory',
   'selectFilesSize',
   'selectRepoSize',
   'selectRepoNumObjects',
   'selectFilesPathInfo',
+  'selectCurrentDirectorySize',
   withTranslation('files')(Header)
 )