DEV Community: Jacob Colborn

Freelance Work - Will it be Right for Me

Jacob Colborn — Wed, 01 Jul 2020 02:46:49 +0000

I have my workspace prepared, well mostly. My desk is cleaned off. I have a clean notebook for notes. I created a new Joplin notebook to take long term notes. I created a directory in Google Drive for the documents I'll need. I think I am ready to finally start freelancing.

There is no telling if this is the right move for me. I will be using this as an opportunity to create some experience and build a decent portfolio/resume for when I start looking for company positions later in my career. Since I am just starting, this will be moonlight work while I maintain my current day job. I hope I can find the right balance between working and family, now that I am adding even more hours, but I was always taught that if you had a dream you had to reach out for it. I hope that I can find that balance.

I just picked up my first client, so I am nervous. I am writing this mainly as a starting point to be able to look back. Maybe I can encourage myself later when it gets hard and I can think back to how idealistic I was. I am dedicated to getting this first project right. I am secure in knowing that I have support from multiple places that can help me if I get in trouble. Let this be log number 1 on my first day as a freelancer.

Thanks for reading, I hope this wasn't rambling or incoherent.

Deploying to Netlify with Gridsome

Jacob Colborn — Mon, 22 Jun 2020 03:09:26 +0000

Netlify is a superbly easy way to host statically generated websites. I am currently hosting my "portfolio" on Netlify (in quotes because it is a work in progress that I am not really ecstatic about). Gatsby is very easy to deploy on Netlify. Netlify will pickup the Gatsby site from Github (or Gitlab or Bitbucket) and automatically fill in the build command and publishing directory. Netlify will operate the same way with any static site generator, but does not necessarily automatically recognize them.

When you create a new site in Netflify, you are first asked to point it to your repository. For me, my repository was hosted on Github. Since I have my Netlify already authorized to read my Github, I just selected my project's repository from the list. I do have security enabled and only allow Netlify to read repositories I approved, so I did have to first allow it to read that repo from my Github authorized application settings. After that, you need to tell Netlify how to build and what to display. In order to build the Gridsome site, the build command is gridsome build and the directory that is produced to publish is dist.

This is a very simple article, but I found myself not knowing quite how to deploy Gridsome since I just dove right in and did not read all of the documentation. Gatsby is a little simpler since Netlify will automatically populate the build command and published directory, but does not do this with Gridsome in my experience. I do recommend Netlify since it is so easy to get up and running. They also offer excellent add-ons for your sites like the ability gather form data and host "serverless" functions right from the Netlify deployment.

Incinicreator

Jacob Colborn — Sat, 06 Jun 2020 02:41:10 +0000

What I built

I attempted to build a website creation utility that allowed the users to control the web monetization of the content they would deliver. This would tie in to a web monetization wallet that they specified with no interaction from us as a host. Read below under the additional info to see why I think this project largely was a failure.

Submission Category:

Creative Catalyst

Link to Code

jakesweb / incinicreator

an open source platform for creators to share their work while getting monetized

Incinicreator

Where creative works can generate money

The hope of this project is to allow users to create, manage, and host web sites that allow them to expose their talent in exchange for simple monetization.

How Web Monetization Works

The platform will extensively use the web monetization standard to allow for payments. The standard utilizes micro-payments which can be used to unlock content. More about web monetization can be found at the web monetization web page.

Stack

The project is a work in progress and as I create more documentation this page will be updated. For now the stack will be:

Vue.js
Express
MongoDB (accessed through Mongoose)
Auth0 (for authentication)

View on GitHub

How I built it

I used this as a platform to start working with Vue. I created the front-end with Vue.js and was very happy with the choice. The syntax and component/view development of Vue work for me very well. I look forward to working on some other projects with this technology. The other aspects of the project were familiar to me using Node and Express.

Two of the largest technical challenges faced during development was how to upload and later reference content and how to generate a web server to host the websites.

The content was first being handled as data being uploaded to an Amazon S3 bucket. The SDK provided by Amazon was easy to get up and running. I later changed to having Sanity.Io handle the content for an easier reference division for each creator. This proved to be untenable because Sanity did not immediately present an API to handle video.

