feat: task list hifi! (#89)

* feat: task list hifi!

* fix: migrate BE changes

* fix: revert task services changes from main

backend/docs/docs.go

@@ -803,6 +803,45 @@ const docTemplate = `{
                 }
             }
         },
+        "/tasks/labels/tasks": {
+            "get": {
+                "description": "gets the information about multiple labals given their task id",
+                "tags": [
+                    "task labels"
+                ],
+                "summary": "gets the information about multiple labels",
+                "parameters": [
+                    {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        },
+                        "collectionFormat": "csv",
+                        "description": "Task IDs",
+                        "name": "taskIDs",
+                        "in": "query",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "type": "array",
+                            "items": {
+                                "$ref": "#/definitions/models.Task_Label"
+                            }
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/tasks/{tid}": {
             "get": {
                 "description": "get a task given its id",

backend/docs/swagger.json

@@ -796,6 +796,45 @@
                 }
             }
         },
+        "/tasks/labels/tasks": {
+            "get": {
+                "description": "gets the information about multiple labals given their task id",
+                "tags": [
+                    "task labels"
+                ],
+                "summary": "gets the information about multiple labels",
+                "parameters": [
+                    {
+                        "type": "array",
+                        "items": {
+                            "type": "string"
+                        },
+                        "collectionFormat": "csv",
+                        "description": "Task IDs",
+                        "name": "taskIDs",
+                        "in": "query",
+                        "required": true
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "schema": {
+                            "type": "array",
+                            "items": {
+                                "$ref": "#/definitions/models.Task_Label"
+                            }
+                        }
+                    },
+                    "400": {
+                        "description": "Bad Request",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/tasks/{tid}": {
             "get": {
                 "description": "get a task given its id",

backend/docs/swagger.yaml

@@ -987,6 +987,32 @@ paths:
       summary: Get Filtered Tasks
       tags:
       - tasks
+  /tasks/labels/tasks:
+    get:
+      description: gets the information about multiple labals given their task id
+      parameters:
+      - collectionFormat: csv
+        description: Task IDs
+        in: query
+        items:
+          type: string
+        name: taskIDs
+        required: true
+        type: array
+      responses:
+        "200":
+          description: OK
+          schema:
+            items:
+              $ref: '#/definitions/models.Task_Label'
+            type: array
+        "400":
+          description: Bad Request
+          schema:
+            type: string
+      summary: gets the information about multiple labels
+      tags:
+      - task labels
   /user:
     get:
       description: gets the information about multiple users given their user id

backend/schema/task_labels/routes.go

@@ -1,7 +1,9 @@
 package task_labels
 
 import (
+	"carewallet/models"
 	"net/http"
+	"strings"
 
 	"github.com/gin-gonic/gin"
 	"github.com/jackc/pgx/v5/pgxpool"
@@ -13,16 +15,60 @@ type PgModel struct {
 
 func TaskGroup(v1 *gin.RouterGroup, c *PgModel) *gin.RouterGroup {
 
-	tasks := v1.Group(":tid/labels")
+	tasks := v1.Group("")
 	{
-		tasks.POST("", c.addLabelToTask)
-		tasks.DELETE("", c.removeLabelFromTask)
-		tasks.GET("", c.getLabelsByTask)
+		labelByTaskID := tasks.Group(":tid/labels")
+		{
+			labelByTaskID.POST("", c.addLabelToTask)
+			labelByTaskID.DELETE("", c.removeLabelFromTask)
+			labelByTaskID.GET("", c.getLabelsByTask)
+		}
+
+		labelByTaskIDs := tasks.Group("labels/tasks")
+		{
+			labelByTaskIDs.GET("", c.getLabelsByTasks)
+		}
 	}
 
 	return tasks
 }
 
+type LabelsQuery struct {
+	TaskIDs []string `form:"taskIDs"`
+}
+
+// getLabelsByTasks godoc
+//
+//	@summary		gets the information about multiple labels
+//	@description	gets the information about multiple labals given their task id
+//	@tags			task labels
+//
+//	@param			taskIDs	query		[]string	true	"Task IDs"
+//
+//	@success		200		{array}		models.Task_Label
+//	@failure		400		{object}	string
+//	@router			/tasks/labels/tasks [GET]
+func (pg *PgModel) getLabelsByTasks(c *gin.Context) {
+
+	taskIDs := c.Query("taskIDs")
+	taskQuery := LabelsQuery{
+		TaskIDs: strings.Split(taskIDs, ","),
+	}
+
+	var labels []models.Task_Label
+
+	for _, element := range taskQuery.TaskIDs {
+		label, err := getLabelsByTaskInDB(pg.Conn, element)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, err.Error())
+			return
+		}
+		labels = append(labels, label...)
+	}
+
+	c.JSON(http.StatusOK, labels)
+}
+
 // GetLabelsByTask godoc
 //
 //	@summary		get a tasks labels

backend/schema/task_labels/transactions.go

@@ -21,7 +21,7 @@ func getLabelsByTaskInDB(conn *pgxpool.Pool, taskId string) ([]models.Task_Label
 
 	for rows.Next() {
 		task := models.Task_Label{}
-		err := rows.Scan(&task.GroupId, &task.TaskId, &task.LabelName)
+		err := rows.Scan(&task.TaskId, &task.GroupId, &task.LabelName)
 
 		if err != nil {
 			print(err, "error scanning tasks by query")

client/components/calendar/TaskInfoCard.tsx

@@ -1,58 +1,131 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import { clsx } from 'clsx';
 import moment from 'moment';
 
 import Calendar from '../../assets/Date_today.svg';
 import Time from '../../assets/Time.svg';
-import { useTaskById } from '../../services/task';
-import { TaskTypeDescriptions } from '../../types/type';
+import { Task } from '../../types/task';
+import { TaskLabel } from '../../types/taskLabel';
+import {
+  CategoryIconsMap,
+  TaskTypeDescriptions,
+  TypeToCategoryMap
+} from '../../types/type';
+
+function statusToString(status: string) {
+  switch (status) {
+    case 'INCOMPLETE':
+      return 'bg-carewallet-pink';
+    case 'COMPLETE':
+      return 'bg-carewallet-green';
+    case 'INPROGRESS':
+      return 'bg-carewallet-yellow';
+    case 'OVERDUE':
+      return 'bg-carewallet-orange';
+    default:
+      return 'border border-carewallet-gray bg-care-wallet-gray';
+  }
+}
+
+function categoryToColor(category: string) {
+  switch (TaskTypeDescriptions[category]) {
+    case 'Medication Management':
+      return 'carewallet-pink';
+    case 'Doctor Appointment':
+      return 'carewallet-pink';
+    case 'Financial Task':
+      return 'carewallet-green';
+    case 'OTHER':
+      return 'carewallet-white';
+    default:
+      return 'carewallet-white';
+  }
+}
+
+function categoryToBGColor(category: string) {
+  switch (TaskTypeDescriptions[category]) {
+    case 'Medication Management':
+      return 'bg-carewallet-pink/20';
+    case 'Doctor Appointment':
+      return 'bg-carewallet-pink/20';
+    case 'Financial Task':
+      return 'bg-carewallet-green/10';
+    case 'OTHER':
+      return 'bg-carewallet-white';
+    default:
+      return 'bg-carewallet-white';
+  }
+}
 
 export function TaskInfoComponent({
-  name,
-  id,
-  category,
-  status,
-  date
+  task,
+  taskLabels
 }: {
-  id: number;
-  name: string;
-  category: string;
-  status: string;
-  date: Date;
+  task: Task;
+  taskLabels: TaskLabel[] | undefined;
 }) {
-  const { taskLabels } = useTaskById(id.toString());
-
   return (
-    <View className="bg-white mb-6 rounded-lg border border-carewallet-black p-4">
+    <View className="mb-6 rounded-2xl border border-carewallet-gray bg-carewallet-white p-4">
       <View className="mb-2 flex flex-col justify-between">
-        <Text className="self-start text-xl">{name}</Text>
-        <View className="mt-3 flex flex-row space-x-10">
+        <View className="flex-row items-center">
+          <View className="flex flex-row items-center space-x-2">
+            <Text className="font-carewallet-manrope-semibold text-xl">
+              {task.task_title}
+            </Text>
+          </View>
+          <View className="ml-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-lightgray px-2 py-1">
+            <View
+              className={`h-4 w-4 rounded-full ${statusToString(task.task_status)}`}
+            />
+            <Text className="font-carewallet-manrope">{`${task.task_status?.charAt(0)}${task.task_status?.slice(1).toLowerCase()}`}</Text>
+          </View>
+        </View>
+
+        <View className="mt-3 flex flex-row space-x-2">
           <View className="flex flex-row items-center space-x-2">
             <Calendar />
-            <Text>{moment(date).format('MMMM DD')}</Text>
+            <Text className="font-carewallet-manrope">
+              {moment(task.start_date).format('MMMM DD')}
+            </Text>
           </View>
           <View className="flex flex-row items-center space-x-2">
             <Time />
-            <Text>{moment(date).format('hh:mm A')}</Text>
+            <Text className="font-carewallet-manrope">
+              {moment(task.end_date).format('hh:mm A')}
+            </Text>
           </View>
         </View>
       </View>
       <View className="space-y-2">
-        <View className="mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-black px-2 py-1">
-          <View className="h-4 w-4 rounded-full bg-carewallet-gray" />
-          <Text>{TaskTypeDescriptions[category]}</Text>
-        </View>
-        <View className="mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-black px-2 py-1">
-          <View className="h-4 w-4 rounded-full bg-carewallet-gray" />
-          <Text>{`${status?.charAt(0)}${status?.slice(1).toLowerCase()}`}</Text>
+        <View
+          className={clsx(
+            'mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-lightgray px-2 py-1',
+            categoryToBGColor(task?.task_type ?? 'Other')
+          )}
+        >
+          <View>
+            {CategoryIconsMap[TypeToCategoryMap[task?.task_type ?? 'Other']]}
+          </View>
+          <Text
+            className={`font-carewallet-manrope text-${categoryToColor(task.task_type)}`}
+          >
+            {TaskTypeDescriptions[task.task_type]}
+          </Text>
         </View>
         <View>
-          {taskLabels?.map((label) => (
-            <Text key={label.label_name + label.task_id} className="self-start">
-              {label.label_name}
-            </Text>
-          ))}
+          {taskLabels &&
+            taskLabels.map((label) => (
+              <View
+                key={label.label_name + label.task_id}
+                className="mr-auto flex flex-row items-center rounded-full border border-carewallet-lightgray px-2 py-1"
+              >
+                <Text className="ml-1 self-start py-1 font-carewallet-manrope">
+                  {label.label_name}
+                </Text>
+              </View>
+            ))}
         </View>
       </View>
     </View>