From c85b23600ca1eff469b484e98a6d497d50e8fb1e Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Sat, 5 Oct 2024 19:33:31 +0530
Subject: [PATCH 1/6] added dropdown

---
 constants.js                            | 2 +-
 users/discord/App.js                    | 6 +++---
 users/discord/components/TabsSection.js | 5 +++--
 users/discord/style.css                 | 7 +++++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/constants.js b/constants.js
index 2095f752..dedb3189 100644
--- a/constants.js
+++ b/constants.js
@@ -1,4 +1,4 @@
-const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
+const API_BASE_URL = window.API_BASE_URL || 'https://staging-api.realdevsquad.com';
 const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
diff --git a/users/discord/App.js b/users/discord/App.js
index 87fa873d..bed5c6aa 100644
--- a/users/discord/App.js
+++ b/users/discord/App.js
@@ -7,10 +7,10 @@ import { NoUserFound } from './components/NoUserFound.js';
 const { createElement, rerender } = react;
 
 const tabs = [
-  { display_name: 'In Discord', id: 'in_discord' },
-  { display_name: 'Linked Accounts', id: 'verified' },
+  { display_name: 'In Discord', id: 'in_discord', value: '1' },
+  { display_name: 'Linked Accounts', id: 'verified', value: '2' }, // added a value property to each option
 ];
