Add example for using custom_id and referrer_id (#44)

discord · Dec 17, 2024 · 5accb83 · 5accb83
1 parent f5012e0
commit 5accb83
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sdk-playground/packages/client/package.json b/sdk-playground/packages/client/package.json
@@ -13,7 +13,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@discord/embedded-app-sdk": "^1.7.0",
+    "@discord/embedded-app-sdk": "^1.8.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-scroll-area": "^1.0.1",
     "@stitches/react": "^1.2.1",

diff --git a/sdk-playground/packages/client/src/App.tsx b/sdk-playground/packages/client/src/App.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {BrowserRouter as Router, Routes, Route, Link, useLocation} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Link, useLocation, useNavigate} from 'react-router-dom';
 
 import * as Scrollable from './components/Scrollable';
 import {AuthProvider} from './components/AuthProvider';
@@ -43,6 +43,8 @@ import {useState} from 'react';
 import GetActivityInstance from "./pages/GetActivityInstance";
 import CloseActivity from "./pages/CloseActivity";
 
+import discordSdk from './discordSdk';
+
 // Add contexts here
 export default function App(): React.ReactElement {
   return (
@@ -230,9 +232,19 @@ const routes: Record<string, AppRoute> = {
   },
 };
 
+let navigateOnInit = true;
+
 function RootedApp(): React.ReactElement {
   const location = useLocation();
   const [query, setQuery] = useState('');
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (navigateOnInit && discordSdk.customId === 'PAGE_GET_SKUS') {
+      navigate('/get-skus');
+      navigateOnInit = false;
+    }
+  }, [navigate]);
 
   return (
     <S.SiteWrapper>

diff --git a/sdk-playground/packages/client/src/pages/Home.tsx b/sdk-playground/packages/client/src/pages/Home.tsx
@@ -17,7 +17,9 @@ export default function Home() {
       </p>
       <br></br>
       <h3> Basic Activity Info</h3>
+      <p> Custom ID: {discordSdk.customId} </p>
       <p> Instance ID: {instanceId} </p>
+      <p> Referrer ID: {discordSdk.referrerId} </p>
       <p> Client ID: {clientId} </p>
       <p> Channel ID: {channelId} </p>
       { guildId != null ? (<p> Guild ID: {guildId} </p>) : null }