Made it so you can open a leaderboard from an iframe notice.

gladly-team · Apr 20, 2024 · fa2520b · fa2520b
1 parent f841985
commit fa2520b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/components/notification/Notification.js b/src/components/notification/Notification.js
@@ -21,7 +21,7 @@ if (isBrowser) {
 // Example Overrides: ?notification-override=leaderboard-change-flat
 // Example Overrides: ?notification-override=leaderboard-change-down
 // Example Overrides: ?notification-override=leaderboard-change-up
-const Notification = ({ slot, user }) => {
+const Notification = ({ slot, user, onOpenLeaderboard }) => {
   const [show, setShow] = useState(true)
   const [height, setHeight] = useState(0)
 
@@ -51,6 +51,21 @@ const Notification = ({ slot, user }) => {
       setHeight(0)
     }
 
+    // See if we have any actions
+    if (event.data.action) {
+      switch (event.data.action) {
+        case 'leaderboard-open':
+          if (onOpenLeaderboard) {
+            onOpenLeaderboard()
+          }
+          break
+
+        // Default do nothing
+        default:
+          break
+      }
+    }
+
     // Log or use the received message
     // console.log('Received message from child:', event.data, event.origin)
   }
@@ -83,8 +98,12 @@ Notification.propTypes = {
   user: PropTypes.shape({
     userId: PropTypes.string,
   }).isRequired,
+
+  onOpenLeaderboard: PropTypes.func,
 }
 
-Notification.defaultProps = {}
+Notification.defaultProps = {
+  onOpenLeaderboard: null,
+}
 
 export default Notification
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -766,6 +766,10 @@ const Index = ({ data: fallbackData, userAgent }) => {
     setShowLeaderboardFunc(false)
   }
 
+  const openLeaderboard = () => {
+    setShowLeaderboardFunc(true)
+  }
+
   return (
     <>
       <Head>
@@ -864,9 +868,7 @@ const Index = ({ data: fallbackData, userAgent }) => {
                           backgroundColor: 'white',
                           boxShadow: '0px 2px 4px grey',
                         }}
-                        onClick={() =>
-                          setShowLeaderboardFunc(!showLeaderboardFunc)
-                        }
+                        onClick={openLeaderboard}
                       >
                         <div
                           style={{ display: 'flex', flexDirection: 'column' }}
@@ -978,7 +980,11 @@ const Index = ({ data: fallbackData, userAgent }) => {
              * that appear via the UserImpact component.
              */}
             <div className={classes.notificationsContainer}>
-              <Notification slot="top-right" user={user} />
+              <Notification
+                slot="top-right"
+                user={user}
+                onOpenLeaderboard={openLeaderboard}
+              />
 
               {/* <NotificationOld
                 className={classes.notification}