How to Build a Sticky Notes App Using React and Redux

In this tutorial, I’m going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and . For the sake of understanding how to consume Restful API’s, this tutorial will show how to make AJAX (XHR) requests to the Cosmic JS API in order to retrieve, add, update, and delete data/media in our Cosmic JS Buckets. Let’s get started. Cosmic JS TL;DR Download the GitHub repo Check out the demo { "name": "sticky-notes", "version": "1.0.0", "description": "Sticky Notes app built using react, redux & cosmic.", "main": "index.js", "scripts": { "start": "npm run build; node server/index.js", "start-dev": "nodemon server/index.js", "build": "webpack -p", "build-dev": "webpack -w", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/jazibsawar/sticky-notes.git" }, "author": "Muhammad Musa", "license": "ISC", "bugs": { "url": "https://github.com/jazibsawar/sticky-notes/issues" }, "homepage": "https://github.com/jazibsawar/sticky-notes#readme", "dependencies": { "async": "^2.5.0", "babel": "^6.23.0", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-regenerator": "^6.24.1", "babel-polyfill": "^6.23.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "body-parser": "^1.17.2", "cosmicjs": "^2.39.91", "express": "^4.15.3", "immutable": "^3.8.1", "moment": "^2.18.1", "prop-types": "^15.5.10", "react": "^15.6.1", "react-addons-css-transition-group": "^15.6.0", "react-addons-transition-group": "^15.6.0", "react-color": "^2.13.4", "react-dom": "^15.6.1", "react-modal-dialog": "^4.0.7", "react-redux": "^5.0.5", "react-router": "^3.0.5", "react-spinners": "0.0.30", "redux": "^3.7.2", "redux-logger": "^3.0.6", "redux-saga": "^0.15.6", "redux-thunk": "^2.2.0", "reselect": "^3.0.1", "styled-components": "^2.1.1", "volleyball": "^1.4.1", "webpack": "^3.4.1", "webpack-livereload-plugin": "^0.11.0", "whatwg-fetch": "^2.0.3" }, "devDependencies": { "chai": "^4.1.0", "cross-env": "^5.0.1", "mocha": "^3.5.0", "nodemon": "^1.11.0" }} What we’re installing and why: We’re going to use the and library to handle our requests to our Cosmic JS Bucket. whatwg-fetch cosmicjs We’re installing and to build our react components. react react-dom We are going to use , react-redux, redux-logger, reselect and redux-sagas to help us implement what is called the Redux architecture. redux We have used to make the stickynotes component styling generic. We can pass style variables in it too. styled-components We used to use loading component. react-spinners We used to use color picker component. react-color We used -dialog to use react modal component. react-modal We used package by Facebook to use immutable objects. immutable We used to format dates. moment We used for routing and navigation. react-router The only thing worth mentioning in the dev dependencies is and . Webpack will help us bundle all of our react and redux files into one large “bundle” file that will be used in our index.html. Volleyball is a cool little library that allows us to see in our console incoming and outgoing HTTP requests. webpack volleyball Building our app: Now we we will set up our index.html in our client directory. Copy and paste the following code into your index.html file: Cosmic Sticky Notes App! Here, we are going to target our div to place our react components in later. The file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components. Now, set up our webpack.config file to bundle all of our react files and export that bundle file to our dist directory. Copy the following code into your file: root bundle.js webpack.config.js var path = require('path');var LiveReloadPlugin = require('webpack-livereload-plugin');var webpack = require('webpack');

module.exports = { entry: './client/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'client/dist') }, context: __dirname, resolve: { extensions: ['.js', '.jsx', '.json', '*'] }, module: { rules: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', options: { presets: ['react', 'es2015', 'stage-0'] } }, ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { 'COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET), 'COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY), 'COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY) } }), new LiveReloadPlugin({appendScriptTag: true}), ]}; Then, we have file when we used to make our server. server/index.js express In Client folder there is store.js file which is creating redux store to manage states and data. The things that are happening are as follows: We used redux-thunk & redux-sagas middlewares. We used combine Reducers to combine home & group reducer Then we made store using the above things. Then we trigger home & groups sagas. import { createStore, applyMiddleware, combineReducers } from 'redux';import homeReducer from './containers/Home/reducer';import homeSagas from './containers/Home/sagas'; import groupReducer from './containers/Group/reducer';import groupSagas from './containers/Group/sagas'; import thunkMiddleware from 'redux-thunk';import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const middlewares = [ sagaMiddleware, thunkMiddleware,]; const reducers = combineReducers({ home: homeReducer, group: groupReducer,});const store = createStore( reducers, applyMiddleware(...middlewares),); sagaMiddleware.run(homeSagas)sagaMiddleware.run(groupSagas) export default store; Now we have client/Routes.js. Here, we have two routes: Path=”/” => Lists all groups Path=”/group/:groupSlug/:groupId” => list all notes against some groups import React from 'react';import { Router, Route, browserHistory } from 'react-router';import { connect } from 'react-redux';import Home from './containers/Home';import Group from './containers/Group'; const Routes = ({}) => { return ( )}; // const mapState = ({}) => ({});// const mapDispatch = {}; export default connect(null, null)(Routes); In client folder we have create a configuration file inorder to save API_KEYS and COSMIC BUCKET NAME. You can edit this file to use your own keys and slugs. export default { bucket: { slug: process.env.COSMIC_BUCKET || 'sticky-note-app', read_key: "YOUR READ KEY", write_key: "YOUR WRITE KEY", }} There are two utils: Request Cosmic Request Request uses whatwg-fetch to hit AJAX requests to the Cosmic JS API. This util is used to call those endpoints which are not present in the Cosmic JS package e.g deleteMedia and searchObjects based on filters Cosmic JS Cosmic JS uses cosmicjs package to hit AJAX request to Cosmic API. There are two container: Home Group Home This container lists down groups. This group add new Note Group. It also edits and delete NoteGroups. This selects NoteGroup data from reducers and passes them to their components. This also passes add, edit and delete NoteGroup actions to the home component. Group This selects Notes data from reducers and passes them to their components. This also passes add, edit and delete Notes actions to the home component. There are following components in this app Color Picker Dialog Loader Sticky Notes Home Group ColorPicker This component is for picking the color of Sticky Note. import React, {Component} from 'react';import { ChromePicker } from 'react-color';

class ColorPickerField extends Component { constructor(props){ super(props); }

render() { return ( ) }}

export default ColorPickerField; Dialog This component will show the popups and dialogs to get input data and output responses import React, {Component} from 'react';import { ModalContainer, ModalDialog } from 'react-modal-dialog';

class Dialog extends Component { constructor(props){ super(props); }

handleClose = () => { this.props.closeDialog(); } render() { const { open } = this.props; return ( { open && { this.props.children } } ) }}

export default Dialog; Loader This is a loader component and it triggers whenever an ajax request in taking place. import React, {Component} from 'react';import { BounceLoader } from 'react-spinners';

class Loader extends Component { constructor(props){ super(props); }

render() { const style = { position: "fixed", top: "50%", left: "50%", marginTop: "-9em", marginLeft: "-15em", }; return ( ) }}

export default Loader; StickyNotes This component takes an array of options and convert them to stickynotes with edit, heading onclick and delete handler. import React, {Component} from 'react';import { NoteListWrapper, NoteWrapper, Note } from './styles';import moment from 'moment/moment'class StickyNotes extends Component {

render() { const { options } = this.props; return ( { !!options && options.toArray().map((option, index) => { return {moment(option.get('created')).fromNow()} this.props.handleClick(option)}>{option.get('title').substring(0,11)} {option.get('content').substring(0, 41)}

this.props.deleteOption(option.toJS(), index)} className="pull-right"> this.props.editOption(option, index)} style={{ marginRight: "1vw" }} className="pull-right"> }) } ) }}

