Forem: Tunde Oyewo

Grocery Inventory Tracker

Tunde Oyewo — Wed, 30 Dec 2020 14:30:12 +0000

This is a Single Page Application (SPA) built using React and context api. In this tutorial you will be able to build a Grocery Inventory Store that tracks expiration and quantity. We will be able to create, read, update and delete items created.

Setup

We will use npx create react app , this helps us to quickly setup our development environment . We will need to have Node version greater or equal to 8.10 and our npm should be greater than or equal to 5.6 installed on our machine.

Installation

I will be using vscode as my code editor, but we are free to use any code editor.
To start, we open the command line and cd to where we want to have our app installed, and run code below:

npx create-react-app grocery-inventory-tracker

This creates a boiler plate we can start using for our app. To start the app, we run npm start and it opens a browser at http://localhost:3000/ if no app is already using the port 3000.

For this project we will be using react state and react context api.
React Context Api helps us to create a global variable that can be passed around in our react App. Usually data is passed down from parent to child in a typical react app as props . You can read more on React Context API .

Folder Structure

We create components subfolder in src folder . In the components folder we create the following files, AddGrocery.js, EditGrocery.js, GroceryItem.js, GroceryList.js, Top.js .
We also create two other files in the root folder. These are data.js that will host all our grocery objects and a context.js .

Dependencies

For this app we will require and install the following dependencies : (react-router-dom uuid moment react-datepicker)

npm install --save react-router-dom uuid moment react-datepicker

react-router-dom - This helps with client-side routing in a Single Page App that allows for navigation without page refreshing.
uuid - They are 128-Bits unique numbers and we will use this to generate unique id's for our application.
moment - We will use this to display data/time in friendly and easy way.
react-datepicker - We will use this to display dates using calendar dialog.

index.html

In our index.html file we will have two cdn links for fontawesome icons and we use bootstrap for styling and rename the title tag as below. Notice that we have a div with id root . This is where our app will be displayed.

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <!--font awesome-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <title>Grocery Inventory Tracking App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>

</html>

Data.js

We now create an array with objects called groceriesDB and we export it because we will be using it in the context.js file.
The array contains objects that represent the Groceries we want to track.

export const groceriesDB = [
    {
        image: 'https://images.unsplash.com/photo-1513791053024-3b50799fdd7b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9',
        name: 'tomato',
        qty: 10,
        expiration: Date.now(),
        category: 'vegetable',
        id: 0.12654367
    },
    {
        image: 'https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9',
        name: 'carrot',
        qty: 5,
        expiration: 'Thu Jul 20 2020 12:55:58 GMT+0100 (West Africa Standard Time)',
        category: 'vegetable',
        id: 0.12656547
    },
    {
        image: 'https://images.unsplash.com/photo-1589469224608-c84d02c71b94?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9',
        name: 'lettuce',
        qty: 20,
        expiration: 'Thu Jul 30 2020 12:55:58 GMT+0100 (West Africa Standard Time)',
        category: 'vegetable',
        id: 0.12656767
    },
    {
        image: 'https://images.unsplash.com/photo-1531191357516-0aa0289ab6c9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9',
        name: 'maize',
        qty: 20,
        expiration: Date.now(),
        category: 'grain',
        id: 0.12650915
    },
]

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#banner img{
  width:85%;
    height:300px;
    float: left;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 30px;
}


#tomato{
  width: 200px;
  height: 120px;
}
h5{
  /* color: #E83F6F; */
  color: #FFBF00;
}

a, a:hover, a:focus, a:active{
  text-decoration: none;
  color:inherit;
}

Context.js

Next we move to the context.js file and we create a class component and name it GroceryProvider . At the top, we import createContext and uuid and data.js and then create a context object and name it GroceryContext. This object has two components: Provider and Consumer . Provder provides all the data for our application, we will set it at the top of our application so that all other component of the application have access to it.
To use the data that the Provider provides we use the Consumer and we will be able to have access to the data from anywhere in our application.

