feat(SettingsBar): config for compress singleton folders

src/components/FileExplorer.js

@@ -29,8 +29,9 @@ function getVisibleParentNode(nodes, focusedNode, depths) {
 const tasksAfterRender = []
 const visibleNodesGenerator = new VisibleNodesGenerator()
 
-const init = dispatch => () => dispatch(async (state, { treeData, metaData, accessToken }) => {
+const init = dispatch => () => dispatch(async (state, { treeData, metaData, compressSingletonFolder }) => {
   const { root } = treeParser.parse(treeData, metaData)
+  visibleNodesGenerator.setCompress(compressSingletonFolder)
   await visibleNodesGenerator.plantTree(root)
   const currentPath = URLHelper.getCurrentPath(true)
   tasksAfterRender.push(DOMHelper.focusSearchInput)

src/components/SettingsBar.js

@@ -1,8 +1,14 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import Icon from './Icon'
 import configHelper, { config } from '../utils/configHelper'
 import keyHelper from '../utils/keyHelper'
 
+const wikiLinks = {
+  compressSingletonFolder: 'https://github.com/EnixCoda/Gitako/wiki/Compress-Singleton-Folder',
+}
+
 const ACCESS_TOKEN_REGEXP = /^[0-9a-f]{40}$/
 
 const OperatingSystems = {
@@ -38,20 +44,32 @@ function friendlyFormatShortcut(shortcut) {
 }
 
 export default class SettingsBar extends React.PureComponent {
+  static propTypes = {
+    accessToken: PropTypes.string.isRequired,
+    activated: PropTypes.bool.isRequired,
+    compressSingletonFolder: PropTypes.bool.isRequired,
+    onAccessTokenChange: PropTypes.func.isRequired,
+    onShortcutChange: PropTypes.func.isRequired,
+    setCompressSingleton: PropTypes.func.isRequired,
+    toggleShowSettings: PropTypes.func.isRequired,
+    toggleShowSideBarShortcut: PropTypes.string.isRequired,
+  }
+
   state = {
-    accessTokenHint: null,
     accessToken: '',
-    shortcutHint: null,
+    accessTokenHint: '',
+    shortcutHint: '',
     toggleShowSideBarShortcut: '',
+    compressHint: '',
   }
 
   componentWillMount() {
-    const { toggleShowSideBarShortcut } = this.props
-    this.setState({ toggleShowSideBarShortcut })
+    const { toggleShowSideBarShortcut, compressSingletonFolder } = this.props
+    this.setState({ toggleShowSideBarShortcut, compressSingletonFolder })
   }
 
-  componentWillReceiveProps({ toggleShowSideBarShortcut }) {
-    this.setState({ toggleShowSideBarShortcut })
+  componentWillReceiveProps({ toggleShowSideBarShortcut, compressSingletonFolder }) {
+    this.setState({ toggleShowSideBarShortcut, compressSingletonFolder })
   }
 
   onInputAccessToken = event => {
@@ -101,8 +119,18 @@ export default class SettingsBar extends React.PureComponent {
     this.setState({ toggleShowSideBarShortcut: shortcut })
   }
 
+  setCompressSingletonFolder = async e => {
+    const compress = e.target.checked
+    await configHelper.setOne(config.compressSingletonFolder, compress)
+    const { setCompressSingleton } = this.props
+    setCompressSingleton(compress)
+    this.setState({
+      compressHint: 'Saved, reload page to apply!',
+    })
+  }
+
   render() {
-    const { accessTokenHint, toggleShowSideBarShortcut, shortcutHint, accessToken } = this.state
+    const { accessTokenHint, toggleShowSideBarShortcut, compressSingletonFolder, shortcutHint, accessToken, compressHint } = this.state
     const { toggleShowSettings, activated, accessToken: hasAccessToken } = this.props
     return (
       <div className={'gitako-settings-bar'}>
@@ -168,6 +196,17 @@ export default class SettingsBar extends React.PureComponent {
               </div>
               {shortcutHint && <span className={'hint'}>{shortcutHint}</span>}
             </div>
+            <div className={'gitako-settings-bar-content-section singleton'}>
+              <h5>
+                Compress singleton folder&nbsp;
+                <a href={wikiLinks.compressSingletonFolder} target={'_blank'}>(?)</a>
+              </h5>
+              <label htmlFor={'compress-singleton-folder'}>
+                <input id={'compress-singleton-folder'} name={'compress-singleton-folder'} type={'checkbox'} onChange={this.setCompressSingletonFolder} checked={compressSingletonFolder} />
+                &nbsp; {compressSingletonFolder ? 'enabled' : 'disabled'}
+              </label>
+              {compressHint && <div className={'hint'}>{compressHint}</div>}
+            </div>
             <div className={'gitako-settings-bar-content-section position'}>
               <h5>Position of Gitako (WIP)</h5>
               <select value={'next to'} disabled>
@@ -178,7 +217,7 @@ export default class SettingsBar extends React.PureComponent {
               <h5>Table of Markdown Content (WIP)</h5>
               <label htmlFor={'toc'}>
                 <input name={'toc'} type={'checkbox'} disabled />
-                &nbsp;enable
+                &nbsp; disabled
               </label>
             </div>
             <div className={'gitako-settings-bar-content-section issue'}>

src/components/SideBar.js

@@ -32,6 +32,8 @@ export default class Gitako extends React.PureComponent {
     metaData: PropTypes.object,
     // file tree data
     treeData: PropTypes.object,
+    // compress singleton folder
+    compressSingletonFolder: PropTypes.bool,
 
     init: PropTypes.func.isRequired,
     onPJAXEnd: PropTypes.func.isRequired,
@@ -55,6 +57,7 @@ export default class Gitako extends React.PureComponent {
     toggleShowSideBarShortcut: '',
     metaData: null,
     treeData: null,
+    compressSingletonFolder: false,
   }
 
   constructor(props) {
@@ -88,14 +91,14 @@ export default class Gitako extends React.PureComponent {
   }
 
   renderContent() {
-    const { errorDueToAuth, metaData, treeData, showSettings, accessToken } = this.props
+    const { errorDueToAuth, metaData, treeData, showSettings, accessToken, compressSingletonFolder } = this.props
     return (
       <div className={'gitako-side-bar-content'}>
         {metaData && <MetaBar metaData={metaData} />}
         {errorDueToAuth && this.renderAccessDeniedError()}
         {metaData &&
           treeData && (
-            <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} accessToken={accessToken} />
+            <FileExplorer metaData={metaData} treeData={treeData} freeze={showSettings} accessToken={accessToken} compressSingletonFolder={compressSingletonFolder} />
           )}
       </div>
     )
@@ -107,6 +110,7 @@ export default class Gitako extends React.PureComponent {
       shouldShow,
       showSettings,
       accessToken,
+      compressSingletonFolder,
       toggleShowSideBarShortcut,
       logoContainerElement,
       toggleShowSideBar,
@@ -114,6 +118,7 @@ export default class Gitako extends React.PureComponent {
       toggleShowSettings,
       onShortcutChange,
       onAccessTokenChange,
+      setCompressSingleton,
     } = this.props
     return (
       <div className={cx('gitako', { hidden: !shouldShow })}>
@@ -130,7 +135,9 @@ export default class Gitako extends React.PureComponent {
               onAccessTokenChange={onAccessTokenChange}
               activated={showSettings}
               accessToken={accessToken}
+              compressSingletonFolder={compressSingletonFolder}
               toggleShowSideBarShortcut={toggleShowSideBarShortcut}
+              setCompressSingleton={setCompressSingleton}
             />
           </div>
         </div>

src/content.less

@@ -340,6 +340,11 @@
             box-shadow: none;
           }
         }
+        .singleton {
+          .hint {
+            color: #6a737d;
+          }
+        }
         .placeholder-row {
           flex-shrink: 0;
           display: flex;

src/driver/core.js

@@ -9,8 +9,8 @@ const init = dispatch => async () => {
     DOMHelper.decorateGitHubPageContent()
     const metaData = URLHelper.parse()
     dispatch(setMetaData, metaData)
-    const { access_token: accessToken, shortcut } = await configHelper.get()
-    dispatch({ accessToken, toggleShowSideBarShortcut: shortcut })
+    const { access_token: accessToken, shortcut, compressSingletonFolder } = await configHelper.get()
+    dispatch({ accessToken, toggleShowSideBarShortcut: shortcut, compressSingletonFolder })
     const metaDataFromAPI = await GitHubHelper.getRepoMeta({ ...metaData, accessToken })
     const branchName = metaData.branchName || metaDataFromAPI['default_branch']
     Object.assign(metaData, { branchName, api: metaDataFromAPI })
@@ -82,6 +82,8 @@ const onShortcutChange = dispatch => shortcut => dispatch({ toggleShowSideBarSho
 
 const setMetaData = dispatch => metaData => dispatch({ metaData })
 
+const setCompressSingleton = dispatch => compressSingletonFolder => dispatch({ compressSingletonFolder })
+
 export default {
   init,
   onPJAXEnd,
@@ -93,4 +95,5 @@ export default {
   onShortcutChange,
   onResize,
   setMetaData,
+  setCompressSingleton,
 }

src/utils/configHelper.js

@@ -4,6 +4,7 @@ import { pick } from './general'
 export const config = {
   shortcut: 'shortcut',
   accessToken: 'access_token',
+  compressSingletonFolder: 'compressSingletonFolder',
 }
 
 const configKeys = Object.values(config)