Advanced State Management Sprint Challenge

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

This challenge allows you to practice the concepts and techniques learned over the past sprint and apply them in a concrete project. This sprint explored advanced state management. During this sprint, you studied the reducer pattern, and redux.

In your challenge this week, you will demonstrate your mastery of these skills by creating the Smurf Village Database!

This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.

This is an individual assessment. All work must be your own. All projects will be submitted to codegrade for automated review. You will also be given feedback by code reviewers the Monday after challenge submissions. For more information on the review process click here.

You are not allowed to collaborate during the sprint challenge. However, you are encouraged to follow the twenty-minute rule and seek support by dropping a 👋 in your help channel when needed.

Sprint challenges open at Midnight PST on Thursday and close at 5pm PST on Friday. You will receive feedback on what you have finished and submitted by 5pm when the submissions will be closed. No retakes will be accepted.

Introduction

In this challenge, you are to build a Smurfs village database utilizing Redux as your state management system. Build this challenge from the ground up using what you have learned about state management.

Instructions

Task 1: Transfer Repo

• Clone this repository.
• Implement the project on your newly created branch, committing changes regularly.
• Push commits: git push origin .
• RUN npm install to install your dependencies.
• RUN npm start to start your application.

Task 2: Project Requirements

Your finished project must include all of the following requirements. Unlike other projects, the local server used here can not be accessed through the browser. It is started automatically and without the need for starting a server.js file. Feel free to ignore any messages related to MSW or mock service workers. For this and the rest of your sprint challenges, test the functioning of the server directly through your axios calls.

reducers/index.js

Add in the needed state and reducer cases to hold and modify smurf error messages, loading status and smurf data. If at all possible, add in action cases one at a time, instead of all at once. Test your state connects and reducer cases as nessisary.

• Adds the following state values into the initialState:

  • an array of smurfs
  • a boolean indicating if the app is loading
  • a string indicating a possible error message

• Add in the arguments needed to complete a standard reducer function.

• Add in a reducer case to accommodate the start of a smurf fetch.

• Add in a reducer case to accommodate the successful smurf api fetch.

• Add in a reducer cases to accommodate the failed smurf api fetch.

• Add in a reducer case to accommodate adding a smurf (including the name, nickname, position, description and an internally generated id) into your smurf list.

• Add in a reducer case that adds in a value to the error message.

index.js

Connect your application to reducer through redux with the thunk and logger middleware packages attached.

actions/index.js

Add in the action creators and action constants needed to add a smurf to state and fetch smurfs from the server. If at all possible, add in action cases one at a time, instead of all at once. Test your state connects and reducer cases as nessisary.

• Add a thunk action called fetchSmurfs that triggers a loading status display in our application, performs an axios call to retreive smurfs from our server, saves the result of that call to our state and shows an error if one is made.
• Add a standard action that allows us to add new smurf (including the name, nickname, position, summary).
• Add a standard action that allows us to set the value of the error message slice of state.

App.js

Connect this component to redux passing in your fetchSmurfs action only.

• Connect the fetchSmurfs actions to the App component.
• Call the fetchSmurfs action when the component first loads.

components/SmurfList.js

Connect this component to redux, passing in your smurf array and loading status state values.

• Connect the smurfs and loading state values to the SmurfList component.
• Replace the single Smurf component instance with a map return a Smurf component for each entry in the smurfs list.
• Replace the static isLoading variable with the state loading variable.

components/Smurf.js

You do not need to modify this component.

components/AddForm.js

Connect this component to redux passing in your error message state value, setError action and addSmurf action. Complete the form handling code.

• Connect the errorMessage, setError and addSmurf actions to the AddForm component.
• Replace all instances of the errorMessage static variable with your error message state value.
• Within the handleSubmit function, replace the static assignment to errorMessage with a call to the setError action. Test that an error is displayed when this validation code fails.
• Within the handleSubmit function, call your addSmurf action with the smurf name, position, nickname and summury passed as arguments. Test that a smurf is correctly added to when the form is submitted.

Notes:

• You are welcome to create additional files but do not move or rename existing files or folders.
• Do not alter your package.json file except to install extra libraries.
• In your solution, it is essential that you follow best practices and produce clean and professional results.
• Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work.
• It is better to submit a challenge that meets MVP than one that attempts too much and does not.

Task 4: Stretch Goals

IMPORTANT: Only work on stretch goals after completing your MVP!

When completing these goals, make sure to use a new branch to ensure your MVP code is not overwritten. You can branch off main by executing git checkout -b stretch. When you are fully sure your stretch code is ready for feedback, merge your stretch code with main using git checkout main and git merge stretch.

After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals:

• Build a smurf profile page with using react-router and dynamic url params
• Using React Testing Library, test one or more of your components (not any component that fetches data though)

Reference Materials

Resource: API documentation

GET '/smurfs'

• Retrieve an array all the Smurfs in the Smurf DB by writing a GET to the endpoint http://localhost:3333/smurfs.
• Double check that your response from the server is an array of smurfs.

[
  {
    id: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
    name: "Poppa Smurf",
    position: "Village Leader",
    nickname: "Pops",
    description:
      "Papa is the practical village leader and the father figure of 100 or so young Smurfs. He is easily identified by his red Smurf hat, pants, and a shortly-trimmed white beard and moustache.",
  },
];

• Double check to make sure that a smurf is created correctly once your functionality is built out. Initially Poppa and Smurfette will be in the array.

HINT if you are going to be working on Stretch Problem, you'll need to use that unique id.

Example of object created in Smurf DB:

[
  {
    name: "Poppa Smurf",
    position: "Village Leader",
    nickname: "Pops",
    description:
      "Papa is the practical village leader and the father figure of 100 or so young Smurfs. He is easily identified by his red Smurf hat, pants, and a shortly-trimmed white beard and moustache.",
  },
  {
    id: "JzdWIiOiIxMjM0NTY3ODkwIiwibmFtZ",
    name: "Smurfette",
    position: "Beautician",
    nickname: "Smurfette",
    description:
      "Smurfette's role in the village is that of any other smurf; chores, and helping out where she can, but for her specifically, she is often seen to be very active in organizing events.",
  },
];

Submission format

• Submit via Codegrade by commiting and pushing any new changes.
• Check codegrade for automated feedback.
• Check codegrade on Monday following the Sprint Challenge for reviewer feedback. For more information on how to access and read your feedback, check here
• Any changes pushed to your branch will resubmited to codegrade if pushed before the sprint challenge deadline. Changes after the deadline will not be reviewed.

Interview Questions

Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Add your answers to the questions within interview_answers.md file. These will not be counted as a part of your sprint score but will be helpful for preparing you for your endorsement interview, and enhancing overall understanding.

1. What problem does the context API help solve?
2. In your own words, describe actions, reducers and the store and their role in Redux. What does each piece do? Why is the store known as a 'single source of truth' in a redux application?
3. What does redux-thunk allow us to do? How does it change our action-creators?
4. What is your favorite state management system you've learned and this sprint? Please explain why!