Forem: aurel kurtula

What are Promises in Javascript ?

aurel kurtula — Mon, 04 Jul 2022 07:15:28 +0000

Javascript is synchronous. Things run one after the other without waiting for previous procedures to change.

let name;
name = 'bob'
console.log(name) // bob
name = 'alice'
console.log(name) // alice

As we would expect, each line above runs one after the other. However, there are many cases where this doesn't help us. For example:

let name;
name = 'bob';
console.log(name); // bob
setTimeout(function(){
  name = 'alice'; 
},100)
console.log(name); // ?

Above we are setting the name to be changed after 100 milliseconds. However, the second log doesn't wait for the change, and so both console logs of name will return "bob". (The name does change but not fast enough.)

solution without a callback

The example we are working with is pretty simple for now, we could easily move the second console log inside the timer and have it done, but let's use a callback function instead.

let name;
const callback = () => console.log(name)
name = 'bob'
console.log(name); // bob
setTimeout(function(){
  name = 'alice';
  callback(); // alice
},100)

Now we are accounting for the delay by adding our console log inside a callback function and letting the setTimeout run the callback in 100 milliseconds.

Promises remove the need for a callback

In plain English, when you make a promise you are saying that you will do something at a given time (when conditions are right). You could say, the timer promises that in 100 milliseconds it will change the name to "alice". Then, when the timer fulfills the promise it's up to us to do something upon the fulfillment. So it's not that different from a callback but it doesn't need to know what happens afterward.

Let's see it in action

let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  setTimeout(function(){
  name = 'alice';
  resolve();
},100)
})
ourPromise.then(() => console.log(name))

We wrap our setTimeout in a promise and as such the setTimeout doesn't need to know what we will do with the changes it created. The execution of resolve() simply changes the state of the promise from pending to fulfilled, then it's up to use to listen for that change at any point by running the then() method on the promise

Note: if you run console.log(ourPromise) inside the .then() method you'll get an object of { <state>: "fulfilled", <value>: undefined }. If you remove resolve() from the promise and run the console log again inside then(), you'll get { <state>: "pending" }

ourPromise.then(() => console.log(ourPromise))

Scope

As you have seen from the console log when the promise is resolved it usually would deliver some data. In our example, we wanted to test whether the name from our global scope could be changed inside a promise. Pointless in the real world but easy for the sake of demonstration.

Let's see how we could use the internal scope of the promise instead:

let name; 
name = 'bob'
console.log(name); // bob
const ourPromise = new Promise((resolve, reject)=>{ 
  let name; //different to the outside scope
  setTimeout(function(){
    name = 'alice';
    resolve(name); // pass this new name 
  },100)
})
ourPromise.then(resName => console.log(`promised name is ${resName}, and not ${name}`))
console.log(name); // we no longer need this (it still return 'bob'

Inside the promise, we created a new "name" variable (let name) which is completely different from the "name" in the outer scope. Then we change it after 100 milliseconds and this time we pass it with the resolve method.

Note: if we re-try to run the console log inside the then method this time we'll get a value { <state>: "fulfilled", <value>: "alice" }. And in most of the time we would we waiting for a value to come from some api. For example:

fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(resolvedData => console.log(resolvedData))

Using SVN to manage your code snippets in GitHub!

aurel kurtula — Wed, 22 May 2019 01:39:48 +0000

I've been looking for the ability to do this since I learned Github, but I never found any solution, I didn't even think it was possible.

Every time I'm frustrated with my workflow I end up researching on the same topic and I finally found the solution

Problem: When starting work on a new project you want to be able to paste the same SASS directory to your project, you might have reusable components, fonts and so on. Having them in a directory in your machine is, meh. I find it annoying. Why use an extra GUI.

Desire: I always wanted GitHub to be the answer. But of course, as we normally use Git, it doesn't work, the workflow would be the same as the problem we are trying to solve (but with version control)

Solution: SVN commands.

I should know more about SVN before writing this post but I got what I wanted from it and so I am writing this more as to not forget the setup I've created and hopefully it might help some of you.

With SVN commands a Github repository is like a file storage site that I can import and export just the resources I want.

I made a private repository in Github and pushed some initial resources

The https could be: https://github.com/aurelkurtula/starters.git

I can delete the project from my computer but still import and export anything from that project with svn import and svn export

Go into the directory where the resource you want to import is located and run

svn import -m -F "readme.md" https://github.com/aurelkurtula/starter.git/trunk/readme.md

There, a file readme.md located in your computer is pushed to the Github repository.

Exact same thing with exporting resources

svn export https://github.com/aurelkurtula/starter-folders.git/trunk/readme.md

Note the URL pattern: The cloning HTTPS address, followed by /trunk/ and the file or folder you want to export or import.

Use terminal/shell methods as shortcuts

I'm really happy with the above, I might read more into SVN but for now it does the job and my use is clear, to use for repositories where I don't really care about the commit logs and so forth, just a drop-box kind of functionality I can manage from my terminal.

I user oh-my-zsh framework to manage my zsh configuration. For any commands that will be repetitive, I always add a method in the zsh configuration:

svnpush(){
    # file = $2
    # path = $1
    svn import -m -F $2 $1/trunk/$2
}

Now if I ever want to import any file/folder to any of my repositories I just run svnpush https//:github...reponame.git localFoder

svndelete(){
    # file = $2
    # path = $1
    svn delete $1/trunk/$2 -m 'deleted $1'
}

The ability to delete resources from the repository is import, it's the only way to "modify" existing resources.

svnexport(){
    # file = $2
    # path = $1
    svn export $1/trunk/$2
}

Finally exporting.

Conclusion

I'm so excited about this because honestly, I've tried so many things and they all seem to distract me.

This reminds me of my note taking method which I've used for years and still find it extremely simpler than everything else I have tried.

There might be drawbacks if you use this instead of git for your code, there definitely must be. I want to emphasise that this is just a container to dump resources into

Playing with GraphQL yoga and mongoose

aurel kurtula — Sat, 22 Dec 2018 04:18:02 +0000

This is going to be an introduction to using GraphQL yoga, which is a GraphQL server based on Express.

If you don't know what GraphQL is, you might want to go through my previous tutorial where I use Express and GraphQL. That should get you up to speed. You could then learn how you can create a movie website with GraphQL and React but not really required for you to understand this. We're simply recreating the first tutorial with different tooling.

Get started

Let's set up the basic project. In an empty directory run these command lines

npm init -y
npm i -S graphql-yoga mongoose
touch index.js

The first line sets up the npm project, the second line installs the only two packages we will need, and to keep things simple, the entire code is going to go in index.js. Let's create a very basic structure:

