workspace content now handles unique depth of folder

jsonserver/server.js

@@ -56,6 +56,15 @@ server.get('/workspace/:id', (req, res) => res.jsonp(
   Object.assign({}, jsonDb.workspace_detail, {content: shuffle(jsonDb.workspace_detail.content)}, {id: req.params.id})
 ))
 
+server.get('/workspace/:idws/folder/:idf', (req, res) => {
+  switch (req.params.idf) {
+    case '3':
+      return res.jsonp(jsonDb.folder_content_3)
+    case '11':
+      return res.jsonp(jsonDb.folder_content_11)
+  }
+})
+
 server.get('/user/:id/roles', (req, res) => res.jsonp(jsonDb.user_role))
 
 server.get('/timezone', (req, res) => res.jsonp(timezoneDb.timezone))

jsonserver/static_db.json

@@ -151,52 +151,54 @@
         "workspace_id": 1,
         "title": "Programmation objet",
         "type": "folder",
-        "content": [
-          {
-            "id": 4,
-            "parent_id": 3,
-            "workspace_id": 1,
-            "title": "des trucs de backend",
-            "type": "File",
-            "status": "outdated"
-          },
-          {
-            "id": 5,
-            "parent_id": 3,
-            "workspace_id": 1,
-            "title": "on s'emmerde",
-            "type": "PageHtml",
-            "status": "outdated"
-          },
-          {
-            "id": 11,
-            "parent_id": 3,
-            "workspace_id": 1,
-            "title": "Hidden features",
-            "type": "folder",
-            "content": [
-              {
-                "id": 12,
-                "parent_id": 11,
-                "workspace_id": 1,
-                "title": "flatMap",
-                "type": "PageHtml",
-                "status": "current"
-              },
-              {
-                "id": 13,
-                "parent_id": 11,
-                "workspace_id": 1,
-                "title": "c'est tout pété",
-                "type": "Issue",
-                "status": "current"
-              }
-            ]
-          }
-        ]
+        "content": []
       }
     ]
   },
