Use NextJS middleware for proxying

This commit is contained in:
Darren Clarke 2023-05-30 09:05:40 +00:00 committed by GitHub
parent 4e4603bd71
commit df9b8abf15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 154 additions and 94 deletions

View file

@ -1,4 +1,5 @@
import { FC, useState } from "react";
import getConfig from "next/config";
import { useRouter } from "next/router";
import Iframe from "react-iframe";
@ -13,13 +14,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
}) => {
const router = useRouter();
const [display, setDisplay] = useState("none");
const url = `${origin}/zammad${path}`;
console.log({ origin, path, url });
const {
publicRuntimeConfig: { linkURL },
} = getConfig();
const url = `${linkURL}/proxy/zammad${path}`;
console.log({ url });
return (
// @ts-ignore
<Iframe
id="link"
id="zammad"
url={url}
width="100%"
height="100%"
@ -27,6 +31,8 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
styles={{ display }}
onLoad={() => {
const linkElement = document.querySelector("iframe");
// const baseElement = linkElement.contentDocument.createElement("base");
// baseElement.href = `${linkURL}/proxy/zammad`;
if (
linkElement.contentDocument &&
linkElement.contentDocument?.querySelector &&
@ -50,15 +56,16 @@ export const InternalZammadWrapper: FC<InternalZammadWrapperProps> = ({
// @ts-ignore
if (linkElement.contentDocument.querySelector(".overview-header")) {
// @ts-ignore
linkElement.contentDocument.querySelector(".overview-header").style =
"display: none";
linkElement.contentDocument.querySelector(
".overview-header"
).style = "display: none";
}
setDisplay("inherit");
if (linkElement.contentWindow) {
linkElement.contentWindow.addEventListener('hashchange', () => {
const hash = linkElement.contentWindow?.location?.hash ?? ""
linkElement.contentWindow.addEventListener("hashchange", () => {
const hash = linkElement.contentWindow?.location?.hash ?? "";
if (hash.startsWith("#ticket/zoom/")) {
setDisplay("none");
const ticketID = hash.split("/").pop();

View file

@ -11,9 +11,9 @@ type LeafcutterWrapperProps = {
export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
const {
publicRuntimeConfig: { leafcutterURL },
publicRuntimeConfig: { linkURL },
} = getConfig();
const fullLeafcutterURL = `${leafcutterURL}/${path}`;
const fullLeafcutterURL = `${linkURL}/proxy/leafcutter/${path}`;
return (
<Layout>
@ -28,7 +28,7 @@ export const LeafcutterWrapper: FC<LeafcutterWrapperProps> = ({ path }) => {
>
<Grid item sx={{ height: "100vh", width: "100%" }}>
<Iframe
id="link"
id="leafcutter"
url={fullLeafcutterURL}
width="100%"
height="100%"

View file

@ -0,0 +1,41 @@
import { FC } from "react";
import getConfig from "next/config";
import Head from "next/head";
import { Grid } from "@mui/material";
import { Layout } from "components/Layout";
import Iframe from "react-iframe";
type MetamigoWrapperProps = {
path: string;
};
export const MetamigoWrapper: FC<MetamigoWrapperProps> = ({ path }) => {
const {
publicRuntimeConfig: { linkURL },
} = getConfig();
const fullMetamigoURL = `${linkURL}/metamigo/${path}`;
return (
<Layout>
<Head>
<title>Link Shell</title>
</Head>
<Grid
container
spacing={0}
sx={{ height: "100%", width: "100%" }}
direction="column"
>
<Grid item sx={{ height: "100vh", width: "100%" }}>
<Iframe
id="link"
url={fullMetamigoURL}
width="100%"
height="100%"
frameBorder={0}
/>
</Grid>
</Grid>
</Layout>
);
};