wpetit/react-logo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ESlint: application générale des règles

Browse Source
This commit is contained in:
wpetit 2020-03-09 14:49:56 +01:00
parent 21fe79684d
commit e5c5d9c8d2
40 changed files with 396 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
backend/src/Controller/RequestController.php
View File

@ -1,20 +0,0 @@
<?php
namespace App\Controller;
use App\Http\DataResponse;
use Symfony\Component\Routing\Annotation\Route;
class RequestController
{
/**
* @Route("/api/v1/request", name="api_v1_list_requests")
*/
public function listRequests()
{
return new DataResponse([
]);
}
}

32
frontend/src/actions/auth.actions.js
View File

@ -1,31 +1,47 @@
export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export function login(username, password) {
return { type: LOGIN_REQUEST, username, password }
return { type: LOGIN_REQUEST, username, password };
}
export function loginFailure(username, error) {
return { type: LOGIN_FAILURE, username, error }
return { type: LOGIN_FAILURE, username, error };
}
export function loginSuccess(username) {
return { type: LOGIN_SUCCESS, username }
return { type: LOGIN_SUCCESS, username };
}
export const LOGOUT_REQUEST = 'LOGOUT_REQUEST'
export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
export function logout() {
return { type: LOGOUT_REQUEST }
return { type: LOGOUT_REQUEST };
}
export function logoutFailure(error) {
return { type: LOGOUT_FAILURE, error }
return { type: LOGOUT_FAILURE, error };
}
export function logoutSuccess() {
return { type: LOGOUT_SUCCESS }
return { type: LOGOUT_SUCCESS };
}
export const REFRESH_USER_SESSION_REQUEST = 'REFRESH_USER_SESSION_REQUEST';
export const REFRESH_USER_SESSION_SUCCESS = 'REFRESH_USER_SESSION_SUCCESS';
export const REFRESH_USER_SESSION_FAILURE = 'REFRESH_USER_SESSION_FAILURE';
export function refreshUserSession() {
return { type: REFRESH_USER_SESSION_REQUEST };
}
export function refreshUserSessionSuccess(user) {
return { type: REFRESH_USER_SESSION_SUCCESS, user };
}
export function refreshUserSessionFailure(error) {
return { type: REFRESH_USER_SESSION_FAILURE, error };
}

6
frontend/src/actions/message.actions.js
View File

@ -1,11 +1,11 @@
export const ADD_MESSAGE = 'ADD_MESSAGE'
export const ADD_MESSAGE = 'ADD_MESSAGE';
export function addMessage(type, text) {
return { type: ADD_MESSAGE, text, messageType: type };
}
export const REMOVE_OLDEST_MESSAGE = 'REMOVE_OLDEST_MESSAGE'
export const REMOVE_OLDEST_MESSAGE = 'REMOVE_OLDEST_MESSAGE';
export function removeOldestMessage() {
return { type: REMOVE_OLDEST_MESSAGE }
return { type: REMOVE_OLDEST_MESSAGE };
}

12
frontend/src/actions/project.js
View File

@ -3,13 +3,13 @@ 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}
return { type: PROJECT_USER_LIST};
}
export function projectUserListSuccess(projects) {
return { type: PROJECT_USER_LIST_SUCCESS, projects }
return { type: PROJECT_USER_LIST_SUCCESS, projects };
}
export function projectUserListFailure(error) {
return { type: PROJECT_USER_LIST_FAILURE, error }
return { type: PROJECT_USER_LIST_FAILURE, error };
}
export const PROJECT_LIST = 'PROJECT_LIST';
@ -17,11 +17,11 @@ export const PROJECT_LIST_SUCCESS = 'PROJECT_LIST_SUCCESS';
export const PROJECT_LIST_FAILURE = 'PROJECT_LIST_FAILURE';
export function projectList() {
return { type: PROJECT_LIST}
return { type: PROJECT_LIST};
}
export function projectListSuccess(projects) {
return { type: PROJECT_LIST_SUCCESS, projects }
return { type: PROJECT_LIST_SUCCESS, projects };
}
export function projectListFailure(error) {
return { type: PROJECT_LIST_FAILURE, error }
return { type: PROJECT_LIST_FAILURE, error };
}

6
frontend/src/actions/user.actions.js
View File

