From c528f72b2e7806d7b895a27656481714c984e26b Mon Sep 17 00:00:00 2001
From: Dejan <panovskidejan@yahoo.com>
Date: Thu, 21 Nov 2024 22:55:54 +0100
Subject: [PATCH] - Added created by label in the todo item

---
 components/pages/todos/ToDoItem.tsx | 116 ++++++++++++++++------------
 1 file changed, 66 insertions(+), 50 deletions(-)

diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx
index 4eff2c7..f837588 100644
--- a/components/pages/todos/ToDoItem.tsx
+++ b/components/pages/todos/ToDoItem.tsx
@@ -8,7 +8,7 @@ import {
   Checkbox,
 } from "react-native-ui-lib";
 
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
 import PointsSlider from "@/components/shared/PointsSlider";
@@ -33,6 +33,13 @@ const ToDoItem = (props: {
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
+  const [creator, setCreator] = useState('');
+
+  useEffect(() => {
+    let creatorMember = members?.find((member) => member?.uid === props.item.creatorId);
+    const fullName = `${creatorMember?.firstName ?? ""}`;
+    setCreator(fullName);
+  }, [])
 
   const handlePointsChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -117,57 +124,66 @@ const ToDoItem = (props: {
         />
       </View>
       <View centerV centerH marginT-8 row spread>
-        <View row>
-          {props.item.points && props.item.points > 0 ? (
-            <TouchableOpacity
-              onPress={() => {
-                if (props.isSettings) {
-                  setPointsModalVisible(true);
-                }
-              }}
-            >
-              <View centerV row gap-3>
-                <Ionicons name="gift-outline" size={20} color="#46a80a" />
-                <Text
-                  color="#46a80a"
-                  style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
-                >
-                  {props.item.points} points
-                </Text>
-              </View>
-            </TouchableOpacity>
-          ) : (
-            <View />
-          )}
-
-          {!(props.item.repeatType == "None") && (
-            <View row centerV marginL-8>
-              <RepeatIcon style={{ marginRight: 4 }} />
-              <Text
-                style={{
-                  fontSize: 12,
-                  fontFamily: "Manrope_500Medium",
-                  color: "#858585",
+        <View>
+          <View row>
+            {props.item.points && props.item.points > 0 ? (
+              <TouchableOpacity
+                onPress={() => {
+                  if (props.isSettings) {
+                    setPointsModalVisible(true);
+                  }
                 }}
               >
-                {(() => {
-                  switch (props.item.repeatType) {
-                    case "Once a month":
-                      return "Monthly";
-                    case "Every week":
-                      return "Weekly";
-                    case "Once a year":
-                      return "Yearly";
-                    default:
-                      return props.item.repeatType;
-                  }
-                })()}
-                {props.item.date &&
-                  props.is7Days &&
-                  " / " + format(props.item.date, "EEEE")}
-              </Text>
-            </View>
-          )}
+                <View centerV row gap-3>
+                  <Ionicons name="gift-outline" size={20} color="#46a80a" />
+                  <Text
+                    color="#46a80a"
+                    style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+                  >
+                    {props.item.points} points
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            ) : (
+              <View />
+            )}
+
+            {!(props.item.repeatType == "None") && (
+              <View row centerV marginL-8>
+                <RepeatIcon style={{ marginRight: 4 }} />
+                <Text
+                  style={{
+                    fontSize: 12,
+                    fontFamily: "Manrope_500Medium",
+                    color: "#858585",
+                  }}
+                >
+                  {(() => {
+                    switch (props.item.repeatType) {
+                      case "Once a month":
+                        return "Monthly";
+                      case "Every week":
+                        return "Weekly";
+                      case "Once a year":
+                        return "Yearly";
+                      default:
+                        return props.item.repeatType;
+                    }
+                  })()}
+                  {props.item.date &&
+                    props.is7Days &&
+                    " / " + format(props.item.date, "EEEE")}
+                </Text>
+              </View>
+            )}
+          </View>
+          <View row centerV marginL-3>
+            <Text
+                style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+            >
+              Created by: {creator}
+            </Text>
+          </View>
         </View>
         <View row style={{ gap: 3 }}>
           {selectedMembers?.map((member) => {