From a0dcc9c867a5b3cfc08bb83a446f8fcc9416c5df Mon Sep 17 00:00:00 2001
From: Shohieb <shohiebsense@users.noreply.github.com>
Date: Thu, 15 Dec 2022 09:45:41 +0900
Subject: [PATCH] fix/MINI-5698 separate userDetails and points button state
 (#231)

---
 js-miniapp-sample/src/pages/user-details.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/js-miniapp-sample/src/pages/user-details.js b/js-miniapp-sample/src/pages/user-details.js
index f1ab561fc..edbf7e814 100644
--- a/js-miniapp-sample/src/pages/user-details.js
+++ b/js-miniapp-sample/src/pages/user-details.js
@@ -217,10 +217,15 @@ function UserDetails(props: UserDetailsProps) {
   const [state, dispatch] = useReducer(dataFetchReducer, initialState);
   const classes = useStyles();
 
-  const buttonClassname = clsx({
-    [classes.buttonFailure]: state.isError,
-    [classes.buttonSuccess]: !state.isError,
-  });
+  const userDetailsButtonClassname = getButtonState(state.isError);
+  const pointsButtonClassname = getButtonState(state.isPointsError);
+
+  function getButtonState(isError: boolean) {
+    return clsx({
+      [classes.buttonFailure]: isError,
+      [classes.buttonSuccess]: !isError,
+    });
+  }
 
   function requestUserDetails() {
     const permissionsList = [
@@ -474,7 +479,7 @@ function UserDetails(props: UserDetailsProps) {
             variant="contained"
             color="primary"
             classes={{ root: classes.button }}
-            className={buttonClassname}
+            className={userDetailsButtonClassname}
             disabled={state.isLoading}
             data-testid="fetchUserButton"
           >
@@ -502,7 +507,7 @@ function UserDetails(props: UserDetailsProps) {
             variant="contained"
             color="primary"
             classes={{ root: classes.button }}
-            className={buttonClassname}
+            className={pointsButtonClassname}
             disabled={state.isPointsLoading}
             data-testid="fetchPointsButton"
           >