townHallSubmission

submission site for new town hall events

Contributing

Communication

Anyone who is actively contributing to this project can become a member of this GitHub group, and join our slack channel. Please contact us at info@townhallproject.com

Development Process

• Open an issue in the repository describing the feature you intend to work on, or assign yourself to an issue.
• In the comments of your Pull Request, point out which issue you've resolved and how.

Dev Environment

Firebase is both a real-time database and hosting platform. This project is bundled using webpack. In order to get started in the development environment be sure to follow these steps in the command line:

• npm i
• npm run watch (will start webpack dev server)

By default it will run on port 8080.

Our production build is generated by using:

• npm run build
• npm run start

By default it will run on port 3000.

Trouble Shooting Dev Environment setup

MAKE SURE YOU ARE USING NODE VERSION v10 - v12

check which version of Node is running node -v should look something like this v12.16.1 use nvm, Node Version Manager, to change to Node v12

If another version of Node is running follow directions listed here (https://github.com/nvm-sh/nvm#installing-and-updating) to install nvm

• curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash add nvm to path
• export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Change to Node v12

• nvm install 12

ENVIRONMENT CHANGE

If the development environment changes since the last time npm i was run some packages may need to be re-installed or rebuilt

• npm install node-sass
• npm rebuild node-sass

Introduction to Firebase

Firebase is a readtime database; so you can add listeners for child_added or child_changed. These are very useful for our case where the data is being added and changed on a pretty constant basis. We use this to read in the event data.

Reading Data

var townHallsFB = firebase.database().ref('/townHalls/').orderByChild('dateObj');
townHallsFB.on('child_added', function (snapshot) {
  //child_added iterates over every child node at the endpoint /townHalls/
  //snapshot has a key, in our case snapshot.key is the event id.
  //calling .val() on snapshot will unpack the object at this endpoint.
  var newtownhall = new TownHall (snapshot.val());
})

Alternatively, sometimes it's important to be able to ensure a function is executed only after all the data is run. This is where once is useful. To read the data at an endpoint once, we chain .ref() with .once(). This returns a promise. We can do things with the data in the resolve function of the promise.

var townHallsFB = firebase.database().ref('/townHalls/').orderByChild('dateObj');
townHallsFB.once('child_added').then(function(snapshot) {
  //once returns the data at the endpoint /townHalls/ as an array like object
  snapshot.forEach(function(ele){
    //ele here is now like the snapshot returned in the 'child_added' call.
    var newtownhall = new TownHall (ele.val());
    })
  })

Writing Data

Writing data follows a similar pattern. We chain .ref() with .update([object]) or .set(value). We do not write data from the client side very often. For more information, check out the Firebase docs.

Help

If you need help on anything, or are unsure about how something is setup, please email meganrm@townhallproject.com.