Parcourir la source

app can now handle if user is already connected

Skylsmoi il y a 6 ans
Parent
révision
1ba5d82311

+ 3 - 0
jsonserver/server.js Voir le fichier

24
   if (req.body.login !== '' && req.body.password !== '') return res.jsonp(jsonDb.user_logged)
24
   if (req.body.login !== '' && req.body.password !== '') return res.jsonp(jsonDb.user_logged)
25
   else return res.jsonp('error')
25
   else return res.jsonp('error')
26
 })
26
 })
27
+
28
+server.get('/user/is_logged_in', (req, res) => res.jsonp(jsonDb.user_logged))
29
+
27
 server.get('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))
30
 server.get('/workspace/:id', (req, res) => res.jsonp(jsonDb.workspace_detail))
28
 
31
 
29
 server.use(router)
32
 server.use(router)

+ 8 - 6
jsonserver/static_db.json Voir le fichier

1
 {
1
 {
2
-  "login": true,
3
   "user_logged": {
2
   "user_logged": {
4
-    "id": 5,
5
-    "username": "Smoi",
6
-    "firstname": "Côme",
7
-    "lastname": "Stoilenom",
8
-    "email": "osef@algoo.fr"
3
+    "logged": true,
4
+    "user": {
5
+      "id": 5,
6
+      "username": "Smoi",
7
+      "firstname": "Côme",
8
+      "lastname": "Stoilenom",
9
+      "email": "osef@algoo.fr"
10
+    }
9
   },
11
   },
10
   "workspace_detail": {
12
   "workspace_detail": {
11
     "id": 1,
13
     "id": 1,

+ 2 - 2
src/action-creator.async.js Voir le fichier

75
   if (fetchUserLogin.status === 200) dispatch(updateUserConnected(fetchUserLogin.json))
75
   if (fetchUserLogin.status === 200) dispatch(updateUserConnected(fetchUserLogin.json))
76
 }
76
 }
77
 
77
 
78
-export const getUserConnected = () => async dispatch => {
78
+export const getIsUserConnected = () => async dispatch => {
79
   const fetchUserLogged = await fetchWrapper({
79
   const fetchUserLogged = await fetchWrapper({
80
-    url: 'http://localhost:3001/user_logged',
80
+    url: 'http://localhost:3001/user/is_logged_in',
81
     param: {...FETCH_CONFIG, method: 'GET'},
81
     param: {...FETCH_CONFIG, method: 'GET'},
82
     actionName: USER_CONNECTED,
82
     actionName: USER_CONNECTED,
83
     dispatch
83
     dispatch

+ 3 - 1
src/container/Login.jsx Voir le fichier

1
 import React from 'react'
1
 import React from 'react'
2
 import { connect } from 'react-redux'
2
 import { connect } from 'react-redux'
3
+import { Redirect } from 'react-router'
3
 import LoginLogo from '../component/Login/LoginLogo.jsx'
4
 import LoginLogo from '../component/Login/LoginLogo.jsx'
4
 import LoginLogoImg from '../img/logoTracimWhite.svg'
5
 import LoginLogoImg from '../img/logoTracimWhite.svg'
5
 import { userLogin } from '../action-creator.async.js'
6
 import { userLogin } from '../action-creator.async.js'
34
   }
35
   }
35
 
36
 
36
   render () {
37
   render () {
37
-    return (
38
+    if (this.props.user.isLoggedIn) return <Redirect to={{pathname: '/'}} />
39
+    else return (
38
       <section className='loginpage'>
40
       <section className='loginpage'>
39
         <div className='container-fluid'>
41
         <div className='container-fluid'>
40
 
42
 

+ 2 - 1
src/container/PrivateRoute.jsx Voir le fichier

8
 // /!\ you shall destruct props.component otherwise you get a warning:
8
 // /!\ you shall destruct props.component otherwise you get a warning:
9
 // "You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
9
 // "You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
10
 const PrivateRoute = ({ component: Component, ...rest }) => {
10
 const PrivateRoute = ({ component: Component, ...rest }) => {
11
-  return (
11
+  if (rest.user.isLoggedIn === undefined) return <div />
12
+  else return (
12
     <Route {...rest} render={props => rest.user.isLoggedIn
13
     <Route {...rest} render={props => rest.user.isLoggedIn
13
       ? <Component {...props} />
14
       ? <Component {...props} />
14
       : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
15
       : <Redirect to={{pathname: '/login', state: {from: props.location}}} />

+ 28 - 16
src/container/Tracim.jsx Voir le fichier

11
   withRouter
11
   withRouter
12
 } from 'react-router-dom'
12
 } from 'react-router-dom'
13
 import PrivateRoute from './PrivateRoute.jsx'
13
 import PrivateRoute from './PrivateRoute.jsx'
14
+import { getIsUserConnected } from '../action-creator.async.js'
14
 
15
 
15
 const SidebarWrapper = props => {
16
 const SidebarWrapper = props => {
16
-  if (props.locationPath !== '/login') {
17
-    return (
18
-      <div className='sidebarpagecontainer'>
19
-        <Sidebar />
20
-        {props.children}
21
-      </div>
22
-    )
23
-  } else return props.children
17
+  if (props.locationPath !== '/login') return (
18
+    <div className='sidebarpagecontainer'>
19
+      <Sidebar />
20
+      {props.children}
21
+    </div>
22
+  )
23
+  else return props.children
24
 }
24
 }
25
 
25
 
26
 class Tracim extends React.Component {
26
 class Tracim extends React.Component {
27
+  componentDidMount = () => {
28
+    this.props.dispatch(getIsUserConnected())
29
+  }
30
+
27
   render () {
31
   render () {
28
-    const { location } = this.props
32
+    const { user, location } = this.props
33
+
29
     return (
34
     return (
30
       <div>
35
       <div>
31
         <Header />
36
         <Header />
32
 
37
 
33
-        <Route path='/login' component={Login} />
38
+        { user.isLoggedIn === undefined
39
+          ? (<div />) // while we dont know if user is connected, display nothing but the header @TODO show loader
40
+          : (
41
+            <div>
42
+              <Route path='/login' component={Login} />
34
 
43
 
35
-        <SidebarWrapper locationPath={location.pathname}>
44
+              <SidebarWrapper locationPath={location.pathname}>
36
 
45
 
37
-          <PrivateRoute exact path='/' component={WorkspaceContent} />
38
-          <PrivateRoute path='/page' component={Page} />
46
+                <PrivateRoute exact path='/' component={WorkspaceContent} />
47
+                <PrivateRoute path='/page' component={Page} />
39
 
48
 
40
-        </SidebarWrapper>
49
+              </SidebarWrapper>
41
 
50
 
42
-        <Footer />
51
+              <Footer />
52
+            </div>
53
+          )
54
+        }
43
       </div>
55
       </div>
44
     )
56
     )
45
   }
57
   }
46
 }
58
 }
47
 
59
 
48
-const mapStateToProps = () => ({})
60
+const mapStateToProps = ({ user }) => ({ user })
49
 export default withRouter(connect(mapStateToProps)(Tracim))
61
 export default withRouter(connect(mapStateToProps)(Tracim))

+ 9 - 7
src/container/WorkspaceContent.jsx Voir le fichier

43
 
43
 
44
             { workspace.content.map(c => c.type === 'folder'
44
             { workspace.content.map(c => c.type === 'folder'
45
               ? <Folder folderData={c} key={c.id} />
45
               ? <Folder folderData={c} key={c.id} />
46
-              : <FileItem
47
-                name={c.title}
48
-                type={c.type}
49
-                status={c.status}
50
-                onClickItem={() => this.setState({activeFileType: 'file'})}
51
-                key={c.id}
52
-              />
46
+              : (
47
+                <FileItem
48
+                  name={c.title}
49
+                  type={c.type}
50
+                  status={c.status}
51
+                  onClickItem={() => this.setState({activeFileType: 'file'})}
52
+                  key={c.id}
53
+                />
54
+              )
53
             )}
55
             )}
54
           </div>
56
           </div>
55
 
57
 

+ 12 - 2
src/reducer/user.js Voir le fichier

3
   USER_DATA
3
   USER_DATA
4
 } from '../action-creator.sync.js'
4
 } from '../action-creator.sync.js'
5
 
5
 
6
+const serializeUser = data => ({
7
+  id: data.user.id,
8
+  isLoggedIn: data.logged,
9
+  username: data.user.username,
10
+  firstname: data.user.firstname,
11
+  lastname: data.user.lastname,
12
+  email: data.user.email
13
+})
14
+
6
 export default function user (state = {
15
 export default function user (state = {
7
-  isLoggedIn: false,
16
+  id: 0,
17
+  isLoggedIn: undefined,
8
   username: '',
18
   username: '',
9
   firstname: '',
19
   firstname: '',
10
   lastname: '',
20
   lastname: '',
12
 }, action) {
22
 }, action) {
13
   switch (action.type) {
23
   switch (action.type) {
14
     case `Update/${USER_CONNECTED}`:
24
     case `Update/${USER_CONNECTED}`:
15
-      return {...state, isLoggedIn: true, ...action.user}
25
+      return serializeUser(action.user)
16
 
26
 
17
     case `Update/${USER_DATA}`:
27
     case `Update/${USER_DATA}`:
18
       return {...state, ...action.data}
28
       return {...state, ...action.data}