These are chat archives for FreeCodeCamp/HelpJavaScript

4th
Jan 2019
Jason Luboff
@JLuboff
Jan 04 00:00
Ya.. if I run jest globally within my project folder, or specify my test folder
 FAIL  //server/Private/JLuboff/Programming/app/tests/routes.test.js
  ● Test suite failed to run

    Cannot find module '@babel/code-frame' from 'index.js'

      at Resolver.resolveModule (P:/Programming/app/node_modules/jest-resolve/build/index.js:221:17)
Christopher McCormack
@cmccormack
Jan 04 00:01
that's weird, I have a barebones project I started using jest in and no issues like that, I do have that folder in my node_modules
Jason Luboff
@JLuboff
Jan 04 00:01
I think it's an issue from CRA..
Christopher McCormack
@cmccormack
Jan 04 00:02
is that module in your node_modules?
Jason Luboff
@JLuboff
Jan 04 00:02
Yup
Christopher McCormack
@cmccormack
Jan 04 00:02
what version of jest?
Jason Luboff
@JLuboff
Jan 04 00:02
23.6.0
Christopher McCormack
@cmccormack
Jan 04 00:02
"jest": "^23.6.0",
looks to me like you may have a path issue, maybe it's having trouble finding the path relative to where it's run
like that index.js file doesn't know how to get to your node_modules maybe
Jason Luboff
@JLuboff
Jan 04 00:06
Maybe.. ..perhaps I should just blow away this project folder and start from a fresh CRA again (obiviousily save my project files)
Christopher McCormack
@cmccormack
Jan 04 00:08
are you running jest directly, or are you using npm run test?
Jason Luboff
@JLuboff
Jan 04 00:12
I've tried both
or soemthing similar
Jason Luboff
@JLuboff
Jan 04 00:14
Trying now
Nope. same error (it throws that error for any tests in node_modules as well). I think I'm going to just create a new CRA locally and go from there
Christopher McCormack
@cmccormack
Jan 04 00:19
hope you didn't accidentally install CRB!
Jason Luboff
@JLuboff
Jan 04 00:19
CRB?
Christopher McCormack
@cmccormack
Jan 04 00:22
just being stupid
Jason Luboff
@JLuboff
Jan 04 00:22
Lol fair enough
Yup. My original project folder is fucked up. Lol
Christopher McCormack
@cmccormack
Jan 04 00:29
so you were successful with a new one?
can you do a diff on the two and see what may be the root?
Jason Luboff
@JLuboff
Jan 04 00:32
I'm starting to get an idea..of what might be the problem...we will see in just am inute
The jest docs have you install several babel dependencies.. so.. I think that might be part of the problem
Christopher McCormack
@cmccormack
Jan 04 00:36
I'm not so sure... in my project without CRA I didn't have to install anything explicitly. Jest has its own dependencies though. https://github.com/cmccormack/media-tracker
Jason Luboff
@JLuboff
Jan 04 00:42
Ya.... still not working. I'll just copy over my working files.
Brad
@bradtaniguchi
Jan 04 00:56
I kinda hate how I like developing on my laptop. The keyboard is too much fun XD
Christopher McCormack
@cmccormack
Jan 04 00:57
which?
the keyboard is really "shallow" I guess? plus the pageup/down/end/home keys are on the right which is nice for jumping around. Idk it's just nice to type on.
Christopher McCormack
@cmccormack
Jan 04 01:10
I have a 2015 MBP I feel the same about, great keys. I have a newer one for work and the keys are too shallow, I hate it
A good trackpad and keyboard are so important and yet few manufacturers put much effort into it
Brad
@bradtaniguchi
Jan 04 01:14
The funny thing is my laptop has some crappy hardware support, every now and then the touchpad turns off (!) I have a quick-script to "fix it" haha XD I guess I'm just so used to it, now that I upgraded the ram there is little reason to not use my laptop....besides the terrible posture you get from using a laptop haha
Christopher McCormack
@cmccormack
Jan 04 01:16
Gotta fix those ergonomics :)
Brad
@bradtaniguchi
Jan 04 01:24
Yea my normal workstation is great, monitors are set at the right level, distance, I have an erganomic keyboard.... but nope I'm on my laptop using 20% of the desk XD
Nate Mallison
@NJM8
Jan 04 01:34
I'm waiting for a thinkpad to come in. Got tired of the new MBP keys, already had two stick on me. Hopefully I can survive on Windows or Linux and sell the MBP
Christopher McCormack
@cmccormack
Jan 04 01:38
which thinkpad?
Brad
@bradtaniguchi
Jan 04 01:41
I was close to buying a thinkpad, and a mac, but I'm too cheap now. This laptop will have to cut it until I need more power
Nate Mallison
@NJM8
Jan 04 01:58
x1 extreme, went all out since they are on sale. I was between a MBP and an x1 carbon. Got the mbp for the 15" screen and the familiarity then the X1 extreme came out
Big win is it has dual SSD slots so I can run one for windows and gaming and another with linux for work/normal stuff
Brad
@bradtaniguchi
Jan 04 02:02
oh man I'm not a fan of 15 inch laptops, but looks like a beast haha
Nate Mallison
@NJM8
Jan 04 02:14
gotta be
I was on 13.3 for so long
can't see a damn thing! haha
Maybe I should've gotten a 17
lol
Nate Mallison
@NJM8
Jan 04 02:24
Or what do they call it, a desktop?
🤣
Brad
@bradtaniguchi
Jan 04 03:07
Lol, I don't mind not being able to see stuff, thats where virtual desktops come in :D
Blauelf
@Blauelf
Jan 04 11:38
I'm on a T430s (14", 16:10), and that's about the right size in my opinion. 17" notebooks pretty much resemble the early 1990s notebooks (flatter, and without the handle and the built-in trackball, but not much lighter). The MBP got praised as best Windows (!) notebook some years ago, but I've heard so much bad about the newer keyboards, so I would not consider it. Though the touch bar gives nice light effects (just isn't that useful as part of the keyboard)
alpox
@alpox
Jan 04 13:19
@Blauelf I just ordered a T480S should have arrived today :D Looking forward to it! It looks like a very good option and not all too pricey
Blauelf
@Blauelf
Jan 04 13:21
The version I had was a student's/academic model, with a configuration otherwise not available here in Germany (strong graphics card, SSD, ...).
Chris Cullen
@123xylem
Jan 04 14:02

<div class="offer_row_table" data-name="name" data-num="number"> 


//This works
$(".vehiclePrices").on('click',function(){ 
$wrapper.find('.offer_table_rows').sort(function(a, b) { 
return a.dataset.num- b.dataset.num; 
}) 
.appendTo($wrapper); 
}) 

//this doesnnt
$(".brandName").on('click', function() { 
$wrapper.find('.offer_table_rows').sort(function(a, b) { 
return a.dataset.name - b.dataset.name; 
}) 
.appendTo($wrapper); 
})
When I click a button I want the data names to be sorted and appended to the wrapper like how it works for my Number button
Whydoesnt it work similarly for my name sort?
Chris
@crokita
Jan 04 14:13
@123xylem Hello. For the compare function, comparing numbers works differently than for strings, which is why using the same function for string sorting may not be working. See here for an example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_sort_object2
Chris Cullen
@123xylem
Jan 04 14:20

@crokita
When I console.log like this it shows true false true

```js

$(".brandName").on('click', function() {
$wrapper.find('.offer_table_rows').sort(function(a, b) {
console.log(a.dataset.name> b.dataset.name);});
})

``

Chris
@crokita
Jan 04 14:24
Alright. You'll need to configure it so that the function returns either a positive number (a > b), a negative number (a < b), or 0 (a = b)
Chris Cullen
@123xylem
Jan 04 14:25
@crokita :) THanks man I just copy pasted some of the code from your link and its working!
@crokita thanks
Chris
@crokita
Jan 04 14:25
Sweet. You're welcome
Chris Cullen
@123xylem
Jan 04 14:25
used to give cookies for thanks here
Chris
@crokita
Jan 04 14:26
Yeaah
Blauelf
@Blauelf
Jan 04 14:31
The - would convert both operands to number, resulting in NaN-NaN, a difference of NaN.
I used to do things like return (a.dataset.name > b.dataset.name) - (b.dataset.name > a.dataset.name), though other people claim an if/else if/else is more readable.
catalin560
@catalin560
Jan 04 15:05
happy new year everybody!
dumb question: if I create 100 images with the same source <img src='...' />, does it affect load time compared to if I loaded only 1 img? do they all load at the same time? do they make 100 server request or only 1?
Kaz Baig
@kbaig
Jan 04 15:10
@catalin560 Maybe this post will help
You can also test this yourself by loading an html file with two duplicated img tags and observing the sources tab
Blauelf
@Blauelf
Jan 04 15:15
Even with cache disabled, the page http://www.hampsterdance.com/classics/originaldance.htm will load each image only once.
So I guess it's another temporary cache that's not disabled.
Christopher McCormack
@cmccormack
Jan 04 15:28
:wave:
Jason Luboff
@JLuboff
Jan 04 16:15
Morning :wave:
Christopher McCormack
@cmccormack
Jan 04 16:16
@JLuboff yo
Jason Luboff
@JLuboff
Jan 04 16:16
What up
Kaz Baig
@kbaig
Jan 04 16:24
:wave: @JLuboff
Christopher McCormack
@cmccormack
Jan 04 16:25
@JLuboff nm yourself?
Jason Luboff
@JLuboff
Jan 04 16:31
@kbaig Yo man
@cmccormack Work work work. Think I've thought of a way to remedy my testing issue.. I don't think I was structuring my app folder correctly. Basically I did CRA, than made my backend folders within the root of that.. I think instead I'm going to have a server and client folder and seperate package.json's (I think this is really were things got screwed up)
Christopher McCormack
@cmccormack
Jan 04 16:32
were your tests outside the src folder or whatever?
Kaz Baig
@kbaig
Jan 04 16:33
Anyone here worked with typescript on a react project?
Jason Luboff
@JLuboff
Jan 04 16:33
For the backend tests, yes (or atleast my test test lol)
@kbaig Nope...just regular ol' JS
Christopher McCormack
@cmccormack
Jan 04 16:36
@JLuboff that may be it then, maybe put all your stuff in the src folder and see if it works then
but having a separate package.json may be better
then your CRA jest will be separate from your other tests
I think
Kaz Baig
@kbaig
Jan 04 16:38
@JLuboff Seems to be all the rage all of sudden
Christopher McCormack
@cmccormack
Jan 04 16:39
i'll probably try out typescript on my current project
agreed it's all the rage :)
Kaz Baig
@kbaig
Jan 04 16:39
with React specifically I mean
TS's been the rage in general for a while
I don't have enough experience with static typing to feel comfortable trying it out willy nilly
Jason Luboff
@JLuboff
Jan 04 16:40
@cmccormack Ya. I think this will be the better approach and then add a proxy in as well
Christopher McCormack
@cmccormack
Jan 04 16:40
proxy for webpack dev server?
Jason Luboff
@JLuboff
Jan 04 16:40
proxy for the backend so I don't have to do http://localhost:3000/api... or whatever on the react side
Christopher McCormack
@cmccormack
Jan 04 16:42
I think proxy was just for the dev server I never had to do that, although I was using relative paths
Jason Luboff
@JLuboff
Jan 04 16:43
I'm not positive exactly how it works out lol
Christopher McCormack
@cmccormack
Jan 04 16:51
if you do figure it out please let me know, comes up often
Jason Luboff
@JLuboff
Jan 04 16:54
@cmccormack This is the article I was reading https://medium.com/@maison.moa/setting-up-an-express-backend-server-for-create-react-app-bc7620b20a61 I think prior when I tried just using /myRoute within my React fetch(), it didn't recognize that but its been a while. It could be that since you don't use CRA, that your setup allows you to not require the proxy?
Christopher McCormack
@cmccormack
Jan 04 16:55
I also configured webpack to my own standard so that may be part of it
Jason Luboff
@JLuboff
Jan 04 16:55
Ya
I think that will be a future endevor for myself lol
Christopher McCormack
@cmccormack
Jan 04 16:56
there is a productionPath or something property in the webpack config that you can change so it's only relative local and not in production or whatever
Jason Luboff
@JLuboff
Jan 04 16:56
Ah..ya CRA never asks about that
Christopher McCormack
@cmccormack
Jan 04 16:56
yeah read through how CRA does it, there isn't actually all that much in their webpack config, tons of comments though
or just use parcel :)
Jason Luboff
@JLuboff
Jan 04 16:57
MAybe I will use parcel!
Christopher McCormack
@cmccormack
Jan 04 17:02
parcel will even install dependencies for you, it's pretty cool to play with
Jason Luboff
@JLuboff
Jan 04 17:04
I'm definitely going to have to give that a try. While CRA is great...it seems almost too convienent in that it doesn't really let you edit anything that you may need to (i.e webpack or babel configs)
Christopher McCormack
@cmccormack
Jan 04 17:10
it is nice it has all the testing stuff included but at some point you need to be able to do all that stuff on your own
Jason Luboff
@JLuboff
Jan 04 17:11
Ya, going to setup Jest on the backend side so I'll be learning some testing stuff there
Jason Luboff
@JLuboff
Jan 04 17:26
@cmccormack So.. is it better to only import the required components from a framework (i.e Bulma CSS) as opposed to using a CDN?
Christopher McCormack
@cmccormack
Jan 04 17:27
In general? I guess it depends. If your local toolchain does treeshaking or whatever to limit the size of the bundle, that may be better. However, if the CDN module is very popular, like Bulma or bootstrap, there is a good chance the user of the site already has the file cached
fontawesome may be a good example - you can target specific icons locally by only importing the icon, don't think you can do that with the CDN
Jason Luboff
@JLuboff
Jan 04 17:28
Got it
Christopher McCormack
@cmccormack
Jan 04 17:28
although you can just download the SVG but I'm not talking about that :)
i've not done enough production stuff to know the "proper" way though
Jason Luboff
@JLuboff
Jan 04 17:29
Ya FA I'm using a CDN but maybe it would be better to only import the few icons I need. Not sure if that would affect my printing (switching from CDN to imports) but I can play around with it
Christopher McCormack
@cmccormack
Jan 04 17:30
by the time the print page is loaded the font should be loaded as well right?
if you look at FA locally in node modules, you will see the icons are both in the index.js file or whatever as well as in their own file
that way you can destructure if you like, or import each manually
I found it saved a ton of bytes to import manually
you can do similar with lodash and other libraries I think, it's pretty nice but you have to dig to make sure you have the right file name. They seem to do a pretty good job of making it the same as if you pulled it from the index file though
Jason Luboff
@JLuboff
Jan 04 17:32
Well.. printing is kind of goofy.. I'm using a module (print-js) to ensure it prints how it should as the browsers sometimes mis-interpret things but you have to supply it with certain CSS components (whether you add it in its options or as CDNs)
Christopher McCormack
@cmccormack
Jan 04 17:34
ohhh well that could be complicated I see
Jason Luboff
@JLuboff
Jan 04 17:35
Ya.. I hate printing and printers lol
Like.. sometimes...the print preview via the browser looks fine..but you print it and it cuts off stuff lol
Christopher McCormack
@cmccormack
Jan 04 17:42
printers are basically interpreters that do their own thing
Jason Luboff
@JLuboff
Jan 04 17:43
Ya I know. Thats why I hate them :)
Hell.. technically what we call a printer isn't actually a printer
Its the print device
Christopher McCormack
@cmccormack
Jan 04 17:44
haha I got my A+ too :p
Jason Luboff
@JLuboff
Jan 04 17:57
Never got my A+ but the whole printing thing was covered in Windows Server courses
Christopher McCormack
@cmccormack
Jan 04 18:23
probably similar source material
Jason Luboff
@JLuboff
Jan 04 18:24
Ya
Probably could have gotten my A+ without studying too..but never wanted to pay for it :shrug:
Think I finally have my client/server folders setup and working properly
Brad
@bradtaniguchi
Jan 04 18:32
How much is the A+ test? I remember my old boss telling me to take in a while back
Jason Luboff
@JLuboff
Jan 04 18:33
$219
Not sure that its really beneficial for a programmer though. Its all about hardware/help desk stuff
Christopher McCormack
@cmccormack
Jan 04 18:35
yeah it's not really beneficial at all unless you're doing entry level tech support
Kaz Baig
@kbaig
Jan 04 18:36
Hey guys I'm kinda losing my mind on something and wondering if you could help me figure it out
Jason Luboff
@JLuboff
Jan 04 18:36
Sorry can't help with losing minds
Kaz Baig
@kbaig
Jan 04 18:36
If you pay attention to the social links while resizing the screen width with dev tools open, it retains its fixed width
But if you switch to mobile view, it shrinks the font down to accommodate
What is going on?
Jason Luboff
@JLuboff
Jan 04 18:39
I let others help with that hehe
Kaz Baig
@kbaig
Jan 04 18:43
omg I found the answer
Added meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") in my head
Jason Luboff
@JLuboff
Jan 04 18:51

@cmccormack Btw...proxy setting worked

"proxy" : "http://localhost:3000"

inside package.json so now I can just do fetch('/api') instead of needing the entire string

Christopher McCormack
@cmccormack
Jan 04 18:54
@JLuboff that's with the dev server right?
Jason Luboff
@JLuboff
Jan 04 18:55
I haven't done anything beyond dev at this point
Yogender
@yb1997
Jan 04 19:07
can someone explain this to me please
[] + {}  // returns "[object Object]"
{} + []  // returns 0
Kaz Baig
@kbaig
Jan 04 19:07
Nothing to see here :smile:
Aditya
@ezioda004
Jan 04 19:14
/shrug
Aditya
@ezioda004
Jan 04 19:21
@yb1997 In second one {} + [], {} is parsed as empty block and not object, so {} + [] is essentially +[] which is 0
Yogender
@yb1997
Jan 04 19:22
@ezioda004 ah ! makes sense
Nate Mallison
@NJM8
Jan 04 19:23
try setting the second one to a variable then log it
Yogender
@yb1997
Jan 04 19:24
in that case it returns "[object Object]"
Nate Mallison
@NJM8
Jan 04 19:24
:boom:
Aditya
@ezioda004
Jan 04 19:24
@yb1997 For first one, in this case {} is parsed as an object, so + will try to convert them both to their toPrimitive which will be do abstract operation such as [].toString() + {}.toString()
Nate Mallison
@NJM8
Jan 04 19:26
Is toPrimitive a function on the prototype of all things used for coercion or something a long those lines?
Aditya
@ezioda004
Jan 04 19:28
Its an abstract operation which first searches for .toValue() and then .toString() in an object. So yeah kinda its responsible for object coercion and weird behavior
Yogender
@yb1997
Jan 04 19:29

I just found this :

true + true // returns 2

now I need some truthy values or something that converts to number

++[[]][+[]] + ++[[]][+[]]    // returns 2

🎇 there you go

Nate Mallison
@NJM8
Jan 04 19:30
What in the world are you doing
haha
Kaz Baig
@kbaig
Jan 04 19:30
This is unhealthy
Nate Mallison
@NJM8
Jan 04 19:32
My guess is making a programming language, or some obscure Codewars challenge to do silly things
Aditya
@ezioda004
Jan 04 19:32
Yogender
@yb1997
Jan 04 19:33
cant use ++ operator directly on [] as it requires address of the value instead of the value itself so I'm putting an empty array inside an array [[]] and then accessing that empty array [[]][+[]], that +[] evaluates to 0 so its effectively doing this [[]][0]
Aditya
@ezioda004
Jan 04 19:35
🤯
Yogender
@yb1997
Jan 04 19:36
now its becomes ++[[]][0], now ++ operator gets an empty array and that empty array first gets converted to 0 and then incremented by 1
now I'm starting to realize why some people hate js 😁
Kaz Baig
@kbaig
Jan 04 19:37
I don't think this is a good reason to hate on it
Nate Mallison
@NJM8
Jan 04 19:38
Best talk ever
Aditya
@ezioda004
Jan 04 19:40
Type coercion is mischievous, yes but if you can look past it JS is pretty decent
Christopher McCormack
@cmccormack
Jan 04 19:40
yeah seriously @kbaig why write something like that just because it's possible
all languages have weird stuff like that
Brad
@bradtaniguchi
Jan 04 19:40
I know of a repo that is full of these, let me see if I can find it
Yogender
@yb1997
Jan 04 19:41
yea its a just a bit exaggeration but there are many instances where type coercion leads to complex bugs
Aditya
@ezioda004
Jan 04 19:42
@kbaig Is this a good reason to hate it? 🤔
Nate Mallison
@NJM8
Jan 04 19:43
no
There are no good reasons to hate it IMHO. Only because you are wasting your energy. Just because you hate it doesn't mean it's going to change, but you can spend energy on understanding it.
Aditya
@ezioda004
Jan 04 19:45
So basically "if you cant change it, join it"? lol
Yogender
@yb1997
Jan 04 19:47
@ezioda004 this reminds me of "You Either Die A Hero, Or You Live Long Enough To See Yourself Become The Villain"
Jason Luboff
@JLuboff
Jan 04 19:48
Jesus. Just took me over an hour to fix my linter. Fucking thing was looking at the wrong config file
Nate Mallison
@NJM8
Jan 04 19:49
I mean, we aren't talking about Nazism, it's a programming language. Just something to learn. You may as well hate the sun rising in the east
You know what really gets me
Leaves
Look at them. Looking all smug and green. Little pricks.
lol
Yogender
@yb1997
Jan 04 19:51
nah you should never hate leaves, just look at all those patterns on them, so beautiful
Nate Mallison
@NJM8
Jan 04 19:52
@JLuboff I went from no linters to three and now they all play linter roulette when I save my files to see who gets the final say haha
Kelechi Chinaka
@ke1echi
Jan 04 19:54
ajax test.JPG
Aditya
@ezioda004
Jan 04 19:54
@yb1997 In case of JS, it seems the opposite. ES6+ have been loved by devs, and the fact developing in JS is so fast and easy, you can see it taking over server/desktop/mobile apps.
Kelechi Chinaka
@ke1echi
Jan 04 19:54
am trying out using ajax
i get this error, what does codepen mean
Aditya
@ezioda004
Jan 04 19:55
Look up CORS
In your case you're mixing http with https
Yogender
@yb1997
Jan 04 19:56
host your server on https and also enable cors
Aditya
@ezioda004
Jan 04 19:56
Changing to https://api.forismatic.com should do it, I believe they support that
Yogender
@yb1997
Jan 04 19:59
@ezioda004 I love es6 too but the pace at which new frameworks and libraries comes in JS is just too much, one spends months or years on a framework or library to become good at it only to find out that some new library or framework is out and start learning that one too
sometimes it sucks
Kelechi Chinaka
@ke1echi
Jan 04 19:59
same problem
Yogender
@yb1997
Jan 04 20:00
I hate my manager
Kelechi Chinaka
@ke1echi
Jan 04 20:00
how do i host on https and enable cors @yb1997
Yogender
@yb1997
Jan 04 20:01
@ke1echi is your backend made in nodejs ?
Kelechi Chinaka
@ke1echi
Jan 04 20:02
no backend @yb1997
trying to make random quote machine
Brad
@bradtaniguchi
Jan 04 20:04
After my long delay... https://github.com/denysdovhan/wtfjs
Christopher McCormack
@cmccormack
Jan 04 20:04
I think you should use the badass https://thesimpsonsquoteapi.glitch.me/
Aditya
@ezioda004
Jan 04 20:04
@yb1997 I disagree with that, the JS ecosystem has been stable for a while now.
React/Vue/Angular all came out 5+ years ago, Node/express/mongo are also old. If you're new to JS ecosystem then yes it might feel overwhelming but mostly its stable now.
Yogender
@yb1997
Jan 04 20:05
well in that case nothing much can be done except change you source for random quotes
you can use this one: https://quotesondesign.com/
Nate Mallison
@NJM8
Jan 04 20:05
I just copied the text for my own random quotes
Kelechi Chinaka
@ke1echi
Jan 04 20:05
nice @cmccormack
Jason Luboff
@JLuboff
Jan 04 20:06
@ke1echi Thats the API I made that I sent you the other day :)
And thanks @cmccormack for the plug lol
Kelechi Chinaka
@ke1echi
Jan 04 20:07
oh @JLuboff didnt see it
works fine now
Idowu Wasiu
@Hoxtygen
Jan 04 20:07
hello guys, help needed
Nate Mallison
@NJM8
Jan 04 20:08
Ask away
Yogender
@yb1997
Jan 04 20:09
@ezioda004 I started both learning and working on angular project like a month and a half and now my project manager expects from me to provide a small session on react just because he heard from someone that I implemented react in some existing project
and I know I'm not that good at it but can't say no to the boss i guess
Nate Mallison
@NJM8
Jan 04 20:10
Sure you can
If you can't then he is the wrong boss
And if it's just the two of you then you are the best React dev in the room! Haha
Aditya
@ezioda004
Jan 04 20:11
I guess he just wants to see whats the difference b/w React and Angular? I think these kind of discussions are great, you get to learn a lot in a team
Christopher McCormack
@cmccormack
Jan 04 20:11
@ke1echi I also made a proxy recently for the github jobs api - you could clone it and modify it to work with any quote api if you want https://glitch.com/edit/#!/github-jobs
Nate Mallison
@NJM8
Jan 04 20:12
Should be using VueJS anyways
🤣
I couldn't help it
Idowu Wasiu
@Hoxtygen
Jan 04 20:12

I'm running a node/express server alongside pure html but I'm unable to make a post request via the form using ajax.

I have two folders; server and UI. the server contains node/express codes while the UI contains html, css and js files

inside the server I did

app.use(express.static('UI'));

so I can render the index.html file. However the Post request isnt even hitting server

here's my ajax request

$(document).ready(() => {
  $('#bookForm').on('submit', (event) => {
    const title = $('#title');
    const author_id = $('#authorId');
    const pubyear = $('#pub_year');
    const category_id = $('#categoryId');
    const publisher = $('#publisher');
    const imageUrl = $('#imageUrl');
    // const bookData =
    event.preventDefault();
    $.ajax({
      url: 'http://localhost:5001/api/v1/books/',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        title: title.val(),
        author_id: author_id.val(),
        pubyear: pubyear.val(),
        category_id: category_id.val(),
        publisher: publisher.val(),
        imageUrl: imageUrl.val(),
      }),
      success: (response) => {
        console.log(response);
      },
      failure: (err) => {
        if (err) {
          console.log(err);
        }
      },
    });
  });
});

I'm getting a cannot POST / response

Brad
@bradtaniguchi
Jan 04 20:13
@Hoxtygen What errors are you getting, if anything
Idowu Wasiu
@Hoxtygen
Jan 04 20:13
@bradtaniguchi cannot POST / response
Christopher McCormack
@cmccormack
Jan 04 20:14
is the server started?
Jason Luboff
@JLuboff
Jan 04 20:14
@Hoxtygen Have you tried something like PostMan to see if you can POST that way?
Christopher McCormack
@cmccormack
Jan 04 20:14
is your endpoint for /api/v1/books configured?
Brad
@bradtaniguchi
Jan 04 20:14
wheres that error?
Idowu Wasiu
@Hoxtygen
Jan 04 20:14
@JLuboff yes , working fine on postman
Brad
@bradtaniguchi
Jan 04 20:14
in the browser or on the server?
Idowu Wasiu
@Hoxtygen
Jan 04 20:14
@bradtaniguchi browser
Brad
@bradtaniguchi
Jan 04 20:15
is your server logging any errors/ info of what your doing? is it even seeing the request?
Idowu Wasiu
@Hoxtygen
Jan 04 20:15
@bradtaniguchi nothing on console because it's not hitting the server
@bradtaniguchi yes i'm logging errors and req body on console, but now it's not showing anything
Christopher McCormack
@cmccormack
Jan 04 20:15
@Hoxtygen for help on issues like that it really helps if you use something like git along with something like github, then you can share it
Idowu Wasiu
@Hoxtygen
Jan 04 20:16
@cmccormack okay , let me push to github and share the repo
Brad
@bradtaniguchi
Jan 04 20:16
are you making a network request according to your browser, or is that not even working either
Christopher McCormack
@cmccormack
Jan 04 20:17
yeah check your console
Idowu Wasiu
@Hoxtygen
Jan 04 20:18
@bradtaniguchi what should go into the action?
<form action="" method="post"></form>
Kelechi Chinaka
@ke1echi
Jan 04 20:19
is there a maximum number for num? https://thesimpsonsquoteapi.glitch.me/quotes?count=num @JLuboff
Jason Luboff
@JLuboff
Jan 04 20:20
@ke1echi I think I made it 10
Brad
@bradtaniguchi
Jan 04 20:20
@Hoxtygen Do you need that if your using an ajax request?
Jason Luboff
@JLuboff
Jan 04 20:20
But.. probably better to only get one
Every call to the API will give a random quote
Idowu Wasiu
@Hoxtygen
Jan 04 20:21
@bradtaniguchi my thought is NO, but then nothing is working so I thought maybe it could be a factor
Brad
@bradtaniguchi
Jan 04 20:21
Nope, my understanding is the form HTML api is how todo it without JS, but since your using js/jquery then you shouldn't need it.
Kelechi Chinaka
@ke1echi
Jan 04 20:21
ok @JLuboff
Nate Mallison
@NJM8
Jan 04 20:21
@cmccormack I forgot to check Lenovo's return policy when I bought that cpu, 15% restocking fee, guess that is my new machine and I'll sell the MBP. I was planning on just trying it out..... oops. haha
Brad
@bradtaniguchi
Jan 04 20:21
I'd understand the issue before trying to fix it, otherwise your just guessing
Christopher McCormack
@cmccormack
Jan 04 20:25
@NJM8 boo restocking fees
Nate Mallison
@NJM8
Jan 04 20:27
You are telling me
Idowu Wasiu
@Hoxtygen
Jan 04 20:27
@bradtaniguchi will it possible to clone a pull request? I don't want to merge to the main branch now @cmccormack
Brad
@bradtaniguchi
Jan 04 20:28
@Hoxtygen Just push your branch, people can clone your repo, and pull the branch
Idowu Wasiu
@Hoxtygen
Jan 04 20:28
Brad
@bradtaniguchi
Jan 04 20:29
Damn you should clean up some of these branches haha
Idowu Wasiu
@Hoxtygen
Jan 04 20:30
@bradtaniguchi It's a long way home man, want something to fall back on in case shit hit the fan along the way
Brad
@bradtaniguchi
Jan 04 20:31
@Hoxtygen You have git history
@Hoxtygen The branches are merged to master, so you can always revert using the commits in master, you don't need the branches to "revert"
regardless, having all the code is nice, but I assume we can figure out the issue by looking into how the client code is setup
Idowu Wasiu
@Hoxtygen
Jan 04 20:32
@bradtaniguchi oh well, I've even got the history extension on VScode, heaven knows I havent try using it the way you're suggesting
Brad
@bradtaniguchi
Jan 04 20:32
plus I can't run the app locally, or at least don't know how
@Hoxtygen It's possible, i have no idea how the VSCode extension works, and idk if its supported with it. this is why I use git from the terminal for everything but some visual tasks
Idowu Wasiu
@Hoxtygen
Jan 04 20:33
@bradtaniguchi clone the repo and just run npm install on the terminal
@bradtaniguchi I use git from the terminal too
Brad
@bradtaniguchi
Jan 04 20:36
Yea I'm getting an error since I dont' have the DB
Idowu Wasiu
@Hoxtygen
Jan 04 20:37
@bradtaniguchi can you simulate using an array?, a bit of work I suppose
Brad
@bradtaniguchi
Jan 04 20:37
Regardless of running the app, the issue appears to be on the client-side code. You got screenshots of the console errors your getting?
I can't commit that much time to do that
Idowu Wasiu
@Hoxtygen
Jan 04 20:37
@bradtaniguchi no error on console
Yogender
@yb1997
Jan 04 20:37
@ezioda004 @NJM8 thank you guys for your positive feedback, I now feel energetic to go back to reactland and revive those old memories.
Brad
@bradtaniguchi
Jan 04 20:38
@Hoxtygen Wait, were are you seeing the error you mentioned?
Idowu Wasiu
@Hoxtygen
Jan 04 20:39
@bradtaniguchi browser
Christopher McCormack
@cmccormack
Jan 04 20:39
Why don't I see the feature branches when I clone the repo? Is there command to show all branches?
Brad
@bradtaniguchi
Jan 04 20:39
@cmccormack git branch --all?
Idowu Wasiu
@Hoxtygen
Jan 04 20:39
@bradtaniguchi how to send image on gitter?
Christopher McCormack
@cmccormack
Jan 04 20:40
@bradtaniguchi oh yeah XD I was trying to do git fetch --all but still didn't see the branches with git branch
thanks
Brad
@bradtaniguchi
Jan 04 20:42
:thumbsup:
Idowu Wasiu
@Hoxtygen
Jan 04 21:11
@bradtaniguchi this is what git history extension on vscode looks like http://i38.photobucket.com/albums/e143/hoxtygen/githistory_zpswdddcrvp.png
Idowu Wasiu
@Hoxtygen
Jan 04 21:38
@bradtaniguchi @cmccormack have thou forsaken me?
Brad
@bradtaniguchi
Jan 04 21:38
What
I last asked were are you seeing the error messages, and you said in the browser. If so, then do you see any network requests being made? If not then where is the message being printed out?
Idowu Wasiu
@Hoxtygen
Jan 04 21:39

I'm running a node/express server alongside pure html but I'm unable to make a post request via the form using ajax.

I have two folders; server and UI. the server contains node/express codes while the UI contains html, css and js files

inside the server I did

app.use(express.static('UI'));

so I can render the index.html file. However the Post request isnt even hitting server

here's my ajax request

$(document).ready(() => {
  $('#bookForm').on('submit', (event) => {
    const title = $('#title');
    const author_id = $('#authorId');
    const pubyear = $('#pub_year');
    const category_id = $('#categoryId');
    const publisher = $('#publisher');
    const imageUrl = $('#imageUrl');
    // const bookData =
    event.preventDefault();
    $.ajax({
      url: 'http://localhost:5001/api/v1/books/',
      method: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        title: title.val(),
        author_id: author_id.val(),
        pubyear: pubyear.val(),
        category_id: category_id.val(),
        publisher: publisher.val(),
        imageUrl: imageUrl.val(),
      }),
      success: (response) => {
        console.log(response);
      },
      failure: (err) => {
        if (err) {
          console.log(err);
        }
      },
    });

  });
});

I'm getting a cannot POST / response

this

Brad
@bradtaniguchi
Jan 04 21:41
Yea I know that, I'm asking you to work with me here since I can't run the project to debug the issue myself. Your saying your getting cannot POST / response and I want to know where that comes from, is it in the success callback, or the failure callback that prints it out, and what does the network tab in your browser say when you call this code? Do you see network traffic being made?
Jason Luboff
@JLuboff
Jan 04 21:41
Just curious.. why aren't you getting .val() on your variables?
Idowu Wasiu
@Hoxtygen
Jan 04 21:42
@bradtaniguchi it's simply cannot POST / .. I added the response
@JLuboff hanvent even checked that, the curious thing is requests arent hitting the server....
Kelechi Chinaka
@ke1echi
Jan 04 21:43
@JLuboff how do i update my div with api response
Brad
@bradtaniguchi
Jan 04 21:44
@Hoxtygen I'm sorry, without more information I cannot help you. I know just as much as I knew when you first posted the original issue, but we will need more ot help debug the issue, otherwise we will just be guessing whats wrong
Idowu Wasiu
@Hoxtygen
Jan 04 21:45
@JLuboff if the values are empty I'd be getting error messages on my console as I used express validator for validation
Jason Luboff
@JLuboff
Jan 04 21:45
@ke1echi Use JS to change it.. if using jQuery $('#divID').text(data) or vanilla js I think you use document.getElementById('divID').innerText(data) (I think..I dunno)
Kelechi Chinaka
@ke1echi
Jan 04 21:47
using vanilla
Jason Luboff
@JLuboff
Jan 04 21:47
@Hoxtygen What happens if you do
$(document).ready(() => {
  $('#bookForm').on('submit', (event) => {
    const title = $('#title').val();
    const author_id = $('#authorId').val();
    const pubyear = $('#pub_year').val();
    const category_id = $('#categoryId').val();
    const publisher = $('#publisher').val();
    const imageUrl = $('#imageUrl').val();
    // const bookData =
    event.preventDefault();
    $.ajax({
      url: 'http://localhost:5001/api/v1/books/',
      method: 'POST',
      contentType: 'application/json',
      data: {
        title,
        author_id,
        pubyear,
        category_id,
        publisher,
        imageUrl,
      }),
      success: (response) => {
        console.log(response);
      },
      failure: (err) => {
        if (err) {
          console.log(err);
        }
      },
    });

  });
});
Idowu Wasiu
@Hoxtygen
Jan 04 21:47
@bradtaniguchi so I made a post request now but nothing except a cannot POST / in the brower , like the way error 404 are displayed... I checked the network tab, no request seem to be made...
Jason Luboff
@JLuboff
Jan 04 21:48
Also..I assume you have jQuery added to your page?
Idowu Wasiu
@Hoxtygen
Jan 04 21:49
@JLuboff yes version 3.1.1
Jason Luboff
@JLuboff
Jan 04 21:51
Did you try the above?
Idowu Wasiu
@Hoxtygen
Jan 04 21:51
@JLuboff editing now
@JLuboff no stringify?
Jason Luboff
@JLuboff
Jan 04 21:52
No
Idowu Wasiu
@Hoxtygen
Jan 04 21:55
@JLuboff same problem
@JLuboff I'm suspecting the form, but I'm not sure what's amiss there
@JLuboff here's the form
<form method="POST" class="bookForm" name="bookForm">
                                        <div class="single-input mb-10">
                                            <input type="text" name="title" id="title" required placeholder="Enter the book title">
                                        </div>
                                        <div class="single-input mb-10">
                                            <select name="author_id" id="authorId">
                                                <option value="" disabled selected>Select an author</option>
                                            </select>
                                        </div>
                                        <div class="single-input mb-10">
                                            <input type="number" name="pubyear" id="pub_year" required placeholder="Enter book year of publication">
                                        </div>
                                        <div class="single-input mb-10">
                                            <input type="text" name="publisher" id="publisher" required placeholder="Enter the book publisher">
                                        </div>
                                        <div class="single-input mb-10">
                                            <select name="category_id" id="select" required>
                                                <option value="" disabled selected>Select a category</option>
                                            </select>
                                        </div>
                                        <div class="single-input mb-10">
                                            <input type="url" name="imageUrl" id="imageUrl" required placeholder="Enter the full book image url">
                                        </div>
                                        <div class="d-flex jcc">
                                            <button type="submit" id = 'submit' class="primary-btn mt-10 d-if text-uppercase aic">Submit</button>
                                        </div>
                                    </form>
Idowu Wasiu
@Hoxtygen
Jan 04 22:00
@JLuboff if I do this I get a response from the server
                                    <form action="http://localhost:5001/api/v1/books/" method="POST" class="bookForm" name="bookForm">
Jason Luboff
@JLuboff
Jan 04 22:01
Let me ask this... have you verified that your function is even firing? i.e console.log('I made it inside my function!')?
Idowu Wasiu
@Hoxtygen
Jan 04 22:02
@JLuboff you mean the ajax function?
Jason Luboff
@JLuboff
Jan 04 22:02
the submit function
Idowu Wasiu
@Hoxtygen
Jan 04 22:05
@JLuboff you're right , function isn't firing. just did a console.log and nothig
Jason Luboff
@JLuboff
Jan 04 22:06
Well thats a problem :)
Idowu Wasiu
@Hoxtygen
Jan 04 22:06
@JLuboff a big one indeed!
goddammit! I'm hungry..... gotta get something to eat and finish off this once and for all
Kelechi Chinaka
@ke1echi
Jan 04 22:36
https://codepen.io/kelechichinaka/pen/QdjwEY
getting undefined when i click New quote
any help @JLuboff
Jason Luboff
@JLuboff
Jan 04 22:38
I don't see anywhere that you're attempting to add or change the quote inside the div in your JS. I do see you're getting a quote though
Idowu Wasiu
@Hoxtygen
Jan 04 22:42
@JLuboff so now instead of doing onSubmit on the form, I'm doing onClick on the submit button and I'm getting a response from the server
Jason Luboff
@JLuboff
Jan 04 22:48
Awesome
Idowu Wasiu
@Hoxtygen
Jan 04 22:50
@JLuboff but I'm not sure why according to express validator this isnt a valid url
http://i38.photobucket.com/albums/e143/hoxtygen/twelfthCard_zpsmi1s51wg.jpg
Brad
@bradtaniguchi
Jan 04 22:51
@Hoxtygen Maybe its because its http:// instead of https://? Not sure what the express validator is suppose to be doing tho
Kelechi Chinaka
@ke1echi
Jan 04 22:52
take a look at it again @JLuboff getting [object Object]
Jason Luboff
@JLuboff
Jan 04 22:53

@ke1echi

document.getElementById("text").innerHTML = myData[0].quote;

You need to access the key(s)

Idowu Wasiu
@Hoxtygen
Jan 04 22:53
@bradtaniguchi I'm validating inputs at the api endpoints , so there is a place to enter url so I'm using express validator to make sure what's bding entered is valid url
Kelechi Chinaka
@ke1echi
Jan 04 22:55
oh true @JLuboff
Brad
@bradtaniguchi
Jan 04 22:55
@Hoxtygen How are you checking its a valid url exactly? Isn't the express validator just using the validator code for your use case?
Idowu Wasiu
@Hoxtygen
Jan 04 22:57
@bradtaniguchi
 req.checkBody('image_url').notEmpty().withMessage('Image url is required')
      .isURL()
      .withMessage('invalid url');
Brad
@bradtaniguchi
Jan 04 22:59
@Hoxtygen the checkBody method looks to be under the legacy api it seems: https://express-validator.github.io/docs/legacy-api.html#reqcheckbodyfield-message
Idowu Wasiu
@Hoxtygen
Jan 04 23:00
@bradtaniguchi I'm getting image url is required, meaning its not getting the value but I can see it in the console...... looks like there might be a case conflict somewhere
@bradtaniguchi wait, the checkbody is old news?
@bradtaniguchi thanks for pointing that out
Brad
@bradtaniguchi
Jan 04 23:08
:thumbsup:
Jason Luboff
@JLuboff
Jan 04 23:38
Time...to test!
Keggatron
@Keggatron
Jan 04 23:42
Hey guys, I'm having an issue where my modal won't close upon rerender of the component.
Jason Luboff
@JLuboff
Jan 04 23:43
How are you controlling it? (i.e what is causing it to render)
Keggatron
@Keggatron
Jan 04 23:43
The state is called initially to set the modalOpen to false, I've tried a componentDidUpdate function to reset it to false however that's still not working
an onClick function sets modalOpen to true
Jason Luboff
@JLuboff
Jan 04 23:44
So you have something like {modalOpen && <Modal ..>}?
Keggatron
@Keggatron
Jan 04 23:45
it's a prop in semantic-ui-react's Modal element called open
so I have something like <Modal open={modalOpen} />
Jason Luboff
@JLuboff
Jan 04 23:46
Have you verified that modalOpen is changing ?
Keggatron
@Keggatron
Jan 04 23:47
it remains true after the changes
what lifecycle method would I use to reset that?
Jason Luboff
@JLuboff
Jan 04 23:48
Do you have a close button (x, close, whatever) in the modal? If so..you could just create an onClick for that
Keggatron
@Keggatron
Jan 04 23:48
no
I change my mobx state when I click the add button in the modal which rerenders the component
Jason Luboff
@JLuboff
Jan 04 23:50
@cmccormack You around? This might be something he can answer. I'm still relatively new to React
Keggatron
@Keggatron
Jan 04 23:50
thanks for helping out @JLuboff