[ITG-64,ITG-41,ITG-42] Routing and GET task implementation

bode/bode/resources/tasks/api.py

@@ -2,6 +2,7 @@
 from flask.views import MethodView
 from flask_smorest import Blueprint
 from sqlalchemy.orm.exc import NoResultFound
+from sqlalchemy.exc import DataError
 
 from bode.models.task import Task
 from bode.resources.tasks.schemas import TaskSchema
@@ -23,6 +24,13 @@ def post(self, task_data):
 
 @blueprint.route("/<task_id>")
 class TasksById(MethodView):
+    @blueprint.response(200, TaskSchema)
+    def get(self, task_id):
+        try:
+            return Task.query.get(task_id) or abort(404)
+        except DataError:
+            abort(404)
+
     @blueprint.response(200, TaskSchema)
     def delete(self, task_id):
         try:

cabra/package.json

@@ -24,7 +24,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.28.1",
     "react-query": "^3.34.18",
-    "react-router": "^6.2.2",
+    "react-router-dom": "^6.3.0",
     "vite": "^2.6.14",
     "yup": "^0.32.11"
   },

cabra/src/App.tsx

@@ -1,26 +1,20 @@
 import { QueryClient, QueryClientProvider } from "react-query";
-import tw, { styled } from "twin.macro";
+import { Route, Routes } from "react-router-dom";
 
-import RandomGoat from "./components/RandomGoat";
-import TaskForm from "./components/TaskForm";
-import TasksList from "./components/TasksList";
+import HomePage from "./pages/Home";
+import NotFoundPage from "./pages/NotFound";
+import TaskDetailsPage from "./pages/TaskDetails";
 
 const queryClient = new QueryClient();
-const Container = styled.div`
-  ${tw`flex flex-col items-center h-screen py-10 overflow-auto max-h-screen`}
-  ${tw`bg-gradient-to-b from-blue-700 to-fuchsia-500`}
-`;
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <Container>
-        <div tw="w-[90%] max-w-xl space-y-6 relative z-10">
-          <TaskForm />
-          <TasksList />
-        </div>
-      </Container>
-      <RandomGoat />
+      <Routes>
+        <Route path="/" element={<HomePage />}></Route>
+        <Route path="/task/:id" element={<TaskDetailsPage />}></Route>
+        <Route path="*" element={<NotFoundPage />}></Route>
+      </Routes>
     </QueryClientProvider>
   );
 }

cabra/src/main.tsx

@@ -1,4 +1,5 @@
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 import GlobalStyles from "./styles/GlobalStyles";
 import ReactDOM from "react-dom";
 import { StrictMode } from "react";
@@ -10,7 +11,9 @@ axios.defaults.headers.common["Content-Type"] = "application/json";
 ReactDOM.render(
   <StrictMode>
     <GlobalStyles />
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
   document.getElementById("root")
 );

cabra/src/pages/Home.tsx

@@ -0,0 +1,18 @@
+import "twin.macro";
+
+import Layout from "./components/Layout";
+import RandomGoat from "./components/RandomGoat";
+import TaskForm from "./components/TaskForm";
+import TasksList from "./components/TasksList";
+
+export default function HomePage() {
+  return (
+    <Layout>
+      <div tw="w-[90%] max-w-xl space-y-6 relative z-10">
+        <TaskForm />
+        <TasksList />
+      </div>
+      <RandomGoat />
+    </Layout>
+  );
+}

cabra/src/pages/NotFound.tsx

@@ -0,0 +1,14 @@
+import "twin.macro";
+
+import Layout from "./components/Layout";
+import { Link } from "react-router-dom";
+import RandomGoat from "./components/RandomGoat";
+
+export default function NotFoundPage() {
+  return (
+    <Layout>
+      <Link to="/">Take me home</Link>
+      <RandomGoat />
+    </Layout>
+  );
+}

cabra/src/pages/TaskDetails.tsx

@@ -0,0 +1,36 @@
+import "twin.macro";
+
+import { useNavigate, useParams } from "react-router-dom";
+
+import { ITask } from "../types/task";
+import Layout from "./components/Layout";
+import Task from "./components/Task";
+import axios from "axios";
+import { useQuery } from "react-query";
+
+export default function TaskDetailsPage() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { data, isLoading } = useQuery(
+    ["task", id],
+    () => axios.get<ITask>(`/tasks/${id}`),
+    { onError: () => navigate("/not-found", { replace: true }), retry: 1 }
+  );
+
+  if (isLoading) return <Layout>Loading</Layout>;
+
+  return (
+    <Layout>
+      <button tw="text-purple-800 font-black" onClick={() => navigate(-1)}>
+        {"<"} go back
+      </button>
+      {data ? (
+        <div tw="w-[90%] max-w-xl space-y-6 relative z-10">
+          <Task task={data.data} detailsLink={false}></Task>
+        </div>
+      ) : (
+        <div>Loading</div>
+      )}
+    </Layout>
+  );
+}

cabra/src/pages/components/Layout.tsx

@@ -0,0 +1,8 @@
+import tw, { styled } from 'twin.macro';
+
+const Layout = styled.div`
+  ${tw`flex flex-col items-center h-screen py-10 overflow-auto max-h-screen`}
+  ${tw`bg-gradient-to-b from-blue-700 to-fuchsia-500`}
+`;
+
+export default Layout;

cabra/src/pages/components/Task.tsx

@@ -0,0 +1,26 @@
+import "twin.macro";
+
+import { ITask } from "../../types/task";
+import { Link } from "react-router-dom";
+
+interface Props {
+  task: ITask;
+  detailsLink: boolean;
+}
+
+export default function Task({ task, detailsLink }: Props) {
+  return (
+    <div tw="rounded-xl w-full bg-white shadow-2xl text-blue-800 text-xl p-4 md:text-2xl flex justify-between items-center">
+      {task.title}
+      {detailsLink ? (
+        <Link
+          tw="underline text-blue-600 text-lg hover:text-purple-800"
+          to={`/task/${task.id}` }
+          state={{ task }}
+        >
+          Details
+        </Link>
+      ) : null}
+    </div>
+  );
+}

cabra/src/components/TaskForm.tsx → cabra/src/pages/components/TaskForm.tsx

@@ -4,7 +4,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import tw, { styled } from "twin.macro";
 import { useMutation, useQueryClient } from "react-query";
 
-import { ITask } from "../types/task";
+import { ITask } from "../../types/task";
 import axios from "axios";
 import { yupResolver } from "@hookform/resolvers/yup";
 

cabra/src/components/TasksList.tsx → cabra/src/pages/components/TasksList.tsx

@@ -1,6 +1,6 @@
 import tw, { styled } from "twin.macro";
 
-import { ITask } from "../types/task";
+import { ITask } from "../../types/task";
 import Task from "./Task";
 import axios from "axios";
 import { useQuery } from "react-query";
@@ -20,7 +20,7 @@ export default function TasksList() {
   return (
     <Container>
       {tasks.map((task) => (
-        <Task key={task.id} task={task} />
+        <Task key={task.id} task={task} detailsLink />
       ))}
     </Container>
   );