Merge pull request #26932 from software-mansion-labs/@kosmydel/ts/Tab

[TS migration] Migrate 'Tab.js' lib to TypeScript

Author: johnmlee101

src/ONYXKEYS.ts

@@ -215,9 +215,6 @@ const ONYXKEYS = {
     // The last update ID that was applied to the client
     ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT: 'OnyxUpdatesLastUpdateIDAppliedToClient',
 
-    // Manual request tab selector
-    SELECTED_TAB: 'selectedTab',
-
     // Receipt upload modal
     RECEIPT_MODAL: 'receiptModal',
 
@@ -255,6 +252,9 @@ const ONYXKEYS = {
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
 
+        // Manual request tab selector
+        SELECTED_TAB: 'selectedTab_',
+
         /** This is deprecated, but needed for a migration, so we still need to include it here so that it will be initialized in Onyx.init */
         DEPRECATED_POLICY_MEMBER_LIST: 'policyMemberList_',
     },
@@ -364,7 +364,6 @@ type OnyxValues = {
     [ONYXKEYS.LAST_OPENED_PUBLIC_ROOM_ID]: string;
     [ONYXKEYS.PREFERRED_THEME]: ValueOf<typeof CONST.THEME>;
     [ONYXKEYS.IS_USING_MEMORY_ONLY_KEYS]: boolean;
-    [ONYXKEYS.SELECTED_TAB]: string;
     [ONYXKEYS.RECEIPT_MODAL]: OnyxTypes.ReceiptModal;
     [ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken;
     [ONYXKEYS.ONYX_UPDATES_FROM_SERVER]: OnyxTypes.OnyxUpdatesFromServer;
@@ -391,6 +390,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: boolean;
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
+    [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
 
     // Forms
     [ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: OnyxTypes.AddDebitCardForm;

src/libs/Navigation/OnyxTabNavigator.js

@@ -54,6 +54,6 @@ OnyxTabNavigator.displayName = 'OnyxTabNavigator';
 
 export default withOnyx({
     selectedTab: {
-        key: ({id}) => `${ONYXKEYS.SELECTED_TAB}_${id}`,
+        key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`,
     },
 })(OnyxTabNavigator);

src/libs/actions/Tab.js renamed to src/libs/actions/Tab.ts

@@ -3,12 +3,9 @@ import ONYXKEYS from '../../ONYXKEYS';
 
 /**
  * Sets the selected tab for a given tab ID
- *
- * @param {String} id
- * @param {String} index
  */
-function setSelectedTab(id, index) {
-    Onyx.merge(`${ONYXKEYS.SELECTED_TAB}_${id}`, index);
+function setSelectedTab(id: string, index: string) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`, index);
 }
 
 export default {

src/pages/iou/MoneyRequestDatePage.js

@@ -116,6 +116,6 @@ export default withOnyx({
         key: ONYXKEYS.IOU,
     },
     selectedTab: {
-        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
     },
 })(MoneyRequestDatePage);

src/pages/iou/MoneyRequestDescriptionPage.js

@@ -130,6 +130,6 @@ export default withOnyx({
         key: ONYXKEYS.IOU,
     },
     selectedTab: {
-        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
     },
 })(MoneyRequestDescriptionPage);

src/pages/iou/MoneyRequestSelectorPage.js

@@ -145,6 +145,6 @@ export default withOnyx({
         key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
     },
     selectedTab: {
-        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
     },
 })(MoneyRequestSelectorPage);

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -336,7 +336,7 @@ export default compose(
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
         selectedTab: {
-            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+            key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
     }),
 )(MoneyRequestConfirmPage);

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js

@@ -126,7 +126,7 @@ export default compose(
     withOnyx({
         iou: {key: ONYXKEYS.IOU},
         selectedTab: {
-            key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+            key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
     }),
 )(MoneyRequestParticipantsPage);

src/pages/iou/steps/NewRequestAmountPage.js

@@ -202,6 +202,6 @@ export default withOnyx({
         key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`,
     },
     selectedTab: {
-        key: `${ONYXKEYS.SELECTED_TAB}_${CONST.TAB.RECEIPT_TAB_ID}`,
+        key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
     },
 })(NewRequestAmountPage);