Last active
August 9, 2023 07:15
-
-
Save vinomanick/919ad40ab98716695837c207526ee156 to your computer and use it in GitHub Desktop.
React MFE admin app files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, | |
body { | |
margin: 0; | |
padding: 0; | |
width: 100vw; | |
height: 100vh; | |
} | |
section { | |
padding: 2rem 1rem; | |
} | |
a, | |
button { | |
padding: 0.5rem; | |
border-radius: 8px; | |
font-weight: 500; | |
text-decoration: inherit; | |
border: solid 1px transparent; | |
transition: border-color 0.25s; | |
} | |
a { | |
margin: 0.5rem; | |
display: inline-block; | |
color: #646cff; | |
background-color: #f9f9f9; | |
} | |
a:hover { | |
color: #535bf2; | |
border: solid 1px #646cff; | |
} | |
a.active { | |
background-color: #646cff; | |
color: white; | |
} | |
button { | |
margin: 0.5rem 0; | |
font-size: 1rem; | |
background-color: #f9f9f9; | |
cursor: pointer; | |
} | |
button:hover { | |
border-color: #646cff; | |
} | |
button:focus, | |
button:focus-visible { | |
outline: 4px auto -webkit-focus-ring-color; | |
} | |
.admin-mfe { | |
width: 100%; | |
height: 100%; | |
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | |
line-height: 1.5; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint-disable @typescript-eslint/no-explicit-any */ | |
/* eslint-disable react-refresh/only-export-components */ | |
import { useEffect } from "react"; | |
import { | |
createBrowserRouter, | |
Navigate, | |
NavLink, | |
Outlet, | |
useNavigate, | |
} from "react-router-dom"; | |
const navigateToHostRoute = ({ route }: { route: string }) => { | |
return parent.postMessage( | |
{ type: "navigateToHost", payload: { route } }, | |
window.location.origin | |
); | |
}; | |
const RootPage = () => { | |
const navigate = useNavigate(); | |
useEffect(() => { | |
const handleListener = (event: any) => { | |
const { data } = event; | |
if (data.type === "navigateToAdminMfeHome") { | |
navigate("/admin"); | |
} | |
}; | |
window.addEventListener("message", handleListener); | |
return () => window.removeEventListener("message", handleListener); | |
}, [navigate]); | |
return ( | |
<div className="admin-mfe"> | |
<Outlet /> | |
</div> | |
); | |
}; | |
export const generateRouter = (options = {}) => | |
createBrowserRouter( | |
[ | |
{ | |
path: "/", | |
element: <RootPage />, | |
children: [ | |
{ index: true, element: <Navigate to="/admin" /> }, | |
{ | |
path: "/admin", | |
element: <Outlet />, | |
children: [ | |
{ | |
index: true, | |
element: ( | |
<section> | |
<div>Admin page rendered from react</div> | |
<NavLink to="/admin/groups">Groups</NavLink> | |
</section> | |
), | |
}, | |
{ | |
path: "groups", | |
element: ( | |
<section> | |
<div>Groups page rendered from react</div> | |
<button | |
onClick={() => | |
navigateToHostRoute({ route: "/dashboard" }) | |
} | |
> | |
Navigate to host app dashboard | |
</button> | |
</section> | |
), | |
}, | |
], | |
}, | |
], | |
}, | |
], | |
options | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment