From 4bd79291e06168e6907590e10f4f00d425e33a0a Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Wed, 29 Nov 2023 16:52:04 +0000
Subject: [PATCH 1/3] refactor(typescript): migrate IFrame

---
 src/components/{IFrame.js => IFrame.tsx} | 35 ++++++++++--------------
 1 file changed, 15 insertions(+), 20 deletions(-)
 rename src/components/{IFrame.js => IFrame.tsx} (82%)

diff --git a/src/components/IFrame.js b/src/components/IFrame.tsx
similarity index 82%
rename from src/components/IFrame.js
rename to src/components/IFrame.tsx
index aa85ad03ffbf..eca9524b1cb1 100644
--- a/src/components/IFrame.js
+++ b/src/components/IFrame.tsx
@@ -1,10 +1,9 @@
-/* eslint-disable es/no-nullish-coalescing-operators */
-import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {Session} from '@src/types/onyx';
 
-function getNewDotURL(url) {
+function getNewDotURL(url: string | URL) {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
@@ -48,7 +47,7 @@ function getNewDotURL(url) {
     return pathname;
 }
 
-function getOldDotURL(url) {
+function getOldDotURL(url: string | URL) {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');
@@ -86,18 +85,13 @@ function getOldDotURL(url) {
     return pathname;
 }
 
-const propTypes = {
-    // The session of the logged in person
-    session: PropTypes.shape({
-        // The email of the logged in person
-        email: PropTypes.string,
-
-        // The authToken of the logged in person
-        authToken: PropTypes.string,
-    }).isRequired,
+type OldDotIFrameOnyxProps = {
+    session: OnyxEntry<Session>;
 };
 
-function OldDotIFrame({session}) {
+type OldDotIFrameProps = OldDotIFrameOnyxProps;
+
+function OldDotIFrame({session}: OldDotIFrameProps) {
     const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
 
     useEffect(() => {
@@ -106,15 +100,18 @@ function OldDotIFrame({session}) {
         window.addEventListener('message', (event) => {
             const url = event.data;
             // TODO: use this value to navigate to a new path
-            // eslint-disable-next-line no-unused-vars
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const newDotURL = getNewDotURL(url);
         });
     }, []);
 
     useEffect(() => {
+        if (!session) {
+            return;
+        }
         document.cookie = `authToken=${session.authToken}; domain=expensify.com.dev; path=/;`;
         document.cookie = `email=${session.email}; domain=expensify.com.dev; path=/;`;
-    }, [session.authToken, session.email]);
+    }, [session]);
 
     return (
         <iframe
@@ -125,9 +122,7 @@ function OldDotIFrame({session}) {
     );
 }
 
-OldDotIFrame.propTypes = propTypes;
-
-export default withOnyx({
+export default withOnyx<OldDotIFrameProps, OldDotIFrameOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },

From 044cf0a8425af68dad97b0afcff9888d54ddcbe0 Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Fri, 1 Dec 2023 10:38:59 +0000
Subject: [PATCH 2/3] refactor: apply pull request feedback

---
 src/components/IFrame.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/IFrame.tsx b/src/components/IFrame.tsx
index eca9524b1cb1..c8de672da800 100644
--- a/src/components/IFrame.tsx
+++ b/src/components/IFrame.tsx
@@ -3,7 +3,15 @@ import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {Session} from '@src/types/onyx';
 
-function getNewDotURL(url: string | URL) {
+type OldDotIFrameOnyxProps = {
+    session: OnyxEntry<Session>;
+};
+
+type OldDotIFrameProps = OldDotIFrameOnyxProps;
+
+type Url = string | URL;
+
+function getNewDotURL(url: Url): string {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
@@ -47,7 +55,7 @@ function getNewDotURL(url: string | URL) {
     return pathname;
 }
 
-function getOldDotURL(url: string | URL) {
+function getOldDotURL(url: Url): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');
@@ -85,19 +93,13 @@ function getOldDotURL(url: string | URL) {
     return pathname;
 }
 
-type OldDotIFrameOnyxProps = {
-    session: OnyxEntry<Session>;
-};
-
-type OldDotIFrameProps = OldDotIFrameOnyxProps;
-
 function OldDotIFrame({session}: OldDotIFrameProps) {
     const [oldDotURL, setOldDotURL] = useState('https://staging.expensify.com');
 
     useEffect(() => {
         setOldDotURL(`https://expensify.com.dev/${getOldDotURL(window.location.href)}`);
 
-        window.addEventListener('message', (event) => {
+        window.addEventListener('message', (event: MessageEvent<string>) => {
             const url = event.data;
             // TODO: use this value to navigate to a new path
             // eslint-disable-next-line @typescript-eslint/no-unused-vars

From fbd4287c8cf403ec6174a31b20ebffb41a256d1f Mon Sep 17 00:00:00 2001
From: Pedro Guerreiro <pedro.a.c.guerreiro@gmail.com>
Date: Mon, 4 Dec 2023 16:29:39 +0000
Subject: [PATCH 3/3] refactor(typescript): apply pull request feedback

---
 src/components/IFrame.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/IFrame.tsx b/src/components/IFrame.tsx
index c8de672da800..7520ad869507 100644
--- a/src/components/IFrame.tsx
+++ b/src/components/IFrame.tsx
@@ -9,14 +9,12 @@ type OldDotIFrameOnyxProps = {
 
 type OldDotIFrameProps = OldDotIFrameOnyxProps;
 
-type Url = string | URL;
-
-function getNewDotURL(url: Url): string {
+function getNewDotURL(url: string): string {
     const urlObj = new URL(url);
     const paramString = urlObj.searchParams.get('param') ?? '';
     const pathname = urlObj.pathname.slice(1);
 
-    let params;
+    let params: Record<string, string>;
     try {
         params = JSON.parse(paramString);
     } catch {
@@ -55,7 +53,7 @@ function getNewDotURL(url: Url): string {
     return pathname;
 }
 
-function getOldDotURL(url: Url): string {
+function getOldDotURL(url: string): string {
     const urlObj = new URL(url);
     const pathname = urlObj.pathname;
     const paths = pathname.slice(1).split('/');