Forem: Audiophile

The right way to resize Reactstrap's Modal component.

Audiophile — Wed, 12 Feb 2020 15:14:24 +0000

The Challenge

You're working with reactstrap (bootstrap + react), that good old trusty css library which lets you style your views with components as against the traditional classes. From the docs, you get an example like this:

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';

const ModalExample = (props) => {
  const {
    buttonLabel,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

The example above works perfectly for most use cases, you can add the needed classes and style components as needed and boom! works like magic---until you have to resize the width and height of the modal, that is.

First attempt at resizing.

This is what I personally tried to do at first.

Step 1: Create a class with my custom width and height requirements in my stylesheet.

.custom-modal-style {
width: 897px;
height: 802px;
}

Step 2: Add style to Modal component.

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import "./styles.css";

const ModalExample = (props) => {

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className="custom-modal-style">
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          ...
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

But you'll notice with me that this doesn't work. Go ahead, try it(for width and height)...I'll wait.

Following my curiosity...

Upon further inspection with the Chrome dev tools, I realized that the Modal component rendered down to three nested tags:

The first 3 divs just before the div with a class of 'modal-header' show what the modal component renders down to. And then on further fiddling, I saw that the only way I could get the required change I was looking for was by adding my custom class to the div with the class of 'modal-content'.

This is not in reactstrap's docs, and there's no stated way of accessing that particular div tag.

So like every developer who wants to deliver fast, I went to stack-overflow to find hacks...long story short, they didn't work. So I did the next sane thing....

Diving into reactstrap's github repo.

On a brief perusal of the Modal component's props on Reactstrap's GitHub repo, this is what you see from lines 21-61:


const propTypes = {
  isOpen: PropTypes.bool,
  autoFocus: PropTypes.bool,
  centered: PropTypes.bool,
  scrollable: PropTypes.bool,
  size: PropTypes.string,
  toggle: PropTypes.func,
  keyboard: PropTypes.bool,
  role: PropTypes.string,
  labelledBy: PropTypes.string,
  backdrop: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.oneOf(['static'])
  ]),
  onEnter: PropTypes.func,
  onExit: PropTypes.func,
  onOpened: PropTypes.func,
  onClosed: PropTypes.func,
  children: PropTypes.node,
  className: PropTypes.string,
  wrapClassName: PropTypes.string,
  modalClassName: PropTypes.string,
  backdropClassName: PropTypes.string,
  contentClassName: PropTypes.string, //voila!!!!!! Got you!
  external: PropTypes.node,
  fade: PropTypes.bool,
  cssModule: PropTypes.object,
  zIndex: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
  ]),
  backdropTransition: FadePropTypes,
  modalTransition: FadePropTypes,
  innerRef: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
    PropTypes.func,
  ]),
  unmountOnClose: PropTypes.bool,
  returnFocusAfterClose: PropTypes.bool
};

These are all the props that are to be passed to the Modal component. I won't go into details about the other props because that's not what you're here for.

I saw the contentClassName prop and thought "hey, this could work..", and work it did. So my code now looked like this:

import React, {useState} from 'react';
import {Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap';
import "./styles.css";

const ModalExample = (props) => {

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} contentClassName="custom-modal-style">
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          ...
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalExample;

Now our Chrome dev tools look like this:

And I got the desired result!

To Summarize:

Just add contentClassName="your-custom-class" to the Modal component and you'll get your result!

Please share and like to save someone the stress!

Learning how to be lazy in React: A guide for beginners.

Audiophile — Wed, 05 Feb 2020 00:17:44 +0000

If you're someone who reads a lot of dev articles, you've probably heard it once or twice(or ad nauseam depending on the crowd) that the best devs are the lazy ones! They get as much done with as little complexity as possible, while keeping their code readable.

Luckily for us, the react way of preferring composition over inheritance(i.e using components) encourages us to be as lazy (and efficient) as we can be.

So what are components, in English?

Components are tools. A component is that spanner you use to tighten the terminals on your car battery when you need to fix it, sometimes you need a size 12, so you pass it a '12' prop. Other times, you require a slightly bigger or smaller size depending on the problem.

On slightly slow days, a component is a pot or a frying pan, if you will. If you need to fry two eggs, then you don't need a large pan (or in react-speak, you don't need the 'large' prop). You pass it the 'small' prop, 'fry' your eggs as needed, and have yourself a nice reacty delight.