const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
type Query {
  Greeting: String
}
`
const resolvers = {
  Query: {
    Greeting: () => `Hello World`
  }
}
const server = new GraphQLServer({
  typeDefs,
  resolvers
})

server.start({port: 7777}, () => console.log(`The server is running on port 7777`))

We required graphql-yoga at the top and run the server at the bottom. A GraphQL server needs us to define the type of queries it will be running, and the kind of data each query will respond with.

In our simple version, we have a query of Greeting that will return a string. And we specify that when the Greeting is called Hello World will be returned.

Now, all we're left to do is run this in the terminal node index.js. I highly recommend you install nodemon but that's beyond the point.

Now you need to run http://localhost:7777 in a graphql playground or use an online graphql playground. Then just run the following query:

{
  Greeting
}

And you'll get the response Hello World.

A bit deeper

Let's add an array of objects

const typeDefs = `
type Query {
    People: [PeopleObject]!
    Greeting: String
}
type PeopleObject {
    id: ID
    first: String!
    last: String!
}
`
const resolvers = {
  Query: {
    Greeting: () => `Hello World`,
    People: () => [{first: 'Aurel', last: 'Kurtula'}]
  }
}

We've added People as a possible query. It has to return an array of objects, the properties of the object are defined in PeopleObject. Note the use of ! makes those properties as required - meaning we have to return that content.

Then we hard-coded an array which will be returned.

In the playground, we could run this

{
  Greeting
  People{
    first
    last
  }
}

Connecting to mongo database

In a previous tutorial I go through creating a mongo database from mlab. So follow that if you don't already have mongodb installed locally or if you don't know how to set up a mongo database. Then come back, still in index.js at the top add the following code.

const mongoose = require('mongoose');
const db = mongoose.connect('mongodb://localhost:27017/population');
const Schema = mongoose.Schema;
const peopleSchema = new Schema({
    first: { type: String  },
    last: { type: String}
})
const People = mongoose.model('people', peopleSchema)

If you have mongodb installed and running locally, the above would work out as is, if not you'll need to change the url which mongoose should connect to. population will be created automatically. Then we create a schema. Similar to what we did with Graphql, we need to tell mongoose what type of content will be added to the model, then we specify the model.

From this point forward, as you'll see, we interact only with the People model and the people model in the population database will be affected.

Mongo and GraphQL

When we query People in the GraphQL playground we want the data to come from the mongo database and not from the array we hard coded. So let's change the resolvers

const resolvers = {
  Query: {
    Greeting: () => `Hello World`,
    People: () => People.find({}),
  }
}

There we are returning all the entries from the model in the database.

Cleary if we rerun the query in the playground we would get an empty array for People query as there's nothing in the database.

Now we need to add to the database through GraphQL. For this we need to use mutations:

const typeDefs = `
type Query {
  people: [People!]!
  person(id: ID!): People
}
type People {
    id: ID
    first: String
    last: String
}
type Mutation {
    createPerson(first: String!, last: String!): People
}
`

First, we specify the type; a mutation named createPerson it requires two properties and will return the People object. As usual, we need to specify the results of running that mutation, in resolvers

const resolvers = {
  Query: {....},
  Mutation: {
    createPerson: async (parent, args) =>{
        const newPerson = new People({
            first: args.first,
            last: args.last
        })
        const error = await newPerson.save()

        if(error) return error 
        return newPerson
    }
  }
}

Similar to other resolvers we want to do something when createPerson runs. This time we need to have access to the variables passed by the user, hence args (parent is beyond the scope of this tutorial).

First we create the newPerson object which we want to add to the database, then we create a new People module populated with the newPerson object, and finally, we save the object to the database, then we simply return the newly created object to graphQL server.

Back to the GraphQL playground

query people {
  Greeting
  People{
    first
    last
  }
}
mutation addingPerson{
  createPerson(first: "Gregor", last: "Samsa"){
    first
    last

  }
}

There, if you want to run the mutation you run addingPerson (by the drop-down menu). And, of course, after you add Gregor you can see the bugger :) when you run the people query.

Finally, let's follow the same logic and add the ability to remove a person from the database.

First, specify the type deletePerson:

type Mutation {
    createPerson(first: String!, last: String!): PeopleObject
    deletePerson(id: ID!): PeopleObject
}

Then let's resolve it as yet another mutation:

const resolvers = {
  ...
  Mutation: {
    createPerson: (parent, args) =>{...},
    deletePerson: (parent, args) => {
        return new Promise( (resolve, reject) => {
            People.findOneAndDelete(args.id, function(err, result){
                if (err) return err;
                resolve(result)
            })
        })
    }
  }

}

It's the exact same logic, mongoose gives us the ability to delete an object by its id - using findOneAndDelete. You can test deletePerson as follows:

mutation deleting{
  deletePerson(id: "5c1ccc3de652317c2c79d4ee"){
    first
    last
  }
}

And that is it for this tutorial.

You can get the code over at github. The code is divided into different files as it would in a fleshed out project

Creating a text editor in Electron: part 3 - Setting Preferences

aurel kurtula — Wed, 12 Sep 2018 18:12:46 +0000

Welcome to the last part of the series where we explore the basics of Electron by building a text editor. If you like to get a full picture of what we're doing here, be sure to read part one, and part two

A convention that we see in almost all the apps we use is the ability to allow users to make their editor their own. That's what we will do in this section. We'll let the users set the theme of the application. By the end we'll have introduced a new window which will look like this:

Custom header

Before we get into the meat of the tutorial lets, change the boring default header.

(It's all about making readers happy 🤪).

It's pretty simple. When we define the window (new BrowserWindow), we can give it options for the frame. If we set the frame to false, it would delete it- including the three buttons on the left-hand side. So we want to remove the default styling but not the buttons. At ./main.js change the BrowserWindow definition to include the relevant option:

window = new BrowserWindow({ 
    width:800, 
    height:600, 
    titleBarStyle: 'hidden' 
})

If we run the app we see the three buttons but no header, which means we would have to create our own. So in ./static/index.html we would do something like this:

<header id="customtitle_wrap">
    <h1 id="customtitle">Texty</h1>
</header>

In part two we added the ability for an asterisk to appear in the title tag to indicate when a file needs saving. Now, we need to add that functionality to #customtitle rather than the title tag.

The CSS can now be whatever you'd like, however -webkit-app-region: drag should be applied to #customtitle so that it would be a handle from which to drag the window around the screen. Read the documentation for frameless windows to see all the options.

I grabbed a font from google fonts; however, in a real app, we would at least download the font so that users don't need to be connected to the internet.

Initializing the preferences window

Just as we've done on the first tutorial we need to load an HTML page into a new window. Let's create the page at ./static/preferences.html:

<body>
    <p class="notification">Here you're able to personalise the interface by picking the colors you'd like to see. The changes will be saved automatically upon window being closed</p>
    <div class="container">
    <div id="content" >
        <form action="">
            <button id="defaultValues">Reset</button>
            <p><span>Background</span> <label for="background"></label> <span>
                <input type="text" name="background" value="#FFFFFF"></span> 
            </p>
            <p><span>Border Color</span> <label for="border-color"></label> <span>
                <input type="text" name="border-color" value="#50C68A"></span> 
            </p>
            <p><span>Text Color</span> <label for="text-color"></label> <span>
                <input type="text" name="text-color" value="#232323"></span> 
            </p>
            <p><span>Sidebar Background</span> <label for="sidebar-color"></label> <span>
                <input type="text" name="sidebar-color" value="#2F3235"></span> 
            </p>
            <p><span>Sidebar Text</span> <label for="sidebar-text"></label> <span>
                <input type="text" name="sidebar-text" value="#939395"></span> 
            </p>
        </form>
    </div>
    </div>
    <script src="scripts/preferences.js"></script>
</body>

This page has to launch when a menu button gets clicked. Let's add that button at ./components/Menu.js

{
    label: app.getName(),
    submenu: [
        {
            label: 'Preferences',
            accelerator: 'cmd+,', // shortcut
            click: _ => {
                const htmlPath = path.join('file://', __dirname, '../static/preferences.html')
                let prefWindow = new BrowserWindow({ width: 500, height: 300, resizable: false })
                prefWindow.loadURL(htmlPath)
                prefWindow.show()
                // on window closed
            },
        },
    ]
}

When Preferences is selected the ./static/preferences.html page loads in a new browser window. This time we are making sure users are unable to resize it.

With some CSS applied, we get this:

As specified in the HTML above, the default colours are hardcoded in the form. With Javascript, we want to apply those colour values as the background colour for the labels, and when users enter new colour values have them be reflected in the labels. We could have fun with colour pickers, but we'll keep it basic and assume users want to input their preferred colours. In which case we need to listen to input changes.

This functionality needs to go in ./static/scripts/preferences.js.

Let's remember the HTML:

<p>
    <span>Sidebar Text</span> 
    <label for="sidebar-text"></label> <span>
    <input type="text" name="sidebar-text" value="#939395"></span> 
</p>

Hence the javascript can be as simple as looping through the inputs and changing the labels:

var inputs = document.getElementsByTagName('input')
for(var i = 0 ; i < inputs.length; i++){
    document.querySelector(`label[for="${inputs[i].name}"]`).style.backgroundColor = inputs[i].value
    inputs[i].onkeyup = e => {
        document.querySelector(`label[for="${e.target.name}"]`).style.backgroundColor = e.target.value
    }
}

The code loops through each input element, apply their values as label background colours, then on input changes re-applies the colours.

Saving the colour preferences

The point of this window is that these colours persist when the application closes, so they have to be stored somewhere. Electron gives us a path to store user data. The documentation states that we access this through electron.app.getPath('userData')

The directory for storing your app's configuration files, which by default it is the appData directory appended with your app's name.

Within that folder, we want to store our colours as JSON. We do this using the same messaging from Render process to the Main process pattern as we've done in part two.

First, let's collect all the colours then send them to the Main process.

let preferences = {};
for(var i = 0 ; i < inputs.length; i++){
    ...
    preferences[inputs[i].name] = inputs[i].value
    inputs[i].onkeyup = e => {
        preferences[e.target.name] = e.target.value
        ...
        ipcRenderer.send(PREFERENCE_SAVE_DATA_NEEDED, preferences)
    }
}

The preferences object is populated with all the default colours. Then whenever one of the inputs changes, the corresponding object key is changed. Lastly, we send a PREFERENCE_SAVE_DATA_NEEDED message to the Main process with the preferences object as the message body.

At the top of ./components/Menu.js we can listen for the message and collect its data

let inputs;
ipcMain.on(PREFERENCE_SAVE_DATA_NEEDED, (event, preferences) => {
    inputs = preferences
})

Finally, for the menu, a pattern which I've seen in almost all the mac apps is that preferences are saved without needing a "save" button. We can do the same thing here by acting upon window getting closed.

In the Menu page, we can write the logic on window close.

{
    label: 'Preferences',
    accelerator: 'cmd+,', // shortcut
    click: _ => {
        ....
        prefWindow.on('close', function () {
            prefWindow = null 
            userDataPath = app.getPath('userData');
            filePath = path.join(userDataPath, 'preferences.json')
            inputs && fs.writeFileSync(filePath, JSON.stringify(inputs));
            window.webContents.send(PREFERENCE_SAVED, inputs); 
        })

    },
}

The userDataPath is located at /Users/YourUserName/Library/Application Support/Electron/ and in there you'll find our preferences.json which holds the colours.

When that's done, the PREFERENCE_SAVED message is sent to the Render process of our original window.

Now we need to read the colours from the preferences.json file and apply them in the UI.

First, let's do it in the ./static/scripts/preferences.js

const fs = require('fs')
let userDataPath = remote.app.getPath('userData');
let filePath = path.join(userDataPath, 'preferences.json')
let usersStyles =  JSON.parse( fs.readFileSync(filePath) )

for(let style in usersStyles) {
    document.querySelector(`input[name="${style}"]`).value = usersStyles[style]
    document.querySelector(`label[for="${style}"]`).style.backgroundColor = usersStyles[style]
}

The process is reversed there. We read the saved data from preferences.json, loop through the colours and apply them as the input values and label background colours.

Reseting colors.

The reason why we'd want to hardcode the colours in the HTML form is so that we'd access them at any time with defaultValue in javascript. We'll do so upon clicking the reset button:

<button id="defaultValues">Reset</button>

On click, loop through the input fields and apply the default values accordingly.

document.getElementById('defaultValues').addEventListener('click', function(e) { // reset
    e.preventDefault();
    preferences = {};
    for(var i = 0 ; i < inputs.length; i++){
        preferences[inputs[i].name] = inputs[i].defaultValue
        document.querySelector(`label[for="${inputs[i].name}"]`).style.backgroundColor = inputs[i].defaultValue
        inputs[i].value = inputs[i].defaultValue
    }
    ipcRenderer.send(PREFERENCE_SAVE_DATA_NEEDED, preferences)
} )

The above code does the following

Resets the preferences object.
Re-populates the preferences object with input defaultValue .
Changes the background colour of labels with input defaultValue.
Changes the input value with input defaultValue.
Sends a message to the Main process.

Applying the saved colour to the main window

Upon closing the preferences window, a message gets transmitted.

window.webContents.send(PREFERENCE_SAVED, inputs);

We can listen to it in the main window and use the content sent with the message.

Before doing so let's talk CSS.

The most important bit of CSS are the variables:

:root {
    --background: #FFFFFF;
    --border-color: #50C68A;
    --text-color: #232323;
    --sidebar-color: #2F3235;
    --sidebar-text: #939395;
}

Whenever we change those variables with javascript, the appearance of every element where we applied those variables to would change.

We can do this at ./static/scripts/index.js

    let userDataPath = remote.app.getPath('userData');
    let filePath = path.join(userDataPath, 'preferences.json')

    let usersStyles  = JSON.parse( fs.readFileSync(filePath) )

    for(let style in usersStyles) {
        document.documentElement.style.setProperty(`--${style}`, usersStyles[style]);
    }
    ipcRenderer.on(PREFERENCE_SAVED, function (event, inputs) {
        for(let style in inputs) {
            document.documentElement.style.setProperty(`--${style}`, inputs[style]);
        }
    });

There you have it. Now every element that uses those variables will be changed automatically.

And the end result looks like this

You can clone the repository at GitHub

Conclusion

That's it for this series. As I tried to make it clear there are a lot of things missing. The code can definitely be refactored, there can be storage improvements, and error handling is none existent.

While I was working on this demo I thought about my current writing workflow which consists of node generated markdown pages hosted as GitLab wiki and I feel adding an Electron interface might make the process of note-taking slightly smoother. That might be my next personal project.

Hope you've been equally inspired 💡

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula ・ Sep 5 '18

#electron #javascript #node

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

#electron #javascript #node

Creating a text editor in Electron: part 2 - writing files

aurel kurtula — Sun, 09 Sep 2018 06:30:49 +0000

In the last tutorial the basic structure was created. We were able to read files from a directory, list their titles in the sidebar, and we were able to read their contents on the screen.

In this tutorial, we are going to add more interaction. To start with let's talk about the menu. Since we haven't specified a menu of our own, Electron gives us one by default, but inside ./main.js we can create our own buttons and have them do what we need. Let's see an example.

const { app, BrowserWindow, Menu } = require('electron')
...
app.on('ready', function(){
    devtools = new BrowserWindow()
    window = new BrowserWindow({ x: 0, y: 0, width:800, height:600})
    window.loadURL(path.join('file://', __dirname, 'static/index.html'))
    window.setTitle('Texty')
    Menu.setApplicationMenu(Menu.buildFromTemplate([
        {
            label: app.getName(),
            submenu: [
                {
                    label: `Hello`,
                    click: () => console.log("Hello world")
                }
            ]
        }
    ]))

})

We first require the Menu component from Electron. Then we use it to create the menu for the application that's about to load. Above is just an example. As per usual, the first label simply opens the submenu. So for the label, we are using the app name, and then we're creating a Hello button which consoles a message.

Let's expand that menu. However, since the object can be huge let's add the menu in a separate component.

// ./main.js
const menu = require('./components/Menu')
app.on('ready', function(){
    window = new BrowserWindow({ x: 0, y: 0, width:800, height:600})
    ...
    Menu.setApplicationMenu(menu(window))

})

That's how navigation can be split.

Let's create the ./components/Menu.js file which would return a function.

const {app, Menu } = require('electron')
module.exports = function(win){
    return Menu.buildFromTemplate([
        {
            label: app.getName(),
            submenu: [
                { label: `Hello`, click: () => console.log("Hello world") }
            ]
        },
        {
            label: 'Edit',
            submenu: [
                {label: 'Undo', role: 'undo'  },
                {label: 'Redo', role: 'redo'  },
                {label: 'Cut', role: 'cut'  },
                {label: 'Copy', role: 'copy'  },
                {label: 'Paste', role:'paste'  },
            ]
        },
        {
            label: 'Custom Menu', 
            submenu: [/* We'll add more actions */]
        }

    ])    
}

Electron gives us a set of roles which do the heavy lifting under the hood. Follow the link to see all the roles available.

From this point forward we are going to add all our navigation as a submenu of Custom Menu - to keep it interesting!

Creating a new document

So far the state of our application is such that it reads files from the disc and displays the content. (The pitfalls on this approach are discussed at the end)

Let's add the functionality of adding new documents.

We start by adding a button to our navigation. So in ./components/Menu.js add the following:

const { NEW_DOCUMENT_NEEDED } = require('../actions/types')
module.exports = function(window){
...
{
    label: 'Custom Menu', 
    submenu: [
        {
            label: 'New',
            accelerator: 'cmd+N',
            click: () => {
                window.webContents.send(NEW_DOCUMENT_NEEDED, 'Create new document')
            }
        }
    ]

That creates a New button on the menu, accelerator property is to give the button a shortcut. Then upon clicking the button, we are sending a message to the rendering part of the application!

Some tutorials I've read state that this is complicated to grasp, but think of redux, the only way to communicate with the store is via listening and dispatching messages. That's precisely the same here.

The ./main.js deals with the back end. It gives us access to electron's modules (like the menu, access to the webcam if wanted and all sorts).

Everything in ./static/scripts/*.js doesn't have access to the above features. This portion of the code is only concerned with manipulating the DOM. There's even a strong case against using this part of the code for any fs operations (more on that below).

Back in ./static/scripts/index.js we would listen for NEW_DOCUMENT_NEEDED.

const { ipcRenderer } = require('electron'); 
const { NEW_DOCUMENT_NEEDED } = require(path.resolve('actions/types'))
ipcRenderer.on(NEW_DOCUMENT_NEEDED, (event , data) => {
    let form = document.getElementById('form')
        form.classList.toggle('show')
    document.getElementById('title_input').focus()
    form.addEventListener('submit', function(e){
        e.preventDefault()
        // write file here ?
    })
})

We listen for the NEW_DOCUMENT_NEEDED transmission. When we hear it, we show a form (usual CSS class toggle).

Then when the form is submitted, we need to write a new file.

For this simple application, we would use fs.writeFile just below // write file here ?. However, if this were a big project, we would not want to do any file system operations on the rendering side. If the application is huge even ./main.js wouldn't be able to handle the operation (apparently you'd need a new window which is beyond our scope). However, mainly to explore how it might be done, we'll let the ./main.js write to system.

const { ipcRenderer } = require('electron'); 
const {  WRITE_NEW_FILE_NEEDED } = require(path.resolve('actions/types'))
...
form.addEventListener('submit', function(e){
    e.preventDefault()
    // write file here ?
    ipcRenderer.send(WRITE_NEW_FILE_NEEDED, {
        dir: `./data/${fileName}.md`
    })
})

Above we are sending an object to WRITE_NEW_FILE_NEEDED channel (that channel name can be anything you like)

Heading over to ./main.js we create the file and then send a message back:

ipcMain.on(WRITE_NEW_FILE_NEEDED, (event, {dir}) => {
    fs.writeFile(dir, `Start editing ${dir}`, function(err){
        if(err){ return console.log('error is writing new file') }
        window.webContents.send(NEW_FILE_WRITTEN, `Start editing ${dir}`)
    });
})

Exactly the same idea when WRITE_NEW_FILE_NEEDED has been transmitted, get the dir that's been sent through that channel, write the file on that directory and send back a message that the writing process has been completed.

Finally, back to ./statics/scripts/index.js

form.addEventListener('submit', function(e){
    e.preventDefault()
    let fileName = e.target[0].value
    ...
    ipcRenderer.on(NEW_FILE_WRITTEN, function (event, message) {
        handleNewFile(e, `./data/${fileName}.md`, message)
    });
})

And that's that.

Of course, you should clone the repository to get the full picture. The handleNewFile hides merely the form, handles click event for the time the app is open. And displays the content on the page.

const handleNewFile = function(form, dir, content){ 
    let fileName =form.target[0].value
    form.target.classList.remove('show')
    let elChild = document.createElement('li')
    elChild.innerText = fileName
    readFileContentOnClick(dir, elChild) // read file on click
    form.target[0].value = ''
    form.target.parentNode.insertBefore(elChild,form.target.nextSibling);
    document.getElementById('content').innerHTML = content;
}

The way I am getting my head around the communication between ipcRenderer and ipcMain is by thinking of the basics of redux. The way we communicate with a redux store is exactly the same.

Here's a diagram for the code we have so far

As you can see, this dance between the two processes is an overkill for what we're doing, but this kind of thing would have to happen in order not to block the UI. As I said, chances are even this wouldn't be enough in a bigger application. I think it's not a feature, it's a bug.

Saving changes

Finally, for this part of the series, we need to save changes.

Following the Mac pattern, I want a visual indication the file needs saving and for that indication to be removed after the file is saved. Starting in ./static/scripts/index.js

document.getElementById('content').onkeyup = e => { 
    if(!document.title.endsWith("*")){ 
        document.title += ' *' 
    }; 
    ipcRenderer.send(SAVE_NEEDED, { // alerting ./component/Menu.js
        content: e.target.innerHTML,
        fileDir
    })
}

onkeyup means that something has been typed, if that's the case add an asterisk to the title and then transmit SAVE_NEEDED up to the main process. It will need the information that has been typed and the file directory that is being affected.

This time we aren't going to listen in ./main.js but in ./components/Menu.js (which of course is part of the same process).

let contentToSave = ''
ipcMain.on(SAVE_NEEDED, (event, content) => {
    contentToSave = content 
})
module.exports = function(window){
    return Menu.buildFromTemplate([
        ...
        {
            label: 'Save',
            click: () => {
                if(contentToSave != ''){
                    fs.writeFile(contentToSave.fileDir, contentToSave.content, (err) => {
                        if (err) throw err;
                        window.webContents.send(SAVED, 'File Saved')
                    });
                }
            },
            accelerator: 'cmd+S'
        }

On SAVE_NEEDED we get the content transmitted. Then every time Save is selected we check for that content, and if it exists, we write to file. Then, once the file is written, we sent an alert to the render section, with the message File Saved, where we deal with it in ./static/scripts/index.js

ipcRenderer.on(SAVED, (event , data) => { // when saved show notification on screen
    el = document.createElement("p");
    text = document.createTextNode(data);
    el.appendChild(text)
    el.setAttribute("id", "flash");
    document.querySelector('body').prepend(el)
    setTimeout(function() { // remove notification after 1 second
        document.querySelector('body').removeChild(el);
        document.title = document.title.slice(0,-1) // remove asterisk from title
    }, 1000);
});

And the end result being:

That's it for today!

However, I feel I need to state the obvious. I intend to focus on the basics of Electron. Hence, as you've noticed, I did not focus at all on validation.

Few of many things we would need to do to get this to meet minimum standards for production:

Checking whether a file already exists.
Dealing with unsaved files when moving between them.
Actually convert content to markdown.
Store content using innerText rather than innerHTML (as @simonhaisz pointed out in the last tutorial).
And many more things which might be even more important than the above.

However, none of those is electron specific hence I chose not to spend time on writing and explaining code which doesn't contribute to learning Electron.

There will be one more tutorial in this mini-series where we'll look at adding another window and working on user preferences.

Meanwhile, check out the project at github, branch: part2

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula ・ Sep 5 '18

#electron #javascript #node

Creating a text editor in Electron: part 3 - Setting Preferences

aurel kurtula ・ Sep 12 '18

#electron #javascript #node

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula — Wed, 05 Sep 2018 09:56:24 +0000

Let's start by creating the package.json file, and installing the required packages

{
  "name": "intro-to-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electromon main.js  --ignore static"
  },
  "author": "Aurel Kurtula",
  "license": "ISC",
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^2.0.8"
  }
}

Now we need to create the main.js file. This is where our electron app is going to start from:

const { app, BrowserWindow } = require('electron')
const path = require('path')

app.on('ready', function(){
    let window = new BrowserWindow({width:800, height:600})
    window.loadURL(path.join('file://', __dirname, 'static/index.html'))
})
app.on('close', function() {
    window = null
})

When the app is ready we create a window, load a static file to be rendered in. When the app closes, we make sure the browser window is removed.

Let's create the static/index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hello World!</title>
  <link rel="stylesheet" href="./styles/main.css">
</head>
<body class="index">
  <div class="container">
    <ul id="titles"></ul>
    <div id="content" contenteditable="true">
        <p>Select a title <br />  &#x2190</p>
    </div>
  </div>
  <script src="scripts/index.js"></script>
</body>
</html>

It's simple really, #titles will have file titles and the #content will show their content. As you can see, it's the usual front end stuff. We have CSS and javascript.

Reading system files

I created a bunch of markdown files, placed them in a ./data directory and now we'll read them and add the titles to the app. We'll do that in static/scripts/index.js

const fs = require('fs')
const path = require('path')
const { readTitles } = require(path.resolve('actions/uiActions'))
readTitles('./data').map(({title, dir}) => {
    el = document.createElement("li");
    text = document.createTextNode(`${title.split('.md')[0]}`);
    el.appendChild(text)
    el.addEventListener('click', function(e){ // clicking on sidebar titles
        fs.readFile(dir, (err, data) => {
        if (err) throw err;
        fileDir = dir;
        document.getElementById('content').innerHTML = data;
        });
    })
    document.getElementById('titles').appendChild(el)
})

In the third line I just require my module readTitles which simply reads the title and returns them as array object. I look through them, create a list element, then add an event listener which injects the contents of the file in the #content

I think this is a good point to end this introductory tutorial.

Note that the window is just a chrome browser, you are able to open dev tools on it. You can do so as usual from the view menu or you could get electron to open devtools on start. It can be done in ./main.js page

window.webContents.setDevToolsWebContents(devtools.webContents)
window.webContents.openDevTools({mode: 'detach'})

Next time we'll start editing our data files and create our own custom menu

View code at github. Branch: part1

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

#electron #javascript #node

What are some projects or exercises I can do to practice HTML and CSS?

aurel kurtula — Wed, 05 Sep 2018 03:23:31 +0000

(I just got notified that I've written this a while back. It's aimed at beginners wanting to practice HTML and CSS, I still stand by it)

First: Pen and Paper!

Create a site with pen an paper. An idea would be a site that displays your favorite books - with pen and paper draw boxes representing book covers, thick lines where the title goes, thinner lines for the author.

Then start translating that drawing in HTML.

Stop!

You have created a drawing, now you, and you alone, need to choose where to use the HTML tags. What's the best tag for the title what its the best tag for the author, looking at your paper design would the two benefit by being grouped together. Do you group them with a div, a header, a hgroup, or do you use just one element and distinguish the two with a span.

Do you need an id, a class or an id and few classes.

Now into css. Your drawing might be simple and you might get the style perfectly in one go.

Stop!

Why is it that I am using the same styles on different elements, can I make this css less repetitive? I need to add few more classes,

Step two

Shrink the size of your browser, now your design is broke. Get back to a fresh pen and paper think about how to re-organize the same elements to fit the space.

Now get back to css. Learn about the best way. If media queries are hard for you. Copy the project, and start from the beginning and design the site for that screen size now. This is not good practice, a site should be responsive, but you are practicing, you tried designing for big screen, now you are trying to design for small screen.

(Of topic: learn the very basics of git, even you, learning the very basics would extremely benefit from the basics of git. In broad strokes, it's like a CCTV for your code. You can go back in time to the moment your code was working.)

Step three

By this point you have two different sites, one that looks good in small screen and one that looks good in big screen. Now, Create a third version with media queries!

With your first and second step you are fully aware of the problems you faced when designing for the small and big screens. Now you know how your HTML needs to be structured to accommodate the transition. You know that you might need more classes, maybe one or two more divs here and there.

Back to the top

You don't have to use photoshop, you don't have to create a great design. You just have to fill an A4 page with some elements (if a book site: book covers, and book info). For now the CSS would be enough if you only use it to lay those elements in the same way you did in the A4.

Similar with your smaller site: take the A4 cut out a perfect square. Through the square away and design the site (exactly the same one you did in the A4 design) on the remaining slice of the A4 you cut.

Designing these two sites, and then merging them together (the definition of responsive design) is going to be better than any artistic design you could possibly do or clone.

If you need to, write whilst you work. I do this when ever I learn something complicated. I create a markdown file (if you don't know what that is: a text file) and write down what I am doing, what I should think about, I record what I should remember for future projects.

After doing this. You might have noticed that you need more practice in the same process. You might have had an idea for another design, just go for it. Get fresh paper and scribble the hell out of it.

There are screenshots of beautiful websites all over the web. Pinterest has plenty of them. Pick one that you like. Or pick things you like from every design you see and collage your own (still pen and paper can take you a long way). And then start re-creating the new site in html and css.

There is a tool called Frank DeLoupe it is a color picker, you pick any color from any thing and the color get's copied into clipboard - look out for something like that in you operating system. Browsers might have something like that also, but with frank, you can pick colors from anywhere, not just the web

Introduction to Next.js - adding express and mongo to the project

aurel kurtula — Wed, 29 Aug 2018 23:17:45 +0000

Welcome to part three of my exploration of next. In part one I covered the basics: How to structure and style a basic site. In part two I covered how we can fetch data from an API and inject it within the react component lifecycle.

Today I want to add express and mongo to the project. That means in the same project next.js allows us to run express and react in a pretty easy way.

Lets get started

As you're about to see, most of the code that we'll write is pure express stuff. I have covered how to build a restful API with react and mongodb already, all that is going to be the exact same thing.

Let's install the required packages for this part of the tutorial

npm i -S express mongoose body-parser

Now lets start by creating ./server/index.js page and add the following code

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const PORT = process.env.PORT || 3000
const dev = process.env.NODE_DEV !== 'production' //true false
const nextApp = next({ dev })
const handle = nextApp.getRequestHandler() //part of next config
const mongoose = require('mongoose')

const db = mongoose.connect('mongodb://localhost:27017/Photos')

nextApp.prepare().then(() => {
    // express code here
    const app = express()
})

That's how easy it is to add express to our project.

There are only four lines of code that are next.js related and everything else is the usual express code:

Require next.
Initiate it by letting it know which environment we're using (I chose to call that nextApp and call the express instance app - because I can come back next few months and read the express code with no problem.)
Next requires getRequestHandler()
Then we run prepare on the nextApp, which I guess prepares everything (!) and then we run express.

Lets add the rest of the code that makes up ./server/index.js

nextApp.prepare().then(() => {
    // express code here
    const app = express()
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use('/api/photos', require('./routes/index')) 
    app.get('*', (req,res) => {
        return handle(req,res) // for all the react stuff
    })
    app.listen(PORT, err => {
        if (err) throw err;
        console.log(`ready at http://localhost:${PORT}`)
    })
})

