fix/MINI-5698 separate userDetails and points button state (#231)

rakutentech · Dec 15, 2022 · a0dcc9c · a0dcc9c
1 parent e08178d
commit a0dcc9c
Showing 1 changed file with 11 additions and 6 deletions.
diff --git 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"
           >