Link to the repo for the backend application that supports this React Application.
Welcome to the 4th version of Parch & Posey's WLE Customer Portal! This version utilizes React, Heroku, Node and Express to showcase WLEs. Here are the reports that embeded within the Application.
Overview - https://app.mode.com/demo/reports/635ba62f4a21
All Orders - https://app.mode.com/demo/reports/cb3fcbd2efeb
Please see this Guru Card on Heroku.
To run the application locally you will have to clone down a copy of this repo and then install the dependencies. Here is a guide on how to clone down a repo to your local machine.
Once you have the repo cloned down to your local machine, use your package manager to install all the dependencies in the package.json file. This app was built using NPM, so the following example would be how to run the command in NPM.
npm install
Once everything is installed, to start the app and run it on a local server please use the following command.
npm start
That command should pop-up a window with the app running on local host.
Once the app is running locally, you can use your IDE to make changes to the code. Most folks use VS Code (Visual Studio) or Atom. Feel free to use which every IDE you would like.
Before you make a change though, please branch off the "Main". It is good practice to make branches to update applications and it will ensure that the production site is clean.
To create a branch in your IDE, open up a terminal. If you IDE doesn't have a terminal feature, that is why you should use VS code. Just kidding, but not really. Open up your terminal and navigate to the path of the application. If you just completed the step above you should already be within it. If not just go to the file where you are storing the local version of the application.
From your main directory it should look something like the following:
cd ENTER_NAME_OF_DIRECTORY
cd ENTER_NAME_OF_FILE_HOUSING_APP
on my computer it would be the following:
cd solutions_examples
cd parch-posey-react-app
Now from there we will create a branch so that we can work off that branch:
First check if there are unstaged changes
git status
Most likely there aren't, if there are just discard them. We will then create the new branch and change over to it. The following command does both of those things at once:
git checkout -b NAME_OF_BRANCH
Once in the branch, make all the changes needed. For guidance on what things do and where they are please go to the guide below. Now when all changes are done, commit the changes up to Github.
git add .
git commit -m"Add a message of what you did"
git push
Now that the branch is updated in Github, we can go into the Github UI (website) to make a Pull Request to merge our branch to the "Main" branch. In the repo, select the newly created branch. In the image below the new branch is "example"
When you are on the right branch, in the tool bar just above the files, select "Pull requests"
And then click "Create pull request" to merge the branch to the "Main" branch.
Github will merge the branches so long as there aren't conflicts. If there are any conflicts, it will show you a line by line breakdown where you can correct the conflicts. Now we can merge the request and close the branch.
And the app should be updated!!!
This application is built using React, which is a fun frontend framework to use. React constructs a single page application that contains an ecosystem of elements that are dependant on parent-child relationships and variables called State that can update various components when they change.
In our Parch and Posey app we use very simple components to render the single page and the iFrames within the signed URLs. For simplicity I will only cover the main-page folder within the src folder. That is where most of the magic happends and where most likely changes will happen.
The App is a component that houses all of our parent components. In it we have we have most of the user related methods and state variables.
When a user first goes to the page, all of the values in the user State will be empty by default. Once they use a valid username/password combo, our backend will update these values. Once they are updated, we can access them in all child components of app.js
The methods to validate a user also live in the app.js component. These methods get passed down as props to the child components to ensure we are getting the right user information. In this case, we are passing these methods down to the login.js component which is the landing page.
The handleLogin method will call our backend API with the values the user enters into the username and password fields using axios. If the call succeeds, it will return a JWT token, which is how we know a user is logged into the application, and will set the user state with all the information about the user.
If it fails, because it could not find a user, it will return a "Incorrect Username/email" message.
The handleLogut method does everything in reverse. It will clear the JWT token, and make the user state empty. Once the state is empty, React will send the user to the signin page.
And the final method is the handleinput method. All it does is record what a user types in the username/password fields and sends it to handleLogin method. So it is a helpful, helper function.
Is where all the styling for the application is handled. Each section is marked within the file and the class names are pretty clear so that you know what you're updating.
Is the 2nd largest component which houses the iFrames, toggleButtons, and the export buttons. It too will receive variables from the parent, app.js, but it will also send down it's own variables to it's children.
It has two state variables. The first is activeId which identifies which report the user wants to see. It defaults to "Overview". The 2nd is links, this variable will record the CSV download link returned by the iFrame to allow users to download CSV data from the reports.
The mainContainer.js alos has methods that are passed down to children to assist with keeping state updated. The first is handleClick which will do as it is named. When a user clicks on the toggleButtons, it will cause a cascading effect throughout the components.
If we click "All Orders", the components will re-render and change the report to the "All Orders" report. This happens because we change the activeId on the click event, when that value is changed it will send the new value downstream which will make a new request to get the signedURL for that report.
The above is the HTML of how a component will be constructed and how we pass values to children components. Using the values in buttonData.json, which is just a json object of the possible reports, we create a toggleButton for each report using a map method. Map is just a way to iterate through a collection of values.
As we do this, we are passing down values to the child components as attributes.
In the example above we are passing down the handleClick method so that we can update the value of the chosen report. We also pass down the current value of activeId so that the component can know which to highlight.
And you are now a sort of React expert!!!
This folder containers the buttonData.json object that let's us know which repairs we can toggle through. It also contains all of the export button components.
The embed folder contains the iFrame component that will make a request to our backend to sign a report URL and deliver it back. When the report is returned from the backend, the embed.js component will add it to an iFrame and render it to the page.
This component is what builds the landing page. It contains all the fancy SVGs that make up the design on the page. Also it will use the handleLogin and handleLogut methods listed in app.js
This component will only render when a user is logged into the application. It contains the "P" logo, the application title with the customer's name and the logout button.
This section contains all the images,jpgs that are used in the app such as the "P" logo and the login icons.