[No Ticket] UniqueID Interface changes in sample app (#245)

* UniqueID Interface changes * Prettier
rakutentech · Mar 15, 2023 · d4caee6 · d4caee6
1 parent 65b88b8
commit d4caee6
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 5 deletions.
diff --git a/js-miniapp-sample/src/pages/uuid-sdk.js b/js-miniapp-sample/src/pages/uuid-sdk.js
@@ -11,16 +11,21 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'react-redux';
 
 import GreyCard from '../components/GreyCard';
-import { setMessagingUniqueId, setMauid } from '../services/uuid/actions';
+import {
+  setMessagingUniqueId,
+  setMauid,
+  setUniqueId,
+} from '../services/uuid/actions';
 
 const useStyles = makeStyles((theme) => ({
   card: {
     width: '100%',
-    height: '250px',
+    height: 'auto',
     marginTop: '40px',
+    display: 'grid',
   },
   content: {
-    height: '16%',
+    height: 'auto',
     justifyContent: 'center',
     display: 'flex',
     flexDirection: 'column',
@@ -39,10 +44,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 type UUIDProps = {
+  uniqueId: string,
   messagingUniqueId: string,
   mauid: string,
+  uniqueIdError: string,
   messagingUniqueIdError: string,
   mauidError: string,
+  getUniqueId: Function,
   getMessagingUniqueId: Function,
   getMauid: Function,
 };
@@ -64,12 +72,55 @@ const UuidFetcher = (props: UUIDProps) => {
 
   return (
     <GreyCard className={classes.card}>
+      <CardContent className={classes.content}>
+        {props.uniqueId ?? props.uniqueIdError ?? 'Not Available'}
+      </CardContent>
+      <CardActions className={classes.actions}>
+        <Button
+          data-testid="get-unique-id"
+          variant="contained"
+          color="primary"
+          fullWidth
+          onClick={props.getUniqueId}
+        >
+          GET UNIQUE ID
+        </Button>
+        <CopyToClipboard
+          disabled={!props.uniqueId}
+          text={props.uniqueId}
+          onCopy={textCopied}
+        >
+          <Button
+            disabled={!props.uniqueId}
+            data-testid="clipboard-copy"
+            variant="contained"
+            color="primary"
+          >
+            Copy
+          </Button>
+        </CopyToClipboard>
+        <Snackbar
+          open={copyStatus.success}
+          autoHideDuration={3000}
+          onClose={() => {
+            setCopyStatus({ success: false, error: false });
+          }}
+          message="Copied to clipboard !!"
+        />
+        <Snackbar
+          open={copyStatus.error}
+          autoHideDuration={3000}
+          onClose={() => {
+            setCopyStatus({ success: false, error: false });
+          }}
+          message="Failed to copy!"
+        />
+      </CardActions>
       <CardContent className={classes.content}>
         {props.messagingUniqueId ??
           props.messagingUniqueIdError ??
           'Not Available'}
       </CardContent>
-
       <CardActions className={classes.actions}>
         <Button
           data-testid="get-messaging-unique-id"
@@ -148,6 +199,8 @@ const UuidFetcher = (props: UUIDProps) => {
 const mapStateToProps = (state, props) => {
   return {
     ...props,
+    uniqueId: state.uuid.uniqueId,
+    uniqueIdError: state.uuid.uniqueIdError,
     messagingUniqueId: state.uuid.messagingUniqueId,
     messagingUniqueIdError: state.uuid.messagingUniqueIdError,
     mauid: state.uuid.mauid,
@@ -157,6 +210,7 @@ const mapStateToProps = (state, props) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
+    getUniqueId: () => dispatch(setUniqueId()),
     getMessagingUniqueId: () => dispatch(setMessagingUniqueId()),
     getMauid: () => dispatch(setMauid()),
   };

diff --git a/js-miniapp-sample/src/services/uuid/actions.js b/js-miniapp-sample/src/services/uuid/actions.js
@@ -1,6 +1,8 @@
 import MiniApp from 'js-miniapp-sdk';
 
 import {
+  SET_UNIQUE_ID,
+  UNIQUE_ID_FETCH_ERROR,
   SET_MESSAGING_UNIQUE_ID,
   SET_MAUID,
   MESSAGING_UNIQUE_ID_FETCH_ERROR,
@@ -11,6 +13,24 @@ type GetUUIDAction = { type: String, payload: ?string, error: ?string };
 
 type UUIDAction = GetUUIDAction;
 
+const setUniqueId = (): Function => {
+  return (dispatch) => {
+    MiniApp.getUniqueId()
+      .then((uuidFromSDK) => {
+        dispatch({
+          type: SET_UNIQUE_ID,
+          payload: uuidFromSDK,
+        });
+      })
+      .catch((error) => {
+        dispatch({
+          type: UNIQUE_ID_FETCH_ERROR,
+          error,
+        });
+      });
+  };
+};
+
 const setMessagingUniqueId = (): Function => {
   return (dispatch) => {
     MiniApp.getMessagingUniqueId()
@@ -47,5 +67,5 @@ const setMauid = (): Function => {
   };
 };
 
-export { setMessagingUniqueId, setMauid };
+export { setUniqueId, setMessagingUniqueId, setMauid };
 export type { UUIDAction };
diff --git a/js-miniapp-sample/src/services/uuid/reducers.js b/js-miniapp-sample/src/services/uuid/reducers.js
@@ -1,19 +1,24 @@
 import type { UUIDAction } from './actions';
 import {
+  SET_UNIQUE_ID,
+  UNIQUE_ID_FETCH_ERROR,
   SET_MESSAGING_UNIQUE_ID,
   SET_MAUID,
   MESSAGING_UNIQUE_ID_FETCH_ERROR,
   MAUID_FETCH_ERROR,
 } from './types';
 
 type UUIDState = {
+  +uniqueId: ?string,
   +messagingUniqueId: ?string,
   +mauid: ?string,
 };
 
 const defaultState: UUIDState = {
+  uniqueId: undefined,
   messagingUniqueId: undefined,
   mauid: undefined,
+  uniqueIdError: undefined,
   messagingUniqueIdError: undefined,
   mauidError: undefined,
 };
@@ -22,6 +27,12 @@ const UUIDReducer = (
   state: UUIDState = defaultState,
   action: UUIDAction = {}
 ): UUIDState => {
+  if (action.type === SET_UNIQUE_ID) {
+    return {
+      ...defaultState,
+      uniqueId: action.payload,
+    };
+  }
   if (action.type === SET_MESSAGING_UNIQUE_ID) {
     return {
       ...defaultState,
@@ -42,7 +53,13 @@ const UUIDReducer = (
       ...defaultState,
       mauidError: action.error,
     };
+  } else if (action.type === UNIQUE_ID_FETCH_ERROR) {
+    return {
+      ...defaultState,
+      uniqueIdError: action.error,
+    };
   }
+
   return state;
 };
 

diff --git a/js-miniapp-sample/src/services/uuid/types.js b/js-miniapp-sample/src/services/uuid/types.js
@@ -1,8 +1,12 @@
+const SET_UNIQUE_ID = 'SET_UNIQUE_ID';
+const UNIQUE_ID_FETCH_ERROR = 'UNIQUE_ID_FETCH_ERROR';
 const SET_MESSAGING_UNIQUE_ID = 'SET_MESSAGING_UNIQUE_ID';
 const MESSAGING_UNIQUE_ID_FETCH_ERROR = 'MESSAGING_UNIQU_ID_FETCH_ERROR';
 const SET_MAUID = 'SET_MAUID';
 const MAUID_FETCH_ERROR = 'MAUID_FETCH_ERROR';
 export {
+  SET_UNIQUE_ID,
+  UNIQUE_ID_FETCH_ERROR,
   SET_MESSAGING_UNIQUE_ID,
   SET_MAUID,
   MESSAGING_UNIQUE_ID_FETCH_ERROR,