Category Archives: Guides

Including an Externally Hosted Script in ReactJs

Hi everyone,

Just a quick example of how to include an externally hosted js file in a reactjs app. In index.html add your script tag as you would in a normal app:

  <head>
    <script src="https://js.prelive.promisepay.com/PromisePay.js " type="text/javascript"></script>
  </head>

Then in the file you plan to use the library you can add a const and reference it normally:

const promisepay = window.promisepay;

Thanks to this link for the info: https://stackoverflow.com/a/44877953/522859

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

Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows:

 
const styles = theme => ({
    ...
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'
        }
    }

Then just reference it as you normally would:

 
const styles = theme => ({
 
const { classes } = this.props;
 
<Button size="small" className={classes.greenButton} variant="raised">
      <AddShoppingCartIcon />
</Button>

Avoiding Wrapper Divs in ReactJs

Hi everyone,

Just a quick post on how you can avoid wrapper divs in ReactJs. It’s particularly useful when populating tables or creating parts of a larger component. Instead of the following:

return (
  <div>
    <td>Frogs</td>
    <td>Turtles</td>
  </div>
);

You can use fragments:

import React, { Fragment } from 'react'
...
return (
  <Fragment>
    <td>Frogs</td>
    <td>Turtles</td>
  </Fragment>
);

The fragment won’t polute the dom and mean that you don’t need to add any additional styling. Check out these links for more info:
https://reactjs.org/docs/fragments.html
https://stackoverflow.com/a/49375945/522859
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child.

const ChildComponent = () => <div>Child Component</div>;
 
const MainComponent = (props) => <div><div>Main component. Child appears below</div>{props.content}</div>;
 
class App extends React.Component {
 
  render () {                                        
    return (
      <div>          
          <MainComponent content={<ChildComponent />} />          
      </div>
    );
  }
}

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/41499555/522859

DbSet does not contain a definition for ‘FromSQL’ and no extension method ‘FromSql’ accepting an argument of type ‘DbSet‘ could be found.

Hi everyone,

I ran into the following error while attempting to use a custom query with EntityFramework:

DbSet does not contain a definition for ‘FromSQL’ and no extension method ‘FromSql’ accepting an argument of type ‘DbSet‘ could be found.

This one’s pretty straight forward:

// Install the following package via nuget
Install-package Microsoft.EntityFrameworkCore.Relational

//Add the following namespace to your file
using Microsoft.EntityFrameworkCore;

Hopefully that’ll solve it for you, but if not there’s a lot a more information in these posts:
https://stackoverflow.com/a/38919326/522859
https://github.com/npgsql/Npgsql.EntityFrameworkCore.PostgreSQL/issues/146

Include UserId in Login Response (Token) – Web API 2

Hi everyone,

A quick post on how to include the user’s id in your login response when using Web API 2.

The default response to the /Token request is as follows:

{
“access_token”: “xxxxxxxxxxxxx_xxxx”,
“token_type”: “bearer”,
“expires_in”: 1209599,
“userName”: “test@test.com”,
“.issued”: “Mon, 23 Apr 2018 06:08:03 GMT”,
“.expires”: “Mon, 07 May 2018 06:08:03 GMT”
}

Once the changes below have been made the response will include a userId field:

{
“access_token”: “xxxxxxxxxxxxx_xxxx”,
“token_type”: “bearer”,
“expires_in”: 1209599,
“userName”: “test@test.com”,
“.issued”: “Mon, 23 Apr 2018 06:08:03 GMT”,
“.expires”: “Mon, 07 May 2018 06:08:03 GMT”,
“userId”: “xxxxxxx”
}

There are three very small changes required in order to add this functionality.

First, add an additional argument to CreateProperties in ApplicationOAuthProvider.cs

public static AuthenticationProperties CreateProperties(string userName, string userId)
{
IDictionary data = new Dictionary
{
{ "userName", userName },
// Add
{ "userId", userId }
};
return new AuthenticationProperties(data);
}

Pass userId to CreateProperties in ApplicationOauthProvider.

// ApplicationOAuthProvider.cs > GrantResourceOwnerCredentials
ClaimsIdentity oAuthIdentity = await user.GenerateUserIdentityAsync(userManager, OAuthDefaults.AuthenticationType);
ClaimsIdentity cookiesIdentity = await user.GenerateUserIdentityAsync(userManager,
CookieAuthenticationDefaults.AuthenticationType);

// Add user id
AuthenticationProperties properties = CreateProperties(user.UserName, user.Id);
AuthenticationTicket ticket = new AuthenticationTicket(oAuthIdentity, properties);
context.Validated(ticket);

Pass userId to CreateProperties in AccountController.

// AccountController.cs > GetExternalLogin
if (hasRegistered)
{
Authentication.SignOut(DefaultAuthenticationTypes.ExternalCookie);

ClaimsIdentity oAuthIdentity = await user.GenerateUserIdentityAsync(UserManager, OAuthDefaults.AuthenticationType);
ClaimsIdentity cookieIdentity = await user.GenerateUserIdentityAsync(UserManager,
CookieAuthenticationDefaults.AuthenticationType);

// Add userid
AuthenticationProperties properties = ApplicationOAuthProvider.CreateProperties(user.UserName, user.Id);
Authentication.SignIn(properties, oAuthIdentity, cookieIdentity);

Cannot attach the file ‘C:\…database.mdf’ as database x – Entity Framework

Hi everyone,

I ran into the following error when attempting to run ‘update-database’ on an initial migration:

Cannot attach the file ‘C:\Users\…\App_Data\aspnet-…115933.mdf’ as database ‘aspnet-…15933’

The solution to this one is pretty easy, remove the initial catalog property from your connection string.

…33.mdf;Initial Catalog=aspnet…

This is apparently caused by issues with EntityFramework and multiple projects in the same database. See the following stackoverflow answer for more info: https://stackoverflow.com/a/20176660/522859

Retrieving User Id in Web API 2 Controller – .NET

Hi everyone,

Just a quick post on how to retrieve the current user’s id in a Web API 2 controller:

var userId = RequestContext.Principal.Identity.GetUserId();

Note that you’ll need the following using statements:

using Microsoft.AspNet.Identity;
using System.Web.Http;

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/21618056/522859

Git Ignore Template for .NET

Hi everyone,

A sample .gitignore file for if you’re working with .net:

*.cache
*.dll
*.exe
*.pdb
/build/
*.suo
*.user
_ReSharper.*/
*.sdf
*.opensdf
*.tlog
*.log
TestResult.xml
*.VisualState.xml
Version.cs
Version.h
Version.cpp

Also, if you happen to have added some files you didn’t mean to:

git rm –cached file_you_dont_want.pdb
git commit -m “Remove pdb file”

Thanks to these stackoverflow posts for the info:
https://stackoverflow.com/a/8675415/522859
https://stackoverflow.com/a/11629271/522859