Again, nothing new there, you can learn how to build an express site here. However, the only important thing is the start in app.get('*', ...). That just says all routers that aren't specified already, let next.js deal with them - which of course, in turn, it lets us deal with them in our react code.

Let's create the API routes at ./server/routes/index.js

const express = require('express')
const router = express.Router()
const Photos = require('../models/photoModel')

router.get('/', (req, res) => {
    Photos.find({}, (err, photos) => {
        res.json(photos)
    })
})
router.use('/:id', (req, res, next) => {
    console.log(req.params.id)
    Photos.findById(req.params.id, (err, photo) => {
        if(err)
            res.status(500).send(err)
        else 
            req.photo = photo 
            next()
    })
})
router
    .get('/:id', (req, res) => {
        return res.json( req.photo )
    })
    .put('/:id', (req, res) =>{
        Object.keys(req.body).map(key=>{
            req.photo[key] = req.body[key]
        })
        req.photo.save()
        res.json(req.photo)
    })
module.exports = router;

Above we basically created the API points that we know our react code requires. When /api/photos is requested, we return all photos found in the database. If any type of request is made on /api/photos/:id then we have to find the relevant object in the database. Then depending on whether the request is a get or a put we either respond with the object or edit the object depending on the required data we've received.

Finally we need to create ./server/models/photoModel.js

