fix: change query rpc to instance, fix opengraph post (#1702)

nekaartajaya · web-flow · commit 5e59d2ca73ca · 2023-02-08T14:33:50.000+07:00
* feat: change query param from rpc to instance

* fix: opengraph post
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "express": "^4.17.3",
     "firebase": "^8.6.2",
     "global": "^4.4.0",
-    "html-react-parser": "^1.4.9",
+    "html-react-parser": "^3.0.8",
     "http-proxy-middleware": "^2.0.4",
     "i18next": "^21.6.7",
     "i18next-browser-languagedetector": "^6.1.2",
diff --git a/pages/experience/[experienceId]/index.tsx b/pages/experience/[experienceId]/index.tsx
@@ -158,7 +158,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   if (anonymous) {
     const username = session?.user?.name ?? generateAnonymousUser();
-    const queryInstanceURL = query.rpc;
+    const queryInstanceURL = query.instance;
 
     apiURL = queryInstanceURL ?? cookiesInstanceURL ?? defaultInstanceURL;
     res.setHeader('set-cookie', [`${COOKIE_INSTANCE_URL}=${apiURL}`]);
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -120,7 +120,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   if (anonymous) {
     const username = generateAnonymousUser();
-    const queryInstanceURL = query.rpc;
+    const queryInstanceURL = query.instance;
 
     apiURL = queryInstanceURL ?? cookiesInstanceURL ?? defaultInstanceURL;
     res.setHeader('set-cookie', [`${COOKIE_INSTANCE_URL}=${apiURL}`]);
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -71,7 +71,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   const dispatch = store.dispatch as ThunkDispatchAction;
 
-  const queryInstanceURL = query.rpc;
+  const queryInstanceURL = query.instance;
   const cookiesInstanceURL = cookies[COOKIE_INSTANCE_URL];
   const defaultInstanceURL = serverRuntimeConfig.myriadAPIURL;
   const apiURL = queryInstanceURL ?? cookiesInstanceURL ?? defaultInstanceURL;
diff --git a/pages/post/[postId].tsx b/pages/post/[postId].tsx
@@ -14,10 +14,12 @@ import axios from 'axios';
 import {stringify} from 'components/PostCreate/formatter';
 import {PostDetailContainer} from 'components/PostDetail/PostDetail.container';
 import {COOKIE_INSTANCE_URL} from 'components/SelectServer';
+import parse from 'html-react-parser';
 import {TopNavbarComponent} from 'src/components/atoms/TopNavbar';
 import {TippingSuccess} from 'src/components/common/Tipping/render/Tipping.success';
 import {DefaultLayout} from 'src/components/template/Default/DefaultLayout';
 import {generateAnonymousUser} from 'src/helpers/auth';
+import {htmlToJson, isJson} from 'src/helpers/string';
 import {Post} from 'src/interfaces/post';
 import {User} from 'src/interfaces/user';
 import {initialize} from 'src/lib/api/base';
@@ -179,7 +181,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   if (anonymous) {
     const username = generateAnonymousUser();
-    const queryInstanceURL = query.rpc;
+    const queryInstanceURL = query.instance;
 
     apiURL = queryInstanceURL ?? cookiesInstanceURL ?? defaultInstanceURL;
     res.setHeader('set-cookie', [`${COOKIE_INSTANCE_URL}=${apiURL}`]);
@@ -219,9 +221,16 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   if (post?.platform === 'myriad') {
     const {text, image: imageData} = stringify(post);
+    const isHtmlContent = !isJson(text);
+    if (isHtmlContent) {
+      description = htmlToJson(parse(post.text)).text;
+      image = htmlToJson(parse(post.text)).img[0] ?? '';
+    } else {
+      description = text;
+      image = imageData;
+    }
+
     title = post?.title ?? `${post.user.name} on ${publicRuntimeConfig.appName}`;
-    description = text;
-    image = imageData;
   }
 
   if (post?.platform !== 'myriad') {
diff --git a/pages/profile/[id].tsx b/pages/profile/[id].tsx
@@ -124,7 +124,7 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async cont
 
   if (anonymous) {
     const username = generateAnonymousUser();
-    const queryInstanceURL = query.rpc;
+    const queryInstanceURL = query.instance;
 
     apiURL = queryInstanceURL ?? cookiesInstanceURL ?? defaultInstanceURL;
     res.setHeader('set-cookie', [`${COOKIE_INSTANCE_URL}=${apiURL}`]);
diff --git a/src/components/ExperiencePreview/ExperienceSignIn.tsx b/src/components/ExperiencePreview/ExperienceSignIn.tsx
@@ -26,7 +26,7 @@ export const ExperienceSignIn: React.FC<ExperienceSignInProps> = props => {
 
   const handleSignIn = async () => {
     onClose();
-    router.push(`/login?rpc=${cookies[COOKIE_INSTANCE_URL]}`);
+    router.push(`/login?instance=${cookies[COOKIE_INSTANCE_URL]}`);
   };
 
   return (
diff --git a/src/components/Mobile/MenuDrawer/MenuDrawer.tsx b/src/components/Mobile/MenuDrawer/MenuDrawer.tsx
@@ -118,11 +118,11 @@ export const MenuDrawerComponent: React.FC = () => {
   };
 
   const handleSignOut = async () => {
-    await logout(`/?rpc=${cookies[COOKIE_INSTANCE_URL]}`);
+    await logout(`/?instance=${cookies[COOKIE_INSTANCE_URL]}`);
   };
 
   const handleLoginOrCreateAccount = () => {
-    router.push({pathname: '/login', query: {rpc: cookies[COOKIE_INSTANCE_URL]}});
+    router.push({pathname: '/login', query: {instance: cookies[COOKIE_INSTANCE_URL]}});
   };
 
   const openMenu = (item: MenuDetail) => () => {
diff --git a/src/components/ProfileCard/ProfileCard.container.tsx b/src/components/ProfileCard/ProfileCard.container.tsx
@@ -37,11 +37,11 @@ export const ProfileCardContainer: React.FC<Props> = ({toggleNotification}) => {
   };
 
   const handleSignOut = async () => {
-    await logout(`/?rpc=${cookies[COOKIE_INSTANCE_URL]}`);
+    await logout(`/?instance=${cookies[COOKIE_INSTANCE_URL]}`);
   };
 
   const handleLoginOrCreateAccount = () => {
-    router.push({pathname: '/login', query: {rpc: cookies[COOKIE_INSTANCE_URL]}});
+    router.push({pathname: '/login', query: {instance: cookies[COOKIE_INSTANCE_URL]}});
   };
 
   const handleShowNotificationList = () => {
diff --git a/src/components/SelectServer/index.tsx b/src/components/SelectServer/index.tsx
@@ -96,7 +96,7 @@ const SelectServer = ({
     setSelectedServer(server);
 
     if (page === 'login') {
-      const query = {...router.query, rpc: server.apiUrl};
+      const query = {...router.query, instance: server.apiUrl};
       await router.replace({query}, undefined, {shallow: true});
       setCookies(COOKIE_INSTANCE_URL, server.apiUrl);
 
@@ -124,7 +124,7 @@ const SelectServer = ({
     const query = session?.user?.email
       ? `&email=${session.user.email}`
       : `&network=${currentWallet.networkId}`;
-    await logout(`/login?rpc=${server.apiUrl}${query}`);
+    await logout(`/login?instance=${server.apiUrl}${query}`);
   };
 
   const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
diff --git a/src/components/template/Default/DefaultLayout.tsx b/src/components/template/Default/DefaultLayout.tsx
@@ -125,12 +125,12 @@ const Default: React.FC<DefaultLayoutProps> = props => {
 
     const query = router.query;
 
-    if (query?.rpc?.toString() === rpc) return;
+    if (query?.instance?.toString() === rpc) return;
 
-    Object.assign(query, {rpc});
+    Object.assign(query, {instance: rpc});
 
     router.replace({pathname: router.pathname, query}, undefined, {shallow: true});
-  }, [cookies[COOKIE_INSTANCE_URL], router.query.rpc]);
+  }, [cookies[COOKIE_INSTANCE_URL], router.query.instance]);
 
   const processMessages = (payload?: NotificationProps) => {
     dispatch(countNewNotification());
diff --git a/src/helpers/string.ts b/src/helpers/string.ts
@@ -83,3 +83,68 @@ export const isJson = (value: string) => {
 
   return true;
 };
+
+export const htmlToJson = (html: any) => {
+  const img: string[] = [];
+  let text = '';
+
+  if (Array.isArray(html)) {
+    html.map(item => {
+      if (item.type === 'figure') {
+        if (item.props.children.type === 'img') {
+          const imgs = item.props.children.props.src;
+          img.push(imgs);
+        }
+      } else {
+        if (Array.isArray(item.props.children)) {
+          item.props.children.map(child => {
+            if (child.type === 'img') {
+              const imgs = child.props.src;
+              img.push(imgs);
+            } else {
+              if (typeof child === 'string') text += child;
+              else text += child.props.children;
+            }
+          });
+        } else {
+          if (item.type === 'img') {
+            const imgs = item.props.children.src;
+            img.push(imgs);
+          } else {
+            if (typeof item.props.children === 'string') text += item.props.children;
+            else text += item.props.children.props.children;
+          }
+        }
+      }
+    });
+  } else {
+    if (html.type === 'figure') {
+      if (html.props.children.type === 'img') {
+        const imgs = html.props.children.props.src;
+        img.push(imgs);
+      }
+    } else {
+      if (Array.isArray(html.props.children)) {
+        html.props.children.map(child => {
+          if (child.type === 'img') {
+            const imgs = child.props.src;
+            img.push(imgs);
+          } else {
+            if (typeof child === 'string') text += child;
+            else text += child.props.children;
+          }
+        });
+      } else {
+        if (html.type === 'img') {
+          const imgs = html.props.children.src;
+          img.push(imgs);
+        } else {
+          if (typeof html.props.children === 'string') text += html.props.children;
+          else text += html.props.children.props.children;
+        }
+      }
+    }
+  }
+
+  return {img, text};
+};
diff --git a/src/hooks/use-instances.hooks.ts b/src/hooks/use-instances.hooks.ts
@@ -182,7 +182,7 @@ export const useInstances = () => {
     window.localStorage.setItem(MYRIAD_WALLET_KEY, walletType);
     const pathname = router.pathname;
     const query = router.query;
-    await router.replace({pathname, query: {...query, rpc: server.apiUrl}});
+    await router.replace({pathname, query: {...query, instance: server.apiUrl}});
     onChangeInstance();
     setLoadingSwitch(false);
   };
@@ -193,9 +193,9 @@ export const useInstances = () => {
     const pathname = router.pathname;
     const query = router.query;
 
-    Object.assign(query, {rpc: server.apiUrl});
+    Object.assign(query, {instance: server.apiUrl});
 
-    await router.replace({pathname, query: {rpc: `${server.apiUrl}`}});
+    await router.replace({pathname, query: {instance: `${server.apiUrl}`}});
     await dispatch(setServer(server.detail, server.apiUrl));
     return;
   };
@@ -206,7 +206,7 @@ export const useInstances = () => {
 
     await requestLink(email, apiURL);
     setCookies(COOKIE_INSTANCE_URL, apiURL);
-    await logout(`/login?rpc=${apiURL}&switchInstance=true&email=${email}`);
+    await logout(`/login?instance=${apiURL}&switchInstance=true&email=${email}`);
   };
 
   return {
diff --git a/yarn.lock b/yarn.lock