It's in the little things you see, if you're a beginner, just learning the ropes of 'thinking in react', it may take a couple of weeks or even months to fully grasp and begin to leverage the power of reusable components.

This article-cum-tutorial will help you on your journey by building a reusable component.

The Spacer Component a.k.a "Shift-abeg" .

Don't worry if you don't understand the alias, it's a Nigerian slang for "gimme some space". I've found that making your code as relatable as possible makes it stick faster.

Two foxes telling each other to "Shift abeg"Photo by cloudvisual.co.uk on Unsplash

So you're a front end developer who needs to add margin to a lot of things. On a good day, most popular css libraries will handle that for you. But then again, you don't want to be that guy that brings a bazooka to a knife-fight...sometimes a simple native margin property would do.

So you sprinkle the margin property here and there, adding it to your component classes and all, you hate the extra typing, but what can you do? The short answer is: "get lazy!"

What if you could make a component that accepted a prop which would determine how much space you wanted with minimal instructions?

Step 1: Create our component scaffolding.

import React from 'react'

export default Spacer = () => {}

Step 2: Give it a behaviour

import React from 'react'

export default Spacer = () => {
return(
<div style={{margin: ""}}></div>
)
}

In this case, we don't want our component to fix our car for us or fry two eggs...even though those would be great right now, we just want some space whenever we apply it.

Step 3: Pass some props.

In case your mind gets foggy when you hear props, it's just short for property...like how an object has a property(or key) and a value associated with that prop?

import React from 'react'

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}

Wait hold-up, I thought we wanted space, why is our component having kids?!

Let's be calm now, so the reason our component needs to have children is because we don't want our component to care about what it applies its space-creating powers to. We just want it to be an unbiased, incorrupt Shift-abeg(er). So "children" in essence says, you're not going to know what you'll get before-hand, but whatever it is, apply a margin property to it.

Next up, our unit props, is where the magic happens. Now we want our Shift-abeg Component to give us a margin of whatever number is passed to it(in pixels). Now our Spacer doesn't know that this property is supposed to be a number yet, so we solicit the help of a package that used to 'date' react before but then they broke up. Sad, I know.

The package is called 'prop-types'. It helps to check the data type of your props, so your component knows when the right props are passed to it, and vice-versa.

Install prop-types...

 npm install prop-types  || yarn add prop-types

When we're done installing, we add it to our component, to give it some understanding of what it's supposed to receive as a unit prop.

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{margin: props.unit }}>{props.children}</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

Don't panic! We're just telling our component to expect either a string, on days when we want to add things like unit="5px" or unit="5em", etc... and it should expect a number on days when we just want to do this: unit={5}.

Our Spacer component is almost done!

Now, our spacer component has the ability to give us a margin quite alright but what if we want a margin-left? or a margin-right? It fails at that. And we're trying our best to lazy things up right?

Let's go one step further:

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit,
   marginLeft: props.left,
   marginRight: props.right,
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

Proptypes.elementType means: "hey Spacer, expect your children props to be react elements"

Mad ooo!(slang for "wonderful!" in this context) We're almost there. Now our Spacer can give whatever children components are passed to it an ability to move to the left or to the right.

But there's one tiny problem...

What if no values are passed? We have no fall back for that event. For instance, if we give a margin-left because that's the behaviour we're looking for, what happens to the margin and margin-right style props that are expecting values?

Let's fix that:

import React from 'react';
import PropTypes from 'prop-types';

export default Spacer = (props) => {
return(
<div style={{
   margin: props.unit || "",
   marginLeft: props.left || "",
   marginRight: props.right || "",
}}>
   {props.children}
</div>
)
}


Spacer.propTypes = {
   unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   children: PropTypes.elementType
}

Ta-da! We've ensured that our component won't throw bugs in case nothing is passed to any of its style properties.

What about margin-top and bottom sir?

Here's the beautiful thing, if you want space at the top or bottom of your component, you don't have to pass it any children. You can just pass it a unit prop, specifying how much space you want in pixels, and place it on top or below your target component.

