2.0 Journal - GiovanniKaaijk/frontend-applications GitHub Wiki

At Monday we started off at the Tropenmuseum. We were told some information about the museum and our project. We also had the opportunity to walk through the museum for about an hour.

On Tuesday we had to choose an framework, we had the following options:

• React
• Angular
• Vue
• Ember
• Wilde west (choose your own framework)

I chose React as my framework, I chose this framework because I heard a lot about this and i knew it was a nice framework to work with.

As team React, we did some research on React. I looked for the information about why React is this popular and why I would use it. The biggest advantage of using React is the virtual DOM, this DOM only changes the elements that are changed. After I did the research, I started completing React's tutorial, I made a tic-tact-toe game to get to know React.

I created a concept to complete in the coming weeks. I want to make a website where travelers can find their favorite place, here they can see all the objects they could have found on that place over the different years.

I had the feeling React's tutorial didn't gave me enough knowledge to build my own app. That's why i completed a React crash course tutorial. I pitched my concept to Cindy and had a SPARQL workshop by Ivo. The workshop was very useful to gain more knowledge about how to retrieve the data with SPARQL.

On Thursday I started making my own app. I started creating the layout, when this was ready, I wanted to add the query. First I implemented a static query that the user could not edit. When this query was done, I wanted to create an input field where the user could change the query. I did this by using states in the query. After completing the query, I wanted the user to be able to navigate through the page, so I added routing. After the routing was completed, I went back to the query and tried to save the data from the API to a state, this was difficult at first because the retrieved data contained some errors. I have created a filter to clean up the data and save it in the state afterwards.

The filter:

for (let i = 0; i < result.length; i++) {
      json.results.bindings[i].year.value = parseInt(
        json.results.bindings[i].year.value
      );
      if (unique.includes(json.results.bindings[i].cho.value)) {
        delete json.results.bindings[i];
      } else {
        unique.push(json.results.bindings[i].cho.value);
    }

The data I stored in the state yesterday, is now displayed on the webpage. I still have to add some sort of lazy loading, because now more than 200 images are loading.

I helped Victor, Daan and Deinver on queries and data filtering. I explained how to retrieve the data through the API and store this data in the state of the app.

The displayed data:

<Render
   render={this.state.render}
/>

const uri = this.props.render.uri;
const title = this.props.render.title;
const image = this.props.render.img;

<h2>{title}</h2>
<div className="image">
  <img src={image} alt={title} />
</div>

I have changed it so that the displayed data now becomes pinpoints, when a user clicks on a pinpoint, the data is displayed on the webpage. In this way, the user does not have to load more than 200 images. I also added a filter to the search query so that the user can filter on data types. This was quite difficult to achieve because the search query gives no results when the filter is empty. To prevent this, I checked if any filters were checked, if this is the case, a string will be added to the query. Users still had to navigate to the second page after searching their favorite place, so I wanted to add an automatic route when a user submits the form. I struggled to complete this at first, but later discovered the withRouter provided by the NPM package react-router-dom. I added a function to the onSubmit handler to change the route when a user submits the form.

Displaying the pinpoints:

return this.props.objects.map(object => ( 
  <SingleItem
     key={object.cho.value}
     object={object}
     renderData={this.props.changeData}
  />
));

In the morning I started updating my readme because there was a peer feedback coming. To make a good readme I used make a readme. After I finished making the readme I started tried to create a fix for the like function. Currently, when a user presses the like button, the app crashes, I had no idea why at this point. It turned out that since I used two different queries, the state got reset when a user clicked on another object, so the state of the previous object was not saved and the data disappeared. I have changed this so that the state is saved when a user presses the like button.

My page was empty when the query was not yet completed. To give the user feedback, I have added a switch. If no data can be displayed, a hint appears.

The switch:

{title ? {render} : 'Klik op een object om weer te geven'}

On Wednesday I had done most of my CSS changes so far, while doing so, I thought it would be more fun for the user to have some sort of interaction. I added a heart animation when a user likes the item. Through this animation I discovered a bug in my app. When the user switches between different objects, the like is reset. To solve this, I have added an array that keeps track of all the liked objects.

Currently, the input field is cleared when a user searches for a place. Because the concept is about a user's favorite vacation spot, I thought it would be better to store the input value. I added local storage to the form, when a user goes to the page again, the form is already filled in.

I tried deploying on Heroku and Netlify but both did not work so far.

Local storage:

componentDidMount(){
    const place = localStorage.getItem('place')
    this.setState({place: place});
}
submit = e => {
    e.preventDefault();
    localStorage.setItem('place', this.state.place);
    this.props.place(this.state.place);
    this.props.history.push('/overview');
};

On Thursday my app was almost finished, so I mainly did documentation on this day. I tried to explain my process and read-me as easily to read as possible. The only thing missing in my app was the working timeline, when there are multiple objects from the same year, they are placed next to each other. Also the distance between objects was not correct based on dates, but this would be too much to fix today. If I had had more time, I would definitely have fixed this timeline to complete the app. Also the comments don't work like I would like them to work. The comments are not bound to an object at this moment, so they are being displayed at all object pages.