Appointment Planner Challenge Project (React)

Very nice! The UI is aesthetically pleasing. The filtering feature is super cool too. And I can see the site is fully responsive as well (except for a wee bit of overflow on the x-axis, at least on my browser).

I would suggest implementing a delete feature that would allow one to remove contacts and/or appointments. And you seem to have a redirect issue as well: the main url doesn’t redirect one to the contacts page.

But other than that I would say you’re good. Great job!

Happy coding.

1 Like

Hey!!

thanks for the response/review!

you were right of the overflow, especially if the name is really long! (Nothing that
overflow-wrap: break-word; wont fix :wink: )

The redirection issue is so bizarre, its only on netlify yet on my local server it runs fine, I am perplexed!

I tried to apply unit tests to these and found it pretty difficult to know what to test where. The “Learn React Testing” course doesn’t cover apps with this many nested components. I started with unit tests on Tile and Tile List which went fine. Those are location agnostic so I supplied input values.

I ran into serious trouble trying to do ContactPage and App. I was unable to test the adding of of a contact via the form rendered in ContactPage → ContactForm from ContactPage.test.js. I believe this is because addContact is located one level above in App.js with the contacts state. I tried importing addContact from App.js but it didn’t work.

I then tried doing the tests in App.test.js, but was not able to render App and got this error:
Invariant failed: You should not use NavLink outside a Router

I’m assuming this is because I’m rendering the component in the test, not within a router. I’m not really sure what to do now. The stackoverflow answers aren’t helpful. This test resolves to “Jerry isn’t in the document” or whatever. The values are still in the inputs, so it hits handleSubmit, hits addContact, and presumably stops because the value clear happens right after that.
This CodeByte gives me a hook violation

I tried to apply unit tests to these and found it pretty difficult to know what to test where. The “Learn React Testing” course doesn’t cover apps with this many nested components. I started with unit tests on Tile and Tile List which went fine. Those are location agnostic so I supplied input values.

I ran into serious trouble trying to do ContactPage and App. I was unable to test the adding of of a contact via the form rendered in ContactPage → ContactForm from ContactPage.test.js. I believe this is because addContact is located one level above in App.js with the contacts state. I tried importing addContact from App.js but I get an error  **Invalid hook call. Hooks can only be called inside of the body of a function component.**

I then tried doing the tests in App.test.js, but was not able to render App and got this error:
Invariant failed: You should not use NavLink outside a Router

I’m assuming this is because I’m rendering the component in the test, not within a router. I’m not really sure what to do now. The stackoverflow answers aren’t helpful. This test resolves to “Jerry isn’t in the document” or whatever. The values are still in the inputs, so it hits handleSubmit, hits addContact, and presumably stops because the value clear happens right after that.