Spacer in action:

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {

return (
  <div>
  <Spacer unit={40}/>
  <ComponentThatNeedsAMarginTopProperty />
  </div>
)

}


export default App;

For the normal margin powers:

import React from 'react';
import Spacer from './components/common/Spacer'; 

const App = () => {
//This would give it space to the left side of the component!
return (
  <div>
  <Spacer left={40}>
  <ComponentThatNeedsAMarginLeftProperty /> 
  </Spacer>
  </div>
)

}


export default App;




A side note(updated):
Please note that using the style property of jsx tags give them more power over your styles than classes. This could lead to issues that make css hard to debug, classes are better as rightly pointed out in the comments section. However for the purpose of keeping this tutorial as beginner-friendly as possible, I'll leave as is.
</code> 


##Laziness is Achieved!
Congrats dear beginner! You've made a reusable component! Now the amount of time you spend writing margin-this or margin-that for classes have reduced significantly. You can now spend more time on other parts of your code! This is just a brief introduction to the power of re-usability to the uninitiated in React. Hope this helped. 

Stay lazy.

Two string methods every JavaScript developer should know.

Audiophile — Thu, 14 Nov 2019 15:06:28 +0000

The Challenge:

I was working on a project recently where I was required to build an endpoint that enabled the client to be able to query the Mongo database based on a single date, and also a date range. I know, exciting!

Here's the thing though, while testing the endpoint, I realized that I wasn't successfully querying the db because I was getting the date in this form '"2019-08-02T00:00:00.000Z"'. Meanwhile I needed it in this form: '2019-08-02'. So I needed to separate the time from the date-time string and remove the double quotes from the string.

In case you're interested, I wrote about how to query NoSQL databases with date-ranges here:

How to query documents in MongoDB that fall within a specified date range using Mongoose and Node.

Audiophile ・ Nov 7 '19

#node #javascript #mongodb #mongoose

What I tried:

I did what every respectable developer does when they hit roadblocks: I scoured the realms of Stack Overflow looking for a RegEx to solve the issue!

While searching, I saw lots of answers that worked but didn't make any sense to me, and I wasn't quite comfortable with adding that to the code base. Fixing code that works but you don't understand is a practice I'd rather not get used to.

I came across an answer that used the JavaScript string's split() method. I became curious and searched for the String object on Google, just to see what came up. I won't bother you with too much talk on all the different methods I found. I'll only bother you with the two that solved my challenge.

String.prototype.split() in action!

A quick search on M.D.N describes the split() method as such:
The split() method turns a String into an array of strings, by separating the string at each instance of a specified separator string.

You may be thinking "Uh-huh, in English please...", no worries, I thought the same. So here's an alternative definition:

The split method helps you cut down a desired Mama String into smaller child strings and it performs this separation based on the condition you give it. It then returns the answer back to you as an Array

This condition is called a separator. A very important thing to note about the separator is that it must exist in the string. So if you instruct the split method and say:
"Hey I want you to cut down a Mama String called data into smaller child strings using a comma."

Split says ok and jumps to action!


let data = "data";

data = data.split(',');

console.log(data);

//Expected Result: ["data"];

You may be thinking, "hold up, Mr. split, don't think you can fool me by fixing the string I passed to you by putting it into an array". Don't be too hasty there, here's what happened; we told split() to give us child strings from the Mama string we passed to it using a separator that wasn't part of the Mama string. So the Mama string looks at itself and is like "I don't have any commas, so I can't be separated by it".

However, what if we tweaked our separator to a similar value, say the letter "a". Let's see:


let data = "data";

data = data.split('a');

console.log(data);

//Expected Result: ["d", "t", ""];

Aha! We get little child strings wherever the letter a was found. So Mr. split() takes the separator and uses it as a mini-search criteria where the Mama string is cut down wherever the separator shows. Then it skips the separator and returns anything after it also, hence the "" we get as part of our result above.

But what if we wanted the separation in just a number of places?

That's okay too, split() makes that convenient for you by providing an optional limit parameter you can fix into it. The catch though, is that once the limit is reached, split stops trying to separate the Mama string and gives you only what has been separated so far. So assuming we wanted our "data" string to be split by the letter "a" just once and no more, we would get something like this:


let data = "data";

data = data.split('a', 1);

