These are chat archives for FreeCodeCamp/HelpJavaScript

2nd
May 2018
Ryan Williams
@Ryanwfile
May 02 2018 01:06
For the Sorted Union algorithm the suggested links recommends using the arguments object but this doesn't work well with ES6, is there an alternative to the arguments object in ES6?
Aditya
@ezioda004
May 02 2018 01:57
@Ryanwfile Rest parameter? Its the ES6 way for getting arguments from function
Ryan Williams
@Ryanwfile
May 02 2018 02:03
@ezioda004 Thank you, I'm not familiar with that I will look it up
Kelechi Chinaka
@ke1echi
May 02 2018 02:05
:wave: @ezioda004
what pset are you? @ezioda004
Aditya
@ezioda004
May 02 2018 02:11
@kelechy Hey, I had to stop due to some other project commitment, I completed till pset4. I'll start again in couple of weeks after I'm done with this current project. What about you?
Kelechi Chinaka
@ke1echi
May 02 2018 02:13
cool
completed pset3.. life got in my way .. but i hope to get back on track this week @ezioda004
Aditya
@ezioda004
May 02 2018 02:20
@kelechy Ah, goodluck :thumbsup:
I really wanna get to python/js section, hopefully I can get back on track soon too
Kelechi Chinaka
@ke1echi
May 02 2018 02:21
me too @ezioda004 goodluck
Brian
@BrianCodes33
May 02 2018 02:30
does anyone know how to find an adjacent num in an array..[1,7,10,13,11] -> only swap out 10 and 11 since they are adjacent
Brad
@bradtaniguchi
May 02 2018 04:19
@BrianCodes33 Not sure what your asking, how to swap in general, or something that only considered the adjacent ones(?)
Markus Kiili
@Masd925
May 02 2018 05:28
@BrianCodes33 You can do it with filter and indexOf.
Brian
@BrianCodes33
May 02 2018 06:23
@Masd925 thats what i was thinking
albeit not easy
Markus Kiili
@Masd925
May 02 2018 06:29
@BrianCodes33 Keep num if num-1 and num+1 are not found on the array
Simple but very inefficient actually.
Daniel Simeonov
@dbsimeonov
May 02 2018 06:31
:wave:
Markus Kiili
@Masd925
May 02 2018 06:31
Morning.
Daniel Simeonov
@dbsimeonov
May 02 2018 06:33
How are you guys doing so early in the morning :D
Markus Kiili
@Masd925
May 02 2018 06:38
:coffee: helps.
Daniel Simeonov
@dbsimeonov
May 02 2018 06:40
I have the feeling that :coffee: keeps me alive
Before I thought that having 4-5 cups is not normal, but saw online that there are people having double than me
Daniel Simeonov
@dbsimeonov
May 02 2018 07:52

Guys I know I asked that before but yesterday couldn't do it and now struggled for 2h and kind of gave up..
I have a li with button and hiddendropdown which should be triggered on click with a class.

What I'm trying to do, when its opened and user clicks outside the element, to remove that class.
The Javascript I have so far and tried many different ways

const loginDropdown = () => {
    const target = document.querySelector('#login');
    const dropdown = document.querySelector('.login-dropdown');
    target.addEventListener('click', () => {
        dropdown.classList.toggle('login-active');
    })
    document.addEventListener('click', evt => {
        if(evt.target !== dropdown){
            console.log(evt.target);
        }
    })    
}

The problem with target is that my dropdown has too many components and its always selecting the child elements. Any suggestions?

Claudio Restifo
@Marmiz
May 02 2018 08:58
@dbsimeonov the issue is that you cannot select the correct elements?
Daniel Simeonov
@dbsimeonov
May 02 2018 08:59
@Marmiz yes
Claudio Restifo
@Marmiz
May 02 2018 09:02
@dbsimeonov is it target or dropdown that is giving you problems? Have you tried with a higer specificity that just the id or the class?
also side note: using anonymous function in an event listener like that is not the best practice since you don't have a reference to remove it later on (in case you need to remove it ofc)
Daniel Simeonov
@dbsimeonov
May 02 2018 09:03
@Marmiz So when I click on button - opens adropdown which has multiple elements inside. The idea is to close it when user clicks outside the dropdown.
Really my answer is don't know as I tried 6-7 resources I found online and none of them worked..
Claudio Restifo
@Marmiz
May 02 2018 09:08
@dbsimeonov you can simply add an event listener on document, and if the dropdown target is not in the listed target close it.
if (!element.closest(selector)))  // means that the selector is not an ancestor so you can assume it's outside
you can probably use DOM contains()
Daniel Simeonov
@dbsimeonov
May 02 2018 09:11
hmmm I think understood it, so I can use dom contains() to check if it excist and after that for higher importance to check if its open, and after that to use closest() to check if its outside?
Claudio Restifo
@Marmiz
May 02 2018 09:19
@dbsimeonov the easiest implementation:
_onClickOutside(event){
  // is it outside the element
  if(!event.target.closest(selectorElement)){
    // we can toggle here between open-close
 }
}

