Appointment Planner Challenge Project (React)

Projects Challenge Projects
2

Ok, so another fail here for me - started off ok, then just hit a brick wall - I think I could stare at this for days and not get an end result.

So I looked at the solution - manged to get my head around most of it - although I would never have got there on my own…

Trouble is - I copied and pasted all of the solution files into the platform to see the app in motion - but it didn’t work properly! - kept getting 404 error messages and the form(s) reset when submitted, and I couldn’t get any contacts/appointments to show…

Is there a reason why there are no replies to this thread yet - is it a new addition to the syllabus or did everyone just skip it??

cheers
Marty (disheartend - but I’ll get there in the end…)

14 Likes
3

Hey @martyg_london , happy to help you out here:

  • When you downloaded the solution files, there should have been two folders - on-platform/ and off-platform/. Double check that you only copied in the files from the on-platform/ folder as the solution will be slightly different from the off-platform/ version.
  • Which aspects of the solution code were most confusing to you? Maybe next time we can include some explanation file to help illuminate some of the trickier bits.
  • The URL bar in the browser window doesn’t work quite as expected at the moment so if you try refreshing the page or navigating directly to https://localhost/contacts you will get a 404. Instead, just navigate to https://localhost/ and use the in-app Contacts and Appointments buttons to get around the app (note: the URL bar might always show the /contacts page but the UI should change). Sorry about this issue! We’re trying to fix it ASAP.
  • It sounds like you have the UI showing up (since you can see the forms and submit them). Why the forms aren’t working after you submit sounds like a trickier bug for me to figure out without more info. Could you share me a gist of your code? Let me know if you need help figuring out how to do that!
  • This challenge project was added to the syllabus only a few days ago and it looks like you are the first to post about it! Thanks for getting this thread started!
4 Likes
4

Hi @bspexspex thanks for replying.

By way of feedback only:
It was the on-platform files I copied, and it was those that were not adding Contacts or Appointments correctly - they just cleared the form and didn’t add anything when ‘Add Contact’ was clicked.

The Taks were lengthy and very confusing, especially when mentioning TILELIST and CONTACTPICKER, which weren’t explained prior.

The supplied code uses ROUTE and NAVLINKS wich hadn’t been used either up to that point, this confused me.

Maybe a working example would have helped, so at least I knew what the finished product should look like.

I would like to have had a few more lessons to feel confident to get someway further on this project.

Like I say - maybe this is just the level I am at (or not at!) and I would be interested to hear how everyone else gets on. I was feeling quite deflated after attempting this - especially after I found the prior lessons ok (Copycat project was no problem for example). I’ll repeat it at some point and see how that goes.

Personally I found this Planner project a BIG step up and was deflated after failing this . but I’ve since cracked on, and the next Redux Road project, I got through no problems! I might also need to add that I am a beginner… so the learning continues…

Happy days
Mary

7 Likes
5

Hi all,

My project: Appointment Planner Challenge - React Routing:

Git: https://github.com/Firefly08/ReactAppointmentChallenge.git
Netflify: https://appointment-planner-challenge.netlify.app/

7 Likes
6

Hi All
My project : Appointment planner

Github link : GitHub - asmafarhat2006/routing
(dont know why i didnt set the name to appointment planner)

7

Hi there,

Please help, I’m stuck.
I try to add a contact but I keep getting this error message:

’ Objects are not valid as a React child (found: object with keys {name, phone, email}). If you meant to render a collection of children, use an array instead’

I’m using the function that is in the solution:

const addContact = (name, phone, email) => {
setContacts([…contacts, { name: name, phone: phone, email: email, },]);
};

and I’m calling it like this:

addContact(name, phone, email);

What’s wrong with this?

Thanks!

1 Like
8

This course really jumps around from holding your hand to throwing you to the wolves. I feel like some major adjustments to the course are needed.

44 Likes
9

Hi everyone,

I completed the appointment planner a couple of days ago, so just wanted to share the code if anyone wants to compare it to their solution. Here’s a link to the repository: https://github.com/atanas-dim/appointment-planner-react

Also deployed with Github pages: https://www.atanasdim.com/appointment-planner-react/

2 Likes
10

Hi,

I checked my files and in App.js I have this:

  const addContact = (name, phone, email) => {
    setContacts((prev) => {
      return [...prev, {name: name, phone: phone, email: email}];
    });
  }

Also in ContactsPage.js I’m calling it like this:

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!duplicates) {
      props.addContact(currentName, currentPhone, currentEmail);
      setCurrentName('');
      setCurrentPhone('');
      setCurrentEmail('');
    }

  };

I’ve uploaded the app on GitHub, so you can have a look at the full code in each file: https://github.com/atanas-dim/appointment-planner-react

I hope that helps,
Atanas

2 Likes
11

