Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem scheduling events #4

Open
polrovira opened this issue Mar 6, 2019 · 16 comments
Open

Problem scheduling events #4

polrovira opened this issue Mar 6, 2019 · 16 comments

Comments

@polrovira
Copy link

Hi!
I don't know why, but I've done everything on the GitHub instructions and apart from that I've also followed the instructions given on the Pusher website. But somehow I end up at the same point: the schedule button isn't working, so the events aren't displaying on the calendar.
Thanks in advance!

@HackAfro
Copy link
Owner

Apologies for the issues you've faced. I cloned the project and fixed the issue. You can simply clone the repository and everything should be working smoothly

@polrovira
Copy link
Author

To start with, I have to thank you for your amazing job on this calendar, keep up the good work! Second thing, I have to thank you for your polite and fast reply to my issue.

All that being said, there are a few errors still popping up, I'll try to upload a screen capture of them just below:

image

In case you can't see them good, because of the resolution of the image or some problem that might appear, I'll copy and paste them below as well:

error 1: POST http://localhost:4001/schedule 500 (Internal Server Error) schedule:1
error 2:
[Vue warn]: Error in v-on handler (Promise/async): "SyntaxError: Unexpected token < in JSON at position 0"

found in

---> at src/components/EventForm.vue
at src/App.vue

warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
(anonymous) @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:619

error 3:
SyntaxError: Unexpected token < in JSON at position 0

at VueComponent._callee$ (EventForm.vue?d711:45)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:271)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21)
at asyncGeneratorStep (asyncToGenerator.js?3b8d:5)
at _next (asyncToGenerator.js?3b8d:27)

logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
(anonymous) @ vue.runtime.esm.js?2b0e:1856
Promise.catch (async)
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1856
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911 vue.runtime.esm.js?2b0e:1888

@HackAfro
Copy link
Owner

I think the issue here is that there was a non-JSON response from the server and we tried to convert it to JSON anyway. You can find the issue in line 61 of the EventForm.vue file. Here's the snippet:

        body: JSON.stringify(event),
        headers: {
          'content-type': 'application/json'
        }
      });
      await req.json();
      this.resetValues();

So you can comment out that line, I'll do that myself too and also, try and investigate the issues you're having with the server; it seems it is returning a 500 error code.

I'm happy to help if any other issues arise

@polrovira
Copy link
Author

If there's a JSON error, i assume it must be on the stringify part involving the event in it. If so, how can i get the event stringified without using the JSON method? Because I can't just omit de code part of the event as it is an important part of the EventForm.vue file.

Thanks a lot! I really appreciate your fast feedback and help!

@HackAfro
Copy link
Owner

The req.json() line doesn't do much because you do nothing with the response from the server. Maybe you can provide a screenshot of the response from the server; this would help better diagnose the errors you're getting.

@polrovira
Copy link
Author

image

Here's when I fill the forms with some information.
Then when I press the schedule button, the information disappears (thing which didn't before, I think that's good) but nothing shows up on the dates I selected and the 500 error code pops up.

image

@HackAfro
Copy link
Owner

This is good but can I see the network panel for the request made to the server. Or rather, you can log your response to the console. It seems there's an error something going on in your server

@polrovira
Copy link
Author

You mean this one right?

image

@HackAfro
Copy link
Owner

Did you create a .env file in the base folder of your project? If yes, did you add the following values to the file:

PUSHER_APP_ID=<YOUR_APP_ID>
PUSHER_KEY=<YOUR_APP_KEY>
PUSHER_SECRET=<YOUR_APP_SECRET>
PUSHER_CLUSTER=<YOUR_APP_CLUSTER>

@polrovira
Copy link
Author

Yes, I created the .env file and added my pusher account own values as you stated on the tutorial

@HackAfro
Copy link
Owner

The error above is showing that the pusher key being loaded to is not a string, so maybe you can try logging the keys to console before using them. Just to ensure that the right values are being used.

@polrovira
Copy link
Author

I've searched for all the errors that de network panel showed and I think that the error is about the req variable that we commented on the EventForm.vue spread onto some node_module folder files, should I just delete all the req variables I find in those files or something else? That string thing that you mentioned I think it's popping up the error because of what I just explained because everything is correctly settled at the .env file

@HackAfro
Copy link
Owner

Okay, I think the easiest way to solve this is for me to see your current setup, do you have an active repository for this demo I can go through? Or are you willing to import the project to codesandbox so I can check it out?

Any of these will work best to help resolve your issues

@HackAfro
Copy link
Owner

Might be far fetched but please look at your .env file and ensure it is similar to the snippet below:

PUSHER_ID=app-id
PUSHER_KEY=app-key
PUSHER_SECRET=app-secret
PUSHER_CLUSTER=cluster

@polrovira
Copy link
Author

Shall I upload it to Google Drive so you can download it without any trouble? Send me an email to: [email protected] so I know your email privately and I shall send you the invitation to download it!

@polrovira
Copy link
Author

The req variable in the EventForm.vue is still giving me errors because i don't use it...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants