top of page
  • Writer's pictureselinov

Refactoring the Flo methods to OOP

I had an interview yesterday that was a disaster. For whatever reason I totally blanked on basic OOP in Javascript… deer in headlights. So I decided to refresh my brain by converting the Flojuggler methods to an OOP class paradigm. The original was just name-spaced.

Original Flo file:

Flos = {
    
    helloWorld : function(){
        return ("Hello flos!");
    },

    deleteFlo : function(id) {
        Model.deleteFlo(id);
    },

    initFlos : function(tx,rs,test) {
         currentFlo = 'reset';
        globalFlos = [];
        if (rs.rows.length >= 1) {
            for(i=0; i < rs.rows.length; i++) {
                var row = rs.rows.item(i);
                globalFlos.push(row);
            }
        }
        
        if (!test) {
            displayResultSet();
        }
        return globalFlos;
    },

    detectFlo : function(time,startDate,cycle){
        console.log(startDate);
        var myTime = new Date(time).getTime();
        var myDate = new Date(startDate).getTime();
        var status = ( secToDays(myTime) - secToDays(myDate) ) % (cycle);
        return status;
    },

    getStatus : function(time,startDate,cycle,long) {
        var flo = Flos.detectFlo(time,startDate,cycle);
        var sDayDisplay = " days";
        var floStatus = {};
        
        if (flo < long) {
            var days = long - flo;
            days <= 1 ? sDayDisplay = " day" : sDayDisplay = " days";
            floStatus.code = 'status-red';
            floStatus.text = 'on her flo for ' + days + ' more' + sDayDisplay;
        } else {
            days = cycle - flo;
            days <= 1 ? sDayDisplay = " day" : sDayDisplay = " days";
            if (days <= 3) {
                floStatus.code = "status-yellow";
                floStatus.text = days + ' more' + sDayDisplay + ' to her flo';
            } else {
                floStatus.code = "status-green";
                floStatus.text = days + sDayDisplay + ' from her next flo';
            }
            
        }
        return floStatus;
    }
}

OOP Flo with Hungarian notation (just to be extra obnoxious):


function Flo() {
		this.name = 'Unnamed';
		this.cycle = 30;
		this.long = 7;
		this.startDate = new Date().getTime();
		this.thumbnail = "images/thumbnail.svg";
		this.state = 'new';
	}

	Flo.prototype.getStatus = function() {
		var statusDays = detectFlo(this);
		return getStatus(this, statusDays);
	};

	Flo.prototype.save = function() {
		Model.addFlo(this);
	};

	Flo.prototype.update = function() {
		Model.updateFlo(this);
	};

	Flo.prototype.delete = function() {
		Model.deleteFlo(this.id);
	};

	Flo.prototype.toString = function() {
		return this.name + ", " + this.cycle + ", " + this.long + ", " + this.startDate;
	};

	Flo.prototype.valueOf = function() {
		return detectFlo(this);
	};

	Flo.prototype.equals = function(e) {
		return (this.name == e.name && this.cycle == e.cycle && this.long == e.long && this.startDate == e.startDate);
	};

	function getStatus(oFlo, nStatusDays) {
		var that = oFlo;
		var oFloStatus = {};
		var nDays;
		var sDayDisplay;

		if (nStatusDays < that.long) {
			nDays = that.long - nStatusDays;
			nDays <= 1 ? sDayDisplay = " day" : sDayDisplay = " days";
			oFloStatus.code = 'status-red';
			oFloStatus.text = 'on her flo for ' + nDays + ' more' + sDayDisplay;
		} else {
			nDays = that.cycle - nStatusDays;
			nDays <= 1 ? sDayDisplay = " day" : sDayDisplay = " days";
			if (days <= 3) {
				oFloStatus.code = "status-yellow";
				oFloStatus.text = nDays + ' more' + sDayDisplay + ' to her flo';
			} else {
				oFloStatus.code = "status-green";
				oFloStatus.text = nDays + sDayDisplay + ' from her next flo';
			}            
		}

		return oFloStatus;
	}

	var gCurrentFlo = new Flo();
	var gTotalFlos = [];

	function initFlos(tx,rs,test) {
		gCurrentFlo.state = 'new';
        if (rs.rows.length >= 1) {
            for(i=0; i < rs.rows.length; i++) {
                gTotalFlos.push(rs.rows.item(i));
            }
        } 
        if (!test) {
            displayResultSet();
        }
        return gTotalFlos;
    }

	function detectFlo(oFlo) {
		var nNow = new Date().getTime();
		var nMyStartDate = new Date(oFlo.startDate).getTime();
		return ( secToDays(nNow) - secToDays(nMyStartDate) ) % (oFlo.cycle);
	}

	function secToDays(nTime) {
		var nDays = nTime/1000/60/60/24;
		return Math.round(nDays);
	}

	function helloWorld(){
        return ("Hello flos!");
    }

The new one is much more encapsulated and testable.

bottom of page