console.log(data);

//Expected Result: ["d"];

Okay but how does this fix my Date-Time problem?
If you recall, I had a date-time string that looked like this: '"2019-08-02T00:00:00.000Z"'. With the brand new knowledge I gained, I could then do away with the timestamp part of the date-time I got. So I would have something like this:


   let date = '"2019-08-02T00:00:00.000Z"';

    date = date.split('T', 1);

   console.log(date);

   //Expected result: ['"2019-08-02"]

Now I have my date! But how about the double-quotes issue though? How do I solve that?

String.prototype.replace() to the rescue!

Here's what replace() does, it takes in the string you want gone as the first parameter, and the string you want to introduce as the second parameter. So it goes like this:

string.replace(/stringIHate/,'StringILove')

It uses double forward-slashes to house the string you want gone. This also allows you to add things like the letters i to instruct that you want the search to be case-insensitive or g to instruct that you want the search to be global i.e. everywhere it is found in the string.

So to resolve our issue, we'd use it as such:


   let date = '"2019-08-02T00:00:00.000Z"';

    date = date.split('T', 1);

   console.log(date);

   //Expected result: ['"2019-08-02"]

  //REPLACE METHOD
   date = date[0].replace(/"/,"");

   console.log(date);

   //Expected result: "2019-08-02"

Voila! I finally have my date in the form I want it. I did so by telling Mr. replace() to search through my string in the returned array, look for double quotes and replace them with nothing.

Chaining replace() and split(): A better way.

In order to boost efficiency, we could shorten the lines of code we need to write by chaining string methods together. Also, it would be better to call the replace function on the string first before calling the split function because it makes our code shorter. Hence we could condense the code as such:

   let date = '"2019-08-02T00:00:00.000Z"';

   date = date.replace(/"/g, "").split('T',1);

  console.log(date);

 // Expected Result: ["2019-08-02"];

//This is shorter and more semantic than:
date = date.split('T',1)[0].replace(/"/g, "");

//You could do that however if you don't want the string to be returned as an array

Conclusion

I hope you found that helpful. Before you reach out for a Regular Expression you-don't-quite-understand-but-works to solve your string-related issues, try to take a deeper look at JavaScript string methods. Please like, share and leave comments so more people who need this can see it!

What other String methods have helped make life easy for you?

How to query documents in MongoDB that fall within a specified date range using Mongoose and Node.

Audiophile — Thu, 07 Nov 2019 23:47:25 +0000

Please Note: This tutorial assumes you have a working knowledge of javascript, the node run-time environment, mongoose queries and mongoDB

The Challenge:

So you work for a sales company called Super Doors as a developer and your boss, a Senior dev has been tasked with finding all customers that were unfortunate enough to purchase some bulletproof doors from the 24th - 30th of the month. Turns out the doors weren't so super after all and management needs a list of all the purchases made within those days for proper damage control. Lucky for you, your boss can't be bothered with such tasks and he assigns it to you. Next he goes, 'you know what? Why not just make it a feature on the platform for users to be able to query the database for customers within any range of dates?'

On the frontend:

You're meant to build a date range component that sends the startDate and the endDate to the backend. I won't go through building this as our concern is how to handle using dates on the backend to query the database. The point here is to define what values we're expecting as request parameters for the query.

Approach:

It's always a good idea to actually write out in words how you intend to approach the problem. You can be as specific or vague about it as you want, as long as it keeps you on track. Here's mine:

check that date is not empty
check that date is in proper format for query
Query database using Mongoose
Handle response.

On the backend.

We would need a Transaction model to hold information about each transaction made and a reference to an arbitrary User model. We would create a folder called 'models' and within it create a js file called 'transaction.js'.

Transaction Model:



const mongoose = require('mongoose');


const transactionSchema = mongoose.Schema({
     _id:{ type: mongoose.Schema.Types.ObjectId, ref: 'User'},
     name: String,
     email: {
              type: String,
              unique: true,
              match:`Regex match to ensure that string follows email format`  
             },
    address: String,
    phone: String,
    door:{ 
          name:String, 
          price: String
         },
   payment_status: {
            type: String,
            enum: ['Not Paid', 'Partial Payment', 'Paid'],
            default: 'Not Paid'
                   },
  date_paid: Date,

  date_delivered: Date          
});

module.exports = mongoose.model('Transaction', transactionSchema);

Controller Function:

Our controller function is where all the magic happens. Just like we did for the transaction.js file above, we would create a folder called 'controllers' and within it create a file called 'transaction.js'.



const Transaction = require('../models/transaction');


exports.getTransactionByDate = async(req, res) => {

try {
   //get dates from req.query by es6 object destructuring

    let { startDate, endDate } = req.query;

  //1. check that date is not empty
   if(startDate === '' || endDate === '') {
   return res.status(400).json({
       status:'failure',
       message: 'Please ensure you pick two dates'
        })
       }

  //2. check that date is in the right format
 //expected result: YYY-MMM-DDD
   console.log({ startDate, endDate});


//In some cases you'll get a date-time format where you have to separate the date
//from the time.


//3. Query database using Mongoose
//Mind the curly braces
const transactions = Transaction.find({ 
  date_paid: {
        $gte: new Date(new Date(startDate).setHours(00, 00, 00))
        $lt: new Date(new Date(endDate).setHours(23, 59, 59))
         }
  }).sort({ date_paid: 'asc'})  
}

//4. Handle responses
if(!transactions) {
return res.status(404).json({
 status:'failure',
 message:'Could not retrieve transactions'
})
}


res.status(200).json({
status:'success',
data: transactions
   })

} catch(error) {
  return res.status(500).json({
     status:'failure',
     error: error.message
        })
 }

}

Woah, okay, slow down...what just happened?

We got the required parameters from our request query object:



    let { startDate, endDate } = req.query;

We checked that neither parameters were empty and handled the response should that be the case.



    if(startDate === '' || endDate === '') {
   return res.status(400).json({
       status:'failure',
       message: 'Please ensure you pick two dates'
        })
       }

  //2. check that date is in the right format
 //expected result: YYY-MMM-DDD
   console.log({ startDate, endDate});

It is easier to get the date in Year-Month-Date format since that is the default way javascript handles dates

We queried the database using the mongoose find and sort method. We also made use of mathematical operations, namely 'greater than or equal to'--$gte and 'less than'--$lt. The sort method was just a little extra I added to sort our list of transactions in ascending order, it's not inherently necessary.



   const transactions = Transaction.find({ 
  date_paid: {
        $gte: new Date(new Date(startDate).setHours(00, 00, 00))
        $lt: new Date(new Date(endDate).setHours(23, 59, 59))
         }
  }).sort({ date_paid: 'asc'})  
}

Now you may be confused by what this new Date(new Date(startDate).setHours(00, 00, 00)) and this new Date(new Date(endDate).setHours(23, 59, 59)) does...Don't worry, got you covered.

When you call new Date() and pass it a date in string format, it returns the date you passed to it in date-time format. Then when we call new Date('date').setHours(); we get the chance to specify the time of day we want to start searching from in hour-minute-second format. In the case above, we want to start searching from the very beginning of our start date, so we have new Date('date').setHours(00,00,00);. Here's a short snippet from my PC to explain it further:

In the same manner, we want to get transactions up to but not beyond the last minute of our endDate, so we type new Date('date').setHours(23,59,59);.

But that's not all is it? We still have to wrap our new Date().setHours() in another new Date(). Why? Because as you can see from the snippet above, new Date().setHours() gives us what we want in seconds!(or is it milliseconds? I'm not sure). The point is, that's not the format we want, it's not legible enough.

