From 4b1012e87ff7f6df52cdc7c1f50ded65b500fc36 Mon Sep 17 00:00:00 2001
From: Federico Mastrini <federicomastrini93@gmail.com>
Date: Fri, 6 Dec 2024 13:01:06 +0100
Subject: [PATCH] fix: module credential end component

---
 src/components/modules/ModuleCredential.tsx | 88 ++++++++++++---------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/components/modules/ModuleCredential.tsx b/src/components/modules/ModuleCredential.tsx
index d82bac4a..df534bed 100644
--- a/src/components/modules/ModuleCredential.tsx
+++ b/src/components/modules/ModuleCredential.tsx
@@ -3,15 +3,13 @@ import {
   Image,
   ImageSourcePropType,
   ImageURISource,
-  StyleSheet,
-  View
+  StyleSheet
 } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
   IOListItemVisualParams,
   IOSelectionListItemVisualParams,
   IOSpacer,
-  IOStyles,
   IOVisualCostants,
   useIOTheme
 } from "../../core";
@@ -43,26 +41,28 @@ type BaseModuleProps = {
 };
 
 type ModuleCredentialProps =
-  | LoadingModuleProps
-  | (BaseModuleProps & ImageProps & PressableModuleBaseProps);
+  | BaseModuleProps & ImageProps & PressableModuleBaseProps;
 
-const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
-  const theme = useIOTheme();
-
-  if (props.isLoading) {
-    return <ModuleCredentialSkeleton />;
-  }
+const ModuleCredential = (
+  props: WithTestID<LoadingModuleProps | ModuleCredentialProps>
+) =>
+  props.isLoading ? (
+    <ModuleCredentialSkeleton />
+  ) : (
+    <ModuleCredentialContent {...props} />
+  );
 
-  const {
-    testID,
-    icon,
-    image,
-    label,
-    onPress,
-    badge,
-    isFetching,
-    ...pressableProps
-  } = props;
+const ModuleCredentialContent = ({
+  testID,
+  icon,
+  image,
+  label,
+  onPress,
+  badge,
+  isFetching,
+  ...pressableProps
+}: WithTestID<ModuleCredentialProps>) => {
+  const theme = useIOTheme();
 
   const iconComponent = icon && (
     <Icon
@@ -80,6 +80,33 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
     />
   );
 
+  const endComponent = React.useMemo(() => {
+    if (isFetching) {
+      return (
+        <LoadingSpinner
+          testID={testID ? `${testID}_activityIndicator` : undefined}
+          color={theme["interactiveElem-default"]}
+        />
+      );
+    }
+    if (badge) {
+      return (
+        <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
+      );
+    }
+    if (onPress) {
+      return (
+        <Icon
+          testID={testID ? `${testID}_icon` : undefined}
+          name="chevronRightListItem"
+          color={theme["interactiveElem-default"]}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      );
+    }
+    return null;
+  }, [testID, theme, isFetching, badge, onPress]);
+
   const ModuleContent = () => (
     <HStack space={8} style={{ alignItems: "center" }}>
       <HStack
@@ -99,24 +126,7 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
           {label}
         </BodySmall>
       </HStack>
-      <View style={IOStyles.row}>
-        {badge ? (
-          <Badge {...badge} testID={testID ? `${testID}_badge` : undefined} />
-        ) : null}
-        {isFetching ? (
-          <LoadingSpinner
-            testID={testID ? `${testID}_activityIndicator` : undefined}
-            color={theme["interactiveElem-default"]}
-          />
-        ) : onPress ? (
-          <Icon
-            testID={testID ? `${testID}_icon` : undefined}
-            name="chevronRightListItem"
-            color={theme["interactiveElem-default"]}
-            size={IOListItemVisualParams.chevronSize}
-          />
-        ) : null}
-      </View>
+      {endComponent}
     </HStack>
   );