Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Mohan Ram mohanramphp

🎯
Focusing
Block or report user

Report or block mohanramphp

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@mohanramphp
mohanramphp / composing-software.md
Created Jul 5, 2019 — forked from rosario/composing-software.md
Eric Elliott's Composing Software Series
@mohanramphp
mohanramphp / Watch.js
Created Jan 9, 2019
Watch Component using React Hook
View Watch.js
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
mohanramphp / DateTime.js
Created Jan 9, 2019
DateTime Component using React hooks
View DateTime.js
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
mohanramphp / Todos.js
Created Jan 9, 2019
Todos component using React hook
View Todos.js
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
mohanramphp / Login.js
Last active Jan 9, 2019
Login component using React hooks
View Login.js
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
mohanramphp / Counter.js
Created Jan 9, 2019
Counter example for react hooks
View Counter.js
import React, { useState, Fragment } from 'react';
export const Counter = ({ initialCount }) => {
const [count, setCount] = useState(+initialCount);
const padding = {
marginLeft: '5px',
marginRight: '5px',
}
return (
<Fragment>
View log-decorator.ts
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
mohanramphp / metadata-reflection-api.ts
Created Dec 22, 2018
Metadata Reflection API Example
View metadata-reflection-api.ts
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
mohanramphp / class-decorator.js
Last active Dec 22, 2018
class decorator compiled code
View class-decorator.js
var Employee = /** @class */ (function () {
function Employee() {
}
Employee = __decorate([
logClass
], Employee);
return Employee;
}());
var emp = new Employee();
console.log('emp instanceof Employee');
View class-decorator.ts
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;
You can’t perform that action at this time.