We then create a state object in the GroceryProvider class with property groceries and set the value to be groceriesDB that we imported from data.js , and set property name, qty, category, id, image to an empty string. We set expiration to a new Date() value . We also create a property updateEdit to an empty array. This will be used later in the app.

The GroceryProvider then returns a GroceyContext.Provider . Since the GroceryContext.Provider will be at the top of our application we will also return the children i.e {this.props.children} . The provider returns a value which is an object. In our own case this.state as seen below.

Lastly, we create a variable GroceryConsumer which is equal to GroceryContext.Consumer and we export both GroceryProvider and GroceryConsumer .

We also create an object headerObj, this will be use to dynamcally display text and image for header of our application. We will also create addGrocery, removeGrocery, editGrocery, onSaveEdit, convertDate changeValue functions. These will only log to the console for now and add the code later, we then add them in our GroceryContext.Provider.

At this point when we try to console.log the value of this.state.groceries we get no output since the Provider is not set at the top of our application. We do that next in the index.js file.

import React, { Component, createContext } from 'react';
import { groceriesDB } from './data';
import { v4 } from 'uuid';


const GroceryContext = createContext();
class GroceryProvider extends Component {
    state = {
        groceries: groceriesDB,
        id: '',
        name: '',
        qty: '',
        expiration: new Date(),
        category: '',
        image: '',
        updateEdit: [],
        searchCategory: ''
    }

   //dynamically displays values for the header of the application
      headerObj = {
        title: 'Groceries Inventory | Tracker',
        text: 'Total number of grocery items',
        img: 'https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9'
    }

      convertDate = (str) => {
        lconsole.log('from convertDate')
    };

    addGrocery = (grocery) => {
        console.log('add grocery function')
    }


    removeGrocery = (id) => {
        console.log('remove grocery function')
    }

    editGrocery = (id) => {
        console.log('edit grocery function')
    }


    onSaveEdit = (id) => {

        console.log('on save edit function')
    }


render() {
        console.log(this.state.groceries)
        return (
            <GroceryContext.Provider value={{
                ...this.state,
                headerObj: this.headerObj,
                addGrocery: this.addGrocery,
                removeGrocery: this.removeGrocery,
                editGrocery: this.editGrocery,
                onSaveEdit: this.onSaveEdit
            }}>
                {this.props.children}
            </GroceryContext.Provider>
        )
    }
}

const GroceryConsumer = GroceryContext.Consumer;

export { GroceryProvider, GroceryConsumer }

index.js

Now in index.js we import React from react, BrowserRouter as Router from react-router-dom , GroceryProvider from context.js and App from App.js .

So that the entire app has access to the context api , we wrap the Router and App component inside the GroceryProvider.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { GroceryProvider } from './context';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <GroceryProvider>
    <React.StrictMode>
      <Router>
        <App />
      </Router>
    </React.StrictMode>
  </GroceryProvider>
  ,
  document.getElementById('root')
);

Now we can test our console.log in context.js file and it should return the grocey data.

App.js

Next, in our App.js file we create a class base component and import React, switch, route, Top, GroceryList, AddGrocery, EditGrocery, as seen below.

react-router-dom , it comes with:

Browser router - holds all info about our route
route - this will display specific routes
Link - serves as an anchor tag

Inside React.Fragment is followed by the Top component which will be displayed at the top of our application . We are using React.Fragment to mimic HTML to serve as a parent div and we export the App.js component. We will then add 3 routes, for Home (/) which will be the GroceryList, routes for adding new Groceries (/add) which is the AddGrocery and edit route (/edit/:id) which is the EditGrocery . We are have :id so as to edit specific Grocery.

Next we create the Top component.

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Navbar from './components/Navbar';
import GroceryList from './components/GroceryList';
import AddGrocery from './components/AddGrocery';
import EditGrocery from './components/EditGrocery';
import './App.css';


class App extends Component {

