Today I am going to turn in my final, final project for the Flatiron Bootcamp. It is a really weird feeling. Part of me thinks I can’t possibly be done. Although I still have to do my final assessment plus all the post bootcamp work. Part of me also feels like I still have so much to learn, how could I be done. I think that feeling will always be there a bit. There is still so much to learn, but I have exhausted the bootcamp and will need to turn to other outlets for my continuing education.
For this project, I decided to redo my vanilla JS project. This was intentional as I wasn’t really happy with my JS project and really wanted a chance to do it better. I also wanted to use hooks and React Router 6 for my project, which the curriculum doesn’t really go over all too well. I wanted to challenge myself to use these things that were a bit out of scope for the course. The format of React is so different from JS and also dealing with state and Redux that I wanted to concentrate on that instead of worrying about the data I was displaying. I also wanted to focus on doing full CRUD, and there wasn’t anything on editing data in the labs so I knew that would be a challenge to figure out. It was also a big shift from using class and presentational components and switching to all functional components. Do I love my solution for editing details? No. Do I want to change this at some point? Yes. However I came to a point where I felt that the project was good enough to turn in. I will never be 100% happy with every aspect of my code. There is always room for improvement. With things changing so much in my personal life right now, I just needed to call this good enough for now and proceed to graduate. Graduating is terrifying. I know that if I don’t take this chance, I will just keep putting off this last step.
Let’s go over the hooks I used in my project. First, useSelector() which maps state to props and replaces you having to use connect(). useSelector() takes an argument of a callback function that will take in the state from your store and then return the value that you want to set as a state variable. I did learn that if you are using multiple reducers and are using combineReducers your callback function needs to dig into the nested reducer information via state => state.petReducer.pets. This is just saying in my state, go to the petReducer and from that reducer I want to access the pets’ information. Next hook I used, that is the foil to useSelector() is useDispatch(). This hook replaces mapDispatchToProps in connect(). Between these two hooks we have no use for connect in this project anymore. The next big one was useState() which lets you set the initial state. You can’t nest this inside of other functions. It returns an array, the first is the state value and the second is the function to change that value. This hook was so handy in forms. const [name, setName] = useState(‘’) allows you to set the state of name to an empty string and then you can use this in your form as the value. Then for your onChange you can use a callback function to setName to the e.target.value via onChange={e => setName(e.target.value)}. Now the state of name will be whatever is input in the form. You can also set the initial state to a previous value. I used this in my edit forms to have the input be auto populated with information from the entry that is being edited. This is where useNavigate() and useLocation() came in handy to pass state from one component to another. First, you set useNavigate() to a constant to use the function as you can’t pass a hook to Redux and it is a rule of hooks. const navigate = useNavigate(). The simplest way to useNavigate() is with a back button. All you have to do is onClick={() => navigate(-1)} and the user will be taken to the previous page. Pretty cool, right? This hook replaces useHistory() from React Router 5. Since I am using React Router 6, I had to use useNavigate() The first time I used this was to pass information from a pet down to it’s toys. So on my event handler for the open toy box button, I used navigate(“/toys”, {state: { pet_id: props.id, name: props.name}}). The first argument is the location and the second argument is the state you want to pass down. So I want to navigate to /toys and I want the state of that pet’s id and name. To use this information, you need to use the next hook useLocation(). Again you set a variable to be equal to the function of the hook const location = useLocation(). Then we can set variable to be equal to the state being passed const petName = location.state.name. Now I have access to that pet’s name inside of my toy component so I can display their name at the top of their toy list. This also was needed so I had access to the pet’s id. Since toys belong to pet and a pet has many toys, I needed a way to persist the pet’s information to the toy and pass in the correct pet id to the toys. For instance in the toy form, there is a hidden field of the pet’s id so the toy is properly saved with the current pet linked. The last hook is useEffect() which allows you access to lifecycle methods similar to componentDidMount(). It is a function that takes in a callback function and an array of dependencies that determines when the callback function is called. If you don’t pass in any dependencies, the function will only run on first render. This is a great place to call anything that needs dispatched, like fetching a list to be rendered, which you only need to happen upon first render.
I also played with an animation with CSS which was really fun. I tried to get more comfortable with className inline CSS during this project. In general I tried to really challenge myself with this project and try things that scared me or were too intimidating before. You can check out my frontend repo and my backend repo. I do plan to work more on this project after graduating. Wish me luck on my assessment! See you on the other side.
Top comments (0)