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('/');