const mongoose = require('mongoose')
const schema = mongoose.Schema

const photoModel = new schema({
    tagline: { type: String} ,
    image: { type: String},
    likes: { type: String},
    comments: { type: Array, default: [] }
})

module.exports = mongoose.model('photos', photoModel)

And that's about it!

Running the app

Unlike in previous tutorials, now we want to run our entire application from ./server/index.js

node server/index.js

Of course if you are following along you need to do two more things:

In the react code, /pages/index.js and /pages/photo.js we need to edit the addresses to where we are fetching from, now we need to point to 3000/api/photos. Also when fetching, we would change id to _id. The database we are using has to contain the data of course. You can import the data I've left in the ripository by running the following command:

mongoimport --jsonArray --db Photos --collection photos --file '/your-project-folder/data/db.json'

That imports the data into Photos database, and inside a collection named photos.

The project now should be run by using express as the starting point. Hence you'd run

node server/index.js

And due to the way we've configured the code, next takes over and runs the react code as well. So what we have is, anything in /api is handled by express and everything else is handled by react.

Whilst developing your application it be more useful to run nodemon server/index.js instead. nodemon monitors your code and restarts the server when ever you change the code. Very useful. However, you don't want it to restart the server when you modify the react code. Amongst other things it might get caught in a loop. Where next reloads react, then nodemon reloads the server due to file changes. To solve this you should create a folder called nodemon.json and add the following:

{
    "verbose": true,
    "ignore": ["node_modules", ".next"],
    "watch": ["server/**/*"],
    "ext": "js json"
}

We're basically telling nodemon to concern itself with files that are within the server directory and that are javascript and JSON, and especially ignore the specified folders.

nodemon is a really useful package that you should install as a global package (npm install -g nodemon). nodemon basically monitors your node code and re-runs the server whenever files change.

The end.

That's it for this tutorial, hope you liked it. There are few more things that I want to cover in this series, so stay tuned and thanks for reading! The repository for this part of the code can be found in the branch labeled part3

Part One:

Introduction to the basics of Next.js

aurel kurtula ・ Aug 22 '18

#nextjs #node #react #tutorial

Part Two:

Introduction to Next.js - fetching data from API

aurel kurtula ・ Aug 24 '18

#nextjs #node #react #tutorial

Introduction to Next.js - fetching data from API

aurel kurtula — Fri, 24 Aug 2018 23:42:50 +0000

Following from the last tutorial

Introduction to the basics of Next.js

aurel kurtula ・ Aug 22 '18

#nextjs #node #react #tutorial

Today we'll cover

Fetching data from an API.
Performing CRUD operations onfetch API.

In future tutorials I might cover how we could actually incorporate express within next.js and create our own API, but for now I am going to use an NPM package called json-server. It's a fantastic tool to quickly run a local REST API. As it states in the documentation "a full fake REST API with zero coding in less than 30 seconds". As this is not a tutorial for json-server I am not going to say much just that I've added a JSON file with all our data at ./data/db.json and then ran json-server data/db.json --port 4000, giving us a REST API at port 4000 (read the documentation if you want to learn more on json-server). Leave that running in a separate terminal window and let's get on.

I am going to assume that you've read the last tutorial and if you are following along you have already cloned the files we have so far (github - part one).

Fetching data from API

In the last tutorial we used stateless functional components. This time we'll need to convert some of those components to class based, starting with ./pages/index.js.

const Index = (props) => ( <Layout> ... </Layout>)
Index.getInitialProps = async ({ }) => { ...}
export default Index

That's what we have from the previous tutorial. Let's convert that into a class component and fetch data from the API

import React, { Component } from 'react'
import fetch from 'isomorphic-unfetch'
import Layout from '../components/Layout';
import Photo from '../components/Photo';