@ -3,13 +3,13 @@ export const CREATE_USER_SUCCESS = 'CREATE_USER_SUCCESS';
export const CREATE_USER_FAILURE = 'CREATE_USER_FAILURE';
export function createUser(username, password) {
return { type: CREATE_USER_REQUEST, username, password}
return { type: CREATE_USER_REQUEST, username, password};
}
export function createUserSuccess(user) {
return { type: CREATE_USER_SUCCESS, user }
return { type: CREATE_USER_SUCCESS, user };
}
export function createUserFailure(error) {
return { type: CREATE_USER_FAILURE, error }
return { type: CREATE_USER_FAILURE, error };
}

43
frontend/src/app.js
View File

@ -1,8 +1,8 @@
import { Component, Fragment } from 'react'
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 { Component, Fragment } from 'react';
import { hot } from 'react-hot-loader';
import { HashRouter } from 'react-router-dom'; // ou BrowserRouter
import { Route, Switch, Redirect } from 'react-router';
import { ConnectedHomePage as HomePage } from './pages/home';
import { ConnectedLoginPage as LoginPage } from './pages/login';
import DashBoardClient from './pages/DashBoardClient';
import DashBoardDev from './pages/DashBoardDev';
@ -11,24 +11,23 @@ import { connect } from 'react-redux';
import { history } from './util/history';
export class App extends Component {
render () {
return (
<Fragment>
<HashRouter history={history}>
<Switch>
<Route path='/login' exact component={LoginPage} />
<Route path='/logout' exact component={LogoutPage} />
<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>
</Fragment>
)
}
render () {
return (
<Fragment>
<HashRouter history={history}>
<Switch>
<Route path='/login' exact component={LoginPage} />
<Route path='/logout' exact component={LogoutPage} />
<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>
</Fragment>
);
}
}
export const ConnectedApp = connect()(App);
export const HotApp = hot(module)(ConnectedApp);

6
frontend/src/components/ProjectList.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import ProjectTile from './ProjectTile'
import React from 'react';
import ProjectTile from './ProjectTile';
export default ({ projects, withRequest }) => (
<div className="tile is-parent is-vertical">
@ -9,4 +9,4 @@ export default ({ projects, withRequest }) => (
))
}
</div>
)
);

14
frontend/src/components/ProjectTile.js
View File

@ -1,11 +1,11 @@
import React from 'react'
import RequestList from './RequestList'
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 || []} />
}
<p className="title">{project.name}</p>
{
withRequest && <RequestList requests={project.requests || []} />
}
</article>
)
);

6
frontend/src/components/RequestList.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import RequestTile from './RequestTile'
import React from 'react';
import RequestTile from './RequestTile';
export default ({ requests }) => (
<div className="tile is-parent is-vertical">
@ -9,4 +9,4 @@ export default ({ requests }) => (
))
}
</div>
)
);

