feat: add update page based on notion (#112)

* feat: add update page based on notion

* style: update asynchronous pattern

Co-authored-by: Copilot <[email protected]>

* refactor: UpdatePage to use constants for default IDs

---------

Co-authored-by: Copilot <[email protected]>

Author: MBP16

package.json

@@ -45,7 +45,8 @@
     "react-slick": "^0.29.0",
     "redux": "^4.0.0",
     "slick-carousel": "^1.8.1",
-    "zabo-embed": "^0.0.7"
+    "zabo-embed": "^0.0.7",
+    "react-notion": "^0.10.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.1",

src/index.tsx

@@ -38,6 +38,7 @@ import ko from '@/translations/translation.ko.json';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import UpdatePage from '@/pages/UpdatePage';
 
 declare global {
   interface Window {
@@ -177,6 +178,7 @@ const router = createBrowserRouter([
       { path: 'error/:message', element: <ErrorPage /> },
       { path: 'login/success', element: <LoginSuccessHandler /> },
       { path: 'developer-login', element: <DeveloperLoginPage /> },
+      { path: 'update', element: <UpdatePage /> },
       { path: '*', element: <Navigate to="/" /> },
     ],
   },

src/pages/UpdatePage.tsx

@@ -0,0 +1,55 @@
+import { NotionRenderer } from 'react-notion';
+
+import { useEffect, useState } from 'react';
+
+import 'react-notion/src/styles.css';
+import 'prismjs/themes/prism-tomorrow.css';
+import { appBoundClassNames as classNames } from '@/common/boundClassNames';
+
+const DEFAULT_PAGE_ID = '23ac25603b0b80f8b343d2324a7e2131';
+const OFFICIAL_SPACE_ID = 'ca8b3bc6-6b17-4a1f-8f57-2dd4b58a84f7';
+
+const UpdatePage = () => {
+  const [blockMap, setBlockMap] = useState(null);
+  const query = new URLSearchParams(window.location.search);
+  const pageId = query.get('pageId') || DEFAULT_PAGE_ID;
+  const [spaceId, setSpaceId] = useState('');
+
+  useEffect(() => {
+    const fetchNotionData = async () => {
+      const res = await fetch(`https://notion-api.splitbee.io/v1/page/${pageId}`);
+      const json = await res.json();
+      Object.keys(json).forEach((key) => {
+        if (json[key].role === 'none') {
+          delete json[key];
+        } else {
+          setSpaceId(json[key].value.space_id);
+        }
+      });
+      setBlockMap(json);
+    };
+    fetchNotionData();
+  }, []);
+  useEffect(() => {
+    if (spaceId !== '' && spaceId !== OFFICIAL_SPACE_ID) {
+      window.location.href = '/update';
+    }
+  }, [spaceId]);
+
+  return (
+    <section className={classNames('content', 'content--no-scroll')}>
+      {blockMap !== null && spaceId === OFFICIAL_SPACE_ID && (
+        <NotionRenderer
+          blockMap={blockMap}
+          fullPage={true}
+          hideHeader={true}
+          mapPageUrl={(pageId) => {
+            return '/update?' + new URLSearchParams({ pageId: pageId });
+          }}
+        />
+      )}
+    </section>
+  );
+};
+
+export default UpdatePage;

yarn.lock

@@ -4202,7 +4202,7 @@ inflight@^1.0.4:
 
 inherits@2:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 [email protected]:
@@ -5479,7 +5479,7 @@ minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
 
 minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.8"
-  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
 moment@^2.29.2:
@@ -5639,7 +5639,7 @@ object.values@^1.1.6:
 
 once@^1.3.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
@@ -5923,6 +5923,11 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.21.0:
+  version "1.30.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.30.0.tgz#d9709969d9d4e16403f6f348c63553b19f0975a9"
+  integrity sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==
+
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz"
@@ -6063,6 +6068,13 @@ react-markdown@^7.1.0:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-notion@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-notion/-/react-notion-0.10.0.tgz#d30876b681b09d91dc671b04c7f604adb4e2499e"
+  integrity sha512-i5lVAxzSs7GnTpIbKtivPQWxGZiKCO5xmCmMJyn6F91y8X1IIJqnypkK+31F2acb1l1Qd8Yv0ktuvXwz9g49NQ==
+  dependencies:
+    prismjs "^1.21.0"
+
 react-redux@^7.2.1:
   version "7.2.9"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"