test(‘can add a contact to an existing contacts array’, async () => { const contacts = [ {name: ‘Andrew’, phone: ‘316-255-4867’, email: ‘test1@test.com’}, {name: ‘Bob’, phone: ‘316-555-4837’, email: ‘test2@test.com’}, {name: ‘Joe’, phone: ‘316-655-4867’, email: ‘test3@test.com’}, {name: ‘Craig’, phone: ‘316-555-4767’, email: ‘test4@test.com’} ]; render(); const inputName = screen.getByLabelText(‘Name’); const inputPhone = screen.getByLabelText(‘Phone’); const inputEmail = screen.getByLabelText(‘Email’); const submit = screen.getByRole(‘button’); userEvent.type(inputName, “Jerry”); userEvent.type(inputPhone, “217-555-5555”); userEvent.type(inputEmail, “test5@test.com”); userEvent.click(submit); const newContactName = await screen.findByText(‘Jerry’); expect(newContactName).toBeInTheDocument(); expect(newContactName).toHaveTextContent(‘Jerry’);

1 Like

Hello everyone!

This is the first time I actually share my code or even take part in the conversation. I thought it would be good to share my experience since despite posting a working solution it was quite a struggle. But the journey was insightful and there’s a sense of achievement (and still some hair left) by the end of it.

Based on areas where I struggled I’d suggest the following:

When everything seems like it’s by the book yet still it doesn’t work - check your spelling! (I know obvious) especially if you’re working on the codecademy platform as opposed to a code editor. I spent 3 hours pulling my hair only to discover that I missed an ‘n’ in one of my ‘appointments’.

Check that you actually did pass all the props that a child component expects, and that you’re calling them by their correct names within that component. I found that passing them as arguments in the function definition is more helpful than passing them collectively as props, because then they are right in front of your eyes and you don’t have to go back and forth to the parent component. It would also save you the use of props.prop.

ContactPicker was a big hurdle. Watch out how you initialize the contact state. On the contact form we think of contact as an object, so when initially defined as a state on the appointment form I captured it as such. Later, as much as I understood that it was only the names I had to pull from the contacts array for the select box, I completely forgot that I set it up to expect objects while I’ve been passing strings to it.

I hope this is helpful to anyone.

My solution - Codecademy export · GitHub

1 Like

Hello everyone!
This is my appointment planner.
Repo
Netlify
At first my app didn’t submit the forms and therefore didn’t show the lists of contacts and appointments. I examined all the solution and made sure that all the logic was correct. Eventually I found out that I used uncorrect name for ‘handleSubmit’ prop when I extracted it in the child components, and console didn’t log anything about it.
Cheers,
Angelika

Hi everyone,
This is my solution for appointment planner.
Live: http://appointmens.surge.sh/
Code: GitHub - VillainAntagonist/Appointment-Planner: Small web-app , where you can add your appointments
I found out that React-Select quite useful for select>option, so i add it to my code.

Hello

Here is my project.

Github: https://github.com/jccaceres01/appointmentplanner

Netlify: https://sad-wing-c607a7.netlify.app/

Since there is something wrong with the dependencies in the folder downloaded i update react-router to latest version. Also use some components from material ui.

1 Like

hii you all

after cuple of houers i done this great project
i add an samll chellange for me , i added an button for every div of contact or Appointment
i would love hear some feedback
Git : https://github.com/gabi0632/Appointment-Planner

I’m honestly starting to hate myself and wonder why nothing I do works. I checked the solution and even copy-pasted the entire thing over the codecademy files and it did nothing when I hit run. While I often have a hard time typing in what they want. I did learn quite a bit doing this project, but nothing still loaded. This is what I just loathe about this.

Sorry for being so emotional. But I need to vent my frustation. I’ve spent a long time learning code and it is rare that I get anything to work.

1 Like

I learned alot this challenge. I also struggled alot but I made it through after a few days of concentration and hints. I also used this project as my first to get in good practice of uploading my code to GitHub and Netlify.

Link to my git hub CODE: GitHub - eyeland/react_challenge_start: a learning project part of codecademey
Link to my netlify Live Preview: reactchallengeapp.netlify.app

1 Like

Hey made this:
Netlify: https://appointmentplanneraman.netlify.app/contacts

Thank you for posting! I’m glad I’m not the only one that feels this way.

I hope i share this in the right topic:D.

Thx God i didn’t find these solutions. So I suffered throw the project on my own. After a depressing 1 hour of staring at it. I made some progress and finished it in a couple hours hopefully it works fine.
Had some trouble uploading (with some Google search i tried a method with install gh-pages and editing the package.json made the css attached to the AppointmensPlanner dissapear so it looked blank and hideous but after i changed it back it looks fine).
Github : GitHub - koriscs/Appointments: planning appointments
Netlify : https://koriscs-appointmentplanner.netlify.app

woof! that took me a couple days and i had to ask a friend to help me debug at the end bc i couldn’t get the submit data to load on the appt planner after picking a contact from the dropdown. i wrote up a README.md with future tweaks and changed it visually.

here’s the link to my repo

https://enchanting-cupcake-9c82e2.netlify.app/contacts

6 Likes

Not sure if you’re still in the course since you posted a few months ago, but thank you for the link to the Traversy Media video Kalewine. I set the playback speed to 2x, and it’s been a great quick review of all the material to date (which I needed pretty bad). Much appreciate it!

I managed to get this project done but realise that my code is different from the way that the solution presented itself. In particularly:

AppointmentsPage.js
image
image

AppointmentForm.js
image

While Codecademy’s solution will simply pass setTitle…etc to AppointmentForm.js and call the function like so:

<input .... onChange={(e) => setTitle(e.target.value)} />

I mean, when I saw this, I realise that that’s how we are taught but to be fair, I didn’t attempted to go back and have a look but rather tried to get it done by myself. And that bring me to my code as in the images above.

My question is:

  1. Will there be any performance issues or any other kind of issues for my method of solving it?

I’m asking this because if this is not a good way of managing it, then I would rather change my way of coding before it’s too late!

Ah, the arrow is pointing at the wrong thing. I was planning to point it at handleChange.

Hey everyone! Here is my project solution.

GitHub - appointment planner

It was awesome. Thank you :upside_down_face:

Here’s my solution:

1 Like