#73: Detailed task FE BE

Introducing Detailed task page

app/web/src/App.js

@@ -10,6 +10,7 @@ import Settings from './components/pages/settings/Settings';
 import Login from './components/pages/auth/login/Login';
 import Register from './components/pages/auth/register/Register';
 import HandleSession from './components/pages/auth/HandleSession';
+import Task from './components/pages/task/Task';
 
 const App = () =>
 {
@@ -49,6 +50,7 @@ const App = () =>
 
 				<Routes>
 					<Route path='/' element={activeUser ? <Home /> : <Login />} />
+					<Route path='/task/*' element={activeUser ? <Task /> : <Login />} />
 					<Route path='/settings' element={activeUser ? <Settings /> : <Login />} />
 					<Route path='/auth/login' element={activeUser ? <Home /> : <Login />} />
 					<Route path='/auth/register' element={activeUser ? <Home /> : <Register />} />

app/web/src/components/pages/task/Task.js

@@ -0,0 +1,50 @@
+import { useSelector } from 'react-redux';
+import axios from 'axios';
+import Header from '../../layout/header/Header';
+
+const getTask = (tasks) =>
+{
+	const id = document.URL.split('/').pop();
+	let t;
+
+	if (tasks)
+	{
+		t = tasks[tasks.findIndex(t => t.id === Number.parseInt(id))];
+	}
+
+	if (t === undefined)
+	{
+		axios.get('http://localhost:8080/tasks/' + id)
+			 .then(res =>
+			 {
+				 if (res.status === 200 && res.data.status)
+				 {
+					 console.log(res.data)
+					 t = res.data
+				 }
+			 })
+			 .catch(e =>
+			 {
+				 console.warn(e)
+				 t = null;
+			 })
+	}
+
+	return t
+}
+const Task = () =>
+{
+
+	const task = getTask(useSelector(state => state.team.teamTasks));
+
+	console.log(task)
+
+	return <>
+		<Header
+			titleTxt={ '#' + task.id + ' / t' + task.teamId + ': ' + task.title }
+			subtitleTxt={ `Created by ` + task.creatorId + ' Created on: ' + task.createdDate }
+		/>
+	</>
+};
+
+export default Task;

app/web/src/components/ui/grid/GridController.js

@@ -13,7 +13,6 @@ const HomeController = () =>
 	const btoken = useSelector(state => state.user.btoken);
 	const status = useSelector(state => state.task.statusDefinition);
 
-
 	const getData = async (teamId) =>
 	{
 		axios.get('http://localhost:8080/tasks/team/' + ( teamId ?? -1 ),
@@ -28,7 +27,7 @@ const HomeController = () =>
 			 .catch(e => dispatch(teamActions.setTeamTasks([])));
 	};
 
-	const _handleClick = (id) => nav('tasks/' + id);
+	const _handleClick = (id) => nav('task/' + id);
 
 	const changeStatus = (e, id) =>
 	{