To set up the webserver, I looked into creating bash scripts to handle text changes to Nginx configuration files. This worked as expected and Node provided an easy way to handle the system interaction to run the scripts. I created a new configuration file for each site, which would make it easier to remove the websites if the creator ever wanted to remove their work.

Additional Resources/Info

This project was a failure. I am submitting this since I did drop some hours into it and there is a good framework to expand upon if I ever figure out some of the hurdles I ran into. I am using this as a post-mortem for this project.

The first thing that I failed on (and I think a lot of projects suffer from this) is scope. I scoped a very large project. One that would have been hard to accomplish with six months and tried to cram it into one. The biggest problem was not recognizing this until it was much too late. By the time I realized that generating a web site and allowing it to be edited was a large undertaking, it was only 1 week until the deadline. There was no way I could pivot or reduce the scope.

I attempted to preserve but my attitude became soured. It was hard to sit down and focus while already feeling defeated. This brings us to the second failure, cynicism. Feeling defeated already, I made it that much harder to move forward. You can sometimes be your own worst enemy.

I can sit here and make excuses for why I was unable to complete my intended project, but in reality, it came down to my own project management. Having a clearly defined plan would have paid off in the execution. I could have salvaged some part of this. I could have created a completed project rather than a broken, incoherent mess. I am fortunate to be able to look back on this and learn. Project management should entail a larger part of the task.

Thank you for reading. Look for a future update and, you never know, I may figure out some of the technical challenges I had and finish this.

Web Monetization for Creatives Update

Jacob Colborn — Sun, 17 May 2020 00:33:57 +0000

I believe this is pretty close to the halfway point of the hackathon now, so I wanted to provide an update. You can find the project at

jakesweb / incinicreator

an open source platform for creators to share their work while getting monetized

Incinicreator

Where creative works can generate money

The hope of this project is to allow users to create, manage, and host web sites that allow them to expose their talent in exchange for simple monetization.

How Web Monetization Works

Stack

The project is a work in progress and as I create more documentation this page will be updated. For now the stack will be:

Vue.js
Express
MongoDB (accessed through Mongoose)
Auth0 (for authentication)

View on GitHub

During the first part of the creation of the application, which I have foolishly called Incinicreator, I have kept a good pace to be able to finish by the end of the hackathon. This may seem trivial, but one of the number one things that can go wrong on a project is scoping and/or pacing making it impossible to finish by the deadline. My initial idea is still intact, but some of the implementation details are starting to shift.

First of all, the stack has been confirmed as Node.js with Express for the server and MongoDB for datastore. Authentication is being provided from Auth0. Front end deployment is being handled by Vue.js. I was nervous with the Vue.js at the start since I have never used it before, but I wanted this hackathon to be a way for me to learn a new skill (along with the knowledge of web monetization platform). Google Cloud Platform is where I am currently working to store user data. Over the last 2 days, I have been researching how to get the data stored and protected.

So far I have been happy with Vue.js. The learning process isn't very complicated and the way views and components are built seems to be intuitive. I have enjoyed building the pages out for my application so far. Also, the Auth0 authorization script makes the route protection simple.

I am starting on the back stretches now. I am working on the user interaction for uploads and beginning testing of that. After that, I will just need to build up template sites for creative users to select from and, finally, to finish the help page to assist with getting wallets setup. I believe this should be able to be completed by the end of the coming week, allowing me plenty of time for testing and security assurance. With enough time, in the end, I hope to have a user dashboard where they can see page hits, monetization stats, which works are the most popular, etc.

Web Monetization for Creatives

Jacob Colborn — Mon, 11 May 2020 04:05:30 +0000

My initial thought was how to get web monetization directly into the hands of the creative community? Sure, Mozilla had started working on this with VR developers, but it was better suited to developers. How do we get writers, artists, and videographers to monetize their work with no coding?

I believe the solution is a site generator/management tool that allows them to utilize their own WM wallet to collect micro-payments from their audiences directly. The signup/initial site creation process would require the user to set up or supply wallet information. The provided page templates would suggest what could be premium content to utilize the WM features.

This should be a learning experience for me. I am starting the project by learning a new framework (Vue.js) to assist with development. The server will do most of the hard work, though, hosting the various web sites and uploads. I will have to pay special attention to how that traffic is routed and secured. I am beginning by setting up most of the front-end. I do worry this is a bigger project than can be pulled together in under a month, but I am hopeful. Even if I cannot finish it by June 5th, who knows, it could grow further?

