51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { Route, Redirect, useRouteMatch } from 'react-router-dom';
|
|
|
|
import useApi from 'shared/hooks/api';
|
|
import { updateArrayItemById } from 'shared/utils/javascript';
|
|
import { PageLoader, PageError } from 'shared/components';
|
|
import Sidebar from './Sidebar';
|
|
import Board from './Board';
|
|
import { ProjectPage } from './Styles';
|
|
|
|
const Project = () => {
|
|
const match = useRouteMatch();
|
|
const [{ data, error, setLocalData }, fetchProject] = useApi.get('/project');
|
|
|
|
const updateLocalIssuesArray = (issueId, updatedFields) => {
|
|
setLocalData(currentData => ({
|
|
project: {
|
|
...currentData.project,
|
|
issues: updateArrayItemById(data.project.issues, issueId, updatedFields),
|
|
},
|
|
}));
|
|
};
|
|
|
|
if (!data) return <PageLoader />;
|
|
if (error) return <PageError />;
|
|
|
|
const { project } = data;
|
|
|
|
const renderBoard = () => (
|
|
<Board
|
|
project={project}
|
|
fetchProject={fetchProject}
|
|
updateLocalIssuesArray={updateLocalIssuesArray}
|
|
/>
|
|
);
|
|
const renderSettings = () => <h1>SETTINGS</h1>;
|
|
const renderIssues = () => <h1>ISSUES</h1>;
|
|
|
|
return (
|
|
<ProjectPage>
|
|
<Sidebar projectName={project.name} matchPath={match.path} />
|
|
<Route path={`${match.path}/board`} render={renderBoard} />
|
|
<Route path={`${match.path}/settings`} render={renderSettings} />
|
|
<Route path={`${match.path}/issues`} render={renderIssues} />
|
|
{match.isExact && <Redirect to={`${match.url}/board`} />}
|
|
</ProjectPage>
|
|
);
|
|
};
|
|
|
|
export default Project;
|