Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove moment usage from main codebase #880

Merged
merged 2 commits into from
Apr 3, 2020
Merged

Remove moment usage from main codebase #880

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c913cb
Remove moment usage from main codebase
sandrina-p Apr 3, 2020
faf9150
changes based on @taoeffect review
sandrina-p Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/views/containers/payments/MonthOverview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
i18n.c-summary-title.is-title-4(
tag='h4'
data-test='thisMonth'
:args='{ month: moment(new Date()).format("MMMM") }'
:args='{ month: humanDate(new Date(), { month: "long" }) }'
) {month} overview

.c-summary-item(
Expand All @@ -27,7 +27,7 @@ import currencies from '@view-utils/currencies.js'
import { mapGetters } from 'vuex'
import ProgressBar from '@components/graphs/Progress.vue'
import L from '@view-utils/translations.js'
import moment from 'moment'
import { humanDate } from '@view-utils/humanDate.js'

export default {
name: 'MonthOverview',
Expand Down Expand Up @@ -74,7 +74,7 @@ export default {
}
},
methods: {
moment,
humanDate,
// TEMP
statusIsSent (user) {
return ['completed', 'pending'].includes(user.status)
Expand Down
10 changes: 6 additions & 4 deletions frontend/views/containers/payments/PaymentDetail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ modal-template(ref='modal' v-if='payment')
ul.c-payment-list
li.c-payment-list-item
i18n.has-text-1(tag='label') Date & Time
strong {{ moment(payment.date).format('hh:mm - MMMM DD, YYYY') }}
// TODO remove new Date() when dealing with real data.
strong {{ humanDate(this.payment.date || new Date(), { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }) }}
li.c-payment-list-item
i18n.has-text-1(tag='label') Relative to
strong {{ moment(payment.relativeTo).format('MMMM')}}
// TODO remove new Date() when dealing with real data.
strong {{ humanDate(payment.relativeTo || new Date(), { month: 'long' }) }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comment below re Date.now() usage

li.c-payment-list-item
i18n.has-text-1(tag='label') Mincome at the time
strong {{ currency(groupSettings.mincomeAmount) }}
Expand All @@ -31,11 +33,11 @@ modal-template(ref='modal' v-if='payment')
<script>
import { mapGetters } from 'vuex'
import L from '@view-utils/translations.js'
import moment from 'moment'
import sbp from '~/shared/sbp.js'
import { CLOSE_MODAL } from '@utils/events.js'
import ModalTemplate from '@components/modal/ModalTemplate.vue'
import currencies from '@view-utils/currencies.js'
import { humanDate } from '@view-utils/humanDate.js'

export default {
name: 'PaymentDetail',
Expand Down Expand Up @@ -76,7 +78,7 @@ export default {
console.log('Todo: Implement cancel payment')
this.closeModal()
},
moment
humanDate
},
validations: {
form: {}
Expand Down
12 changes: 7 additions & 5 deletions frontend/views/containers/payments/PaymentsList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ table.table.table-in-card.c-payments(:class='{"is-editing": paymentsType === "ed
// TODO: replace condition to indicate whether or not the payment date is < or > than the current date using payment.paymentStatusText
i18n.c-user-month(
:class='index === 0 ? "has-text-1" : "pill is-danger"'
:args='{date: moment(payment.date).format("MMMM DD")}'
:args='{date: dueDate(payment.date) }'
) Due {date}
td.c-payments-amount(v-if='paymentsType !== "edit"')

Expand Down Expand Up @@ -66,7 +66,7 @@ table.table.table-in-card.c-payments(:class='{"is-editing": paymentsType === "ed

td
.c-actions
.c-actions-month(:class='!(index !== 0 && paymentsType === "todo") ? "has-text-1" : "pill is-danger"') {{ moment(payment.date).format('MMMM D') }}
.c-actions-month(:class='!(index !== 0 && paymentsType === "todo") ? "has-text-1" : "pill is-danger"') {{ dueDate(payment.date) }}
payments-list-menu.c-actions-menu(
v-if='paymentsType !== "edit"'
:payment='payment'
Expand Down Expand Up @@ -94,8 +94,7 @@ import AvatarUser from '@components/AvatarUser.vue'
import Tooltip from '@components/Tooltip.vue'
import PaymentsListMenu from '@containers/payments/PaymentsListMenu.vue'
import currencies from '@view-utils/currencies.js'
import moment from 'moment'

import { humanDate } from '@view-utils/humanDate.js'
export default {
name: 'PaymentsList',
components: {
Expand All @@ -119,7 +118,6 @@ export default {
},
data () {
return {
moment,
// Temp
tableChecked: false
}
Expand Down Expand Up @@ -157,6 +155,10 @@ export default {
this.payments.map(payment => {
payment.checked = this.tableChecked
})
},
dueDate (datems) {
const date = datems || new Date() // remote new Date() when dealing with real data.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you enforce consistency here and everywhere else in the type usage?

I.e. either humanDate accepts milliseconds or a Date object, but not both.

So in this case, new Date() would be replaced with Date.now(), or even better, simply add a default value to the humanDate function (e.g. humanDate(datems = Date.now(), I think that might be possible, double-check me on that)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default value is a clean solution. Changed, as well as the other comments!

return humanDate(date, { month: 'short', day: 'numeric' })
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions frontend/views/utils/humanDate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export function humanDate (datems, opts = {}) {
const date = new Date(datems)
const locale = navigator.languages ? navigator.languages[0] : navigator.language
return date.toLocaleDateString(locale, opts)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to fetch the locale each time this function is called, that can be done once at the top of this file.

Then this function can be a one-liner:

return new Date(datems).toLocaleDateString(locale, opts)

}