2021-07-07 11:04:36 +02:00
|
|
|
import { useParams } from 'react-router';
|
|
|
|
import { useCommonStyles } from '../../../common.styles';
|
|
|
|
import useProject from '../../../hooks/api/getters/useProject/useProject';
|
|
|
|
import useLoading from '../../../hooks/useLoading';
|
|
|
|
import ApiError from '../../common/ApiError/ApiError';
|
|
|
|
import ConditionallyRender from '../../common/ConditionallyRender';
|
|
|
|
import ProjectFeatureToggles from './ProjectFeatureToggles/ProjectFeatureToggles';
|
|
|
|
import ProjectInfo from './ProjectInfo/ProjectInfo';
|
2021-07-16 15:41:54 +02:00
|
|
|
import { useStyles } from './Project.styles';
|
|
|
|
import { IconButton } from '@material-ui/core';
|
|
|
|
import { Edit } from '@material-ui/icons';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import useToast from '../../../hooks/useToast';
|
|
|
|
import useQueryParams from '../../../hooks/useQueryParams';
|
|
|
|
import { useEffect } from 'react';
|
2021-08-25 13:37:22 +02:00
|
|
|
import { getProjectEditPath } from '../../../utils/route-path-helpers';
|
2021-07-07 11:04:36 +02:00
|
|
|
|
|
|
|
const Project = () => {
|
|
|
|
const { id } = useParams<{ id: string }>();
|
2021-07-16 15:41:54 +02:00
|
|
|
const params = useQueryParams();
|
2021-07-07 11:04:36 +02:00
|
|
|
const { project, error, loading, refetch } = useProject(id);
|
|
|
|
const ref = useLoading(loading);
|
2021-07-16 15:41:54 +02:00
|
|
|
const { toast, setToastData } = useToast();
|
2021-07-07 11:04:36 +02:00
|
|
|
const { members, features, health } = project;
|
|
|
|
const commonStyles = useCommonStyles();
|
2021-07-16 15:41:54 +02:00
|
|
|
const styles = useStyles();
|
2021-07-07 11:04:36 +02:00
|
|
|
|
2021-07-16 15:41:54 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const created = params.get('created');
|
|
|
|
const edited = params.get('edited');
|
|
|
|
|
|
|
|
if (created || edited) {
|
|
|
|
const text = created ? 'Project created' : 'Project updated';
|
|
|
|
setToastData({
|
|
|
|
show: true,
|
|
|
|
type: 'success',
|
|
|
|
text,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
/* eslint-disable-next-line */
|
|
|
|
}, []);
|
2021-07-07 11:04:36 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div ref={ref}>
|
|
|
|
<h1 data-loading className={commonStyles.title}>
|
2021-07-16 15:41:54 +02:00
|
|
|
{project?.name}{' '}
|
2021-08-25 13:37:22 +02:00
|
|
|
<IconButton component={Link} to={getProjectEditPath(id)}>
|
2021-07-16 15:41:54 +02:00
|
|
|
<Edit />
|
|
|
|
</IconButton>
|
2021-07-07 11:04:36 +02:00
|
|
|
</h1>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={error}
|
|
|
|
show={
|
|
|
|
<ApiError
|
|
|
|
data-loading
|
|
|
|
style={{ maxWidth: '400px', marginTop: '1rem' }}
|
|
|
|
onClick={refetch}
|
|
|
|
text="Could not fetch project"
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
/>
|
2021-07-16 15:41:54 +02:00
|
|
|
<div className={styles.containerStyles}>
|
2021-07-07 11:04:36 +02:00
|
|
|
<ProjectInfo
|
|
|
|
id={id}
|
|
|
|
memberCount={members}
|
|
|
|
health={health}
|
|
|
|
featureCount={features?.length}
|
|
|
|
/>
|
|
|
|
<ProjectFeatureToggles features={features} loading={loading} />
|
|
|
|
</div>
|
2021-07-16 15:41:54 +02:00
|
|
|
{toast}
|
2021-07-07 11:04:36 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Project;
|