export default StickyNotes; Home This is a component where we feed NoteGroup options to Sticky Notes component and have add, edit and delete handlers. import React, {Component} from 'react';import Dialog from '../Dialog';import StickyNotes from '../StickyNotes';import ColorPicker from '../ColorPicker';

class Home extends Component { constructor(props){ super(props); this.state = { title: "", content: "", color: "#fff", selectedGroup: null, openAddDialog: false, openEditDialog: false, group: { title: "", }, } }

addGroup = () => { const { title, content, color } = this.state; this.props.addGroup({ title, content, color, }); this.setState({ title: "", content: "", openAddDialog: false }) }

editGroup = () => { const { group, selectedGroup } = this.state; const { state } = this; this.props.editGroup({ title: group.title, content: group.content, color: group.color, }, group.slug, selectedGroup); this.setState({ ...state, group: { title: "" }, openEditDialog: false }) }

goToNoteGroup = (group) => { this.props.changeRoute(`/group/${group.get('slug')}/${group.get('_id')}`); }

editOption = (group, selectedGroup) => { this.setState({ openEditDialog: true, group: group.toJS(), selectedGroup, }); } render() { const { groups } = this.props; const { state } = this; const { title, content, color, openAddDialog, openEditDialog, group } = this.state;

const styles = { btnCircle: { width: "30px", height: "30px", textAlign: "center", padding: "6px 0", fontSize: "12px", fontWeight: "700", lineHeight: "1.42", borderRadius: "15px", margin: "10px", border: "none", outline: "none", float: "right" } }

return ( this.setState({ openAddDialog: true })}> this.setState({ openAddDialog: false })} > this.setState({ title: e.target.value })} /> this.setState({ content: e.target.value })} />

