Beginning the migration to functional components
This commit is contained in:
James Barnsley
@ -1,130 +1,115 @@
|
||||
|
||||
import React from 'react'
|
||||
import React, { memo } from 'react'
|
||||
|
||||
export default class Dater extends React.Component{
|
||||
/**
|
||||
* Format time duration
|
||||
*
|
||||
* @param milliseconds int
|
||||
* @return string (HH:mm:ss)
|
||||
**/
|
||||
const durationTime = (milliseconds = null) => {
|
||||
if (!milliseconds ) return null
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
var string = '';
|
||||
var total_hours, total_minutes, total_seconds, minutes, seconds;
|
||||
|
||||
/**
|
||||
* Format time duration
|
||||
*
|
||||
* @param milliseconds int
|
||||
* @return string (HH:mm:ss)
|
||||
**/
|
||||
durationTime(milliseconds = null){
|
||||
if (!milliseconds ) return null
|
||||
// get total values for each
|
||||
total_seconds = Math.floor(milliseconds / 1000 )
|
||||
total_minutes = Math.floor(milliseconds / (1000 * 60) )
|
||||
total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
|
||||
|
||||
var string = '';
|
||||
var total_hours, total_minutes, total_seconds, minutes, seconds;
|
||||
// get left-over number of seconds
|
||||
seconds = total_seconds - (total_minutes * 60 )
|
||||
if (seconds <= 9) seconds = '0'+ seconds
|
||||
if (seconds == 0) seconds = '00'
|
||||
|
||||
// get total values for each
|
||||
total_seconds = Math.floor(milliseconds / 1000 )
|
||||
total_minutes = Math.floor(milliseconds / (1000 * 60) )
|
||||
total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
|
||||
// get left-over number of minutes
|
||||
minutes = total_minutes - (total_hours * 60 )
|
||||
if (minutes <= 9 && total_hours) minutes = '0'+ minutes
|
||||
if (minutes == 0) minutes = '0'
|
||||
|
||||
// get left-over number of seconds
|
||||
seconds = total_seconds - (total_minutes * 60 )
|
||||
if (seconds <= 9) seconds = '0'+ seconds
|
||||
if (seconds == 0) seconds = '00'
|
||||
|
||||
// get left-over number of minutes
|
||||
minutes = total_minutes - (total_hours * 60 )
|
||||
if (minutes <= 9 && total_hours) minutes = '0'+ minutes
|
||||
if (minutes == 0) minutes = '0'
|
||||
|
||||
if (total_hours) string += total_hours+':'
|
||||
if (minutes) string += minutes+':'
|
||||
if (seconds) string += seconds
|
||||
|
||||
return string
|
||||
}
|
||||
|
||||
/**
|
||||
* Format time duration as a human-friendly sentence
|
||||
*
|
||||
* @param milliseconds int
|
||||
* @return string (eg 2+ hours)
|
||||
**/
|
||||
durationSentence(milliseconds = null){
|
||||
if (!milliseconds ) return null
|
||||
|
||||
var string = '';
|
||||
var total_hours, total_minutes, total_seconds, minutes, seconds;
|
||||
|
||||
// get total values for each
|
||||
total_seconds = Math.floor(milliseconds / 1000 )
|
||||
total_minutes = Math.floor(milliseconds / (1000 * 60) )
|
||||
total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
|
||||
|
||||
if (total_hours > 1 ) return total_hours+'+ hrs'
|
||||
if (total_minutes > 1 ) return total_minutes+' mins'
|
||||
if (total_seconds ) return total_seconds+' sec'
|
||||
}
|
||||
|
||||
calculate(){
|
||||
switch(this.props.type){
|
||||
|
||||
case 'total-time':
|
||||
var duration = 0;
|
||||
var tracks = this.props.data
|
||||
for(var i = 0; i < tracks.length; i++){
|
||||
if (tracks[i].duration ){
|
||||
duration += parseInt(tracks[i].duration);
|
||||
}
|
||||
}
|
||||
return this.durationSentence(duration);
|
||||
|
||||
case 'length':
|
||||
return this.durationTime(this.props.data);
|
||||
|
||||
case 'date':
|
||||
|
||||
// A four-character date indicates just a year (rather than a full date)
|
||||
if (this.props.data.length == 4){
|
||||
return this.props.data;
|
||||
|
||||
// Digest as a date string
|
||||
} else {
|
||||
var date = new Date(this.props.data);
|
||||
return date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear();
|
||||
}
|
||||
|
||||
case 'ago':
|
||||
var date = new Date(this.props.data)
|
||||
var diff = new Date() - date
|
||||
|
||||
var seconds = Math.floor(diff / 1000)
|
||||
var minutes = Math.floor(diff / (1000 * 60))
|
||||
var hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
var days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (seconds < 60){
|
||||
return seconds + " seconds";
|
||||
}else if (minutes < 60){
|
||||
return minutes + " minutes";
|
||||
}else if (hours < 24){
|
||||
return hours + " hours";
|
||||
} else {
|
||||
return days + " days"
|
||||
};
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
if (!this.props.data){
|
||||
return null;
|
||||
}
|
||||
|
||||
var calculation = this.calculate();
|
||||
if (!calculation){
|
||||
return null;
|
||||
}
|
||||
if (total_hours) string += total_hours+':'
|
||||
if (minutes) string += minutes+':'
|
||||
if (seconds) string += seconds
|
||||
|
||||
return <span className="dater">{calculation}</span>;
|
||||
}
|
||||
return string
|
||||
}
|
||||
|
||||
/**
|
||||
* Format time duration as a human-friendly sentence
|
||||
*
|
||||
* @param milliseconds int
|
||||
* @return string (eg 2+ hours)
|
||||
**/
|
||||
const durationSentence = (milliseconds = null) => {
|
||||
if (!milliseconds ) return null
|
||||
|
||||
var string = '';
|
||||
var total_hours, total_minutes, total_seconds, minutes, seconds;
|
||||
|
||||
// get total values for each
|
||||
total_seconds = Math.floor(milliseconds / 1000 )
|
||||
total_minutes = Math.floor(milliseconds / (1000 * 60) )
|
||||
total_hours = Math.floor(milliseconds / (1000 * 60 * 60))
|
||||
|
||||
if (total_hours > 1 ) return total_hours+'+ hrs'
|
||||
if (total_minutes > 1 ) return total_minutes+' mins'
|
||||
if (total_seconds ) return total_seconds+' sec'
|
||||
}
|
||||
|
||||
export default memo((props) => {
|
||||
|
||||
if (!props.data){
|
||||
return null;
|
||||
}
|
||||
|
||||
switch(props.type){
|
||||
|
||||
case 'total-time':
|
||||
var duration = 0;
|
||||
var tracks = props.data
|
||||
for(var i = 0; i < tracks.length; i++){
|
||||
if (tracks[i].duration ){
|
||||
duration += parseInt(tracks[i].duration);
|
||||
}
|
||||
}
|
||||
return durationSentence(duration);
|
||||
|
||||
case 'length':
|
||||
return durationTime(props.data);
|
||||
|
||||
case 'date':
|
||||
|
||||
// A four-character date indicates just a year (rather than a full date)
|
||||
if (props.data.length == 4){
|
||||
return props.data;
|
||||
|
||||
// Digest as a date string
|
||||
} else {
|
||||
var date = new Date(props.data);
|
||||
return date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear();
|
||||
}
|
||||
|
||||
case 'ago':
|
||||
var date = new Date(props.data)
|
||||
var diff = new Date() - date
|
||||
|
||||
var seconds = Math.floor(diff / 1000)
|
||||
var minutes = Math.floor(diff / (1000 * 60))
|
||||
var hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
var days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (seconds < 60){
|
||||
return seconds + " seconds";
|
||||
}else if (minutes < 60){
|
||||
return minutes + " minutes";
|
||||
}else if (hours < 24){
|
||||
return hours + " hours";
|
||||
} else {
|
||||
return days + " days"
|
||||
};
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,35 +1,25 @@
|
||||
|
||||
import React from 'react'
|
||||
import React, { memo } from 'react'
|
||||
|
||||
export default class NiceNumber extends React.Component{
|
||||
export default memo((props) => {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
let formatted = parseInt(props.value);
|
||||
|
||||
// > 1 million
|
||||
if (formatted > 1000000){
|
||||
formatted = formatted / 1000000;
|
||||
formatted = Math.round( formatted * 10 ) / 10;
|
||||
formatted = formatted+'m';
|
||||
|
||||
// > 1 thousand
|
||||
} else if (formatted > 1000){
|
||||
formatted = formatted / 1000;
|
||||
formatted = Math.round( formatted * 10 ) / 10;
|
||||
formatted = formatted+'k';
|
||||
|
||||
} else {
|
||||
formatted = formatted.toLocaleString();
|
||||
}
|
||||
|
||||
format(){
|
||||
var formatted = parseInt(this.props.value);
|
||||
|
||||
// > 1 million
|
||||
if (formatted > 1000000){
|
||||
formatted = formatted / 1000000;
|
||||
formatted = Math.round( formatted * 10 ) / 10;
|
||||
formatted = formatted+'m';
|
||||
|
||||
// > 1 thousand
|
||||
} else if (formatted > 1000){
|
||||
formatted = formatted / 1000;
|
||||
formatted = Math.round( formatted * 10 ) / 10;
|
||||
formatted = formatted+'k';
|
||||
|
||||
} else {
|
||||
formatted = formatted.toLocaleString();
|
||||
}
|
||||
|
||||
return formatted;
|
||||
}
|
||||
|
||||
render(){
|
||||
return <span className="counter">{this.format()}</span>;
|
||||
}
|
||||
}
|
||||
return formatted;
|
||||
});
|
||||
@ -8,8 +8,6 @@ import { Route, Switch } from 'react-router-dom';
|
||||
import ErrorMessage from '../components/ErrorMessage';
|
||||
import Link from '../components/Link';
|
||||
import LazyLoadListener from '../components/LazyLoadListener'
|
||||
import Header from '../components/Header'
|
||||
import NiceNumber from '../components/NiceNumber';
|
||||
import TrackList from '../components/TrackList'
|
||||
import AlbumGrid from '../components/AlbumGrid'
|
||||
import Thumbnail from '../components/Thumbnail'
|
||||
|
||||
Reference in New Issue
Block a user