Skip to content

Commit

Permalink
Merge pull request #126 from HunnySajid/feat/dialog-comm
Browse files Browse the repository at this point in the history 
fix: improve communication between content-script and popup
  • Loading branch information
@HunnySajid
HunnySajid committed Mar 7, 2024
2 parents 44b570a + 1945488 commit 71584aa
Show file tree
Hide file tree
Showing 10 changed files with 167 additions and 123 deletions.
2 changes: 1 addition & 1 deletion src/_locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"action.delete": "Delete",
"action.disconnect": "Disconnect",
"action.load": "Load",
"action.open": "Open",
"action.open": "open",
"action.save": "Save",
"action.select": "Select",
"action.toProceed": "to proceed",
Expand Down
34 changes: 13 additions & 21 deletions src/components/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const StyledMainContainer = styled.div`

export function Main(props: IMain): JSX.Element {
const [activeSidebar, setActiveSidebar] = useState(SIDEBAR[0]);
const [tabState, setTabState] = useState(TAB_STATE.DEFAULT);
const [currentTabState, setCurrentTabState] = useState(TAB_STATE.NONE);

const fetchTabState = async () => {
chrome.tabs.query(
Expand All @@ -34,21 +34,21 @@ export function Main(props: IMain): JSX.Element {
});
if (!data) return;

if (data?.appState) {
setTabState(data?.appState);
if (data?.tabState) {
setCurrentTabState(data?.tabState);
if (
data?.appState === TAB_STATE.SELECT_IDENTIFIER ||
data?.appState === TAB_STATE.SELECT_CREDENTIAL ||
data?.appState === TAB_STATE.SELECT_ID_CRED
data?.tabState === TAB_STATE.SELECT_IDENTIFIER ||
data?.tabState === TAB_STATE.SELECT_CREDENTIAL ||
data?.tabState === TAB_STATE.SELECT_ID_CRED
) {
setActiveSidebar(
data?.appState === TAB_STATE.SELECT_IDENTIFIER ||
data?.appState === TAB_STATE.SELECT_ID_CRED
data?.tabState === TAB_STATE.SELECT_IDENTIFIER ||
data?.tabState === TAB_STATE.SELECT_ID_CRED
? SIDEBAR[0]
: SIDEBAR[1]
);
}
if (data?.appState === TAB_STATE.SELECT_AUTO_SIGNIN) {
if (data?.tabState === TAB_STATE.SELECT_AUTO_SIGNIN) {
setActiveSidebar(SIDEBAR[2]);
}
}
Expand All @@ -64,8 +64,8 @@ export function Main(props: IMain): JSX.Element {
switch (activeSidebar?.id) {
case SIDEBAR_KEYS.credentials:
if (
tabState === TAB_STATE.SELECT_CREDENTIAL ||
tabState === TAB_STATE.SELECT_ID_CRED
currentTabState === TAB_STATE.SELECT_CREDENTIAL ||
currentTabState === TAB_STATE.SELECT_ID_CRED
)
return <SelectCredential />;

Expand All @@ -75,22 +75,15 @@ export function Main(props: IMain): JSX.Element {

default:
if (
tabState === TAB_STATE.SELECT_IDENTIFIER ||
tabState === TAB_STATE.SELECT_ID_CRED
currentTabState === TAB_STATE.SELECT_IDENTIFIER ||
currentTabState === TAB_STATE.SELECT_ID_CRED
)
return <SelectIdentifier />;

return <IdentifierList />;
}
};

const isSidebarDisabled = () => {
return (
tabState === TAB_STATE.SELECT_IDENTIFIER ||
tabState === TAB_STATE.SELECT_CREDENTIAL
);
};

return (
<main className="w-[640px]">
<Sidebar
Expand All @@ -99,7 +92,6 @@ export function Main(props: IMain): JSX.Element {
onSignout={props.handleDisconnect}
logo={props?.logo}
title={props?.title}
// disabled={isSidebarDisabled()}
/>
<StyledMainContainer className="rounded p-2 sm:ml-48 sm:mt-4 mr-4">
<div className="">
Expand Down
23 changes: 16 additions & 7 deletions src/components/selectCredential.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,22 @@ export function SelectCredential(): JSX.Element {
credential,
},
});
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
});
});
window.close();
chrome.tabs.query(
{ active: true, currentWindow: true },
async function (tabs) {
const { data } = await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "get-tab-state",
});
await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: data?.tabState,
});

window.close();
}
);
};

useEffect(() => {
Expand Down
23 changes: 16 additions & 7 deletions src/components/selectIdentifier.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,22 @@ export function SelectIdentifier(): JSX.Element {
},
});

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
});
});
window.close();
chrome.tabs.query(
{ active: true, currentWindow: true },
async function (tabs) {
const { data } = await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "get-tab-state",
});
await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: data?.tabState,
});

window.close();
}
);
};

useEffect(() => {
Expand Down
43 changes: 28 additions & 15 deletions src/components/signinList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useState, useEffect } from "react";
import { useIntl } from "react-intl";
import { TAB_STATE } from "@pages/popup/constants";
import { SigninCard } from "@components/signinCard";
import { Loader } from "@components/ui";
import { IMessage, ISignin } from "@config/types";
Expand Down Expand Up @@ -36,13 +35,20 @@ export function SigninList(): JSX.Element {
});
if (data?.isDeleted) {
setSignins(data?.signins);
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: TAB_STATE.SELECT_IDENTIFIER,
});
});
chrome.tabs.query(
{ active: true, currentWindow: true },
async function (tabs) {
const { data } = await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "get-tab-state",
});
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: data?.tabState,
});
}
);
}
};

Expand All @@ -60,13 +66,20 @@ export function SigninList(): JSX.Element {
});
if (data?.signins) {
setSignins(data?.signins);
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: TAB_STATE.SELECT_IDENTIFIER,
});
});
chrome.tabs.query(
{ active: true, currentWindow: true },
async function (tabs) {
const { data } = await chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "get-tab-state",
});
chrome.tabs.sendMessage(tabs[0].id!, {
type: "tab",
subtype: "reload-state",
eventType: data?.tabState,
});
}
);
}
};

Expand Down
81 changes: 51 additions & 30 deletions src/pages/content/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { createRoot } from "react-dom/client";
import { LocaleProvider } from "@src/_locales";
import { IMessage } from "@config/types";
import "./style.css";
import { TAB_STATE } from "@pages/popup/constants";
import { Dialog } from "../dialog/Dialog";
import { TAB_STATE } from "../popup/constants";
import "./style.css";

var tabState = TAB_STATE.NONE;

Expand Down Expand Up @@ -33,7 +33,6 @@ window.addEventListener(
case TAB_STATE.SELECT_CREDENTIAL:
case TAB_STATE.SELECT_ID_CRED:
case TAB_STATE.SELECT_AUTO_SIGNIN:
setTabState(TAB_STATE.DEFAULT);
const respVendorData = await chrome.runtime.sendMessage<
IMessage<void>
>({
Expand All @@ -51,28 +50,11 @@ window.addEventListener(
subtype: "tab-signin",
});

let filteredSignins: any[] = [];
tabSigninResp?.data?.signins.forEach((signin: any) => {
if (
signin.identifier &&
(event.data.type === TAB_STATE.SELECT_IDENTIFIER ||
event.data.type === TAB_STATE.SELECT_ID_CRED)
) {
filteredSignins.push(signin);
}
if (
signin.credential &&
(event.data.type === TAB_STATE.SELECT_CREDENTIAL ||
event.data.type === TAB_STATE.SELECT_ID_CRED)
) {
if (
!event.data.schema ||
signin.credential.schema.id === event.data.schema
) {
filteredSignins.push(signin);
}
}
});
const filteredSignins = getFilteredSignins(
tabSigninResp?.data?.signins,
event.data.type,
event.data.schema
);

insertDialog(
data.isConnected,
Expand Down Expand Up @@ -157,10 +139,15 @@ chrome.runtime.onMessage.addListener(async function (
type: "fetch-resource",
subtype: "tab-signin",
});
const filteredSignins = getFilteredSignins(
tabSigninResp?.data?.signins,
message.eventType,
message.schema
);
insertDialog(
data.isConnected,
data.tabUrl,
tabSigninResp?.data?.signins,
filteredSignins,
message.eventType ?? "",
tabSigninResp?.data?.autoSigninObj,
respVendorData?.data?.vendorData
Expand All @@ -170,14 +157,14 @@ chrome.runtime.onMessage.addListener(async function (

if (message.type === "tab" && message.subtype === "get-tab-state") {
if (sender.origin?.startsWith("chrome-extension://")) {
sendResponse({ data: { appState: getTabState() } });
sendResponse({ data: { tabState: getTabState() } });
} else {
return Promise.resolve({ data: { appState: getTabState() } });
return Promise.resolve({ data: { tabState: getTabState() } });
}
}

if (message.type === "tab" && message.subtype === "set-tab-state") {
setTabState(message.data.appState);
setTabState(message.data.tabState);
}
}
});
Expand Down Expand Up @@ -205,7 +192,10 @@ function insertDialog(
signins={signins}
autoSigninObjExists={!!autoSigninObj}
eventType={eventType}
removeDialog={removeDialog}
handleRemove={() => {
removeDialog();
setTabState(TAB_STATE.NONE);
}}
/>
</LocaleProvider>
);
Expand All @@ -216,6 +206,37 @@ function removeDialog() {
if (element) element.remove();
}

// TODO: proper types for these params
function getFilteredSignins(
signins: any,
currentTabState: any,
credentialSchema: any
) {
let filteredSignins: any[] = [];
signins.forEach((signin: any) => {
if (
signin.identifier &&
(currentTabState === TAB_STATE.SELECT_IDENTIFIER ||
currentTabState === TAB_STATE.SELECT_ID_CRED)
) {
filteredSignins.push(signin);
}
if (
signin.credential &&
(currentTabState === TAB_STATE.SELECT_CREDENTIAL ||
currentTabState === TAB_STATE.SELECT_ID_CRED)
) {
if (
!credentialSchema ||
signin.credential.schema.id === credentialSchema
) {
filteredSignins.push(signin);
}
}
});
return filteredSignins;
}

export function setTabState(state: string) {
console.log("setTabState: " + state);
tabState = state;
Expand Down
Loading

0 comments on commit 71584aa

Please sign in to comment.