tmcmeans / election-match Goto Github PK

Handle UI/UX to display progress bar while election data is being fetched

• Create loader component
• Serve up some JSX (img or gif) to display loader when data is being fetched

Use jest/enzyme for testing purposes.

• Test that methods are called with correct arguments
• Test that methods return correct OCD-ID address translation

Although not part of the project specs, it is an enhancement for the app.

Use jest/enzyme for testing purposes.

• Test that fetch API has been called with the correct arguments
• Test that fetch API throws an error if something goes wrong in the fetch call (sad path)
• Test that async method returns some election results data if response is ok (happy path)

Although I am trying to parse out async/data cleaning methods to a helper file, I'm sure I will be using the AddressForm component to save user data via a controlled form.

• Test that AddressForm component methods are called
• Test that state has changed when form data changes (controlled form)

Although I am trying to parse out async/data cleaning methods to a helper file, I'm sure I will be using the App component in some capacity to make fetch calls.

• Render child components in App
• Add onSubmit method for changing data
• Pass props to child components

I can't make requests from the client, it is blocked by CORS.

This React component will be a controlled form that will save the user's address data in object format in local state on submit.

• Create stateful React component
• Create controlled form for user address entry
• Create handleInputChange method for saving user data to component's local state
• Create onSubmit method skeleton for making fetch calls to DW Elections API
• Add form validation for users

Although not part of the specs for this project, it is an enhancement.

Although I am trying to parse out async/data cleaning methods to a helper file, I'm sure I will be using the App component in some capacity to make fetch calls.

• Test that App component methods are called
• Test that state has changed when data/props change

Use ESLint or another code formatting tester for project professionalism.

Use jest/enzyme for testing purposes.

• Snapshot tests for App
• Snapshot tests for AddressForm
• Snapshot tests for CardContainer
• Snapshot tests for ElectionCard
• Snapshot tests for Loader

• Make sure documentation reads well
• Update instructions for running the app on any computer
• Add screenshots of key features

The CardContainer component will be the wrapper that each ElectionCard component will live in.

• Create CardContainer as a functional component to just return some JSX
• Use data-down/actions-up React architecture to pass election data from App component to CardContainer and down to each ElectionCards
• Create ElectionCard as a functional component to just return some JSX
• Display CardContainer and ElectionCards when user hits submit

Parse out async functionality to a helper file.

• Create fetch call method for consuming election data
• Import Apicalls.js file to App to be called during component lifecycle