From 963241c192c4e11d2d8425841ab9cd379b6a09b3 Mon Sep 17 00:00:00 2001 From: nicolaschapur Date: Wed, 26 Jun 2024 16:30:35 -0300 Subject: [PATCH 1/4] [NC]: Redirect user to demo url on play mode --- apps/mocksi-lite/background.ts | 17 ++++++++++++++-- apps/mocksi-lite/content/ContentApp.tsx | 9 +++++---- .../content/Popup/CreateDemo/DemoItem.tsx | 16 +++++++++------ .../mocksi-lite/content/Toast/HiddenToast.tsx | 11 +++++----- apps/mocksi-lite/content/Toast/PlayToast.tsx | 13 ++++++++---- apps/mocksi-lite/content/content.tsx | 20 ++++++++++++------- apps/mocksi-lite/utils.ts | 1 + 7 files changed, 59 insertions(+), 28 deletions(-) diff --git a/apps/mocksi-lite/background.ts b/apps/mocksi-lite/background.ts index 511c6cd7..4e39e799 100644 --- a/apps/mocksi-lite/background.ts +++ b/apps/mocksi-lite/background.ts @@ -1,7 +1,7 @@ import MocksiRollbar from "./MocksiRollbar"; -import { STORAGE_KEY, SignupURL, WebSocketURL } from "./consts"; +import {STORAGE_KEY, SignupURL, WebSocketURL, MOCKSI_RECORDING_STATE, RecordingState} from "./consts"; import { apiCall } from "./networking"; -import { getEmail, logout } from "./utils"; +import {getAlterations, getEmail, loadAlterations, logout} from "./utils"; export interface Alteration { selector: string; @@ -315,6 +315,13 @@ function allEventHandler( } } +const setPlayMode = async (url?: string) => { + const [result] = await chrome.tabs.query({ active: true, lastFocusedWindow: true }) + await chrome.tabs.create({url}); + await chrome.action.setIcon({ path: "./public/pause-icon.png" }); + await chrome.storage.local.set({ [MOCKSI_RECORDING_STATE]: RecordingState.HIDDEN }); +}; + let currentTabId: number | undefined; chrome.runtime.onMessage.addListener( ( @@ -360,6 +367,12 @@ chrome.runtime.onMessage.addListener( return true; } + if (request.message === "playMode") { + const url: string = request.body?.url as string; + setPlayMode(url ?? ""); + return true; + } + sendResponse({ message: request.message, status: "fail" }); return false; // No async response for other messages }, diff --git a/apps/mocksi-lite/content/ContentApp.tsx b/apps/mocksi-lite/content/ContentApp.tsx index 831ffae2..23612d93 100644 --- a/apps/mocksi-lite/content/ContentApp.tsx +++ b/apps/mocksi-lite/content/ContentApp.tsx @@ -50,11 +50,12 @@ function ShadowContentApp({ isOpen, email, initialState }: ContentProps) { case RecordingState.EDITING: return ; case RecordingState.PLAY: + case RecordingState.HIDDEN: return ; - case RecordingState.HIDDEN: - return ( - - ); + // case RecordingState.HIDDEN: + // return ( + // + // ); default: return ( { + const domain = new URL(url).hostname; const handleEdit = () => { setEditorMode(true, uuid); loadAlterations(alterations, true); @@ -32,11 +33,15 @@ const DemoItem = ({ const handlePlay = async () => { await chrome.storage.local.set({ [MOCKSI_ALTERATIONS]: alterations }); await chrome.storage.local.set({ [MOCKSI_RECORDING_ID]: uuid }); - loadAlterations(alterations, false); - setState(RecordingState.PLAY); - }; + if (window.location.href === url) { + sendMessage("updateToPauseIcon"); + loadAlterations(alterations, false); + setState(RecordingState.HIDDEN); + } else { + sendMessage("playMode", {url}) + } + }; - const domain = new URL(url).hostname; return (
@@ -62,7 +67,6 @@ const DemoItem = ({ variant={Variant.icon} onClick={handlePlay} disabled={ - !url.includes(window.location.hostname) || !alterations || !alterations.length } diff --git a/apps/mocksi-lite/content/Toast/HiddenToast.tsx b/apps/mocksi-lite/content/Toast/HiddenToast.tsx index be1183fc..3a603ffa 100644 --- a/apps/mocksi-lite/content/Toast/HiddenToast.tsx +++ b/apps/mocksi-lite/content/Toast/HiddenToast.tsx @@ -4,11 +4,11 @@ import Button, { Variant } from "../../common/Button"; import TextField from "../../common/TextField"; import { RecordingState } from "../../consts"; import { - getAlterations, - getRecordingsStorage, - loadAlterations, - loadRecordingId, - sendMessage, + getAlterations, + getRecordingsStorage, + loadAlterations, + loadRecordingId, + sendMessage, undoModifications, } from "../../utils"; import { setEditorMode } from "../EditMode/editMode"; import Divider from "../Popup/Divider"; @@ -42,6 +42,7 @@ const HiddenToast = ({ onChangeState, close }: HiddenToastProps) => { }; const handleClose = () => { + undoModifications(); sendMessage("resetIcon"); onChangeState(RecordingState.CREATE); close(); diff --git a/apps/mocksi-lite/content/Toast/PlayToast.tsx b/apps/mocksi-lite/content/Toast/PlayToast.tsx index 3aca9410..48c08cdd 100644 --- a/apps/mocksi-lite/content/Toast/PlayToast.tsx +++ b/apps/mocksi-lite/content/Toast/PlayToast.tsx @@ -19,6 +19,7 @@ interface PlayToastProps { } const PlayToast = ({ onChangeState, close }: PlayToastProps) => { const handleEdit = async () => { + sendMessage("resetIcon"); const alterations = await getAlterations(); loadAlterations(alterations, true); setEditorMode(true); @@ -29,6 +30,13 @@ const PlayToast = ({ onChangeState, close }: PlayToastProps) => { onChangeState(RecordingState.HIDDEN); close(); }; + + const handleStop = () => { + sendMessage("resetIcon"); + undoModifications(); + onChangeState(RecordingState.CREATE); + }; + return (
{
diff --git a/apps/mocksi-lite/content/content.tsx b/apps/mocksi-lite/content/content.tsx index 959759a3..c47204cd 100644 --- a/apps/mocksi-lite/content/content.tsx +++ b/apps/mocksi-lite/content/content.tsx @@ -1,11 +1,6 @@ import ReactDOM from "react-dom/client"; -import { - MOCKSI_RECORDING_STATE, - RecordingState, - STORAGE_CHANGE_EVENT, - SignupURL, -} from "../consts"; -import { getEmail, sendMessage, setRootPosition } from "../utils"; +import {MOCKSI_RECORDING_STATE, RecordingState, SignupURL, STORAGE_CHANGE_EVENT,} from "../consts"; +import {getAlterations, getEmail, loadAlterations, sendMessage, setRootPosition} from "../utils"; import ContentApp from "./ContentApp"; let root: ReactDOM.Root; @@ -15,6 +10,17 @@ function initial() { document.getElementById("extension-root") || document.createElement("div"); rootDiv.id = "extension-root"; document.body.appendChild(rootDiv); + + chrome.storage.local.get([MOCKSI_RECORDING_STATE], (results) => { + const recordingState: RecordingState | null = + results[MOCKSI_RECORDING_STATE]; + if (recordingState === RecordingState.HIDDEN) { + sendMessage("updateToPauseIcon") + getAlterations().then((alterations) => { + loadAlterations(alterations, false) + }) + } + }) } document.addEventListener("DOMContentLoaded", initial); diff --git a/apps/mocksi-lite/utils.ts b/apps/mocksi-lite/utils.ts index 76b45a42..21e32974 100644 --- a/apps/mocksi-lite/utils.ts +++ b/apps/mocksi-lite/utils.ts @@ -46,6 +46,7 @@ export const setRootPosition = (state: RecordingState | null) => { const bottom = state === RecordingState.READY || state === RecordingState.CREATE || + state === RecordingState.HIDDEN || state === RecordingState.PLAY; extensionRoot.className = bottom ? "bottom-extension" : "top-extension"; } From 57570b70449f3c73de1f3400e5e43cd6f1c4c0e5 Mon Sep 17 00:00:00 2001 From: nicolaschapur Date: Wed, 26 Jun 2024 16:32:58 -0300 Subject: [PATCH 2/4] [NC]: biome fixes --- apps/mocksi-lite/background.ts | 27 +++++++++----- apps/mocksi-lite/content/ContentApp.tsx | 2 +- .../content/Popup/CreateDemo/DemoItem.tsx | 25 ++++++------- .../mocksi-lite/content/Toast/HiddenToast.tsx | 13 +++---- apps/mocksi-lite/content/Toast/PlayToast.tsx | 17 ++++----- apps/mocksi-lite/content/content.tsx | 35 ++++++++++++------- 6 files changed, 68 insertions(+), 51 deletions(-) diff --git a/apps/mocksi-lite/background.ts b/apps/mocksi-lite/background.ts index 4e39e799..0e72d827 100644 --- a/apps/mocksi-lite/background.ts +++ b/apps/mocksi-lite/background.ts @@ -1,7 +1,13 @@ import MocksiRollbar from "./MocksiRollbar"; -import {STORAGE_KEY, SignupURL, WebSocketURL, MOCKSI_RECORDING_STATE, RecordingState} from "./consts"; +import { + MOCKSI_RECORDING_STATE, + RecordingState, + STORAGE_KEY, + SignupURL, + WebSocketURL, +} from "./consts"; import { apiCall } from "./networking"; -import {getAlterations, getEmail, loadAlterations, logout} from "./utils"; +import { getAlterations, getEmail, loadAlterations, logout } from "./utils"; export interface Alteration { selector: string; @@ -316,10 +322,15 @@ function allEventHandler( } const setPlayMode = async (url?: string) => { - const [result] = await chrome.tabs.query({ active: true, lastFocusedWindow: true }) - await chrome.tabs.create({url}); - await chrome.action.setIcon({ path: "./public/pause-icon.png" }); - await chrome.storage.local.set({ [MOCKSI_RECORDING_STATE]: RecordingState.HIDDEN }); + const [result] = await chrome.tabs.query({ + active: true, + lastFocusedWindow: true, + }); + await chrome.tabs.create({ url }); + await chrome.action.setIcon({ path: "./public/pause-icon.png" }); + await chrome.storage.local.set({ + [MOCKSI_RECORDING_STATE]: RecordingState.HIDDEN, + }); }; let currentTabId: number | undefined; @@ -368,8 +379,8 @@ chrome.runtime.onMessage.addListener( } if (request.message === "playMode") { - const url: string = request.body?.url as string; - setPlayMode(url ?? ""); + const url: string = request.body?.url as string; + setPlayMode(url ?? ""); return true; } diff --git a/apps/mocksi-lite/content/ContentApp.tsx b/apps/mocksi-lite/content/ContentApp.tsx index 23612d93..a4315000 100644 --- a/apps/mocksi-lite/content/ContentApp.tsx +++ b/apps/mocksi-lite/content/ContentApp.tsx @@ -50,7 +50,7 @@ function ShadowContentApp({ isOpen, email, initialState }: ContentProps) { case RecordingState.EDITING: return ; case RecordingState.PLAY: - case RecordingState.HIDDEN: + case RecordingState.HIDDEN: return ; // case RecordingState.HIDDEN: // return ( diff --git a/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx b/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx index d4e87024..906cdde4 100644 --- a/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx +++ b/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx @@ -8,7 +8,7 @@ import { } from "../../../consts"; import editIcon from "../../../public/edit-icon.png"; import playIcon from "../../../public/play-icon.png"; -import {loadAlterations, sendMessage} from "../../../utils"; +import { loadAlterations, sendMessage } from "../../../utils"; import { setEditorMode } from "../../EditMode/editMode"; interface DemoItemProps extends Recording { @@ -23,7 +23,7 @@ const DemoItem = ({ alterations, url, }: DemoItemProps) => { - const domain = new URL(url).hostname; + const domain = new URL(url).hostname; const handleEdit = () => { setEditorMode(true, uuid); loadAlterations(alterations, true); @@ -33,14 +33,14 @@ const DemoItem = ({ const handlePlay = async () => { await chrome.storage.local.set({ [MOCKSI_ALTERATIONS]: alterations }); await chrome.storage.local.set({ [MOCKSI_RECORDING_ID]: uuid }); - if (window.location.href === url) { - sendMessage("updateToPauseIcon"); - loadAlterations(alterations, false); - setState(RecordingState.HIDDEN); - } else { - sendMessage("playMode", {url}) - } - }; + if (window.location.href === url) { + sendMessage("updateToPauseIcon"); + loadAlterations(alterations, false); + setState(RecordingState.HIDDEN); + } else { + sendMessage("playMode", { url }); + } + }; return (
@@ -66,10 +66,7 @@ const DemoItem = ({ diff --git a/apps/mocksi-lite/content/Toast/HiddenToast.tsx b/apps/mocksi-lite/content/Toast/HiddenToast.tsx index 3a603ffa..5141e9bf 100644 --- a/apps/mocksi-lite/content/Toast/HiddenToast.tsx +++ b/apps/mocksi-lite/content/Toast/HiddenToast.tsx @@ -4,11 +4,12 @@ import Button, { Variant } from "../../common/Button"; import TextField from "../../common/TextField"; import { RecordingState } from "../../consts"; import { - getAlterations, - getRecordingsStorage, - loadAlterations, - loadRecordingId, - sendMessage, undoModifications, + getAlterations, + getRecordingsStorage, + loadAlterations, + loadRecordingId, + sendMessage, + undoModifications, } from "../../utils"; import { setEditorMode } from "../EditMode/editMode"; import Divider from "../Popup/Divider"; @@ -42,7 +43,7 @@ const HiddenToast = ({ onChangeState, close }: HiddenToastProps) => { }; const handleClose = () => { - undoModifications(); + undoModifications(); sendMessage("resetIcon"); onChangeState(RecordingState.CREATE); close(); diff --git a/apps/mocksi-lite/content/Toast/PlayToast.tsx b/apps/mocksi-lite/content/Toast/PlayToast.tsx index 48c08cdd..88cb865b 100644 --- a/apps/mocksi-lite/content/Toast/PlayToast.tsx +++ b/apps/mocksi-lite/content/Toast/PlayToast.tsx @@ -19,7 +19,7 @@ interface PlayToastProps { } const PlayToast = ({ onChangeState, close }: PlayToastProps) => { const handleEdit = async () => { - sendMessage("resetIcon"); + sendMessage("resetIcon"); const alterations = await getAlterations(); loadAlterations(alterations, true); setEditorMode(true); @@ -31,11 +31,11 @@ const PlayToast = ({ onChangeState, close }: PlayToastProps) => { close(); }; - const handleStop = () => { - sendMessage("resetIcon"); - undoModifications(); - onChangeState(RecordingState.CREATE); - }; + const handleStop = () => { + sendMessage("resetIcon"); + undoModifications(); + onChangeState(RecordingState.CREATE); + }; return ( @@ -50,10 +50,7 @@ const PlayToast = ({ onChangeState, close }: PlayToastProps) => {
{"labeledIcon"}
-