Merge branch 'develop' into dist/ubuntu/bionic/develop

This commit is contained in:
wpetit 2020-10-13 13:49:05 +02:00
commit 81b2a38d27
6 changed files with 24 additions and 80 deletions

View File

@ -2,6 +2,8 @@ import React, { FunctionComponent } from "react";
export const AppLoader:FunctionComponent = () => { export const AppLoader:FunctionComponent = () => {
return ( return (
<div className="loader"></div> <div className="app-loader">
<i className="fas fa-spinner fa-spin fa-5x"></i>
</div>
) )
} }

View File

@ -1,6 +1,5 @@
import React, { FunctionComponent, useState, useEffect } from "react"; import React, { FunctionComponent, useState, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { WithLoader } from "./WithLoader";
export interface Item { export interface Item {
id: string id: string

View File

@ -2,19 +2,16 @@ import React from 'react';
import { Page } from '../Page'; import { Page } from '../Page';
import { UserForm } from '../UserForm'; import { UserForm } from '../UserForm';
import { User } from '../../types/user'; import { User } from '../../types/user';
import { useUserProfileQuery } from '../../gql/queries/profile'; import { useUserProfile } from '../../gql/queries/profile';
import { useUpdateUserProfileMutation } from '../../gql/mutations/profile'; import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
import { WithLoader } from '../WithLoader';
export function ProfilePage() { export function ProfilePage() {
const userProfileQuery = useUserProfileQuery(); const { user, loading } = useUserProfile();
const [ updateProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation(); const [ updateProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation();
const isLoading = updateUserProfileMutation.loading || userProfileQuery.loading; const isLoading = updateUserProfileMutation.loading || loading;
const { userProfile } = (userProfileQuery.data || {});
const onUserChange = (user: User) => { const onUserChange = (user: User) => {
if (userProfile.name !== user.name) { if (user.name !== user.name) {
updateProfile({ variables: {changes: { name: user.name }}}); updateProfile({ variables: {changes: { name: user.name }}});
} }
}; };
@ -27,11 +24,7 @@ export function ProfilePage() {
<div className="column is-6 is-offset-3"> <div className="column is-6 is-offset-3">
<div className="box"> <div className="box">
<h2 className="is-size-2 subtitle">Mon profil</h2> <h2 className="is-size-2 subtitle">Mon profil</h2>
<WithLoader loading={isLoading || !userProfile}> <UserForm onChange={onUserChange} user={user} />
{
<UserForm onChange={onUserChange} user={userProfile} />
}
</WithLoader>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,18 +0,0 @@
import React, { Fragment, PropsWithChildren, FunctionComponent } from 'react';
export interface WithLoaderProps {
loading?: boolean|boolean[]
}
export const WithLoader: FunctionComponent<WithLoaderProps> = ({ loading, children }) => {
const isLoading = Array.isArray(loading) ? loading.some(l => l) : loading;
return (
<Fragment>
{
isLoading ?
<div>Chargement</div> :
children
}
</Fragment>
)
}

View File

@ -1,8 +1,6 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent } from 'react';
import { User } from '../../types/user';
import { Workgroup } from '../../types/workgroup'; import { Workgroup } from '../../types/workgroup';
import { InfoForm } from './InfoForm'; import { InfoForm } from './InfoForm';
import { WithLoader } from '../WithLoader';
import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups'; import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
@ -43,9 +41,7 @@ export const InfoPanel: FunctionComponent<InfoPanelProps> = ({ workgroup }) => {
Informations Informations
</p> </p>
<div className="panel-block"> <div className="panel-block">
<WithLoader loading={isLoading}> { !isLoading ? <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} /> : null }
<InfoForm workgroup={workgroup} onChange={onWorkgroupChange} />
</WithLoader>
</div> </div>
</nav> </nav>
); );

View File

@ -1,44 +1,16 @@
.loader-container { .app-loader {
@extend body;
display: flex; display: flex;
width: 100%;
justify-content: center;
height: 100%;
align-items: center;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
transform: scale(2);
}
.lds-ripple div {
position: absolute; position: absolute;
border: 4px solid $grey; z-index: 10000;
opacity: 1; top: 0;
border-radius: 50%; bottom: 0;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; left: 0;
right: 0;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
flex-direction: column;
} }
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}