ReactJS

Index.js

The first thing that you want to do when creating an app using React, is setting up an Index.js page. This file renders our main React component onto our root element.

Next, we want to create a header file called 'mainNavigationPage.js'

Our navigation page contains a link to our home page ('/') and a link to our AddOrder.js page ('/add'). We call the Link component instead of the anchor tag to prevent the page from refreshing each time a user clicks on a link. You can import the Link component through calling import { Link } from 'react-router-dom';

AddOrder.js

Next, we want to create an order page that allows the user to add their own order. We'll call this file AddOrder.js.

We'll be calling for our AddOrder component in both our App Router and our Order Form. In this file, we display an OrderForm component that contains a submitHandler method which is processed once a user submits the form. Note, that we use the useNavigation hook to navigate back to our home page once a user has clicked the submit button on the order form.

Notice how we've called for useContext, which is a React Hook used to create common data that can be accessed throughout our component heirarchy without needing to pass props at each level. In this case, we are creating an orders and setOrders array to pass data and update data based on a user's orders.

In our const submitHandler, we used a spread operator (the three dots in [order, ...orders]). This allows us to quickly copy all the data of an existing array/object into another array/object. It's much more efficient to write than creating a for each loop and parsing through each piece of data.

Finally, if you were wondering what '<>' and its closing tag were doing in our return section, they are actually React Fragments that allow you to group multiple elements without adding an addition node to the DOM. It's particularly useful when rendering child elements into a single parent Component.

OrderForm.js

Now that we've created our AddOrder.js page, let's create an actual Order Form that serves as a guide for users to enter and store information about their ice cream order. We'll call this page OrderForm.js

Here, we define a state as an object to store details. We use the ternary operator "?" to see if the order property has been passed in or not by the user. If the order property has been passed in, the property's value becomes the order value. Otherwise, it becomes ''. This will be used when adding editing an order.

This section in our OrderForm.js file checks whether or not the form is completely filled out. We define the state as an object called whoospie that stores an empty string. If any of the fields in the order form are missing or if any of them display the first message of the dropdown menu telling the user the options to choose from (ie: "Choose an Ice-Cream Holder!"), whoospie becomes equal to "Gotta fill out all dem fields lad' and thus returns false. If all of the fields have been filled out, we create an order that contains each field.

If CompleteFields is true, we'll create an order and declare props.submitHandler(order) which is declared in AddOrder.js. Check back to our AddOrder.js notes to see how it navigates back to our home page showing list of orders when the submit button is clicked.

Above is an example of one of the Form Groups that we create. In this case, we're asking the user how many scoops they want. We dispaly a dropdown menu of the various number of scoops we offer. Take note of the Form.Group, Form.Label, and Form.Control, which are all used to style forms in Bootstrap.

We add name and value in our Form Control to handle storing our input into key, value pairs. Declaring value ={} is super important and is used to add back the data when we want to edit a given order object.

OrdersList.js

Once the user has entered their order in, we want to create a list of orders in our home page to be able to search for the one that we want to see. We can do this by creating a file called OrdersList.js

Once again, we use the useContext hook to grab our list of orders that the user has entered. We then create a const for handling removed orders. If the user wants to delete an order, they will click the button delete to delete their order. Upon clicking the Delete button, handleRemoveOrder will be called and filter the saved orders to get rid of the order that contains its id. We also call for the removeSelection method which removes our order from the list as well.

Next, you can see that we've created another useState hook to keep track of the orders we're displaying in our list. We have a handleOnClick function that takes in an order and sets our Selection object to contain the single order.

Our first unordered list uses .map to display a list of all of our orders. Upon clicking a single order, the handleOnclick(order) function is called and sets our order selection to contain that order.

In our next section, we map out our selection to display the order that the user has clicked on. In this way, we implement a search feature. We utilize a ternary operator that checks whether or not the user has created any orders. If they haven't we display a message prompting them to 'Add an Order.' Otherwise, we display the list of orders based on the order name.

Order.js

Let's take a look now at how an actual order would look like once a user clicks on an order from the Order List. We'll call this file Order.js

Calling for the history object inside the Order component allows for us to edit the order. Depending on the order clicked will determine what is pushed into the history. The useNavigate will be used to send the user to the edit page.

Each order is styled as Bootstrap's Card. The Order contains all of the order details as well as both an edit and delete button. Note that giving each button a variant will change certain properties of the css based on Bootstrap's styling.

App.js

Finally, we'll create an App Router whose purpose is to transform our application into a Single Page Web Application. Let's call our file App.js.

We wrap everything in BrowserRouterto enable navigation between views from the various components we created in our React application. It allows for the UI to maintain sync with the URL while the browser's URL is being changed.

Every time our App runs, we'll make a call to our useLocalStorage component to store our orders into an array. Note how the first element we display is our MainNavigationPage, which is a component we created.

By wrapping everything in OrdersContext.Provider, we use the provider to pass data through the component tree without having to pass props down manually at each level. This means that any component can read it no matter how deep it is.