8
frontend/src/components/RequestTile.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import styles from './RequestTile.css'
import { Link } from 'react-router-dom'
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}`}>
@ -11,4 +11,4 @@ export default ({ request }) => (
</div>
</article>
</Link>
)
);

130
frontend/src/components/UserForm.js
View File

@ -3,74 +3,74 @@ import { WithForm } from './WithForm';
export function UserForm({ form, onSubmit }) {
useEffect(() => {
if (form.valid && form.submitted) onSubmit(form.data);
}, [form.valid, form.submitted]);
useEffect(() => {
if (form.valid && form.submitted) onSubmit(form.data);
}, [form.valid, form.submitted]);
return (
<form className="form" onSubmit={form.onSubmit}>
<div className="field">
<label className="label" htmlFor="username">Nom d'utilisateur</label>
<div className="control">
<input className={`input ${form.hasError('username') ? 'is-danger' : ''}`} type="text"
name="username" value={form.field('username', '')}
onChange={form.onChange('username')} />
</div>
{
form.hasError('username') ?
<p className="help is-danger">{form.error('username')}</p>
: null
}
</div>
<div className="field">
<label className="label" htmlFor="password">Mot de passe</label>
<div className="control">
<input className={`input ${form.hasError('password') ? 'is-danger' : ''}`}
type="password" name="password"
autoComplete='new-password'
value={form.field('password', '')}
onChange={form.onChange('password')} />
</div>
{
form.hasError('password') ?
<p className="help is-danger">{form.error('password')}</p>
: null
}
</div>
<div className="field">
<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
<div className="control">
<input className={`input ${form.hasError('passwordVerification') ? 'is-danger' : ''}`}
type="password" name="passwordVerification"
autoComplete='new-password'
value={form.field('passwordVerification', '')}
onChange={form.onChange('passwordVerification')} />
</div>
{
form.hasError('passwordVerification') ?
<p className="help is-danger">{form.error('passwordVerification')}</p>
: null
}
</div>
<button type="submit" disabled={!form.valid} className="button">Envoyer</button>
</form>
);
};
return (
<form className="form" onSubmit={form.onSubmit}>
<div className="field">
<label className="label" htmlFor="username">Nom d'utilisateur</label>
<div className="control">
<input className={`input ${form.hasError('username') ? 'is-danger' : ''}`} type="text"
name="username" value={form.field('username', '')}
onChange={form.onChange('username')} />
</div>
{
form.hasError('username') ?
<p className="help is-danger">{form.error('username')}</p>
: null
}
</div>
<div className="field">
<label className="label" htmlFor="password">Mot de passe</label>
<div className="control">
<input className={`input ${form.hasError('password') ? 'is-danger' : ''}`}
type="password" name="password"
autoComplete='new-password'
value={form.field('password', '')}
onChange={form.onChange('password')} />
</div>
{
form.hasError('password') ?
<p className="help is-danger">{form.error('password')}</p>
: null
}
</div>
<div className="field">
<label className="label" htmlFor="passwordVerification">Mot de passe (vérification)</label>
<div className="control">
<input className={`input ${form.hasError('passwordVerification') ? 'is-danger' : ''}`}
type="password" name="passwordVerification"
autoComplete='new-password'
value={form.field('passwordVerification', '')}
onChange={form.onChange('passwordVerification')} />
</div>
{
form.hasError('passwordVerification') ?
<p className="help is-danger">{form.error('passwordVerification')}</p>
: null
}
</div>
<button type="submit" disabled={!form.valid} className="button">Envoyer</button>
</form>
);
}
const validators = {
username: (value, formData) => {
if (!value) return { hasError: true, message: 'Le nom d\'utilisateur ne peut être vide !' }
return { hasError: false, message: '' };
},
password: (value, formData) => {
if (!value) return { hasError: true, message: 'Le mot de passe ne peut pas être vide !' }
if (value !== formData.passwordVerification) return { hasError: true, message: 'Vos deux mots de passe sont différents !' }
return { hasError: false, message: '' };
},
passwordVerification: (value, formData) => {
if (value !== formData.password) return { hasError: true, message: 'Vos deux mots de passe sont différents !' }
return { hasError: false, message: '' };
}
username: (value, formData) => {
if (!value) return { hasError: true, message: 'Le nom d\'utilisateur ne peut être vide !' };
return { hasError: false, message: '' };
},
password: (value, formData) => {
if (!value) return { hasError: true, message: 'Le mot de passe ne peut pas être vide !' };
if (value !== formData.passwordVerification) return { hasError: true, message: 'Vos deux mots de passe sont différents !' };
return { hasError: false, message: '' };
},
passwordVerification: (value, formData) => {
if (value !== formData.password) return { hasError: true, message: 'Vos deux mots de passe sont différents !' };
return { hasError: false, message: '' };
}
};
export const ExtendedUserForm = WithForm(validators)(UserForm);

2
frontend/src/components/UserForm.test.js
View File

@ -23,7 +23,7 @@ describe('<UserForm />', () => {
password: 'test',
passwordVerification: 'test'
});
})
});
});
describe('username validation', () => {

8
frontend/src/components/WithForm.js
View File

@ -16,15 +16,15 @@ export function WithForm(validators) {
setFormErrors(formErrors => {
return { ...formErrors, [name]: { hasError: false, message: '' } };
});
return
};
return;
}
const value = formData[name];
const result = validators[name](value, formData);
setFormErrors(formErrors => {
return { ...formErrors, [name]: result };
});
}
};
useEffect(() => {
Object.keys(formData).forEach(validateField);
@ -78,7 +78,7 @@ export function WithForm(validators) {
return <Component form={form} {...props} />;
};
}
};
}
// connect(mapStateToProps)(MyComponent)

24
frontend/src/components/message-list.js
View File

@ -2,20 +2,20 @@ export function MessageList({ messages }) {
if (!Array.isArray(messages)) return null;
return (
<div className="columns" style={{marginTop:"1em"}}>
<div className="columns" style={{marginTop:'1em'}}>
<div className="column is-4 is-offset-4">
<div className="messages">
{
messages.map((m, i) => {
return (
<div key={`message-${i}`} className={`message is-${m.type}`}>
<div className="message-body">
{m.text}
</div>
</div>
)
})
}
{
messages.map((m, i) => {
return (
<div key={`message-${i}`} className={`message is-${m.type}`}>
<div className="message-body">
{m.text}
</div>
</div>
);
})
}
</div>
</div>
</div>

4
frontend/src/errors/api.error.js
View File

@ -1,10 +1,10 @@
export class APIError extends Error {
constructor(endpoint, code, message, data) {
constructor(endpoint, code, message, data) {
super(`APIError: ${message}`);
this.endpoint = endpoint;
this.code = code;
this.data = data;
Error.captureStackTrace(this, APIError);
Error.captureStackTrace(this, APIError);
}
getEndpoint() {

8
frontend/src/errors/unauthorized.error.js
View File

@ -1,6 +1,6 @@
export class UnauthorizedError extends Error {
constructor() {
super("Unauthorized");
Error.captureStackTrace(this, UnauthorizedError);
}
constructor() {
super('Unauthorized');
Error.captureStackTrace(this, UnauthorizedError);
}
}

12
frontend/src/index.js
View File

@ -1,14 +1,14 @@
import ReactDOM from 'react-dom'
import { HotApp as App } from './app'
import { configureStore } from './store/store'
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom';
import { HotApp as App } from './app';
import { configureStore } from './store/store';
import { Provider } from 'react-redux';
import 'bulma/css/bulma.min.css';
const store = configureStore()
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
)
);

16
frontend/src/pages/DashBoardClient.js
View File

@ -1,5 +1,5 @@
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Page from './page';
import ProjectList from '../components/ProjectList';
import { projectUserListRequest } from '../actions/project';
@ -7,8 +7,8 @@ import { projectUserListRequest } from '../actions/project';
const DashBoardClient = ({ projects = [], ...props }) => {
useEffect(() => {
props.dispatch(projectUserListRequest())
}, [])
props.dispatch(projectUserListRequest());
}, []);
projects = [
{
id: 1,
@ -78,7 +78,7 @@ const DashBoardClient = ({ projects = [], ...props }) => {
]
},
]
];
return (
<Page title="dashBoard client">
<div className="notification">
@ -87,11 +87,11 @@ const DashBoardClient = ({ projects = [], ...props }) => {
<ProjectList projects={projects} withRequest />
</Page>
);
}
};
const mapStateToProps = ({ project }) => ({
projects: project.items,
})
});
export default connect(mapStateToProps)(DashBoardClient)
export default connect(mapStateToProps)(DashBoardClient);

16
frontend/src/pages/DashBoardDev.js
View File

@ -1,5 +1,5 @@
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Page from './page';
import ProjectList from '../components/ProjectList';
import { projectList } from '../actions/project';
@ -7,8 +7,8 @@ import { projectList } from '../actions/project';
const DashBoardDev = ({ projects = [], ...props }) => {
useEffect(() => {
props.dispatch(projectList())
}, [])
props.dispatch(projectList());
}, []);
projects = [
{
id: 1,
@ -78,7 +78,7 @@ const DashBoardDev = ({ projects = [], ...props }) => {
]
},
]
];
return (
<Page title="dashBoard dev">
<div className="notification">
@ -87,11 +87,11 @@ const DashBoardDev = ({ projects = [], ...props }) => {
<ProjectList projects={projects} />
</Page>
);
}
};
const mapStateToProps = ({ project }) => ({
projects: project.items,
})
});
export default connect(mapStateToProps)(DashBoardDev)
export default connect(mapStateToProps)(DashBoardDev);

62
frontend/src/pages/home.js
View File

@ -1,4 +1,4 @@
import React from 'react'
import React from 'react';
import Page from './page';
import { ExtendedUserForm as UserForm } from '../components/UserForm';
import { connect } from 'react-redux';
@ -6,45 +6,45 @@ import { createUser } from '../actions/user.actions';
export class HomePage extends React.PureComponent {
render() {
render() {
const { createUserFormError } = this.props;
const { createUserFormError } = this.props;
const onUserFormSubmit = ({ username, password }) => {
this.props.dispatch(createUser(username, password));
};
this.props.dispatch(createUser(username, password));
};
return (
<Page title="home">
<div className="section">
<h1 className="title">Bienvenue sur PleaseWait !</h1>
<h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
<a href="#/logout">Se déconnecter</a>
<UserForm onSubmit={onUserFormSubmit} errors={createUserFormError} />
</div>
</Page>
);
}
return (
<Page title="home">
<div className="section">
<h1 className="title">Bienvenue sur PleaseWait !</h1>
<h2 className="subtitle">Le gestionnaire de ticket simplifié.</h2>
<a href="#/logout">Se déconnecter</a>
<UserForm onSubmit={onUserFormSubmit} errors={createUserFormError} />
</div>
</Page>
);
}
}
function transformErrorCode(code) {
switch (code) {
case 0:
return {
username: {
hasError: true,
message: "Le nom d'utilisateur ne peut pas être vide. (API)"
}
}
default:
return null;
}
switch (code) {
case 0:
return {
username: {
hasError: true,
message: 'Le nom d\'utilisateur ne peut pas être vide. (API)'
}
};
default:
return null;
}
}
function mapStateToProps({ users }) {
return {
createUserFormError: transformErrorCode(users.createUserForm.errorCode),
}
return {
createUserFormError: transformErrorCode(users.createUserForm.errorCode),
};
}
export const ConnectedHomePage = connect(mapStateToProps)(HomePage)
export const ConnectedHomePage = connect(mapStateToProps)(HomePage);

6
frontend/src/pages/login.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect } from 'react';
import { ConnectedPage as Page } from './page';
import { login } from '../actions/auth.actions';
import { connect } from 'react-redux';
@ -13,10 +13,10 @@ export function LoginPage({ dispatch, isLoggedIn, history }) {
evt.preventDefault();
const { username, password } = formData;
dispatch(login(username, password));
}
};
useEffect(() => {
if (isLoggedIn) history.push('/home');
if (isLoggedIn) history.push('/home');
}, [isLoggedIn]);
return (

4
frontend/src/pages/logout.js
View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'
import React, { useEffect } from 'react';
import { logout } from '../actions/auth.actions';
import { connect } from 'react-redux';
import { ConnectedPage as Page } from './page';
@ -16,7 +16,7 @@ export function LogoutPage({ dispatch }) {
</div>
</div>
</Page>
)
);
}
export const ConnectedLogoutPage = connect()(LogoutPage);

36
frontend/src/pages/page.js
View File

@ -1,33 +1,33 @@
import React, { useEffect } from 'react'
import React, { useEffect } from 'react';
import { MessageList } from '../components/message-list';
import { connect } from 'react-redux';
import { removeOldestMessage } from '../actions/message.actions';
export default function Page({ title, messages, dispatch, children }) {
useEffect(() => {
document.title = title ? `${title } - PleaseWait` : 'PleaseWait';
});
useEffect(() => {
document.title = title ? `${title } - PleaseWait` : 'PleaseWait';
});
useEffect(() => {
if (!Array.isArray(messages) || messages.length === 0) return;
useEffect(() => {
if (!Array.isArray(messages) || messages.length === 0) return;
let timeoutId = setTimeout(() => {
dispatch(removeOldestMessage());
}, 5000);
let timeoutId = setTimeout(() => {
dispatch(removeOldestMessage());
}, 5000);
return () => clearTimeout(timeoutId);
}, [messages])
return () => clearTimeout(timeoutId);
}, [messages]);
return (
<div className="container">
<MessageList messages={messages} />
{ children }
</div>
);
return (
<div className="container">
<MessageList messages={messages} />
{ children }
</div>
);
}
function mapStateToProps(state) {
return { messages: state.messages.sortedByTimestamp };
return { messages: state.messages.sortedByTimestamp };
}
export const ConnectedPage = connect(mapStateToProps)(Page);

20
frontend/src/reducers/messages.reducers.js
View File

@ -1,4 +1,4 @@
import { ADD_MESSAGE, REMOVE_OLDEST_MESSAGE } from "../actions/message.actions";
import { ADD_MESSAGE, REMOVE_OLDEST_MESSAGE } from '../actions/message.actions';
const initialState = {
sortedByTimestamp: []
@ -6,11 +6,11 @@ const initialState = {
export function messagesReducer(state = initialState, action) {
switch(action.type) {
case ADD_MESSAGE:
return handleAddMessage(state, action);
case REMOVE_OLDEST_MESSAGE:
return handleRemoveOldestMessage(state, action);
};
case ADD_MESSAGE:
return handleAddMessage(state, action);
case REMOVE_OLDEST_MESSAGE:
return handleRemoveOldestMessage(state, action);
}
return state;
}
@ -21,12 +21,12 @@ function handleAddMessage(state, action) {
{ ts: Date.now(), text: action.text, type: action.messageType },
...state.sortedByTimestamp
]
}
};
};
}
function handleRemoveOldestMessage(state, action) {
return {
...state,
sortedByTimestamp: state.sortedByTimestamp.slice(0, -1)
}
};
};
}

14
frontend/src/reducers/project.js
View File

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

20
frontend/src/reducers/session.reducers.js
View File

@ -1,4 +1,4 @@
import { LOGIN_SUCCESS, LOGOUT_SUCCESS } from "../actions/auth.actions";
import { LOGIN_SUCCESS, LOGOUT_SUCCESS } from '../actions/auth.actions';
const initialState = {
isLoggedIn: false,
@ -7,11 +7,11 @@ const initialState = {
export function sessionReducer(state = initialState, action) {
switch(action.type) {
case LOGIN_SUCCESS:
return handleLoginSuccess(state, action);
case LOGOUT_SUCCESS:
return handleLogoutSuccess(state, action);
};
case LOGIN_SUCCESS:
return handleLoginSuccess(state, action);
case LOGOUT_SUCCESS:
return handleLogoutSuccess(state, action);
}
return state;
}
@ -22,13 +22,13 @@ function handleLoginSuccess(state, action) {
user: {
username: action.username,
},
}
};
};
}
function handleLogoutSuccess(state, action) {
return {
...state,
isLoggedIn: false,
user: null,
}
};
};
}

8
frontend/src/reducers/users.reducers.js
View File

@ -1,4 +1,4 @@
import { CREATE_USER_FAILURE } from "../actions/user.actions";
import { CREATE_USER_FAILURE } from '../actions/user.actions';
const initialState = {
byId: {},
@ -7,9 +7,9 @@ const initialState = {
export function usersReducer(state = initialState, action) {
switch(action.type) {
case CREATE_USER_FAILURE:
return handleCreateUserFailure(state, action);
};
case CREATE_USER_FAILURE:
return handleCreateUserFailure(state, action);
}
return state;
}

8
frontend/src/sagas/auth/login.saga.js
View File

@ -11,20 +11,20 @@ export function* loginSaga(action) {
result = yield call(client.login, action.username, action.password);
} catch(err) {
if (err instanceof UnauthorizedError) {
yield put(addMessage('warning', "Identifiants invalides."));
yield put(addMessage('warning', 'Identifiants invalides.'));
return;
}
yield put(loginFailure(action.username, err));
yield put(addMessage('danger', "Une erreur inconnue bloque le fonctionnement normal de l'application. Veuillez réessayer plus tard."));
return
yield put(addMessage('danger', 'Une erreur inconnue bloque le fonctionnement normal de l\'application. Veuillez réessayer plus tard.'));
return;
}
if ('error' in result) {
yield put(loginFailure(action.username, result.error));
const message = result.error.message ? result.error.message : result.error.toString();
yield put(addMessage('danger', message));
return
return;
}
yield put(loginSuccess(action.username));

6
frontend/src/sagas/auth/logout-redirect.saga.js
View File

@ -1,8 +1,8 @@
import { history } from "../../util/history";
import { history } from '../../util/history';
import { addMessage } from '../../actions/message.actions';
import { put } from 'redux-saga/effects';
export function* logoutRedirectSaga() {
yield put(addMessage("success", "Vous êtes déconnecté."));
history.push('/login');
yield put(addMessage('success', 'Vous êtes déconnecté.'));
history.push('/login');
}

10
frontend/src/sagas/auth/logout.saga.js
View File

@ -1,6 +1,6 @@
import { APIClient } from "../../services/api-client.service";
import { logoutFailure, logoutSuccess } from "../../actions/auth.actions";
import { addMessage } from "../../actions/message.actions";
import { APIClient } from '../../services/api-client.service';
import { logoutFailure, logoutSuccess } from '../../actions/auth.actions';
import { addMessage } from '../../actions/message.actions';
import { call, put } from 'redux-saga/effects';
export function* logoutSaga() {
@ -10,7 +10,7 @@ export function* logoutSaga() {
result = yield call(client.logout);
} catch(err) {
yield put(logoutFailure(err));
yield put(addMessage('danger', "Une erreur inconnue bloque le fonctionnement normal de l'application. Veuillez réessayer plus tard."));
yield put(addMessage('danger', 'Une erreur inconnue bloque le fonctionnement normal de l\'application. Veuillez réessayer plus tard.'));
return;
}
@ -18,7 +18,7 @@ export function* logoutSaga() {
yield put(logoutFailure(result.error));
const message = result.error.message ? result.error.message : result.error.toString();
yield put(addMessage('danger', message));
return
return;
}
yield put(logoutSuccess());

18
frontend/src/sagas/auth/root.saga.js
View File

@ -1,14 +1,14 @@
import { LOGIN_REQUEST, LOGOUT_REQUEST, LOGOUT_SUCCESS } from "../../actions/auth.actions";
import { loginSaga } from "./login.saga";
import { logoutSaga } from "./logout.saga";
import { logoutRedirectSaga } from "./logout-redirect.saga";
import { LOGIN_REQUEST, LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../../actions/auth.actions';
import { loginSaga } from './login.saga';
import { logoutSaga } from './logout.saga';
import { logoutRedirectSaga } from './logout-redirect.saga';
import { all, takeLatest } from 'redux-saga/effects';
export function * rootSaga() {
yield all([
yield all([
takeLatest(LOGIN_REQUEST, loginSaga),
takeLatest(LOGOUT_REQUEST, logoutSaga),
// Redirect after logout success
takeLatest(LOGOUT_SUCCESS, logoutRedirectSaga),
]);
takeLatest(LOGOUT_REQUEST, logoutSaga),
// Redirect after logout success
takeLatest(LOGOUT_SUCCESS, logoutRedirectSaga),
]);
}

8
frontend/src/sagas/failure/root.saga.js
View File

@ -1,8 +1,8 @@
import { failureActionSaga } from "./failure.saga";
import { takeLatest, all } from "redux-saga/effects";
import { failureActionSaga } from './failure.saga';
import { takeLatest, all } from 'redux-saga/effects';
export function * rootSaga(action) {
yield all([
yield all([
takeLatest(action => /_FAILURE$/g.test(action.type), failureActionSaga),
]);
]);
}

8
frontend/src/sagas/init/root.saga.js
View File

@ -1,8 +1,8 @@
import { all } from 'redux-saga/effects';
import { checkSessionSaga } from './session.saga';
import { refreshSessionSaga } from './session.saga';
export function* rootSaga() {
yield all([
checkSessionSaga(),
]);
yield all([
refreshSessionSaga(),
]);
}

19
frontend/src/sagas/init/session.saga.js
View File

@ -1,11 +1,14 @@
import { APIClient } from '../../services/api-client.service';
import { call } from 'redux-saga/effects';
import { call, put } from 'redux-saga/effects';
import { refreshUserSessionFailure, refreshUserSessionSuccess } from '../../actions/auth.actions';
export function* checkSessionSaga() {
const client = new APIClient();
try {
yield call(client.retrieveSessionUser);
} catch(err) {
console.error(err);
}
export function* refreshSessionSaga() {
const client = new APIClient();
let user;
try {
user = yield call(client.retrieveSessionUser);
} catch(err) {
yield put(refreshUserSessionFailure(err));
}
yield put(refreshUserSessionSuccess(user));
}

20
frontend/src/sagas/project.js → frontend/src/sagas/project/project.saga.js
View File

@ -2,17 +2,17 @@ import { call, put } from 'redux-saga/effects';
import { projectUserListFailure, projectUserListSuccess, projectListFailure, projectListSuccess } from '../actions/project';
export function* projectUserListSaga() {
let result
let result;
try {
result = yield call(projectUserList);
} catch(err) {
yield put(projectUserListFailure(err));
return
return;
}
if ('error' in result) {
yield put(projectUserListFailure(result.error));
return
return;
}
yield put(projectUserListSuccess(result.data));
@ -23,22 +23,22 @@ const projectUserList = () => {
method: 'GET',
mode: 'cors',
credentials: 'include'
}).then(res => res.json())
}
}).then(res => res.json());
};
export function* projectListSaga() {
let result
let result;
try {
result = yield call(projectList);
} catch(err) {
yield put(projectListFailure(err));
return
return;
}
if ('error' in result) {
yield put(projectListFailure(result.error));
return
return;
}
yield put(projectListSuccess(result.data));
@ -49,5 +49,5 @@ const projectList = () => {
method: 'GET',
mode: 'cors',
credentials: 'include'
}).then(res => res.json())
}
}).then(res => res.json());
};

12
frontend/src/sagas/root.js
View File

@ -5,10 +5,10 @@ import { rootSaga as initRootSaga } from './init/root.saga';
import { rootSaga as userRootSaga } from './user/root.saga';
export default function* rootSaga() {
yield all([
initRootSaga(),
authRootSaga(),
failureRootSaga(),
userRootSaga()
]);
yield all([
initRootSaga(),
authRootSaga(),
failureRootSaga(),
userRootSaga()
]);
}

6
frontend/src/sagas/user/root.saga.js
View File

@ -3,7 +3,7 @@ import { CREATE_USER_REQUEST } from '../../actions/user.actions';
import { createUserSaga } from './user.saga';
export function* rootSaga() {
yield all([
takeLatest(CREATE_USER_REQUEST, createUserSaga),
]);
yield all([
takeLatest(CREATE_USER_REQUEST, createUserSaga),
]);
}

2
frontend/src/sagas/user/user.saga.js
View File

@ -10,7 +10,7 @@ export function* createUserSaga({username, password}) {
} catch(err) {
console.error(err);
yield put(createUserFailure(err));
return
return;
}
yield put(createUserSuccess(user));

114
frontend/src/services/api-client.service.js
View File

@ -5,82 +5,82 @@ export const UnauthorizedStatusCode = 401;
export class APIClient {
constructor(baseURL = 'http://localhost:8001/api/v1') {
this.baseURL = baseURL;
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.retrieveSessionUser = this.retrieveSessionUser.bind(this);
this.listUsers = this.listUsers.bind(this);
this.listRequests = this.listRequests.bind(this);
this.createUser = this.createUser.bind(this);
this.baseURL = baseURL;
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.retrieveSessionUser = this.retrieveSessionUser.bind(this);
this.listUsers = this.listUsers.bind(this);
this.listRequests = this.listRequests.bind(this);
this.createUser = this.createUser.bind(this);
}
login(username, password) {
login(username, password) {
return this._callAPI('/login', { username, password }, 'POST')
.then(result => result.data);
}
}
logout() {
return this._callAPI('/logout')
}
logout() {
return this._callAPI('/logout');
}
retrieveSessionUser() {
return this._callAPI('/me')
.then(result => result.data);
}
retrieveSessionUser() {
return this._callAPI('/me')
.then(result => result.data);
}
listUsers() {
return this._callAPI('/users')
}
listUsers() {
return this._callAPI('/users');
}
listRequests() {
listRequests() {
}
}
createRequest(request) {
createRequest(request) {
}
}
createUser(username, password) {
return this._callAPI('/users', { username, password }, 'POST')
.then(this._withAPIErrorMiddleware('create_user'))
.then(result => result.data);
}
createUser(username, password) {
return this._callAPI('/users', { username, password }, 'POST')
.then(this._withAPIErrorMiddleware('create_user'))
.then(result => result.data);
}
updateRequestStatus(reqID, newStatus) {
updateRequestStatus(reqID, newStatus) {
}
}
_callAPI(path, body, method='GET') {
_callAPI(path, body, method='GET') {
return fetch(this.baseURL + path, {
method,
headers: {
'Content-Type': 'application/json',
},
mode: 'cors',
credentials: 'include',
body: JSON.stringify(body),
method,
headers: {
'Content-Type': 'application/json',
},
mode: 'cors',
credentials: 'include',
body: JSON.stringify(body),
})
.then(this._withUnauthorizedErrorMiddleware())
.then(res => res.json())
}
.then(res => res.json());
}
_withUnauthorizedErrorMiddleware() {
return res => {
if (res.status === UnauthorizedStatusCode) {
throw new UnauthorizedError();
}
return res;
}
}
_withUnauthorizedErrorMiddleware() {
return res => {
if (res.status === UnauthorizedStatusCode) {
throw new UnauthorizedError();
}
return res;
};
}
_withAPIErrorMiddleware(endpoint) {
return result => {
if (result.error) {
const { code, message, data } = result.error;
throw new APIError(endpoint, code, message, data);
}
return result;
}
}
_withAPIErrorMiddleware(endpoint) {
return result => {
if (result.error) {
const { code, message, data } = result.error;
throw new APIError(endpoint, code, message, data);
}
return result;
};
}
}

20
frontend/src/store/store.js
View File

@ -1,18 +1,18 @@
import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootSaga from '../sagas/root'
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/root';
import { sessionReducer } from '../reducers/session.reducers';
import { messagesReducer } from '../reducers/messages.reducers';
import project from '../reducers/project'
import project from '../reducers/project';
import { usersReducer } from '../reducers/users.reducers';
const sagaMiddleware = createSagaMiddleware()
const sagaMiddleware = createSagaMiddleware();
const rootReducer = combineReducers({
session: sessionReducer,
messages: messagesReducer,
project,
users: usersReducer,
session: sessionReducer,
messages: messagesReducer,
project,
users: usersReducer,
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@ -24,7 +24,7 @@ export function configureStore(initialState = {}) {
composeEnhancers(
applyMiddleware(sagaMiddleware)
)
)
);
sagaMiddleware.run(rootSaga);
return store;
}