Adding Literals

In the next steps we will build an interface that allows you to:

• create a list of persons with their names
• create friendship connections between those people

The resulting interface will look something like this:

Although we will generally build on previous steps, feel free to comment out or remove the code from the previous step in this case.

Using literal values from user input

Let's keep track of a list of persons with their names.

First, let's create a new node to represent the hasName property. Just like we did with hasFriend before, put this variable before the declaration of the Home component.

//let hasName = NamedNode.create();
let hasName = NamedNode.create();

Next, let's track an array of persons (nodes) in react state:

let [persons, setPersons] = useState<NamedNode[]>([]);

Note that <NamedNode[]> here is telling typescript that the value of this state will be an array of NamedNodes.

Next create a simple <form> in the JSX that the Home component returns. Add an <input> field where the user can fill in a name and add a submit button to the form. Add an <input> field where the user can fill in a name and add a submit button to the form.

let [newName, setNewName] = useState('');

<form onSubmit={createNewPerson}>
  <input value={newName} onChange={(e) => setNewName(e.currentTarget.value)} type="text" placeholder="name" />
  <input type="submit" value="Add new person" />
</form>

Let's implement createNewPerson. Make it create a new NamedNode for the new person to be created. Then make it connects this new node with the hasName property to its own name. The name currently is a string, but it will need to be converted to a Literal to be stored in the graph.

import {Literal} from 'lincd/lib/models';

let createNewPerson = function (e) {
  //create a new named node for the new person
  let newPerson = NamedNode.create();
  //create a new edge from this new person to its own name, using the hasName property as the connecting edge
  //to store a string in the graph, we use a Literal node.
  newPerson.set(hasName, new Literal(name));

  //prevent form from submitting and reloading the page
  e.preventDefault();
  return false;
};

We can also use setValue() instead of set(), which works the same except that it takes a string as value and creates the literal for us:

newPerson.setValue(hasName, name);

Finally, lets store the new person in the set of person nodes

let createNewPerson = function (e) {
  //create a new named node for the new person
  let newPerson = NamedNode.create();
  //create a new edge from this new person to its own name, using the hasName property as the connecting edge
  //to store a string in the graph, we use a Literal node.
  newPerson.setValue(hasName, newName);

  //add the person to the array and update the state
  setPersons(persons.concat(newPerson));

  //prevent form from submitting and reloading the page
  e.preventDefault();
  return false;
};

Showing data from the graph back on the screen

Ok, time to display some actual data from the graph on the screen.

Add a <h1> tag in the top of your render method saying 'Persons', and print out the name of each person in a list below it.

To do so, loop over persons with persons.map() and use person.getValue(hasName) to get back the value of their name:

<ul>
  {persons.map((person) => {
    return <li key={person.uri}>{person.getValue(hasName)}</li>;
  })}
</ul>

Note: see this page for a refreshment on how to loop over items in React

You should now be able to see the list of names fill as you submit new names.

Example code for this step:

import {useState} from 'react';
import {NamedNode} from 'lincd/lib/models';

//the properties we will use to connect nodes are also named nodes!
let hasFriend = NamedNode.create();
let hasName = NamedNode.create();

export default function Home() {
  let [newName, setNewName] = useState('');
  let [persons, setPersons] = useState([]);

  let createNewPerson = function (e) {
    //create a new named node for the new person
    let newPerson = NamedNode.create();
    //create a new edge from this new person to its own name, using the hasName property as the connecting edge
    //to store a string in the graph, we use a Literal node.
    newPerson.setValue(hasName, newName);

    //add the person to the array and update the state
    setPersons(persons.concat(newPerson));

    e.preventDefault();
    return false;
  };
  return (
    <div>
      <h1>Persons</h1>
      <form onSubmit={createNewPerson}>
        <input value={newName} onChange={(e) => setNewName(e.currentTarget.value)} type="text" placeholder="name" />
        <input type="submit" value="Add new person" />
      </form>
      <hr />
      <ul>
        {persons.map((person) => {
          return <li key={person.uri}>{person.getValue(hasName)}</li>;
        })}
      </ul>
    </div>
  );
}