  render() {

    return (
      <React.Fragment>
        <Top />
        <Switch>
          <Route exact path="/" component={GroceryList} />
          <Route path="/add" component={AddGrocery} />
          <Route path="/edit/:id" component={EditGrocery} />
        </Switch>

      </React.Fragment>
    )
  }
}


export default App;

Top.js

Top.js is our header component. We import React, GroceryConsumer so that we have access to all our data, useLocation, and Link . useLocation returns the current url, Link is like an anchor tag such as href and helps with navigation of our app.

import React from 'react';
import { GroceryConsumer } from '../context';
import { useLocation, Link } from 'react-router-dom';


function Top() {
    let location = useLocation();
    //console.log(location.pathname)
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-8 col-lg-8" id="banner">
                    <GroceryConsumer>
                        {(value) => {
                            return (
                                <img src={value.headerObj.img} alt="groceries" />
                            )
                        }}

                    </GroceryConsumer>
                </div>
                <div className="col-md-4 col-lg-4">

                    <GroceryConsumer>
                        {(value) => {
                            return (

                                <div>
                                    <h1 className="mt-3">
                                        {value.headerObj.title}
                                    </h1>
                                    <h5><i>{value.headerObj.text} - {value.groceries.length}</i></h5>
                                    <button className="btn btn-lg btn-success mt-5">
                                        {location.pathname === '/' ? <Link to="/add">Add Grocery</Link> : <Link to="/">Home</Link>}
                                    </button>
                                </div>
                            )
                        }}

                    </GroceryConsumer>
                </div>
            </div>
        </div>
    )
}

export default Top

GroceryList

First we import react, GroceryConsumer, GroceryItem . Then return a container div with tables. This will where our grocery items will be added.
Since we have access to the groceries array from GroceryConsumer, we loop on the array using the map function which returns a GroceryItem with key and grocery . These are passed as props and will be used in the GroceryItem component . We are also returning a key because react requires all items to have unique identification.

At this point we will an error because our GroceryItem component is not returning anything yet. Next we work on the GroceryItem.

import React, { Component } from 'react';
import { GroceryConsumer } from '../context';
import GroceryItem from './GroceryItem'

export default class GroceryList extends Component {
    render() {
        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-md-12 col-lg-12">
                            <table className="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Qty</th>
                                        <th scope="col">Exp</th>
                                        <th scope="col">Category</th>
                                        <th scope="col">Edit</th>
                                        <th scope="col">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <GroceryConsumer>
                                        {(value) => {
                                            console.log(value)
                                            return value.groceries.map(grocery => {
                                                return <GroceryItem key={grocery.id} grocery={grocery} />
                                            })
                                        }}
                                    </GroceryConsumer>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )


    }
}

GroceryItem

In GroceryItem compoent we import React, GroceryConsumer, moment from moment (we installed this earlier), and Link from react-router-dom .

Next, we create convertDate function that converts the date string for expiration to timestamp and we use the moment funtion to convert to friendly format e.g. 10 hours ago. After, the render method we destructure id, name, image, qty, expiration, category that was passed as props from GroceryList component. We are also using GroceryConsumer here because will need access to two functions editGrocery and removeGrocery. These two functions are not created yet, but we will create them later in context.js.

Next, we then pass in the values of name, image, qty, category . Now when we run npm start our application should have all the items displayed on our frontpage. Next we work on the AddGrocery component.

import React, { Component } from 'react';
import { GroceryConsumer } from '../context';
import moment from 'moment';
import { Link } from 'react-router-dom';