document.addEventListener("click", _onClickOutside)
Ronique Ricketts
@RoniqueRicketts
May 02 2018 16:58
Hey people
Gulsvi
@gulsvi
May 02 2018 17:10
@dbsimeonov Have you considered using the onblur event? If the user clicks anywhere on the page, taking the dropdown out of focus, it will be hidden.
Stephen James
@sjames1958gm
May 02 2018 17:53
@RoniqueRicketts :wave:
Brian
@BrianCodes33
May 02 2018 17:57
trying to find the max multiples. still getting errors. any ideas?
function maxMultiple(divisor, bound){
  if (divisor === 1 && bound === 1) {
    return 1;
  } else if (divisor > bound) {
    return 0
  } else {
      for (var i=bound; i > divisor; i--) {
      if (i % divisor === 0) {
        return i
      }
    }
  }
}
Christopher McCormack
@cmccormack
May 02 2018 18:00
@BrianCodes33 what errors?
Daniel Simeonov
@dbsimeonov
May 02 2018 18:03
@gulsvi thanks, I just learned closest() which was a really helpful and now will dive into onblur !
Christopher McCormack
@cmccormack
May 02 2018 18:04
@BrianCodes33 you didn't account for bound === divisor
Gulsvi
@gulsvi
May 02 2018 18:09
@BrianCodes33 As a hint - no need for a loop. It's a math problem.
Try looking at a few input/output examples and you should see a pattern to come up with the math formula.
@dbsimeonov I had no idea closest() was vanilla JS. Thought it was only a jQuery thing. I learned something too.
Brian
@BrianCodes33
May 02 2018 18:24
what do you think of this solution?
function maxMultiple(divisor, bound){
  if (bound % divisor === 0 || bound / divisor === 1) {
    return bound;
  } else {
    let multiplyBy = Math.floor(bound / divisor)
    return divisor * multiplyBy;
  }
}
Tiago Correia
@tiagocorreiaalmeida
May 02 2018 18:24
Doesanyone knows a good docker course?
Brian
@BrianCodes33
May 02 2018 18:26
i guess i don't need that first if clause
Pieter Stokkink
@forkerino
May 02 2018 18:45
@BrianCodes33 what about:
function maxMultiple(divisor, bound){
  return bound - bound % divisor
}
Christopher McCormack
@cmccormack
May 02 2018 18:46
@forkerino :boom:
keep going - const maxMultiple = (d,b) => b - (b%d)
Pieter Stokkink
@forkerino
May 02 2018 18:47
@cmccormack :)
Brian
@BrianCodes33
May 02 2018 18:47
you guys are pro - i’m amateur lol
Pieter Stokkink
@forkerino
May 02 2018 18:50
@tiagocorreiaalmeida Nigel Poulton has an ok course over at pluralsight. He also wrote a book covering the material, which I learned a bit more from.
Ronique Ricketts
@RoniqueRicketts
May 02 2018 19:00
@sjames1958gm hey whats up? If I have a mongo db is there a way to see the data inside the db in a format like what we used in phpmyadmin?
Tiago Correia
@tiagocorreiaalmeida
May 02 2018 19:03
Thanks @forkerino
Brad
@bradtaniguchi
May 02 2018 19:09
@RoniqueRicketts Idk what phpmyadmin shows, but are you talking about like a table view? What are you looking at the data with right now? Some mongodb UI's provide a table view (I use robo3t and it has one)
Ronique Ricketts
@RoniqueRicketts
May 02 2018 19:14
@bradtaniguchi there is a mongo UI
robo3t
Brad
@bradtaniguchi
May 02 2018 19:15
I use robo3t cuse its free, idk how good other alternatives are. I used compass, but its more for data visualization
Ronique Ricketts
@RoniqueRicketts
May 02 2018 19:22
@bradtaniguchi wow thanks.
yes just to visualize the data
Gulsvi
@gulsvi
May 02 2018 19:53
@forkerino @cmccormack semicolons! lol
Christopher McCormack
@cmccormack
May 02 2018 19:55
I don't use semicolons
Gulsvi
@gulsvi
May 02 2018 19:55
tc39/ecma262#1062
Future versions of JS will throw warnings without semicolons, from what I understand
Christopher McCormack
@cmccormack
May 02 2018 19:56
That only matters if you aren't using a transpiler :)
if you're using a good linter/prettier/transpiler/whatever you dont have to worry about any of that stuff
Gulsvi
@gulsvi
May 02 2018 19:57
Not today, but in the future, they won't be able to guarantee it. I think that's why they're adding the warnings.
If the compiler can't figure it out, transpilers won't be able to either - not an issue today, of course
Ronique Ricketts
@RoniqueRicketts
May 02 2018 19:58
@cmccormack is the fcc oven broken?
Christopher McCormack
@cmccormack
May 02 2018 19:59
@RoniqueRicketts I do not know what that is
@gulsvi I don't think you are correct in what you just said
Christopher McCormack
@cmccormack
May 02 2018 20:00
my babel generated code always has semicolons in it, why would you think it wouldn't after they add warnings?
Ronique Ricketts
@RoniqueRicketts
May 02 2018 20:00
@cmccormack brownies :)
hehehe
@bradtaniguchi thanks
Christopher McCormack
@cmccormack
May 02 2018 20:00
@RoniqueRicketts oh haha yeah I think someone submited an issue but looks like it hasn't been fixed
Gulsvi
@gulsvi
May 02 2018 20:01
@cmccormack From what I understand, there may be cases in the future where a semi-colon needs to be inserted - and there will be no way to tell whether or not it's required.
(automatically)
Christopher McCormack
@cmccormack
May 02 2018 20:01
there is always a way to tell
Gulsvi
@gulsvi
May 02 2018 20:01