Let me know if you have any thoughts or suggestions below. I am looking forward to building this application. If you would like to checkout the progress, please check the code out at

jakesweb / incinicreator

an open source platform for creators to share their work while getting monetized

Incinicreator

Where creative works can generate money

The hope of this project is to allow users to create, manage, and host web sites that allow them to expose their talent in exchange for simple monetization.

How Web Monetization Works

Stack

The project is a work in progress and as I create more documentation this page will be updated. For now the stack will be:

Vue.js
Express
MongoDB (accessed through Mongoose)
Auth0 (for authentication)

View on GitHub

ClickConnect

Jacob Colborn — Sat, 04 Apr 2020 18:45:52 +0000

My Idea

Having been limited to Zoom and Webex meetings for the last 3 weeks, I have seen some of the issues with collaboration software as it sits now for some tasks. Screen share can be bulky. Application share is limited to a single application. My plan is to utilize a borderless real-time collaboration through the Twilio Video API. I hope to create a platform that will allow for individual applications to be delivered and viewed just likely they were to be used natively.

Stack

Still early in the development process (I am going to working on sketches today), I believe the stack will simply be utilizing React with Twilio Serverless services (when in Rome, I suppose). I still need to figure out pricing and ensuring this is economical for a solution, but an initial price estimate should have no problem with running this.

Security

A big question with any real-time communication is security. The first part of the security plan is to utilize the Twilio Authy service to set up 2FA, which will be a requirement for users. The Twilio API already includes encryption for the endpoints, so nothing to worry about there. Past that, I will be working on a list of good to have user options that increase security by default and design considerations that would offer the most secure experience possible.

Repository

I will be doing all of the work from https://github.com/jakesweb/clickconnect.

Let me know if anyone has any thoughts or opinions on this, or just wish me luck down in the comments. This is my first hackathon, so it will be new to me building with a deadline and goals (good experience to have though). I can't wait to see what everyone else is going to make!

User Authorization with Next.js and Apollo

Jacob Colborn — Sun, 19 Jan 2020 20:08:43 +0000

What Happened

I have been working on an esports news submission web application for the last 2 months now (with a hearty break during December, so maybe closer to a month). Recently, I completed the article submission component. I mounted this component through a submit article page on the site. After getting the functionality running I wanted to make it so only users could submit an article. And, rather than having them write out the article to only be denied, I thought "why not let them know upfront you have to be logged in to submit an article?"

I started working through this process. My initial idea was to run a current user query within the component to get access to the current user's id. If this didn't return any data then I would know that the user was not logged in. After writing this up I could not find a way to encapsulate the submission Mutation within a user Query. After trying a few different methods everyone returned errors. Taking a step back I saw a solution.

The Solution

Taking that step back I saw a solution on the Next.js page that is used to mount the article submission component. By utilizing the <User> component, I could wrap the <Submit> component within the <User> component's returned data. For further clarity, here is the full <User> component:

import { Query } from "react-apollo";
import gql from "graphql-tag";
import PropTypes from "prop-types";

const CURRENT_USER_QUERY = gql`
  query {
    me {
      id
      email
      name
      permissions
    }
  }
`;

const User = props => (
  <Query {...props} query={CURRENT_USER_QUERY}>
    {payload => props.children(payload)}
  </Query>
);

User.propTypes = {
  children: PropTypes.func.isRequired
};

export default User;
export { CURRENT_USER_QUERY };

So, if we take that payload returned from the component we can pass this to the <Submit> component via a prop. Taking this approach we can change our submit.js page from

import React, { Component } from "react";
import Submit from "../components/Submit";

const submit = () => <Submit />;

export default submit;

To something that will gather data from the <User> component.

import React, { Component } from "react";
import { Query } from "react-apollo";
import Submit from "../components/Submit";
import User from "../components/User";
import Signin from "../components/Signin";

const submit = () => <User>{({ data }) => <Submit isLoggedIn={data} />}</User>;
export default submit;

The payload here is then passed to <Submit> within the isLoggedIn prop. Taking that prop, we can use some if/else statements to either render the submission form or render a login page, depending on what the current user status is.

render() {
    if (this.props.isLoggedIn.me) {
      return (
       Submission form code here
      )
    } else {
      login form, message, or redirect here
    }
  }

