Implemented first draft of issue modal

client/src/components/Project/index.jsx

@@ -1,23 +1,48 @@
 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 [{ data, error, setLocalData: setLocalProjectData }] = useApi.get('/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} />
-      <Board project={project} setLocalProjectData={setLocalProjectData} />
+      <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>
   );
 };