export default class GroceryItem extends Component {

//convert date string
    convertDate = (str) => {
        let date = new Date(str),
            mnth = ("0" + (date.getMonth() + 1)).slice(-2),
            day = ("0" + date.getDate()).slice(-2);
        let covertedDate = [date.getFullYear(), mnth, day].join("-");
        return moment(covertedDate, 'YYYYMMDD').fromNow();
    };
    render() {
        const { id, name, image, qty, expiration, category } = this.props.grocery;
        console.log(this.props.grocery)

        return (
            <GroceryConsumer>
                {(value) => (
                    <tr>
                        <th scope="row"><img src={image} className="img-fluid rounded" id="tomato" alt={name} /></th>
                        <td>{name}</td>
                        <td>{qty}</td>
                        {/* <td>{grocery.expiration}</td> */}
                        <td>{this.convertDate(expiration)}</td>
                        <td>{category}</td>
                        <td><Link to={"/edit/" + id}><span onClick={() => { value.editGrocery(id) }} ><i className="fas fa-pen"  ></i></span></Link></td>
                        <td ><span onClick={() => { value.removeGrocery(id) }} ><i

                            className="fas fa-trash"></i></span></td>
                    </tr>
                )}

            </GroceryConsumer>
        )
    }
}

AddGrocery

In AddGrocery component, we go ahead and import React, GroceryConsumer, DatePicker (we installed this as a dependancy before).

We then create AddGrocery class component and export it. Next we create a state object with name, image, category, expiration and qty. After, this we create functions that will handle the state changes for each state properties.
After the render method we return div container with the AddGrocery form.

Notice we are using the GroceryConsumer so that we have access to the addGrocery method, also note the use of the Datepicker for the date calendar. Next we look at the EditGrocery component.

