Latihan 1 – Menampilkan List All Genre

Setelah mempelajari modul sebelumnya, akan kita melakukan latihan pada modul ini.

Untuk latihan, tampilkan list semua genre seperti gambar berikut.

Hal-hal yang perlu dilakukan adalah:

• Pada frontend aplikasi React, menambahkan link Genre dan membuat component baru untuk menampilkan list genres.
• Pada backend aplikasi Go, menambahkan fungsi retrieve data genres dari database, membuat fungsi handler untuk genres dan menambahkan route.

Harap dicoba dahulu, jika bermasalah, silakan lihat bagian solusi.

Solusi

Bagian Backend

Pada aplikasi go backend, buka file cmd/api/animeModel.go, lalu tambahkan fungsi untuk menarik data genres dari database.

func (m *AnimeModel) Genres() ([]*genre, error) {
	ctx, cancel := context.WithTimeout(context.Background(), 3*time.Second)
	defer cancel()

	query := `SELECT id, genre_name
				FROM genres ORDER BY genre_name
	`

	rows, err := m.DB.QueryContext(ctx, query)
	if err != nil {
		return nil, err
	}
	defer rows.Close()

	var genres []*genre

	for rows.Next() {
		var g genre
		err = rows.Scan(
			&g.Id,
			&g.GenreName,
		)
		if err != nil {
			return nil, err
		}

		genres = append(genres, &g)
	}

	return genres, nil
}

Pada file cmd/api/animesHandlers.go, tambahkan fungsi berikut

func (app *application) getAllGenres(rw http.ResponseWriter, r *http.Request) {
	genres, err := app.models.Animes.Genres()
	if err != nil {
		app.errorJSON(rw, err)
		return
	}

	err = app.writeJSON(rw, http.StatusOK, genres, "genres")
	if err != nil {
		app.errorJSON(rw, err)
	}
}

Pada file cmd/api/routes.go tambahkan routing baru

router.HandlerFunc(http.MethodGet, "/v1/genres", app.getAllGenres)

Bagian Frontend

Pada frontend React, buka file src/app.js, lakukan penambahan Link dan route.

Pada element <nav> tambahkan link menu untuk genres.

<li className="list-group-item"><Link to="/genres">Genre</Link></li>

Pada element <Switch> tambahkan routes untuk genres.

<Route exact path="/genres"><Genres /></Route>

Berikut isi lengkap src/app.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Home from './components/Home';
import Animes from './components/Animes';
import Admin from './components/Admin';
import Genres from './components/Genres';
import Anime from './components/Anime';

export default function App() {
  return (
  <Router>
    <div className="container">
      <div className="row">
          <h1 className="mt-3">Anime Collection</h1>
          <hr className="mb-3"/>
      </div>
      <div className="row">
          <div className="col-md-2">
              <nav>
                  <ul className="list-group">
                      <li className="list-group-item"><Link to="/">Home</Link></li>
                      <li className="list-group-item"><Link to="/animes">Anime</Link></li>
                      <li className="list-group-item"><Link to="/genres">Genre</Link></li>
                      <li className="list-group-item"><Link to="/admin">Admin</Link></li>
                  </ul>
              </nav>
          </div>
          <div className="col-md-10">
            <Switch>              
              <Route path="/animes/:id" component={Anime} />
              <Route path="/animes"><Animes /></Route>
              <Route exact path="/genres"><Genres /></Route>
              <Route path="/admin"><Admin /></Route>
              <Route path="/"><Home /></Route>
            </Switch>          
          </div>
      </div>
    </div>    
  </Router>
  );
}

Buat component baru untuk menampilkan list genres, buat file components/Genres.js, lalu tambahkan code berikut

import React, {Component, Fragment} from "react";
import { Link } from "react-router-dom";

export default class Genres extends Component{
  state = {
    genres : [],
    isLoaded : false,
}

componentDidMount(){
    fetch("http://localhost:4000/v1/genres")
    .then((response) => response.json())
    .then((json) =>{
        this.setState({
            genres: json.genres,
            isLoaded: true,
        })
        console.log(json)
    })
}

render(){
    const {genres, isLoaded} = this.state;

    if(!isLoaded){
        return <p>Data is loading...</p>
    }else{
        return(
            <Fragment>
                <h2>Genre List</h2>
                <ul>
                    {genres.map((e) =>(
                        <li key={e.id}>
                            <Link to={{
                                pathname: `/genre/${e.id}`,
                                genrename: e.genre_name,
                                }}>{e.genre_name}</Link>
                        </li>
                    ))}
                </ul>
            </Fragment>
            
        );
    }
}
  }