Sfoglia il codice sorgente

fixed route handling

Skylsmoi 5 anni fa
parent
commit
bdb63cf2d5

+ 2 - 2
src/appFactory.js Vedi File

15
       content
15
       content
16
     })
16
     })
17
 
17
 
18
-    renderCreateContentApp = (appConfig, user, idWorkspace, idfolder) => GLOBAL_renderCreateContentApp({
18
+    renderCreateContentApp = (appConfig, user, idWorkspace, idFolder) => GLOBAL_renderCreateContentApp({
19
       loggedUser: user.logged ? user : {},
19
       loggedUser: user.logged ? user : {},
20
       config: {
20
       config: {
21
         ...appConfig,
21
         ...appConfig,
25
         apiHeader: FETCH_CONFIG.headers
25
         apiHeader: FETCH_CONFIG.headers
26
       },
26
       },
27
       idWorkspace,
27
       idWorkspace,
28
-      idfolder
28
+      idFolder
29
     })
29
     })
30
 
30
 
31
     emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)
31
     emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)

+ 41 - 4
src/container/Dashboard.jsx Vedi File

1
-import React, { Component } from 'react'
1
+import React from 'react'
2
+import { connect } from 'react-redux'
2
 import Sidebar from './Sidebar.jsx'
3
 import Sidebar from './Sidebar.jsx'
3
 import imgProfil from '../img/imgProfil.png'
4
 import imgProfil from '../img/imgProfil.png'
4
-
5
-class Dashboard extends Component {
5
+import {
6
+  getAppList,
7
+  getContentTypeList, getWorkspaceList
8
+} from '../action-creator.async.js'
9
+import {
10
+  setAppList,
11
+  setContentTypeList, setWorkspaceListIsOpenInSidebar, updateWorkspaceListData
12
+} from '../action-creator.sync.js'
13
+
14
+class Dashboard extends React.Component {
6
   constructor (props) {
15
   constructor (props) {
7
     super(props)
16
     super(props)
8
     this.state = {
17
     this.state = {
18
+      workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
9
       displayNewMemberDashboard: false,
19
       displayNewMemberDashboard: false,
10
       displayNotifBtn: false,
20
       displayNotifBtn: false,
11
       displayWebdavBtn: false,
21
       displayWebdavBtn: false,
13
     }
23
     }
14
   }
24
   }
15
 
25
 
26
+  async componentDidMount () {
27
+    const { workspaceIdInUrl } = this.state
28
+    const { user, workspaceList, app, contentType, dispatch } = this.props
29
+
30
+    console.log('<Dashboard> componentDidMount')
31
+
32
+    if (app.length === 0) {
33
+      const fetchGetAppList = await dispatch(getAppList())
34
+      if (fetchGetAppList.status === 200) dispatch(setAppList(fetchGetAppList.json))
35
+    }
36
+
37
+    if (contentType.length === 0) {
38
+      const fetchGetContentTypeList = await dispatch(getContentTypeList())
39
+      if (fetchGetContentTypeList.status === 200) dispatch(setContentTypeList(fetchGetContentTypeList.json))
40
+    }
41
+
42
+    if (user.user_id !== -1 && workspaceList.length === 0) {
43
+      const fetchGetWorkspaceList = await dispatch(getWorkspaceList(user.user_id))
44
+
45
+      if (fetchGetWorkspaceList.status === 200) {
46
+        dispatch(updateWorkspaceListData(fetchGetWorkspaceList.json))
47
+        dispatch(setWorkspaceListIsOpenInSidebar(workspaceIdInUrl || fetchGetWorkspaceList.json[0].workspace_id, true))
48
+      }
49
+    }
50
+  }
51
+
16
   handleToggleNewMemberDashboard = () => this.setState(prevState => ({
52
   handleToggleNewMemberDashboard = () => this.setState(prevState => ({
17
     displayNewMemberDashboard: !prevState.displayNewMemberDashboard
53
     displayNewMemberDashboard: !prevState.displayNewMemberDashboard
18
   }))
54
   }))
551
   }
587
   }
552
 }
588
 }
553
 
589
 
554
-export default Dashboard
590
+const mapStateToProps = ({ user, app, contentType, workspaceList }) => ({ user, app, contentType, workspaceList })
591
+export default connect(mapStateToProps)(Dashboard)

+ 2 - 1
src/container/OpenContentApp.jsx Vedi File