This seems to be the crucial detail:

As new syntactic features are added to ECMAScript, additional cases requiring explicit semicolons emerge over time.

In other words, even if you're aware of the current cases where semi-colons are required, you can't be aware of the future cases where a semi-colon will be required. The safest way to future-proof code against future ASI hazards is to use semi-colons.

Christopher McCormack
@cmccormack
May 02 2018 20:02
or get rid of them completely
Kaz Baig
@kbaig
May 02 2018 20:03
@cmccormack thanks again for helping yesterday with Heap's algorithm! I adapted it to do what I was trying to get done
Ronique Ricketts
@RoniqueRicketts
May 02 2018 20:03
@cmccormack report it man
Christopher McCormack
@cmccormack
May 02 2018 20:03
white space ftw
Kaz Baig
@kbaig
May 02 2018 20:03
Took me a week but I got it
Ronique Ricketts
@RoniqueRicketts
May 02 2018 20:03
@kbaig sorry but FCC oven is out of use. 404 Oven not Found
Christopher McCormack
@cmccormack
May 02 2018 20:03
@kbaig awesome man, but just so you know I pretty much adapted that from the wikipedia pseudocode iirc :)
anthonygallina1
@anthonygallina1
May 02 2018 20:03
;
Kaz Baig
@kbaig
May 02 2018 20:03
The what now @RoniqueRicketts
Christopher McCormack
@cmccormack
May 02 2018 20:04
@anthonygallina1 :boom:
anthonygallina1
@anthonygallina1
May 02 2018 20:04
Hi :)
Kaz Baig
@kbaig
May 02 2018 20:04
@cmccormack Yeah I could tell but reading a real implementation still helped. My interpretation of that pseudocode took me down some dark paths
Ronique Ricketts
@RoniqueRicketts
May 02 2018 20:05
@kbaig Oven that bake FCC brownies.
Brad
@bradtaniguchi
May 02 2018 20:06
semi-colons remind me of the halting problem all the time
Christopher McCormack
@cmccormack
May 02 2018 20:06
@kbaig haha the imagery is hilarious
Kaz Baig
@kbaig
May 02 2018 20:06
@RoniqueRicketts oh yeah I know
Gulsvi
@gulsvi
May 02 2018 20:07
@cmccormack I think I found a current case that explains why a transpiler won't help if you omit semicolons:
var a = {foo: "bar", baz: "qux"}
[a].forEach(el => console.log(el))
Ronique Ricketts
@RoniqueRicketts
May 02 2018 20:07
@kbaig and you didn't tell me bruv, thats so unkind.
Christopher McCormack
@cmccormack
May 02 2018 20:08
@gulsvi that's a problem with curly braces, not semicolons
unless I'm missing it
what does that do, print the object?
Kaz Baig
@kbaig
May 02 2018 20:09
ye
Gulsvi
@gulsvi
May 02 2018 20:10
yes, prints the object - if there's a semicolon after the object
Simpler example:
var a = 1
[a].forEach(el => console.log(el))
Transpiles to:
var a = 1[a].forEach(function (el) {
  return console.log(el);
});
Christopher McCormack
@cmccormack
May 02 2018 20:11
missing a newline or is that the actual output?
Gulsvi
@gulsvi
May 02 2018 20:11
That's what codepen shows as the "compiled" js
missing a new line
Brad
@bradtaniguchi
May 02 2018 20:17

hehe I found one on stack echange:

return
0;

Or a more common use case:

return 
someComplicatedStuffThatIsSuperLongMaybeAFunctionNameOrSomethingIdk()
// and the "correct" working code
return (
someComplicatedStuffThatIsSuperLongMaybeAFunctionNameOrSomethingIdk())
// or the obvious
return someComplicatedStuffThatIsSuperLongMaybeAFunctionNameOrSomethingIdk()
the wrong ones return undefined, instead of any value. Makes sense when ya think about it
Gulsvi
@gulsvi
May 02 2018 20:18
Lots of ASI issues with destructuring apparently. Another good one:
var a = 1
var b = 2

