Merge pull request #2 from HelinaBerhane/delete

Delete

api-types/index.ts

@@ -7,6 +7,7 @@ export { CancelablePromise, CancelError } from './core/CancelablePromise';
 export { OpenAPI } from './core/OpenAPI';
 export type { OpenAPIConfig } from './core/OpenAPI';
 
+export type { DeleteTaskRequest } from './models/DeleteTaskRequest';
 export type { GetTasksResponse } from './models/GetTasksResponse';
 export type { HTTPValidationError } from './models/HTTPValidationError';
 export type { TaskModel } from './models/TaskModel';

api-types/models/DeleteTaskRequest.ts

@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type DeleteTaskRequest = {
+    task_id: string;
+};
+

api-types/services/TasksService.ts

@@ -2,6 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { DeleteTaskRequest } from '../models/DeleteTaskRequest';
 import type { GetTasksResponse } from '../models/GetTasksResponse';
 import type { ToggleTaskCompleteRequest } from '../models/ToggleTaskCompleteRequest';
 import type { UpdateTaskRequest } from '../models/UpdateTaskRequest';
@@ -64,4 +65,24 @@ export class TasksService {
         });
     }
 
+    /**
+     * Delete Task
+     * @param requestBody
+     * @returns any Successful Response
+     * @throws ApiError
+     */
+    public static deleteTask(
+        requestBody: DeleteTaskRequest,
+    ): CancelablePromise<any> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/api/tasks/delete',
+            body: requestBody,
+            mediaType: 'application/json',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
+
 }

api/demo_tasks.py

@@ -67,11 +67,11 @@ def populate_demo_tasks(task_list, info):
     ),
     (
         'Delete Tasks - back end - endpoints',
-        None,
+        datetime(2023, 9, 20, 11, 53, tzinfo=timezone.utc),
     ),
     (
         'Delete Tasks - front end - full implementation',
-        None,
+        datetime(2023, 9, 20, 11, 53, tzinfo=timezone.utc),
     ),
     (
         'Persisting Tasks',
@@ -101,6 +101,22 @@ def populate_demo_tasks(task_list, info):
         'Local DB for offline use',
         None,
     ),
+    (
+        'consider using elasticsearch for read heavy parts of the code',
+        None,
+    ),
+    (
+        'consider using a graph database for relationship heavy parts of the code',
+        None,
+    ),
+    (
+        'read about using recursive queries for relationship heavy parts of the code https://www.postgresql.org/docs/current/queries-with.html',
+        None,
+    ),
+    (
+        'read about using ltree for hierarchy heavy parts of the code https://www.postgresql.org/docs/current/ltree.html',
+        None,
+    ),
 ]
 
 demo_tasks = TaskList()

api/router.py

@@ -61,3 +61,15 @@ async def toggle_task_complete(
     if task is None:
         raise Exception
     task.completed = request.completed
+
+
+# Delete
+class DeleteTaskRequest(BaseModel):
+    task_id: UUID
+
+
+@router.post("/tasks/delete")
+async def delete_task(
+    request: DeleteTaskRequest,
+) -> None:
+    demo_tasks.delete_task(request.task_id)

api/tasks.py

@@ -67,3 +67,10 @@ def get_task(
                     return task
         except IndexError:
             return
+
+    # Delete
+    def delete_task(
+        self,
+        task_id: UUID,
+    ) -> None:
+        self.tasks = [t for t in self.tasks if t.id != task_id]

client/app.tsx

@@ -55,6 +55,14 @@ export const App = () => {
               .then((response) => response.tasks)
               .then(setTasks);
           }}
+          onDelete={(task) => {
+            TasksService.deleteTask({
+              task_id: task.id,
+            })
+              .then(TasksService.getTasks)
+              .then((response) => response.tasks)
+              .then(setTasks);
+          }}
           tasks={tasks}
         />
       )}

client/components/Button.tsx

