Adds contribution date to internals page, adjusts some css

Resolves brave/brave-browser#10137
brave · Jun 8, 2020 · ecab19d · ecab19d
1 parent 3d31832
commit ecab19d
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 60 deletions.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -835,6 +835,7 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "bootStamp", IDS_BRAVE_REWARDS_INTERNALS_BOOT_STAMP },
         { "clearButton", IDS_BRAVE_REWARDS_INTERNALS_CLEAR_BUTTON },
         { "contributedAmount", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTED_AMOUNT },
+        { "contributionCreatedAt", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTED_CREATED_AT },
         { "contribution", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION },
         { "contributionProcessor", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION_PROCESSOR },         // NOLINT
         { "contributionStep", IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION_STEP },

diff --git a/components/brave_rewards/resources/internals/components/contribution.tsx b/components/brave_rewards/resources/internals/components/contribution.tsx
@@ -4,7 +4,9 @@
 
 import * as React from 'react'
 
-import { ContributionPublishers } from './contributionPublishers'
+import { ContributionPublisher } from './contributionPublisher'
+import { formatDate } from '../utils'
+import { ContributionPublishersWrapper } from '../style'
 
 interface Props {
   contribution: RewardsInternals.ContributionInfo
@@ -69,6 +71,9 @@ const getContributionStepString = (step: number) => {
 export const Contribution = (props: Props) => (
   <div>
     <h3>{props.contribution.id}</h3>
+    <div>
+      {getLocale('contributionCreatedAt')} {formatDate(props.contribution.createdAt * 1000)}
+    </div>
     <div>
       {getLocale('contributionType')} {getContributionTypeString(props.contribution.type)}
     </div>
@@ -84,8 +89,10 @@ export const Contribution = (props: Props) => (
     <div>
       {getLocale('contributionProcessor')} {getProcessorString(props.contribution.processor)}
     </div>
-    <blockquote>
-      <ContributionPublishers items={props.contribution.publishers} />
-    </blockquote>
+    <ContributionPublishersWrapper>
+      {props.contribution.publishers.map((item: RewardsInternals.ContributionPublisher) => (
+        <ContributionPublisher publisher={item} key={`publisher-${item.publisherKey}`} />
+      ))}
+    </ContributionPublishersWrapper>
   </div>
 )
diff --git a/components/brave_rewards/resources/internals/components/contributionPublisher.tsx b/components/brave_rewards/resources/internals/components/contributionPublisher.tsx
@@ -4,21 +4,28 @@
 
 import * as React from 'react'
 
+import { Publisher, PublisherKey } from '../style'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
 interface Props {
   publisher: RewardsInternals.ContributionPublisher
 }
 
-// Utils
-import { getLocale } from '../../../../common/locale'
+export const ContributionPublisher = (props: Props) => {
+  if (!props.publisher) {
+    return null
+  }
 
-export const ContributionPublisher = (props: Props) => (
-  <blockquote>
-    <h3>{props.publisher.publisherKey}</h3>
-    <div>
-      {getLocale('totalAmount')} {props.publisher.totalAmount} {getLocale('bat')}
-    </div>
-    <div>
-      {getLocale('contributedAmount')} {props.publisher.contributedAmount} {getLocale('bat')}
-    </div>
-  </blockquote>
-)
+  return (
+    <Publisher>
+      <PublisherKey>{props.publisher.publisherKey}</PublisherKey>
+      <div>
+        {getLocale('totalAmount')} {props.publisher.totalAmount} {getLocale('bat')}
+      </div>
+      <div>
+        {getLocale('contributedAmount')} {props.publisher.contributedAmount} {getLocale('bat')}
+      </div>
+    </Publisher>)
+}
diff --git a/components/brave_rewards/resources/internals/components/contributionPublishers.tsx b/components/brave_rewards/resources/internals/components/contributionPublishers.tsx
diff --git a/components/brave_rewards/resources/internals/components/contributions.tsx b/components/brave_rewards/resources/internals/components/contributions.tsx
@@ -16,11 +16,24 @@ interface Props {
 // Utils
 import { getLocale } from '../../../../common/locale'
 
-export const Contributions = (props: Props) => {
-  if (!props.items || props.items.length === 0) {
+const getItems = (items: RewardsInternals.ContributionInfo[]) => {
+  if (!items || items.length === 0) {
     return null
   }
 
+  return items
+    .sort((first, second) => {
+      return second.createdAt - first.createdAt
+    })
+    .map((item, index) => (
+      <div key={item.id}>
+        <Contribution contribution={item || ''} />
+        {(index !== items.length - 1) ? <hr/> : null}
+      </div>
+    ))
+}
+
+export const Contributions = (props: Props) => {
   return (
     <>
       <ButtonWrapper>
@@ -31,12 +44,7 @@ export const Contributions = (props: Props) => {
           onClick={props.onGet}
         />
       </ButtonWrapper>
-      {props.items.map((item, index) => (
-        <div key={item.id}>
-          <Contribution contribution={item || ''} />
-          {(index !== props.items.length - 1) ? <hr/> : null}
-        </div>
-      ))}
+      {getItems(props.items)}
     </>
   )
 }
diff --git a/components/brave_rewards/resources/internals/components/promotion.tsx b/components/brave_rewards/resources/internals/components/promotion.tsx
@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+import { formatDate } from '../utils'
 
 interface Props {
   promotion: RewardsInternals.Promotion
@@ -49,7 +50,7 @@ const getClaimData = (claimedAt: number, claimId: string) => {
 
   return (
     <>
-      {getLocale('promotionClaimedAt')}: {new Date(claimedAt * 1000).toLocaleDateString()}
+      {getLocale('promotionClaimedAt')}: {formatDate(claimedAt * 1000)}
       <br/>
       {getLocale('promotionClaimId')}: {claimId}
     </>
@@ -61,7 +62,7 @@ const getExpirationDate = (expiresAt: number) => {
     return 0
   }
 
-  return new Date(expiresAt * 1000).toLocaleDateString()
+  return formatDate(expiresAt * 1000)
 }
 
 export const Promotion = (props: Props) => (

diff --git a/components/brave_rewards/resources/internals/components/walletInfo.tsx b/components/brave_rewards/resources/internals/components/walletInfo.tsx
@@ -6,6 +6,7 @@ import * as React from 'react'
 
 // Utils
 import { getLocale } from '../../../../common/locale'
+import { formatDate } from '../utils'
 
 interface Props {
   state: RewardsInternals.State
@@ -32,7 +33,7 @@ export const WalletInfo = (props: Props) => {
         {getLocale('walletPaymentId')} {info.walletPaymentId || ''}
       </div>
       <div>
-        {getLocale('bootStamp')}: {new Date(info.bootStamp * 1000).toLocaleDateString()}
+        {getLocale('bootStamp')}: {formatDate(info.bootStamp * 1000)}
       </div>
     </>
   )

diff --git a/components/brave_rewards/resources/internals/style.ts b/components/brave_rewards/resources/internals/style.ts
@@ -53,3 +53,17 @@ export const Notice = styled<{}, 'div'>('div')`
   font-size: 12px;
   margin-top: 5px;
 `
+
+export const ContributionPublishersWrapper = styled<{}, 'div'>('div')`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 10px -20px;
+`
+
+export const Publisher = styled<{}, 'div'>('div')`
+  margin: 0 20px 10px;
+`
+
+export const PublisherKey = styled<{}, 'h4'>('h4')`
+  margin: 15px 0 5px;
+`
diff --git a/components/brave_rewards/resources/internals/utils.ts b/components/brave_rewards/resources/internals/utils.ts
@@ -7,3 +7,16 @@ export let actions: any = null
 export const getActions = () => actions
 
 export const setActions = (newActions: any) => actions = newActions
+
+export const formatDate = (date: number) => {
+  return new Intl.DateTimeFormat(
+    'default',
+    {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }).format(date)
+}
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -352,6 +352,7 @@
       <message name="IDS_BRAVE_REWARDS_INTERNALS_BOOT_STAMP" desc="Wallet start time">Wallet created</message>
       <message name="IDS_BRAVE_REWARDS_INTERNALS_CLEAR_BUTTON" desc="">Clear</message>
       <message name="IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTED_AMOUNT" desc="Contributed Amount">Contributed amount:</message>
+      <message name="IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTED_CREATED_AT" desc="">Created at:</message>
       <message name="IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION" desc="Contribution">Contribution</message>
       <message name="IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION_PROCESSOR" desc="Contribution processor">Processor:</message>
       <message name="IDS_BRAVE_REWARDS_INTERNALS_CONTRIBUTION_STEP" desc="">Step:</message>

diff --git a/vendor/bat-native-ledger/src/bat/ledger/internal/database/database_contribution_info.cc b/vendor/bat-native-ledger/src/bat/ledger/internal/database/database_contribution_info.cc
@@ -548,7 +548,7 @@ void DatabaseContributionInfo::GetAllRecords(
 
   const std::string query = base::StringPrintf(
     "SELECT ci.contribution_id, ci.amount, ci.type, ci.step, ci.retry_count,"
-    "ci.processor "
+    "ci.processor, ci.created_at "
     "FROM %s as ci ",
     kTableName);
 
@@ -562,7 +562,8 @@ void DatabaseContributionInfo::GetAllRecords(
       ledger::DBCommand::RecordBindingType::INT64_TYPE,
       ledger::DBCommand::RecordBindingType::INT_TYPE,
       ledger::DBCommand::RecordBindingType::INT_TYPE,
-      ledger::DBCommand::RecordBindingType::INT_TYPE
+      ledger::DBCommand::RecordBindingType::INT_TYPE,
+      ledger::DBCommand::RecordBindingType::INT64_TYPE
   };
 
   transaction->commands.push_back(std::move(command));
@@ -798,7 +799,7 @@ void DatabaseContributionInfo::GetNotCompletedRecords(
 
   const std::string query = base::StringPrintf(
       "SELECT ci.contribution_id, ci.amount, ci.type, ci.step, ci.retry_count, "
-      "ci.processor "
+      "ci.processor, ci.created_at "
       "FROM %s as ci WHERE ci.step > 0",
       kTableName);
 
@@ -812,7 +813,8 @@ void DatabaseContributionInfo::GetNotCompletedRecords(
       ledger::DBCommand::RecordBindingType::INT64_TYPE,
       ledger::DBCommand::RecordBindingType::INT_TYPE,
       ledger::DBCommand::RecordBindingType::INT_TYPE,
-      ledger::DBCommand::RecordBindingType::INT_TYPE
+      ledger::DBCommand::RecordBindingType::INT_TYPE,
+      ledger::DBCommand::RecordBindingType::INT64_TYPE
   };
 
   transaction->commands.push_back(std::move(command));
@@ -851,6 +853,8 @@ void DatabaseContributionInfo::OnGetList(
     info->retry_count = GetIntColumn(record_pointer, 4);
     info->processor = static_cast<ledger::ContributionProcessor>(
         GetIntColumn(record_pointer, 5));
+    info->created_at = static_cast<uint64_t>(
+        GetInt64Column(record_pointer, 6));
 
     contribution_ids.push_back(info->contribution_id);
     list.push_back(std::move(info));