So, if isLoggedIn.me exists, then the user is logged in. The me part of this comes from the CURRENT_USER_QUERY. The query returns id, email, name, permission. We could use any one of these, including isLoggedIn.me.permission to make sure they are part of a group authorized to access this, but within the web application, any logged-in user is allowed to submit an article.

The Conclusion

This strategy could be utilized for any level of authorization. If this was an admin form I could take the returned data and look for the permission part of the object (this is defined in the query from <User> and stored in the database for each user). This particular time, I only look for any data at all. As long as that data exists, the user is logged in. This is another excellent lesson in always taking a step back in what we are doing. I spent longer on this then I should but it was because I tried so many different iterations of how I thought it was supposed to work, rather than taking a few minutes to review my thought process and take a different approach.

Thank you for reading. As always, feel free to leave any comments about the code, my thought process, what I could be doing better, or just saying hey.

Using React Hooks With Apollo

Jacob Colborn — Fri, 10 Jan 2020 04:25:54 +0000

My Setup

I am using React with Apollo to connect to a GraphQL API utilizing Nextjs to handle the rendering and routing. This means I have my Apollo client registered under _app.js for Nextjs. The application I am building is an article submission website, similar to Dev.to, but for esports commentary and news. The package being used is the react-apollo package that has a react-hooks dependency for us to exploit.

Why I Am Writing This

Everyone may be thinking this is a basic thing, and that's what I thought too. I was trying to find the best way to build out a Signout component. I didn't want to create a whole page for Signout, so I set it up as an Apollo Link that has an anchor tag embedded. On the anchor, there is an onClick handler that calls my useSignout hook. Getting it working as a Link and anchor I was able to style it like the rest of my navigation bar so I could just add it as an option once the user is logged in. The useSignout hook I created utilizes the useMutation hook from the react-hooks package. The code kinda speaks for itself:

import { useMutation } from "@apollo/react-hooks";
import gql from "graphql-tag";
import Link from "next/link";

const SIGNOUT_MUTATION = gql`
  mutation SIGNOUT_MUTATION {
    signout {
      message
    }
  }
`;

export default function Signout() {
  const [useSignout] = useMutation(SIGNOUT_MUTATION, {
    onCompleted: () => {
      sessionStorage.clear();
      history.go(0);
    }
  });

  return (
    <Link href="/">
      <a
        onClick={() => {
          useSignout();
        }}
      >
        Signout
      </a>
    </Link>
  );
}

You notice that it still has all the normal flow of a React hook and Apollo mutation. So I created this and went running my Apollo application and what do you know ... an error. After searching for about a half-hour I finally found the answer, using a hook requires Apollo to know there is a hook coming. Now, I will preface the rest of this by saying that this was my first attempt at using hooks. Maybe if I had known how React hooks were supposed to function, this would have been a non-issue, but here we are.

The Reason to Use a Hook Here

The reason that I wanted to use a hook is that I didn't want to wrap my whole <Link><a></a><Link> flow in a weird kind of form. That wouldn't even work, was my first thought, but looking back (hindsight is the keyword for the year 2020 I believe) I can think of a way to put that in, but why not try out a hook for the first time? Also, this matched with the rest of my navigation (where I put the signout link) so the styling was consistent.

The Fix

Most people more familiar with Apollo and hooks will have seen this coming, but for us who are going on the first foray with hooks and Apollo, quickly learn we need to wrap our application in an Apollo Provider component from the react-hooks package in react-apollo. Originally my code looked like this:

class myApp extends App {
  ...
  return (
   <Container>
     <ApolloProvider client={apollo}>
       <Page>
         <Component {...pageProps} />
       </Page>
     </ApolloProvider>
   </Container> 
 )
}

Quickly, I found the issue. <ApolloProvider> could not handle a hook by itself. This component could grab all of the other Apollo 'stuff' coming from our application, but this didn't fit with the rules for using hooks. If you are curious about what the full rules are, check out the Rules of Hooks from the ReactJS documentation. I didn't full deconstruct what rule this broke but I believe it is because the Apollo Hooks Provider is a React function component where the Apollo Provider component is a container component (I want to point out this could be very wrong, being my first React hook, feel free to let me know if that is way out of left field). After finding the react-hooks dependency on react-apollo I found the solution. First I had to import the Apollo hook provider. I created a new ApolloProvider with the react-hooks package

