This repository has been archived by the owner on Nov 23, 2021. It is now read-only.
React Refactoring #172
Open
React Refactoring #172
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
DangaRanga
commented
Jan 6, 2021
DangaRanga
commented
- Sidebar and Header Components started with completed Unittests (more to be added as more is added to the components)
- Completed Unittests for the api objects
- Added unittest stubs for the components to be implemented
React App created and flask implementation removed. React allows for easier maninpulation of GraphQL data, as well as, creation of dynamic charting data.
Initially pattoo_web React App structure done, separating components based on desired routes such as login, dashboard, etc.. Started developing login page, with creation of login.js component and login.css stylesheet.
Restructure so that file structure for source folder(src) is much shallower.
Login refactored to utilized tailwindcss, as well as, Sidebar component also refactored. Routes and related components separated to separated logic and design.
Base template contains current page title, as well as, Sidebar for each page.
Completion and layout of dashboard page design.
Allow user authenitcation and basic protected routing based on whether acesssToken and refreshToken are present on the client. Inital data querying and updates to charts on Dashboard.
Update pattoo-web colorscheme by extending colors through tailwind-css configuration.
Query for user chart favorites in the dashboard, using query function from api.js. Update Dashboard to dynamincally generate charts based on the number of favorite charts the user has, and whether each given chart has at least one datapoint associated for it be rendered. Minor changes by removing query string from auth function in graphql_client to api.js module.
Dashboard fully re-design to match UI/UX design. Updates to Recently Updated status card to have button toggles to show charts for user Favorites, all charts and recently update agents. Sidebar also updated to reflect new colors and design.
Initial creating and configuring of ReactModal to house the ability to create new charts, and chart favorites. Updates to Login.js component colors and updates to pattoo logo throughout application.
Used third-party React package `React Modal` to create form.
Added installation and setup guide for pattoo-web for local machine usage currently if pattoo-api is running on the same machine.
__Issue__: Previous file structure had no general or clear purpose. __Fix__: 1. Create segment folders for each related group of project components in the source folder: - components - routes - utils 2. Remove redudnat folders from previous iterations of pattoo-web. 3. Reduce project depthed by deleting `pattoo_web` folder and making the root of project one less in folder depth. 4. Create folders for each module witih structure: - module-name.js - module-name.test.js - module-name.css `react component` - index.js `exports default and other functions from module` - components `child react components associated with parent react component` 5. Create and renamed main react routing folder `routes` to have a module called `RouteClient` which handles registering new routes.
__Issue__: After restructing application, things began to break due to incorrect module/file imports. __Fix__: Moved down and across application filesystem and added in the necessary relative module/file imports to resolve issue.
React refactoring (header and sidebar components)
heyjordn
suggested changes
Jan 18, 2021
There was a problem hiding this comment.
@DangaRanga @Dev-Dominic Is this ready to be merged? From checking out the source and running the PR it seems that there are some screens missing
my bad, we didn't merge the branch we were making the changes on as yet. |
|
@DangaRanga Let me know when to review again |
Protected Routes and Basic Changes to mutations
React refactoring
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.