refactor: added empty state when theres not an action for a subtask

client-new/src/components/task/Actions.tsx

@@ -72,7 +72,6 @@ const FormComponent = ({ actions, subTaskName }: FormComponentProps) => {
     }
   };
 
-  // </View >
   return (
     <View>
         {actions.map((action, index) => (

client-new/src/screens/app/tasks/SubTaskScreen.tsx

@@ -1,5 +1,5 @@
 import { getActions } from '@/services/ActionsService';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { Button, ScrollView, Text, View, HStack, Pressable } from 'native-base';
 import Icon from "react-native-vector-icons/Ionicons";
@@ -10,6 +10,7 @@ import BackArrowIcon from '@/components/icons/BackArrow';
 import ActivityLoader from '@/components/reusable/ActivityLoader';
 import { heightPercentageToDP as h, widthPercentageToDP as w } from 'react-native-responsive-screen';
 import { moderateScale, verticalScale } from '@/utils/FontSizeUtils';
+import NoTaskIcon from '@/components/icons/NoTaskIcon';
 
 type SubTaskScreenProps = {
   route: any
@@ -23,6 +24,10 @@ const SubTaskScreen = ({ route, navigation }: SubTaskScreenProps) => {
     queryFn: () => getActions(subtask?.id)
   });
 
+  useEffect(() => {
+    console.log(data);
+  }, [data]);
+
   return (
       <ScrollView backgroundColor={'#FFFAF2'}>
       <View marginX={w('5%')} marginTop={h('5%')}>
@@ -58,11 +63,27 @@ const SubTaskScreen = ({ route, navigation }: SubTaskScreenProps) => {
         </View>
         {isLoading && <ActivityLoader />}
         {error && <Text> error </Text>}
-        {data === null && <Text> null </Text>}
-        {data && data.actions && (
-          <View width={"100%"}>
-            <FormComponent actions={data.actions} subTaskName={subtask.sub_task_name} />
+        {data === null || (data && Object.keys(data).length === 0) ? (
+          <View width={"100%"} marginTop={h('10%')} justifyContent="center" alignItems="center">
+            <NoTaskIcon />
+
+            <Text
+              marginTop={h('2%')}
+              fontSize={moderateScale(16)}
+              lineHeight={verticalScale(19)}
+              fontWeight={'400'}
+              fontFamily={"Inter_400Regular"}
+              color={'gray.500'}
+            >
+              No Actions Available (yet)
+            </Text>
           </View>
+        ) : (
+          data && data.actions && (
+            <View width={"100%"}>
+              <FormComponent actions={data.actions} subTaskName={subtask.sub_task_name} />
+            </View>
+            )
         )}
       </View>
     </ScrollView>