Giter Club home page Giter Club logo

breaking_bread's Introduction

🥖 Breaking Bread 🍞

Created by: @onwordi @teenie-quaggard @jcharnley @lucyewright

An app to help organise Wednesday's community lunch at Space4!

💾 Instructions to run app

  1. In your terminal: git clone [email protected]:fac-15/breaking_bread.git
  2. Make sure you are on the staging branch
  3. Run server by typing npm run dev in your terminal
  4. Open up chrome and navigate to http://localhost:5001

📝 Planning:

📋Process

1. Decided on concept 🤨

2. Created entity table relationship diagram/schema ENT Diagram

--- 1️⃣ --- --- --- --- --- ♾ MANY ♾ --- --- --- --- --- 1️⃣ ---

3. 📓 Set up file structure (note that we have not yet added test files in this diagram);

4. 🔎 Searched and found typos (front and back end) and got the server running and all files communicating!

5. ❓Set up our testing database ❌🔜✅

  • We first set up local server & then got confused and tried to host a test database on Heroku
  • test databases DO NOT need to be hosted on Heroku!

6.

🥴 Problems:

  • Working out what our schema relationships were.
  • Getting our tests up and running with confidence we weren't about to ERASE EVERYTHING!
  • Creating the test database.
    • First we tried to create our test db on Heroku however we could not excute the test script due to errors, we changed tactics and made one locally.
    • We had missed out the ssl and user keys in the options object within our connection.js file.
  • We also ran into trouble testing the date format as it would print the date,time & time zone.
  • Our XMLhtml response request did not return data from our databases
  • Linking our databases together to auto populate the FK columns according to primary key (foreign key)

Accomplishment

We were able to popluate our booking table with a people id & if a person has paid or not by using the data from the people's table and the connected (PK FK)

const postData = (fname, lname, org, pay) => {
  dbConnection.query(
    "INSERT INTO people (first_name, last_name, organisation) VALUES ($1, $2, $3) RETURNING id",
    [fname, lname, org],
    (err, peopleRes) => {
      if (err) return err;
      dbConnection.query(
        "INSERT INTO bookings (lunch_id, people_id, paid) VALUES ($1, $2, $3)",
        [1, peopleRes.rows[0].id, pay],
        err => {
          console.log("am i working");
          if (err) return err;
        }
      );
    }
  );
};



const postUserHandler = (request, response) => {
  console.log("IM WORKING postUserHandler");
  let data = "";
  request.on("data", chunk => {
    data += chunk;
  });
  request.on("end", () => {
    const { fname, lname, org, pay } = qs.parse(data);
    console.log("f", fname, "l", lname, "org", org, "pay", pay);

    postData(fname, lname, org, pay, err => {
      if (err) return serverError(err, response);
      response.writeHead(302, { Location: "/" });
      response.end();
    });
  });
};

💬 Stretch goals:

1. Multiple upcoming dates. ✅

2. Eventually we will need to filter lunches displayed to only show upcoming dates!

3. Carosel form display.

4. Votes for upcoming cuisine.

  • (Would involve creating another table.)

5. On form completion, show the lunch you have booked and who is going.

6.

breaking_bread's People

Contributors

jcharnley avatar lucyewright avatar onwordi avatar teenie-quaggard avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

teenie-quaggard

breaking_bread's Issues

Build SQL

I like the way you have organised it - drop all tables at the top if they exist, then create new ones. It makes a bit more sense than ours.

You probably don't need the NOT EXISTS condition after it though:

DROP TABLE IF EXISTS people, lunch, bookings;

CREATE TABLE IF NOT EXISTS people (

Tiny, inconsequential thing. Ill raise a more important issue next time!

postUserHandler doesn't have an end!

You should make sure you end your response so the user doesn't get taken to your 404!

something like this at the end of postUserHandler would do the trick...

  response.writeHead(301, { location: '/' });
  response.end();

🏃🏽‍♀️ Setup instructions

Remember to add instructions on setting up environment variables for your project in your readme.md. You should mention how they are added (file name) and what variables are needed.

Testing! 👏

You did it! Very impressed, because we didn't manage any 😅

The tests also pass, and I like the console logging of the test output to be super clear.

My only suggestion is that the error messages could be more descriptive, as "this is a test" is a little vague 🤓

Throw in some form validation

Whether it will stop SQL injection I don't have a clue, but it would be a quick win. Throw something like this inline in the text input(s)

pattern="[a-zA-Z\s]{0,40}"

This regular expression will allow for for a-z, upper and lower case, as well as white space, to be entered. You can then add (or remove) an error class with javascript on the fly, listening to the 'input' event on the form fields. Use:

e.target.validity.valid

For more info on this

If your schema says NOT NULL for lunch_id and people_id, then you will need to add values to make this DB query work:

You probably know this, because the hard part is actually getting the lunch_id and user_id from the other tables!

This is the query that won't work at the moment:

"INSERT INTO bookings (paid) VALUES ($1)",
[pay],

So to make it work:
I'm guessing you have a pre-populated lunches table. You will need to:

  • Add the user - This currently works so WELL DONE!
  • Get the lunch id
  • Get the user id
  • use the lunch id, user id and paid variable to add them to the booking table!

BUT - these operations are asynchronous, so they will need to be chained together through nested callbacks! (I know, hell). I can try and help you with this this morning if you want!

Console logs🌲 and commented out code abound!

Just a minor thing - I know that we're still in the middle of development so ignore this if it's just because of that, but there seems to be a lot of extraneous console logs and huge chunks of commented code, so evaluating which ones are still necessary might be useful!

(We totally did the same thing though 😅)

Is there a reason why you have separate build SQL for testing?

You can use the same db_build.sql for testing and building your actual databases. In fact, its probably better to keep them as one so you're sure you don't have any differences between them.

If those files have small differences, then you're not testing your real database. You're testing a different database!!

Use a POST request to send information to the server

On form submit in dom.js, you can run an XMLHttpRequest() to post information to your server, which will get entered into the database:

xhr.open("POST", "/urlToListenForInRouter", true);
xhr.send(yourInformationvariableHere);

You can then listen for a POST request and the url to listen for in the router.js:

const method = request.method;

if (method === "POST" && url === "/urlToListenForInRouter") {
    handleYourFormDataHandler() // - this looks like your postUserHandler() in handlers.js
}

Console errors (frontend) about forEach 🐛

screen shot 2018-12-07 at 10 45 59 am

It does still seem to work, because you get your dates, but I think it has something to do with the response that you put into your getLunch function. When console logging Array.isArray(response) returns false 3 times before returning true. Similarly, logging the typeof the response returns string 3 times before returning object (screenshots below). It looks like the code runs 4 times, failing 3 times before the input type is changed and it actually gets to load. Maybe you know all this, but if not I hope it helps to figure out whatever is happening!

console.log(typeof(response)):
screen shot 2018-12-07 at 10 51 03 am

console.log(Array.isArray(response)):
screen shot 2018-12-07 at 10 51 16 am

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.