spring-attic / tut-react-and-spring-data-rest

React.js and Spring Data REST :: A tutorial based on the 5-part blog series by Greg Turnquist
https://spring.io/guides/tutorials/react-and-spring-data-rest
883 stars 1.58k forks source link

My own version does not display entities in the table #116

Open madeofstardust opened 4 years ago

madeofstardust commented 4 years ago

Hi, I tried to adjust the schema to my own classes, but the table on the localhost:8080 remains empty, and localhost:8080/api displays Whitelabel Error Page.

My app.js:

'use strict';

// tag::vars[]
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
// end::vars[]

// tag::app[]
class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {all_stories: []};
    }

    componentDidMount() {
        client({method: 'GET', path: '/api/all_stories'}).done(response => {
            this.setState({all_stories: response.entity._embedded.all_stories});
        });
    }

    render() {
        return (
            <All_StoriesList all_stories={this.state.all_stories}/>
        )
    }
}
// end::app[]

// tag::employee-list[]
class All_StoriesList extends React.Component{
    render() {
        const all_stories = this.props.all_stories.map(all_story =>
            <All_Story key={all_story._links.self.href} all_story={all_story}/>
        );
        return (
            <table>
                <tbody>
                    <tr>
                        <th>Title:</th>
                        <th>ID:</th>
                    </tr>
                    {all_stories}
                </tbody>
            </table>
        )
    }
}
// end::employee-list[]

// tag::employee[]
class All_Story extends React.Component{
    render() {
        return (
            <tr>
                <td>{this.props.all_story.title_of_a_story}</td>
                <td>{this.props.all_story.ID}</td>
            </tr>
        )
    }
}
// end::employee[]

// tag::render[]
ReactDOM.render(
    <App />,
    document.getElementById('react')
)
// end::render[]

My All_stories class:

package com.greglturnquist.payroll;
import javax.persistence.*;
import java.util.List;
import java.util.Objects;

@Entity
@Table(name = "All_stories"

)

public class All_stories {

    @Column(name = "ID")
    private int ID;

    @Id
    @Column(name="Title_of_a_story")
    private String title_of_a_story;

    @OneToMany(mappedBy = "all_story")
    private List<Novel> novels;

    private All_stories(){}

    public All_stories(int ID, String title_of_a_story) {
        this.ID = ID;
        this.title_of_a_story = title_of_a_story;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        All_stories all_story = (All_stories) o;
        return Objects.equals(ID, all_story.ID) &&
                Objects.equals(title_of_a_story, all_story.title_of_a_story);
    }

    @Override
    public int hashCode() {

        return Objects.hash(ID, title_of_a_story);
    }

    public int getID() {
        return ID;
    }

    public void setID(int ID) {
        this.ID = ID;
    }

    public String getTitle_of_a_story() {
        return title_of_a_story;
    }

    public void setTitle_of_a_story(String title_of_a_story) {
        this.title_of_a_story = title_of_a_story;
    }

    public List<Novel> getNovels() {
        return novels;
    }

    public void setNovels(List<Novel> novels) {
        this.novels = novels;
    }
}

Could You please give me a hint, what is wrong?