feat: save table design

webapp/src/components/AssetPage/BestBuyingOption/BestBuyingOption.tsx

@@ -22,7 +22,6 @@ import { LinkedProfile } from '../../LinkedProfile'
 import { BuyNFTButtons } from '../SaleActionBox/BuyNFTButtons'
 import { BuyOptions, Props } from './BestBuyingOption.types'
 import styles from './BestBuyingOption.module.css'
-import { BelowTabs } from '../ListingsTableContainer/ListingsTableContainer.types'
 import { useHistory, useLocation } from 'react-router-dom'
 
 const BestBuyingOption = ({ asset, tableRef }: Props) => {
@@ -40,14 +39,14 @@ const BestBuyingOption = ({ asset, tableRef }: Props) => {
   const handleViewOffers = () => {
     history.replace({
       pathname: location.pathname,
-      search: `selectedTableTab=${BelowTabs.OWNERS}`
+      search: `selectedTableTab=owners`
     })
     tableRef.current?.scrollIntoView({ block: 'center', behavior: 'smooth' })
   }
 
   useEffect(() => {
     if (asset && !isNFT(asset)) {
-      if (asset.available > 1) {
+      if (asset.available > 1 && asset.isOnSale) {
         setBuyOption(BuyOptions.MINT)
       } else {
         setIsLoading(true)

webapp/src/components/AssetPage/ListingsTable/ListingsTable.module.css

@@ -10,7 +10,7 @@
   padding: 20px !important;
 }
 
-.ListingsTable .issuedIdContainer {
+.issuedIdContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -23,16 +23,23 @@
   font-weight: 700;
 }
 
-.ListingsTable .row {
+.row {
   display: flex;
   flex-direction: row;
   gap: 10px;
+  justify-content: space-between;
   align-items: center;
 }
 
-.ListingsTable .badge {
+.badgeContainer :global(.dcl.badge) {
   color: white;
-  background-color: var(--background) !important;
+  background-color: transparent !important;
+}
+
+.badgeContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
 }
 
 .ListingsTable .goToNFT {
@@ -47,15 +54,21 @@
   justify-content: center;
 }
 
-.ListingsTable .manaField {
+.manaField {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  font-size: 14px;
 }
 
-.ListingsTable :global(.ui.header.dcl.mana) {
-  margin: 0px;
-  font-size: 15px;
+.manaField :global(.ui.header:last-child) {
+  font-size: 14px;
+}
+
+.viewListingContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-right: 10px;
 }
 
 @media (max-width: 768px) {

webapp/src/components/AssetPage/ListingsTable/ListingsTable.tsx

@@ -1,24 +1,27 @@
 import React, { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
+// import { Link } from 'react-router-dom'
 import { ListingStatus, Network } from '@dcl/schemas'
-import { Table, Loader, Row, Pagination, Icon, Mana } from 'decentraland-ui'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import { Order, OrderFilters, OrderSortBy } from '@dcl/schemas/dist/dapps/order'
+// import { Table, Loader, Row, Pagination, Icon, Mana } from 'decentraland-ui'
+// import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { OrderFilters, OrderSortBy } from '@dcl/schemas/dist/dapps/order'
 import { nftAPI, orderAPI } from '../../../modules/vendor/decentraland'
-import { locations } from '../../../modules/routing/locations'
-import { formatWeiMANA } from '../../../lib/mana'
-import { formatDistanceToNow, getDateAndMonthName } from '../../../lib/date'
-import { LinkedProfile } from '../../LinkedProfile'
+// import { locations } from '../../../modules/routing/locations'
+// import { formatWeiMANA } from '../../../lib/mana'
+// import { formatDistanceToNow, getDateAndMonthName } from '../../../lib/date'
+// import { LinkedProfile } from '../../LinkedProfile'
 import { Props } from './ListingsTable.types'
-import styles from './ListingsTable.module.css'
+// import styles from './ListingsTable.module.css'
+import { TableContent } from '../../Table/TableContent'
+import { DataTableType } from '../../Table/TableContent/TableContent.types'
+import { formatDataToTable } from './utils'
 
 export const ROWS_PER_PAGE = 6
 const INITIAL_PAGE = 1
 
 const ListingsTable = (props: Props) => {
   const { asset, sortBy = OrderSortBy.CHEAPEST } = props
 
-  const [orders, setOrders] = useState<Order[]>([])
+  const [orders, setOrders] = useState<DataTableType[]>([])
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(INITIAL_PAGE)
   const [totalPages, setTotalPages] = useState<number>(0)
@@ -61,110 +64,123 @@ const ListingsTable = (props: Props) => {
       orderAPI
         .fetchOrders(params, sortBy)
         .then(response => {
-          setOrders(response.data)
+          // setOrders(response.data)
           setTotalPages(Math.ceil(response.total / ROWS_PER_PAGE) || 0)
+          setOrders(formatDataToTable(response.data, total))
         })
         .finally(() => setIsLoading(false))
         .catch(error => {
           console.error(error)
         })
     }
-  }, [asset, setIsLoading, setOrders, sortBy, page])
+  }, [asset, setIsLoading, setOrders, sortBy, page, total])
 
   return (
-    <div className={styles.ListingsTable}>
-      {isLoading ? (
-        <div className={styles.emptyTable}>
-          <Loader active data-testid="loader" />
-        </div>
-      ) : orders.length === 0 ? (
-        <div className={styles.emptyTable}>
-          <span>{t('listings_table.there_are_no_listings')}</span>
-        </div>
-      ) : (
-        <>
-          <Table basic="very" data-testid="listings-table">
-            <Table.Header>
-              <Table.Row>
-                <Table.HeaderCell className={styles.headerMargin}>
-                  {t('listings_table.owner')}
-                </Table.HeaderCell>
-                <Table.HeaderCell>
-                  {t('listings_table.published_date')}
-                </Table.HeaderCell>
-                <Table.HeaderCell>
-                  {t('listings_table.expiration_date')}
-                </Table.HeaderCell>
-                <Table.HeaderCell>
-                  {t('listings_table.issue_number')}
-                </Table.HeaderCell>
-                <Table.HeaderCell>{t('listings_table.price')}</Table.HeaderCell>
-              </Table.Row>
-            </Table.Header>
-            <Table.Body className={isLoading ? 'is-loading' : ''}>
-              {orders?.map(order => (
-                <Table.Row key={order.id}>
-                  <Table.Cell>
-                    <LinkedProfile
-                      className={styles.linkedProfileRow}
-                      address={order.owner}
-                    />
-                  </Table.Cell>
-                  <Table.Cell>
-                    {getDateAndMonthName(order.createdAt)}
-                  </Table.Cell>
-                  <Table.Cell>
-                    {formatDistanceToNow(+order.expiresAt, {
-                      addSuffix: true
-                    })}
-                  </Table.Cell>
-                  <Table.Cell>
-                    <div className={styles.issuedIdContainer}>
-                      <div className={styles.row}>
-                        <span>
-                          <span className={styles.issuedId}>
-                            {order.tokenId}
-                          </span>
-                          / {total}
-                        </span>
-                      </div>
-                    </div>
-                  </Table.Cell>
-                  <Table.Cell>
-                    <div className={styles.manaField}>
-                      <Mana className="manaField" network={asset?.network}>
-                        {formatWeiMANA(order.price)}
-                      </Mana>
-                      {asset?.contractAddress && order.tokenId && (
-                        <Link
-                          to={locations.nft(
-                            asset.contractAddress,
-                            order.tokenId
-                          )}
-                        >
-                          <Icon name="arrow right" className={styles.goToNFT} />
-                        </Link>
-                      )}
-                    </div>
-                  </Table.Cell>
-                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table>
-          {totalPages && totalPages > 1 ? (
-            <Row center>
-              <Pagination
-                activePage={page}
-                totalPages={totalPages}
-                onPageChange={(_event, props) => setPage(+props.activePage!)}
-                firstItem={null}
-                lastItem={null}
-              />
-            </Row>
-          ) : null}
-        </>
-      )}
-    </div>
+    <TableContent
+      data={orders}
+      isLoading={isLoading}
+      setPage={setPage}
+      totalPages={totalPages}
+      empty={
+        'hola'
+        // <div className={styles.emptyTable}>
+        //   <span>{t('listings_table.there_are_no_listings')}</span>
+        // </div>
+      }
+    />
+    // <div className={styles.ListingsTable}>
+    //   {isLoading ? (
+    //     <div className={styles.emptyTable}>
+    //       <Loader active data-testid="loader" />
+    //     </div>
+    //   ) : orders.length === 0 ? (
+    //     <div className={styles.emptyTable}>
+    //       <span>{t('listings_table.there_are_no_listings')}</span>
+    //     </div>
+    //   ) : (
+    //     <>
+    //       <Table basic="very" data-testid="listings-table">
+    //         <Table.Header>
+    //           <Table.Row>
+    //             <Table.HeaderCell className={styles.headerMargin}>
+    //               {t('listings_table.owner')}
+    //             </Table.HeaderCell>
+    //             <Table.HeaderCell>
+    //               {t('listings_table.published_date')}
+    //             </Table.HeaderCell>
+    //             <Table.HeaderCell>
+    //               {t('listings_table.expiration_date')}
+    //             </Table.HeaderCell>
+    //             <Table.HeaderCell>
+    //               {t('listings_table.issue_number')}
+    //             </Table.HeaderCell>
+    //             <Table.HeaderCell>{t('listings_table.price')}</Table.HeaderCell>
+    //           </Table.Row>
+    //         </Table.Header>
+    //         <Table.Body className={isLoading ? 'is-loading' : ''}>
+    //           {orders?.map(order => (
+    //             <Table.Row key={order.id}>
+    //               <Table.Cell>
+    //                 <LinkedProfile
+    //                   className={styles.linkedProfileRow}
+    //                   address={order.owner}
+    //                 />
+    //               </Table.Cell>
+    //               <Table.Cell>
+    //                 {getDateAndMonthName(order.createdAt)}
+    //               </Table.Cell>
+    //               <Table.Cell>
+    //                 {formatDistanceToNow(+order.expiresAt, {
+    //                   addSuffix: true
+    //                 })}
+    //               </Table.Cell>
+    //               <Table.Cell>
+    //                 <div className={styles.issuedIdContainer}>
+    //                   <div className={styles.row}>
+    //                     <span>
+    //                       <span className={styles.issuedId}>
+    //                         {order.tokenId}
+    //                       </span>
+    //                       / {total}
+    //                     </span>
+    //                   </div>
+    //                 </div>
+    //               </Table.Cell>
+    //               <Table.Cell>
+    //                 <div className={styles.manaField}>
+    //                   <Mana className="manaField" network={asset?.network}>
+    //                     {formatWeiMANA(order.price)}
+    //                   </Mana>
+    //                   {asset?.contractAddress && order.tokenId && (
+    //                     <Link
+    //                       to={locations.nft(
+    //                         asset.contractAddress,
+    //                         order.tokenId
+    //                       )}
+    //                     >
+    //                       <Icon name="arrow right" className={styles.goToNFT} />
+    //                     </Link>
+    //                   )}
+    //                 </div>
+    //               </Table.Cell>
+    //             </Table.Row>
+    //           ))}
+    //         </Table.Body>
+    //       </Table>
+    //       {totalPages && totalPages > 1 ? (
+    //         <Row center>
+    //           <Pagination
+    //             activePage={page}
+    //             totalPages={totalPages}
+    //             onPageChange={(_event, props) => setPage(+props.activePage!)}
+    //             firstItem={null}
+    //             lastItem={null}
+    //           />
+    //         </Row>
+    //       ) : null}
+    //     </>
+    //   )}
+    // </div>
   )
 }