Device catalogue #12
Open
Device catalogue #12
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
… and iPhones. Added links to new files
Fetched data from routes for watches and iphones. Set their state and populated the view list with the data.
Removed Nav details from App page and seperated them into new Nav component. Added new library lodash to project.
Added new custom component Heading for all pages Added new custom component for the product displays to both watches and iphones pages. Nav - Included Box component and altered code to be more Telus friendly. Added @tds components to the page files to reflect more Telus styling.
Removed fetch call and added to context files. Wrapped the appropriate components with the expexted Provider in order to access the data. In the product components, importing the data from the expected Provider and passing to the ProductPage component.
Created style folder for project and addd theme colors to file as variables. Imported theme to Nav component and used the Telus brand colors. Added style sheet to Nav component to seperate styles from component. Altered webpack to accept scss files to bundle.
Added new prop to PageProduct to determine which product gets passed to component to show relavant elements. Added Flex grid to align the different pages with the headers. Altered Image components width to decrease size.
…ing. Added @testing-library/react to package.json to try to solve issues with unit testing components. Added new mock folder to try to solve issue with testing. Jest returns error when importing images and stylesheets. In context files, I switched fetch to axios to solve jest error that was happening. It solved the issue. In the files that were importing the provider data of watches and iphones, I alterd teh object that was being mapped. The change from fetch to axios caused an error in the mapping. Added a new test case to check if PageHeading component is rendering.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This project was 3 pages, Home, Watches and iPhones. The product pages (Watches and iPhones) were wrapped around a context provider that was controlling the state, simulating data coming from a state management source.
Had issues with unit testing. Jest does not like importing scss files and images in the test. I was testing some fixes that I found but could not make it work, need more research into it and Jest.
Other than that it was a fun project, very easy to use @tds components.