wk 4 Refactor - Sophievanderburg/blok-tech GitHub Wiki

👌 Refactor

Refactor 1

Before

    function onsavedmatch(req, res) {
      db.collection('users').find().toArray()
        .then(results => {
          res.render("savedmatch.ejs", {data: results, title:"Saved matches"});
        });
      }

After

    function onsavedmatch(req, res) {
      db.collection('users').find().toArray()
        .then(results => {
          res.render("savedmatch.ejs", {
            data: results,
            title:"Saved matches"
          });
        });
      }

I changed this so the object is more clear. This way you do not have to look as long for the value of data. In the 2th option you can find it in a split second.

Refactor 2

Before

const express = require("express");
const methodOverride = require('method-override');
const app = express();
const bodyParser = require("body-parser"); //parses the data and stores it in req.body
const mongo = require("mongodb");
const MongoClient = require("mongodb").MongoClient;

// Database set up
var uri = process.env.MONGO_URI;
var dbName = process.env.DB_NAME;
var dbCollectionName = process.env.DB_COLLECTION_NAME;

After

const express = require("express");
const methodOverride = require('method-override');
const app = express();
const bodyParser = require("body-parser"); //parses the data and stores it in req.body
const mongo = require("mongodb");
const MongoClient = require("mongodb").MongoClient;

// Database set up
const uri = process.env.MONGO_URI;
const dbName = process.env.DB_NAME;
const dbCollectionName = process.env.DB_COLLECTION_NAME;

I used conts/let & var togheter...

Refactor 3

Before

<input type="text" name="genre1" id="genre1" />
<input name="genre2" type="text" id="genre2" />
<input type="text" id="genre3" name="genre3"  />

After

<input type="text" name="genre1" id="genre1" />
<input type="text" name="genre2" id="genre2" />
<input type="text" name="genre3" id="genre3" />

This way it is much more organised than with the before. It looks messy.

Refactor 4

Before

<div><%- include('partials/header.ejs') %></div>

After

<header><%- include('partials/header.ejs') %></header>

At first the <header></header> tags stood in the partials. This was not very useful for the CSS selectors.

Refactor 5

Before

const connectionUri = process.env.MONGO_URI;

After

const uri = process.env.MONGO_URI;

I changed this, because 'connection' was not necessary. With the comments I already indicate that these variables are for the database connection.

⚠️ **GitHub.com Fallback** ⚠️