Inventory App with React JS

inventory-app-js-backend

React App

, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/Components/App/index.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import axios from 'axios'; 3 | import AuthService from '../users/AuthService'; 4 | import withAuth from '../users/WithAuth'; 5 | import { Navbar, Nav, Button } from 'react-bootstrap' 6 | import {Link} from 'react-router-dom' 7 | // import SearchProducts from '../products/SearchProducts' 8 | // import GetProducts from '../products/GetProducts'; 9 | import Products from '../products/NewProducts'; 10 | 11 | axios.defaults.baseURL = 'http://localhost:8080'; 12 | class App extends Component { 13 | 14 | Auth = new AuthService(); 15 | 16 | _handleLogout = () => { 17 | this.Auth.logout() 18 | this.props.history.replace('/login'); 19 | } 20 | 21 | render() { 22 | 23 | 24 | return ( 25 |

26 | 27 | Inventory App 28 | 29 | 38 | 39 |
40 |

41 | 42 |

43 | 44 | 45 |

46 | 47 | ); 48 | } 49 | } 50 | export default withAuth(App); 51 | -------------------------------------------------------------------------------- /src/Components/page/Header.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import { Navbar, Nav} from 'react-bootstrap' 3 | import {Link} from 'react-router-dom'; 4 | import AuthService from '../users/AuthService'; 5 | export default class Headers extends Component{ 6 | 7 | Auth = new AuthService(); 8 | 9 | _handleLogout = () => { 10 | this.Auth.logout() 11 | this.props.history.replace('/login'); 12 | } 13 | render(){ 14 | return( 15 | 16 | Inventory App 17 | 18 | 24 | 25 | ) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/Components/page/Home.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import axios from 'axios'; 3 | import AuthService from '../users/AuthService'; 4 | import withAuth from '../users/WithAuth'; 5 | import { Navbar, Nav, Button } from 'react-bootstrap' 6 | import {Link} from 'react-router-dom' 7 | import SearchProducts from '../products/SearchProducts' 8 | import GetProducts from '../products/GetProducts'; 9 | 10 | 11 | axios.defaults.baseURL = 'http://localhost:8080'; 12 | class Home extends Component { 13 | 14 | Auth = new AuthService(); 15 | 16 | _handleLogout = () => { 17 | this.Auth.logout() 18 | this.props.history.replace('/login'); 19 | } 20 | 21 | render() { 22 | 23 | 24 | return ( 25 |

26 | 27 | Inventory App 28 | 29 | 40 | 41 |

42 | 43 |

44 |

45 | 46 | 47 |

48 | 49 |

50 | 51 | ); 52 | } 53 | } 54 | export default withAuth(Home); 55 | -------------------------------------------------------------------------------- /src/Components/products/AddReduceDelete.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | 6 | const token = localStorage.getItem('token'); 7 | class AddReduceDelete extends Component { 8 | state = { 9 | quantity : 0, 10 | } 11 | 12 | AddReduceQty = e => { 13 | const {id} = this.props.item; 14 | e.preventDefault(); 15 | const action = e.target.value; 16 | axios.patch(`/products/${id}?act=${action}`, {headers: {authorization: token}}) 17 | .then(res=>{ 18 | if(action === 'add'){ 19 | this.props.item.quantity += 1; 20 | this.setState({quantity: this.props.item.quantity}) 21 | alert('add') 22 | }else{ 23 | this.props.item.quantity -= 1; 24 | this.setState({quantity: this.props.item.quantity}) 25 | alert('reduce') 26 | } 27 | }) 28 | .catch(err => console.log(err)) 29 | } 30 | render() { 31 | const {id, name, image, category, quantity} = this.props.item; 32 | return ( 33 |

34 |

{this.props.item.image = 'https://icon-library.net/images/inventory-icon/inventory-icon-10.jpg'; this.forceUpdate()}} className="img-fluid d-inline-block img-h" />

35 |

36 |

{name}

37 |

Category: {category}
38 | Quantity: {quantity}

39 | 40 | 41 | 42 | 43 | 44 |

45 |

46 | ) 47 | } 48 | } 49 | export default AddReduceDelete; 50 | -------------------------------------------------------------------------------- /src/Components/products/CreateProduct.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { Form, Button, Container, Row, Col } from 'react-bootstrap'; 3 | import { Link, Redirect } from 'react-router-dom' 4 | import axios from 'axios'; 5 | class CreateProduct extends Component { 6 | 7 | constructor(props){ 8 | super(props); 9 | 10 | this.onChangeName = this.onChangeName.bind(this); 11 | this.onChangeDescription = this.onChangeDescription.bind(this); 12 | this.onChangeImage = this.onChangeImage.bind(this); 13 | this.onChangeCategory = this.onChangeCategory.bind(this); 14 | this.onChangeQuantity = this.onChangeQuantity.bind(this); 15 | this.onSubmit = this.onSubmit.bind(this); 16 | 17 | this.state = { 18 | categori : [], 19 | name : "", 20 | description : "", 21 | image: "", 22 | category: 1, 23 | quantity: 0, 24 | created: false 25 | } 26 | } 27 | onChangeName(e) { 28 | this.setState({ 29 | name : e.target.value 30 | }) 31 | } 32 | onChangeDescription(e) { 33 | this.setState({ 34 | description : e.target.value 35 | }) 36 | } 37 | onChangeImage(e) { 38 | this.setState({ 39 | image : e.target.value 40 | }) 41 | } 42 | onChangeCategory(e) { 43 | this.setState({ 44 | category : e.target.value 45 | }) 46 | } 47 | onChangeQuantity(e) { 48 | this.setState({ 49 | quantity : e.target.value 50 | }) 51 | } 52 | onSubmit(e){ 53 | e.preventDefault(); 54 | console.log(`create`) 55 | console.log(`name : ${this.state.name}`) 56 | console.log(`description : ${this.state.description}`) 57 | console.log(`category : ${this.state.category}`) 58 | 59 | const newTodo = { 60 | name: this.state.name, 61 | description: this.state.description, 62 | image: this.state.image, 63 | category: this.state.category, 64 | quantity: this.state.quantity, 65 | } 66 | const token = localStorage.getItem('token') 67 | 68 | axios.post('/products', newTodo, {headers: {authorization: token}}) 69 | .then(this.postTimer.bind(this)) 70 | .catch(err=>console.log(err)) 71 | 72 | this.setState({ 73 | name : "", 74 | description : "", 75 | image: "", 76 | category: 1, 77 | quantity: "" 78 | }) 79 | } 80 | postTimer =() =>{ 81 | setTimeout(() => this.setState({created: true}), 2000) 82 | } 83 | 84 | componentDidMount(){ 85 | axios.get('/categories') 86 | .then(response => this.setState({categori: response.data.data })) 87 | 88 | } 89 | 90 | 91 | 92 | render(){ 93 | const path = '/'; 94 | const {created} = this.state 95 | if(created === true){ 96 | return () 97 | } 98 | return( 99 |

100 | 101 | 102 | 103 |
104 |

105 |

Add Product

106 | 107 | Name Product 108 | 109 | 110 | 111 | Description 112 | 113 | 114 | 115 | Image (Url) 116 | 117 | 118 | 119 | Category 120 | 121 | 122 | {this.state.categori.map(item => 123 | 124 | )} 125 | 126 | 127 | 128 | 129 | Quantity 130 | 131 | 132 | 135 |

136 |
137 | Back to home 138 | 139 | 140 | 141 | 142 |

143 | ) 144 | } 145 | } 146 | export default CreateProduct -------------------------------------------------------------------------------- /src/Components/products/DetailProduct.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | export default class DetailProduct extends Component { 4 | constructor (props) { 5 | super(props) 6 | this.state = { 7 | products: [] 8 | } 9 | } 10 | componentDidMount(){ 11 | axios.get(`/products/${this.state.products.id_product}`) 12 | .then(response => this.setState({products: response.data.data })) 13 | } 14 | render(){ 15 | return( 16 | 17 | {this.state.products.map(item=>{ 18 | 19 | })} 20 | 21 | 22 | ) 23 | } 24 | } -------------------------------------------------------------------------------- /src/Components/products/EditProduct.js: -------------------------------------------------------------------------------- 1 | import React, { Component} from 'react'; 2 | import { Form, Button, Row, Col, Container } from 'react-bootstrap'; 3 | import {Redirect} from 'react-router-dom'; 4 | import axios from 'axios'; 5 | 6 | function refreshPage() { 7 | window.location.reload(false); 8 | } 9 | class EditProduct extends Component { 10 | state = { 11 | categories : [], 12 | category: 1, 13 | edited : false 14 | } 15 | 16 | 17 | componentDidMount(){ 18 | const {id} = this.props.match.params; 19 | 20 | axios.get(`http://localhost:8080/products/${id}`) 21 | .then(res => { 22 | for (var key in res.data.data[0]){ 23 | this.setState({[key] : res.data.data[0][key]}) 24 | } 25 | }) 26 | .catch(err => console.log(err)) 27 | 28 | axios.get('http://localhost:8080/categories') 29 | .then(response => this.setState({categories: response.data.data })) 30 | } 31 | 32 | editData = e => { 33 | this.setState({[e.target.name]: e.target.value}) 34 | } 35 | 36 | editSelect = e => { 37 | this.setState({category : e.target.value}) 38 | } 39 | 40 | editSubmit = () => { 41 | const {id} = this.props.match.params; 42 | const token = localStorage.getItem('token'); 43 | console.log(`category : ${this.state.category}`) 44 | 45 | const {name, image, category, quantity, description} = this.state; 46 | 47 | axios.put(`/products/` + id, {name, image, category, quantity, description}, {headers: {authorization : token}}) 48 | .then(this.setState({edited: true})) 49 | 50 | } 51 | 52 | 53 | render() { 54 | const {name, image, quantity, description, edited} = this.state; 55 | const path = '/products/' + this.props.match.params.id; 56 | if(edited === true){ 57 | return setTimeout(() => this.props.history.replace(path), 250) 58 | } 59 | return( 60 |

61 | 62 | 63 | 64 | 65 |

Edit Product

66 |

67 | 68 | Name Product 69 | 70 | 71 | 72 | Description 73 | 74 | 75 | 76 | Image (Url) 77 | 78 | 79 | 80 | Category 81 | Select category product 82 | 83 | 84 | {this.state.categories.map(item =>{ 85 | return 86 | }) 87 | } 88 | 89 | 90 | 91 | 92 | Quantity 93 | 94 | 95 | 98 |

99 | 100 | 101 |

102 | ) 103 | } 104 | } 105 | export default EditProduct; 106 | -------------------------------------------------------------------------------- /src/Components/products/GetProducts.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import axios from 'axios'; 3 | import {Link} from 'react-router-dom'; 4 | import {Button, Card, Container, Row} from 'react-bootstrap'; 5 | import QueryAction from './QueryAction' 6 | const Todo = props => ( 7 | 8 | 9 | 10 | 11 | 12 | {props.todo.name} 13 | {props.todo.category} 14 | {props.todo.description.substr(0,50)+'...'} 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | ) 23 | 24 | 25 | export default class GetProducts extends Component { 26 | constructor(props){ 27 | super(props) 28 | this.state = { 29 | item: [], 30 | query: { 31 | search : '%%', 32 | sortBy : 'name', 33 | sort: 'asc', 34 | limit: '5', 35 | page: '1' 36 | } 37 | } 38 | } 39 | 40 | componentDidMount() { 41 | const {search, sortBy, sort, limit, page} =this.state.query 42 | axios.get(`http://localhost:8080/products/?search=${search}&sortBy=${sortBy}&sort=${sort}&limit=${limit}&page=${page}`) 43 | .then(res =>{ 44 | this.setState({item: res.data.data}) 45 | }) 46 | 47 | } 48 | 49 | queryString = (data) => { 50 | this.setState({query: data}) 51 | const {search, sortBy, sort, limit, page} =this.state.query; 52 | axios.get(`http://localhost:8080/products/?search=${search}&sortBy=${sortBy}&sort=${sort}&limit=${limit}&page=${page}`) 53 | .then(res => this.setState({item: res.data.data, loading : true})) 54 | .catch(err => console.log(err)) 55 | } 56 | 57 | todoList(){ 58 | return this.state.item.map(function(currentTodo){ 59 | return ; 60 | }) 61 | } 62 | 63 | render(){ 64 | 65 | return( 66 | <> 67 | 68 | 69 | 70 | 71 |

{this.todoList()}

72 | 73 | ) 74 | } 75 | } -------------------------------------------------------------------------------- /src/Components/products/GetSearching.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react' 2 | import Headers from '../page/Header' 3 | import axios from 'axios'; 4 | import {Link} from 'react-router-dom'; 5 | import {Button, Card} from 'react-bootstrap'; 6 | const Todo = props => ( 7 | 8 | 9 | 10 | 11 | 12 | {props.todo.name} 13 | {props.todo.category} 14 | 15 | 16 | 17 | 18 | 19 | 20 | ) 21 | 22 | 23 | export default class GetSearching extends Component { 24 | constructor(props){ 25 | super(props) 26 | this.state = { 27 | item: [], 28 | } 29 | } 30 | 31 | componentDidMount() { 32 | 33 | let url = `http://localhost:8080/products/` 34 | 35 | const { name } = this.props.match.params; 36 | 37 | if(name){ 38 | url += `?search=${name}` 39 | } 40 | 41 | axios.get(url) 42 | .then(res =>{ 43 | this.setState({item: res.data.data}) 44 | }) 45 | 46 | } 47 | todoList(){ 48 | return this.state.item.map(function(currentTodo){ 49 | return ; 50 | }) 51 | } 52 | 53 | render(){ 54 | 55 | return( 56 | <> 57 | 58 |

{this.todoList()}

59 | 60 | ) 61 | } 62 | } -------------------------------------------------------------------------------- /src/Components/products/NewProducts.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import axios from 'axios'; 3 | import AddReduceDelete from './AddReduceDelete'; 4 | import Pagination from './Pagination'; 5 | import {Redirect} from 'react-router-dom'; 6 | import empty from '../../assets/Ellipsis-1s-100px.gif' 7 | 8 | class Products extends Component { 9 | state = { 10 | items: [], 11 | totals: 0, 12 | query: { 13 | search: '%%', 14 | sortBy: 'name', 15 | sort: 'asc', 16 | limit: '6', 17 | page: '1' 18 | }, 19 | 20 | isLoading: true 21 | 22 | } 23 | 24 | componentDidMount() { 25 | const { search, sortBy, sort, limit, page} = this.state.query; 26 | axios.get(`/products?search=${search}&sortBy=${sortBy}&sort=${sort}&limit=${limit}&page=${page}`) 27 | .then(res => 28 | { 29 | setTimeout(() => this.setState({items: res.data.data , totals: res.data.total.total, isLoading: false}), 500); 30 | }) 31 | .catch(err => console.log(err)) 32 | } 33 | 34 | delete = (id) => { 35 | const token = localStorage.getItem('token'); 36 | 37 | axios.delete(`/products/${id}`, {headers: {authorization: token}}) 38 | .catch(err => this.setState({success: true})); 39 | 40 | this.setState({items: this.state.items.filter(item => item.id !== id)}) 41 | } 42 | 43 | queryString = (data) => { 44 | this.setState({query: data}) 45 | const {search, sortBy, sort, limit, page} = this.state.query; 46 | let url = `/products?search=${search}&sortBy=${sortBy}&sort=${sort}&limit=${limit}&page=${page}`; 47 | axios.get(url) 48 | .then(res => this.setState({items: res.data.data, isLoading: false})) 49 | .catch(err => console.log(err)) 50 | } 51 | 52 | pageNumber = () => { 53 | var data = []; 54 | const counter = Math.ceil(this.state.totals / this.state.query.limit); 55 | for (let i = 1; i <= counter; i++) { 56 | data.push(i); 57 | } 58 | return data 59 | } 60 | 61 | render() { 62 | const pageNum = this.pageNumber(); 63 | return ( 64 |

65 | 66 |

67 |

68 |

69 |

70 | {this.state.isLoading &&

} 71 |

72 |

73 |

74 | { 75 | this.state.items.map( item => { 76 | return 77 | }) 78 | } 79 | 80 |

81 | ) 82 | } 83 | 84 | } 85 | export default Products; 86 | -------------------------------------------------------------------------------- /src/Components/products/Pagination.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | //import { Link } from 'react-router-dom'; 3 | 4 | class Pagination extends Component { 5 | state = { 6 | search: '', 7 | sortBy: 'name', 8 | sort: 'asc', 9 | limit: '6', 10 | page: '1', 11 | } 12 | 13 | handlerChange = (e) => { 14 | this.setState({ [e.target.name]: e.target.value}); 15 | console.log(e.target.value); 16 | setTimeout(() => this.props.callBack(this.state), 250); 17 | } 18 | render() { 19 | return ( 20 |

