8000 Add files via upload · Millstack/springboot-react@67dafd6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 67dafd6

Browse files
MillstackMillstack
authored
Add files via upload
1 parent 17b6284 commit 67dafd6

15 files changed

+542
-0
lines changed

‎react-frontend/src/App.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* App.css */
2+
3+
/* Reset default margin and padding */
4+
body,
5+
h1,
6+
h2,
7+
h3,
8+
h4,
9+
h5,
10+
h6,
11+
p,
12+
ul,
13+
ol {
14+
margin: 0;
15+
padding: 0;
16+
}
17+
18+
/* Set the height of the root element */
19+
html,
20+
body,
21+
#root {
22+
height: 100%;
23+
}
24+
25+
/* Define a class for the main content area */
26+
.content {
27+
min-height: calc(100% - 60px); /* Adjust the value to leave space for the footer */
28+
padding: 20px;
29+
}
30+
31+
/* Define styles for the footer */
32+
.footer {
33+
position: absolute;
34+
bottom: 0;
35+
width: 100%;
36+
height: 40px;
37+
background-color: black;
38+
text-align: center;
39+
color: white;
40+
}
41+
42+
/* Add any additional styles as needed */

‎react-frontend/src/App.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import './App.css';
2+
import React from 'react';
3+
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
4+
import Header from './components/Header';
5+
import Footer from './components/Footer';
6+
import Item from './components/Item';
7+
import CreateItemComponent from './components/CreateItemComponent';
8+
import UpdateItemComponent from './components/UpdateItemComponent';
9+
import SearchItemComponent from './components/SearchItemComponent';
10+
11+
function App() {
12+
return (
13+
<div>
14+
<Router>
15+
<div>
16+
<Header/>
17+
<div className="container">
18+
<Routes>
19+
<Route path='/' element={<Item />} />
20+
<Route path='/items' element={<Item />} />
21+
<Route path='/add-items' element={<CreateItemComponent />} />
22+
<Route path='/update-items/:id' element={<UpdateItemComponent />} />
23+
<Route path='/search-item' element={<SearchItemComponent />} />
24+
</Routes>
25+
</div>
26+
<Footer/>
27+
</div>
28+
</Router>
29+
</div>
30+
);
31+
}
32+
33+
export default App;

‎react-frontend/src/App.test.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render, screen } from '@testing-library/react';
2+
import App from './App';
3+
4+
test('renders learn react link', () => {
5+
render(<App />);
6+
const linkElement = screen.getByText(/learn react/i);
7+
expect(linkElement).toBeInTheDocument();
8+
});

‎react-frontend/src/components/CreateItemComponent.jsx

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { Component } from 'react';
2+
import ItemService from '../service/ItemService';
3+
4+
class CreateItemComponent extends Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
name: '',
9+
description: ''
10+
};
11+
12+
// binding item-name event handlers into constructor
13+
this.changeItemNameHandler = this.changeItemNameHandler.bind(this);
14+
15+
// binding item-description event handlers into constructor
16+
this.changeItemDescriptionHandler = this.changeItemDescriptionHandler.bind(this);
17+
18+
// binding saveItem event handler (Add Item button)
19+
this.saveItem = this.saveItem.bind(this);
20+
21+
// binding cancel method
22+
// this.cancel = this.cancel.bind(this);
23+
}
24+
25+
// event handler for name field
26+
changeItemNameHandler=(event)=>{
27+
this.setState({name: event.target.value});
28+
}
29+
30+
// event handler for description field
31+
changeItemDescriptionHandler=(event)=>{
32+
this.setState({description: event.target.value});
33+
}
34+
35+
// // cancel method --> once clicked it will navigate to item list page
36+
// cancel(){
37+
// this.props.history.push('/items');
38+
// }
39+
40+
// save employee method --> gets called whenver we hit Add Item button (submit the form)
41+
saveItem = async (e) => {
42+
e.preventDefault();
43+
let item = { name: this.state.name, description: this.state.description };
44+
console.log('item =>', item);
45+
46+
try {
47+
await ItemService.addItem(item);
48+
window.location.href = '/items';
49+
} catch (error) {
50+
console.error(error);
51+
}
52+
}
53+
54+
render() {
55+
return (
56+
<div>
57+
<div className="container p-5">
58+
<div className="row">
59+
<div className="card col-md-6 offset-md-3">
60+
<h3 className='text-center'>Add Item</h3>
61+
<div className="card-body">
62+
<form action="">
63+
<div className="form-group mb-3">
64+
<label>Item Name</label>
65+
<input type="text" placeholder='Item Name' name='name' className='form-control'
66+
value={this.state.name} onChange={this.changeItemNameHandler} />
67+
</div>
68+
<div className="form-group mb-3">
69+
<label>Item Description</label>
70+
<input type="text" placeholder='Item Description' name='description' className='form-control'
71+
value={this.state.description} onChange={this.changeItemDescriptionHandler} />
72+
</div>
73+
<button className='btn btn-success' onClick={this.saveItem}>Add Item</button>
74+
{/* <button className='btn btn-danger' onClick={this.cancel.bind(this)} style={{marginLeft:"10px"}}>Cancel</button> */}
75+
</form>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
);
82+
}
83+
}
84+
85+
export default CreateItemComponent;