So we wrap up new Date().setHours() to become new Date(new Date().setHours()) and we get our date in date-time format to the specific time we want!

We handle responses. Both for success and failure. In three statements: -If we don't get our transactions, notify the client. -If we get our transactions however, return the data to the client side. -All other exceptions, catch!



  if(!transactions) {
return res.status(404).json({
 status:'failure',
 message:'Could not retrieve transactions'
})
}


res.status(200).json({
status:'success',
data: transactions
   })

} catch(error) {
  return res.status(500).json({
     status:'failure',
     error: error.message
        })
 }

If you want to search for records within a single day, it's pretty much the same concept, only this time you have the same startDate and endDate, the difference would be in the time part of the query

Our Router:

Here we listen for get requests on the specified path of our choice and tell our getTransactionByDate function to handle the event for us.



  const express = require('express');
  const { getTransactionByDate } = require('../controllers/transaction');

const API = process.env.BASE_URL;
const router = express.Router();

router.get(`${API}/date_range`, getTransactionByDate);

module.exports = router;

I hope this has been helpful. If it has, like and comment! Also share to anyone you think may be having a hard time with querying NoSQL databases within a specific date range.

How to build dynamic mongoose queries

Audiophile — Mon, 04 Nov 2019 23:40:56 +0000

Disclaimer: This post assumes you have knowledge of Node js, and mongoose.