import React, { Component } from 'react';
import { GroceryConsumer } from '../context';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export default class AddGrocery extends Component {

    state = {
        name: '',
        image: '',
        category: '',
        expiration: new Date(),
        qty: ''
    }

    handleChangeName = (e) => {
        this.setState({
            name: e.target.value
        })
        console.log(this.state.name)
    }

    handleChangeImage = (e) => {
        this.setState({
            image: e.target.value
        })
    }

    handleChangeCategory = (e) => {
        this.setState({
            category: e.target.value
        })
    }

    handleChangeExpiration = (date) => {
        this.setState({
            expiration: date
        })
    }

    handleChangeQty = (e) => {
        this.setState({
            qty: e.target.value
        })
    }

    render() {
        return (
            <div className="container">
                <GroceryConsumer >
                    {(value) => {
                        //console.log(value)
                        //console.log(this.props)
                        this.handleSubmit = (e) => {
                            e.preventDefault();
                            value.addGrocery(this.state)
                            this.setState({
                                name: '',
                                image: '',
                                qty: '',
                                category: '',
                                expiration: new Date()
                            })
                            this.props.history.push('/')
                        }
                        // value.convertDate(1595886543865)
                        return <form onSubmit={this.handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="Name" >Name</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={this.handleChangeName}
                                    value={this.state.name}
                                    required
                                />
                            </div>
                            <div className="form-group">
                                <label htmlFor="Image" >Image</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={this.handleChangeImage}
                                    value={this.state.image}
                                    required
                                />
                            </div>
                            <div className="form-group">
                                <div className="form-control">
                                    <label htmlFor="Quantity" >Quantity</label>
                                    <input type="number"
                                        onChange={this.handleChangeQty}
                                        value={this.state.qty}
                                        required
                                    />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="form-control">
                                    <label htmlFor="ExpirationDate">Expiration</label>

                                    <DatePicker selected={this.state.expiration} required onChange={this.handleChangeExpiration} />
                                </div>
                            </div>
                            <div className="form-group">
                                <label htmlFor="Category" >Category</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={this.handleChangeCategory}
                                    value={this.state.category}
                                    required
                                />
                            </div>
                            <div className="form-group center">
                                <button type="submit" className="btn btn-primary">Add</button>
                            </div>
                        </form>
                    }}
                </GroceryConsumer>
            </div>
        )
    }
}

EditGrocey

We import React, Link, GroceryConsumer, DatePicker and create a class component called EditGrocery . After the render method we return a form element and the GroceryConsumer that gives us access to some methods defined in context.js and we export the class component.
Next, we will go back to context.js where we complete the functions we created.

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { GroceryConsumer } from '../context';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


export default class EditGrocery extends Component {

    render() {

        return (

            <div className="container">
                <GroceryConsumer >
                    {(value) => {
                        return <form >
                            <div className="form-group">
                                <label htmlFor="Name" >Name</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={(e) => { value.changeValue(e, 'name') }}
                                    value={value.name}
                                    required
                                />

                            </div>
                            <div className="form-group">
                                <label htmlFor="Image" >Image</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={(e) => { value.changeValue(e, 'image') }}
                                    value={value.image}
                                    required
                                />

                            </div>
                            <div className="form-group">
                                <div className="form-control">
                                    <label htmlFor="Quantity" >Quantity</label>
                                    <input type="text"
                                        onChange={(e) => { value.changeValue(e, 'qty') }}
                                        value={value.qty}
                                        required
                                    />
                                </div>
                            </div>


                            <div className="form-group">
                                <div className="form-control">
                                    <label htmlFor="ExpirationDate">Expiration</label>
                                    <DatePicker selected={value.convertDate(value.expiration).selected}

                                        required
                                    />
                                </div>
                            </div>

                            <div className="form-group">
                                <label htmlFor="ChemicalName" >Category</label>
                                <input type="text"
                                    className="form-control"
                                    onChange={(e) => { value.changeValue(e, 'category') }}
                                    value={value.category}
                                    required
                                />

                            </div>

                            <div className="form-group center">
                                <button onClick={() => { value.onSaveEdit(value.id) }} type="submit" className="btn btn-primary"><Link to="/">Save</Link></button>
                            </div>
                        </form>
                    }}

                </GroceryConsumer>
            </div>
        )

    }
}

Context.js continued

addGrcery

The addGrocery method adds new Grocery item to the inventory. The uuid we imported earlier helps in generating unique id.
We create a variable groceries , using the spread operator we add the exiting grocery items in the array and add the new grocery item. We then use setState to update the new object state with the new added grocery item.

addGrocery = (grocery) => {
        //let tempGroceries = [...this.state.groceries];
        grocery.id = v4();
        let groceries = [...this.state.groceries, grocery]
        this.setState(() => {
            return { groceries: groceries }
        })
    }

getGrocery

The getGrocery method returns a grocery item that is clicked . It does this by comparing the grocery item id that equals to the grocery id that is clicked using the find method.

//returns grocery with id that is clicked
    getGrocery = (id) => {
        const grocery = this.state.groceries.find(grocery => grocery.id === id)
        return grocery;
    }

removeGrocery

The removeGrocery method, removes grocery item that is clicked.
First we create a temporary array with all groceries. Then using the filter method on the temp array, it removes grocery id that is clicked.

  removeGrocery = (id) => {
        let tempGroceries = [...this.state.groceries];
        tempGroceries = tempGroceries.filter(grocery => grocery.id !== id);
        //const index = groceriesDB.indexOf(this.getGrocery(id))
        this.setState(() => {
            return {
                groceries: [...tempGroceries]
            }
        })
    }

changeValue

This method checks the input value if equals to the string e.g. name and updates the the state properties.
We created the variable tempArr to get the properties and values of the grocery item to be edited as this will be used later in the saveEdit function.

    changeValue = (e, value1) => {
        if (value1 === 'name') {
            this.state.name = e.target.value;
        }
        if (value1 === 'image') {
            this.state.image = e.target.value;
        }
        if (value1 === 'expiration') {
            this.state.expiration = e.target.value;
        }
        if (value1 === 'category') {
            this.state.category = e.target.value;
        }
        if (value1 === 'qty') {
            this.state.qty = e.target.value;
        }
        if (value1 === 'searchCategory') {
            this.state.searchCategory = e.target.value;
        }

        const tempArr = [
            this.state.id,
            this.state.name,
            this.state.image,
            this.state.expiration,
            this.state.qty,
            this.state.category
        ]
        console.log(tempArr)
        this.setState({
            updateEdit: tempArr
        })
        console.log(this.state)
    }

editGrocery

This function is called when the edit icon is clicked in the GroceryItem component. First we pass in an id as a parameter and create a temporary groceries array, then we get the index of the grocery item clicked and store the index number in the index variable; and we now assigned the clicked grocery item object to selectedGrocery. Using setState, we update each of the state properties e.g. id, name.

editGrocery = (id) => {
        let tempGroceries = this.state.groceries;
        const index = tempGroceries.indexOf(this.getGrocery(id));
        const selectedGrocery = tempGroceries[index];
        this.setState({
            id: selectedGrocery['id'],
            name: selectedGrocery['name'],
            qty: selectedGrocery['qty'],
            expiration: selectedGrocery['expiration'],
            image: selectedGrocery['image'],
            category: selectedGrocery['category']
        })
    }

onEditSave

This function saves the selected grocery item that is changed.
If id is true,

we create a groceries array as and assign it to a vairable groceriesArr.
Get the index of a selected grocery item and assign it to variable index
Create a variable record, which is the selected grocery item.
Update property name of selected grocery item.
Update state with setState and reset the input values to be empty.

 onSaveEdit = (id) => {

        if (id !== null) {
            const groceriesArr = this.state.groceries; 
            const index = groceriesArr.indexOf(this.getGrocery(id));
            const record = groceriesArr[index];
            //update selected property name
            record['name'] = this.state.updateEdit[1];
            record['image'] = this.state.updateEdit[2];
            record['expiration'] = this.state.updateEdit[3];
            record['qty'] = this.state.updateEdit[4];
            record['category'] = this.state.updateEdit[5];
            this.setState({
                groceries: [...this.state.groceries],
                id: '', name: '', image: '', expiration: '', qty: '', category: ''
            })

            console.log(this.state)
            console.log(this.state.updateEdit)

        }
    }

Running our application, we can now add a new grocery item, edit, and delete grocery item.

Conclusion

Congratulation, we have succesfully created a Grocery Inventory Tracker, that tracks expiration and quantity.

This app is built using react state , next we will look at building same app using react hook.

Cover photo by nrd on Unsplash

Build a Random Quote Machine with React

Tunde Oyewo — Sun, 14 Jun 2020 13:49:33 +0000

Click here to view the Demo

This tutorial is about how to build a simple Random Quote generator using React and to be able to share the quote on twitter.
The goal of this tutorial is to show how to use React state and Function to create a simple react app.

App Folder Structure

Using Create-react-app , we will create a boilerplate that will create the Public folder, this will contain the index.html file, the src folder that will contain the component folder . On the root level of the src folder we will have the index.js and App.js file . This app will have only the frontend. The database will be at the root of the src folder named QuoteDB.js. We will be using bootstrap cdn and font awesome cdn .

Creating React app

The fastest way of creating a react app is using the command npx create-react-app random-quote . This will create the boilerplate to get our files ready.

App Component

Inside the src folder is the App.js file that was created using create-react-app , but we will now modify it to suit our purpose . First we create a folder called components and inside it we also create just one file called QuoteAndAuthor.js . We are using components folder just for the purpose of learning . We could have created all files needed on the root of src folder.

In the App.js we will create a state object with the quote and Author as properties and the generateRandomQuote function that will generate the quotes at random. We will remember to import react from react, QuoteAndAuthor.js from the components folder and also import the Database from root of the src folder. We will create both files later.

We also have the shuffleQuote function that helps to randomize the quote at different clicks. The last thing we will do on the App.js is to return the QuoteAndAuthor.js component with the generateRandomQuote function and state object

import React, { Component } from 'react'
import QuoteAndAuthor from './components/QuoteAndAuthor';
import quotes from './QuoteDB';

export default class App extends Component {

  //state
  state = {
    quote: quotes[0].quote,
    author: quotes[0].author
  }

  //generate diffrent quote function
  generateRandomQuote = (arr) => {
    //get random numbers
    let num = Math.floor(Math.random() * quotes.length)

    let newQuote = quotes[num];

    //update state
    this.setState({
      quote: newQuote.quote,
      author: newQuote.author
    })

    this.shuffleQuotes(quotes)

  }

  //shuufle quotes function
  shuffleQuotes = (arr) => {
    return arr.sort(function () { return 0.5 - Math.random() });
  }

  render() {
    return (
      <div className="container">
        <h1 className="text-center">Random Quote</h1>
        <QuoteAndAuthor
          generateRandomQuote={this.generateRandomQuote}
          quote={this.state}
        />
      </div>
    )
  }
}

Index.js

No changes will be done on the index.js file, we will use the default created by the create-react-app boilerplate

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Index.html

Index.html is in the public folder, the only change we will do is adding the bootstrap and font awesome cdn links

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

  <!-- bootstrap-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Quote Generator - React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <!--font awesome-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

  <!-- bootstrap-->
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</body>

</html>

QuoteAndAuthor.js

In QuoteAndAuthor.js file first, we will import both react and the database. Here we will be using react function as we will only be displaying the output from App.js file.
In QuoteAndAuthor.js file, we will need to pass in props to the QuoteAndAuthor function as this is not passed by default and then destructure quote and generateRandomQuote so that we have access to them.
Note that we have two buttons. One to generate the Quotes and the other button to share the quote on twitter.

import React from 'react'
import quotes from '../QuoteDB'

export default function QuoteAndAuthor(props) {

    const { quote, generateRandomQuote } = props;
    return (
        <div className="card" >

            <div className="card-body">
                <p className="card-text">{quote.quote}</p>
                <h5 className="card-title">- {quote.author}</h5>
                <button
                    onClick={() => { generateRandomQuote(quotes) }}
                    type="submit">
                    <i class="fas fa-mouse"></i> Generate Quote</button>
                <button
                    className="ml-3"
                    onClick={() => {
                        generateRandomQuote(quotes);
                        window.open('https://twitter.com/intent/tweet/?text=' + encodeURIComponent(quote.quote + '--' + quote.author))
                    }}
                    type="submit"><i class="fab fa-twitter"></i> Share Quote</button>
            </div>
        </div>
    )
}

Database

For this project, our database is in QuoteDB.js file and just an array with objects. We will also need to export this file so that other components and file will be able to access it.

const quotes = [
    {
        "quote": "Forget all the reasons why it won't work and believe the one reason why it will",
        "author": "Unknown"
    },
    {
        "quote": "Always do what you are afraid to do",
        "author": "Ralph Waldo Emerson"
    },

    {
        "quote": "Don’t be intimidated by what you don’t know. That can be your greatest strength and ensure that you do things differently from everyone else.",
        "author": "Sara Blakely"
    },
    {
        "quote": "If you keep on doing what you've always done, you will keep getting what you've always gotten.",
        "author": "Unknown"
    },
    {
        "quote": " For God so loved the world that he gave his one and only Son, that whoever believes in him shall not perish but have eternal life. John 3:16",
        "author": "Jesus Christ"
    },
    {
        "quote": "The surest way to find your dream job is to create it.",
        "author": "Unknown"

    }
]

export default quotes;

Conclusion: Build a Random Quote Machine with React

We are able to create a simple random quote machine using create-react-app. Some of the things we learnt include creating react app using the npx create-react-app that creates for us the boilerplate. In App.js, we used react state component and react functional component in QuoteAndAuthor.js to output our quotes and authors, and created a function to generate quotes .

We also created a QuoteDB.js file which host all our quotes and used font awesome for icons. Congratulations we successfully created a Quote Generator!. To start the App, we run npm start. Happy coding!
Git repo here

Cover Photo by Nathan Lemon on Unsplash

.ltag__user__id__406226 .follow-action-button { background-color: #093656 !important; color: #ffffff !important; border-color: #093656 !important; }

Tunde Oyewo

Software Developer | Cloud Architect | Photography enthusiast

tunde_oyewo thinkC