Skip to content

Instantly share code, notes, and snippets.

View francisngo's full-sized avatar

Francis Ngo francisngo

View GitHub Profile
@francisngo
francisngo / Input.js
Created December 30, 2017 00:51
Collection for Redux todo example - This file is the presentational component for Input
import React, { Component } from 'react';
export default class Input extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
@francisngo
francisngo / List.js
Created December 30, 2017 00:50
Collection for Redux todo example - This file is the presentational component for List
import React, { Component } from 'react';
export default class List extends Component {
renderItem(text, i) {
const { onClickItem } = this.props;
return (
<div onClick={() => onClickItem(i)}>{text}</div>
);
};
@francisngo
francisngo / App.js
Last active December 30, 2017 00:47
Collection for Redux todo example - This file is the "smart" container component. It is aware of the application's state and can fire actions to update state, using the actionCreators. The container subscribes to the store, updating its own state and the props of its children whenever the store's state changes.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './actions';
import Input from './Input';
import List from './List';
class App extends Component {
constructor(props) {
super(props);
this.state = {};
@francisngo
francisngo / reducers.js
Last active December 30, 2017 00:47
Collection for Redux todo example - This file defines the reducer function
import { types } from './actions';
const initialState = {
todos: ['Plan web app', 'Analyze use of app', 'Design and develop app', 'Test app', 'Implement and maintain app']
};
export const reducer = (state = initialState, action) => {
const { todos } = state;
const { type, payload } = action;
@francisngo
francisngo / actions.js
Last active December 30, 2017 00:48
Collection for Redux todo example - This file defines the action types and actionCreators helper functions to create actions.
export const types = {
ADDTODO: 'ADD_TODO',
REMOVETODO: 'REMOVE_TODO'
};
export const actionCreators = {
addTodo: item => {
return {
type: types.ADDTODO,
payload: item
@francisngo
francisngo / index.js
Last active December 30, 2017 00:49
Collection for Redux todo example - This file handles creating the redux store and passing it to the App container
import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import App from './App';
import { reducer } from './reducer';
const store = createStore(reducer);
render(<App store={store}/>, document.getElementById('root'));
@francisngo
francisngo / nosql.js
Last active December 29, 2017 07:33
Create MongoDB queries to insert a document into a collection and to find a document in a collection
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017/test';
mongoClient.connect(url, function(err, db) {
if (err) {
throw err;
console.log('ERROR - Unable to connect to database.')
}
console.log('INFO - Database connected.');
@francisngo
francisngo / server.js
Created December 29, 2017 03:58
Authenticate a Node.js API with JSON Web Tokens
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const morgan = require('morgan');
const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const config = require('./config');
const User = require('./app/models/user');
@francisngo
francisngo / config.js
Created December 29, 2017 03:43
Store variables and configuration for sample
module.exports = {
'secret': 'thisissupposedtobetopsecret',
'database': 'mongodb://localhost:27017/test'
};
@francisngo
francisngo / user.js
Created December 29, 2017 03:40
User model to create and get users.
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
module.exports = mongoose.model('User', new Schema({
name: String,
password: String,
admin: Boolean
}));