Category Archives: JavaScript

Parsing Hash Args for Cognito Auth – Javascript

Hi everyone,

A quick post on a function for parsing hash args when using AWS Congito.

Just in case the fiddle ever disappears:

const parseHashArgs = aURL => {

  aURL = aURL || window.location.href;

  var vars = {};
  var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');

  for (var i = 0; i < hashes.length; i++) {
    var hash = hashes[i].split('=');

    if (hash.length > 1) {
      vars[hash[0]] = hash[1];
    } else {
      vars[hash[0]] = null;
    }
  }

  return vars;
};

document.body.append(parseHashArgs("#id_token=testtokenval&token_type=bearer&expires_in=3600")["id_token"]);

Thanks to this link on Github: https://gist.github.com/miohtama/1570295/289d5a82e65663c9b515c88186a268c6dd1fddb7

NavLink ListItems not Applying activeClassName class when Clicked On – ReactJS React-Router MaterialUI

Hi everyone,

A bit of a hairy issue I ran into today that took a while to track down. I’m using React Router with Material UI to render a Drawer as a sidebar:

The issue was that some links were not applying the expected activeclass:

<ListItem button component={NavLink} to="/about" onClick={this.handleItemClick} className={classes.sidebarContentListItem} activeClassName={classes.active}>
	<ListItemIcon className={classes.sidebarText}>
		<Info />
	</ListItemIcon>
	<ListItemText primary={
		<Typography type="body2" className={classes.sidebarText}>
			About
		</Typography>
	} />
</ListItem>

After trawling through react-router I eventually found a post on github that mentioned a similar issue: https://github.com/ReactTraining/react-router/issues/4638

The solution turned out to be wrapping all relevant components with withrouter.

Uncaught SyntaxError: Unexpected token < - ReactJS Build

Hi everyone,

A ReactJS issue I ran into after running npm run build:

Uncaught SyntaxError: Unexpected token <

This one took a while to track down but it essentially boils down to the built index.html file referencing paths relatively:

Issue: index.html was referencing
"<script ... src="./static/js/main.e7b5bb28.js"></script></body></html".
 
Instead of:
"<script ... src="/static/js/main.e7b5bb28.js"></script></body></html".

This meant that anytime a page was accessed directly it attempted to load the static files from the wrong directory. To fix it, I had to update the homepage node in package.json

Original:
...
"version": "0.1.0",
  "homepage": "./",
  "private": true,
...
 
Instead use:
"version": "0.1.0",
  "homepage": "/",
  "private": true,

Hopefully that’s able to help someone else out, took a while to track down!

Allow Number and String for PropTypes – ReactJS

Hi everyone,

A quick post on how to allow a string or number when defining PropTypes:

static propTypes = {
        numberField: PropTypes.number.isRequired,
        stringField: PropTypes.number.isRequired,
        mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
    }

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/41808543/522859

VirtualDog Tutorial PluralSight

Hey everyone,

Just taking a quick look at Jasmine with Typescript and found a decent looking tutorial on PluralSight with a sample app called VirtualDog. Attempting to run the following command resulted in an error on Windows 10:

npm run bower-typings

> concurrently “bower install” “typings install”

[0] ‘bower’ is not recognized as an internal or external command,
[0] operable program or batch file.
[1] ‘typings’ is not recognized as an internal or external command,
[1] operable program or batch file.
[1] typings install exited with code 1
[0] bower install exited with code 1

npm ERR! Windows_NT 10.0.15063
npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “run” “bower-typings”
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! VitrualDog@0.0.1 bower-typings: `concurrently “bower install” “typings install” `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the VitrualDog@0.0.1 bower-typings script ‘concurrently “bower install” “typings install” ‘.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the VitrualDog package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently “bower install” “typings install”
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs VitrualDog
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls VitrualDog
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Chris-PC\Desktop\Testing Javascript with Jasmine and Typescript\virtualdog-begin\npm-debug.log

In order to fix it, just run the following command:
npm install -g bower

Thanks to the following link: https://stackoverflow.com/a/37669968/522859