Bläddra i källkod

added appFactory as HOC + improved app interface + added some trad

Skylsmoi 6 år sedan
förälder
incheckning
e0c09e9c34
5 ändrade filer med 51 tillägg och 22 borttagningar
  1. 36 0
      src/appFactory.js
  2. 4 3
      src/container/Sidebar.jsx
  3. 5 19
      src/container/WorkspaceContent.jsx
  4. 3 0
      src/translate/en.js
  5. 3 0
      src/translate/fr.js

+ 36 - 0
src/appFactory.js Visa fil

1
+import React from 'react'
2
+import { FETCH_CONFIG } from './helper.js'
3
+
4
+export function appFactory (WrappedComponent) {
5
+  return class AppFactory extends React.Component {
6
+    renderApp = (user, workspace, app, content) => GLOBAL_renderApp({
7
+      loggedUser: user.isLoggedIn ? user : {},
8
+      workspace: {
9
+        id: workspace.id,
10
+        title: workspace.title
11
+      },
12
+      appConfig: {
13
+        ...app[content.type],
14
+        apiUrl: FETCH_CONFIG.apiUrl
15
+      },
16
+      content
17
+    })
18
+
19
+    emitEventApp = (type, data) => GLOBAL_dispatchEvent(type, data)
20
+
21
+    hideApp = appName => GLOBAL_hideApp(appName)
22
+
23
+    render () {
24
+      return (
25
+        <WrappedComponent
26
+          {...this.props}
27
+          renderApp={this.renderApp}
28
+          emitEventApp={this.emitEventApp}
29
+          hideApp={this.hideApp}
30
+        />
31
+      )
32
+    }
33
+  }
34
+}
35
+
36
+export default appFactory

+ 4 - 3
src/container/Sidebar.jsx Visa fil

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 } from 'react-router'
3
 import { withRouter } from 'react-router'
4
+import { translate } from 'react-i18next'
4
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
5
 import WorkspaceListItem from '../component/Sidebar/WorkspaceListItem.jsx'
5
 import { getWorkspaceList } from '../action-creator.async.js'
6
 import { getWorkspaceList } from '../action-creator.async.js'
6
 import { setWorkspaceListIsOpen } from '../action-creator.sync.js'
7
 import { setWorkspaceListIsOpen } from '../action-creator.sync.js'
31
   }
32
   }
32
 
33
 
33
   render () {
34
   render () {
34
-    const { workspaceList } = this.props
35
+    const { workspaceList, t } = this.props
35
 
36
 
36
     return (
37
     return (
37
       <div className='sidebar d-none d-lg-table-cell'>
38
       <div className='sidebar d-none d-lg-table-cell'>
53
 
54
 
54
         <div className='sidebar__btnnewworkspace'>
55
         <div className='sidebar__btnnewworkspace'>
55
           <button className='sidebar__btnnewworkspace__btn btn btn-success'>
56
           <button className='sidebar__btnnewworkspace__btn btn btn-success'>
56
-            Créer un workspace
57
+            {t('Sidebar.create_new_workspace')}
57
           </button>
58
           </button>
58
         </div>
59
         </div>
59
       </div>
60
       </div>
62
 }
63
 }
63
 
64
 
64
 const mapStateToProps = ({ user, workspaceList }) => ({ user, workspaceList })
65
 const mapStateToProps = ({ user, workspaceList }) => ({ user, workspaceList })
65
-export default withRouter(connect(mapStateToProps)(Sidebar))
66
+export default withRouter(connect(mapStateToProps)(translate()(Sidebar)))

+ 5 - 19
src/container/WorkspaceContent.jsx Visa fil

1
 import React from 'react'
1
 import React from 'react'
2
 import { connect } from 'react-redux'
2
 import { connect } from 'react-redux'
3
+import appFactory from '../appFactory.js'
3
 import Folder from '../component/Workspace/Folder.jsx'
4
 import Folder from '../component/Workspace/Folder.jsx'
4
 import FileItem from '../component/Workspace/FileItem.jsx'
5
 import FileItem from '../component/Workspace/FileItem.jsx'
5
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
6
 import FileItemHeader from '../component/Workspace/FileItemHeader.jsx'
7
 import PageTitle from '../component/common/layout/PageTitle.jsx'
8
 import PageTitle from '../component/common/layout/PageTitle.jsx'
8
 import PageContent from '../component/common/layout/PageContent.jsx'
9
 import PageContent from '../component/common/layout/PageContent.jsx'
9
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
10
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
10
-import { FETCH_CONFIG } from '../helper.js'
11
-import { setActiveFileContentActive } from '../action-creator.sync.js'
12
 import {
11
 import {
13
   getAppList,
12
   getAppList,
14
   getWorkspaceContent
13
   getWorkspaceContent
44
   }
43
   }
45
 
44
 
46
   handleClickContentItem = content => {
45
   handleClickContentItem = content => {
47
-    const { user, workspace, dispatch } = this.props
48
-
49
-    GLOBAL_renderApp({
50
-      workspace: {
51
-        id: workspace.id,
52
-        title: workspace.title
53
-      },
54
-      appConfig: {
55
-        ...this.props.app[content.type],
56
-        apiUrl: FETCH_CONFIG.apiUrl
57
-      },
58
-      loggedUser: user.isLoggedIn ? user : {},
59
-      content
60
-    })
61
-
62
-    dispatch(setActiveFileContentActive(content))
46
+    this.props.renderApp(this.props.user, this.props.workspace, this.props.app, content)
47
+    // Côme - 2018/03/08 - line bellow is useless because we cannot call the reducer again when hiding app since the call comes from the app
48
+    // dispatch(setActiveFileContentActive(content))
63
   }
49
   }
64
 
50
 
65
   render () {
51
   render () {
106
 }
92
 }
107
 
93
 
108
 const mapStateToProps = ({ user, workspace, workspaceList, app }) => ({ user, workspace, workspaceList, app })
94
 const mapStateToProps = ({ user, workspace, workspaceList, app }) => ({ user, workspace, workspaceList, app })
109
-export default connect(mapStateToProps)(WorkspaceContent)
95
+export default connect(mapStateToProps)(appFactory(WorkspaceContent))

+ 3 - 0
src/translate/en.js Visa fil

15
     Folder: {
15
     Folder: {
16
       create: 'Create',
16
       create: 'Create',
17
       content_type: 'Content type'
17
       content_type: 'Content type'
18
+    },
19
+    Sidebar: {
20
+      create_new_workspace: 'Create new workspace'
18
     }
21
     }
19
   }
22
   }
20
 }
23
 }

+ 3 - 0
src/translate/fr.js Visa fil

15
     Folder: {
15
     Folder: {
16
       create: 'Créer',
16
       create: 'Créer',
17
       content_type: 'Type de contenu'
17
       content_type: 'Type de contenu'
18
+    },
19
+    Sidebar: {
20
+      create_new_workspace: 'Créer un workspace'
18
     }
21
     }
19
   }
22
   }
20
 }
23
 }