List projet + list request

frontend/package-lock.json

@@ -5107,7 +5107,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5125,11 +5126,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5142,15 +5145,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5253,7 +5259,8 @@
         },
         "inherits": {
           "version": "2.0.4",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5263,6 +5270,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5275,17 +5283,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5302,6 +5313,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5382,7 +5394,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5392,6 +5405,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5467,7 +5481,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5497,6 +5512,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5514,6 +5530,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5552,11 +5569,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

frontend/src/actions/project.js

@@ -0,0 +1,27 @@
+export const PROJECT_USER_LIST = 'PROJECT_USER_LIST';
+export const PROJECT_USER_LIST_SUCCESS = 'PROJECT_USER_LIST_SUCCESS';
+export const PROJECT_USER_LIST_FAILURE = 'PROJECT_USER_LIST_FAILURE';
+
+export function projectUserListRequest() {
+    return { type: PROJECT_USER_LIST}
+}
+export function projectUserListSuccess(projects) {
+    return { type: PROJECT_USER_LIST_SUCCESS, projects }
+}
+export function projectUserListFailure(error) {
+    return { type: PROJECT_USER_LIST_FAILURE, error }
+}
+
+export const PROJECT_LIST = 'PROJECT_LIST';
+export const PROJECT_LIST_SUCCESS = 'PROJECT_LIST_SUCCESS';
+export const PROJECT_LIST_FAILURE = 'PROJECT_LIST_FAILURE';
+
+export function projectList() {
+    return { type: PROJECT_LIST}
+}
+export function projectListSuccess(projects) {
+    return { type: PROJECT_LIST_SUCCESS, projects }
+}
+export function projectListFailure(error) {
+    return { type: PROJECT_LIST_FAILURE, error }
+}

frontend/src/app.js

@@ -3,6 +3,8 @@ import { hot } from 'react-hot-loader'
 import { HashRouter } from 'react-router-dom' // ou BrowserRouter
 import { Route, Switch, Redirect } from 'react-router'
 import HomePage from './pages/home';
+import DashBoardClient from './pages/DashBoardClient';
+import DashBoardDev from './pages/DashBoardDev';
 
 class App extends Component {
   render () {
@@ -11,6 +13,8 @@ class App extends Component {
       <HashRouter>
         <Switch>
           <Route path='/home' exact component={HomePage} />
+          <Route path='/dashboard-client' exact component={DashBoardClient} />
+          <Route path='/dashboard-dev' exact component={DashBoardDev} />
           <Route component={() => <Redirect to="/home" />} />
         </Switch>
       </HashRouter>

frontend/src/components/ProjectList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ProjectTile from './ProjectTile'
+
+export default ({ projects, withRequest }) => (
+    <div className="tile is-parent is-vertical">
+        {
+            projects.map(project => (
+                <ProjectTile key={project.id} project={project} withRequest={withRequest} />
+            ))
+        }
+    </div>
+)

frontend/src/components/ProjectTile.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import RequestList from './RequestList'
+
+export default ({ project, withRequest }) => (
+    <article className="tile is-child notification is-primary">
+          <p className="title">{project.name}</p>
+          {
+              withRequest && <RequestList requests={project.requests || []} />
+          }
+    </article>
+)

frontend/src/components/RequestList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import RequestTile from './RequestTile'
+
+export default ({ requests }) => (
+    <div className="tile is-parent is-vertical">
+        {
+            requests.map(request => (
+                <RequestTile key={request.id} request={request} />
+            ))
+        }
+    </div>
+)

frontend/src/components/RequestTile.css

@@ -0,0 +1,19 @@
+.request-status-en-attente {
+    background-color: orange !important;
+}
+
+.request-status-pris-en-compte {
+    background-color: palevioletred !important;
+}
+
+.request-status-en-cours-de-traitement {
+    background-color: greenyellow !important;
+}
+
+.request-status-traite {
+    background-color: green !important;
+}
+
+.request-status-clos {
+    background-color: black !important;
+}

frontend/src/components/RequestTile.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './RequestTile.css'
+import { Link } from 'react-router-dom'
+
+export default ({ request }) => (
+    <Link to={`dashboard-client/detail-demande/${request.id}`}>
+        <article className={`tile is-child notification request-status-${request.status.slug}`}>
+            <p className="title">{request.title}</p>
+            <div className="content">
+                <span>{request.author}</span> || <span>{request.createdAt}</span>
+            </div>
+        </article>
+    </Link>
+)

frontend/src/pages/DashBoardClient.js

@@ -0,0 +1,97 @@
+import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
+import Page from './page';
+import ProjectList from '../components/ProjectList';
+import { projectUserListRequest } from '../actions/project';
+
+const DashBoardClient = ({ projects = [], ...props }) => {
+
+    useEffect(() => {
+        props.dispatch(projectUserListRequest())
+    }, [])
+    projects = [
+        {
+            id: 1,
+            name: 'mon premier projet',
+            requests: [
+                {
+                    id: 1,
+                    title: 'Demande num 1',
+                    author: 'Gael Peltey',
+                    status: {
+                        id: 1,
+                        slug: 'en-attente'
+                    },
+                    createdAt: 'le 20 juillet 2019'
+                },
+                {
+                    id: 2,
+                    title: 'Demande num 2',
+                    author: 'Jean Guy',
+                    status: {
+                        id: 2,
+                        slug: 'pris-en-compte'
+                    },
+                    createdAt: 'le 20 juillet 2020'
+                },
+                {
+                    id: 3,
+                    title: 'Demande num 3',
+                    author: 'Gael Peltey',
+                    status: {
+                        id: 3,
+                        slug: 'en-cours-de-traitement'
+                    },
+                    createdAt: 'le 20 juillet 2021'
+                }
+
+            ]
+        },
+        {
+            id: 2,
+            name: 'mon deuxième projet',
+        },
+        {
+            id: 3,
+            name: 'mon troisième projet',
+            requests: [
+                {
+                    id: 4,
+                    title: 'Demande num 4',
+                    author: 'David Pujadas',
+                    status: {
+                        id: 4,
+                        slug: 'traite'
+                    },
+                    createdAt: 'le 20 juillet 2022'
+                },
+                {
+                    id: 5,
+                    title: 'Demande num 5',
+                    author: 'Jean Mi',
+                    status: {
+                        id: 5,
+                        slug: 'clos'
+                    },
+                    createdAt: 'le 20 juillet 2023'
+                }
+
+            ]
+        },
+    ]
+    return (
+        <Page title="dashBoard client">
+            <div className="notification">
+                <h1>Mon dashboard</h1>
+            </div>
+            <ProjectList projects={projects} withRequest />
+        </Page>
+    );
+  }
+
+
+const mapStateToProps = ({ project }) => ({
+    projects: project.items,
+})
+
+export default connect(mapStateToProps)(DashBoardClient)

frontend/src/pages/DashBoardDev.js

@@ -0,0 +1,97 @@
+import React, { useEffect } from 'react'
+import { connect } from 'react-redux'
+import Page from './page';
+import ProjectList from '../components/ProjectList';
+import { projectList } from '../actions/project';
+
+const DashBoardDev = ({ projects = [], ...props }) => {
+
+    useEffect(() => {
+        props.dispatch(projectList())
+    }, [])
+    projects = [
+        {
+            id: 1,
+            name: 'mon premier projet',
+            requests: [
+                {
+                    id: 1,
+                    title: 'Demande num 1',
+                    author: 'Gael Peltey',
+                    status: {
+                        id: 1,
+                        slug: 'en-attente'
+                    },
+                    createdAt: 'le 20 juillet 2019'
+                },
+                {
+                    id: 2,
+                    title: 'Demande num 2',
+                    author: 'Jean Guy',
+                    status: {
+                        id: 2,
+                        slug: 'pris-en-compte'
+                    },
+                    createdAt: 'le 20 juillet 2020'
+                },
+                {
+                    id: 3,
+                    title: 'Demande num 3',
+                    author: 'Gael Peltey',
+                    status: {
+                        id: 3,
+                        slug: 'en-cours-de-traitement'
+                    },
+                    createdAt: 'le 20 juillet 2021'
+                }
+
+            ]
+        },
+        {
+            id: 2,
+            name: 'mon deuxième projet',
+        },
+        {
+            id: 3,
+            name: 'mon troisième projet',
+            requests: [
+                {
+                    id: 4,
+                    title: 'Demande num 4',
+                    author: 'David Pujadas',
+                    status: {
+                        id: 4,
+                        slug: 'traite'
+                    },
+                    createdAt: 'le 20 juillet 2022'
+                },
+                {
+                    id: 5,
+                    title: 'Demande num 5',
+                    author: 'Jean Mi',
+                    status: {
+                        id: 5,
+                        slug: 'clos'
+                    },
+                    createdAt: 'le 20 juillet 2023'
+                }
+
+            ]
+        },
+    ]
+    return (
+        <Page title="dashBoard dev">
+            <div className="notification">
+                <h1>Developpeur Dashboard</h1>
+            </div>
+            <ProjectList projects={projects} />
+        </Page>
+    );
+  }
+
+
+const mapStateToProps = ({ project }) => ({
+    projects: project.items,
+})
+
+export default connect(mapStateToProps)(DashBoardDev)

frontend/src/pages/page.js

@@ -6,7 +6,7 @@ export default function Page({ title, children }) {
   });
 
   return (
-    <div className="container-fluid">
+    <div className="container">
       { children }
     </div>
   );

frontend/src/reducers/project.js

@@ -0,0 +1,31 @@
+import {
+    PROJECT_USER_LIST_SUCCESS,
+    PROJECT_USER_LIST_FAILURE
+} from '../actions/project'
+
+const initialState = {
+    items: []
+}
+
+export default (state = initialState, action) => {
+
+    console.log(`Action: ${JSON.stringify(action)}`)
+   
+    switch (action.type) {
+   
+    case PROJECT_USER_LIST_SUCCESS:
+        return {
+            ...state,
+            items: action.projects
+        }
+    case PROJECT_USER_LIST_FAILURE:
+        return {
+            ...state,
+            items: [],
+            error: action.error
+        }
+    
+    }
+    return state
+   
+}

frontend/src/sagas/project.js

@@ -0,0 +1,53 @@
+import { call, put } from 'redux-saga/effects';
+import { projectUserListFailure, projectUserListSuccess, projectListFailure, projectListSuccess } from '../actions/project';
+
+export function* projectUserListSaga() {
+    let result
+    try {
+        result = yield call(projectUserList);
+    } catch(err) {
+        yield put(projectUserListFailure(err));
+        return
+    }
+
+    if ('error' in result) {
+        yield put(projectUserListFailure(result.error));
+        return
+    }
+
+    yield put(projectUserListSuccess(result.data));
+}
+
+const projectUserList = () => {
+    return fetch('http://localhost:8001/api/v1/me', {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'include'
+    }).then(res => res.json())
+}
+
+
+export function* projectListSaga() {
+    let result
+    try {
+        result = yield call(projectList);
+    } catch(err) {
+        yield put(projectListFailure(err));
+        return
+    }
+
+    if ('error' in result) {
+        yield put(projectListFailure(result.error));
+        return
+    }
+
+    yield put(projectListSuccess(result.data));
+}
+
+const projectList = () => {
+    return fetch('http://localhost:8001/api/v1/projects', {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'include'
+    }).then(res => res.json())
+}

frontend/src/sagas/root.js

@@ -1,7 +1,10 @@
 import { all, takeLatest } from 'redux-saga/effects';
+import { PROJECT_USER_LIST, PROJECT_LIST } from '../actions/project';
+import { projectUserListSaga, projectListSaga } from './project';
 
 export default function* rootSaga() {
   yield all([
-    
+    takeLatest(PROJECT_USER_LIST, projectUserListSaga),
+    takeLatest(PROJECT_LIST, projectListSaga),
   ]);
 }

frontend/src/store/store.js

@@ -1,11 +1,12 @@
 import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
 import createSagaMiddleware from 'redux-saga'
 import rootSaga from '../sagas/root'
+import project from '../reducers/project'
 
 const sagaMiddleware = createSagaMiddleware()
 
 const rootReducer = combineReducers({
-  // Ajouter vos reducers ici
+  project
 });
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;