this.setState({ color: color.hex })} />

this.setState({ openEditDialog: false })} > this.setState({ ...state, group: { ...this.state.group, title: e.target.value } })} /> this.setState({ ...state, group: { ...this.state.group, content: e.target.value } })} /> this.setState({ ...state, group: { ...this.state.group, color: color.hex }})} />

{ } ) }}

export default Home; Group This is a component where we feed Notes options to StickyNotes component and have add, edit and delete handlers. import React, {Component} from 'react';import Dialog from '../Dialog';import StickyNotes from '../StickyNotes';import ColorPicker from '../ColorPicker';

class Group extends Component { constructor(props){ super(props); this.state = { title: "", content: "", color: "", selectedNote: null, openAddDialog: false, openEditDialog: false, openViewDialog: false, note: { title: "", }, } }

addNote = () => { const { title, color, content } = this.state; const { groupId, addedMedia } = this.props; const image = this.refs.imageFile.files[0]; const file = this.refs.attachedFile.files[0]; this.props.addNote({ title, content, color, image, file, }, groupId); this.setState({ title: "", content: "", openAddDialog: false }); }

editNote = () => { const { note, selectedNote } = this.state; const { state } = this; let METAFIELDS = note; METAFIELDS.metafields[1].value = note.color || "#000" this.props.editNote({ title: note.title, color: note.color || "#000", content: note.content, metafields: METAFIELDS.metafields, }, note.slug, selectedNote); this.setState({ ...state, note: { title: "" }, openEditDialog: false }) }

editOption = (note, selectedNote) => { this.setState({ openEditDialog: true, note: note.toJS(), selectedNote, }); }

goToNote = (note) => { this.setState({ note: note.toJS(), openViewDialog: true, }) } render() { const { notes } = this.props; const { state } = this;

const { title, content, color, openAddDialog, openEditDialog, openViewDialog, note } = this.state;

const styles = { btnCircle: { width: "30px", height: "30px", textAlign: "center", padding: "6px 0", fontSize: "12px", fontWeight: "700", lineHeight: "1.42", borderRadius: "15px", margin: "10px", border: "none", outline: "none", float: "right" } }

return ( this.setState({ openAddDialog: true })} className="btn btn-primary btn-lg"> this.setState({ openAddDialog: false })} > this.setState({ title: e.target.value })} /> this.setState({ content: e.target.value })} /> this.setState({ color: color.hex })} />

this.setState({ openEditDialog: false })} > this.setState({ ...state, note: { ...this.state.note, title: e.target.value } })} /> this.setState({ ...state, note: { ...this.state.note, content: e.target.value } })} /> this.setState({ ...state, note: { ...this.state.note, color: color.hex }})} />

this.setState({ openViewDialog: false })} > {note.title} {note.content}

{ !!note.metadata && !!note.metadata.feature_image && } { !!note.metadata && !!note.metadata.attachment && Click on this link to open attachment in the new link }

) }}

export default Group; Conclusion So, this is an app where every scenario of the Cosmic JS RESTful API is covered. I hope you liked the tutorial. This article originally appears on the . Cosmic JS Blog