diff --git a/src/assets/js/components/popup/proposal.jsx b/src/assets/js/components/popup/proposal.jsx
index aabbcc5..ca32da7 100644
--- a/src/assets/js/components/popup/proposal.jsx
+++ b/src/assets/js/components/popup/proposal.jsx
@@ -16,7 +16,6 @@ import {
State,
} from '@/main';
import {
- setAssetDashboardLink,
setShowProposal,
setShowSuccess,
} from '@/features/popup/popupSlice';
@@ -233,7 +232,12 @@ export const Proposal = (props) => {
setButtonState(state ? 'update' : 'add');
dispatch(setShowSuccess(true));
- dispatch(setAssetDashboardLink(getAssetDashboardLink(result[0].id)));
+
+ const event = new CustomEvent('set-asset-dashboard-link', {
+ detail: getAssetDashboardLink(result[0].id)
+ });
+ document.dispatchEvent(event);
+
dispatch(setShowProposal(false));
})
.catch((error) => {
diff --git a/src/assets/js/components/popup/success.jsx b/src/assets/js/components/popup/success.jsx
index c96185e..9525904 100644
--- a/src/assets/js/components/popup/success.jsx
+++ b/src/assets/js/components/popup/success.jsx
@@ -1,9 +1,7 @@
import React from 'react';
import { useSelector } from 'react-redux';
-export const Success = () => {
- const assetDashboardLink = useSelector((state) => state.popup.assetDashboardLink);
-
+export const Success = ({ assetDashboardLink }) => {
const openAssetDashboard = () => {
window.open(assetDashboardLink);
};
diff --git a/src/assets/js/features/popup/popupSlice.js b/src/assets/js/features/popup/popupSlice.js
index 3676f9d..c8a3aab 100644
--- a/src/assets/js/features/popup/popupSlice.js
+++ b/src/assets/js/features/popup/popupSlice.js
@@ -3,16 +3,12 @@ import { createSlice } from '@reduxjs/toolkit';
const popupSlice = createSlice({
name: 'popup',
initialState: {
- loading: false,
showSignIn: true,
showProposal: false,
showSuccess: false,
assetDashboardLink: '',
},
reducers: {
- setLoading: (state, action) => {
- state.loading = action.payload;
- },
setShowSignIn: (state, action) => {
state.showSignIn = action.payload;
},
@@ -22,14 +18,10 @@ const popupSlice = createSlice({
setShowSuccess: (state, action) => {
state.showSuccess = action.payload;
},
- setAssetDashboardLink: (state, action) => {
- state.assetDashboardLink = action.payload;
- },
},
});
export const {
- setLoading,
setShowSignIn,
setShowProposal,
setShowSuccess,
diff --git a/src/assets/js/popup.jsx b/src/assets/js/popup.jsx
index c75dfcb..b7a23a3 100644
--- a/src/assets/js/popup.jsx
+++ b/src/assets/js/popup.jsx
@@ -2,7 +2,10 @@
import ReactDOM from 'react-dom/client';
import React from 'react';
-import { useEffect } from 'react';
+import {
+ useEffect,
+ useState,
+} from 'react';
import {
Provider,
useDispatch,
@@ -31,6 +34,8 @@ const PopupPage = () => {
const showProposal = useSelector((state) => state.popup.showProposal);
const showSuccess = useSelector((state) => state.popup.showSuccess);
+ const [assetDashboardLink, setAssetDashboardLink] = useState('');
+
useEffect(() => {
browser.storage.sync.get('token').then((result) => {
if (result.token) {
@@ -38,13 +43,17 @@ const PopupPage = () => {
dispatch(setShowProposal(true));
}
});
+
+ document.addEventListener('set-asset-dashboard-link', (event) => {
+ setAssetDashboardLink(event.detail);
+ });
}, []);
return (
<>
{showSignIn && }
{showProposal && }
- {showSuccess && }
+ {showSuccess && }
>
);
}