import { ApolloProvider as ApolloProviderHooks } from "@apollo/react-hooks";

As you can see from above, it is just another ApolloProvider but this is being instantiated from the react-hooks package inside of the react-apollo package. Now I just take my same code as before and wrap the Page component above the ApolloProviderHooks component.

class myApp extends App {
  ...
  return (
   <Container>
     <ApolloProvider client={apollo}>
       <ApolloProviderHooks client={apollo}>
         <Page>
           <Component {...pageProps} />
         </Page>
       </ApolloProviderHooks>
     </ApolloProvider>
   </Container> 
 )
}

What I Learned

The main learning experience here is if I am going to dive into some new technology, I should probably do more than just think, "Hey, I've heard of hooks, I think this is my solution." Here comes hindsight once again, read a document before trying it out. Like I said earlier, this was just me getting my feet wet with React hooks. I could have built it the same way as I built all my other Mutations, but I grew from this experience. If anyone has any easier ways to handle this, let me know. This is all for learning so the more I (we) all know the better. Have a great day and thanks for the read!

2020 and Beyond

Jacob Colborn — Wed, 01 Jan 2020 22:53:52 +0000

New Year's

It's a time for reflection. Part of reflecting is looking where you want to go since you have to assess where you are coming from in order to obtain where you are going. This means most blogging and social media are being flooded with resolutions and introspection. Here lies a record, for me only really, that I want to use as a guide for 2020 and even further if it is still applicable. If a read other than myself gets anything out of it, that will be a bonus for me.

What 2019 Was For Me

This year was for me more transformative than any year. I was able to reaffirm my faith. I was also able to see that my current job was demanding too much time away from things like family and faith. In the last 3 months of the year, I decided that my 2020 dedication would be to find a job with a better work-life balance while still being able to provide for my family and moving into my chosen career field, development. I started and stopped doing regular programming and blogging throughout 2019 and you can see that in my past articles, but I want to dedicate the first 3 months of 2020 to have a more consistent schedule.

Now, with the meager time I was able to commit to web development, I learned 2 new skills that I want to strengthen into the new year. I built my portfolio website using Gatsby and fell in love with the quick deployment/build cycle. I am using Netlify to host it and there was nothing to learn there, just plug in your git repo and off you go. I was able to tie it to my personal domain and get SSL running on it through Netlify as well. Hands down the easiest experience of 2019. I also started learning Apollo and GraphQL using the Advanced React course from Wes Bos. I am not affiliated with Wes Bos in any way, but I want to mention it since it was an excellent course for learning.

Personally, everything has started to look up. My wife has been going through treatments for a health issue and she has made such amazing progress and feels so much better. We are starting to work on what I consider the hardest part of being married, finances. Working out how to save, what to save, and, more importantly, what to spend on has been a struggle for us over the last 3 months but is essential when I am starting to look for new work. I have also started reading again thanks to an investment made to a Kindle for a Christmas gift. I never fell out of love with reading but the stress of life forced me to think it was such an unimportant thing.

2020 Goals and Beyond

I look forward to two major things this year, becoming better disciplined with development and finding my first job as a developer. I have already started to see what is available to me for my career inception. Hopefully, I can find something that will allow the transition between careers to be a lot less stressful than I am currently stressing about. I will be looking for work in my area but I think most of the places I want to work would require me to work remotely or relocate; having an open mind during this process will be essential.

I want to complete my first full scall React/Apollo/GraphQL application before March of this year. I have the framework done and I am getting all of the logic completed now. There will be a blog post to follow this about working with React hooks in Apollo since I just picked that up last night (Happy New Year to me indeed!).

These are my reflections. What about you? It seems silly that humans picked an arbitrary time of every year to reflect on their lives, but it is an essential part of being a well-rounded human being. Happy New Year to everyone reading this and I wish you success with whatever you have decided was important to you.

Gatsby GraphQL Imports from JSON

Jacob Colborn — Sat, 30 Nov 2019 02:40:58 +0000

To see the full code you can check it out on my Github

jakesweb / portfolio

My portfolio website. Created with Gatsby. Deployed with Netlify.