21 | 22 |

23 | 24 |

25 | 32 |

33 |

34 | 38 |

39 |

40 | 46 |

47 |

48 | 56 |

57 |

58 | 61 |

62 | 63 |

64 |

65 | ) 66 | } 67 | 68 | } 69 | export default Pagination; 70 | -------------------------------------------------------------------------------- /src/Components/products/QueryAction.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import {Link } from 'react-router-dom'; 3 | import { Form, FormControl, Button } from 'react-bootstrap'; 4 | class QueryAction extends Component { 5 | state = { 6 | search : '%%', 7 | sortBy : 'name', 8 | sort: 'asc', 9 | limit: '10', 10 | page: '1' 11 | } 12 | 13 | hendlerChange = (e) => { 14 | this.setState({[e.target.name] : e.target.value}); 15 | setTimeout(() => this.props.callBack(this.state), 250) 16 | } 17 | render() { 18 | return( 19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |

40 | ) 41 | } 42 | } 43 | export default QueryAction; -------------------------------------------------------------------------------- /src/Components/products/SearchProducts.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import {Link, Redirect} from 'react-router-dom' 3 | import { Form, FormControl, Button } from 'react-bootstrap'; 4 | export default class SearchProducts extends Component { 5 | constructor(props){ 6 | super(props) 7 | this.state = { 8 | todoItem: '', 9 | items: [] 10 | } 11 | } 12 | 13 | 14 | 15 | handleSubmit = (event) => { 16 | event.preventDefault() 17 | this.setState({ 18 | items : [...this.state.items, this.state.todoItem], 19 | todoItem : '' 20 | }) 21 | 22 | } 23 | 24 | handleChange = (event) => { 25 | this.setState({ 26 | todoItem: event.target.value 27 | }) 28 | 29 | } 30 | 31 | render(){ 32 | 33 | return( 34 | 35 |

36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /src/Components/products/SingleProduct.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import axios from 'axios'; 3 | import {Link, Redirect} from 'react-router-dom' 4 | import { Card, Button } from 'react-bootstrap'; 5 | import Headers from '../page/Header'; 6 | import empty from '../../assets/Ellipsis-1s-100px.gif' 7 | const token = localStorage.getItem('token'); 8 | 9 | class SingleProducts extends Component { 10 | state = { 11 | item: {}, 12 | quantity: 0, 13 | deleted: false, 14 | isLoading: true 15 | } 16 | componentWillMount() { 17 | const {id} = this.props.match.params; 18 | axios.get(`/products/${id}`) 19 | .then(res => 20 | { 21 | 22 | setTimeout(() => this.setState({item: res.data.data[0], isLoading: false}), 500); 23 | 24 | }) 25 | .catch(err => console.log(err)) 26 | } 27 | AddReduceQty = e => { 28 | const {id} = this.props.match.params 29 | e.preventDefault(); 30 | const action = e.target.textContent.trim(); 31 | axios.patch(`/products/${id}?act=${action}`, {headers: {authorization: token}}) 32 | .then(res=>{ 33 | if(action === 'add'){ 34 | this.state.item.quantity += 1; 35 | this.setState({quantity: this.state.item.quantity}) 36 | alert('add') 37 | }else{ 38 | this.state.item.quantity -= 1; 39 | this.setState({quantity: this.state.item.quantity}) 40 | alert('reduce') 41 | } 42 | }) 43 | .catch(err => console.log(err)) 44 | } 45 | DeleteProduct = e => { 46 | e.preventDefault(); 47 | const {id} = this.props.match.params 48 | axios.delete(`http://localhost:8080/products/${id}`, {headers : {authorization : token }}) 49 | .then(this.setState({deleted: true})) 50 | .catch(err => console.log(err)) 51 | // this.setState({ 52 | // products: this.state.item.filter(items=> items.id !== id) 53 | // }) 54 | alert('deleted') 55 | 56 | } 57 | render() { 58 | const {id_product, name, description, image, category, quantity} = this.state.item; 59 | const {deleted} =this.state 60 | if(deleted === true){ 61 | return () 62 | } 63 | 64 | return( 65 | 66 | 67 | 68 | 69 | {this.state.isLoading &&

} 70 |

71 | {this.state.item.image = 'https://icon-library.net/images/inventory-icon/inventory-icon-10.jpg'; this.forceUpdate()}} className="img-fluid d-inline-block img-h" /> 72 |

73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | {this.state.isLoading &&

} 81 | {name} 82 | {description} 83 | Quantity : {quantity} 84 | {category} 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ) 95 | } 96 | } 97 | export default SingleProducts 98 | -------------------------------------------------------------------------------- /src/Components/users/AuthService.js: -------------------------------------------------------------------------------- 1 | import decode from 'jwt-decode'; 2 | 3 | 4 | export default class AuthService { 5 | 6 | // Initializing important variables 7 | constructor(domain) { 8 | this.domain = domain || 'http://localhost:8080/user' // API server domain 9 | // this.fetch = this.fetch.bind(this) // React binding stuff 10 | // this.login = this.login.bind(this) 11 | // this.getProfile = this.getProfile.bind(this) 12 | } 13 | 14 | login(email, password) { 15 | // Get a token from api server using the fetch api 16 | return this.fetch(`${this.domain}/login`, { 17 | method: 'POST', 18 | body: JSON.stringify({ 19 | email, 20 | password 21 | }) 22 | }).then(res => { 23 | this.setToken(res.token) // Setting the token in localStorage 24 | return Promise.resolve(res); 25 | }) 26 | } 27 | 28 | loggedIn() { 29 | // Checks if there is a saved token and it's still valid 30 | const token = this.getToken() // GEtting token from localstorage 31 | return !!token && !this.isTokenExpired(token) // handwaiving here 32 | } 33 | 34 | isTokenExpired(token) { 35 | try { 36 | const decoded = decode(token); 37 | if (decoded.exp < Date.now() / 1000) { // Checking if token is expired. N 38 | return true; 39 | } 40 | else 41 | return false; 42 | } 43 | catch (err) { 44 | return false; 45 | } 46 | } 47 | 48 | setToken(idToken) { 49 | // Saves user token to localStorage 50 | localStorage.setItem('token', idToken) 51 | } 52 | 53 | getToken() { 54 | // Retrieves the user token from localStorage 55 | return localStorage.getItem('token') 56 | } 57 | 58 | logout() { 59 | // Clear user token and profile data from localStorage 60 | localStorage.removeItem('token'); 61 | } 62 | 63 | getConfirm = () => { 64 | // Using jwt-decode npm package to decode the token 65 | let answer = decode(this.getToken()); 66 | console.log("Recieved answer!"); 67 | return answer; 68 | }; 69 | 70 | 71 | fetch(url, options) { 72 | // performs api calls sending the required authentication headers 73 | const headers = { 74 | 'Accept': 'application/json', 75 | 'Content-Type': 'application/json' 76 | } 77 | 78 | // Setting Authorization header 79 | // Authorization: Bearer xxxxxxx.xxxxxxxx.xxxxxx 80 | if (this.loggedIn()) { 81 | headers['Authorization'] = 'Bearer ' + this.getToken() 82 | } 83 | 84 | return fetch(url, { 85 | headers, 86 | ...options 87 | }) 88 | .then(this._checkStatus) 89 | .then(response => response.json()) 90 | .catch(err => console.log(err)) 91 | } 92 | 93 | _checkStatus(response) { 94 | // raises an error in case response status is not a success 95 | if (response.status >= 200 && response.status < 300) { // Success status lies between 200 to 300 96 | return response 97 | } else { 98 | var error = new Error(response.statusText) 99 | error.response = response 100 | throw error 101 | } 102 | } 103 | } -------------------------------------------------------------------------------- /src/Components/users/Login.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import AuthService from './AuthService'; 3 | import { Link } from 'react-router-dom'; 4 | import { Form, Button } from 'react-bootstrap'; 5 | 6 | 7 | class Login extends Component { 8 | Auth = new AuthService(); 9 | 10 | state = { 11 | email: "", 12 | password: "" 13 | } 14 | 15 | _handleChange = (e) => { 16 | this.setState( 17 | { 18 | [e.target.name]: e.target.value 19 | } 20 | ) 21 | } 22 | 23 | handleFormSubmit = e => { 24 | e.preventDefault(); 25 | 26 | /* Here is where all the login logic will go. Upon clicking the login button, we would like to utilize a login method that will send our entered credentials over to the server for verification. Once verified, it should store your token and send you to the protected route. */ 27 | this.Auth.login(this.state.email, this.state.password) 28 | .then(res => { 29 | this.props.history.replace("/"); 30 | }) 31 | .catch(err => { 32 | alert(err); 33 | }); 34 | 35 | 36 | }; 37 | 38 | componentDidMount() { 39 | /* Here is a great place to redirect someone who is already logged in to the protected route */ 40 | if (this.Auth.loggedIn()) 41 | this.props.history.replace('/'); 42 | } 43 | 44 | render() { 45 | return ( 46 | 47 |

48 |

49 |

50 |

51 |

52 | 53 | Inventory App 54 |
55 | 56 | Account Login 57 | 58 |

59 | 60 | 81 |

82 |

83 |

84 | 85 | ); 86 | } 87 | 88 | 89 | } 90 | 91 | 92 | export default Login; 93 | -------------------------------------------------------------------------------- /src/Components/users/Signup.js: -------------------------------------------------------------------------------- 1 | import AuthService from './AuthService'; 2 | import React, {Component} from "react"; 3 | //import './login.css' 4 | import axios from "axios"; 5 | import { Link } from 'react-router-dom'; 6 | import { Form, Button } from 'react-bootstrap'; 7 | 8 | export default class Signup extends Component { 9 | 10 | Auth = new AuthService(); 11 | 12 | state = { 13 | name: "", 14 | email: "", 15 | username: "", 16 | password: "" 17 | } 18 | 19 | _handleChange = (e) => { 20 | 21 | this.setState( 22 | { 23 | [e.target.name]: e.target.value 24 | } 25 | ) 26 | console.log(this.state); 27 | } 28 | handleFormSubmit = e => { 29 | e.preventDefault(); 30 | 31 | //Add this part right here 32 | axios.post(`http://localhost:8080/user/register`, { 33 | name: this.state.name, 34 | username : this.state.username, 35 | email: this.state.email, 36 | password: this.state.password 37 | }) 38 | .then(data => { 39 | console.log(data); 40 | this.props.history.replace("/login"); 41 | }); 42 | }; 43 | 44 | componentDidMount() { 45 | console.log(this.Auth.loggedIn()); 46 | if(this.Auth.loggedIn()){ 47 | this.props.history.push('/register') 48 | } 49 | } 50 | 51 | render() { 52 | 53 | 54 | return ( 55 | 56 |