[a, b] = [b, a]

console.log(a,b) // Expect: 2 1, Actual: 1 [undefined, 1]
Christopher McCormack
@cmccormack
May 02 2018 20:18
@bradtaniguchi that's the example I use to tell people they should always start their opening brace on the same line as the statement it belongs to
@gulsvi solution - require void :)
var a = 1
void [a].forEach(el => console.log(el))
Brad
@bradtaniguchi
May 02 2018 20:20
Yea, I don't mind JS being flexible, but just because you CAN do something (like not putting semi-colons) doesn't mean you should haha
Gulsvi
@gulsvi
May 02 2018 20:20
lol :p
Christopher McCormack
@cmccormack
May 02 2018 20:20
and don't assume these tools aren't smart enough to figure out this issue, my linter definitely DID find this issue
@bradtaniguchi just because you CAN put in semicolons doesn't mean you should
Gulsvi
@gulsvi
May 02 2018 20:20
Prettify.js makes the code into this:
var a = 1;
var b = ((2)[(a, b)] = [b, a]);

console.log(a, b); // Expect: 2 1, Actual: 1 [undefined, 1]
I only assume that the transpilers don't build their own ASI code
Christopher McCormack
@cmccormack
May 02 2018 20:21
all of my code has semicolons in after it's been compiled
Gulsvi
@gulsvi
May 02 2018 20:21
So does that prettify code, but it prettified it the wrong way
Brad
@bradtaniguchi
May 02 2018 20:21
I can firmly say a linter/compiler wont be 100% perfect to fix all my shortcommings, (Going back to the halting problem earlier)
unless I'm missing some other theory as to why it can be 100% haha
Christopher McCormack
@cmccormack
May 02 2018 20:24
because it's not a halting issue as far as I can see, it's a grammar, and grammars can be easily examined for errors
Brad
@bradtaniguchi
May 02 2018 20:24
or if the halting problem can't be applied to the current idea of "no-semi-colons is fine)
there's always ambiguous grammar tho, and then what
"tonight we eat grandma" hehe
Christopher McCormack
@cmccormack
May 02 2018 20:26
That's not ambiguous, there is no comma so you're eating kin
Gulsvi
@gulsvi
May 02 2018 20:26
"I saw the pirate with a telescope" (who has the telescope?)
Christopher McCormack
@cmccormack
May 02 2018 20:26
the pirate
Gulsvi
@gulsvi
May 02 2018 20:26
We don't know - too ambiguous
Christopher McCormack
@cmccormack
May 02 2018 20:26
this is English though, and that can be left to interpretation
we do know, using proper English grammar
Gulsvi
@gulsvi
May 02 2018 20:28
It's a classic example we learned in syntax class - grammatical sentence with two possible meanings
Christopher McCormack
@cmccormack
May 02 2018 20:29
only if you interpret it that way, but if all english speakers held to proper grammar then it wouldn't be ambiguous. As we do not, we have to put the sentence into a context we understand, and most of the time we don't actually want to eat our grandmas (although bad example as comma should be used)
Brad
@bradtaniguchi
May 02 2018 20:29
I mean I'm pretty sure the same can be applied to programming languages, the only thing I can thing of to retire the semi-colon is to litterally add something that replaces it (python new-lines for example) but then whats the point haha
Christopher McCormack
@cmccormack
May 02 2018 20:29
I believe it already does use the newlines
Brad
@bradtaniguchi
May 02 2018 20:29
But what if I am eating grandma?
Christopher McCormack
@cmccormack
May 02 2018 20:30
Then the sentence above would be accurate, but doesn't mean we as humans don't interpret it differently. But we are not machines
Brad
@bradtaniguchi
May 02 2018 20:31
But we ARE using machines to compile/transpile everything and they WILL get tripped up and WONT know what todo
Christopher McCormack
@cmccormack
May 02 2018 20:31
they will throw errors
that's what we would want them to do
so we can fix them
Gulsvi
@gulsvi
May 02 2018 20:31
We'd want them to read our minds and know what we meant (eventually!)
search engines try to do this intelligently already with misspellings and ambiguous phrases
Brad
@bradtaniguchi
May 02 2018 20:34

So if we take out semi-colons, the compiler should show errors if it doesn't know whats going on and we fix it with some semi-colon-like fix (parenthesis, new-line or something else).

Or we make them required, so the compiler doesn't get tripped up in the first place

Christopher McCormack
@cmccormack
May 02 2018 20:37
Javascript already does use newline, it would have to
otherwise something like this would work fine:
function test (stra,strb) { console.log(stra) console.log(strb) }
                                              ^^^^^^^
SyntaxError: Unexpected identifier
Brad
@bradtaniguchi
May 02 2018 20:40
what about if I'm minifying my code, I can't afford new-lines!
Gulsvi
@gulsvi
May 02 2018 20:40
... a semicolon is automatically inserted before the offending token if one or more of the following conditions is true:
  • The offending token is separated from the previous token by at least one LineTerminator.
  • The offending token is }.
  • The previous token is ) and the inserted semicolon would then be parsed as the terminating semicolon of a do-while statement (13.7.2).
