mirror of
https://github.com/Unleash/unleash.git
synced 2024-10-23 20:07:40 +02:00
728477e238
* fix: setup new routes * fix: copy toggle * fix: link to correct project * fix: redirect oss to default * fix: update tests * fix: edit path * fix: remove invalid property * fix: add project to test data * fix: update paths to use features * fix: update test data * fix: update snapshots * fix: only show button to add toggle if you have access * fix: change heading * fix: use new route * fix: archive view * fix: update snapshots * fix: sorting headers * fix: list headers * fix: only show span if revive is present * fix: add border to list * fix: update snapshots * fix: remove console log
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
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';
|
|
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';
|
|
import { getProjectEditPath } from '../../../utils/route-path-helpers';
|
|
|
|
const Project = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const params = useQueryParams();
|
|
const { project, error, loading, refetch } = useProject(id);
|
|
const ref = useLoading(loading);
|
|
const { toast, setToastData } = useToast();
|
|
const { members, features, health } = project;
|
|
const commonStyles = useCommonStyles();
|
|
const styles = useStyles();
|
|
|
|
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 */
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
<h1 data-loading className={commonStyles.title}>
|
|
{project?.name}{' '}
|
|
<IconButton component={Link} to={getProjectEditPath(id)}>
|
|
<Edit />
|
|
</IconButton>
|
|
</h1>
|
|
<ConditionallyRender
|
|
condition={error}
|
|
show={
|
|
<ApiError
|
|
data-loading
|
|
style={{ maxWidth: '400px', marginTop: '1rem' }}
|
|
onClick={refetch}
|
|
text="Could not fetch project"
|
|
/>
|
|
}
|
|
/>
|
|
<div className={styles.containerStyles}>
|
|
<ProjectInfo
|
|
id={id}
|
|
memberCount={members}
|
|
health={health}
|
|
featureCount={features?.length}
|
|
/>
|
|
<ProjectFeatureToggles features={features} loading={loading} />
|
|
</div>
|
|
{toast}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Project;
|