57 |

58 |

59 |

60 |

61 | 62 | Signup 63 | 64 |

65 |

66 | 67 | 68 | Name : 69 | 70 | 71 | 72 | 73 | 74 | 75 | Username : 76 | 77 | 78 | 79 | 80 | 81 | 82 | Email : 83 | 84 | 85 | 86 | 87 | 88 | 89 | Password : 90 | 91 | 92 | 93 | 94 | 97 |

98 | Already have an account? Login 99 |

100 |

101 |

102 |

103 |

104 |

105 | 106 | ); 107 | } 108 | 109 | } -------------------------------------------------------------------------------- /src/Components/users/WithAuth.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import AuthService from './AuthService'; 3 | 4 | export default function withAuth(AuthComponent) { 5 | const Auth = new AuthService(); 6 | 7 | return class AuthWrapped extends Component { 8 | state = { 9 | confirm: null, 10 | loaded: false 11 | }; 12 | 13 | componentDidMount() { 14 | if (!Auth.loggedIn()) { 15 | this.props.history.replace('/login') 16 | } 17 | else { 18 | try { 19 | const confirm = Auth.getConfirm() 20 | this.setState({ 21 | confirm: confirm, 22 | loaded: true 23 | }) 24 | } 25 | catch(err){ 26 | Auth.logout() 27 | this.props.history.replace('/login') 28 | } 29 | } 30 | } 31 | 32 | render() { 33 | if (this.state.loaded === true) { 34 | if (this.state.confirm) { 35 | console.log("confirmed!"); 36 | return ( 37 | /* component that is currently being wrapper(App.js) */ 38 | 42 | ); 43 | } else { 44 | return console.log("not confirmed!"); 45 | } 46 | } else { 47 | return null; 48 | } 49 | } 50 | 51 | } 52 | 53 | } -------------------------------------------------------------------------------- /src/assets/Ellipsis-1s-100px.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magung/inventory-app-with-react-js/514fb9ff1a716bc18fda690b9b853ac9bba6cc0b/src/assets/Ellipsis-1s-100px.gif -------------------------------------------------------------------------------- /src/assets/logoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/magung/inventory-app-with-react-js/514fb9ff1a716bc18fda690b9b853ac9bba6cc0b/src/assets/logoc.png -------------------------------------------------------------------------------- /src/assets/undraw_page_not_found_su7k.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/undraw_react_y7wq.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | .card{ 15 | float:left; 16 | } 17 | 18 | .background{ 19 | background-image: url('undraw_deliveries_131a.svg'); 20 | background-repeat: no-repeat 21 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './Components/App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 7 | 8 | import CreateProduct from './Components/products/CreateProduct'; 9 | import SingleProducts from './Components/products/SingleProduct'; 10 | import EditProduct from './Components/products/EditProduct'; 11 | import Login from './Components/users/Login'; 12 | import Signup from './Components/users/Signup'; 13 | import GetSearching from './Components/products/GetSearching'; 14 | 15 | ReactDOM.render( 16 | 17 | 18 | { return }} /> 19 | { return }} /> 20 | { return }}/> 21 | { return }} /> 22 | { return }} /> 23 | { return }} /> 24 | { return }}/> 25 | 26 | 27 | 28 | , document.getElementById('root')); 29 | 30 | // If you want your app to work offline and load faster, you can change 31 | // unregister() to register() below. Note this comes with some pitfalls. 32 | // Learn more about service workers: https://bit.ly/CRA-PWA 33 | serviceWorker.unregister(); 34 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/undraw_deliveries_131a.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------