mohanramphp

Eric Elliott's "Composing Software" Series

A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.

• The Rise and Fall and Rise of Functional Programming
• Why Learn Functional Programming in JavaScript?
• A Functional Programmer’s Introduction to JavaScript
• Higher Order Functions
• Reduce
• Functors & Categories
• [Composing

mohanramphp

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';

import { Strap, Bezel, Screen, Face } from './WatchStyledComponents';
import { DefaultFace } from './WatchFaceComponents';

/**
 * custom Hooks
 * @param {*} d

mohanramphp

import React, { useState, useEffect } from 'react';

export const DateTime = () => {
    const [dateTime, setDateTime] = useState(new Date());

    useEffect(() => {
        const id = setInterval(() => setDateTime(new Date()), 1000);
        return () => {
            clearInterval(id);
        }

mohanramphp

import React, { useReducer } from 'react';
import { TodoForm } from './TodoForm';
import { TodoList } from './TodoList';

import { TodoReducer, TodosDispatch } from './TodoReducer';

export const Todos = ({ todos }) => {
    const [state, dispatch] = useReducer(TodoReducer, todos);

    return (

mohanramphp

const Login = () => {
    // handling complex state with useState
    const [loginDetails, setLoginDetails] = useState({username: '', password: ''})
    handleLogin = () => {
        ...
    }
    return (
            <div>
                <form>
                    {/** setLoginDetail method is called by passing a fat function which has prev state as argument */}

mohanramphp

import React, { useState, Fragment } from 'react';

export const Counter = ({ initialCount }) => {
    const [count, setCount] = useState(+initialCount);
    const padding = {
        marginLeft: '5px',
        marginRight: '5px',
    }
    return (
        <Fragment>

mohanramphp

import { logClass } from './class-decorator';
import { logMethod } from './method-decorator';
import { logProperty } from './property-decorator';
import { logParameter } from './parameter-decorator';

// decorator factory - which calls the corresponding decorators based on arguments passed
export function log(...args) {
    switch (args.length) {
        case 3: // can be method or parameter decorator
            if (typeof args[2] === "number") { // if 3rd argument is number then its index so its parameter decorator

mohanramphp

import "reflect-metadata";

// parameter decorator uses reflect api to store the indexes of the decorated parameter
export function logParameter(target: Object, propertyName: string, index: number) {
    // to get the metadata from the target object
    const indices = Reflect.getMetadata(`log_${propertyName}_parameters`, target, propertyName) || [];
    indices.push(index);
    // to define the metadata to the target object
    Reflect.defineMetadata(`log_${propertyName}_parameters`, indices, target, propertyName);
}

mohanramphp

var Employee = /** @class */ (function () {
    function Employee() {
    }
    Employee = __decorate([
        logClass
    ], Employee);
    return Employee;
}());
var emp = new Employee();
console.log('emp instanceof Employee');

mohanramphp

export function logClass(target: Function) {
    // save a reference to the original constructor
    const original = target;

    // a utility function to generate instances of a class
    function construct(constructor, args) {
        const c: any = function () {
            return constructor.apply(this, args);
        }
        c.prototype = constructor.prototype;