DEVDOCS.md

Encore Link Developer Documentation

EncoreLink is a web application currently built with (from back to front):

• PostgreSQL Database
• Loopback API Framework
• Node.js Express Web Framework
• Redux for client state management
• React.js UI Library
• es2015+ JavaScript with Babel JS compiler
• Foundation by Zurb - CSS Framework
• Webpack Module Bundler
• Jest Testing Framework

Data

We use Loopback to create and control our data. Once you install it with npm and get the shell database created as described on our README, you can run a little interactive command line app that walks you through creating your data/API.

• The Loopback site has a good Getting Started page that shows you the basics of using that command line tool.
• The main files that represent the model in our code are the .json files in the common\model folder. Examples are user.json and event.json.
• JSON is just data, so comments are not allowed. Plus Loopback generates these JSON files, so our comments would be toast if we altered the model using the Loopback CLI.
• NOTE: We might look to commenting these files in the future by either minifying to remove comments or adding a comment element

State

We use Redux to ensure state transitions are understandable. This happens by managing client state in one place and having all mutations happen through a one-way data flow. Check out this page to get up on Redux fundamentals, or watch these videos

• Actions are defined in client\src\actions.
• Initial state and Reducers are defined in client\src\reducers. Reducers are functions that define how client state is mutated. The rootReducer combines our project-specific reducers into one using the Redux combineReducers convenience function.
• Our management of the Store is in client\src\store.
  • configureStore.js does the main setup and configuration of the store
  • errorMiddleware.js sets up middleware for handling errors
  • promiseMiddleware.js sets up middleware for handling Promises

State Transition Example

Let's walk through an example of the first step of our primary use case: an Organizer registering on the Landing page and going to the CreateEvent page. We suggest that you have the app installed on your machine as described on the README, and run through the app with your dev tools window open, so you can verify for yourself what's going on. [To Be Completed]

Quick Tips

Here are a few tips on how to accomplish specific goals

Conditional Hard-Coded Links

Say you want a piece of text in the UI to be a link to another page, but which page is linked is dependent on some application state. For example, the username in the header is a link to the user's profile page, but the logged in user could be an organizer or a volunteer, so we don't know which page to link to. You need to access the props to find out the state. This assumes you already have the props defined, and you just need to access it.

1. in your container, import the prop from the proper reducer

import { isLoggedIn, getUser, isMusician } from '../reducers/userReducer';

2. make sure your container maps the proper state to your prop

const mapStateToProps = (state) => {
  return {
    //...
    isMusician: isMusician(state)
  };
};

3. In your component, require your prop

static propTypes = {
    //...
    isMusician: PropTypes.bool.isRequired
  };

4. Find your target pages in routes.js. Then, in your component, set up a conditional that links to the correct page based on the prop

  Hello, <Link to={this.props.isMusician ? '/musicianProfile' : '/organizerProfile'}>{this.props.user.email}</Link>

Fetching Data with gimmeData

Let's fetch some data from the StrongLoop web api!

1. In your browser, navigate to the StrongLoop API Explorer and choose an API endpoint you'd like to retrieve data from. For the purposes of this example we'll choose Get All Events

2. This file is the events.js container and retrieves data from the url for events.

import gimmeData from '../utils/gimmeData';

//This function returns the url for all events
function urlFn(state) {
  return 'events';
}

/* Fetches the data from the URL and provides it to the
   events component. */
export default gimmeData(urlFn)(Events);