10
     if (isNaN(idWorkspace)) return
10
     if (isNaN(idWorkspace)) return
11
 
11
 
12
     if (['type', 'idcts'].every(p => p in match.params) && match.params.type !== 'contents' && workspaceContent.id !== -1 && workspaceContent.length) {
12
     if (['type', 'idcts'].every(p => p in match.params) && match.params.type !== 'contents' && workspaceContent.id !== -1 && workspaceContent.length) {
13
-      // @TODO test validity of params, idcts isNaN and type includes list of available content type
13
+      if (isNaN(match.params.idcts) || !contentType.map(c => c.slug).includes(match.params.type)) return
14
+
14
       const contentToOpen = {
15
       const contentToOpen = {
15
         content_id: parseInt(match.params.idcts),
16
         content_id: parseInt(match.params.idcts),
16
         workspace_id: parseInt(idWorkspace),
17
         workspace_id: parseInt(idWorkspace),

+ 1 - 0
src/container/Sidebar.jsx Vedi File

22
   }
22
   }
23
 
23
 
24
   componentDidUpdate (prevProps, prevState) {
24
   componentDidUpdate (prevProps, prevState) {
25
+    console.log('<Sidebar> Did Update')
25
     if (this.props.match.params.idws === undefined) return
26
     if (this.props.match.params.idws === undefined) return
26
 
27
 
27
     const newWorkspaceId = parseInt(this.props.match.params.idws)
28
     const newWorkspaceId = parseInt(this.props.match.params.idws)

+ 8 - 8
src/container/Tracim.jsx Vedi File

11
 import WIPcomponent from './WIPcomponent.jsx'
11
 import WIPcomponent from './WIPcomponent.jsx'
12
 import {
12
 import {
13
   Route,
13
   Route,
14
-  withRouter
14
+  withRouter,
15
+  Switch
15
 } from 'react-router-dom'
16
 } from 'react-router-dom'
16
 import PrivateRoute from './PrivateRoute.jsx'
17
 import PrivateRoute from './PrivateRoute.jsx'
17
 import { PAGE } from '../helper.js'
18
 import { PAGE } from '../helper.js'
54
             <div className='tracim__content'> {/* uses of <Switch> component in react router ? */}
55
             <div className='tracim__content'> {/* uses of <Switch> component in react router ? */}
55
               <Route path={PAGE.LOGIN} component={Login} />
56
               <Route path={PAGE.LOGIN} component={Login} />
56
 
57
 
57
-              <PrivateRoute exact path={PAGE.HOME} component={WorkspaceContent} />
58
-              <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
59
-              {/* bellow, the '?' is important, it avoid to have to declare another route for CONTENT_LIST which could double match */}
60
-              {/* <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':type?', ':idcts?')} component={WorkspaceContent} /> */}
61
-
62
-              <Route path='/workspaces/:idws/' component={WorkspaceContent} />
58
+              <Switch>
59
+                <PrivateRoute path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
60
+                <PrivateRoute path={PAGE.WORKSPACE.CALENDAR(':idws')} component={() => <div><br /><br /><br /><br />NYI</div>} />
61
+                <PrivateRoute path={PAGE.WORKSPACE.CONTENT(':idws', ':type?', ':idcts?')} component={WorkspaceContent} />
62
+              </Switch>
63
 
63
 
64
-              <PrivateRoute exact path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
64
+              <PrivateRoute path={PAGE.ACCOUNT} component={Account} />
65
               <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
65
               <PrivateRoute path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
66
 
66
 
67
               <Footer />
67
               <Footer />

+ 16 - 9
src/container/WorkspaceContent.jsx Vedi File

1
 import React from 'react'
1
 import React from 'react'
2
 import { connect } from 'react-redux'
2
 import { connect } from 'react-redux'
3
-import { withRouter, Route } from 'react-router-dom'
3
+import { withRouter } from 'react-router-dom'
4
 import appFactory from '../appFactory.js'
4
 import appFactory from '../appFactory.js'
5
 import { PAGE } from '../helper.js'
5
 import { PAGE } from '../helper.js'
6
 import Sidebar from './Sidebar.jsx'
6
 import Sidebar from './Sidebar.jsx'
64
     const { workspaceIdInUrl } = this.state
64
     const { workspaceIdInUrl } = this.state
65
     const { user, workspaceList, app, contentType, match, location, dispatch } = this.props
65
     const { user, workspaceList, app, contentType, match, location, dispatch } = this.props
66
 
66
 
67
-    console.log('componentDidMount')
67
+    console.log('<WorkspaceContent> componentDidMount')
68
 
68
 
69
     if (app.length === 0) {
69
     if (app.length === 0) {
70
       const fetchGetAppList = await dispatch(getAppList())
70
       const fetchGetAppList = await dispatch(getAppList())
100
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
100
     else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
101
   }
101
   }
102
 
102
 
103
-  componentDidUpdate (prevProps, prevState) {
104
-    console.log('componentDidUpdate')
103
+  async componentDidUpdate (prevProps, prevState) {
104
+    const { match, location, dispatch } = this.props
105
+
106
+    console.log('<WorkspaceContent> componentDidUpdate')
105
 
107
 
106
     if (this.state.workspaceIdInUrl === null) return
108
     if (this.state.workspaceIdInUrl === null) return
107
 
109
 
108
-    const idWorkspace = parseInt(this.props.match.params.idws)
110
+    const idWorkspace = parseInt(match.params.idws)
109
 
111
 
110
     if (isNaN(idWorkspace)) return
112
     if (isNaN(idWorkspace)) return
111
 
113
 
112
-    if (prevState.workspaceIdInUrl !== idWorkspace) this.setState({workspaceIdInUrl: idWorkspace})
114
+    if (prevState.workspaceIdInUrl !== idWorkspace) {
115
+      this.setState({workspaceIdInUrl: idWorkspace})
116
+
117
+      const wsContent = await dispatch(getWorkspaceContentList(idWorkspace, 0))
118
+
119
+      if (wsContent.status === 200) dispatch(setWorkspaceContent(wsContent.json, qs.parse(location.search).type))
120
+      else dispatch(newFlashMessage('Error while loading workspace', 'danger'))
121
+    }
113
 
122
 
114
     // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
123
     // if (user.user_id !== -1 && prevProps.user.id !== user.id) dispatch(getWorkspaceList(user.user_id, idWorkspace))
115
   }
124
   }
183
       <div className='sidebarpagecontainer'>
192
       <div className='sidebarpagecontainer'>
184
         <Sidebar />
193
         <Sidebar />
185
 
194
 
186
-        <Route path={`${match.url}/:type/:idcts`} render={() =>
187
-          <OpenContentApp idWorkspace={match.params.idws} appOpened={this.state.appOpened} updateAppOpened={this.handleUpdateAppOpened} />}
188
-        />
195
+        <OpenContentApp idWorkspace={match.params.idws} appOpened={this.state.appOpened} updateAppOpened={this.handleUpdateAppOpened} />
189
 
196
 
190
         <PageWrapper customeClass='workspace'>
197
         <PageWrapper customeClass='workspace'>
191
           <PageTitle
198
           <PageTitle

+ 1 - 1
src/helper.js Vedi File

15
     NEW: '/workspaces/new',
15
     NEW: '/workspaces/new',
16
     CALENDAR: (idws = ':idws') => `/workspaces/${idws}/calendar`,
16
     CALENDAR: (idws = ':idws') => `/workspaces/${idws}/calendar`,
17
     CONTENT_LIST: (idws = ':idws') => `/workspaces/${idws}/contents`,
17
     CONTENT_LIST: (idws = ':idws') => `/workspaces/${idws}/contents`,
18
-    CONTENT: (idws = ':idws', type = ':type', idcts = ':idcts') => `/workspaces/${idws}/${type}/${idcts}`,
18
+    CONTENT: (idws = ':idws', type = ':type?', idcts = ':idcts?') => `/workspaces/${idws}/${type}/${idcts}`,
19
     CONTENT_NEW: (idws = ':idws', ctstype = ':ctstype') => `/workspaces/${idws}/contents/${ctstype}/new`,
19
     CONTENT_NEW: (idws = ':idws', ctstype = ':ctstype') => `/workspaces/${idws}/contents/${ctstype}/new`,
20
     CONTENT_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/edit`,
20
     CONTENT_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/edit`,
21
     CONTENT_TITLE_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/title/edit`,
21
     CONTENT_TITLE_EDIT: (idws = ':idws', idcts = ':idcts') => `/workspaces/${idws}/contents/${idcts}/title/edit`,