Learning Objectives: Week of May 18, 2020

MongoDB

I was having issues connecting to my Atlas MongoDB server using the Git Bash prompt. The solution on Windows is switching to PowerShell. You can also check to see if your external IP is being restricted through the networking whitelist page.

You need to have a premium account with Atlas in order to use $and. If you need to combine two aggregation methods you can set two async methods to individual variables and then use prototype.Array.Concat to combine the two together. Below is an example of two aggregate functions I used for my Pokemon Pokedex application:

const milesRemaining = await pokeDex.aggregate([{ $match: {"milesRemaining": {$exists:true}}}, {$sort: {milesRemaining: 1}}]).exec();
const nonMilesRemaining = await pokeDex.aggregate([{ $match: {"milesRemaining": {$exists:false}}}, {$sort: {name: 1}}]).exec();
res.json([...milesRemaining, ...nonMilesRemaining]);

React & DataTables

There is a YouTube video that describes how you can include DataTables within a ReactApp.You can either follow along with the video or follow the below steps. React supports other libraries and there is even a helpful article that goes through the building blocks.

Your app can support other plugins from npm.js such as buttons, responsive design, and more. After you have assigned Jquery to your $ variable you would then require any additional plugins you need. Ex: require(‘datatables.net-responsive’)(window, $);

  • Install jquery and datatables.net from npm: npm i --save jquery datatables.net
  • Create a new table component
  • Include JQuery and DataTables using the following require statements
const $ = require(‘jquery’);
 $.DataTable = require(‘datatables.net’);
  • Return your dataset either using the built-in AJAX DataTables property or pass an array of objects to you child component from your parent component
  • Include a global reference to your table element using the ref attribute
<table className=”display” width=”1000% ref={el => this.el = el}
  • Create a new reference to your DOM table element
ComponentDidMount(){
    this.$el = $(this);
    this.$el.DataTable(
        { // set column information and other settings here }
    )
}
  • Destroy the table after using in your ComponentWillUnmount method:
this.$el.DataTable().destroy()

Zen Barcode Image With Text

After switching from BarcodeRender, I have found that creating a barcode with Zen Barcode is very straightforward apart from attaching the barcode text to the rendered image. Below is a basic outline of how to set this up in a C# project. You can use my sample static class to get started. 

  1. Assign a variable of type Code{barcodeType}Draw to the BarCodeDrawFactory class. 
  2. Create a new memory stream
  3. Draw the barcode
  4.  Set the max-width of the barcode and add padding for barcode bottom text
  5. Set up graphics, font, brush, and string format classes
  6. Set alignment of the text
  7. Draw the barcode text string to the image you drew earlier
  8. Save the image

C# Dictionaries

If you are quick to reuse a switch statement a better solution is to use a Dictionary. The dictionary is very straightforward and you can check if a value exists and if not return a default value.

DateRangeDescDict = new Dictionary<int, string>();
DateRangeDescDict.Add(0, "30 Days");
DateRangeDescDict.Add(1, "60 Days");
DateRangeDescDict.Add(2, "1 Year");
DateRangeDescDict.Add(3, "All");

public string DateRangeDescription(int selectVal){
    return (!DateRangeDescDict.ContainsKey(selectVal)) ? "30 Days" : 
        DateRangeDescDict[selectVal]; 
}

Leave a Reply

Your email address will not be published. Required fields are marked *