-export const usersData = {
+export const usersData = { //caches data, try caching current select tab here
   in_discord: null,
   verified: null,
 };
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js
index 15c69408..f6487ba8 100644
--- a/users/discord/components/TabsSection.js
+++ b/users/discord/components/TabsSection.js
@@ -2,14 +2,15 @@ const { createElement } = react;
 
 export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
   return createElement(
-    'div',
+    'select',
     { class: 'tabs_section', onclick: handleTabNavigation },
     tabs.map((tabItem) => {
       return createElement(
-        'span',
+        'option',
         {
           data_key: `${tabItem.id}`,
           class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
+          value: `${tabItem.value}`, // added a value property to each option
         },
         [tabItem.display_name],
       );
diff --git a/users/discord/style.css b/users/discord/style.css
index 23058547..bdaa7415 100644
--- a/users/discord/style.css
+++ b/users/discord/style.css
@@ -24,13 +24,16 @@ main {
 }
 
 .tabs_section {
-  padding: 1rem 0;
+  padding: 1rem;
   margin: 1rem;
   grid-area: tab;
+  width: 18rem;
+  border: 2px solid gray;
+  font-size: unset;
 }
 
 .tab {
-  padding: 0.5rem;
+  padding: 1rem;
   margin-inline-end: 0.5rem;
   cursor: pointer;
 }

From 2d1437692656b618f0761390aca8098da8a88dcf Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Sat, 19 Oct 2024 20:10:02 +0530
Subject: [PATCH 2/6] draft: add dropdown on discord user page to combine
 'linked account' and 'n discord' buttons

---
 constants.js                            | 3 ++-
 users/discord/App.js                    | 6 +++---
 users/discord/components/TabsSection.js | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/constants.js b/constants.js
index dedb3189..2a873bab 100644
--- a/constants.js
+++ b/constants.js
@@ -1,4 +1,5 @@
-const API_BASE_URL = window.API_BASE_URL || 'https://staging-api.realdevsquad.com';
+const API_BASE_URL =
+  window.API_BASE_URL || 'https://staging-api.realdevsquad.com';
 const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
diff --git a/users/discord/App.js b/users/discord/App.js
index bed5c6aa..dda5017e 100644
--- a/users/discord/App.js
+++ b/users/discord/App.js
@@ -7,10 +7,10 @@ import { NoUserFound } from './components/NoUserFound.js';
 const { createElement, rerender } = react;
 
 const tabs = [
-  { display_name: 'In Discord', id: 'in_discord', value: '1' },
-  { display_name: 'Linked Accounts', id: 'verified', value: '2' }, // added a value property to each option
+  { display_name: 'In Discord', id: 'in_discord', value: 'In Discord' },
+  { display_name: 'Linked Accounts', id: 'verified', value: 'Verified' },
 ];
-export const usersData = { //caches data, try caching current select tab here
+export const usersData = {
   in_discord: null,
   verified: null,
 };
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js
index f6487ba8..2fa1bbd7 100644
--- a/users/discord/components/TabsSection.js
+++ b/users/discord/components/TabsSection.js
@@ -10,7 +10,11 @@ export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
         {
           data_key: `${tabItem.id}`,
           class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
-          value: `${tabItem.value}`, // added a value property to each option
+          // currently active_tab is alson not updating in chrome, check that issue
+          value: `${tabItem.value}`,
+          //look up: "https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected"
+          ...(activeTab === tabItem.id && { selected: 'true' }), // Apply selected="" if activeTab matches tabItem.id
+          // selected: activeTab === tabItem.id ? true : false,
         },
         [tabItem.display_name],
       );

From 2070a11957f8dd9bb131bd9d3b90a7756b8b0dec Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Wed, 30 Oct 2024 13:51:21 +0530
Subject: [PATCH 3/6] added dropdown in the discord users page

---
 users/discord/App.js                    | 6 +++---
 users/discord/components/TabsSection.js | 4 +---
 users/discord/utils/react.js            | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/users/discord/App.js b/users/discord/App.js
index dda5017e..2ecbb9e3 100644
--- a/users/discord/App.js
+++ b/users/discord/App.js
@@ -7,8 +7,8 @@ import { NoUserFound } from './components/NoUserFound.js';
 const { createElement, rerender } = react;
 
 const tabs = [
-  { display_name: 'In Discord', id: 'in_discord', value: 'In Discord' },
-  { display_name: 'Linked Accounts', id: 'verified', value: 'Verified' },
+  { display_name: 'In Discord', id: 'in_discord', value: 'in_discord' },
+  { display_name: 'Linked Accounts', id: 'verified', value: 'verified' },
 ];
 export const usersData = {
   in_discord: null,
@@ -22,7 +22,7 @@ let showUser = 0;
 usersData[activeTab] = await getUsers(activeTab);
 
 const handleTabNavigation = async (e) => {
-  const selectedTabId = e.target.getAttribute('data_key');
+  const selectedTabId = e.target.value;
   if (selectedTabId) {
     document.location.search = `tab=${selectedTabId}`;
 
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js
index 2fa1bbd7..0609a08f 100644
--- a/users/discord/components/TabsSection.js
+++ b/users/discord/components/TabsSection.js
@@ -3,16 +3,14 @@ const { createElement } = react;
 export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
   return createElement(
     'select',
-    { class: 'tabs_section', onclick: handleTabNavigation },
+    { class: 'tabs_section', onchange: handleTabNavigation }, // use onChange
     tabs.map((tabItem) => {
       return createElement(
         'option',
         {
           data_key: `${tabItem.id}`,
           class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
-          // currently active_tab is alson not updating in chrome, check that issue
           value: `${tabItem.value}`,
-          //look up: "https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected"
           ...(activeTab === tabItem.id && { selected: 'true' }), // Apply selected="" if activeTab matches tabItem.id
           // selected: activeTab === tabItem.id ? true : false,
         },
diff --git a/users/discord/utils/react.js b/users/discord/utils/react.js
index faa43304..3f6ccd09 100644
--- a/users/discord/utils/react.js
+++ b/users/discord/utils/react.js
@@ -8,7 +8,7 @@ const render = function (element, container) {
   const component = document.createElement(element.tag);
   element.props &&
     Object.keys(element.props).forEach((prop) =>
-      prop == 'onclick' || prop == 'onsubmit'
+      prop == 'onclick' || prop == 'onsubmit' || prop == 'onchange'
         ? (component[prop] = element.props[prop])
         : component.setAttribute(prop, element.props[prop]),
     );

From 8f337ac2af4967f4d9ee47172a0e18154769e716 Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Tue, 12 Nov 2024 23:33:05 +0530
Subject: [PATCH 4/6] Added dropdown option in the Discord Users page

---
 __tests__/users/App.test.js                   | 4 +---
 __tests__/users/Discord.test.js               | 0
 __tests__/users/applyFilterPagination.test.js | 5 +++--
 users/discord/components/TabsSection.js       | 5 ++---
 4 files changed, 6 insertions(+), 8 deletions(-)
 delete mode 100644 __tests__/users/Discord.test.js

diff --git a/__tests__/users/App.test.js b/__tests__/users/App.test.js
index 54cbbeeb..580a02aa 100644
--- a/__tests__/users/App.test.js
+++ b/__tests__/users/App.test.js
@@ -94,9 +94,7 @@ describe('App Component', () => {
 
   it('should update the URL query string and re-render the app', async () => {
     await page.waitForSelector('[data_key="verified"]');
-
-    // Click on the "Linked Accounts" tab
-    await page.click('[data_key="verified"]');
+    await page.select('.tabs_section', 'verified');
 
     // Get the current URL and make sure the query string has been updated
     const url = await page.url();
diff --git a/__tests__/users/Discord.test.js b/__tests__/users/Discord.test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/__tests__/users/applyFilterPagination.test.js b/__tests__/users/applyFilterPagination.test.js
index a987fa99..10aa9cc5 100644
--- a/__tests__/users/applyFilterPagination.test.js
+++ b/__tests__/users/applyFilterPagination.test.js
@@ -78,8 +78,9 @@ describe('Apply Filter and Pagination Functionality', () => {
   });
 
   it('should update the URL query string when applying filters', async () => {
-    // click on the "Verified" tab
-    await page.click('[data_key="verified"]');
+    // select option between 'in discord' and 'linked accounts' from the dropdoen
+    await page.waitForSelector('.tabs_section');
+    await page.select('.tabs_section', 'verified');
 
     // get the current URL
     const url = await page.url();
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js
index 0609a08f..55237978 100644
--- a/users/discord/components/TabsSection.js
+++ b/users/discord/components/TabsSection.js
@@ -3,7 +3,7 @@ const { createElement } = react;
 export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
   return createElement(
     'select',
-    { class: 'tabs_section', onchange: handleTabNavigation }, // use onChange
+    { class: 'tabs_section', onchange: handleTabNavigation },
     tabs.map((tabItem) => {
       return createElement(
         'option',
@@ -11,8 +11,7 @@ export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
           data_key: `${tabItem.id}`,
           class: `tab ${activeTab === tabItem.id ? 'active_tab' : ''}`,
           value: `${tabItem.value}`,
-          ...(activeTab === tabItem.id && { selected: 'true' }), // Apply selected="" if activeTab matches tabItem.id
-          // selected: activeTab === tabItem.id ? true : false,
+          ...(activeTab === tabItem.id && { selected: 'true' }),
         },
         [tabItem.display_name],
       );

From a868b68a2744fea30d1c87cbc0430c34fe118f63 Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Thu, 14 Nov 2024 00:03:58 +0530
Subject: [PATCH 5/6] used data test id for the tests and variable for css

---
 __tests__/users/App.test.js                   | 4 ++--
 __tests__/users/applyFilterPagination.test.js | 5 ++---
 constants.js                                  | 3 +--
 users/discord/components/TabsSection.js       | 6 +++++-
 users/discord/style.css                       | 3 ++-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/__tests__/users/App.test.js b/__tests__/users/App.test.js
index 580a02aa..f501677c 100644
--- a/__tests__/users/App.test.js
+++ b/__tests__/users/App.test.js
@@ -93,8 +93,8 @@ describe('App Component', () => {
   });
 
   it('should update the URL query string and re-render the app', async () => {
-    await page.waitForSelector('[data_key="verified"]');
-    await page.select('.tabs_section', 'verified');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // Get the current URL and make sure the query string has been updated
     const url = await page.url();
diff --git a/__tests__/users/applyFilterPagination.test.js b/__tests__/users/applyFilterPagination.test.js
index 10aa9cc5..e9561f0e 100644
--- a/__tests__/users/applyFilterPagination.test.js
+++ b/__tests__/users/applyFilterPagination.test.js
@@ -78,9 +78,8 @@ describe('Apply Filter and Pagination Functionality', () => {
   });
 
   it('should update the URL query string when applying filters', async () => {
-    // select option between 'in discord' and 'linked accounts' from the dropdoen
-    await page.waitForSelector('.tabs_section');
-    await page.select('.tabs_section', 'verified');
+    await page.waitForSelector('[data-testid="tabs-section-select"]');
+    await page.select('[data-testid="tabs-section-select"]', 'verified');
 
     // get the current URL
     const url = await page.url();
diff --git a/constants.js b/constants.js
index 2a873bab..2095f752 100644
--- a/constants.js
+++ b/constants.js
@@ -1,5 +1,4 @@
-const API_BASE_URL =
-  window.API_BASE_URL || 'https://staging-api.realdevsquad.com';
+const API_BASE_URL = window.API_BASE_URL || 'https://api.realdevsquad.com';
 const REPO_SYNC_API_URL =
   'https://staging-sync.staging-realdevsquad-com.workers.dev';
 const USER_MANAGEMENT_LINK = 'user-management-link';
diff --git a/users/discord/components/TabsSection.js b/users/discord/components/TabsSection.js
index 55237978..9e3ff12d 100644
--- a/users/discord/components/TabsSection.js
+++ b/users/discord/components/TabsSection.js
@@ -3,7 +3,11 @@ const { createElement } = react;
 export const TabsSection = ({ tabs, activeTab, handleTabNavigation }) => {
   return createElement(
     'select',
-    { class: 'tabs_section', onchange: handleTabNavigation },
+    {
+      class: 'tabs_section',
+      onchange: handleTabNavigation,
+      'data-testid': 'tabs-section-select',
+    },
     tabs.map((tabItem) => {
       return createElement(
         'option',
diff --git a/users/discord/style.css b/users/discord/style.css
index bdaa7415..c44c8f11 100644
--- a/users/discord/style.css
+++ b/users/discord/style.css
@@ -1,5 +1,6 @@
 :root {
   --light-gray: #d4d4d478;
+  --border-color-gray: #808080;
 }
 
 .header {
@@ -28,7 +29,7 @@ main {
   margin: 1rem;
   grid-area: tab;
   width: 18rem;
-  border: 2px solid gray;
+  border: 2px solid var(--border-color-gray);
   font-size: unset;
 }
 

From 45374b7e1241c7b9890a9cbcefc9e0c214e683f1 Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Sun, 17 Nov 2024 18:57:27 +0530
Subject: [PATCH 6/6] added a comment on react.js for future convenience

---
 users/discord/utils/react.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/users/discord/utils/react.js b/users/discord/utils/react.js
index 3f6ccd09..ed807527 100644
--- a/users/discord/utils/react.js
+++ b/users/discord/utils/react.js
@@ -8,6 +8,7 @@ const render = function (element, container) {
   const component = document.createElement(element.tag);
   element.props &&
     Object.keys(element.props).forEach((prop) =>
+      // based on requirements, any other type of event listner can be added here as 'prop'
       prop == 'onclick' || prop == 'onsubmit' || prop == 'onchange'
         ? (component[prop] = element.props[prop])
         : component.setAttribute(prop, element.props[prop]),