I had this same problem. It likely is not your contacts, but instead your appointments array. If you defined the contacts property of your appointments as an object literal of the full contact, then when you try to iterate over it in the ContactPicker component, you will get the error you mentioned. Instead, if you use just the name from the contact in our appointment objects, then there will be no problem.

This throws the error:

{
      title: "test",
      contact: {
        name: 'test',
        phone: '922-333-5555',
        email: '[email protected]
},
      date: "test",
      time: "test",
    }

This does not throw the error:

{
      title: "test",
      contact: sampleContact.name,
      date: "test",
      time: "test",
    }
12

Hello. Did you solve this yet? This error msg tells you that React is trying to render an object. The object keys in the error msg (name, phone, email) gives a clue that this is related to the contacts or contact state. contacts are passed down to both the AppointmentsPage and ContactsPage and passed down again from those components so we need to know where the error was thrown…

The entire error message should tell you in which component the error occurred (at least it you do the project off-site, not sure about the learning environment…). Focus on troubleshooting that component. If it has the correct contacts-props going into it (you can check dev-tools) then check your logic related to accessing the object-properties.

13

Hi,

This is my solution to Appointment Planer.

1 Like
14

Yeah, to be honest I struggled with this despite realising that virtually everything they were asking had more or less been covered before. The problem is the progression of difficulty is just so huge sometimes. Like the cheatsheets were almost useless for helping with this exercise.

In the end I tried to just muddle through as best as I could and compare my inevitable mistakes to the final code. The problem is, I’ve ended up with so many small corrections spread across so many files that it’s really hard to even learn anything from them. Why did the project with the least help have to include SO MANY components across so many folders with so many inter-dependencies? I get that this is probably closer to a real life example, but it’s so weird how it goes from simple examples with lots of explanation to suddenly a much more complicated one with hardly any help.

It just comes across as though these exercises were clearly written by someone who already knows what they’re doing. Like it should be simple because everything has been explained at least once before, but for people just learning this stuff it makes it super hard to bugfix. Doesn’t help that this exercise comes AFTER a whole module on unit testing, so I’d forgotten a lot of the nitty gritty by the time I got the final project.

14 Likes
15

Hey everyone,

I just completed the Appointment planner… but not without help from the solution.
I spent a couple days getting frustrated as I believe along with others here that this project was a big step up from what has been practiced throughout the React lessons. The info is there… but putting it all together with the multiple components was very challenging.

The first half I used the solution as a guide, and by the time I reached the second half I was able to better understand what the instructions were asking of me. By the end I was writing most of the code and just having to double check and fix a couple things.
For me this was pretty rewarding. If I take the time to really understand the solution and how all the parts of project work, then I feel like thats a successful project for me. Beats staring at a screen and getting down about not understanding what to do.
And now I look forward to taking this understanding to another project!

We are all here to learn so I think you shouldn’t feel as if you are failing if you look at the solution! :slight_smile:

11 Likes
16

After struggling through this and seeing that other learners are struggling with this as well, I feel somewhat relieved it’s not just me. If you’re struggling, like I am, look at the solution as you refer to the instructions when you get stuck. It will help these concepts sink in.

Then, when you’re ready, perhaps later this week, later this month, or at some point in the future, come back to this. Try it again, but this time without the solution (as much as you can) but don’t be afraid to refer to it if you really need to. We are all here to learn :slight_smile:

13 Likes
17

Hello all I have completed the Project by both using Functional Components but as for this Functional Component managed to complete the project (mostly copy pasted lol) and still didnt get the Add Contact to work. but Add Appointment worked

Then I did the project but with Class Components and yes I managed to complete all of it and got it all working.

My Github repo for this project as Class based

And the page link on Netlify
https://hardcore-jones-6f91df.netlify.app

1 Like
18

Hi Everyone!

I’ve just completed the "Appointment Planner Project."

Git : https://github.com/Abdulshakur24/Appointment-planner

Live : https://appointment-planner-ed2b69.netlify.app/

19

Hi!
Im already stuck at point 3. I work on that project in the browser. The console is showing me
“index.compiled.js:4638 Uncaught ReferenceError: props is not defined at ContactsPage”
but i don’t even have the word “props” inside that file.

20

My implementation required me to use props in the function, make sure you add it as an argument to your function component:

export const ContactsPage = (props) => {
  ...
}

In app you are rendering the contact page with properties, so even though it’s not in your contact page file you are using properties:

<ContactsPage contacts={contacts} addContact={addContact} />
1 Like
21

Am I missing stuff, or is this just god awful instructions as usual? Step 8 instructs us only to pass the contacts array as a prop to ContactPicker and then step nine instructs us to receive two props.

If you look at the solution file, there’s a getContactNames function defined in AppointmentForm yet nowhere in the instructions does instruct us to write it.

6 Likes