migrate marketing banner to ts

Author: medyo

package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/dompurify": "^2.3.4",
     "axios": "^0.21.2",
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",

src/App.js

@@ -3,7 +3,7 @@ import './App.css'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import BookmarksSidebar from './bookmark/BookmarksSidebar'
-import MarketingBanner from './components/MarketingBanner'
+import { MarketingBanner } from 'src/components/Elements/MarketingBanner'
 import ScrollCardsNavigator from './components/ScrollCardsNavigator'
 import AppContentLayout from './components/AppContentLayout'
 import 'react-contexify/dist/ReactContexify.css'

src/components/Elements/MarketingBanner/MarketingBanner.tsx

@@ -0,0 +1,14 @@
+import DOMPurify from 'dompurify'
+
+type MarketingBannerProps = {
+  show: boolean
+  htmlContent: string
+}
+export const MarketingBanner = ({ show, htmlContent }: MarketingBannerProps) => {
+  if (!show) {
+    return null
+  }
+  let cleanHtmlContent = DOMPurify.sanitize(htmlContent)
+
+  return <div className="marketingBanner" dangerouslySetInnerHTML={{ __html: cleanHtmlContent }} />
+}

src/components/Elements/MarketingBanner/index.ts

@@ -0,0 +1 @@
+export * from "./MarketingBanner"

src/components/MarketingBanner.js

@@ -2064,6 +2064,13 @@
   dependencies:
     "@types/ms" "*"
 
+"@types/dompurify@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.4.tgz#94e997e30338ea24d4c8d08beca91ce4dd17a1b4"
+  integrity sha512-EXzDatIb5EspL2eb/xPGmaC8pePcTHrkDCONjeisusLFrVfl38Pjea/R0YJGu3k9ZQadSvMqW0WXPI2hEo2Ajg==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/eslint@^7.29.0":
   version "7.29.0"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.29.0.tgz#e56ddc8e542815272720bb0b4ccc2aff9c3e1c78"
@@ -2291,6 +2298,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/trusted-types@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/uglify-js@*":
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.0.tgz#95271e7abe0bf7094c60284f76ee43232aef43b9"