export default class extends Component {
  static async getInitialProps() {
    const res = await fetch('http://localhost:4000/photos')
    const images = await res.json()
    return { images }
  }
  componentWillMount() {
    this.setState({
      images: this.props.images
    })
  }
  render() {
    return (
      <Layout>
         {
          this.state.images.map((image, key) => <Photo id={key} id={key} data={image} />)
         }
      </Layout>
    )
  }
}

As you can see, the core code is the same. We just wrapped what we had into a react class component.

When using next.js we do not have access to the browser's fetch API, hence we need to install the isomorphic-unfetch library (npm i -S isomorphic-unfetch) which implements the same functionality as the browser's fetch.

Just as previously, getInitialProps pushes the fetched data into the props. We then inject that data into the component state, via componentWillMount. Basic react stuff - we need access to the data via the state rather than props so that we'll be able to propagate data changes through the app.

Functionality to like a photo

Thinking back to the previous tutorial, we have a likes button that shows the number of likes. We of course want the ability to increase the likes upon button click

As usual in react development we are going to create the functionality in the Index page component (./pages/index.js) and pass it down as a prop (this is why learning redux is great in these cases)

...
LikesEntry(id){
    let images = this.state.images
    let image = images.find( i => i.id === id )
    image.likes = parseInt(image.likes) + 1
    this.setState({
        images
    })
    fetch(`http://localhost:4000/photos/${id}`, {
        method: 'PUT',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(image)
      })

}
render(){
    return (
        <Layout>
            {
                this.state.images.map((image, key) => 
                    <Photo 
                        LikesEntry={this.LikesEntry.bind(this)} 
                        id={image.id} 
                        key={key} data={image} /> )
            }
        </Layout>
    )
}
...

When the likes button is clicked, LikesEntry get's triggered. In there we increase the number of likes to the image that's being pressed. That change is pushed back to the state, then we perform a put request where the server also gets the changes.

The button that's being pressed is actually two components deep. Above we pass LikesEntry to the ./components/Photo.js component (via props). The Photo component would equally pass LikesEntry to the CommentsFunctionality component

In ./components/Photo.js

<CommentsFunctionality 
    LikesEntry={() => 
        props.LikesEntry(props.data.id)}
        commentsNum={props.data.comments.length}
        likes={props.data.likes} />

And lastly the ./components/InteractiveButtons.js get's to use it upon click:

export default ({likes, LikesEntry, commentsNum}) => (
    <div className="meta">
        <button className="heart" onClick={LikesEntry} ><MdFavoriteBorder />{likes}</button>
        <p><MdModeComment />{ commentsNum }</p>

That's it with the likes button. On click the component state updates along with the server.

(As you can see I added the comments number there as well, just to make UI feel complete)

Getting individual photograph

Almost the same process is involved in the ./pages/photo.js component, converting it to a class component and add props to state

The same process as before, now a single image needs to be fetched. So ./pages/photo.js component needs to be converted into a class component.

import react, { Component } from 'react'
import fetch from 'isomorphic-unfetch'
import Layout from '../components/Layout';
import Photo from '../components/Photo';
import CommentsFunctionality from '../components/InteractiveButtons'

export default class extends Component {
    static async getInitialProps({query}) {
        const {id} = {...query}
        const res = await fetch(`http://localhost:4000/photos/${id}`)
        const image = await res.json() 
        return { image } 
    }
    componentWillMount(){
        this.setState({
            image: this.props.image
        })
    }
    render(){
        return(
            <Layout>
                ...
                    <img src={`/static/art/${this.state.image.image}.jpg`} alt=''/>
                    <CommentsFunctionality />
                </div>
                <div className="comments">
                    <p className="tagline">{this.state.image.tagline}</p>
                    {
                        this.state.image.comments.map((comment, key) => <p key={key}><strong>{comment.user}:</strong>{comment.body}</p>)
                    }
                    <form className="comment-form">
                        <input type="text" ref="author" placeholder="Author" />
                        <input type="text" ref="comment"  placeholder="comment..." />
                        <input type="submit" />
                    </form>
                ...

Exactly as we did in the Index component, the data is fetched and injected in the component state. The returned JSX (react's version of HTML) is exactly the same just that we return from this.state. Also ref is added to the form inputs. ("Refs provide a way to access DOM nodes or React elements created in the render method" (react docs))

Add comments to the image

Finally we need to deal with the form.

Lets add the functionality which adds a comment to the state and the server. Start by creating the onSubmit functionality and linking it to the form.

submitComments(e){
    e.preventDefault();
    const user = this.refs.author.value;
    const body = this.refs.comment.value;
    const comments = this.state.image.comments;
    comments.push({user, body})
    this.setState({comments})
    fetch(`http://localhost:4000/photos/${this.state.image.id}`, {
        method: 'PUT',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.state.image)
      })
}
...
<form className="comment-form" onSubmit={(e)=> this.submitComments(e)} >
    <input type="text" ref="author" placeholder="Author" />
    <input type="text" ref="comment"  placeholder="comment..." />
    <input type="submit" />
</form>

That's about it!

The code can be found at the same repository but in part2 branch.

Next time we'll explore how to add express to this next.js project and recreate the basic API required for this project

Introduction to the basics of Next.js

aurel kurtula — Wed, 22 Aug 2018 17:14:51 +0000

Next.js is a framework that renders react applications on the server. This means when we create a normal react app (using create-react-app for example) and load it to the browser, all the content is created by client-side javascript. Hence users or devices that don't have javascript will not be able to access your app.

You can see this in action, open a react application in the browser then view the page source. You will not see the content you've created! In fact, if the project was created through create-react-app you'll see this:

<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

Which is obvious as all we're doing with react is appending content to #root(hence document.getElementById('root')). Content that vanishes if javascript is disabled.

Hence Next.js, it fixes that issue for us.

Whilst learning next.js I am trying to create a small application that will have the basic functionality of instagram - a mini instagram clone if you like. I know that the code we'll write today will not be scalable, hence will not contribute that much to the react application but it will cover the basics of next.js

Let's get started

First we need to initialise npm and install the only packages needed for next.js to work:

npm init
npm install --save next react react-dom

(If you use yarn you know what to do)

Now we need to add the following scripts to the generated package.json:

  "scripts": {
    "start": "next"
  },

When we want to run this app in the browser we'll need to run npm start.

Next.js allows us to organise our routes via pages. In this tutorial we'll create two pages to see how they can interact. Let's first create the index page. It needs to be at ./pages/index.js. In there add the following:

export default () => (
    <div className="app">
        <header>
            <h1>gallery</h1><h2>Original art</h2>
        </header>
    </div>
)

And that's it.

If we run npm start we'll have the index page displayed. And of course, the most important thing here, if you view the page source, you'll now see the above HTML "hard coded" for us by next js.

Styling

CSS styles can go right into the pages/index.js. Making each section modular. Let's make that header pretty:


export default () => (
    <div className="app">
        <header>
          <h1><Link href={{ pathname: '/' }}><a>gallery</a></Link></h1>
        </header>
        <style jsx>{`
            @import url('https://fonts.googleapis.com/css?family=Oleo+Script');
            //... you can get the full code at github
            header h1{
                font-family: 'Oleo Script', cursive;
                font-size: 25rem;
                color: #AD0044;
                text-shadow: #7F0D23 0px 0 40px;
                letter-spacing: -20px;

                display: inline-block;
            }
            h2{
                font-size: 3.5rem;
                color: white;
                text-shadow: none;
                letter-spacing: normal;
                font-weight: normal;
                font-family: 'Dancing Script', cursive;
                position: absolute;
                top: 50%;
                left: 50%;
            }

        `}</style>
    </div>
)

From the documentation "We bundle styled-jsx to provide support for isolated scoped CSS"

Adding styles this way feels like a hack! I like the external styles better, but it really does help with keeping everything isolated. I just need to get used to it - maybe.

Adding components

Let's just further split this code up so that it does not get messy by adding a layout component in ./components/Layout.js

import Link from 'next/link'
import Head from 'next/head'

export default ({ children, title = 'gallery: original art' }) => (
    <div>
        <Head>
        <title>{ title }</title>
        <meta charSet='utf-8' />
        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
        </Head>
        <div className="app">
            <header>
                <h1><Link href={{ pathname: '/' }}>gallery</Link></h1>
                <h2>Original art</h2> 
            </header>
            { children }
            <footer>
            Footer
            </footer>
        </div>
        <style global jsx>{`
            :root {
                --green:  #65C5D9; 
                --white: #F4F5F7;
                --light-gray: #EAEEEF;
            }
            ...
            body{...}
        `}</style>
        <style jsx>{`
            header{ ...}
            header h1 a{ ...}
            h2{....}
            footer { ...}

        `}</style>
    </div>
)

Few important things to note above:

Next.js gives us a Head component where by we can manipulate what goes inside the HTML <head> tag. For example you might want more meta information.
We should use the Link component to navigate through the pages. It does require an anchor tag as well. I added an empty anchor tag but Next does populate it accordingly.
I used two style tags, one being global. The perfect example are the css variables and the body tag. Each page/component needs access to that information, hence global.

Back in the ./pages/index.js we proceed as such:

import Layout from '../components/Layout';
export default () => (
    <Layout>
       <p>this is the content </p>
    </Layout>
)

Working with some data.

We could convert the Index page component to a react component and get the data in the react component lifecycle or keep going with the stateless function approach. For this tutorial we're going to keep it simple and will not introduce react components (we'll do that in the next tutorial)

import Layout from '../components/Layout';
import getPhotos from '../data/data.js'
const Index = (props) => (
    <Layout>
       <p>{props.images[0].tagline}</p>
    </Layout>
)
Index.getInitialProps = async ({ }) => {
  // Would fetch data
  return {  images: getPhotos()  } // return { images: [ { }, { } ] }
}

export default Index

getInitialProps we would perform fetch operations and pass the fetched data to the Index props, but we are hard coding it here just for convenience. We have the hard coded data at ./data/data.js which looks like this:

export default () => {
    return [
        {
            id: 0,
            tagline: 'You\'re looking at me punk?', 
            image: '927756_283684128492129_838664181_n',
            likes: 2,
            comments: [
                {
                    user: 'rex2018',
                    body: 'Hey this is dope! xxx'
                }
            ]
        },
        ...
    ]
  }

All that data is available through the props. How we play with that data inside the Index component is basic react stuff. First lets edit the Index component

import Layout from '../components/Layout';
import getPhotos from '../data/data.js'
import Photo from '../components/Photo';
const Index = (props) => (
    <Layout>
       {
        props.images.map((image, key) => <Photo id={key} id={key} data={image} />)
       }
    </Layout>
)
...

We loop through each image and render a Photo component. We need to create that component at ./components/Photo.js.

import CommentsFunctionality from './InteractiveButtons'
import Link from 'next/link'

export default (props) => {
    return (
        <div className="photoComponent">
            <div style={{flex: '1 0 auto'}}>
                <Link href={{ pathname: '/photo', query: { id: props.id } }}>
                    <img src={`/static/art/${props.data.image}.jpg`} alt=""/>
                </Link>
                <div className="meta">
                    <p className="tagline">{props.data.tagline}</p>
                    <CommentsFunctionality likes={props.data.likes} />
                </div>
            </div>
            <style>{`
                .photoComponent {
                    ...
                }
            `}</style>
        </div>
    )
}

To recap, in ./pages/Index.js we loop through all the images. For each image we render the above Photo component. The new thing in there is that I decided to move a little bit of code into a separate InteractiveButtons component. Initially I did so purely to keep the CSS of Photo component clean. Anyway, heres the code for InteractiveButtons

import { MdModeComment, MdFavoriteBorder } from 'react-icons/md'
export default ({likes}) => (
    <div className="meta">
        <a href="/" className="heart"><MdFavoriteBorder />34</a>
        <a href="/"><MdModeComment />{likes}</a>
        <style>{`....`}</style>
    </div>
)

I just found the react-icons npm module whilst looking for a way to add icons without downloading any css framework, and I really like this. It's so easy to use. You can see all the icons provided here. Above I am requesting MdModeComment and MdFavoriteBorder from the Material Design icons (hence /md)

Static Files

In the ./components/Photo.js component we are trying to access the image file from a static directory. All we need to do is to create that directory and add the image file, and Next.js takes care of the rest.

The end result so far:

Creating another page

We now need to be able to click on one of the above photos and see more information about them.

In the ./components/Photo.js component we had this code

<Link href={{ pathname: '/photo', query: { id: props.id } }}>
    <img src={`/static/art/${props.data.image}.jpg`} alt=""/>
</Link>

Which means, on click we go to /photo?id=0. So the Link component accepts a query where we can add our own query strings. In this case we simply get the id from the props and pass it on.

We then need to create ./pages/photo.js page.

import Layout from '../components/Layout';
import Photo from '../components/Photo';
import CommentsFunctionality from '../components/InteractiveButtons'
import getPhotos from '../data/data.js' 
const PhotoPage = (props) => (
    <Layout>
        <div className="container">
            <div className="display_image">
                <img src={`/static/art/${props.image.image}.jpg`} alt=''/>
                <CommentsFunctionality />
            </div>
            <div className="comments">
                <p className="tagline">{props.image.tagline}</p>
                {
                    props.image.comments.map((comment, key) => <p key={key}><strong>{comment.user}:</strong>{comment.body}</p>)
                }
                <form className="comment-form" >
                    <input type="text"placeholder="Author" />
                    <input type="text"  placeholder="comment..." />
                    <input type="submit" hidden />
                </form>
            </div>
        </div>
        <style>{` `}</style>
    </Layout>
)

PhotoPage.getInitialProps = async ({query}) => {
    // could fetch data here
    let {id} = {...query}
    let image = getPhotos().find(m => m.id == id)
    return { image } 
}

export default PhotoPage

The important functionality is inside getInitialProps. Amongst other information getInitialProps has access to the query string, hence we pass the as {query}, from which we get the id that comes from the index page. Then we just find the image object that has the same id and pass it as the component props.

That's the only reason I added the data in a separate file (at ./data/data.js). The most basic way of showing how getInitialProps could fetch data based on the query strings. The fetch url would look something like this fetch("http:.../" + id)

The single photo page is done:

Conclusion

As it can easily be seen this was not the best approach when it comes to handling data. We would really need to add react components and make use of react's component life cycle. Though I would argue even that would fall short compared to redux.

In the next tutorial, as I said, we'll use react components, fetch the exact same data from an API and get the likes and comments more dynamicly.

Meanwhile you can get all this code in github (branch 'part1')

Introduction to Next.js - fetching data from API

aurel kurtula ・ Aug 24 '18 ・ 5 min read

#nextjs #node #react #tutorial

Creating a movie website with GraphQL and React - part two

aurel kurtula — Mon, 09 Apr 2018 16:20:24 +0000

In part one we created the GraphQL API. Now we are going to create a react application that makes use of that API.

Before we move on, just because I thought it to be cool, we could use an HTTP client, like axios, to make requests to our GraphQL server! Check this out:

const query = `{
    newMovies {
      id
    title
    }  
}`
const url = 'http://localhost:4000/graphql?query='+query;

axios.get(url)
  .then(res => console.log(res.data.data.newMovies))

If you are interested, you can see that setup in action by paying attention to the url changes when using the graphQL interface - we worked on in part one

However, to make production easier and pleasant, instead of using an HTTP client there are GraphQL clients which we can use.

There are few clients to pick from. In this tutorial I am going to use the Apollo Client. Apollo provides a graphQL server as well but we already created that with express-graphql so we are not using that part of Apollo, but the Apollo Client, as the name suggests is the part which gives us the ability to write GraphQL in react.

In a nut shell

If you want to follow along you should clone the repository from github, checkout the branch name Graphql-api and since we're going to focus on react side now, all the code is going to be writen in the client directory, which is the react application code.

Clearly this is not a beginner's tutorial. If you don't know react but are interested in learning the basics I've writen an introduction to it.

First install the following packages.

npm install apollo-boost react-apollo graphql-tag graphql --save

The game plan is to wrap our react app with an ApolloProvider which in turn adds the GraphQL client into the react props. Then make graphQL queries through graphql-tag.

At the moment, in ./client/index.js you see this setup

import React from 'react';
import ReactDOM from 'react-dom';
import './style/style.scss';
const App = () => {
  return <div>Hello World2</div>
}
ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

First step, wrap the entire app with the ApolloProvider. The provider also needs a GraphQL client to pass to react.

import { ApolloProvider, graphql } from 'react-apollo';
...
const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider> ,
  document.querySelector('#root')
);

The ApolloClient requires a uri if the GraphQL server doesn't point at /graphql. So in our case leaving it out and just using new ApolloClient() would work

Now that we have access to the client we can make queries llike so:

import { ApolloProvider, graphql } from 'react-apollo';
import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';

const AppComponent = (props) => {
  if(props.data.loading) return '<div>loading</div>';
  return <div>{props.data.newMovies[0].title}</div>
}
const query = gql`{ newMovies { title } }`;
const App = graphql(query)(AppComponent)

We wrap the AppComponent with graphql, we also inject the query into the props so then props.data.newMovies gives us the movie results.

Let's get started

Because the application we are building is bigger then the above example of displaying a single title, lets split it out.

Start from ./client/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
import { HashRouter, Switch, Route } from 'react-router-dom'
import NewMovies from './components/NewMovies';
import './style/style.scss';
const client = new ApolloClient();
const Root = () => {
  return (
    <HashRouter >
      <ApolloProvider client={client}>
      <Switch >
        <Route exact path="/" component={NewMovies} />
      </Switch>
      </ApolloProvider>
    </HashRouter>
  )
}
ReactDOM.render(
  <Root />,
  document.querySelector('#root')
);

Simple, a couple of routes. the imported component (NewMovies) don't exist yet but that's all the code required in ./client/index.js.

Again, all the components that we would ever use would be specified within the Switch component. Therefore the entire app is wrapped with in the ApolloProvider, exactly the same as in the nutshell section.

Getting top movies

Let's create a file at ./client/components/NewMovies.js, and start by importing the required packages

import React, { Component} from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

Next, inject the newMovies GraphQL query results into the NewMovies Component

class NewMovies extends Component {
...
}
const query = gql`
{
    newMovies {
        id
        poster_path
        title
    }
}
`
export default graphql(query)(NewMovies);

With that setup, an object array gets injected into the NewMovies component props and can be accessed by this.props.data.newMovies. Let's make use of them:

class NewMovies extends Component {
    Movies(){
        return this.props.data.newMovies.map(movie => {
            return (
                <article key={movie.id} className="movie_list">
                    <img src={movie.poster_path} />
                    <h1>{movie.title}</h1>
                </article>
            );
        })
    }
    render() {
        if(this.props.data.loading) return <div>loading</div>
        return this.Movies()
    }
}

There we have it. Things to note are

The react component loads before the newMovies results are fetched.
graphql gives us a loading property which is set to true whilst data is fetched, and false when the data is ready to be used

Before we move on to another component, lets wrap the movie posters with an anchor so that we get more information when one poster is selected.

To do so we'll use the Link component from the react-router-dom package.

import { Link } from 'react-router-dom'

class NewMovies extends Component {
    Movies(){
        return this.props.data.newMovies.map(movie => {
            return (
                <article key={movie.id} className="movie_list">
                    <Link to={"/info/"+movie.id}> 
                        <img src={movie.poster_path} />
                    </Link>
    ...

Whenever a poster is clicked we are directed to /info/1 for example.

We need to head back to ./client/index.js and add a router which catches that route.

...
import MovieInfo from './components/MovieInfo';
...
const Root = () => {
  return (
    <HashRouter >
      <ApolloProvider client={client}>
      <Switch >
        <Route exact path="/" component={TopMovies} />
        <Route exact path="/info/:id" component={MovieInfo} />
      </Switch>
      ...

Of course, that's the power of react routing (covered here before).

Let's work on `MovieInfo` Component

Start by creating the file at ./client/components/MovieInfo.js then add the following:

import React, { Component } from 'react'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'
class MovieInfo extends Component {
    render(){
        if(this.props.data.loading) return <div>loading</div>
        return (
            <div>{this.props.data.movieInfo.title}</div>
        )
    }
}
const query = gql`
{movieInfo(id: "284054") {
        title
}}`;

export default graphql(query)(MovieInfo);

It sort of works right?

We are querying an id that we hard coded and that's not what we want, instead we want to pass an ID from our react component props to the graphql query. The react-apollo gives us a Query component that enables us to do that.

import { Query, graphql } from 'react-apollo'
class MovieInfo extends Component {
    render(){
        const id = this.props.match.params.id;
        return (
            <Query query={query} variables={{id}} >
            {
                (({loading, err, data}) => {
                    if(loading) return <div>loading</div>
                    return (
                        <div>{data.movieInfo.title}</div>
                    )
                })
            }
            </Query>
        )
    }
}
const query = gql`

query MovieInfo($id: String) {
    movieInfo(id: $id) {
        title
      }
  }
`;

Almost the exact same thing but with Query we are able to pass it variables.

Now let's develop the rest of the component. Inside the Query return the following code

return(
    <div>
        <header style={{backgroundImage:  'url("https://image.tmdb.org/t/p/w500///'+data.movieInfo.poster_path+'")'}}>
            <h2 className="title">{data.movieInfo.title}</h2>
        </header>
        <article className="wrapper">  
            <p className="description">{data.movieInfo.overview}</p>                
            <div className="sidebar">
                <img src={"https://image.tmdb.org/t/p/w500///"+data.movieInfo.poster_path} className="cover_image" alt="" />
                <ul>
                    <li><strong>Genre:</strong> {data.movieInfo.genres}</li>
                    <li><strong>Released:</strong>{data.movieInfo.release_date}</li>
                    <li><strong>Rated:</strong> {data.movieInfo.vote_average}</li>
                    <li><strong>Runtime:</strong> {data.movieInfo.runtime}</li>
                    <li><strong>Production Companies:</strong> {data.movieInfo.production_companies}</li>
                </ul>
                <div className="videos">
                    <h3>Videos</h3>
                    {/* videos */}
                </div>
                    {/* reviews */} 
            </div>
                {/* credits */}                                         
        </article>
    </div>
)

As you can see we are trying to access query properties which we haven't requested. If you run that it will give you a 404 error as the requests fail. Hence, we need to update the query to request more then the title property:

query MovieInfo($id: String) {
    movieInfo(id: $id) {
        title
        overview
        poster_path
        genres
        release_date
        vote_average
        runtime
        production_companies
      }
  }
`;

With that update and with the css that is going to be available in the git repository, the section we've been working on would look something like this:

As you can see in the code comments we need to add videos, reviews and credits on the page.

Adding videos

Remember the way we designed the GraphQL query in part one gives us the ability to fetch the videos within the movieInfo query. Let's do that first:

const query = gql`
query MovieInfo($id: String) {
    movieInfo(id: $id) {
        ...
        videos {
            id 
            key
        }
      }
  }
`;

These videos come as an array - as sometimes there's more then one. So the best way to deal with these arrays is to create a separate method inside the MovieInfo component and let it return all the videos.

class MovieInfo extends Component {
    renderVideos(videos){
        return videos.map(video => {
            return (
                <img key={video.id} 
                    onClick={()=> this.videoDisplay(video.key)} 
                    className="video_thumbs" 
                    src={`http://img.youtube.com/vi/${video.key}/0.jpg`}
                />
            )
        })
    }
    render(){
        ...
        {/* videos */}
        {this.renderVideos(data.movieInfo.videos)}
        ...

As we've covered in the first tutorial the key in the videos object refers to the youtube video ID. Youtube gives us the ability to use a screenshot image using that particular format (passed in the src attribute). also, as we previously mentioned, we took the ID exactly because we knew we need something unique for the key - required by React.

When the user clicks on these thumbnail images I want to load a youtube video in the screen, hence onClick={()=> this.videoDisplay(video.key)}. Lets create that functionality.

The way we are going to implement this is by changing the state

class MovieInfo extends Component {
    constructor(){
        super();
        this.state={
            video: null
        }
    }
    videoDisplay(video){
        this.setState({
            video
        })
    }
    videoExit(){
        this.setState({
            video: null
        })
    }
    ...

When the page loads video state is null, then when the thumbnail is clicked and videoDisplay is triggered, video state takes the youtube video key as a value. As we'll see, if the videoExit method is triggered, the video state resets back to null

Finally we need a way to display the video upon state change, so lets create another method. Just under the above methods, add this method:

videoToggle(){
    if(this.state.video) return(
        <div className="youtube-video">
            <p onClick={() => this.videoExit()}>close</p>
            <iframe  width="560" height="315" src={`//www.youtube.com/embed/${this.state.video}` } frameborder="0" allowfullscreen />
        </div>
    ) 
}

Then simply have it render anywhere on the page

<div className="videos">
    {this.videoToggle()}
    <h3>Videos</h3>
    {this.renderVideos(data.movieInfo.videos)}
</div>

Again, if the video state is null, {this.videoToggle()} does nothing. If the state isn't null - if video has a key, then {this.videoToggle()} renders a video.

Adding Movie credits and reviews

I decided to put the movie reviews and movie credits in their own separate component. Let's create the empty component files, import and use them inside the MovieInfo component and also update the query.

Inside ./client/components/MovieInfo.js add these changes

import MovieReviews from './MovieReviews'
import MovieCredits from './MovieCredits'

class MovieInfo extends Component {
...
{/* reviews */}
    <MovieReviews reviews={data.movieInfo.movieReviews} />  
    </div>
        {/* credits */}
        <MovieCredits credits={data.movieInfo.movieCredits} />              
</article>
}
...

const query = gql`

query MovieInfo($id: String) {
    movieInfo(id: $id) {
        ...
        movieReviews {
            id
            content
            author
        }
        movieCredits{
            id
            character
            name
            profile_path
            order
          }
      }
  }
`;
...

We get the data from the movieReviews and movieCredits query, we pass them to their respective components. Now we just quickly display the data

Movie credits component

Add the following code to ./client/components/MovieCredits.js

import React, { Component } from 'react'
export class MovieCredits extends Component {
    renderCast(credits){
        return credits.map(cast => {
            return (
                <li key={cast.id}>
                    <img src={`https://image.tmdb.org/t/p/w500//${cast.profile_path}`} />
                    <div className="castWrapper">
                        <div className="castWrapperInfo">
                            <span>{cast.name}</span>
                            <span>{cast.character}</span>
                        </div>
                    </div>
                </li>
            )
        })
    }
  render() {
    return (<ul className="cast">{this.renderCast(this.props.credits)}</ul>)
  }
}
export default MovieCredits

Nothing new to explain from the above

Movie reviews component

Add the following code to ./client/components/MovieReviews.js

import React, { Component } from 'react'
class MovieReviews extends Component {
    renderReviews(reviews){
        return reviews.map(review => {
            return (
                <article key={review.id}><h4>{review.author} writes</h4>
                    <div>{review.content}</div>
                </article>
            )
        })
    }
    render() {
        return(
            <div className="reviews">
                {this.renderReviews(this.props.reviews)}
            </div>  
        )
    }
} 
export default MovieReviews;

And that's it. This is how the credits, videos and reviews would appear.

Conclusion

The full application, such as it stands can be found at the same repository, and you can view the demo here. It has three branches react-app branch and the master branch have the full code, each tutorial building on top of each other. Where as the Graphql-api branch has the code covered in the first tutorial

Creating a movie website with GraphQL and React - part one

aurel kurtula — Tue, 03 Apr 2018 13:10:07 +0000

As I hope I explained on my previous tutorial GraphQL is another way of creating an API. Using GraphQL instead of a JSON or XML API you are giving the consumers of your API the ability to query the data they require instead of giving them everything regardless of their requirements.

In the following set of tutorials I am going to go through how we can create a GraphQL API by gathering data from existing JSON APIs and then how we can consume the newly GraphQL API using react.

About the JSON API

We'll use themoviedb "is available for everyone to use". It gives us access to their movie collection. So instead of creating our own movie database we'll access theirs through their JSON API. All you need is to create an account with them so that you get your API key - something you'll need in order to work through this series of tutorials.

In order to create our application, these are all the requests we'll need to make (https://api.themoviedb.org/3/movie/ being the root for all of them):

/${id}/videos?api_key=${YOUR_API}&language=en-US
/now_playing?api_key=${YOUR_API}&language=en-US&page=1
/${id}?api_key=${YOUR_API}&language=en-US&page=1
/${id}/reviews?api_key=${YOUR_API}&language=en-US&page=1
/${id}/credits?api_key=${YOUR_API}&language=en-US&page=1

As you can imagine we can ignore GraphQL and go straight into creating the react app and have it make the five get requests when needed. However, we are going to use GraphQL to handle the above. Hence the react developers (even though we'll do both) can make one request to the GraphQL server and pick whatever is needed.

Again, if you want to follow along go to themoviedb and create the API key you'll need soon. Further, you're welcome to use my minimal-node-environment setup, it doesn't have any code related to what we need to learn here, it just sets the environment. You can read how that environment is created here.

Step One: Linking GraphQL to Express

The following is covered in the first graphql tutorial

We need to get express to use GraphQL at a specific path. The full code at ./server.js should look like this

import express from 'express'; 
import dotenv from 'dotenv';
//...
import expressGraphQL from 'express-graphql';
import schema from './schema/schema'; // our schema file
dotenv.config()
const app = express();
app.use(webpackMiddleware(webpack(webpackConfig)));

app.use('/graphql', expressGraphQL({
  schema,
  graphiql: true
}))

app.listen(4000, () => {
  console.log('Listening');
});

From this point on, everything we'll code is going to be contained within ./schema/schema.js so create that file.

Finally for this first step create a .env file in the root and add your movie API like so

API=api-string-without-quotes

All that's left is to install the packages we required above

npm i -S express express-graphql graphql dotenv

Step Two: Create API endpoint for new movies

Inside ./schema/schema.js we are able to get data from other sources, be they databases or external APIs and use them to build our own GraphQL API. Here we'll get data from five different JSON API endpoints and architect out GraphQL in a way where other would consume it as if the data comes from one call, or rather without caring where the original data comes from.

We'll start by pulling data from themoviedb concerning the movies that are currently in the cinema

https://api.themoviedb.org/3/movie/now_playing?api_key=${YOUR_API}&language=en-US&page=1

If you provide your own API and navigate to the above URL, you'll see each movie would be formatted like so:

{
    results: [
            {
            vote_count: 3742,
            id: 284054,
            video: false,
            vote_average: 7.3,
            title: "Black Panther",
            popularity: 246.001551,
            poster_path: "/uxzzxijgPIY7slzFvMotPv8wjKA.jpg",
            original_language: "en",
            original_title: "Black Panther",
            genre_ids: [28, 12, 14, 878],
            backdrop_path: "/b6ZJZHUdMEFECvGiDpJjlfUWela.jpg",
            adult: false,
            overview: "King T'Challa returns ....",
            release_date: "2018-02-13"
        }
    ]
}

As the architects of our GraphQL API we decide which of that information is useful and which is not. We're also able to rename any of the key names.

Lets work on ./schema/schema.js

The above JSON result helps us get into GraphQL reasoning.

We know that each movie is an object
We'll need an ID and that's an integer
We'll also take the poster_path and title, and those are both strings
We aren't interested in anything else

Let's tell GraphQL that that's what a newly released movie should be.

import {
    GraphQLObjectType,
    GraphQLString,
    GraphQLInt,
    GraphQLSchema, // we'll use them for the RootQuery
    GraphQLList // we'll use them for the RootQuery
} from 'graphql';

const NewMoviesType = new GraphQLObjectType({
    name: 'NewMovies',
    fields:{
        id: {type: GraphQLInt},
        poster_path: {type: GraphQLString},
        title: {type: GraphQLString},

    }
})

As you can imagine that's just one half of the complete code. That's just saying we need an Object with an integer and two strings.

Finally we need to feed it the data inside the Root Query. As I said in the tutorial where I introduced GraphQL, a "root query is the entry point to GraphQL, it is the thing that fires first and in turn exposes other resources".

import axios from 'axios';
...
const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields:{
        newMovies: {
            type: new GraphQLList(NewMoviesType),
            resolve() {
              return axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=${process.env.API}&language=en-US&page=1`)
              .then(res => {
                  const movies = res.data.results;
                  movies.map(movie=> movie.poster_path = "https://image.tmdb.org/t/p/w500"+movie.poster_path
                 )
                  return movies
              })
            }
          }          
    }
})

As we'll see, inside the RootQuery we'll have everything that the GraphQL API is going to make accessible. So far the Root Query has one field called newMovies. That field is going to be an object, the blueprint of which we already created. In reality, it's not going to be one object, but an array of movie objects, hence GraphQLList(NewMoviesType)

Finally the resolve method is what feeds data to our object.

We are using axios to fetch the data from the external API (equally, if the data was stored in a database it would be retrieved within the resolve method).

Because the movie API we are fetching from is json, it works so well that simply returning the results would have worked fine:

resolve() {
    return axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=${process.env.API}&language=en-US&page=1`)
    .then(res => res.data.results )
}

But of course we needed to modify the value of the poster_path since the relative path would not have been of any use.

Finally we export the root query and run the project (npm start)

export default new GraphQLSchema({
    query: RootQuery
})

If you've been following along, navigating to http://localhost:4000/graphql and adding the query below, you should have gotten all the latest movies.

{
    newMovies{
    id
    title
    poster_path
  }
}

One got, four to come!

Step Three: Get information for a single movie

Think about it, the above query gives us all the new movies. Next, one might want more information for any one of those movies.

The existing API endpoint for that is

https://api.themoviedb.org/3/movie/${id}?api_key=${YOUR_API}&language=en-US

The result is one object with all the information for a specific movie. Let's create the GraphQL Object as we did before.

const MovieInfoType = new GraphQLObjectType({
    name: 'MovieInfo',
    fields: {
        id: {type: GraphQLInit},
        overview: {type: GraphQLString},
        title: {type: GraphQLString},
        poster_path: {type: GraphQLString},
        genres: {type: GraphQLString},
        release_date: {type: GraphQLString},
        vote_average: {type: GraphQLString},
        production_companies: {type: GraphQLString},
        vote_average: {type: GraphQLString},
        runtime: {type: GraphQLString}
    }
})

As you can see, once you get your head around it, it's all repetitive.

We then need to add it inside the Root Query.

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields:{
        topMovies: {...},
        movieInfo: {
            type: MovieInfoType,
            args: {id: {type: GraphQLString}},
            resolve(parentValue, args) {
                return axios.get(`https://api.themoviedb.org/3/movie/${args.id}?api_key=${process.env.API}&language=en-US&page=1`)
                .then(res => {
                    const movie = res.data;
                    movie.genres = movie.genres.map(g => g.name).join(', ')
                    movie.production_companies = movie.production_companies.map(c => c.name).join(', ')
                    movie.runtime+= ' min.'
                    return movie
                })
            }
        }
    }
})

This is a lot more complex then the topMovies query but not hard to understand.

First we specify that for a query to movieInfo an id should be provided as a string. That's of course because the original API requires it. Note how we don't make use of parentValue but the required id get's added into the args object.

In the original API, the genres and production_companies and represented as arrays:

genres: [
    {
        id: 18,
        name: "Drama"
    },
    {
        id: 10751,
        name: "Family"
    }
],
production_companies: [
    {
        id: 9195,
        logo_path: "/ou5BUbtulr6tIt699q6xJiEQTR9.png",
        name: "Touchstone Pictures",
        origin_country: ""
    }
],

The GraphQL Object which we created requires both the genres and production companies to be string (not that we couldn't specify them as arrays). Hence joining only their names.

Similarly, the movie length is given in minutes so I decided to append min. to the original string - and argument can be made that that's not a good idea. When we create the interface we might want to convert those minutes into human readable time and so by adding the min. we are giving react developers more work, but heck this is fun!

Step Four: Get Movie trailers

I'll tell you, this themoviedb.org API is fantastic. Amongst other things that we'll not cover here at all, it also gives us movie trailers. They can be accessed at

https://api.themoviedb.org/3/movie/${id}/videos?api_key=${YOUR_API}&language=en-US

The result being a reference to an array of youtube videos

{
    id: 43535,
    results: [
        {
            id: "533ec6a1c3a3685448004f82",
            iso_639_1: "en",
            iso_3166_1: "US",
            key: "e7bD5BNqfwY",
            name: "A Simple Twist of Fate - Hallmark Channel",
            site: "YouTube",
            size: 360,
            type: "Trailer"
        }
    ]
}

I have to say when I saw that I was slightly over excited! Anyway, let's create the video GraphQL object. We know that the only useful information there is the key, but simply to make developing a react App easy, we know that the id is handy, hence:

const VideoType = new GraphQLObjectType({
    name: 'Video',
    fields:{
        id: {type: GraphQLString},
        key: {type: GraphQLString}

    }
})

Now, if you haven't seen the brightness of GraphQL already, be prepared to be blinded because this is where I think GraphQL shines even brighter!

If we follow the pattern we've used so far, movieVideo would be another query in the root. But no, in reality, we know, or we're going to decide, that developers that will consume our GraphQL API are going to want the trailers when they request a single movie.

So we want the trailers to be accessible from within the movieInfo query, hence the VideoType array will be part of the MovieInfoType object!

const MovieInfoType = new GraphQLObjectType({
    name: 'MovieInfo',
    fields: {
        id: {type: GraphQLString},
        ...
         videos: {
             type: new GraphQLList(VideoType),
             args: {id: { type: GraphQLString } },
             resolve(parentValue, args) {
                return axios.get(`https://api.themoviedb.org/3/movie/${parentValue.id}/videos?api_key=${process.env.API}&language=en-US`)
                .then(res => res.data.results)
             }
         }
    }
})

Note, we do nothing to the RootQuery, we instead add a videos field inside the MovieInfoType and we resolve it there. The movie id required to fetch the specific videos is retrieved from the siblings of video hence fields.id is referred to as parentValue.id.

If we navigate to http://localhost:4000/graphq and add the following query:

{
    movieInfo(id:"284054"){
        title 
        videos{
            id
            key
        }
    }
}

You get a bunch of Black Panther videos.

Now, that is cool! (both GraphQL and the movie)

Step five: Credits and reviews

Finally let's add movie reviews and movie cast into our GraphQL API.

const MovieCreditsType = new GraphQLObjectType({
    name: 'MovieCredits',
    fields:{
        id: {type: GraphQLString},
        character: {type: GraphQLString},
        name: {type: GraphQLString},
        profile_path: {type: GraphQLString},
        order: {type: GraphQLString}
    }
})
const MovieReviewsType = new GraphQLObjectType({
    name: 'MovieReviews',
    fields:{
        id: {type: GraphQLString},
        content: {type: GraphQLString},
        author: {type: GraphQLString},
    }
})

Similar to the video trailers, the movie credits and movie reviews are only meaningful in the context of the movie they are related to. So we'll add them inside the MovieInfoType Object.

const MovieInfoType = new GraphQLObjectType({
    name: 'MovieInfo',
    fields: {
        id: {type: GraphQLString},
        ...
         videos: { ... },
         movieReviews: {
            type: new GraphQLList(MovieReviewsType),
            args: {id: {type: GraphQLString}},
            resolve(parentValue, args) {
              return axios.get(`https://api.themoviedb.org/3/movie/${parentValue.id}/reviews?api_key=${process.env.API}&language=en-US&page=1`)
              .then(res =>  res.data.results)
            }
          },
          movieCredits: {
            type: new GraphQLList(MovieCreditsType),
            args: {id: {type: GraphQLString}},
            resolve(parentValue, args) {
              return axios.get(`https://api.themoviedb.org/3/movie/${parentValue.id}/credits?api_key=${process.env.API}&language=en-US&page=1`)
              .then(res =>  res.data.cast.filter(cast => cast.profile_path ) )
            }
          }
    }
})

Final Words

As you have gathered, just because we used, say the VideoType inside the MovieInfoType object, we can easily duplicate the code and add it as the child RootQuery fields

const MovieInfoType = new GraphQLObjectType({
    name: 'MovieInfo',
    fields: {
        id: {type: GraphQLString},
        ...
         videos: { ... },
         ...
    }
})
const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields:{
        videos: {
            type: new GraphQLList(VideoType),
            args: {id: { type: GraphQLString } },
            resolve(parentValue, args) {
               return axios.get(`https://api.themoviedb.org/3/movie/${args.id}/videos?api_key=${process.env.API}&language=en-US`)
               .then(res => res.data.results)
            }
        },
        newMovies: { ... } ,
        movieInfo: { ... }         
    }
})

Hence, videos can then be queried in two ways

{
    videos(id:"284054") {
      id
    key
    }
}

Or through a movie

{
   movieInfo(id:"284054"){
    videos {
      id
      key
    }
  }
}

That's all there's is. That makes up our GraphQL API. The full code is on github, the branch Graphql-api holds the code explored here, where as the master branch is subject to change based on the next tutorial - where well consume this new API in a react app.

You can play with a live demo here

Forem: aurel kurtula

What are Promises in Javascript ?

solution without a callback

Promises remove the need for a callback

Scope

Using SVN to manage your code snippets in GitHub!

Use terminal/shell methods as shortcuts

Conclusion

Playing with GraphQL yoga and mongoose

Get started

A bit deeper

Connecting to mongo database

Mongo and GraphQL

Creating a text editor in Electron: part 3 - Setting Preferences

Custom header

Initializing the preferences window

Saving the colour preferences

Reseting colors.

Applying the saved colour to the main window

Conclusion

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula ・ Sep 5 '18

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

Creating a text editor in Electron: part 2 - writing files

Creating a new document

Saving changes

Creating a text editor in Electron: part 1 - Reading files

aurel kurtula ・ Sep 5 '18

Creating a text editor in Electron: part 3 - Setting Preferences

aurel kurtula ・ Sep 12 '18

Creating a text editor in Electron: part 1 - Reading files

Reading system files

Creating a text editor in Electron: part 2 - writing files

aurel kurtula ・ Sep 9 '18

What are some projects or exercises I can do to practice HTML and CSS?

First: Pen and Paper!

Step two

Step three

Back to the top

Introduction to Next.js - adding express and mongo to the project

Lets get started

Running the app

The end.

Introduction to the basics of Next.js

aurel kurtula ・ Aug 22 '18

Introduction to Next.js - fetching data from API

aurel kurtula ・ Aug 24 '18

Introduction to Next.js - fetching data from API

Introduction to the basics of Next.js

aurel kurtula ・ Aug 22 '18

Fetching data from API

Functionality to like a photo

Getting individual photograph

Add comments to the image

Introduction to the basics of Next.js

Let's get started

Styling

Adding components

Working with some data.

Static Files

Creating another page

Conclusion

Introduction to Next.js - fetching data from API

aurel kurtula ・ Aug 24 '18 ・ 5 min read

Creating a movie website with GraphQL and React - part two

In a nut shell

Let's get started

Getting top movies

Let's work on MovieInfo Component

Adding videos

Adding Movie credits and reviews

Movie credits component

Movie reviews component

Conclusion

Creating a movie website with GraphQL and React - part one

About the JSON API

Step One: Linking GraphQL to Express

Step Two: Create API endpoint for new movies

Step Three: Get information for a single movie

Let's work on `MovieInfo` Component