Integrate grill modal

src/components/posts/ModerateButton.tsx

@@ -1,8 +1,10 @@
 import { useIsAdmin } from 'src/rtk/features/moderation/hooks'
+import { useModerationContext } from './ModerationProvider'
 
-export default function ModerateButton() {
+export default function ModerateButton({ postId }: { postId: string }) {
   const isAdmin = useIsAdmin()
+  const { openModal } = useModerationContext()
   if (!isAdmin) return null
 
-  return <div>Moderate</div>
+  return <div onClick={() => openModal(postId)}>Moderate</div>
 }

src/components/posts/ModerationProvider.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { isDevMode } from 'src/config/env'
+import { parseGrillMessage } from 'src/utils/iframe'
+import { getCurrentUrlOrigin } from 'src/utils/url'
+
+type State = {
+  openModal: (postId: string) => void
+}
+
+const Context = React.createContext<State>({ openModal: () => undefined })
+
+export default function ModerationProvider({ children }: { children: ReactNode }) {
+  const [isOpenModal, setIsOpenModal] = useState(false)
+  const iframeRef = useRef<HTMLIFrameElement | null>(null)
+
+  useEffect(() => {
+    window.onmessage = event => {
+      const message = parseGrillMessage(event.data + '')
+      if (!message) return
+
+      const { name, value } = message
+      if (name === 'moderation' && value === 'close') {
+        setIsOpenModal(false)
+      }
+    }
+  }, [])
+
+  const value = useMemo(() => {
+    return {
+      openModal: (postId: string) => {
+        if (isDevMode) return
+        iframeRef.current?.contentWindow?.postMessage(
+          {
+            type: 'grill:moderate',
+            payload: postId,
+          },
+          '*',
+        )
+        setIsOpenModal(true)
+      },
+    }
+  }, [])
+
+  return (
+    <Context.Provider value={value}>
+      {!isDevMode && (
+        <iframe
+          ref={iframeRef}
+          src={`${getCurrentUrlOrigin()}/c/widget/moderation`}
+          style={{
+            opacity: isOpenModal ? 1 : 0,
+            pointerEvents: isOpenModal ? 'auto' : 'none',
+            border: 'none',
+            transition: 'opacity 0.3s ease-in-out',
+            colorScheme: 'none',
+            background: 'transparent',
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+          }}
+        />
+      )}
+      {children}
+    </Context.Provider>
+  )
+}
+
+export function useModerationContext() {
+  return React.useContext(Context)
+}

src/components/posts/view-post/PostDropDownMenu.tsx

@@ -59,7 +59,7 @@ const InnerPostDropDownMenu: FC<DropdownProps> = props => {
         )}
         {isAdmin && (
           <Menu.Item key={`moderate-${postId}`}>
-            <ModerateButton />
+            <ModerateButton postId={postId} />
           </Menu.Item>
         )}
         {canHidePost && (

src/components/profile-selector/MyAccountMenu.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router'
 import React, { createContext, FC, useContext, useEffect, useRef, useState } from 'react'
+import { parseGrillMessage } from 'src/utils/iframe'
 import { getCurrentUrlOrigin } from 'src/utils/url'
 import { InfoDetails } from '../profiles/address-views'
 import Avatar from '../profiles/address-views/Avatar'
@@ -66,24 +67,14 @@ const MyAccountDrawerContext = createContext<MyAccountSectionContextState>(initV
 
 export const useMyAccountDrawer = () => useContext(MyAccountDrawerContext)
 
-function parseMessage(data: string) {
-  const match = data.match(/^([^:]+):([^:]+):(.+)$/)
-  if (!match) return null
-
-  const origin = match[1]
-  const name = match[2]
-  const value = match[3]
-  if (origin !== 'grill') return null
-  return { name: name ?? '', value: value ?? '' }
-}
 export const AccountMenu: React.FunctionComponent<AddressProps> = ({ address, owner }) => {
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
   const [isOpenProfileModal, setIsOpenProfileModal] = useState(false)
   const router = useRouter()
 
   useEffect(() => {
     window.onmessage = event => {
-      const message = parseMessage(event.data + '')
+      const message = parseGrillMessage(event.data + '')
       if (!message) return
 
       const { name, value } = message
@@ -126,6 +117,7 @@ export const AccountMenu: React.FunctionComponent<AddressProps> = ({ address, ow
             opacity: isOpenProfileModal ? 1 : 0,
             pointerEvents: isOpenProfileModal ? 'auto' : 'none',
             transition: 'opacity 0.3s ease-in-out',
+            border: 'none',
             colorScheme: 'none',
             background: 'transparent',
             position: 'fixed',

src/pages/_app.js

@@ -39,6 +39,7 @@ import { DatahubSubscriber } from 'src/components/utils/datahub/subscriber'
 import Script from 'next/script'
 import { initAllStores } from 'src/stores/registry'
 import { ReferralUrlChanger } from 'src/components/referral/ReferralUrlChanger'
+import ModerationProvider from 'src/components/posts/ModerationProvider'
 
 dayjs.extend(relativeTime)
 dayjs.extend(localizedFormat)
@@ -92,11 +93,13 @@ function MyApp(props) {
         <AnalyticProvider>
           <DfApolloProvider initialApolloState={pageProps.initialApolloState}>
             <ThemeProvider defaultTheme='light'>
-              <MainPage>
-                <ReferralUrlChanger />
-                <AppLaunchedEventSender />
-                <Component {...pageProps} />
-              </MainPage>
+              <ModerationProvider>
+                <MainPage>
+                  <ReferralUrlChanger />
+                  <Component {...pageProps} />
+                  <AppLaunchedEventSender />
+                </MainPage>
+              </ModerationProvider>
             </ThemeProvider>
           </DfApolloProvider>
         </AnalyticProvider>

src/utils/iframe.ts

@@ -0,0 +1,10 @@
+export function parseGrillMessage(data: string) {
+  const match = data.match(/^([^:]+):([^:]+):(.+)$/)
+  if (!match) return null
+
+  const origin = match[1]
+  const name = match[2]
+  const value = match[3]
+  if (origin !== 'grill') return null
+  return { name: name ?? '', value: value ?? '' }
+}