‎react-frontend/src/components/Footer.jsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component } from 'react';
2+
3+
class Footer extends Component {
4+
constructor(props) {
5+
super(props);
6+
this.state = {};
7+
}
8+
9+
render() {
10+
return (
11+
<div>
12+
<footer className="footer">
13+
<span className="text-muted">
14+
All Rights Reserved 2023 @HostBuddy
15+
</span>
16+
</footer>
17+
</div>
18+
);
19+
}
20+
}
21+
22+
export default Footer;

‎react-frontend/src/components/Header.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { Component } from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
class Header extends Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {};
8+
}
9+
10+
render() {
11+
return (
12+
<div>
13+
<header>
14+
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
15+
<div>
16+
<Link to="/" className="navbar-brand">Home</Link>
17+
<Link to="/add-items" className="navbar-brand">Add</Link>
18+
<Link to="/search-item" className="navbar-brand">Search</Link>
19+
</div>
20+
</nav>
21+
</header>
22+
</div>
23+
);
24+
}
25+
}
26+
27+
export default Header;

‎react-frontend/src/components/Item.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { Component } from 'react';
2+
import ItemService from '../service/ItemService';
3+
4+
class Item extends Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
items: []
9+
};
10+
11+
// binding add item emthod
12+
this.addItem = this.addItem.bind(this);
13+
14+
// binding update item method
15+
this.updateItem = this.updateItem.bind(this);
16+
}
17+
18+
componentDidMount(){
19+
ItemService.getItems().then((res) => {
20+
this.setState({items : res.data})
21+
});
22+
}
23+
24+
addItem(){
25+
this.props.history.push('/add-items')
26+
}
27+
28+
// update item button method
29+
updateItem(id){
30+
this.props.history.push(`/update-items/${id}`);
31+
}
32+
33+
// search item by id method
34+
searchItemById(id){
35+
36+
console.log(`Searching item with ID: ${id}`);
37+
}
38+
39+
render() {
40+
return (
41+
<div>
42+
<div className="container p-5 col-md-8">
43+
{/* <p className='text-center fs-4'>ITEM LIST</p> */}
44+
<table className="table table-hover table-striped table-bordered ">
45+
<caption>List of items</caption>
46+
<thead className='table-light'>
47+
<tr>
48+
<th colSpan="3" className="text-center fs-6">Item Details</th>
49+
</tr>
50+
<tr>
51+
<th>Item Id</th>
52+
<th>Item Name</th>
53+
<th>Item Description</th>
54+
</tr>
55+
</thead>
56+
<tbody>
57+
{this.state.items.map((item) => (
58+
<tr key={item.name}>
59+
<td>{item.id}</td>
60+
<td>{item.name}</td>
61+
<td>{item.description}</td>
62+
</tr>
63+
))}
64+
</tbody>
65+
</table>
66+
</div>
67+
</div>
68+
);
69+
}
70+
}
71+
72+
export default Item;

‎react-frontend/src/components/SearchItemComponent.jsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { Component } from 'react';
2+
import ItemService from '../service/ItemService';
3+
4+
class SearchItemComponent extends Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {
8+
searchName: '',
9+
item: null,
10+
};
11+
12+
// Binding the event handlers
13+
this.changeSearchNameHandler = this.changeSearchNameHandler.bind(this);
14+
this.searchItem = this.searchItem.bind(this);
15+
}
16+
17+
// Handle changes in the Search Name input field
18+
changeSearchNameHandler(event) {
19+
this.setState({ searchName: event.target.value });
20+
}
21+
22+
// Handle search item button click
23+
searchItem(event) {
24+
event.preventDefault();
25+
ItemService.getItemByName(this.state.searchName)
26+
.then((res) => {
27+
const item = res.data[0]; // Assuming only one item is returned
28+
this.setState({ item });
29+
})
30+
.catch((error) => {
31+
console.log(error); // Handle any errors that occur during the API call
32+
});
33+
}
34+
35+
render() {
36+
const { item } = this.state;
37+
38+
return (
39+
<div>
40+
<div className="container p-5">
41+
<div className="row">
42+
<div className="card col-md-6 offset-md-3">
43+
<h3 className="text-center">Search Item</h3>
44+
<div className="card-body">
45+
<form>
46+
<div className="form-group mb-3">
47+
<label>Search Name</label>
48+
<input
49+
type="text"
50+
placeholder="Search Name"
51+
name="searchName"
52+
className="form-control"
53+
value={this.state.searchName}
54+
onChange={this.changeSearchNameHandler}
55+
/>
56+
</div>
57+
<button onClick={this.searchItem} className="btn btn-primary">
58+
Search
59+
</button>
60+
</form>
61+
</div>
62+
</div>
63+
</div>
64+
65+
{item && (
66+
<div className="row mt-5">
67+
<div className="card col-md-6 offset-md-3">
68+
<h3 className="text-center">Item Details</h3>
69+
<div className="card-body">
70+
<div>
71+
<strong>Item ID:</strong> {item.id}
72+
</div>
73+
<div>
74+
<strong>Item Name:</strong> {item.name}
75+
</div>
76+
<div>
77+
<strong>Item Description:</strong> {item.description}
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
)}
83+
</div>
84+
</div>
85+
);
86+
}
87+
}
88+
89+
export default SearchItemComponent;

0 commit comments

Comments
 (0)
0