diff options
Diffstat (limited to 'src/components/Content')
| -rw-r--r-- | src/components/Content/Content.tsx | 19 |
1 files changed, 11 insertions, 8 deletions
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index e670376..94fca32 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx | |||
| @@ -4,7 +4,7 @@ import { Headers, RequestPayload, ResponsePayload } from "~hooks/useRequests"; | |||
| 4 | import ReactJson from "react-json-view"; | 4 | import ReactJson from "react-json-view"; |
| 5 | import styles from "~/components/Content/Content.module.scss"; | 5 | import styles from "~/components/Content/Content.module.scss"; |
| 6 | import { Button, Col, Container, Row } from "react-bootstrap"; | 6 | import { Button, Col, Container, Row } from "react-bootstrap"; |
| 7 | import { DarkModeContext } from "~/contexts/DarkMode"; | 7 | import { SettingsContext } from "~/contexts/Settings"; |
| 8 | 8 | ||
| 9 | function getHeader( | 9 | function getHeader( |
| 10 | headers: Headers, | 10 | headers: Headers, |
| @@ -80,14 +80,14 @@ export default function Content({ | |||
| 80 | } | 80 | } |
| 81 | 81 | ||
| 82 | function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) { | 82 | function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) { |
| 83 | const { darkMode } = useContext(DarkModeContext); | 83 | const { darkMode } = useContext(SettingsContext); |
| 84 | const contentType = useMemo(() => { | 84 | const contentType = useMemo(() => { |
| 85 | if (raw) { | 85 | if (raw) { |
| 86 | return ""; | 86 | return ""; |
| 87 | } | 87 | } |
| 88 | 88 | ||
| 89 | const type = getHeader(data.headers, "content-type"); | 89 | const type = getHeader(data.headers, "content-type"); |
| 90 | return type.toLowerCase().split(";")[0]; | 90 | return type?.toLowerCase().split(";")[0]; |
| 91 | }, [data, raw]); | 91 | }, [data, raw]); |
| 92 | 92 | ||
| 93 | if (raw) { | 93 | if (raw) { |
| @@ -98,7 +98,10 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) { | |||
| 98 | ); | 98 | ); |
| 99 | } | 99 | } |
| 100 | 100 | ||
| 101 | if (["application/pdf", "text/html"].includes(contentType)) { | 101 | if ( |
| 102 | contentType !== undefined && | ||
| 103 | ["application/pdf", "text/html"].includes(contentType) | ||
| 104 | ) { | ||
| 102 | return ( | 105 | return ( |
| 103 | <iframe | 106 | <iframe |
| 104 | className="bg-white" | 107 | className="bg-white" |
| @@ -110,7 +113,7 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) { | |||
| 110 | ); | 113 | ); |
| 111 | } | 114 | } |
| 112 | 115 | ||
| 113 | if (contentType.startsWith("application/json")) { | 116 | if (contentType?.startsWith("application/json")) { |
| 114 | return ( | 117 | return ( |
| 115 | <ReactJson | 118 | <ReactJson |
| 116 | src={JSON.parse(atob(data.body))} | 119 | src={JSON.parse(atob(data.body))} |
| @@ -125,15 +128,15 @@ function ContentBody({ data, raw = false }: Omit<ContentProps, "setRaw">) { | |||
| 125 | ); | 128 | ); |
| 126 | } | 129 | } |
| 127 | 130 | ||
| 128 | if (contentType.startsWith("audio")) { | 131 | if (contentType?.startsWith("audio")) { |
| 129 | return <audio src={`data:${contentType};base64,${data.body}`} />; | 132 | return <audio src={`data:${contentType};base64,${data.body}`} />; |
| 130 | } | 133 | } |
| 131 | 134 | ||
| 132 | if (contentType.startsWith("video")) { | 135 | if (contentType?.startsWith("video")) { |
| 133 | return <video src={`data:${contentType};base64,${data.body}`} />; | 136 | return <video src={`data:${contentType};base64,${data.body}`} />; |
| 134 | } | 137 | } |
| 135 | 138 | ||
| 136 | if (contentType.startsWith("image")) { | 139 | if (contentType?.startsWith("image")) { |
| 137 | return <img src={`data:${contentType};base64,${data.body}`} alt="" />; | 140 | return <img src={`data:${contentType};base64,${data.body}`} alt="" />; |
| 138 | } | 141 | } |
| 139 | 142 | ||
