Folder rearranging feature(#349)

[ymtdzzz]

related issue: #349

Added folder tree component to the storage edit page.

Folder pathnames are transformed to folderTreeData.

Example

/
/FolderA
/FolderA/FolderA-A
/FolderA/FolderA-B
/FolderA/FolderA-B/FolderA-B-A
/FolderB

↓

[
  {
    "title": "TestA",
    "pathname": "/TestA",
    "isDirectory": true,
    "children": [
      {
        "title": "TestAA",
        "pathname": "/TestA/TestAA",
        "isDirectory": true,
        "children": [
          {
            "title": "testAAA",
            "pathname": "/TestA/TestAA/testAAA",
            "isDirectory": true
          }
        ],
        "expanded": true
      }
    ],
    "expanded": true
  },
  {
    "title": "TestB",
    "pathname": "/TestB",
    "isDirectory": true
  }
]

By using this data and react-sortable-tree library, we can get each folder's before & after pathname.
(Please try to push the update folders button after rearranging folders.)

debug log

${after pathname}(${before pathname})

/FolderA(/FolderA)
/FolderA/FolderA-B-A(/FolderA/FolderA-B/FolderA-B-A)
/FolderA-A(/FolderA/FolderA-A)
/FolderB(/FolderB)
/FolderB/FolderA-B(/FolderA/FolderA-B)

Todos:

• Add functions to transform pathnames to folder tree data
• Remove the key 'isDirectory' from folderTreeDatas because all folderTreeDatas are directory
• Add functions to execute updating all folders' pathnames within storage
• Support folder's order
• Add validation to check no duplicated pathnames
• Styling (loading indicator, css)
• Add tests

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #349: Rearrange folders

---

IssueHunt has been backed by the following sponsors. Become a sponsor

[ymtdzzz]

I have implemented all features above.
Please give me a review.

Screenshot

Thank you.

[Rokt33r]

@zeroclock
Great work! But sadly, I've made tons of changes in v0.4.0 and there are so many conflicts between the current master and this pr. Can you fix the conflicts?

[ymtdzzz]

@Rokt33r
I've fixed merge conflicts.

[peoray]

Why hasn't this been merged yet? This is a great feature to implement

[ChrisCorrigan]

In my opinion, it would be better to not have an 'update folders' button, but rather it updates every time you drop the folder after a move. So being able to update the folders by drag and drop on the left, without needing an edit state (on the right).

This would be consistent with how most people would expect, and less prone to conflicts if the app allows concurrent collaboration (or ever will). Also some people might forget or not notice to click. And less clicks, the better.

[Rokt33r]

@peoray Sorry for the delay. I still need to think about how to introduce this feature properly.

[Rokt33r]

@ChrisCorrigan I agree with you. Folder orders should be managed by dragging and drop in the navigator.

FYI, we're already trying to provide concurrent collaboration. And the app has the rearranging feature in real-time. Please check this out http://boosthub.io/ The app will be integrated into this app one day.

[Rokt33r]

It's been fixed in other prs. Sorry for my late response.