I was working on building my portfolio site. Besides realizing that I do not have nearly enough projects to make a legitimate portfolio site, I also realized that I wanted to be able to add projects to a grid to make a clean layout. Now, I could have just created a Component with all of the individual projects copied and pasted, but I just needed some key data to change per grid item. This sounds like a job for queries! I didn't want a whole database and since it is structured data, that sounded like a job for json!

Gatsby comes with GraphQL builtin. GraphQL is a query language. It can read in from databases, but it can also read from other structured data if loaded correctly. Let's take a look at that first.

To load the data for GraphQL we have to let Gatsby know how to push it over. This was added to my gatsby-config.js file:

`gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `json`,
        path: `${__dirname}/src/json`,
      },
    },

You will need the gatsby-transformer-json NPM package to utilize this. The path is where I stored the json file, inside src/json which I created. The configuration file is what tells Gatsby how to load the file into the parser and allow it to be queried by GraphQL. The json file was just a list of 3 attributes that all of my Project components would need. I named the json file projects.json.

[
  {
    "image": "https://res.cloudinary.com/jakes-web/image/upload/e_outline/v1574999653/portofolio/Pomodoro.png",
    "link": "https://codepen.io/jakesweb/live/awLdxp",
    "title": "Pomodoro Clock"
  }
]

Now, you will want to know how to query this data. GraphQL picks up the file and loads the data in as <Filename>Json so in my case it was ProjectsJson. Being GraphQL it preloads a query for all data from the json named allProjectsJson. This is what we can utilize to pull the data into our Gatsby component. You can see the GraphQL playground by starting your Gatsby development server and then browsing to http://localhost:8000/___graphql.

If you are following along on the Github repository I linked at the top, I created a component to use for styling each project link. This is src/components/ProjectItem.js. I then linked this component over to the Project.js component. The Project component needs to have an import for GraphQL and StaticQuery as such: import { StaticQuery, graphql } from "gatsby" to utilize GraphQL.

From here I created a component to gather a list of Project Items into an array. Now, pausing for a moment of reflection, I could probably do this without a helper function and just run straight into a map function. I will be working that out once I make my personal website look better. StaticQuery is a component that allows us to query the data from GraphQL. This is where we gather the data and lay it out into the getProjectsList helper function.

function getProjectsList(data) {
  const projectsArray = []
  data.allProjectsJson.edges.forEach(item =>
    projectsArray.push(
      <ProjectItem
        image={item.node.image}
        link={item.node.link}
        title={item.node.title}
      />
    )
  )
  return projects Array
}

const Project = ({ children }) => (
  <HeaderDiv>
    <div className="header-div">
      <h1>My Projects</h1>
    </div>
    <StaticQuery
      query={graphql`
        query ProjectItemQuery {
          allProjectsJson {
            edges {
              node {
                image
                link
                title
              }
            }
          }
        }
      `}
      render={data => <ProjectGrid>{getProjectsList(data)}</ProjectGrid>}
    />
  </HeaderDiv>

I know what you are thinking. That is a lot of curled braces, but that's GraphQL for you. The GraphQL query runs a query I called ProjectItemQuery, this runs against a builtin query that is created by GraphQL called allProjectsJson. It is easier to see how the edges and nodes work if you look through the GraphQL local viewer from your Gatsby develop server (which can be found at http://localhost:8000/___graphql, as long as your Gatsby server is using port 8000). From the query, we want to get the data nodes of image, link, and title. The query pushes all the returned information to a variable called data. Taking that, it's passed into the getProjectsList function to lay out the array and render the page.

If you want to see this in practice you can head over to my website. Don't mind the view right now, I am working on getting better as a designer! If you have any thoughts you can let me know in the comments. Thank you for reading!

How to handle inputs with React

Jacob Colborn — Mon, 31 Dec 2018 04:44:28 +0000

When working on my latest demo application, I ran into a problem with React; I wanted to create form. The problem with this simple task is I didn't want any backend or API to handle the form, instead, I wanted it to work within React. I found a lot of things that were complex, but I think I created a system that works.

Gathering the data

The first thing I did was create the "form." To do this, I created a group of inputs within a <div>. The input would look like this:

<input 
    class="rounded" 
    id="gametitle" type="text" 
    placeholder="Game Title" 
    onChange={this.props.onChange} 
    value="{this.props.gameTitle}"
/>

The most important part of this is the onChange and the value properties. The value property will read the state that is being generated by onChange. onChange is a method passed into the React class with a prop called onChange. These work together to create an input that can be used to gather the data and then cleared.

onChange = event => {
    switch (event.target.id) {
        case "gametitle":
            this.setState({ gameTitle: event.target.value });
            break;
        ...
    }
}

The method will collect the event generated. It will then use the input's id value to match the correct case. From here, it gathers the current value of the input with event.target.value and sets the state to be that value. gameTitle was defined in the constructor of the React class, along with the other bits of state, before being used.

Handling the data

After gathering all 4 inputs, I then needed to collect the data and clear the inputs for the next round of data. For this, a button was in order. The final input was the button:

<input
    class="rounded"
    id="enter"
    type="submit"
    text="Add"
    onClick={this.props.onSubmit}
/>

The button is a bit different. It uses the onClick value to watch for user interaction (in this case when the user clicks the button area). The method was passed into the class via a prop (as was onChange) called onSubmit.

onSubmit = event => {
    if (
      this.state.gameTitle === undefined
    ) {
      alert("Error: undefined element");
    } else {
      if (this.state.games == null) {
        this.setState({
          games: [
            {
              gameTitle: this.state.gameTitle,
              date: this.state.date,
              digital: this.state.digital,
              platform: this.state.platform
            }
          ]
        });
      } else {
        this.setState({
          games: [
            ...this.state.games,
            {
              gameTitle: this.state.gameTitle,
              date: this.state.date,
              digital: this.state.digital,
              platform: this.state.platform
            }
          ]
        });
      }
    }

    this.setState({
      gameTitle: "",
      date: todayDate,
      digital: false,
      platform: ""
    });
}

There are a few things going on here, so I will start from the top. The first thing to do is to make sure that the user has entered all of the required data. To do this, I check the four input's state value to see if it is null. From there, I need to see if the games: [] array already has a value in it. If there is no value, I enter the four input's values as the first object. When a previous value exists, I reset the state to be the current value of state and then add the data to the rear. The array is modified with the spread syntax, games: [...this.state.games], which references the entire array and allows the current state to be appended. This will keep the state immutable. The final part sets the state of the inputs back to blanks since the inputs are using the state as their value.

You can see all of the code for this at GitLab.

User Authentication with Express.js

Jacob Colborn — Fri, 12 Oct 2018 04:16:20 +0000

Part of making an Express.js based application is being able to authenticate users. The question after getting them authenticated is what to do with that?

My current strategy is to use a client-side cookie that is encrypted with a secret hash. To create a session, I use both the cookie-parser and express-session modules. I link them to my application with app.use in app.js.

const cookieParser = require('cookie-parser');
const session = require('express-session');

app.use(cookieParser());
app.use(session({
    secret: application_secret,
    resave: false,
    saveUninitialized: false
});

Using that setup we can create sessions with req.session. With the login route on the user router, we can set the session.

router.post('/login', (req,res) => {
    // login the user and return the user object
    // if the login is successful
    req.session.email = user.email;
    req.session.role = user.role
}

This sets the email and the role to the user session. I defined three roles so far: student, instructor, and admin. There are two ways that I use these roles right now. In the routes, I can run an if statement that renders a different page or passes a different property to the templates.

if (req.session.role === 'student') {
    res.render('studentpage');
} else if (req.session.role === 'admin') {
    res.render('adminpage');
} else {
    res.render('unauthenticated');
}

That's not the most relevant example; you would typically check if the user is authenticated and then render a page if they are or redirect if they aren't. The other option is to take a middleware. In my middlewares directory I have admin-auth.js which defines a middleware.

module.exports = function(req,res,next) {
    if (req.session.role === 'admin') {
        next();
    } else {
        res.render('unauthorized');
    }
}

Then on the route that I want to check if there is an admin authentication with the middleware. The middleware will process before the route is allowed to continue processing.

const authAdmin = require('../middlewares/auth-admin');

router.get('/admin', authAdmin, (req,res) => {
    res.render('admin');
});

What this will do is pass the request to the middleware first. The middleware checks the role in the user session, and if the role is an admin role it allows the route to continue with next(). The else path changes this to the unauthorized webpage if the user doesn't have a role or the role is not an admin role.