Skip to content

Latest commit

 

History

History
197 lines (88 loc) · 11 KB

README.md

File metadata and controls

197 lines (88 loc) · 11 KB

Parch-Posey-Customer-Portalv4

Link to the repo for the backend application that supports this React Application.

WELCOME!!

Screen Shot 2022-02-15 at 2 55 39 PM

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

HEROKU

Please see this Guru Card on Heroku.

RUN LOCALLY

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.

HOW TO UPDATE LIVE VERSION

Screen Shot 2022-02-17 at 9 44 21 AM

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"

Screen Shot 2022-02-17 at 10 07 32 AM

When you are on the right branch, in the tool bar just above the files, select "Pull requests"

Screen Shot 2022-02-17 at 10 07 52 AM

And then click "Create pull request" to merge the branch to the "Main" branch.

Screen Shot 2022-02-17 at 10 08 12 AM

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.

Screen Shot 2022-02-17 at 10 08 28 AM

And the app should be updated!!!

COMPONENTs

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.

App.js

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.

Screen Shot 2022-02-17 at 11 25 45 AM

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

User Auth Methods

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.

Screen Shot 2022-02-17 at 11 27 46 AM

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.

Screen Shot 2022-02-17 at 11 27 53 AM

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.

app.css

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.

Screen Shot 2022-02-17 at 11 39 21 AM

mainContainer.js

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.

Screen Shot 2022-02-17 at 11 45 05 AM

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.

Screen Shot 2022-02-17 at 11 49 11 AM

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.

Screen Shot 2022-02-17 at 11 52 32 AM

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!!!

Buttons Folder

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.

Embed Folder

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.

login.js

Screen Shot 2022-02-17 at 11 58 42 AM

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

header.js

Screen Shot 2022-02-17 at 12 00 55 PM

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.

assets

This section contains all the images,jpgs that are used in the app such as the "P" logo and the login icons.

HAPPY HACKING, PLEASE FEEL FREE TO REACH OUT TO A POST-SALES SOLUTION ENGINEER IF YOU HAVE ANY QUESTIONS