+  "folder_content_3": [
+    {
+      "id": 4,
+      "parent_id": 3,
+      "workspace_id": 1,
+      "title": "des trucs de backend",
+      "type": "File",
+      "status": "outdated"
+    },
+    {
+      "id": 5,
+      "parent_id": 3,
+      "workspace_id": 1,
+      "title": "on s'emmerde",
+      "type": "PageHtml",
+      "status": "outdated"
+    },
+    {
+      "id": 11,
+      "parent_id": 3,
+      "workspace_id": 1,
+      "title": "Hidden features",
+      "type": "folder",
+      "content": []
+    }
+  ],
+  "folder_content_11": [
+    {
+      "id": 12,
+      "parent_id": 11,
+      "workspace_id": 1,
+      "title": "flatMap",
+      "type": "PageHtml",
+      "status": "current"
+    },
+    {
+      "id": 13,
+      "parent_id": 11,
+      "workspace_id": 1,
+      "title": "c'est tout pété",
+      "type": "Issue",
+      "status": "current"
+    }
+  ],
   "timeline": [{
     "id": 0,
     "type": "message",

src/action-creator.async.js

@@ -15,8 +15,11 @@ import {
   setWorkspaceData,
   WORKSPACE_LIST,
   updateWorkspaceListData,
+  FOLDER,
+  setFolderData,
   APP_LIST,
-  setAppList, setWorkspaceListIsOpenInSidebar
+  setAppList,
+  setWorkspaceListIsOpenInSidebar
 } from './action-creator.sync.js'
 
 /*
@@ -166,6 +169,16 @@ export const getWorkspaceContent = (workspaceId, filterStr) => async dispatch =>
   if (fetchGetWorkspaceContent.status === 200) dispatch(setWorkspaceData(fetchGetWorkspaceContent.json, filterStr))
 }
 
+export const getFolderContent = (workspaceId, folderId) => async dispatch => {
+  const fetchGetFolderContent = await fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/workspace/${workspaceId}/folder/${folderId}`,
+    param: {...FETCH_CONFIG.header, method: 'GET'},
+    actionName: `${WORKSPACE}/${FOLDER}`,
+    dispatch
+  })
+  if (fetchGetFolderContent.status === 200) dispatch(setFolderData(folderId, fetchGetFolderContent.json))
+}
+
 export const getAppList = () => async dispatch => {
   const fetchGetAppList = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/app/config`,

src/action-creator.sync.js

@@ -15,6 +15,9 @@ export const WORKSPACE = 'Workspace'
 export const setWorkspaceData = (workspace, filterStr = '') => ({ type: `Set/${WORKSPACE}`, workspace, filterStr })
 export const updateWorkspaceFilter = filterList => ({ type: `Update/${WORKSPACE}/Filter`, filterList })
 
+export const FOLDER = 'Folder'
+export const setFolderData = (folderId, content) => ({ type: `Set/${WORKSPACE}/${FOLDER}/Content`, folderId, content })
+
 export const WORKSPACE_LIST = 'WorkspaceList'
 export const updateWorkspaceListData = workspaceList => ({ type: `Update/${WORKSPACE_LIST}`, workspaceList })
 export const setWorkspaceListIsOpenInSidebar = (workspaceId, isOpenInSidebar) => ({ type: `Set/${WORKSPACE_LIST}/isOpenInSidebar`, workspaceId, isOpenInSidebar })

src/component/Workspace/Folder.jsx

@@ -14,7 +14,10 @@ class Folder extends React.Component {
     }
   }
 
-  handleClickToggleFolder = () => this.setState({open: !this.state.open})
+  handleClickToggleFolder = () => {
+    !this.state.open && this.props.folderData.content.length === 0 && this.props.onClickFolder(this.props.folderData.id)
+    this.setState({open: !this.state.open})
+  }
 
   handleClickNewFile = e => {
     e.stopPropagation() // because we have a link inside a link (togler and newFile)
@@ -22,7 +25,8 @@ class Folder extends React.Component {
   }
 
   render () {
-    const { app, folderData: { title, content }, onClickItem, isLast, t } = this.props
+    const { app, folderData: { title, content }, onClickItem, onClickFolder, isLast, t } = this.props
+
     return (
       <div className={classnames('folder', {'active': this.state.open, 'item-last': isLast})}>
         <div className='folder__header' onClick={this.handleClickToggleFolder}>
@@ -60,6 +64,7 @@ class Folder extends React.Component {
               app={app}
               folderData={c}
               onClickItem={onClickItem}
+              onClickFolder={onClickFolder}
               isLast={isLast}
               t={t}
               key={c.id}
@@ -87,5 +92,8 @@ Folder.propTypes = {
     title: PropTypes.string.isRequired,
     content: PropTypes.array
   }),
-  app: PropTypes.object
+  app: PropTypes.object,
+  onClickItem: PropTypes.func.isRequired,
+  onClickFolder: PropTypes.func.isRequired,
+  isLast: PropTypes.bool.isRequired
 }

src/container/WorkspaceContent.jsx

@@ -11,7 +11,8 @@ import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
 import {
   getAppList,
-  getWorkspaceContent
+  getWorkspaceContent,
+  getFolderContent
 } from '../action-creator.async.js'
 
 class WorkspaceContent extends React.Component {
@@ -42,6 +43,10 @@ class WorkspaceContent extends React.Component {
     // dispatch(setActiveFileContentActive(content))
   }
 
+  handleClickFolder = folderId => {
+    this.props.dispatch(getFolderContent(this.props.workspace.id, folderId))
+  }
+
   filterWorkspaceContent = (contentList, filter) => filter.length === 0
     ? contentList
     : contentList.filter(c => c.type === 'folder' || filter.includes(c.type)) // keep unfiltered files and folders
@@ -76,6 +81,7 @@ class WorkspaceContent extends React.Component {
                     app={app}
                     folderData={c}
                     onClickItem={this.handleClickContentItem}
+                    onClickFolder={this.handleClickFolder}
                     isLast={i === filteredWorkspaceContent.length - 1}
                     key={c.id}
                   />

src/reducer/workspace.js

@@ -1,5 +1,6 @@
 import {
-  WORKSPACE
+  WORKSPACE,
+  FOLDER
 } from '../action-creator.sync.js'
 
 const serializeWorkspace = data => ({
@@ -26,6 +27,20 @@ export default function user (state = {
     case `Update/${WORKSPACE}/Filter`:
       return {...state, filter: action.filterList}
 
+    case `Set/${WORKSPACE}/${FOLDER}/Content`:
+      const setFolderContent = (contentItem, action) => {
+        if (contentItem.id === action.folderId) return {...contentItem, content: action.content}
+
+        if (contentItem.type === 'folder') return {...contentItem, content: contentItem.content.map(c => setFolderContent(c, action))}
+
+        return contentItem
+      }
+
+      return {
+        ...state,
+        content: state.content.map(c => setFolderContent(c, action))
+      }
+
     default:
       return state
   }