Skip to content

Instantly share code, notes, and snippets.

View webmasterdevlin's full-sized avatar

Devlin Duldulao webmasterdevlin

View GitHub Profile
@webmasterdevlin
webmasterdevlin / router.tsx
Last active March 13, 2019 17:15
React Router : src/router.tsx
import React from "react";
import { Redirect, Route, Switch } from "react-router";
import Heroes from "./pages/heroes/Heroes";
import EditHero from "./pages/heroes/EditHero";
import Villains from "./pages/villains/Villains";
import EditVillain from "./pages/villains/EditVillain";
import createBrowserHistory from "history/createBrowserHistory";
import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
import heroStore from "./stores/hero.store";
@webmasterdevlin
webmasterdevlin / HeroStore.ts
Last active March 13, 2019 14:25
MST Store : src/stores/HeroStore.ts
import { types, flow, applySnapshot, onPatch, destroy } from "mobx-state-tree";
import {
addHero,
getHero,
getHeroes,
removeHero,
updateHero
} from "./HeroService";
import makeInspectable from "mobx-devtools-mst"; // Mobx State Tree dev tools
@webmasterdevlin
webmasterdevlin / Heroes.tsx
Last active March 13, 2019 16:02
React Class Component : src/pages/heroes/Heroes.tsx
import * as React from "react";
import { inject, observer } from "mobx-react";
import HeroStore from "./../../stores/HeroStore";
import { HeroModel } from "../../models/hero.model";
import { Link } from "react-router-dom";
import { toJS } from "mobx";
import NewItemForm from "../../common-components/NewItemForm";
export interface Props {
HeroStore: typeof HeroStore;
@webmasterdevlin
webmasterdevlin / router.tsx
Last active March 13, 2019 17:15
React Router : src/router.tsx
import React from "react";
import { Redirect, Route, Switch } from "react-router";
import Heroes from "./pages/heroes/Heroes";
import EditHero from "./pages/heroes/EditHero";
import Villains from "./pages/villains/Villains";
import EditVillain from "./pages/villains/EditVillain";
import createBrowserHistory from "history/createBrowserHistory";
import { RouterStore, syncHistoryWithStore } from "mobx-react-router";
import { Provider } from "mobx-react";
@webmasterdevlin
webmasterdevlin / hero-actions.js
Last active March 14, 2019 00:58
Redux Actions : src/store/hero/hero-actions.js
import { addHero, getHeroes, removeHero, updateHero } from "./hero-service"; // services of hero module
/*
* action types
*/
export const LOAD_HEROES_REQUEST = "LOAD_HEROES_REQUEST";
export const LOAD_HEROES_SUCCESS = "LOAD_HEROES_SUCCESS";
export const LOAD_HEROES_FAIL = "LOAD_HEROES_FAIL";
export const CREATE_HERO_REQUEST = "CREATE_HERO_REQUEST";
@webmasterdevlin
webmasterdevlin / hero-reducer.js
Last active March 14, 2019 02:55
Redux Reducer : src/store/hero/hero-reducer.js
import * as types from "./hero-actions";
/*
initalize your state with default values
*/
let initialState = {
heroes: [],
fetching: false,
error: ""
};
@webmasterdevlin
webmasterdevlin / index.js
Last active March 13, 2019 23:48
Redux Store : src/store/index.js
import { combineReducers, createStore, applyMiddleware } from "redux";
import { heroReducer } from "./hero/hero-reducer";
import { villainReducer } from "./villain/villain-reducer";
import thunk from "redux-thunk"; // 3rd-party side-effects library.
import { composeWithDevTools } from "redux-devtools-extension"; // Redux devtools for time travel debugging.
/*
Merge all your reducers here. Name it rootReducer.
*/
@webmasterdevlin
webmasterdevlin / Heroes.js
Last active March 14, 2019 02:06
React Class Component : src/pages/heroes/Heroes.js
import React, { Component } from "react";
import NewItemForm from "../../common-components/NewItemForm";
import {
deleteHero,
loadHeroes,
postHero
} from "../../store/hero/hero-actions";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
@webmasterdevlin
webmasterdevlin / index.js
Created March 14, 2019 02:42
React Class Component : src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux"; // holds that store
import "bootstrap/dist/css/bootstrap.css";
import "@fortawesome/fontawesome-free/css/all.css";
@webmasterdevlin
webmasterdevlin / hero.actions.ts
Last active March 14, 2019 08:23
NgRx Actions : src/app/actions/hero.actions.ts
import { Action } from "@ngrx/store";
import { Hero } from "../models/hero.model";
/*
* Action Types
*/
export enum HeroActionTypes {
LoadHeroes = "[Hero] Load Heroes",
LoadHeroesSuccess = "[Hero] Load Heroes Success",
LoadHeroesFail = "[Hero] Load Heroes Fail",