Forem: Aryan J

Get and Save Website Images with Puppeteer

Aryan J — Sun, 03 Jan 2021 18:05:51 +0000

At Scarce City, we sell a t-shirt whose main image is the piece of graffiti displayed at Satoshi's Place, an internet graffiti wall powered by Bitcoin Lightning, at the time of purchase. That means that we need to programmatically grab and save the image that is currently on the graffiti wall at that point in time. Since Scarce City runs on node, I chose puppeteer for this job.

With puppeteer, I was able to:

Open a headless browser
Go to a webpage (in this case Satoshi's Place)
Intercept the responses to the requests made by the browser when visiting Satoshi's Place
Save the image response with the correct name

At Scarce City, we save the image to Google Cloud Storage but, for this code snippet, we'll save it to the local disk (and tackle the Google Cloud Storage part in another blog post).

import fs from 'fs';
import util from 'util';
// don't forget to npm install this
import puppeteer from 'puppeteer';

// fs.writeFile expects a callback
// I've forgotten the trauma of callbacks and choose to use promises
// util.promisify is a nifty library that "promisifies" old Node functions
const save = util.promisify(fs.writeFile);

async function main() {
  // some standard boiler plate to open a new browser and a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // intercept responses of the requests made by this page
  page.on('response', async (response) => {
    // if a response is an image whose url has `data:image`
    if (response.request().resourceType() === 'image' && response.url().includes('data:image')) {
      const data = await response.buffer();
      // save the raw data to a local file
      await save('something.bmp', data);
    }
  });

  // go to Satoshi's place and let the event handler above work its magic
  await page.goto('https://satoshis.place', { waitUntil: 'networkidle0' });
  await browser.close();
}

main();

Try this code in your local environment. If you get stuck, feel free to give me a shout on Twitter. Good luck!

Singleton Pattern in JavaScript?

Aryan J — Sat, 25 Jul 2020 02:20:18 +0000

Instead of my usual blog post, I'd like to pose a question.

How often do you JavaScript developers use singleton patterns?

If I wanted to implement a singleton pattern in ES6, is this how I'd do it?

If not, why not?

// notifications.js
class Notifications {

  constructor() {
    this.messages = [];
  }

  add(message) {
    this.messages.push(message);
  }
}

export const notifications = new Notifications();
// ☝️ asking about this

// main.js
// 👇 less important
import { notifications } from './notifications';

class Main {
  constructor() {
    notifcations.add('some message')
  }
}

new Main();

Add Prisma 2 to a NestJS Application

Aryan J — Wed, 08 Jul 2020 02:11:47 +0000

Get Started with NestJS and Prisma

Tutorial Goal

This tutorial goes through the creation of a basic NestJS application using Prisma 2 (herein simply known as Prisma) as an ORM. This tutorial will use a REST API but it can easily be extended to use GraphQL instead.

This tutorial will not cover NestJS basics nor Prisma basics. It will simply cover how to connect the two technologies.

Video Tutorial

If you learn better via video, watch my YouTube tutorial:

GitHub Repository

AryanJ-NYC / nestjs-with-prisma-2

NestJS with Prisma

View on GitHub

Create a new NestJS Application

yarn global add @nestjs/cli
nest new nestjs-with-prisma

Add Prisma to NestJS

yarn add @prisma/client
yarn add @prisma/cli -D

yarn prisma init

prisma init bootstraps a Prisma project within the current directory. Move /prisma to /src.

Add Movie model to /src/prisma/schema.prisma:

model Movie {
  id           Int    @default(autoincrement()) @id
  director     String
  movieName    String
  yearReleased Int
}

Create a Prisma migration.

yarn prisma migrate save --schema src/prisma/schema.prisma --experimental

Execute the Prisma migration.

yarn prisma migrate up --schema src/prisma/schema.prisma --experimental

Generate the Prisma Client based on the Movie model defined in src/prisma/schema.prisma.

yarn prisma generate --schema src/prisma/schema.prisma

Create Prisma Module + Service

nest g module prisma
nest g service prisma

In /src/prisma/prisma.service.ts:

import { Injectable } from '@nestjs/common';
import { PrismaClient } from '@prisma/client';

@Injectable()
export class PrismaService extends PrismaClient {}

Then export the PrismaService from PrismaModule (/src/prisma/prisma.module.ts):

import { Module } from '@nestjs/common';
import { PrismaService } from './prisma.service';

@Module({
  providers: [PrismaService],
  exports: [PrismaService],
})
export class PrismaModule {}

Movies Module + Controller

nest g module movies

nest g controller movies

Import the PrismaModule into our MoviesModule (in /src/movies/movies.module.ts) so we can use PrismaService:

import { Module } from '@nestjs/common';
import { MoviesController } from './movies.controller';
import { PrismaModule } from 'src/prisma/prisma.module';

@Module({
  imports: [PrismaModule],
  controllers: [MoviesController],
})
export class MoviesModule {}

Create a Movie data transfer object (src/movies/movies.dto.ts) to represent the movie object:

export class MovieDto {
  id: number;
  director: string;
  movieName: string;
  yearReleased: number;
}

In src/movies/movies.controller.ts:

import { Controller, Get, Post, Body } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { MovieDto } from './movie.dto';

@Controller('movies')
export class MoviesController {
  constructor(private readonly prismaService: PrismaService) {}

  @Post()
  create(
    @Body() { director, movieName, yearReleased }: MovieDto,
  ): Promise<MovieDto> {
    return this.prismaService.movie.create({
      data: { director, movieName, yearReleased },
    });
  }

  @Get()
  findAll(): Promise<MovieDto[]> {
    return this.prismaService.movie.findMany();
  }
}

Test Your App

Start your application with:

yarn start:dev

Make HTTP Request to POST http://localhost:3000/movies with a body of:

{
    "director": "George Lucas",
    "movieName": "Star Wars",
    "yearReleased": 1977
}

Make HTTP request to GET http://localhost:3000/movies. Your response should be as follows:

[
  {
    "id": 1,
    "director": "George Lucas",
    "movieName": "Star Wars",
    "yearReleased": 1978
  }
]

Nice job!

RedwoodJS with Sanity.io CMS as Backend

Aryan J — Tue, 26 May 2020 04:02:50 +0000

This past weekend, I built a tiny application with RedwoodJS using Sanity.io as a CMS. I videostreamed myself building it for those of you who are interested.

What I Built

Sanity.io comes with a movie dataset out of the box. I kept it simple and built a MovieList page and a MovieDetail page. I was mostly focused on how I can get RedwoodJS to work with Sanity.io as a data source.

How to use Sanity.io with RedwoodJS

Create GraphQL Movie Object Type

After standing up my Sanity server (instructions on how to do that in the project README), I used Sanity Vision to get a feel for the movie data object. Since yarn rw g scaffold movie needs a Prisma model in schema.prisma (which I didn't use for this small project), I kind of cheated. I made a temporary movie model in schema.prisma to leverage yarn rw g scaffold movie. Then, I went into movies.sdl.js and edited it a bit. I added the types I would render in the UI to movies.sdl.js so there are some data in the Sanity.io movie data object that went unaccounted for.

Create Movie Service

I had to edit the movie service to query from Sanity.io rather then the Prisma database. First, I created a Sanity client hooked up to my Sanity project:

import sanityClient from '@sanity/client'

export const sanity = sanityClient({
  projectId: process.env.SENTRY_PROJECT_ID,
  dataset: 'production',
  useCdn: true,
})

Then, I used this client in my movies service to fetch all movies and a movie by its slug:

import { sanity } from '../../lib/sanity'

const moviesQuery = /* groq */ `*[_type == "movie"]`
export const movies = () => {
  return sanity.fetch(moviesQuery)
}

const movieBySlugQuery = /* groq */ `*[_type == "movie" && slug.current == $slug][0]`
export const movie = ({ slug }) => {
  return sanity.fetch(movieBySlugQuery, { slug })
}

Update the Movie Cells

Next, I updated the MoviesCell and the MovieCell with updated GraphQL queries and each movie in the MoviesCell linking to the MovieDetailsPage:

// MoviesCell.js
import { Link, routes } from '@redwoodjs/router'
import { urlFor } from 'src/lib/sanity'

export const QUERY = gql`
  query {
    movies {
      poster {
        asset {
          _ref
        }
      }
      slug {
        current
      }
      title
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ movies }) => {
  return movies.map((movie) => {
    return (
      <Link
        key={movie.slug.current}
        to={routes.movieDetail({ slug: movie.slug.current })}
      >
        <img src={urlFor(movie.poster.asset).width(200).url()} />
      </Link>
    )
  })
}

// MovieCell.js
import { urlFor } from 'src/lib/sanity'

export const QUERY = gql`
  query($slug: String!) {
    movie(slug: $slug) {
      poster {
        asset {
          _ref
        }
      }
      slug {
        current
      }
      title
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ movie }) => {
  return (
    <div>
      <h1>{movie.title}</h1>
      <img src={urlFor(movie.poster.asset).width(500).url()} />
    </div>
  )
}

From there, it was smooth sailing. I rendered MoviesCell and MovieCell in my MovieListPage and MovieDetailPage, respectively.

Notes on My Experience

Unfortunately, my project does not build. I documented this here and I'd love some help in getting it deployed!
At first, I mentally prepared myself to not use the API side of RedwoodJS at all. I expected to be able to use Sanity.io directly from the cells. However, much to my disappointment, cells are tightly coupled with the API side (at least that's my understanding). The exported QUERY is run against the API side with the data being injected into the cell as props. I'm a bit worried that makes it impossible to leverage everything RedwoodJS has to offer without the API side (though, at the same time, maybe that's the point of using an opinionated framework? 🤔).

What I secretly wish: What if, instead of a GraphQL query that is exported and run against the API side, there was an exported function that returns an object that is then injected to props? That way, instead of:

   // MoviesCell.js
   import { Link, routes } from '@redwoodjs/router'
   import { urlFor } from 'src/lib/sanity'

   export const QUERY = gql`
     query {
       movies {
         poster {
           asset {
             _ref
           }
         }
         slug {
           current
         }
         title
       }
     }
   `
   // Loading, Error and Empty removed for brevity

   export const Success = ({ movies }) => {
     return movies.map((movie) => {
       return (
         <Link
           key={movie.slug.current}
           to={routes.movieDetail({ slug: movie.slug.current })}
         >
           <img src={urlFor(movie.poster.asset).width(200).url()} />
         </Link>
       )
     })
   }

we have:

   import { Link, routes } from '@redwoodjs/router'
   import { request } from 'graphql-request'
   import { urlFor } from 'src/lib/sanity'

   const QUERY = gql`
     query {
       movies {
         poster {
           asset {
             _ref
           }
         }
         slug {
           current
         }
         title
       }
     }
   `

   export const getter = () => {
     const data = request('/api', QUERY)
     return data
   }

   // Loading, Error and Empty removed for brevity

   export const Success = ({ movies }) => {
     return movies.map((movie) => {
       return (
         <Link
           key={movie.slug.current}
           to={routes.movieDetail({ slug: movie.slug.current })}
         >
           <img src={urlFor(movie.poster.asset).width(200).url()} />
         </Link>
       )
     })
   }

We're able to run the same query we did before AND use data stemming from a different source instead of being tightly coupled to the API side.

I ran into a problem where I needed my Sanity client on both the web and API sides. I wasn't easily able to share code so I had to write the same code in both the /api and /web directories. 🤮 I'm excited to see what goes into the cookbook to solve this.
- I remember using nx a bit for monorepos and they had a nx generate @nrwl/node:library <name> command that was quite nifty.
I funnily found out the Redwood Router supports page redirects. There was nothing about it in the docs but I tried it and it just worked:

<Route path="/" redirect="/movies" />

How Scarce City is Built

Aryan J — Thu, 21 May 2020 20:11:29 +0000

Shortly after losing my job in the midst of this crazy COVID mess, I was given the opportunity to build Scarce City, a transparent marketplace where buyers benefit from dynamic pricing and customer revenue sharing (yup! We do lotteries that put bitcoin back into our buyers' wallets). Building Scarce City was my gateway drug into Bitcoin and an opportunity to learn some new technologies.

In the two months since the beginning of this project, I built an e-commerce website that accepts Bitcoin and Bitcoin Lightning with the ability to store transactions permanently on Arweave's blockchain. I'm proud to be a part of the Scarce City team and excited to share it with all of you.

Here are some of the technologies that build Scarce City.

Backend

The backend is hosted on Vercel using NextJS' API Routes. This sped up development as application deployment (both backend and frontend) was taken care of by linking Vercel to my GitHub repository. With every file mapping to a route, I was quickly able to add new API routes to my application.

The transaction data lives in a Postgres database on AWS RDS. The database was very simple to set up and add to Prisma. I was even able to use the AWS free tier for the development database.

The invoicing and payment processing is handled by btcpayserver, an open-source bitcoin payment processor. I instantly fell in love with this project; it's simply a beautiful piece of software. It was easy to set up once the bitcoin node was synced. Set up included adding our wallet and pairing with the Scarce City backend code. This server is deployed to AWS EC2 using Docker.

The Lightning Network powers our Bitcoin Lightning payments. As usual, btcpayserver made it extremely easy to get onto the Lightning Network. An instance of Ride The Lightning, a fully functioning web app that wraps the LND (or C-Lightning) CLI, is included with btcpayserver. This made opening up incoming and outgoing channels super easy.

Since content (such as blog posts, product copy, product pictures, etc.) needs to be managed by my non-developer colleague, I decided a CMS was important. I heard nothing but good things about Sanity and decided try it out. I am beyond impressed by the ease of manipulating the data schema and adding new features to the CMS. Additionally, creating content on the CMS is super easy. After editing or creating a new document, Sanity allows me to call a Vercel web hook which rebuilds the entire app (incremental builds can't come soon enough!).

We use Arweave to permanently store completed transactions as a means of verifying the supply and authenticity of the Scarce City merchandise. This is a vital piece of the puzzle as it gives Scarce City buyers transparency into the transactions we process.

Since data was coming from multiple sources (our own database, btcpayserver, Arweave and Sanity), GraphQL was the logical choice for the API. Being a huge fan of Prisma, I opted to use it as our ORM (especially since our data model is extremely simple). Even though it is in beta, it met all of Scarce City's needs and didn't break once!

Frontend

Scarce City is built with NextJS since it's the React framework I am most familiar with. Out of the box, I got server-side generation for the product pages and static pages for the home page and blog posts.

I initially went with Apollo Client for GraphQL requests and caching. However, Apollo Client is an absolute mess with NextJS. Furthermore, it added about 35kB to my build! I ran into the loving arms of SWR and graphql-request and I'll never look back.

All of the styling is done with TailwindCSS which is the most versatile CSS framework out now.I can't recommend it enough. It's super easy and development is lightning fast with the TailwindCSS VSCode extension.

The product page forms are built with Formik and validated with Yup. Getting Formik up and running was a bit frustrating and, honestly, I'm not completely in love with its syntax. If I were to make the forms again, I'd probably give React Hook Form a shot.

Lastly, all the social cards for the blog posts are dynamically created using Cloudinary and get-share-image which dynamically creates an image URL featuring the title of the blog post. What a fun and easy-to-use library!

For updates on Scarce City, follow us on Twitter: @scarcedotcity or sign up for our newsletter at https://scarce.city. If you have any questions about Scarce City (whether it be the product itself or how it was built), please reach out to me on Twitter at @aryanjabbari.

I Migrated Away from Apollo Client to Vercel SWR and Prisma graphql-request...and You Can Too!

Aryan J — Wed, 13 May 2020 16:44:50 +0000

GraphQL requests are simply POST requests made to your GraphQL endpoint. Why, oh why, does it need all this overhead of setting up an Apollo Client?

I was tired of setting up Apollo Client and it proved to be a huge headache when paired with Vercel Next.js's Now. Something needed to give.

Enter Prisma's graphql-request (for making the actual POST request) and Vercel SWR (for state caching). By remove Apollo Client, I manage to shave off 40 kB from my JavaScript build. I mean, look at this Next.js with Apollo hell I avoided!

OK, OK, you came here for examples of how to migrate. Here they are!

Basic Query without a Variable

With Apollo Client

// with Apollo Client:
import { gql, useQuery } from '@apollo/client';

const PAID_JOBS_QUERY = gql`
  query paidJobPosts {
    jobPosts {
      id
    }
  }
`;
const yourReactComponent = () => {
  const { data, loading, error } = useQuery(PAID_JOBS_QUERY); 
}

With Vercel SWR and Prisma graphql-request

// with SWR and graphql-request
import { request } from 'graphql-request';
import useSWR from 'swr';

// the comment below gives us VSCode syntax highlighting!
const PAID_JOBS_QUERY = /* GraphQL */ `
  query paidJobPosts {
    jobPosts {
      id
    }
  }
`;
const yourReactComponent = () => {
  const { data, error } = useSWR(PAID_JOBS_QUERY, (query) => request('/api', query));
  const loading = !data;
};

Basic Query with a Variable

With Apollo Client

// with Apollo Client:
import { gql, useQuery } from '@apollo/client';
const JOB_POST_BY_ID_QUERY = gql`
  query jobPostByIdQuery($id: String) {
    jobPost(where: { id: $id }) {
      id
    }
  }
`;
const yourReactComponent = ({ id }) => {
  const { data, loading, error } = useQuery(JOB_POST_BY_ID_QUERY, { variables: { id } });
};

With Vercel SWR and Prisma graphql-request

// with SWR and graphql-request
import { request } from 'graphql-request';
import useSWR from 'swr';

// the comment below gives us VSCode syntax highlighting!
const JOB_POST_BY_ID_QUERY = /* GraphQL */ `
  query jobPostByIdQuery($id: String) {
    jobPost(where: { id: $id }) {
      id
    }
  }
`;
const yourReactComponent = ({ id }) => {
  const { data, error } = useSWR([JOB_POST_BY_ID_QUERY, id], (query, id) => request('/api', query, { id }));
  const loading = !data;
};

Basic Mutation with Variables

With Apollo Client

// with Apollo Client:
import { gql, useMutation } from '@apollo/client';

const CREATE_JOB_POST_MUTATION = gql`
  mutation createJobPostMutation($jobName: String!) {
    createOneJobPost(jobName: $jobName) {
      id
    }
  }
`;
const yourReactComponent = () => {
  const [createJobPost] = useMutation(CREATE_JOB_POST_MUTATION);

  const submitJobPost = async (jobName) => {
    const { data } = await createJobPost({ variables: { jobName } });
    // do something with job post
  };
};

With Prisma graphql-request

// with SWR and graphql-request
import { request } from 'graphql-request';

const CREATE_JOB_POST_MUTATION = /* GraphQL */ `
  mutation createJobPostMutation($jobName: String!) {
    createOneJobPost(jobName: $jobName) {
      id
    }
  }
`;
const createJobPost = (variables) => {
  return request('/api', CREATE_JOB_POST_MUTATION, variables);
};

const yourReactComponent = ({ id }) => {
  const submitJobPost = async (jobName) => {
    const data = await createJobPost({ jobName });
    // do something with data
  };
};

Mutation with Cache Refreshing

With Apollo Client

// with Apollo Client:
import { gql, useMutation, useQuery } from '@apollo/client';

const ME_QUERY = gql`
  query MeQuery {
    me {
      id
    }
  }
`;
const someReactComponentThatFetchesMe = () => {
  const { data } = useQuery(ME_QUERY);
};

const SIGNIN_MUTATION = gql`
  mutation signInMutation($email: String!, password: String!) {
    signin(email: $email, password: $password) {
      id
    }
  }
`;
const yourReactComponent = () => {
  const [signin] = useMutation(SIGNIN_MUTATION);

  const submit = (email, password) => {
    signin({ variables: { email, password }, refetchQueries: [{ query: ME_QUERY }] });
  };
};

With Vercel SWR and Prisma graphql-request

// with SWR and graphql-request
import { request } from 'graphql-request';
import useSWR from 'swr';

const ME_QUERY = /* GraphQL */ `
  query MeQuery {
    me {
      id
    }
  }
`;
const someReactComponentThatFetchesMe = () => {
  const { data } = useSWR(ME_QUERY); // the key to this value in cache is the value fo ME_QUERY
};

const SIGNIN_MUTATION = /* GraphQL */ `
  mutation signInMutation($email: String!, password: String!) {
    signin(email: $email, password: $password) {
      id
    }
  }
`;
const signIn = (variables) => {
  return request('/api', SIGNIN_MUTATION, variables);
};

const yourReactComponent = () => {
  const { mutate } = useSWR(ME_QUERY); // the mutate function will do the refetching for us

  const submit = async (email, password) => {
    await signin({ email, password });
    mutate(); // call mutate here to refetch Me after signin
  };
};

Add Sentry to Vercel Next.js API Routes

Aryan J — Sun, 10 May 2020 23:45:59 +0000

To add Sentry to Next.js, you can wrap your entire route in a try block and have the Sentry reporting done in the catch block:

// /pages/api/someRoute.ts
import * as Sentry from '@sentry/node';
import { NextApiRequest, NextApiResponse } from 'next';

Sentry.init({ dsn: process.env.SENTRY_DSN });

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    // ...your main business logic here
  } catch (error) {
    Sentry.captureException(error);
    await Sentry.flush(2000);
    throw error;
  }
};

Of course, writing that catch block over and over is bad programming practice. We can wrap the try/catch in a higher order function:

import * as Sentry from '@sentry/node';
import { NextApiRequest, NextApiResponse, NextApiHandler } from 'next';

Sentry.init({ dsn: process.env.SENTRY_DSN });

const sentryHandler = (apiHandler: NextApiHandler) => {
  return async (req: NextApiRequest, res: NextApiResponse) => {
    try {
      return await apiHandler(req, res);
    } catch (error) {
      console.error(error);
      Sentry.captureException(error);
      await Sentry.flush(2000);
      throw error;
    }
  };
};

export default sentryHandler(async (req: NextApiRequest, res: NextApiResponse) => {
  // ...your main business logic here
});

You can extract the sentryHandler to its own file and wrap it around all the Next.js API routes you need Sentry to handle.

Introduction to Prisma 2 with Next.js

Aryan J — Wed, 08 Apr 2020 20:21:08 +0000

Introduction to Prisma with Next.js

This tutorial outlines how to use Prisma along with Next.js. It assumes a basic understanding of Next.js (which, in turn, assumes basic knowledge of React). By the end of the tutorial, you will have stood up a Prisma client, a development SQLite database, and a Next.js application.

This tutorial will not cover GraphQL with Prisma. If that is something you're interested in, please refer to my live coding video where I add Prisma with GraphQL to a Next.js project.

Create a New Next.js Project

From your terminal, run:

npm init next-app
# or
yarn create next-app

You can find more information about the commands above in the Next.js docs.

This will install a new Next.js project with the directory name that you specified. Run:

npm run dev
# or
yarn dev

to start the development server. Now visit http://localhost:3000 to see your Next.js app. Edit /pages/index. js to modify this page.

Install Prisma

From your terminal, run:

npm install @prisma/client
npm install @prisma/cli --save-dev
# or
yarn add @prisma/client
yarn add @prisma/cli -D

This installs the Prisma CLI which we can now use to initialize Prisma.

Initialize Prisma

From your terminal, run

npx prisma init
# or
yarn prisma init

This creates two new files: /prisma/.env and prisma/schema.prisma.

/prisma/.env - Defines the environment variables used in /schema.prisma. Learn more here.
/schema.prisma - datasource, generator and model definitions are added here. Prisma will use this to generate migrations, GraphQL schemas and TypeScript types. Learn more here.

Add SQLite Database as Datasource

For the purposes of this tutorial, we will use a SQLite database. In /prisma/.env, change DATABASE_URL to file:./dev.db:

# /prisma/.env
DATABASE_URL="file:./dev.db"

and in /prisma/schema.prisma change the datasource provider to sqlite :

# prisma/schema.prisma
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}
# ... the rest of the file

If you're interested in using postgres as your database, you can skip this step and, instead, replace DATABASE_URL with your actual postgres URL.

Add a Data Model

For simplicity's sake, we will create a lightweight data model. In /prisma/schema.prisma, add the movie model:

# prisma/schema.prisma
# ...stuff at the top of the file
model Movie {
  id           Int    @default(autoincrement()) @id
  director     String
  movieName    String
  yearReleased Int
}

Generate and Run Database Migrations

With the our model all set up, we're ready to generate migrations that will add these tables to our database. First, run:

npx prisma migrate save --experimental
# or
yarn prisma migrate save --experimental

Since we haven't done so, it will create a SQLite database for you. It will ask for a migration name; this is optional. You can view the newly created migration in the /prisma/migrations folder. Take a look and you'll see that it generated all the SQL necessary to create the new movies table.

Note that the new table wasn't created; simply the code to create said table. To create the table, this migration needs to be run. We do this by running:

npx prisma migrate up --experimental
# or
yarn prisma migrate up --experimental

This command will run any migrations that have not yet been run. After this, you can use your favorite database client (I'm partial to TablePlus) to view your database.

Learn more about Prisma migrations here.

Generate the Prisma Client

The Prisma Client is a database client tailored to your database schema. This means that we will easily be able to call a function that runs CRUD operations against our database. In our case, this means the Prisma Client will have a movies layer with functions to perform all CRUD operations.

To generate the Prisma Client, run:

npx prisma generate
# or
yarn prisma generate

Our Prisma Client is ready for use.

Learn more about the Prisma Client here.

Add a POST endpoint to Create New Movies

Let's use our newly created Prisma Client to create a /movies/ endpoint that creates new movies. In /pages/api/movies.js (you'll have to create an /api directory and a movies.js file), paste the following:

// /pages/api/movies.js
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function (req, res) {
  if (req.method === 'POST') {
    const { body } = req;
    const movie = await prisma.movie.create({ data: JSON.parse(body) });
    res.json(movie);
  }
}

Any file inside the folder /pages/api is mapped to /api/* and treated as an API endpoint. In our case, we now have an endpoint at http://localhost:3000/api/movies.

Stepping down the file, we:

Import the PrismaClient from @prisma/client. Yes, our own personal database client is saved to node_modules. The generated code is saved to node_modules and is referred to as a "smart node module." You can learn more here.
Initialize an instance of the PrismaClient and save it to a variable called prisma.
Use a Next.js API Route and only handle POST request.
Use the body of the request and the Prisma client to create a new movie and save it to a variable called movie. Note that we parse the body since we will send it as a JSON string.
Respond with the movie created in the step above.

Create a Movie Submission Form

We will use Formik to create our movie submission form. Please feel free to not use Formik if you're more comfortable using HTML forms (or any other React forms library).

If you're using Formik, run:

npm install formik
# or
yarn add formik

Replace all of pages/index.js with:

// /pages/index.js
import { Field, Formik, Form } from 'formik';

const Home = () => (
  <div className="container">
    <Formik
      initialValues={{
        director: '',
        movieName: '',
        yearReleased: '',
      }}
      onSubmit={(values) => {
        fetch('http://localhost:3000/api/movies', {
          method: 'POST',
          body: JSON.stringify({ ...values, yearReleased: Number(values.yearReleased) }),
        });
      }}
    >
      <Form>
        <label>
          Movie Name
          <Field name="movieName" type="text"></Field>
        </label>
        <label>
          Director
          <Field name="director" type="text"></Field>
        </label>
        <label>
          Year Released
          <Field name="yearReleased" type="text"></Field>
        </label>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

export default Home;

The code above should be straightforward. The submit function makes a POST request to our /api/movies endpoint. Please note that we need to cast yearReleased here to a number as the Prisma client expects an Int (as defined in /prisma/schema.prisma.

Now, create a movie and press submit. Using your database client, you can view the movies table and see that a new movie was created.

Use Server-Side Rendering to Hydrate Page Props on the Server

This right here is where the beauty of Next.js comes in. We can use getServerSideProps to fetch our movie data on the server-side (using our Prisma Client). The movies will be pre-rendered on our homepage (no client-side fetching necessary!).

Normally, you might create a GET endpoint that uses the Prisma client to fetch a list of movies and respond with said list of movies. With getServerSideProps, there's no need for the endpoint. We can use the Prisma client directly in that function to get the list of movies and inject our page's props with the movies.

At the bottom of our /pages/index.js file, add the following code:

// /pages/index.js

// Home component cut for brevity

export const getServerSideProps = async () => {
  const prisma = new PrismaClient();
  const movies = await prisma.movie.findMany();
  return { props: { movies } };
};

Here, we:

Instantiate our PrismaClient
Get all movies using the prisma instance
Return a props object that includes the movies we just fetched

With this code, our Home component now has movies props. For example, we can render the movies as follows:

// /pages/index.js
const Home = ({ movies }) => (
  <div className="container">
    {movies.map((movie) => (
      <div key={movie.id}>
        <p>Name: {movie.movieName}</p>
        <p>Director: {movie.director}</p>
        <p>Year Released: {movie.yearReleased}</p>
      </div>
    ))}
    <Formik>
      {/* your movie form is here; cut for brevity */}
    </Formik>
  </div>
);

Again, there is NO fetching of movies on the client. It's all done on the server.

Mission Accomplished

This tutorial should be enough to get you started with Next.js and Prisma.

If you have any questions or feedback, you can reach me on Twitter: @aryanjabbari.

freeCodeCamp Pomodoro Clock 02: Lifting State Up and React Props

Aryan J — Mon, 10 Feb 2020 19:08:50 +0000

This is the third installment of a tutorial series where I cover the freeCodeCamp Pomodoro Clock project. Read the last installment if you missed it.

For those of you who like to learn using video, I’ve also created a video to complement this blog post:

Goals

By the end of this tutorial, you should:

understand when to lift state up into a parent component
understand how to lift state up into a parent component
use props to pass data from a parent component to a child component
Format [Moment durations] using moment-duration-format

To achieve these goals, we’ll:

Create a TimeLeft component that will display the time left in MM:SS format in the current session or break.

Lifting State Up And React Props

We want to add a component named TimeLeft to our App component that will display the time left in the current session or break. The value of TimeLeft will be initialized to either sessionLength or breakLength, which currently reside in the Session component and Break component, respectively.

Unfortunately, we cannot share data amongst sibling components. Specifically, in our case, that means that, since Session, Break and TimeLeft components are all children of App (thus considered siblings), TimeLeft cannot currently access sessionLength or breakLength to initialize its value:

However, React does allow data to be passed from a parent component to its children. Specifically, in our case, we can lift sessionLength and breakLength up to the App component (hence the name lift state up) and pass it down to Session, Break and TimeLeft:
Now that we know why we need to lift state up, let’s get to some code.

We’ll begin by lifting the state up and passing sessionLength and breakLength as props to the Session and Break components, respectively. After we make these changes, the app should work just as it did before with our state now moved into the App component.

Let’s start with the Session component. In Session.jsx, cut all the code that uses sessionLengthInSeconds and paste it into App.js (don’t forget to import useState in App.js. That is, the state and its modifiers (increment / decrement):

// App.js
import React, { useState } from 'react';
import './App.css';
import Break from './components/Break';
import Session from './components/Session';

function App() {
  const [sessionLengthInSeconds, setSessionLengthInSeconds] = useState(60 * 25);

  const decrementSessionLengthByOneMinute = () => {
    const newSessionLengthInSeconds = sessionLengthInSeconds - 60;
    if (newSessionLengthInSeconds < 0) {
      setSessionLengthInSeconds(0);
    } else {
      setSessionLengthInSeconds(newSessionLengthInSeconds);
    }
  };
  const incrementSessionLengthByOneMinute = () =>
    setSessionLengthInSeconds(sessionLengthInSeconds + 60);

  return (
    <div className="App">
      <Break />
      <Session />
    </div>
  );
}

export default App;

// Session.jsx
import moment from 'moment';
import React from 'react';

const Session = () => {
  const sessionLengthInMinutes = moment.duration(sessionLengthInSeconds, 's').minutes();
  return (
    <div>
      <p id="session-label">Session</p>
      <p id="session-length">{sessionLengthInMinutes}</p>
      <button id="session-increment" onClick={incrementSessionLengthByOneMinute}>
        +
      </button>
      <button id="session-decrement" onClick={decrementSessionLengthByOneMinute}>
        -
      </button>
    </div>
  );
};

export default Session;

You should see red squiggles in Session.jsx at the moment. Our IDE (editor) is telling us that it has no clue what the variables sessionLengthInSeconds, incrementSessionLengthByOneMinute, decrementSessionLengthByOneMinute are. We’ll pass these variables from App.js into Session.jsx using props:

// App.js
import React, { useState } from 'react';
import './App.css';
import Break from './components/Break';
import Session from './components/Session';

function App() {
  const [sessionLengthInSeconds, setSessionLengthInSeconds] = useState(60 * 25);

  const decrementSessionLengthByOneMinute = () => {
    const newSessionLengthInSeconds = sessionLengthInSeconds - 60;
    if (newSessionLengthInSeconds < 0) {
      setSessionLengthInSeconds(0);
    } else {
      setSessionLengthInSeconds(newSessionLengthInSeconds);
    }
  };
  const incrementSessionLengthByOneMinute = () =>
    setSessionLengthInSeconds(sessionLengthInSeconds + 60);

  return (
    <div className="App">
      <Break />
      {/* pass props below! */}
      <Session
        sessionLengthInSeconds={sessionLengthInSeconds}
        incrementSessionLengthByOneMinute={incrementSessionLengthByOneMinute}
        decrementSessionLengthByOneMinute={decrementSessionLengthByOneMinute}
      />
    </div>
  );
}

export default App;

In Session.jsx, we must accept these props by declaring them as parameters to our functional component:

// Session.jsx
import moment from 'moment';
import React from 'react';

const Session = ({
  sessionLengthInSeconds, // this is where we accept the props
  incrementSessionLengthByOneMinute,
  decrementSessionLengthByOneMinute,
}) => {
  const sessionLengthInMinutes = moment.duration(sessionLengthInSeconds, 's').minutes();
  return (
    <div>
      <p id="session-label">Session</p>
      <p id="session-length">{sessionLengthInMinutes}</p>
      <button id="session-increment" onClick={incrementSessionLengthByOneMinute}>
        +
      </button>
      <button id="session-decrement" onClick={decrementSessionLengthByOneMinute}>
        -
      </button>
    </div>
  );
};

export default Session;

If everything was done correctly, the app should work just as it did before. Now, take a few minutes and lift the Break component’s state up by yourself.

All done? App.js and Break.jsx should look as follows:

// App.js
import React, { useState } from 'react';
import './App.css';
import Break from './components/Break';
import Session from './components/Session';

function App() {
  const [breakLengthInSeconds, setBreakLengthInSeconds] = useState(300);
  const [sessionLengthInSeconds, setSessionLengthInSeconds] = useState(60 * 25);

  const decrementBreakLengthByOneMinute = () => {
    const newBreakLengthInSeconds = breakLengthInSeconds - 60;
    if (newBreakLengthInSeconds < 0) {
      setBreakLengthInSeconds(0);
    } else {
      setBreakLengthInSeconds(newBreakLengthInSeconds);
    }
  };
  const incrementBreakLengthByOneMinute = () => setBreakLengthInSeconds(breakLengthInSeconds + 60);

  const decrementSessionLengthByOneMinute = () => {
    const newSessionLengthInSeconds = sessionLengthInSeconds - 60;
    if (newSessionLengthInSeconds < 0) {
      setSessionLengthInSeconds(0);
    } else {
      setSessionLengthInSeconds(newSessionLengthInSeconds);
    }
  };
  const incrementSessionLengthByOneMinute = () =>
    setSessionLengthInSeconds(sessionLengthInSeconds + 60);

  return (
    <div className="App">
      <Break
        breakLengthInSeconds={breakLengthInSeconds}
        incrementBreakLengthByOneMinute={incrementBreakLengthByOneMinute}
        decrementBreakLengthByOneMinute={decrementBreakLengthByOneMinute}
      />
      <Session
        sessionLengthInSeconds={sessionLengthInSeconds}
        incrementSessionLengthByOneMinute={incrementSessionLengthByOneMinute}
        decrementSessionLengthByOneMinute={decrementSessionLengthByOneMinute}
      />
    </div>
  );
}

export default App;

// Break.jsx
import moment from 'moment';
import React from 'react';

const Break = ({
  breakLengthInSeconds,
  incrementBreakLengthByOneMinute,
  decrementBreakLengthByOneMinute,
}) => {
  const breakLengthInMinutes = moment.duration(breakLengthInSeconds, 's').minutes();
  return (
    <div>
      <p id="break-label">Break</p>
      <p id="break-length">{breakLengthInMinutes}</p>
      <button id="break-increment" onClick={incrementBreakLengthByOneMinute}>
        +
      </button>
      <button id="break-decrement" onClick={decrementBreakLengthByOneMinute}>
        -
      </button>
    </div>
  );
};

export default Break;

TimeLeft Component

Great, we’re ready to create our TimeLeft component and initialize its value.

In your components directory, create and export an empty component named TimeLeft. Then, import this component in App.js and render it between <Break /> and <Session />.

Now, that you’ve done that, pass sessionLengthInSeconds (we’ll use it to initialize the timeLeft in our TimeLeft component) from the App component to the TimeLeft component.

Lastly, accept these props in TimeLeft. Use the sessionLengthInSeconds prop to initialize a new state (remember useState?) variable called timeLeft. Render out timeLeft in a <p> tag with the id “time-left”.

You should be able to all this by yourself with everything you’ve learned up to this point in this tutorial series. I strongly suggest you stop here and try all this yourself before going on and seeing the answer below.

Here’s what that looks like:

// components/TimeLeft.jsx
import React from 'react';
import { useState } from 'react';

const TimeLeft = ({ sessionLengthInSeconds }) => {
  const [timeLeft] = useState(sessionLengthInSeconds)

  return <p id="time-left">{timeLeft}</p>;
};

export default TimeLeft;

// App.js
import React, { useState } from 'react';
import './App.css';
import Break from './components/Break';
import Session from './components/Session';
import TimeLeft from './components/TimeLeft';

function App() {
  const [breakLengthInSeconds, setBreakLengthInSeconds] = useState(300);
  const [sessionLengthInSeconds, setSessionLengthInSeconds] = useState(60 * 25);

  const decrementBreakLengthByOneMinute = () => {
    const newBreakLengthInSeconds = breakLengthInSeconds - 60;
    if (newBreakLengthInSeconds < 0) {
      setBreakLengthInSeconds(0);
    } else {
      setBreakLengthInSeconds(newBreakLengthInSeconds);
    }
  };
  const incrementBreakLengthByOneMinute = () => setBreakLengthInSeconds(breakLengthInSeconds + 60);

  const decrementSessionLengthByOneMinute = () => {
    const newSessionLengthInSeconds = sessionLengthInSeconds - 60;
    if (newSessionLengthInSeconds < 0) {
      setSessionLengthInSeconds(0);
    } else {
      setSessionLengthInSeconds(newSessionLengthInSeconds);
    }
  };
  const incrementSessionLengthByOneMinute = () =>
    setSessionLengthInSeconds(sessionLengthInSeconds + 60);

  return (
    <div className="App">
      <Break
        breakLengthInSeconds={breakLengthInSeconds}
        incrementBreakLengthByOneMinute={incrementBreakLengthByOneMinute}
        decrementBreakLengthByOneMinute={decrementBreakLengthByOneMinute}
      />
      <TimeLeft sessionLengthInSeconds={sessionLengthInSeconds} />
      <Session
        sessionLengthInSeconds={sessionLengthInSeconds}
        incrementSessionLengthByOneMinute={incrementSessionLengthByOneMinute}
        decrementSessionLengthByOneMinute={decrementSessionLengthByOneMinute}
      />
    </div>
  );
}

export default App;

Well done! If you did everything correct, the TimeLeft component should render out the time left…but in seconds. We should format this in MM:SS format, as per the freeCodeCamp spec. But how? 🤔

Formatting Moment Durations to MM:SS Format

To format Moment durations, we’ll use the moment-duration-format plugin. First, let’s install the package:

npm install moment-duration-format

To “plug in” the plugin, do the following in TimeLeft.jsx:

// TimeLeft.jsx
import moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
import React from 'react';
import { useState } from 'react';

momentDurationFormatSetup(moment);
// ... the rest of your component here

With that done, we’re ready to format the component. As per the moment-duration-format documentation, we’ll simply create a duration from timeLeft, add call the format() function with a format string argument and render out the return value:

// TimeLeft.jsx
import moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
import React from 'react';
import { useState } from 'react';

momentDurationFormatSetup(moment);

const TimeLeft = ({ sessionLengthInSeconds }) => {
  const [timeLeft] = useState(sessionLengthInSeconds);

  const formattedTimeLeft = moment.duration(timeLeft, 's').format('mm:ss');
  return <p id="time-left">{formattedTimeLeft}</p>;
};

export default TimeLeft;

Note that moment.duration(timeLeft, ’s’) is almost identical to the code we have in Break.jsx and Session.jsx. It simply creates a Moment duration. The only new part of this is the format function and the format template string argument.

👏 You Made It! 👏

You’ve taken steps towards completing the freeCodeCamp Pomodoro Clock project and now know how to pass props to components and lift state up.

If you enjoyed this tutorial, follow me on:

If at any point you got stuck in this tutorial, please review the code on GitHub.

If you are interested in the freeCodeCamp Random Quote Machine implementation, please take a look at my videos on YouTube.

freeCodeCamp Pomodoro Clock 01: React Functional Components and Local State

Aryan J — Sun, 02 Feb 2020 14:13:13 +0000

Welcome back!

This tutorial is the second installment of a tutorial series where I cover the freeCodeCamp Pomodoro Clock project. I’ll be following the spec pretty closely including passing 100% of the tests in the freeCodeCamp test suite.

If you missed the last installment, feel free to read at freeCodeCamp Pomodoro Clock 00: create-react-app Development Environment.

As you read this blog post, don’t forget to stop and try it yourself before I reveal the correct code. You’ll learn a lot more that way!

For those of you who learn better via video, I’ve also created a video walking through these same steps:

Goals

By the end of this tutorial, you should:

understand how to create a new functional component
understand how to read and set state in a functional component
understand how to bind a function to a button’s click event handler
how to convert seconds into minutes using Moment.js

To achieve these goals, we’ll create three components:

a Break component that tracks the break time
a Session component that tracks the session time, and
a TimeLeft component that will display the time left in the current session
- this component will share the data set by the Session component (and, in a later tutorial, the Break component)

Now, start your development server using npm start and let’s get started!

Break Component

Create a New Functional Component

Inside of your /src directory, create a /components directory. We’ll use this directory to keep our file structure nice and tidy.

Now, inside your /components directory, create a new file: Break.jsx. Initialize the file with functional component boilerplate:

// /src/components/Break.jsx
import React from "react";

const Break = () => {
  return <div></div>;
};

export default Break;

Move the <p id=“break-label”>Break</p> line in src/App.js inside the /src/components/Break.jsx <div> element. Finally, import the Break component into your App.js file and render it in between the <div className=“App”> element:

// /src/App.js
import React from "react";
import "./App.css";
import Break from "./components/Break"; // 👈 import Break here

function App() {
  return (
    <div className="App">
      <Break />
    </div>
  );
}

export default App;

If you did everything correctly and visit http://localhost:3000/, nothing should have changed since last time. The text ”Break” should be rendered in the center of your browser.

Initialize Break Length using React State (and useState)

Since we’re starting with break, let’s tackle a freeCodeCamp User Story. Specifically, we’ll tackle: ”*User Story #5: I can see an element with a corresponding id=“break-length”, which by default (on load) displays a value of 5.”.

As per the spec, we’ll render the number of minutes to the user. However, since we’ll need to use seconds when we implement the countdown feature, we’ll store the data as seconds. To store data that can be modified by the user and forces the component to re-render on change (basically, the new state will be rendered In the browser), we’ll use React state. More specifically, we’ll use the React state hook in our Break component.

The syntax for useState() is as follows (we’ll use favoriteColor as an example):

const [
  favoriteColor,
  setfavoriteColor
] = useState("red");

Here, favoriteColor is the actual variable that is initialized to 'red'. We can change the value of favoriteColor by calling setFavoriteColor with a new string: setFavoriteColor(‘blue’).

Let’s add state to the Break component! On the first line inside /src/components/Break.jsx, write: const [breakLengthInSeconds, setBreakLengthInSeconds] = useState(300); (where 300 is 5 minutes in seconds).

Then, render breakLengthInSeconds below the existing <p> tag inside a <p> tag of its own (don’t forget id=“break-length”.to prepare to pass another freeCodeCamp test)!

If you did everything correctly, /src/components/Break.jsx should look like:

// /src/components/Break.jsx
import React, {
  useState
} from "react";

const Break = () => {
  const [
    breakLengthInSeconds,
    setBreakLengthInSeconds
  ] = useState(300);
  return (
    <div>
      <p id="break-label">Break</p>
      <p id="break-length">
        {breakLengthInSeconds}
      </p>
    </div>
  );
};

export default Break;

You’ll notice the browser renders out ”300” instead of the requested ”5”. No worries, we’ll fix that later.

Add Plus & Minus Buttons with Click Event Handlers

Let’s start by writing the functions that’ll be called by the plus and minus buttons, respectively. The plus button should add one minute (60 seconds) to the break length while the minus button does the opposite (without allowing the number of seconds to drop below 0). In Break.jsx (between declaring setBreakLengthInSeconds and returning the JSX), write the following two functions:

const decrementBreakLengthByOneMinute = () => {
  const newBreakLengthInSeconds =
    breakLengthInSeconds - 60;
  if (
    newBreakLengthInSeconds < 0
  ) {
    setBreakLengthInSeconds(0);
  } else {
    setBreakLengthInSeconds(
      newBreakLengthInSeconds
    );
  }
};
const incrementBreakLengthByOneMinute = () =>
  setBreakLengthInSeconds(
    breakLengthInSeconds + 60
  );

To handle events in React, we need to remember to use camel case for event listener attributes in our HTML elements. For example,

<button onClick={activateLasers}>
  Activate Lasers
</button>

Notice the capital ”C” here.

In the JSX part of Break.jsx, add plus and minus buttons (with the ids as requested in freeCodeCamp) that call the two functions we wrote above . If you did everything correctly, your Break.jsx should look like this:

// src/components/Break.jsx
import React, {
  useState
} from "react";

const Break = () => {
  const [
    breakLengthInSeconds,
    setBreakLengthInSeconds
  ] = useState(300);

  const decrementBreakLengthByOneMinute = () => {
    const newBreakLengthInSeconds =
      breakLengthInSeconds - 60;
    if (
      newBreakLengthInSeconds < 0
    ) {
      setBreakLengthInSeconds(0);
    } else {
      setBreakLengthInSeconds(
        newBreakLengthInSeconds
      );
    }
  };
  const incrementBreakLengthByOneMinute = () =>
    setBreakLengthInSeconds(
      breakLengthInSeconds + 60
    );
  return (
    <div>
      <p id="break-label">Break</p>
      <p id="break-length">
        {breakLengthInSeconds}
      </p>
      <button
        id="break-increment"
        onClick={
          incrementBreakLengthByOneMinute
        }
      >
        +
      </button>
      <button
        id="break-decrement"
        onClick={
          decrementBreakLengthByOneMinute
        }
      >
        -
      </button>
    </div>
  );
};

export default Break;

Now go back to the running app in your browser. The buttons should add and subtract 60 seconds to your break time.

Converting Seconds to Minutes using Moment.js

Let’s get rid of the ”300” that is rendered and, instead, render the ”5” the was requested of us by the freeCodeCamp spec.

Dealing with time is famously difficult. Sure, converting from seconds to minutes is easy enough (just divide by 60, right) but why write the code? Moment.js is an spectacular library that makes dealing with time easy (and we’ll use it later in this project when displaying the time left).

Let’s start by installing moment to our project:

npm install moment

We’ll use Moment durations to convert from seconds to minutes. To create a duration, the syntax is moment.duration(timeCount, unitOfTime). For example, since our units are in seconds, we’ll create a direction with moment.duration(breakLengthInSeconds, ’s’) . To convert that into minutes, just chain a call to .minutes() at the end. Save this to a variable and render out that variable.

// /src/components/Break.jsx

import moment from "moment";
import React, {
  useState
} from "react";

const Break = () => {
  const [
    breakLengthInSeconds,
    setBreakLengthInSeconds
  ] = useState(300);

  const decrementBreakLengthByOneMinute = () => {
    const newBreakLengthInSeconds =
      breakLengthInSeconds - 60;
    if (
      newBreakLengthInSeconds < 0
    ) {
      setBreakLengthInSeconds(0);
    } else {
      setBreakLengthInSeconds(
        newBreakLengthInSeconds
      );
    }
  };
  const incrementBreakLengthByOneMinute = () =>
    setBreakLengthInSeconds(
      breakLengthInSeconds + 60
    );

  const breakLengthInMinutes = moment
    .duration(
      breakLengthInSeconds,
      "s"
    )
    .minutes(); // the seconds to minutes conversion is HERE!
  return (
    <div>
      <p id="break-label">Break</p>
      {/* Note the variable change below */}
      <p id="break-length">
        {breakLengthInMinutes}
      </p>
      <button
        id="break-increment"
        onClick={
          incrementBreakLengthByOneMinute
        }
      >
        +
      </button>
      <button
        id="break-decrement"
        onClick={
          decrementBreakLengthByOneMinute
        }
      >
        -
      </button>
    </div>
  );
};

export default Break;

You should now be passing “User Story 5” in your freeCodeCamp test suite.

Session Component

The session component will be in a new file (/src/components/Session) is almost identical to the break component with changes to variable and HTML id names (to match those in the freeCodeCamp test suite). Additionally, as per the freeCodeCamp test suite, the value of the initial session length should be equal to 25 minutes.

App.js

import React from "react";
import "./App.css";
import Break from "./components/Break";
import Session from "./components/Session";

function App() {
  return (
    <div className="App">
      <Break />
      <Session />
    </div>
  );
}

export default App;

Session.jsx

import moment from "moment";
import React, {
  useState
} from "react";

const Session = () => {
  const [
    sessionLengthInSeconds,
    setSessionLengthInSeconds
  ] = useState(60 * 25);

  const decrementSessionLengthByOneMinute = () => {
    const newSessionLengthInSeconds =
      sessionLengthInSeconds - 60;
    if (
      newSessionLengthInSeconds < 0
    ) {
      setSessionLengthInSeconds(0);
    } else {
      setSessionLengthInSeconds(
        newSessionLengthInSeconds
      );
    }
  };
  const incrementSessionLengthByOneMinute = () =>
    setSessionLengthInSeconds(
      sessionLengthInSeconds + 60
    );

  const sessionLengthInMinutes = moment
    .duration(
      sessionLengthInSeconds,
      "s"
    )
    .minutes();
  return (
    <div>
      <p id="session-label">
        Session
      </p>
      <p id="session-length">
        {sessionLengthInMinutes}
      </p>
      <button
        id="session-increment"
        onClick={
          incrementSessionLengthByOneMinute
        }
      >
        +
      </button>
      <button
        id="session-decrement"
        onClick={
          decrementSessionLengthByOneMinute
        }
      >
        -
      </button>
    </div>
  );
};

export default Session;

Open up your freeCodeCamp test suite and run the tests. You should now be passing seven tests!

You Made It! 👩‍💻 👏

Way to go! You created the first two components needed for the freeCodeCamp Pomodoro Clock.

If you enjoyed this tutorial, follow me at:

Twitter

Aryan Jabbari

@aryanjabbari

Just released the second installment in my @freeCodeCamp Pomodoro Clock series on YouTube and @ThePracticalDev. Check them out if you're just getting started with your freeCodeCamp React projects.

dev.to/aryanjnyc/free…

youtu.be/tkkB5nEk_aQ

14:34 PM - 02 Feb 2020

0 0
YouTube
dev.to
Instagram

If at any point you got stuck in this tutorial, please review the code on GitHub.

If you are interested in the freeCodeCamp Random Quote Machine implementation, please take a look at my videos on YouTube.

Live Coding: Write the freeCodeCamp Random Quote Machine in React - February 1st at 11am EST

Aryan J — Wed, 29 Jan 2020 13:30:28 +0000

I'll be live coding on Saturday, February 1st at 11am EST (click date for calendar invite). I'll develop the freeCodeCamp Random Quote Machine and answer any questions you may have about web development, React, etc.

Where

Tech

React
TypeScript
Tailwind CSS

Want a head start on this project? Watch my YouTube series on the Random Quote Machine.

Aryan Jabbari

@aryanjabbari

I'll be live coding the @freeCodeCamp Random Quote Machine this Saturday, February 1 at 11am at youtube.com/watch?v=VJeoHF… and twitch.tv/aryanjabbari. Come join!

More details here: dev.to/aryanjnyc/live…

13:32 PM - 29 Jan 2020

0 0

This hopes to become a weekly event where I live stream myself coding one of the freeCodeCamp projects. Please comment below with projects you'd like to see written live.

freeCodeCamp Pomodoro Clock 00: create-react-app Development Environment

Aryan J — Sun, 19 Jan 2020 15:17:44 +0000

Congratulations on getting this far in your coding journey! You tackled HTML, CSS and JavaScript. You learned a front-end library or two and are ready to tackle the freeCodeCamp project. This is huge!

This tutorial is the first installment of a tutorial series where I cover the freeCodeCamp Pomodoro Clock project. I’ll be following the spec pretty closely including passing 100% of the tests in the freeCodeCamp test suite.

In this tutorial series, we’ll:

Stand up a new React application using create-react-app
Integrate the freeCodeCamp test suite tool
Build the freeCodeCamp Pomodoro Clock using React
Style the freeCodeCamp Pomodoro Clock using Tailwind CSS
Add TypeScript to your Pomodoro Clock code
Deploy our application to Heroku
Deploy our application to Netlify

In this specific tutorial, we’ll cover the first two bullets:

Stand up a new React application using create-react-app
Integrate the freeCodeCamp test suite

Lastly, if you are more of a video learner, please follow along with the video below.

Who Shouldn’t Use This Tutorial

This tutorial series is meant to get you started on the Pomodoro Clock. Funnily enough, I recommend you DON’T use this tutorial if you haven’t tried to tackle this project yourself. It’s best to try a project yourself and get off that tutorial treadmill.

Additionally, this tutorial series assumes you know the basics of HTML, CSS and JavaScript. Just the basics though. No expertise needed!

Who Should Use This Tutorial

If you tried to get started on the Pomodoro Clock but are completely at a loss for where to start then this is for you. However, as mentioned above, if you haven’t even tried, I suggest you bookmark this tutorial and give getting started a shot by yourself.

Stand Up a New React Project with create-react-app

We first need to bootstrap a new React application. create-react-app is a popular tool for doing just that. It sets up an entire development environment and is super easy to use.

Open your Terminal and navigate to the folder where you have your practice projects. Assuming you already have node.js and npm (which comes with node) installed, run:

npx create-react-app pomodoro-clock

If run successfully, you’ll have a new directory in your practice projects directory called /pomodoro-clock. Awesome!

Running the Create React App Template

Now that you have the basic Create React App installed on your local computer, it’s time to stand up the development server.

Before we continue, let’s talk about the development server. Realize that it’s a development server which means it’s meant for developers like us. It has features that makes developers’ lives easier, such as hot reloading. With hot reloading, when we change a file, the application will reload itself so you can see the changes you made. It’s a pretty nifty tool.

To stand up your development server, go into your newly created directory with cd pomodoro-clock in your Terminal. From that directory, run npm run start. When that is finished running, visit http://localhost:3000/ to confirm everything was done correctly.

Give the development server a spin! Open up your project in your favorite text editor and open up src/App.js. Edit some text. Go back to http://localhost:3000/ and witness the magic of hot reloading.

Adding the freeCodeCamp Test Suite Tool

freeCodeCamp created a tool for running their test suite that can be easily integrated into your create-react-app template.

The freeCodeCamp test suite tool is located at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js (only click if you can somehow read minified JavaScript 😝). We need this JavaScript code to run in our React application. To do this, we’ll use a <script> tag.

In your text editor, open public/index.html. This is the entry point to which the React application is loaded. The specifics about that are not very important at this very moment of your coding journey so I’ll leave them out.

We’ll link to the JavaScript script above right before the closing <html> of public/index.html. Your index.html should look as follows (comments deleted for brevity):

<!-- /public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="icon"
      href="%PUBLIC_URL%/favicon.ico"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    <meta
      name="theme-color"
      content="#000000"
    />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link
      rel="apple-touch-icon"
      href="%PUBLIC_URL%/logo192.png"
    />
    <link
      rel="manifest"
      href="%PUBLIC_URL%/manifest.json"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript
      >You need to enable
      JavaScript to run this
      app.</noscript
    >
    <div id="root"></div>
  </body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

Since you have your development server running, you can go to http://localhost:3000/ and see the test tool at the top-left of your application:

Click the drop-down and check out the Pomodoro Clock tests. We already passed one! Only 28 to go! We’ll do one of them next!

Passing Your First Test

If you select “Pomodoro Clock” from the test suite dropdown (pictured above), click “Run Tests” then “Tests,” you’ll see a number of tests shown.

The first one reads: “1. I can see an element with id=“break-label” that contains a string (e.g. “Break Length”).” When I read this, I imagine any HTML element with a string inside of it. Now, since there’ll be a string inside of it, I’ll use the <p> HTML element.

I’ll delete most of App.js and insert the <p> element with a string that reads “Break”:

// src/App.js
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <p id="break-label">Break</p>
    </div>
  );
}

export default App;

Go back to http://localhost:3000, click “Run Tests” and “Tests” again. Congratulations! You’re passing your first test!

👏 You Made It!

Your development server is all set up and you’ve passed one test. You’re ready to absolutely crush it! Go through the freeCodeCamp Pomodoro Clock project spec and attempt the rest of the project yourself. If you get stuck, come on back to get unstuck!

If you enjoyed this tutorial, follow me at:

If at any point you got stuck in this tutorial, please review the code on GitHub.

If you are interested in the freeCodeCamp Random Quote Machine implementation, please take a look at my videos on YouTube.

Fun Fact

When I made my Pomodoro clock four years ago, freeCodeCamp recommended Angular.js. You can view the code on my GitHub.