- Made progress towards task detail view

api/serializers.py

@@ -21,7 +21,8 @@ def create(self, validated_data):
         return project
 
 class TasksSerializer(serializers.ModelSerializer):
-    project = serializers.PrimaryKeyRelatedField(queryset=Projects.objects.all())
+    project = ProjectsSerializer(read_only=True)
+    project_id = serializers.PrimaryKeyRelatedField(queryset=Projects.objects.all(), source='project')
     class Meta:
         model = Tasks
         fields = '__all__'

api/views.py

@@ -92,6 +92,15 @@ def get_queryset(self):
             return Tasks.objects.filter(project=project_id)
         else:
             return []
+    def create(self, request, *args, **kwargs):
+        data = request.data.copy()
+        serializer = self.get_serializer(data=data)
+        if serializer.is_valid():
+            self.perform_create(serializer)
+            headers = self.get_success_headers(serializer.data)
+            return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers)
+        print(serializer.errors)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 class TasksUpdateDeleteView(generics.RetrieveUpdateDestroyAPIView):
     serializer_class = TasksSerializer
     permission_classes = [IsAuthenticated]

frontend/src/App.js

@@ -9,6 +9,7 @@ import { useProjectContext } from './Context/ProjectContext';
 import axios from 'axios';
 import Tasks from './Components/Tasks';
 import ProjectDetail from './Components/ProjectDetail';
+import TaskDetail from './Components/TaksDetail';
 
 function App() {
   const {setUser, setLogin, setToken} = useProjectContext();
@@ -41,6 +42,7 @@ function App() {
         <Route path='/projects' element={<Projects />} />
         <Route path='/tasks' element={<Tasks />} />
         <Route path='/project/:id' element={<ProjectDetail />} />
+        <Route path='/task/:id' element={<TaskDetail />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/Components/Navbar.js

@@ -41,7 +41,7 @@ export default function Navbar({ active }) {
             <nav className='nav'>
                 <Link to={'/'} className={active==='Home'?'active':''}>Home</Link>
                 <Link to='/projects' className={active==='Projects'?'active':''}>Projects</Link>
-                <Link to='/tasks' className={active==='Tasks'?'active':''}>Tasks</Link>
+                {/* <Link to='/tasks' className={active==='Tasks'?'active':''}>Tasks</Link> */}
                 {!login &&
                     (
                         <>

frontend/src/Components/ProjectDetail.js

@@ -11,9 +11,10 @@ import ProjectModal from "./ProjectModal";
 import TaskModal from "./TasksModal";
 import { MdDeleteOutline } from "react-icons/md";
 import DeleteModal from "./DeleteModal";
+import NotLoggedIn from "./NotLoggedIn";
 export default function ProjectDetail() {
     let {id} = useParams();
-    const {token} = useProjectContext();
+    const {token, login} = useProjectContext();
     const [project, setProject] = React.useState({});
     const [percent, setPercent] = React.useState(0);
     const [show, setShow] = React.useState(false);
@@ -132,6 +133,10 @@ export default function ProjectDetail() {
        calculateProgress();
     })
 
+    if (!login) {
+        return <NotLoggedIn />
+    }
+
 
     return(
         <div className="project-details-container page-container">
@@ -203,7 +208,7 @@ export default function ProjectDetail() {
                             <tbody>
                                 {
                                     tasks.map((task) => (
-                                        <tr key={task.id} className={getClassName(task.status)}>
+                                        <tr key={task.id} className={getClassName(task.status)} onClick={() => navigate(`/task/${task.id}`)}>
                                             <td colSpan={1}>{task.id}</td>
                                             <td colSpan={2}>{task.title}</td>
                                             <td colSpan={3}>{task.description}</td>

frontend/src/Components/TaksDetail.js

@@ -0,0 +1,56 @@
+import axios from "axios";
+
+import { useState, useEffects, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useProjectContext } from "../Context/ProjectContext";
+
+import Navbar from "./Navbar";
+import Footer from "./Footer";
+import NotLoggedIn from "./NotLoggedIn";
+
+export default function TaskDetail () {
+    const {id} = useParams();
+    const {token, login} = useProjectContext();
+    const [task, setTask] = useState({});
+    const [project, setProject] = useState({});
+
+    const fetchTaskData = async() => {
+        await axios.get(`http://127.0.0.1:8000/api/tasks/${id}/`, {
+            headers: {
+                Authorization: `Token ${token}`
+            }
+        })
+        .then(res => {
+            console.log(res.data);
+            setTask(res.data);
+        })
+        .catch(err => {
+            console.log(err);
+        })
+    }
+
+    useEffect(() => {
+        fetchTaskData();
+    }, [token])
+
+    if (!login) {
+        return <NotLoggedIn />
+    }
+    return (
+        <div className="page-container">
+            <Navbar />
+            <div className="container task-detail-container">
+                <div className="main-body">
+                    <header>
+                        <h1 className="pg-heading">{task.project.title}</h1>
+                        <p className="pg-heading-secondary">({task.title})</p>
+                    </header>
+                </div>
+                <aside className="proj-sidebar">
+                    <h2 className="sidebar-heading pg-heading">Project Info</h2>
+                </aside>
+            </div>
+            <Footer />
+        </div>
+    )
+}

frontend/src/Components/TasksModal.js

@@ -32,8 +32,9 @@ export default function TaskModal({ setShow, fetcher, title, description, start,
 
     const handleAddTask = (e) => {
         e.preventDefault();
+        console.log(projectId)
         const task = {
-            project: projectId,
+            project_id: projectId,
             title: taskTitle,
             description: taskDescription,
             start_date: startDate,

frontend/src/Components/components.css

@@ -835,4 +835,31 @@ select > option {
     background-color: #939292;
     color: #fff;
 }
-
+
+.pg-heading-secondary {
+    color: #686868;
+    font-size: 30px;
+    text-align: center;
+    font-weight: 500;
+    margin-top: 10px;
+}
+
+.proj-sidebar {
+    height: 100vh;
+    width: 20%;
+    background-color: #CD8D6B;
+}
+
+.task-detail-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.main-body {
+    flex: 1;
+}
+
+.sidebar-heading {
+    text-align: center;
+    font-size: 30px;
+}