The challenge:

Say you need to build an internal product where a user needs to be able to search for data by different criteria e.g. a grading app for teachers where students can be searched based on class, age, continuous assessment results, school fees(partial payment or full payment).

On the back end:

-We would build a Student model
-A controller function for querying the database
-A router to listen for get requests on a specified path.

Our Student model:
We would need to define a model that encapsulates all the data we want each student attending our 'school of code' to have.

const mongoose = require('mongoose');

const student = mongoose.Schema({
  name: String,
  age: Number,
  class: String,
  school_fees: { 
               type: String, 
               enum: ['Not Paid', 'Full Payment', 'Partial Payment'], 
               default: 'Not Paid' 
              },
  test_1: String,
  test_2: String
});

module.exports = mongoose.model('Student', student);

Now imagine we have a select drop-down tag named 'Search By' on the front end which gives a list of criteria to search students by(i.e. our 'search_field') and clicking on either of the options displays a search bar by which you can type in your search value (let's call it 'search_value').

We would have to get the 'search_field' and 'search_value' on the frontend and use it to query the database as such({search_field: search_value}). Now we don't know beforehand what the client will pick.

For example: It could be Search by ('age'):(10). Age would be our search_field and 10 would be our search_value.

Our Controller function:


const Student = require('../models/student.js');

exports.getStudentBy = async (req, res) => {
  try {
    // get search_criteria from query parameter
    // build a query object with it
    // send data to the frontend

    const { search_field, search_value } = req.query;

    const queryObj = {};

    if (search_field !== '' && search_value !== '') {
      queryObj[search_field] = search_value;
    }

    console.log('::queryObj:::', queryObj);

    const student = await Student.find(queryObj);

    if (!student) {
      return res.status(404).json({
        status: 'failure',
        message: `Student with the given ${search_field}:${search_value} not found`
      });
    }

    res.status(200).json({
      status: 'success',
      data: student
    });
  } catch (error) {
    res.status(500).json({
      status: 'failure',
      error: error.message
    });
  }
};

What's happening here?

First we get the search field and search value from the request object by using es6 object destructuring.

 const { search_field, search_value } = req.query;

Next, we need to build a query object that would contain our query parameters in key-value pairs.

A gentle aside, assuming you need to search for students by class, you could do something like this:

const students = await Student.find({class: 'grade 2'});

The above would be easy if we knew what the client was going to pick ahead of time such as an input field and a 'button' beside it that says 'search by class'. But now we have a variety of inputs dependent on the client's choice.

So...

We build an object that dynamically sets the search field as the object's key, and sets the search value as the object's value.

Remember:

const object = {
                 key: value
               }

So we check that the search field and search value aren't empty strings. Then we set the search field to the query Object's key and the search value to the corresponding value.

 const queryObj = {};

    if (search_field !== '' && search_value !== '') {
      queryObj[search_field] = search_value;
    }

In case this looks confusing, google the difference between using the dot notation for adding properties to an object and using bracket notation. Don't use dot notation as this will not give you what you want

Next, we place this query object in our find method, and 'await' the result

     const student = await Student.find(queryObj);

Then we handle the asynchronous responses appropriately by placing the code in a try-catch block.

Our Router:


  const express = require('express');
  const { getStudentBy } = require('../controllers/student.js');

  const router = express.Router();

  router.get(`${API}/search`, getStudentBy);

  module.exports = router;

Here's where it all comes together, the router. We listen for get requests on the specified api path.

This tutorial is by no means exhaustive or well written. In fact it was a bit rushed, but I just had to post this because I just figured out how to do this and I'm stoked to share it!

Please leave your comments, contributions, corrections and likes!