Pieter Stokkink
@forkerino
May 02 2018 20:41
My linter complains when lines start with ( or [
Christopher McCormack
@cmccormack
May 02 2018 20:41
@forkerino I think that may be the only case where semicolons are useful, when a line starts with (, [, or `
Pieter Stokkink
@forkerino
May 02 2018 20:42
Yeah
Christopher McCormack
@cmccormack
May 02 2018 20:42
not sure how to escape `
but you can add void to beginning of that line and it should work fine
anthonygallina1
@anthonygallina1
May 02 2018 20:42
I put them in even if not needed Just for consistency. I did the google challenge and they wanted them.
Gulsvi
@gulsvi
May 02 2018 20:43
Google Style Guide requires them
Christopher McCormack
@cmccormack
May 02 2018 20:43
they probably had this same argument and all those people that wanted their line to start with ( [ or ` without void won :)
anthonygallina1
@anthonygallina1
May 02 2018 20:43
When I have coding for over 5 hours trying to figure something out it helps to just put the ;
Gulsvi
@gulsvi
May 02 2018 20:44
But they also require const variables in all caps, which gets hard to write lol
Pieter Stokkink
@forkerino
May 02 2018 20:44
We don't use them at work. Linter catches all problems.
Gulsvi
@gulsvi
May 02 2018 20:44
I tried it for a while and gave up on it
Christopher McCormack
@cmccormack
May 02 2018 20:44
I've never ran into an issue with JS where a semicolon was the culprate
anthonygallina1
@anthonygallina1
May 02 2018 20:44
I think it looks better without them
Christopher McCormack
@cmccormack
May 02 2018 20:45
@forkerino yeah if you're using tools these days than it's almost a moot point - they'll most likely be added anyway by your tools when compiled but you never have to look at that code
and the linter will catch those three use cases
Pieter Stokkink
@forkerino
May 02 2018 20:46
Indeed
I prefer reading code without them, too
Seems more quiet
Gulsvi
@gulsvi
May 02 2018 20:46
If I understand correctly, the linter will just say 'Hey, you might need a semi-colon here', but it won't add it for you because it could change the logic
Christopher McCormack
@cmccormack
May 02 2018 20:47
image.png
Mine did right away -
Brad
@bradtaniguchi
May 02 2018 20:47
Meh I can hardly tell with or without semi-colons when reading JS code
My editor auto throws them in, I could override them, but what reason is there. The one time things blow up because I forget it isn't woth it XD
Christopher McCormack
@cmccormack
May 02 2018 20:48
My linter could not fix the error above automatically, btw, you would have to fix that yourself
Gulsvi
@gulsvi
May 02 2018 20:48
And this is why there's no answer to this debate lol
anthonygallina1
@anthonygallina1
May 02 2018 20:48
Atom esLint i have never seen it complain about no semi. But maybe that is a yet.
Christopher McCormack
@cmccormack
May 02 2018 20:48
@anthonygallina1 probably has a default config with
    "rules": {
        "semi": 0,
Pieter Stokkink
@forkerino
May 02 2018 20:50
Only case I can remember with a real world example where it was an issue was with destructured assignment
anthonygallina1
@anthonygallina1
May 02 2018 20:51
I saw something cool last night i wish i would have bookmarked :(
Pieter Stokkink
@forkerino
May 02 2018 20:51
[a, b] = ...
But linter made me solve it differently
anthonygallina1
@anthonygallina1
May 02 2018 20:52
There was a guy/gal in here writing react type code. No library just using the nodes and DOM. But using virtual memory.
Christopher McCormack
@cmccormack
May 02 2018 20:52
@forkerino I think you have to declare it don't you?
@anthonygallina1 that sounds fun, I know there are some great medium articles on how to create your own React and it's less code than I imagined
anthonygallina1
@anthonygallina1
May 02 2018 20:53
Kicking myself for not book marking that
@cmccormack thanks
Gulsvi
@gulsvi
May 02 2018 20:54
I always wondered about creating a copy of the DOM, changing it, then replacing the entire DOM with the modified copy. I know react only replaces what changed for more efficiency, but seems like jQuery should be doing that under hood at least too.
I *think* jQuery queries and updates the dom with every manipulation
Christopher McCormack
@cmccormack
May 02 2018 20:55
before React I liked to clone a parent element before making changes to the cloned children, then mount the cloned parent back - less clobbering of the DOM that way
Gulsvi
@gulsvi
May 02 2018 20:56
^ exactly, seems like a good approach
Christopher McCormack
@cmccormack
May 02 2018 20:56
although I never really saw any performance changes as it was all way to small to matter :D
anthonygallina1
@anthonygallina1
May 02 2018 20:57
it might when it had many users On the server?
Was a honest question.
Christopher McCormack
@cmccormack
May 02 2018 20:59
If you were doing something like updating a bunch of dom elements actively, like showing the mouse position as you move the mouse, that would probably be a bit more performant if you only updated a single dom parent I bet
@anthonygallina1 which server do you mean?
anthonygallina1
@anthonygallina1
May 02 2018 21:00
oh just in general I meen could be host or node.
Gulsvi
@gulsvi
May 02 2018 21:00
Small performance problems become very large performance problems when you add a multiplier, like more users
anthonygallina1
@anthonygallina1
May 02 2018 21:00
Node probably compensates
I have been thinking of running node on godaddy. But when I did my 2 subdomains I had to jump through hoops to get the WP installs working right on them. LOL tech services said there are running right and they werent.
like 5 calls to get it dailed in.
Christopher McCormack
@cmccormack
May 02 2018 21:05
do you have a VPC?
anthonygallina1
@anthonygallina1
May 02 2018 21:06
I probably should pull up those htacess files and see how they did it
like tunnel bear?
No i use sftp
Gulsvi
@gulsvi
May 02 2018 21:09
VPS, I think he meant - your own server instead of a shared one
Christopher McCormack
@cmccormack
May 02 2018 21:09
yes sorry distracted, VPS
anthonygallina1
@anthonygallina1
May 02 2018 21:10
Oh not live
Gulsvi
@gulsvi
May 02 2018 21:10
i.e., someone else does apt-get update for you :p
anthonygallina1
@anthonygallina1
May 02 2018 21:12
Ya not server side there I have done lots of DYN stuff before though. Helps the comprehension to be able to actually see the files
Christopher McCormack
@cmccormack
May 02 2018 21:12
I'm not sure you can run a node server on godaddy if it's shared, but you can use node with npm and other tools to build your static resources
I remember trying to and getting frustrated and moving to Digital Ocean which was the same price but for a full VPS
anthonygallina1
@anthonygallina1
May 02 2018 21:15
i saw a article on how But my config seems difficult with the other cosiderations
Takes 2 servers to do it though
Janina Pohorecki
@janepohorecka
May 02 2018 21:15
Hey guys, I can't find the bug in this code: https://codepen.io/janepoho/pen/PeNBgv?editors=1010 that causes the lines to jolt when they are reset. Can somebody help me please?
anthonygallina1
@anthonygallina1
May 02 2018 21:16
A proxy i believe
Christopher McCormack
@cmccormack
May 02 2018 21:18
@anthonygallina1 reverse proxy?
anthonygallina1
@anthonygallina1
May 02 2018 21:19
I think that was it
Christopher McCormack
@cmccormack
May 02 2018 21:22
@janepohorecka
groups[i].translation.set((-hiddenMarginLeft + 320) - (275 * t_), -hiddenMarginTop + lineWeightHalf + (i * lineWeight));
I have absolutely no idea what any of that does but changing the hiddenMarginLeft + value to 320 seems to have smoothed it
anthonygallina1
@anthonygallina1
May 02 2018 21:35
@cmccormack Digital Ocean sounds good you said same price. I was worried about cpu cycle charges etc.
Christopher McCormack
@cmccormack
May 02 2018 21:36
I think it was actually cheaper
anthonygallina1
@anthonygallina1
May 02 2018 21:36
I should have made the change last year
How long for propogation they are fast last godaddy?
Probably wrong term but a good backbone then
Christopher McCormack
@cmccormack
May 02 2018 21:38
Like redundant failover?
I have no idea
but I'm not hosting anything mission critical
anthonygallina1
@anthonygallina1
May 02 2018 21:39
Didital Ocean has great articles on configs too
Christopher McCormack
@cmccormack
May 02 2018 21:39
yeah they are fantastic
My two main reasons to move were node apps and lets encrypt automatic recert
and price too I forgot :)
anthonygallina1
@anthonygallina1
May 02 2018 21:41
I think my SSL was 178 last year
Christopher McCormack
@cmccormack
May 02 2018 21:41
cost?
Let's encrypt is free
anthonygallina1
@anthonygallina1
May 02 2018 21:42
yes
@cmccormack This is the thing that really bugged though
A friend had fullstackwwebdesign.com
I lost contact
And signed up to bid
It was taken at the the last second
And GD said it wasnt them
But It belongs to a 3rd party
But I get buy adds from GD for around 3000 dollars on fullstackwebdesign.com
To rebuy
Christopher McCormack
@cmccormack
May 02 2018 21:46
So what does that mean? GD did take it to auction?
anthonygallina1
@anthonygallina1
May 02 2018 21:47
looks like it And a bot probably grabed it at the last second possibly
Christopher McCormack
@cmccormack
May 02 2018 21:47
Looks like HugeDomains.com not GD
anthonygallina1
@anthonygallina1
May 02 2018 21:48
Yup but how can GD offer to sell it ot me
Christopher McCormack
@cmccormack
May 02 2018 21:48
probably just a brokerage
anthonygallina1
@anthonygallina1
May 02 2018 21:48
Ah water under the bridge But Digital Ocean looks like a good choice Thanks
Christopher McCormack
@cmccormack
May 02 2018 21:49
I'm not 100% clear on how the doman trade works
np
Keggatron
@Keggatron
May 02 2018 22:17

Hey guys, I've got another issue I've been stuck on for a while, I'm guessing it's something that's quite easy for more experienced developers anyway I'm having an issue calling a function that calls an action creator. Here's the code:
const RenderOrders = (props) => {
const orders = props.orders

  const completeThisOrder = (props) => {
    const id = props.target.id;
    this.props.completeOrder();
  }

  return _.map(orders, (order, key) => {
    const renderDetails = order.orderDetails.map((order, i) => {
      return (
        <span key={order[i]}>
          {order.details.category}: {order.toppings.join(", ")}
          <br />
        </span>
      );
    });
    return(
      <tr>
        <td>{order.nameOnOrder}</td>
        <td>{order.addressOnOrder}</td>
        <td>{order.orderPhoneNumber}</td>
        <td>{order.orderPrice}</td>
        <td>{order.orderType}</td>
        <td>{order.paymentOption}</td>
        <td>{renderDetails}</td>
        <td><button onClick={this.completeThisOrder} id={order._id}>Completed</button></td>
      </tr>  
    )
  })  

}
```
the only way I can actually get the Completed button to call the completeThisOrder function is if I take the this. off of it. When I do that however the action creator inside the function isn't called
but when I leave it on nothing happens
I've tried binding the two but I get an error saying that it cannot read property of undefined

I've tried a bunch of different things and none of them seem to be working and I'm not entirely sure hwat to Google
Stephen James
@sjames1958gm
May 02 2018 22:21
@Keggatron Your RenderOrders is a arrow function so it doesn't have a this context.
completeThisOrder is going to get passed an event not props
You should be able to reference the props from the outer RenderOrders directly
  const completeThisOrder = () => {
    const id = props.target.id;
    props.completeOrder();
  }
And
<button onClick={completeThisOrder} id={order._id}>Completed</button>
Keggatron
@Keggatron
May 02 2018 22:24
I'm getting a props is not defined warning in my editor
@sjames1958gm
Stephen James
@sjames1958gm
May 02 2018 22:25
It is in scope from the outer function
Christopher McCormack
@cmccormack
May 02 2018 22:25
@Keggatron props is for react components but your function isn't a a child of a component
Keggatron
@Keggatron
May 02 2018 22:26
@cmccormack ok so why is @sjames1958gm telling me to use it then?
Christopher McCormack
@cmccormack
May 02 2018 22:26
@Keggatron oh I see you're using props for event
I believe he said something similar actually
Keggatron
@Keggatron
May 02 2018 22:27
@sjames1958gm I'm not entirely sure of the fix, here are the errors:
./src/components/Admin.js
  Line 8:  'props' is not defined  no-undef
  Line 9:  'props' is not defined  no-undef
Christopher McCormack
@cmccormack
May 02 2018 22:29
@Keggatron this.props is for class components
Try changing it to this:
  const completeThisOrder = (event) => {
    const id = event.target.id;
    props.completeOrder();
  }
Keggatron
@Keggatron
May 02 2018 22:31
Ok I still get an error with props.completeOrder() being undefined
Stephen James
@sjames1958gm
May 02 2018 22:32
@Keggatron Can you show where this component is used?
Keggatron
@Keggatron
May 02 2018 22:33
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchOrders, completeOrder } from '../actions/index';
import _ from 'lodash';

const completeThisOrder = (event) => {
  console.log()
  const id = event.target.id;
  props.completeOrder();
}

const RenderOrders = (props) => {
  const orders = props.orders

  return _.map(orders, (order, key) => {
    const renderDetails = order.orderDetails.map((order, i) => {
      return (
        <span key={order[i]}>
          {order.details.category}: {order.toppings.join(", ")}
          <br />
        </span>
      );
    });
    return(
      <tr>
        <td>{order.nameOnOrder}</td>
        <td>{order.addressOnOrder}</td>
        <td>{order.orderPhoneNumber}</td>
        <td>{order.orderPrice}</td>
        <td>{order.orderType}</td>
        <td>{order.paymentOption}</td>
        <td>{renderDetails}</td>
        <td><button onClick={completeThisOrder} id={order._id}>Completed</button></td>
      </tr>  
    )
  })  

}

class Admin extends Component {
  constructor(props){
    super(props)

    // this.completeThisOrder = this.completeThisOrder.bind(this)
  } 



  componentDidMount() {
    this.props.fetchOrders()
  }


  render() {
    return (
      <div>
        <h1> Open Orders </h1>
        <table>
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone Number</th>
            <th>Price</th>
            <th>Type of Order</th>
            <th>Payment Method</th>
            <th>Details</th>
          </tr>
          <RenderOrders orders={ this.props.allOrders }/>
        </table>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { allOrders: state.allOrders }
}

export default 
  connect(mapStateToProps, { fetchOrders })(Admin);
Stephen James
@sjames1958gm
May 02 2018 22:34
You are not passing the function to the component so it is undefined
Keggatron
@Keggatron
May 02 2018 22:35
please explain
Stephen James
@sjames1958gm
May 02 2018 22:36
To call a function using props. the parent component has to pass the function as a property
Keggatron
@Keggatron
May 02 2018 22:36
ok
Stephen James
@sjames1958gm
May 02 2018 22:36
<RenderOrders orders={ this.props.allOrders } completeOrder={somefunction}/>
Keggatron
@Keggatron
May 02 2018 22:38
But I mean since it's being called from the RenderOrders component wouldn't that be the parent ?
sorry forget that. I'm just a bit lost here
Stephen James
@sjames1958gm
May 02 2018 22:39
Admin is the parent of RenderOrders and the props passed to it from Admin
Just like you are passing a function through the click property to button
Keggatron
@Keggatron
May 02 2018 22:39
yes I understand that
I guess I'm lost between how to connect the RenderOrders prop completeOrder to the completeThisOrder function
Stephen James
@sjames1958gm
May 02 2018 22:43
Oh i see now. remove the props. to call the action creator (I did not see that you were importing that function)
Just call it directly
If you are using the Redux there is the connect function that can assign the action creators to props
But you are not using that and I am not sure you can do that with state-less based components
It may be the case that you can use connect with stateless components depending on the version
Keggatron
@Keggatron
May 02 2018 22:49
Ok sweet that worked
I 'm just updating the db so I'm not sure if I'm going to need anything back from the reducer anyway
no nevermind sorry, I read the wrong log, yeah it's still not working
Stephen James
@sjames1958gm
May 02 2018 22:55
If you put console.log() in the action creator is it getting called?
Keggatron
@Keggatron
May 02 2018 22:55
no
that's what I've done
Stephen James
@sjames1958gm
May 02 2018 22:56
Part of the purpose of the connect function is to also give access to the dispatcher
export default 
  connect(mapStateToProps, { fetchOrders })(Admin);
this puts a function fetchOrders into Admins props
Keggatron
@Keggatron
May 02 2018 22:57
yes
I use that to fetch all of the orders that are currently not completed
that works fine
What I want now is when an order is completed to be able to click on the button which sends an update request to the db to show completed as true which will then remove it from the list of orders on the Admin page
Stephen James
@sjames1958gm
May 02 2018 22:58
If you want to call an action creator from the other component you will need to do the same with connect and that component
The connect wrapper function is how the action creator gets assigned to props
Keggatron
@Keggatron
May 02 2018 23:19
@sjames thanks for all of your help with this, but I'm completely at a loss. How would you build this? Here's the code now :
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchOrders, completeOrder } from '../actions/index';
import _ from 'lodash';



const RenderOrders = (props) => {
  console.log(props)
  const orders = props.orders

  return _.map(orders, (order, key) => {
    const renderDetails = order.orderDetails.map((order, i) => {
      return (
        <span key={order[i]}>
          {order.details.category}: {order.toppings.join(", ")}
          <br />
        </span>
      );
    });
    return(
      <tr>
        <td>{order.nameOnOrder}</td>
        <td>{order.addressOnOrder}</td>
        <td>{order.orderPhoneNumber}</td>
        <td>{order.orderPrice}</td>
        <td>{order.orderType}</td>
        <td>{order.paymentOption}</td>
        <td>{renderDetails}</td>
        <td><button onClick={props.completeOrder} id={order._id}>Completed</button></td>
      </tr>  
    )
  })  

}

class Admin extends Component {
  constructor(props){
    super(props)

    // this.completeThisOrder = this.completeThisOrder.bind(this)
  } 

  completeThisOrder = (event) => {
    console.log(event)
    // const id = event.target.id;
    // this.props.completeOrder(id);
  }

  componentDidMount() {
    this.props.fetchOrders()
  }


  render() {
    return (
      <div>
        <h1> Open Orders </h1>
        <table>
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone Number</th>
            <th>Price</th>
            <th>Type of Order</th>
            <th>Payment Method</th>
            <th>Details</th>
          </tr>
          <RenderOrders 
            orders={ this.props.allOrders } 
            completeOrder={this.completeThisOrder} 
          />
        </table>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { allOrders: state.allOrders }
};

const mapDispatchToProps = {
  fetchOrders,
  completeOrder
};

export default connect(
  mapStateToProps, 
  mapDispatchToProps
)(Admin);
CamperBot
@camperbot
May 02 2018 23:19
api offline
keggatron sends brownie points to @sjames :sparkles: :thumbsup: :sparkles:
Keggatron
@Keggatron
May 02 2018 23:20
In the console.log of the props for RenderOrders the completeOrders props is coming back as undefined
k wait nevermind
I ran that again and I'm getting the console.log back from the action creator