Cadoles/daddy
Cadoles
/
daddy
19
0
Fork 0
Code Issues 16 Pull Requests Releases Wiki Activity

Gestion des groupes de travail #14

Manually merged
wpetit merged 7 commits from feature/workgroups into develop 2020-07-23 08:28:40 +02:00
Conversation 0 Commits 7 Files Changed 50 +62 -67
9 changed files with 62 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bc9aa1721a - Show all commits

2
client/src/components/App.tsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
import { HomePage } from './HomePage/HomePage';
import { ProfilePage } from './ProfilePage/ProfilePage';
import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
export class App extends React.Component {
render() {
@ -10,6 +11,7 @@ export class App extends React.Component {
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/profile" exact component={ProfilePage} />
<Route path="/workgroups/:id" exact component={WorkgroupPage} />
<Route component={() => <Redirect to="/" />} />
</Switch>
</BrowserRouter>

10
client/src/components/HomePage/HomePage.tsx
View File

@ -2,23 +2,18 @@ import React from 'react';
import { Page } from '../Page';
import { Dashboard } from './Dashboard';
import { useUserProfileQuery } from '../../gql/queries/profile';
import { Loader } from '../Loader';
import { WithLoader } from '../WithLoader';
export function HomePage() {
const { data, loading } = useUserProfileQuery();
if (loading) {
return (
<Loader />
);
}
const { userProfile } = (data || {});
return (
<Page title={userProfile ? 'Tableau de bord' : 'Accueil'}>
<div className="container is-fluid">
<section className="section">
<WithLoader loading={loading}>
{
userProfile ?
<Dashboard /> :
@ -30,6 +25,7 @@ export function HomePage() {
</div>
</div>
}
</WithLoader>
</section>
</div>
</Page>

58
client/src/components/HomePage/WorkgroupsPanel.tsx
View File

@ -4,7 +4,7 @@ import { User } from '../../types/user';
import { Link } from 'react-router-dom';
import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
import { useUserProfileQuery } from '../../gql/queries/profile';
import { Loader } from '../Loader';
import { WithLoader } from '../WithLoader';
export function WorkgroupsPanel() {
const workgroupsQuery = useWorkgroupsQuery();
@ -12,18 +12,14 @@ export function WorkgroupsPanel() {
const [ state, setState ] = useState({ selectedTab: 0 });
const isLoading = userProfileQuery.loading || workgroupsQuery.loading;
if (isLoading) {
return <Loader />;
}
let { data: { userProfile }} = userProfileQuery;
let { data: { workgroups }} = workgroupsQuery;
const { userProfile } = (userProfileQuery.data || {});
const { workgroups } = (workgroupsQuery.data || {});
const filterTabs = [
{
label: "Mes groupes",
filter: workgroups => workgroups.filter((wg: Workgroup) => {
return wg.members.some((u: User) => u.id === userProfile.id);
return wg.members.some((u: User) => u.id === (userProfile ? userProfile.id : ''));
})
},
{
@ -43,7 +39,7 @@ export function WorkgroupsPanel() {
let workgroupsItems = [];
workgroupsItems = filterTabs[state.selectedTab].filter(workgroups).map((wg: Workgroup) => {
workgroupsItems = filterTabs[state.selectedTab].filter(workgroups || []).map((wg: Workgroup) => {
return (
<Link to={`/workgroups/${wg.id}`} key={`wg-${wg.id}`} className="panel-block">
<span className="panel-icon">
@ -63,9 +59,9 @@ export function WorkgroupsPanel() {
</p>
</div>
<div className="level-right">
<button className="button level-item is-outlined is-info is-inverted">
<i className="icon fa fa-plus"></i>
</button>
<Link to="/workgroups/new" className="button level-item is-outlined is-info is-inverted">
<i className="icon fa fa-plus"></i>
</Link>
</div>
</div>
{/* <div className="panel-block">
@ -76,26 +72,28 @@ export function WorkgroupsPanel() {
</span>
</p>
</div> */}
<p className="panel-tabs">
<WithLoader loading={isLoading}>
<p className="panel-tabs">
{
filterTabs.map((tab, i) => {
return (
<a key={`workgroup-tab-${i}`}
onClick={selectTab.bind(null, i)}
className={i === state.selectedTab ? 'is-active' : ''}>
{tab.label}
</a>
)
})
}
</p>
{
filterTabs.map((tab, i) => {
return (
<a key={`workgroup-tab-${i}`}
onClick={selectTab.bind(null, i)}
className={i === state.selectedTab ? 'is-active' : ''}>
{tab.label}
</a>
)
})
workgroupsItems.length > 0 ?
workgroupsItems :
<a className="panel-block has-text-centered is-block">
<em>Aucun groupe dans cet catégorie pour l'instant.</em>
</a>
}
</p>
{
workgroupsItems.length > 0 ?
workgroupsItems :
<a className="panel-block has-text-centered is-block">
<em>Aucun groupe dans cet catégorie pour l'instant.</em>
</a>
}
</WithLoader>
</nav>
)
}

14
client/src/components/Loader.tsx
View File

@ -1,14 +0,0 @@
import React from 'react';
export class Loader extends React.Component {
render() {
return (
<div className="loader-container">
<div className="lds-ripple">
<div></div>
<div></div>
</div>
</div>
)
}
}

9
client/src/components/ProfilePage/ProfilePage.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect } from 'react';
import React from 'react';
import { Page } from '../Page';
import { UserForm } from '../UserForm';
import { Loader } from '../Loader';
import { User } from '../../types/user';
import { useUserProfileQuery } from '../../gql/queries/profile';
import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
@ -27,11 +26,9 @@ export function ProfilePage() {
<div className="columns">
<div className="column is-6 is-offset-3">
<h2 className="is-size-2 subtitle">Mon profil</h2>
<WithLoader loading={isLoading}>
<WithLoader loading={isLoading || !userProfile}>
{
userProfile ?
<UserForm onChange={onUserChange} user={userProfile} /> :
<Loader />
<UserForm onChange={onUserChange} user={userProfile} />
}
</WithLoader>
</div>

7
client/src/components/WithLoader.tsx
View File

@ -9,12 +9,7 @@ export const WithLoader: FunctionComponent<WithLoaderProps> = ({ loading, childr
<Fragment>
{
loading ?
<div className="loader-container">
<div className="lds-ripple">
<div></div>
<div></div>
</div>
</div> :
<div>Chargement</div> :
children
}
</Fragment>

22
client/src/components/WorkgroupPage/WorkgroupPage.tsx Normal file
View File

@ -0,0 +1,22 @@
import React, { useEffect } from 'react';
import { Page } from '../Page';
import { WithLoader } from '../WithLoader';
export function WorkgroupPage() {
return (
<Page title="Groupe de travail">
<div className="container is-fluid">
<section className="section">
<div className="columns">
<div className="column is-6 is-offset-3">
<h2 className="is-size-2 subtitle">Groupe de travail</h2>
<WithLoader loading={false}>
</WithLoader>
</div>
</div>
</section>
</div>
</Page>
);
}

5
client/src/gql/client.tsx
View File

@ -4,12 +4,11 @@ import { WebSocketLink } from "@apollo/client/link/ws";
import { RetryLink } from "@apollo/client/link/retry";
import { SubscriptionClient } from "subscriptions-transport-ws";
const subscriptionClient = new SubscriptionClient(Config.subscriptionEndpoint, {
reconnect: true
reconnect: true,
});
const link = new RetryLink().split(
const link = new RetryLink({attempts: {max: 2}}).split(
(operation) => operation.operationName === 'subscription',
new WebSocketLink(subscriptionClient),
new HttpLink({ uri: Config.graphQLEndpoint, credentials: 'include' })

2
client/src/gql/queries/profile.tsx
View File

@ -12,5 +12,5 @@ query userProfile {
}`;
export function useUserProfileQuery() {
return useQuery(QUERY_USER_PROFILE, { fetchPolicy: "network-only" });
return useQuery(QUERY_USER_PROFILE);
}