From feb6a02b7fbbc9a503ee1e3a08fe70d1fd2aa4af Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Mon, 18 Dec 2023 19:13:08 +0530
Subject: [PATCH] Fix telegram string and array issue (#571)

* fix solution action

* fix telegram string and array issue

* update telegram_handle

* fix handle and URL

* fix tests

* prettier update

* fix tests

* prettier update
---
 playwright-tests/tests/community.spec.js    | 10 ++--
 src/devhub/entity/addon/telegram/Viewer.jsx | 59 +++++++++++----------
 src/devhub/page/community/index.jsx         | 22 +++++---
 src/devhub/page/create.jsx                  |  6 ++-
 4 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/playwright-tests/tests/community.spec.js b/playwright-tests/tests/community.spec.js
index c42ddc331..fc29c3db9 100644
--- a/playwright-tests/tests/community.spec.js
+++ b/playwright-tests/tests/community.spec.js
@@ -1,12 +1,10 @@
 import { test, expect } from "@playwright/test";
 
 test("should load a community page if handle exists", async ({ page }) => {
-  await page.goto(
-    "/devgovgigs.near/widget/app?page=community&handle=devhub-test"
-  );
+  await page.goto("/devhub.near/widget/app?page=community&handle=devhub-test");
 
   // Using the <Link> that wraps the tabs to identify a community page loaded
-  const communityTabSelector = `a[href^="/devgovgigs.near/widget/app?page=community&handle=devhub-test&tab="]`;
+  const communityTabSelector = `a[href^="/devhub.near/widget/app?page=community&handle=devhub-test&tab="]`;
 
   // Wait for the tab to be visible
   await page.waitForSelector(communityTabSelector, {
@@ -44,7 +42,7 @@ test.describe("Wallet is connected", () => {
     page,
   }) => {
     await page.goto(
-      "/devgovgigs.near/widget/app?page=community&handle=devhub-test"
+      "/devhub.near/widget/app?page=community&handle=devhub-test"
     );
 
     const postButtonSelector = 'a:has-text("Post")';
@@ -61,7 +59,7 @@ test.describe("Wallet is connected", () => {
 
     // Verify that the URL is the expected one.
     expect(page.url()).toBe(
-      "http://localhost:8080/devgovgigs.near/widget/app?page=create&labels=devhub-test"
+      "http://localhost:8080/devhub.near/widget/app?page=create&labels=devhub-test"
     );
 
     // Wait for the Typeahead field to render.
diff --git a/src/devhub/entity/addon/telegram/Viewer.jsx b/src/devhub/entity/addon/telegram/Viewer.jsx
index 4959daf74..122fd32a4 100644
--- a/src/devhub/entity/addon/telegram/Viewer.jsx
+++ b/src/devhub/entity/addon/telegram/Viewer.jsx
@@ -18,34 +18,39 @@ if (!handles || handles.length === 0) {
 } else {
   return (
     <div>
-      {(handles || []).map((tg) => (
-        <>
-          <iframe
-            iframeResizer
-            src={
-              "https://j96g3uepe0.execute-api.us-east-1.amazonaws.com/groups-ui/" +
-              tg
-            }
-            frameborder="0"
-            // width and minWidth required by iframeResizer
-            style={{
-              width: "1px",
-              minWidth: "100%",
-              marginTop: "20px",
-            }}
-          ></iframe>
-
-          <a href={"https://t.me/" + tg} target="_blank">
-            <Widget
-              src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
-              props={{
-                classNames: { root: "btn-primary" },
-                label: "View More",
+      {(handles || []).map((tg) => {
+        const pattern = /https:\/\/t.me\/(.*)/;
+        const includesHttp = tg.match(pattern);
+        const handle = includesHttp ? includesHttp[1] : tg;
+        return (
+          <>
+            <iframe
+              iframeResizer
+              src={
+                "https://j96g3uepe0.execute-api.us-east-1.amazonaws.com/groups-ui/" +
+                handle
+              }
+              frameborder="0"
+              // width and minWidth required by iframeResizer
+              style={{
+                width: "1px",
+                minWidth: "100%",
+                marginTop: "20px",
               }}
-            />
-          </a>
-        </>
-      ))}
+            ></iframe>
+
+            <a href={includesHttp ? tg : "https://t.me/" + tg} target="_blank">
+              <Widget
+                src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+                props={{
+                  classNames: { root: "btn-primary" },
+                  label: "View More",
+                }}
+              />
+            </a>
+          </>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/devhub/page/community/index.jsx b/src/devhub/page/community/index.jsx
index d65f5aed7..c4667d364 100644
--- a/src/devhub/page/community/index.jsx
+++ b/src/devhub/page/community/index.jsx
@@ -110,6 +110,14 @@ function trimHttps(url) {
   return url;
 }
 
+// some communties have url as handle (eg: devhub platform) while others has correct handle
+function checkTelegramHandle(tg) {
+  const pattern = /https:\/\/t.me\/(.*)/;
+  const includesHttp = tg.match(pattern);
+  const handle = includesHttp ? includesHttp[1] : tg;
+  return { handle, url: "https://t.me/" + handle };
+}
+
 const socialLinks = [
   ...((community.website_url?.length ?? 0) > 0
     ? [
@@ -141,12 +149,14 @@ const socialLinks = [
       ]
     : []),
 
-  ...(community.telegram_handle.length > 0
-    ? community.telegram_handle.map((telegram_handle) => ({
-        href: `https://t.me/${telegram_handle}`,
-        iconClass: "bi bi-telegram",
-        name: telegram_handle,
-      }))
+  ...(community.telegram_handle?.length > 0
+    ? [
+        {
+          href: checkTelegramHandle(community.telegram_handle).url,
+          iconClass: "bi bi-telegram",
+          name: checkTelegramHandle(community.telegram_handle).handle,
+        },
+      ]
     : []),
 ];
 
diff --git a/src/devhub/page/create.jsx b/src/devhub/page/create.jsx
index 70a1c62eb..54ecdb65e 100644
--- a/src/devhub/page/create.jsx
+++ b/src/devhub/page/create.jsx
@@ -2,7 +2,7 @@ State.init({
   seekingFunding: false,
   author_id: context.accountId,
   // Should be a list of objects with field "name".
-  labels,
+  labels: [],
   // Should be a list of labels as strings.
   // Both of the label structures should be modified together.
   labelStrings: [],
@@ -96,6 +96,10 @@ const labels = labelStrings.map((s) => {
   return { name: s };
 });
 
+State.update({
+  labels,
+});
+
 if (state.waitForDraftStateRestore) {
   const draftstatestring = Storage.privateGet(DRAFT_STATE_STORAGE_KEY);
   if (draftstatestring != null) {