@@ -1,16 +1,15 @@
 import styled from "styled-components";
 
 import {
-  white,
-  slate100,
+  slate200,
   slate300,
-  indigo100,
+  slate800,
+  indigo200,
   indigo300,
-  indigo700,
-  rose50,
-  rose400,
-  rose700,
-  slate900,
+  indigo800,
+  rose200,
+  rose300,
+  rose800,
 } from "../constants";
 
 export interface ButtonProps {
@@ -31,22 +30,22 @@ export const Button = styled.button<ButtonProps>`
   color: ${(props) => {
     switch (props.variant) {
       case "primary":
-        return props.disabled ? indigo300 : indigo100;
+        return props.disabled ? indigo300 : indigo200;
       case "danger":
-        return props.disabled ? rose50 : white;
+        return props.disabled ? rose300 : rose200;
       default:
-        return props.disabled ? slate300 : slate100;
+        return props.disabled ? slate300 : slate200;
     }
   }};
 
   background-color: ${(props) => {
     switch (props.variant) {
       case "primary":
-        return props.disabled ? indigo100 : indigo700;
+        return props.disabled ? indigo200 : indigo800;
       case "danger":
-        return props.disabled ? rose400 : rose700;
+        return props.disabled ? rose200 : rose800;
       default:
-        return slate900;
+        return props.disabled ? slate200 : slate800;
     }
   }};
 

client/components/ProgressBar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { transparentColour, slate100, rose800 } from "../constants";
+import { transparent, slate100, rose800 } from "../constants";
 
 const Bar = styled.progress`
   width: 100%;
@@ -10,7 +10,7 @@ const Bar = styled.progress`
   This exists only to break out of the default style
   without actually adding a visible background 
   */
-  background-color: ${transparentColour};
+  background-color: ${transparent};
 
   &::-webkit-progress-bar {
     background-color: ${slate100};

client/components/TaskList.tsx

@@ -16,12 +16,14 @@ const List = styled.div`
 export interface TaskListProps {
   tasks: TaskModel[];
   onToggleComplete?: (task: TaskModel) => void;
+  onDelete?: (task: TaskModel) => void;
   onEditTaskTitle?: (task: TaskModel, newTitle: string) => void;
 }
 
 export const TaskList = ({
   tasks,
   onToggleComplete,
+  onDelete,
   onEditTaskTitle,
 }: TaskListProps) => {
   const [animationParent] = useAutoAnimate();
@@ -30,6 +32,7 @@ export const TaskList = ({
       {tasks.map((task) => (
         <TaskListItem
           onToggleComplete={() => onToggleComplete?.(task)}
+          onDelete={() => onDelete?.(task)}
           onEdit={(newName) => onEditTaskTitle?.(task, newName)}
           key={task.id}
           task={task}

client/components/TaskListItem.tsx

@@ -4,7 +4,9 @@ import styled from "styled-components";
 import { TaskModel } from "../../api-types/models/TaskModel";
 
 import { IconButton } from "../icons/Icon";
-import { slate100, blackFaded } from "../constants";
+import { slate100, blackTransparent } from "../constants";
+
+import { Button } from "./Button";
 
 const Container = styled.div<{ hasFocus: boolean }>`
   display: flex;
@@ -55,18 +57,20 @@ const Text = styled.input<{ isCompleted: boolean }>`
   width: auto;
   outline: none;
 
-  ${(props) => props.isCompleted && `color: ${blackFaded}`}
+  ${(props) => props.isCompleted && `color: ${blackTransparent}`}
 `;
 
 export interface TaskListItemProps {
   task: TaskModel;
   onToggleComplete?: () => void;
+  onDelete?: () => void;
   onEdit?: (newName: string) => void;
 }
 
 export const TaskListItem = ({
   task,
   onToggleComplete,
+  onDelete,
   onEdit,
 }: TaskListItemProps) => {
   const ref = useRef<HTMLInputElement>(null);
@@ -88,6 +92,9 @@ export const TaskListItem = ({
         value={task.name}
         onChange={(e) => onEdit?.(e.target.value)}
       />
+      <Button variant="danger" onClick={onDelete}>
+        Delete
+      </Button>
       <IconButton
         onClick={onToggleComplete}
         type={task.completed ? "circle.checked" : "circle"}