Fixed the Mapping of Admin page colums fixed the styling issue with b…

…ounty Title might want to not use hardcoded 200px value
gouravmpk · Feb 22, 2024 · d890c73 · d890c73
1 parent f8fa748
commit d890c73
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/src/pages/superadmin/tableComponent/TableStyle.tsx b/src/pages/superadmin/tableComponent/TableStyle.tsx
@@ -60,7 +60,7 @@ export const PaginatonSection = styled.div`
 `;
 
 export const Header = styled.div`
-  display: flex;
+	display: flex;
   justify-content: space-between;
   align-items: center;
 `;
@@ -89,8 +89,8 @@ export const TableDataRow = styled.tr`
 export const TableData = styled.td`
   text-align: left;
   white-space: wrap;
-  width: 350.588px;
   font-size: 14px;
+	width: 350.588px;
   padding-left: 50px;
   color: var(--Primary-Text-1, var(--Press-Icon-Color, #292c33));
   font-family: Barlow;
@@ -102,9 +102,9 @@ export const TableData = styled.td`
 export const BountyData = styled.td`
   text-align: left;
   white-space: wrap;
-  width: 350.588px;
   font-size: 14px;
   padding-left: 50px;
+	width: 350.588px;
   color: var(--Primary-Text-1, var(--Press-Icon-Color, #292c33));
   font-family: Barlow;
   font-style: normal;

diff --git a/src/pages/superadmin/tableComponent/__tests__/TableComponent.spec.tsx b/src/pages/superadmin/tableComponent/__tests__/TableComponent.spec.tsx
@@ -36,7 +36,7 @@ const mockBounties: Bounty[] = [
     assigneeImage: '',
     provider: 'Provider 1',
     providerImage: 'provider-image-1.jpg',
-    organization: 'Org 1',
+    organization_name: 'Org 1',
     organizationImage: 'org-image-1.jpg',
     paid: false,
     assignee_alias: 'Ednum',
@@ -54,7 +54,7 @@ const mockBounties: Bounty[] = [
     assigneeImage: 'assignee-image-2.jpg',
     provider: 'Provider 2',
     providerImage: 'provider-image-2.jpg',
-    organization: 'Org 2',
+    organization_name: 'Org 2',
     organizationImage: 'org-image-2.jpg',
     status: 'assigned',
     paid: false,
@@ -72,7 +72,7 @@ const mockBounties: Bounty[] = [
     assigneeImage: 'assignee-image-3.jpg',
     provider: 'Provider 3',
     providerImage: 'provider-image-3.jpg',
-    organization: 'Org 3',
+    organization_name: 'Org 3',
     organizationImage: 'org-image-3.jpg',
     status: 'paid',
     paid: true,
@@ -93,7 +93,7 @@ const unSortedMockBounties: Bounty[] = [
     assigneeImage: 'assignee-image-2.jpg',
     provider: 'Provider 2',
     providerImage: 'provider-image-2.jpg',
-    organization: 'Org 2',
+    organization_name: 'Org 2',
     organizationImage: 'org-image-2.jpg',
     status: 'paid',
     paid: false,
@@ -111,7 +111,7 @@ const unSortedMockBounties: Bounty[] = [
     assigneeImage: '',
     provider: 'Provider 1',
     providerImage: 'provider-image-1.jpg',
-    organization: 'Org 1',
+    organization_name: 'Org 1',
     organizationImage: 'org-image-1.jpg',
     paid: false,
     assignee_alias: 'Ednum',
@@ -129,7 +129,7 @@ const unSortedMockBounties: Bounty[] = [
     assigneeImage: 'assignee-image-3.jpg',
     provider: 'Provider 3',
     providerImage: 'provider-image-3.jpg',
-    organization: 'Org 3',
+    organization_name: 'Org 3',
     organizationImage: 'org-image-3.jpg',
     status: 'assigned',
     paid: true,
@@ -251,7 +251,7 @@ describe('MyTable Component', () => {
       expect(getByText(dates[index])).toBeInTheDocument();
       // expect(getByText(String(bounty.dtgp))).toBeInTheDocument();
       // expect(getByText(bounty.provider)).toBeInTheDocument();
-      expect(getByText(bounty.organization)).toBeInTheDocument();
+      expect(getByText(bounty.organization_name)).toBeInTheDocument();
     });
   });
 
@@ -305,7 +305,7 @@ describe('MyTable Component', () => {
         '035f22835fbf55cf4e6823447c63df74012d1d587ed60ef7cbfa3e430278c44cce:03a6ea2d9ead2120b12bd66292bb4a302c756983dc45dcb2b364b461c66fd53bcb:1099517001729',
       providerImage:
         'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
-      organization: 'OrganizationName',
+      organization_name: 'OrganizationName',
       organizationImage:
         'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
       status: 'open',
@@ -359,7 +359,7 @@ describe('MyTable Component', () => {
         '035f22835fbf55cf4e6823447c63df74012d1d587ed60ef7cbfa3e430278c44cce:03a6ea2d9ead2120b12bd66292bb4a302c756983dc45dcb2b364b461c66fd53bcb:1099517001729',
       providerImage:
         'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
-      organization: 'OrganizationName',
+      organization_name: 'OrganizationName',
       organizationImage:
         'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
       status: 'open',

diff --git a/src/pages/superadmin/tableComponent/index.tsx b/src/pages/superadmin/tableComponent/index.tsx
@@ -480,7 +480,15 @@ export const MyTable = ({
                   <TableDataRow key={bounty?.id}>
                     <BountyData className="avg">
                       <a
-                        style={{ textDecoration: 'inherit', color: 'inherit' }}
+                        style={{
+                          textDecoration: 'inherit',
+                          color: 'inherit',
+                          display: 'block',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          width: '200px'
+                        }}
                         href={`/bounty/${bounty.bounty_id}`}
                         target="_blank"
                         rel="noopener noreferrer"
@@ -492,19 +500,19 @@ export const MyTable = ({
                     <TableDataCenter>{time_to_pay}</TableDataCenter>
                     <TableDataAlternative>
                       <ImageWithText
-                        text={bounty?.assignee}
+                        text={bounty?.assignee_alias}
                         image={bounty?.assignee_img || defaultPic}
                       />
                     </TableDataAlternative>
                     <TableDataAlternative className="address">
                       <ImageWithText
-                        text={bounty?.owner_pubkey}
-                        image={bounty?.providerImage || defaultPic}
+                        text={bounty?.owner_unique_name}
+                        image={bounty?.owner_img || defaultPic}
                       />
                     </TableDataAlternative>
                     <TableData className="organization">
                       <ImageWithText
-                        text={bounty?.organization}
+                        text={bounty?.organization_name}
                         image={bounty?.organization_img || defaultPic}
                       />
                     </TableData>

diff --git a/src/pages/superadmin/tableComponent/interfaces.ts b/src/pages/superadmin/tableComponent/interfaces.ts
@@ -10,7 +10,7 @@ export type Bounty = {
   assigneeImage: string;
   provider: string;
   providerImage: string;
-  organization: string;
+  organization_name: string;
   organizationImage: string;
   status: string;
   assignee_alias: string;

diff --git a/src/pages/superadmin/tableComponent/mockBountyData.ts b/src/pages/superadmin/tableComponent/mockBountyData.ts
@@ -10,7 +10,7 @@ export const bounties = [
       '035f22835fbf55cf4e6823447c63df74012d1d587ed60ef7cbfa3e430278c44cce:03a6ea2d9ead2120b12bd66292bb4a302c756983dc45dcb2b364b461c66fd53bcb:1099517001729',
     provider:
       '035f22835fbf55cf4e6823447c63df74012d1d587ed60ef7cbfa3e430278c44cce:03a6ea2d9ead2120b12bd66292bb4a302c756983dc45dcb2b364b461c66fd53bcb:1099517001729',
-    organization: 'OrganizationName',
+    organization_name: 'OrganizationName',
     status: 'open',
     assigneeImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
@@ -19,7 +19,9 @@ export const bounties = [
     organizationImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
     bounty_created: '2023-10-04T14:58:50.441223Z',
-    paid_date: '2023-10-04T14:58:50.441223Z'
+    paid_date: '2023-10-04T14:58:50.441223Z',
+    assignee_alias: 'gk',
+    paid: true
   },
   {
     id: 2,
@@ -30,7 +32,7 @@ export const bounties = [
     dtgp: 1,
     assignee: 'John Doe',
     provider: 'Jane Doe',
-    organization: 'Doe Inc.',
+    organization_name: 'Doe Inc.',
     status: 'paid',
     assigneeImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
@@ -39,7 +41,9 @@ export const bounties = [
     organizationImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
     bounty_created: '2023-10-04T14:58:50.441223Z',
-    paid_date: '2023-10-04T14:58:50.441223Z'
+    paid_date: '2023-10-04T14:58:50.441223Z',
+    assignee_alias: 'gk',
+    paid: false
   },
   {
     id: 3,
@@ -50,7 +54,7 @@ export const bounties = [
     dtgp: 1,
     assignee: 'John Doe',
     provider: 'Jane Doe',
-    organization: 'Doe Inc.',
+    organization_name: 'Doe Inc.',
     status: 'assigned',
     assigneeImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
@@ -59,6 +63,8 @@ export const bounties = [
     organizationImage:
       'https://avatars.githubusercontent.com/u/10001?s=460&u=8c61f1cda5e9e2c2d1d5b8d2a5a8a5b8d2a5a8a5&v=4',
     bounty_created: '2023-10-04T14:58:50.441223Z',
-    paid_date: '2023-10-04T14:58:50.441223Z'
+    paid_date: '2023-10-04T14:58:50.441223Z',
+    assignee_alias: 'gk',
+    paid: false
   }
 ];