These are chat archives for FreeCodeCamp/HelpJavaScript

15th
Nov 2018
Christopher McCormack
@cmccormack
Nov 15 2018 00:00
we all ran out to get our flags and pitchforks sorry
Jason Luboff
@JLuboff
Nov 15 2018 00:00
:joy:
Christopher McCormack
@cmccormack
Nov 15 2018 00:01
ohh business opportunity - pitchforks with flags on them!
just have to be careful when also carrying a torch
tiki or otherwise
Simon Cordova
@gbsimon87
Nov 15 2018 00:01
lol
pitchforks with flags on them, I just envisioned Cletus from the Simpsons holding it up
Christopher McCormack
@cmccormack
Nov 15 2018 00:03
dammit did Simpsons already do it??
Jason Luboff
@JLuboff
Nov 15 2018 00:03
Simpsons did it!
Simon Cordova
@gbsimon87
Nov 15 2018 00:04
no way
did they actually ?
Christopher McCormack
@cmccormack
Nov 15 2018 00:04
it's from south park :p
Simon Cordova
@gbsimon87
Nov 15 2018 00:05
oh lololol
Christopher McCormack
@cmccormack
Nov 15 2018 00:07
but they may have it's been like 30+ seasons hasn't it?
I dropped off like 12 years ago
Jason Luboff
@JLuboff
Nov 15 2018 00:08
I believe this is the 30th season
Simon Cordova
@gbsimon87
Nov 15 2018 00:08
87
pretty sure that's when they started
Jason Luboff
@JLuboff
Nov 15 2018 00:08
87 was for the shorts
Christopher McCormack
@cmccormack
Nov 15 2018 00:08
eat my
Jason Luboff
@JLuboff
Nov 15 2018 00:08
First actual season was 89 I believe
Simon Cordova
@gbsimon87
Nov 15 2018 00:09
oh I see
Jason Luboff
@JLuboff
Nov 15 2018 00:09
Ya, Dec 17, 1989 was the first episode
The shorts were part of the Tracey Ulman (spelling?) show
Christopher McCormack
@cmccormack
Nov 15 2018 00:11
I literally grew up watching that show, I was like 6 when I started watching it
Jason Luboff
@JLuboff
Nov 15 2018 00:12
I've watched it for as long as I can remember. I was a huge fanatic.. but.. thats dropped off over the years..find myself enjoying other shows more like Rick and Morty/Bobs Burger/etc
I still watch it...but its not like before where I had to see the new episode right away
Christopher McCormack
@cmccormack
Nov 15 2018 00:12
same
I mostly watch Futurama, Rick and Morty, and Archer for animated shows
Jason Luboff
@JLuboff
Nov 15 2018 00:13
Ah...good ol' Futurama.. that is a favorite of mine too
Archer.. I've watched quite a bit..but.. its not one that I actively watch. Not sure why
Christopher McCormack
@cmccormack
Nov 15 2018 00:13
We watch it every night to fall asleep, love it
Jason Luboff
@JLuboff
Nov 15 2018 00:14
Rick and Morty is usually the go to
Simon Cordova
@gbsimon87
Nov 15 2018 00:14
Whens the new season coming up?
Christopher McCormack
@cmccormack
Nov 15 2018 00:14
only three seasons though :/
Brad
@bradtaniguchi
Nov 15 2018 00:14
Omg I almost spent a good half hour doing a huge if/else statement for all these cases to end up with 1 line thats like this:
${user.name || 'User'} imported role ${role.name || ''} into app ${app.name || ''}
Jason Luboff
@JLuboff
Nov 15 2018 00:14
Ya...we repeat alot of episodes haha
@gbsimon87 Who knows
Christopher McCormack
@cmccormack
Nov 15 2018 00:15
late 2019
Jason Luboff
@JLuboff
Nov 15 2018 00:15
Took them what, 2 years to get season 3
Christopher McCormack
@cmccormack
Nov 15 2018 00:15
@bradtaniguchi haha you usually have to expand and then contract to really understand :)
yeah then they almost cancelled it I think
Brad
@bradtaniguchi
Nov 15 2018 00:16
yes very much yes
Simon Cordova
@gbsimon87
Nov 15 2018 00:16
That show is so good
PICKLE RICK!
lololololol classic
Christopher McCormack
@cmccormack
Nov 15 2018 00:17
That one is so stupid it's funny
Simon Cordova
@gbsimon87
Nov 15 2018 00:17
exactly
Jason Luboff
@JLuboff
Nov 15 2018 00:17
But they got a deal with AS for several seasons
Christopher McCormack
@cmccormack
Nov 15 2018 00:17
and ended up way better than the hype I saw prior as well
Simon Cordova
@gbsimon87
Nov 15 2018 00:17
the ridiculousness of it
Jason Luboff
@JLuboff
Nov 15 2018 00:18
The April fools day release of S3E1 was epic
My wife was yelling at me lol
Christopher McCormack
@cmccormack
Nov 15 2018 00:19
haha my wife didn't believe me
Simon Cordova
@gbsimon87
Nov 15 2018 00:22
Thats when weed is to be made legal for businesses to sell here next year
Itd be hilarious if the govt is pulling a massive joke
Christopher McCormack
@cmccormack
Nov 15 2018 00:23
governments aren't funny so you're probably good
Simon Cordova
@gbsimon87
Nov 15 2018 00:23
lolololol
Christopher McCormack
@cmccormack
Nov 15 2018 00:24
I don't smoke it or anything but I'm definitely for the freedom of being able to do stuff with your own body as long as it doesn't hurt others, so glad they did that
Simon Cordova
@gbsimon87
Nov 15 2018 00:29
I smoke every now and then but very very selective upon what I smoke
I'm not sure if I'm as far out for total freedom of doing whatever you want with your own body though
I just noticed the so long it doesn't hurt part other actually, I'm certainly in agreement with that
Simon Cordova
@gbsimon87
Nov 15 2018 00:37
Oh my god, I love American infomercials, just seen one for flip up tac glasses
The most patriotic thing I've ever seen lololololol
Brad
@bradtaniguchi
Nov 15 2018 01:32
@gbsimon87 is that the one with like eagles and stuff?
Christopher McCormack
@cmccormack
Nov 15 2018 01:33
@gbsimon87 yeah it makes a big difference, the majority of laws are to protect harm to others but I don't see how some of these drug laws do that. If that were true, alcohol would still be banned
abraham anak agung
@padunk
Nov 15 2018 01:34
anyone use graphQL ? I want to learn it but should i learn SQL or graphQL ?
Christopher McCormack
@cmccormack
Nov 15 2018 01:34
@padunk both would probably be better
Brad
@bradtaniguchi
Nov 15 2018 01:34
aren't those like 2 different technologies?
Christopher McCormack
@cmccormack
Nov 15 2018 01:34
graphql is not a database
right
abraham anak agung
@padunk
Nov 15 2018 01:34
@cmccormack whoa... that's tons of stuff then :smile:
Christopher McCormack
@cmccormack
Nov 15 2018 01:34
@padunk well there's tons of stuff to learn
abraham anak agung
@padunk
Nov 15 2018 01:35
but both are query lang right?
Christopher McCormack
@cmccormack
Nov 15 2018 01:35
you in a hurry or something?
abraham anak agung
@padunk
Nov 15 2018 01:35
yes i am
Christopher McCormack
@cmccormack
Nov 15 2018 01:35
I think the idea of graphQl is to greatly simplify how your frontend gets data from your backend
but you still need a DB
well most of the time you will
Brad
@bradtaniguchi
Nov 15 2018 01:36
My understanding is graphQL is a way to setup communication between the client and the server, in place of say REST.
I'd learn sql, its a proven standard, graphQL is still pretty niche
Plus database admins make the big bucks, and almost all apps require a database somewhere
abraham anak agung
@padunk
Nov 15 2018 01:38
yes, i think i going with sql, is there any different between mysql, postgre, mssql ?
Brad
@bradtaniguchi
Nov 15 2018 01:44
@padunk Those are all different databases, but they are use the same roughly the syntax (sql) to deal with
abraham anak agung
@padunk
Nov 15 2018 01:47
@bradtaniguchi cool, thanks mate
Brad
@bradtaniguchi
Nov 15 2018 01:47
np :D
Simon Cordova
@gbsimon87
Nov 15 2018 01:55
@bradtaniguchi the one with the American eagle indeed it's hilaaaaaaarious
@cmccormack true alcohol is proven dangerous, I much rather have marijuana in society, less violent I find
And whnen I said proven dangerous upon its ability to cause physical harm
Christopher McCormack
@cmccormack
Nov 15 2018 01:57
yeah in all sorts of ways. Don't get me wrong I like alcohol but there is a clear difference between the two and alcohol does not look good in the comparison
abraham anak agung
@padunk
Nov 15 2018 01:57
weed make you hungry and lazy :smile:
Christopher McCormack
@cmccormack
Nov 15 2018 01:58
Yes and alcohol makes you hungry, sick, violent, angry, belligerent, aggressive, etc...
abraham anak agung
@padunk
Nov 15 2018 02:05
is React suspense == ssr?
Tom
@moT01
Nov 15 2018 02:13
:minibus:
徐娟
@xujuan1211
Nov 15 2018 02:44

// 初始化变量
var myStr = "Jello World";

// 请只修改这条注释以下的代码
myStr = "Hello World";
myStr[0] = "H"; // 请修改这一行

这哪里不对
闯不了关
任务
把myStr 的值改为Hello World。
Christopher McCormack
@cmccormack
Nov 15 2018 02:46
Nitin
@thenm
Nov 15 2018 06:39

I am trying to understand callback and written few lines of code

function first(callback) {
  setTimeout(() => {console.log('First')}, 3000);
  callback();
}

function second() {
  console.log('Second');
}

first(second);

was expecting

first
second

But actually I am getting

second 
first
Aditya
@ezioda004
Nov 15 2018 06:40
@thenm setTimeout is asynchronous so the callback inside it ie () => console.log('First') executes after 3 seconds.
Nitin
@thenm
Nov 15 2018 06:42
@ezioda004 Aren't callback supposed to execute after the function to which is passed is completed.
Aditya
@ezioda004
Nov 15 2018 06:43
@thenm No, callbacks are executed when...you invoke them!
You're invoking callback() so it executes.
Nitin
@thenm
Nov 15 2018 06:49
So how can I make second function to execute after the first has been executed completely using callback?
@ezioda004
Aditya
@ezioda004
Nov 15 2018 06:52
@thenm Like this:
function first(callback) {
  setTimeout(() => {console.log('First');
     callback();
  }, 3000);

}

function second() {
  console.log('Second');
}
first(second);
First
Second
Nitin
@thenm
Nov 15 2018 07:08
@ezioda004 Thanks
Charlie Waite
@charliearlie
Nov 15 2018 08:53

Hey does anyone know how to extend a styled component as another element?

so

const Div = styled.div`
   ...
`;

const Form = styled(Div)`
  ...
`;

But i want Form to be a form element

Claudio Restifo
@Marmiz
Nov 15 2018 09:09
const BaseForm = styled.form``

const ExtendedForm = styled(BaseForm)``
Charlie Waite
@charliearlie
Nov 15 2018 09:12
Thanks for the attempt but not really what i'm after. I want a div and a form to have similar CSS. So I need the form to extend from a div
Claudio Restifo
@Marmiz
Nov 15 2018 09:28
@charliearlie there's something that you can use to pass a style object into components. Don't remember the name, but was something like attribute or so
Charlie Waite
@charliearlie
Nov 15 2018 09:29
@Marmiz Thanks. Will look into it
Claudio Restifo
@Marmiz
Nov 15 2018 09:29
oh no, there's the plain css module as well. Have a look into the API

@charliearlie I've found:
withComponent | as
css

that can do the trick

If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime.
Charlie Waite
@charliearlie
Nov 15 2018 09:55
@Marmiz Thank you so much.
Simon Cordova
@gbsimon87
Nov 15 2018 15:20
Hey all
Christopher McCormack
@cmccormack
Nov 15 2018 15:29
@gbsimon87 hey gm
Simon Cordova
@gbsimon87
Nov 15 2018 15:34
GM, lol don't get it?
@cmccormack
Christopher McCormack
@cmccormack
Nov 15 2018 15:51
huh?
Good Morning of course
Simon Cordova
@gbsimon87
Nov 15 2018 16:02
Oh damn, I was thinking General Manager, like a sports joke
I was reading yesterdays convo to see if we talked about sports or something lololol
what an idiot
anyways, whats happening, booked my ticket to the UK today, going to go for 2 weeks see the lady now that the Queen doesn't love me
Christopher McCormack
@cmccormack
Nov 15 2018 16:06
sorry man maybe you can stumble into something new
Simon Cordova
@gbsimon87
Nov 15 2018 16:06
I keep my head up man, everything will work itself out, I know it
Tom
@moT01
Nov 15 2018 16:07
:morning:
Simon Cordova
@gbsimon87
Nov 15 2018 16:10
Hey there
Tom
@moT01
Nov 15 2018 16:10
hey
Jason Luboff
@JLuboff
Nov 15 2018 16:12
Morning
Tom
@moT01
Nov 15 2018 16:12
morning
Jason Luboff
@JLuboff
Nov 15 2018 16:13
morn
Tom
@moT01
Nov 15 2018 16:14
:hey:
Simon Cordova
@gbsimon87
Nov 15 2018 16:16
heya guys
Jason Luboff
@JLuboff
Nov 15 2018 16:16
hey
Simon Cordova
@gbsimon87
Nov 15 2018 16:17
How's that air quality?
Jason Luboff
@JLuboff
Nov 15 2018 16:17
Not bad...but now there's another fire about 5 miles from my apartment.. but its fairly small and no structures are in danger which is good
Christopher McCormack
@cmccormack
Nov 15 2018 16:19
@JLuboff @moT01 morning
Jason Luboff
@JLuboff
Nov 15 2018 16:19
Whats up
Christopher McCormack
@cmccormack
Nov 15 2018 16:20
Super successful change just completed :D
Jason Luboff
@JLuboff
Nov 15 2018 16:21
Network change?
Christopher McCormack
@cmccormack
Nov 15 2018 16:21
Now that I've templatized our global configurations for our WAN edge devices, I'm able to push configuration changes to over a hundred devices very quicky
yeah
Jason Luboff
@JLuboff
Nov 15 2018 16:21
Thats awesome
And nothing broke I assume?
Christopher McCormack
@cmccormack
Nov 15 2018 16:21
yeah
nope not that i know of
Simon Cordova
@gbsimon87
Nov 15 2018 16:22
"That I know of" - sounds like me
lolol
Christopher McCormack
@cmccormack
Nov 15 2018 16:22
The only unfortunate thing about all of this is we're still reliant on the vendor's shitty template system and difficult to use api. We submit feature requests all the time but they are slow to keep up
that's the hard part of networking, you're so reliant on vendor tech
Simon Cordova
@gbsimon87
Nov 15 2018 16:22
@JLuboff another fire? man thats crazy, for the lack of a better adjective
Christopher McCormack
@cmccormack
Nov 15 2018 16:22
That's why I love what Facebook has done
Jason Luboff
@JLuboff
Nov 15 2018 16:23
@gbsimon87 Yup.. I think they'll get this one under control fairly quickly though
Christopher McCormack
@cmccormack
Nov 15 2018 16:23
does anyone else think Camp Fire was a pretty bad name for a wildfire?
Jason Luboff
@JLuboff
Nov 15 2018 16:24
Yes..yes I do
And now over 8600 structures destroyed and over 50 people dead from that one..
Tom
@moT01
Nov 15 2018 16:27
no fires here
Christopher McCormack
@cmccormack
Nov 15 2018 16:27
what's the smallest structure included in that? Is a shed and a high-rise both 1?
@moT01 probably because you guys get rain :)
Tom
@moT01
Nov 15 2018 16:27
snow
Christopher McCormack
@cmccormack
Nov 15 2018 16:28
ew
Jason Luboff
@JLuboff
Nov 15 2018 16:28
@cmccormack Mmm... not positive but the majority of those are actual homes
Tom
@moT01
Nov 15 2018 16:28
-1 air temp when I woke up the other day
Jason Luboff
@JLuboff
Nov 15 2018 16:28
In React, if I have an object in my state, can I setState on just a particular key of that object or do I need to update the entire object?
Christopher McCormack
@cmccormack
Nov 15 2018 16:28
@moT01 yuck
@JLuboff the whole object
Jason Luboff
@JLuboff
Nov 15 2018 16:29
Ah..lame. Ok
Simon Cordova
@gbsimon87
Nov 15 2018 16:29
wait no
Christopher McCormack
@cmccormack
Nov 15 2018 16:29
it's why you'll always see something like setState({ ...this.state.data, somepropindata: newvalue })
Simon Cordova
@gbsimon87
Nov 15 2018 16:29
oh sorry misread
Christopher McCormack
@cmccormack
Nov 15 2018 16:30
or use Object.assign
I don't remember 100% what React is comparing to detect a change
Simon Cordova
@gbsimon87
Nov 15 2018 16:30
I find spreading it is much quicker
Christopher McCormack
@cmccormack
Nov 15 2018 16:30
however you do have options
Jason Luboff
@JLuboff
Nov 15 2018 16:31
Can Object.assign be used inside the setState? i.e
this.setState({ Object.assign({name: value}, this.state.myObject) })

In your above example.. I would have

this.setState({
      ...this.state.myObj,
      name: value
})

??

Christopher McCormack
@cmccormack
Nov 15 2018 16:32
need to assign it to a property
and you have it backward
you'll overwrite your new data I believe
Simon Cordova
@gbsimon87
Nov 15 2018 16:33
switch (action.type) {
    case clientActions.FETCH_CLIENTS:
      return Object.assign({}, clients, {
        loading: true,
        items: clients.items
      });
}
That's an object assign example from one of my reducers, where clients is the object key
Jason Luboff
@JLuboff
Nov 15 2018 16:33
@cmccormack Which ones backward?
Simon Cordova
@gbsimon87
Nov 15 2018 16:33
For setting state I seriously recommend using spread operator, it's quicker and to me more readable
alpox
@alpox
Nov 15 2018 16:33
@JLuboff
this.setState(Object.assign({}, this.state.myObj, { name: value }));
Christopher McCormack
@cmccormack
Nov 15 2018 16:34
@JLuboff ^
you overwrite keys from the right to left
Jason Luboff
@JLuboff
Nov 15 2018 16:35
Ok.. so we creating an empty object, placing our current object into that one, than changing the value of name
I was looking at the MDN example backwards lol
Simon Cordova
@gbsimon87
Nov 15 2018 16:35
Not for this and that but why not with the spread operator?
Christopher McCormack
@cmccormack
Nov 15 2018 16:36
you probably should :)
but it's good to know how assign works too
plus that's probably what babel transpiles spread to anyhow
Jason Luboff
@JLuboff
Nov 15 2018 16:37
What advantage/disadvantage of using spread vs assign?
Simon Cordova
@gbsimon87
Nov 15 2018 16:37
spread is es6 so need babel or so
alpox
@alpox
Nov 15 2018 16:38
@cmccormack Object.assign is ES6. Usually you use babel to transpile to an ES5 or lower target in which case it cannot transpile to Object.assign
Simon Cordova
@gbsimon87
Nov 15 2018 16:38
Like @cmccormack said I do believe it transpiles to Object assign, but when it comes to readability for me at least theres no argument that its quicker for me to skim through
alpox
@alpox
Nov 15 2018 16:38
@gbsimon87 Spread AND Object.assign are ES6.
Simon Cordova
@gbsimon87
Nov 15 2018 16:39
Oh really, cool thanks, so what does it transpile to then?
Aditya
@ezioda004
Nov 15 2018 16:39
Probably an ugly for loop
alpox
@alpox
Nov 15 2018 16:39
@gbsimon87 Native copy probably
Simon Cordova
@gbsimon87
Nov 15 2018 16:39
Hey those for loops were my buddies when I started programming
Christopher McCormack
@cmccormack
Nov 15 2018 16:40
oh that's dumb
Jason Luboff
@JLuboff
Nov 15 2018 16:40
@cmccormack But how do you really feel?
Simon Cordova
@gbsimon87
Nov 15 2018 16:40
Like a million dollars from the first record deal
Simon Cordova
@gbsimon87
Nov 15 2018 16:41
ha, it does use a for loop in there!
alpox
@alpox
Nov 15 2018 16:41
Of course, for loops are still one of the best when looking at performance
Aditya
@ezioda004
Nov 15 2018 16:41
@JLuboff Spread properties for object is ES2018, Object.assign is ES6 thats the only difference
Jason Luboff
@JLuboff
Nov 15 2018 16:42
Got it
alpox
@alpox
Nov 15 2018 16:43
@ezioda004 Right, I thought there was something like that, spread not even ES6 but later
Aditya
@ezioda004
Nov 15 2018 16:45
That was the only good thing from JS that came out this year
Maybe lookbehind assertions too
Simon Cordova
@gbsimon87
Nov 15 2018 16:45
Lookbehind assertions are great but don't work in Firefox if I remember correctly
Had a problem with a regex @cmccormack helped out with like two months ago
alpox
@alpox
Nov 15 2018 16:46
Im still waiting desperately for grid layout to get the last bit of missing support
Jason Luboff
@JLuboff
Nov 15 2018 16:47
I'm pretty stoked for my new project...told the requestor I'm not going to support IE and he was cool with it
Aditya
@ezioda004
Nov 15 2018 16:47
I'm waiting for smooth scroll to be supported across all the major browsers!
Christopher McCormack
@cmccormack
Nov 15 2018 16:48
CSS smooth scroll?
yeah that would be nice
Aditya
@ezioda004
Nov 15 2018 16:48
Yeah, stupid edge and safari doesnt support it
Christopher McCormack
@cmccormack
Nov 15 2018 16:48
psh what is that .01% of market?
Aditya
@ezioda004
Nov 15 2018 16:50
I wonder if IE's have more market than those combined
Tom
@moT01
Nov 15 2018 16:51
hey @ezioda004 - do you know how to get that little graph to display on your github page like you have?
Aditya
@ezioda004
Nov 15 2018 16:51
@moT01 Which graph?
Simon Cordova
@gbsimon87
Nov 15 2018 16:51
The company I work for wants nothing to do with legacy browsers it's amazing
Tom
@moT01
Nov 15 2018 16:51
the activity overview
Simon Cordova
@gbsimon87
Nov 15 2018 16:52
Never need to deal with IE11 or lower
Christopher McCormack
@cmccormack
Nov 15 2018 16:52
@moT01 should be able to just click your profile
Tom
@moT01
Nov 15 2018 16:52
its under your heat map/calendar
Aditya
@ezioda004
Nov 15 2018 16:52
@moT01 Oh yeah, you can opt in for that, its called activity overview
Yeah should be in profile
Christopher McCormack
@cmccormack
Nov 15 2018 16:53
oh the quadrant graph?
Aditya
@ezioda004
Nov 15 2018 16:53
Yeah, the one that shows your activity to x organization
Tom
@moT01
Nov 15 2018 16:56
hmm, not finding it
Jason Luboff
@JLuboff
Nov 15 2018 16:56

What would be the proper way to set my option value to an object? Using handlebars on another project I have this

  <option value='{"LocID": "{{LocationID}}", "Name": "{{LocationName}}", 
"Email": "{{Email}}"}'>
 {{LocationName}} 
</option>

I'm trying to do something similar with React.. but it just assigns [object Object] to the value and doesn't seem to actually be accessable

{props.locations.map((location, index)=> 
<option value={{"LocID": location.LocationID, "Name": location.LocationName}} 
key={'Location' + index}> 
{location.LocationName}
</option>)}

In my onchange function on the select element, I'm just trying to log event.target.value (get [object Object] or if I stringify, than "[object Object]" or if I try and parse a cyclic error) or even try accessing the keys and get undefined for the keys

Tom
@moT01
Nov 15 2018 16:57
ahh, there it is
hey one more question, it shows I have 0% for code review - I've been reviewing the PR's, am I not doing something to get that counted as code review?
Simon Cordova
@gbsimon87
Nov 15 2018 17:00
I think you've got to accept the PR for it to count
@JLuboff whats the objective? Also can't you extract the object out of the option tag and the pass it in?
Aditya
@ezioda004
Nov 15 2018 17:00
@moT01 You'd want to use the "review feature" for the PRs
Simon Cordova
@gbsimon87
Nov 15 2018 17:00
May be easier to manipulate the data
Aditya
@ezioda004
Nov 15 2018 17:01
Screenshot (165).png
@moT01 The green button
Tom
@moT01
Nov 15 2018 17:02
okay, thanks - I'll check that out on my next one
Aditya
@ezioda004
Nov 15 2018 17:02
No problem! Get those green boxes rolling :D
Jason Luboff
@JLuboff
Nov 15 2018 17:03
@gbsimon87 I want to store the database ID of the location for the backend as well as having the name value to be able to display on the front end (further along in the chain of events)
Aditya
@ezioda004
Nov 15 2018 17:04
@JLuboff I dont think you can assign any value other than a string to value
So it implicitly coerces object by using the abstract method .toString() on it
Jason Luboff
@JLuboff
Nov 15 2018 17:05
Mmm..that makes sense.. as it is a string in the first example (I have to parse it to access the object values)
Tom
@moT01
Nov 15 2018 17:06
that's a neat little graph, and I couldn't figure out how to get it to show up
Jason Luboff
@JLuboff
Nov 15 2018 17:07

Changed to

<option value={"LocID :" + location.LocationID +", Name :" + location.LocationName} ...

Which at least gets me the string value on the front end properly

Still can't parse it though.. hmm
Simon Cordova
@gbsimon87
Nov 15 2018 17:09
@JLuboff instead of that object in the option, can you not set an object in the state?
Then have value={this.state.myObjectName}
Aditya
@ezioda004
Nov 15 2018 17:09
@JLuboff Use JSON.stringify()? and then you can do JSON.parse() to parse it back
Simon Cordova
@gbsimon87
Nov 15 2018 17:10
and then for the select onchange/onselect bind a fn that will do what you need to that state property?
It's hard to see the full context without it in front of me
Jason Luboff
@JLuboff
Nov 15 2018 17:10
@gbsimon87 Mmm.. thats true. May try that
@ezioda004 Nope.. doesn't like parse whether I stringify first or not lol
Hmm.. Its becuase its not an object in the value. Duh
Aditya
@ezioda004
Nov 15 2018 17:12
{{"LocID": location.LocationID, "Name": location.LocationName}}this is an object tho
Simon Cordova
@gbsimon87
Nov 15 2018 17:12
const { name, value, type, checked } = e.target;
this.setState({
      myPropertyName: {
        ...this.state.myPropertyName,
        [name]: value
      }
    });
you may be able to use something like that...
Jason Luboff
@JLuboff
Nov 15 2018 17:13
@ezioda004 Correct..but I changed it to which is no longer an object
<option value={"LocID :" + location.LocationID +", Name :" + location.LocationName} ...
Simon Cordova
@gbsimon87
Nov 15 2018 17:13
inside the fn you call from onChange that is
Jason Luboff
@JLuboff
Nov 15 2018 17:13
@gbsimon87 Ya may go that route
Simon Cordova
@gbsimon87
Nov 15 2018 17:16
Remember when you declare the function, you'll need to pass in the event object in order to extract the object's event properties
Jason Luboff
@JLuboff
Nov 15 2018 17:16
Ya, I just add event to all my functions now
Simon Cordova
@gbsimon87
Nov 15 2018 17:16
lol fair enough
Jason Luboff
@JLuboff
Nov 15 2018 17:17
Man.. even just assigning it the object inside the map aint working. I'll just use some custom attributes.. stop wasting time lol
Simon Cordova
@gbsimon87
Nov 15 2018 17:18
Don't reinvent wheel broooooo, you got this
go step by step and fill that up with console logs
Jason Luboff
@JLuboff
Nov 15 2018 17:18
I am but nothing is working lol
Simon Cordova
@gbsimon87
Nov 15 2018 17:19
Go to the select tag section
Jason Luboff
@JLuboff
Nov 15 2018 17:21
Ya.. I'm following that.. not sure about the multiple attribute though.. that might be something I need
Simon Cordova
@gbsimon87
Nov 15 2018 17:26
I've never used it to be honest with you
Christopher McCormack
@cmccormack
Nov 15 2018 17:29
multiple is to ctrl + click different items
maybe command click on mac not sure
so if it was a group of foods you like you can select more than one
Simon Cordova
@gbsimon87
Nov 15 2018 17:29
that part yeah, but the array inside that React uses I've yet to use
oh never mind, its just a regular boolean that it takes in
it's the value that can take an array
Jason Luboff
@JLuboff
Nov 15 2018 17:30
Its wierd.. it sets the value of the option to the object. The object I can see in my console.log (when its mapping over each value to create the option elements). On the front end, it shows as value="[object Object]". console.log(typeof event.target.value) is string. Try and parse it, and I get JSON.parse: unexpected character at line 1 column 2 of the JSON data but if I JSON.stringify it first..it just turns it into "[object Object]" and than I can parse that back to [object Object] lol
Christopher McCormack
@cmccormack
Nov 15 2018 17:31
can you paste the react snippet?
Aditya
@ezioda004
Nov 15 2018 17:32
value="[object Object]" thats gotta be an object assigned to value
Jason Luboff
@JLuboff
Nov 15 2018 17:32
@ezioda004 It is
Christopher McCormack
@cmccormack
Nov 15 2018 17:32
value for the select is probably how React pre-selects the options
Jason Luboff
@JLuboff
Nov 15 2018 17:32

@cmccormack Currently..

{props.locations.map((location, index) => {
            console.log(location);
            return (<option value={location} key={'Location' + index}> {location.LocationName}</option>)})}

I have also tried value={{location}}

Ignore the fact that I have an explicit return
Christopher McCormack
@cmccormack
Nov 15 2018 17:33
value should only be an object (Array) if you are using multiple I think
Jason Luboff
@JLuboff
Nov 15 2018 17:33
In my other project, I have no issue assigning an object to a non-multiple select :shrug:
Simon Cordova
@gbsimon87
Nov 15 2018 17:34
I don't now if you need to be parsing anything with this
Christopher McCormack
@cmccormack
Nov 15 2018 17:34
is value an array in both?
Jason Luboff
@JLuboff
Nov 15 2018 17:34
location is an object
Simon Cordova
@gbsimon87
Nov 15 2018 17:34
My first intuition is the way it's set up and/or the data types used
Christopher McCormack
@cmccormack
Nov 15 2018 17:34
is the other project react?
Jason Luboff
@JLuboff
Nov 15 2018 17:34
No, uses handlebars
Christopher McCormack
@cmccormack
Nov 15 2018 17:34
remember this is not html this is React.createElement or whatever, it does things its own way
Simon Cordova
@gbsimon87
Nov 15 2018 17:35
wait location is an object, can you .map through objects>
?
Christopher McCormack
@cmccormack
Nov 15 2018 17:35
React can completely change an attribute if it wants
locations
Jason Luboff
@JLuboff
Nov 15 2018 17:35
@gbsimon87 locations is an array of objects, thus location inside the map is an object
Simon Cordova
@gbsimon87
Nov 15 2018 17:35
Wouldn't you need Object.keys or Object.entries if it's an object?
oh ok, an array of objects ok
Jason Luboff
@JLuboff
Nov 15 2018 17:36
I'll just set the id to the locationid and value to the location name
Don't know why I'm overcomplicating things lol
Simon Cordova
@gbsimon87
Nov 15 2018 17:37
That sounds like a solid idea
Keep it simple, you can always refactor later once it's working
Although that's not always the best advice really
Christopher McCormack
@cmccormack
Nov 15 2018 17:38
@JLuboff select value should be the option value that's selected
Jason Luboff
@JLuboff
Nov 15 2018 17:38
@cmccormack Correct
Christopher McCormack
@cmccormack
Nov 15 2018 17:38
so why would it be an object?
I guess I don't understand how it would have worked in your handlebars template
Jason Luboff
@JLuboff
Nov 15 2018 17:40
Becuase I needed multiple values to be returned. Specifically for the handlebars template Location ID (relating to the database), Location Name, and Email (for the locations supervisor)
In this case... I only need name and id..so no real reason to keep it an object..
Jorge
@OrangeKulture
Nov 15 2018 17:41
hey whats up guys
Christopher McCormack
@cmccormack
Nov 15 2018 17:41
were you overriding the behavior then?
@OrangeKulture hi!
Simon Cordova
@gbsimon87
Nov 15 2018 17:41
Hi @OrangeKulture
Jorge
@OrangeKulture
Nov 15 2018 17:41
you guys have the link to the code youre talking about? love me some react! :D
Jason Luboff
@JLuboff
Nov 15 2018 17:41
@cmccormack In the prior example? No. You can assign an object to the value
Christopher McCormack
@cmccormack
Nov 15 2018 17:42
@JLuboff yes but HTML will assign that value based on the options selected normally
Jason Luboff
@JLuboff
Nov 15 2018 17:42
@cmccormack I believe value is only used if you do not provide something between <option> </option>
Jorge
@OrangeKulture
Nov 15 2018 17:43
sorry, kinda got in the middle of your convo
Jason Luboff
@JLuboff
Nov 15 2018 17:43
Its all good
Christopher McCormack
@cmccormack
Nov 15 2018 17:44
I don't think so
value is how you get the selected option in a form
Jason Luboff
@JLuboff
Nov 15 2018 17:45
You can assign anything to value, it does not need to match whats between <option> </option>
Christopher McCormack
@cmccormack
Nov 15 2018 17:46
sure but that overrides the behavior
that's what I'm saying
Adel
@AdelMahjoub
Nov 15 2018 17:46
legacy certifications !!
Christopher McCormack
@cmccormack
Nov 15 2018 17:46
value would normally be empty until you select an option, then that select value would update to the option value
Jason Luboff
@JLuboff
Nov 15 2018 17:46
@cmccormack Isn't that what we sometimes do, override behavior? :)
Christopher McCormack
@cmccormack
Nov 15 2018 17:46
Sure
Jason Luboff
@JLuboff
Nov 15 2018 17:47
@AdelMahjoub Hey man
Christopher McCormack
@cmccormack
Nov 15 2018 17:47
but this is a very good example of why we should probably avoid that haha
Adel
@AdelMahjoub
Nov 15 2018 17:47
I see a lot of new content in the curriculum, good thing I may need a refresher !
Hey @JLuboff
Christopher McCormack
@cmccormack
Nov 15 2018 17:47
@AdelMahjoub hi! Yeah some really good new content
Adel
@AdelMahjoub
Nov 15 2018 17:48
I've been away from js world for a couple of monthes
Jason Luboff
@JLuboff
Nov 15 2018 17:49
@cmccormack If you need multiple values from the select..how else would you do it?? I know their are other ways but this is a quick and easy solution (and less costly) than say having the value be the id or name and than having to look into your array of objects for that value to get the other value you need or visaversa
@AdelMahjoub Ya haven't seen you around
Adel
@AdelMahjoub
Nov 15 2018 17:51
@JLuboff I realised the hard way that serious game development requires enormous amount of work, and almost impossible alone
@JLuboff So I'm calmed a bit :smile:
Jason Luboff
@JLuboff
Nov 15 2018 17:51
fair enough. Any luck finding a job?
Adel
@AdelMahjoub
Nov 15 2018 17:51
yeah found one And quit after 2months
I was the only developer / secratary / sales man / webmaster ...
too much work for one person
and not so good salary
Jason Luboff
@JLuboff
Nov 15 2018 17:52
Thats a bummer
Adel
@AdelMahjoub
Nov 15 2018 17:54
the entry was to build some sort of a product management system for cars
with auto-registring sales and owners in the governement database
then it was to add spare parts
Christopher McCormack
@cmccormack
Nov 15 2018 17:55
@JLuboff selectedOptions?
Adel
@AdelMahjoub
Nov 15 2018 17:55
Now I hate car dealers
Jason Luboff
@JLuboff
Nov 15 2018 17:56
@cmccormack Only one option should be selected
@AdelMahjoub Sounds kind of shitty hah
Simon Cordova
@gbsimon87
Nov 15 2018 17:57
lol "Now I hate car dealers"
Adel
@AdelMahjoub
Nov 15 2018 17:58
@JLuboff yeah, and most of related services are like from 20years ago, no api or whatsoever, you need to scrap , scrap and scrap
Announces, registring warranties etc, shitty
Christopher McCormack
@cmccormack
Nov 15 2018 18:00
@JLuboff you may not want to provide a value in react to your select then; parse the value from the select where needed, but setting it is like setting the value of an input, you want it to be there when the element loads
Jason Luboff
@JLuboff
Nov 15 2018 18:04
Ya... well.. what I have now is working so I'm going to stick with it lol
Simon Cordova
@gbsimon87
Nov 15 2018 18:04
@JLuboff thought you were staying off React, I guess they're using it at work now?
Jason Luboff
@JLuboff
Nov 15 2018 18:04
@gbsimon87 Nah been building my new app with React
Forcing myself to learn as I go
Simon Cordova
@gbsimon87
Nov 15 2018 18:06
Good man, that's the way to do it
Jason Luboff
@JLuboff
Nov 15 2018 18:07
@gbsimon87 Why do you think I've been having all these React questions lately? :joy:
Simon Cordova
@gbsimon87
Nov 15 2018 18:12
I figured, but that's good man, hop on board
One more person to help me when I'm stumped
:)
Jason Luboff
@JLuboff
Nov 15 2018 18:12
I think I'm a long ways from that hah
I need to get better about using more generic names for things. I'm finding myself at times needing to use a ternary to determine what function to use for example as opposed to just passing in the function with a generic name
Simon Cordova
@gbsimon87
Nov 15 2018 18:15
The way I think of it is if someone else is going to read it that never has before
Is it clear up on a quick skim?
That sort of thing
Jason Luboff
@JLuboff
Nov 15 2018 18:15
Ya
Going to need some refactoring
Simon Cordova
@gbsimon87
Nov 15 2018 18:20
My whole day today is literally creating one post request and refactoring the entire structure app, sounds simple but it's time consuming
Jorge
@OrangeKulture
Nov 15 2018 18:21
u guys use redux ? or just react for the moment?
Simon Cordova
@gbsimon87
Nov 15 2018 18:23
I use both personally
Jason Luboff
@JLuboff
Nov 15 2018 18:23
Only React for me
Jorge
@OrangeKulture
Nov 15 2018 18:23
how long have u been using/learning react?
Brad
@bradtaniguchi
Nov 15 2018 18:24
Time to deal with merging 2 expansive branches with 40 merge conflicts.... today is going to be fun
Jason Luboff
@JLuboff
Nov 15 2018 18:25
@bradtaniguchi Ouch...
@OrangeKulture Myself.. only a few months if that
Brad
@bradtaniguchi
Nov 15 2018 18:25
I've used it for maybe..... 3 hours? :trollface:
Jorge
@OrangeKulture
Nov 15 2018 18:26
@JLuboff ahh cool .. did u find that learning it was hard .. or ?
i used to do a lot in angular 4, or what used to be know as 4
but man, react is a lot more fun
Jason Luboff
@JLuboff
Nov 15 2018 18:27
@OrangeKulture Its taken me a bit to "think" in React. And I'm still struggling to understand a lot of the more intermediate/advanced topics. But I'm making slow progress heh
Simon Cordova
@gbsimon87
Nov 15 2018 18:27
@bradtaniguchi that sounds like quitting time
I've been at it now since March, definitely more comfortable with it than the first days I have to say, took me a while to get it though
Jorge
@OrangeKulture
Nov 15 2018 18:29
i think its kinda hard to connect how you would use the selectors and pass that into the views
actions and reducers and not that hard to grasp imo, after a while tho ..
do you guys do a lot of testing alongside coding .. or not yet?
im still learning too , have been learning for maybe 3-4 months
Simon Cordova
@gbsimon87
Nov 15 2018 18:31
I usually test as I go, every new component I do a test file for it
Sometimes I leave it to the side though especially if I need to emulate clicks and all that
Jason Luboff
@JLuboff
Nov 15 2018 18:31
No testing here...but...I should
Simon Cordova
@gbsimon87
Nov 15 2018 18:31
@JLuboff if no testing definitely do the proptypes I'd recommend, will help you debug
Christopher McCormack
@cmccormack
Nov 15 2018 18:31
you should share that @gbsimon87
I've only done backend testing
Aditya
@ezioda004
Nov 15 2018 18:32
Does testing for fcc tests count? I test tests
Simon Cordova
@gbsimon87
Nov 15 2018 18:32
import * as actions from './Messages';
import * as types from '../types/Messages';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);


describe('Messages actions', () => {

  it('should create an action to add a message', () => {

    const text = 'Welcome';    
    let welcomeMessage = [{message_type: 'normal', message: text}];
    let initMessageState = {messages: []};
    const store = mockStore(initMessageState);

    store.dispatch(actions.addMessage(welcomeMessage));

    const expectedActions = [{ 
      type: 'ADD_MESSAGE', 
      payload: { message: welcomeMessage } 
    }];
    expect(store.getActions()).toEqual(expectedActions);
  });


  it('should create an action to reset all messages', () => {
    let initMessageState = {messages: []};
    const store = mockStore(initMessageState);

    store.dispatch(actions.resetMessages());

    const expectedActions = [{ 
      type: 'RESET_MESSAGE'
    }];
    expect(store.getActions()).toEqual(expectedActions);
  });


});
There's the file for my Messages Reducer for example
holy sorry sorry didn't realise it was so large
Brad
@bradtaniguchi
Nov 15 2018 18:33
@OrangeKulture Did you ever use ngrx (or one of the other state managers?) for angular?
Simon Cordova
@gbsimon87
Nov 15 2018 18:33
@cmccormack have you used async await in your reducers?
Christopher McCormack
@cmccormack
Nov 15 2018 18:33
I don't use redux yet
Simon Cordova
@gbsimon87
Nov 15 2018 18:33
true ok
Jorge
@OrangeKulture
Nov 15 2018 18:33
i did look into ngrx .. i didnt get all the way through to intermediate - advanced level tho. I did some cool courses on angular, but it has been so long, i cant remember
Simon Cordova
@gbsimon87
Nov 15 2018 18:34
When you do make sure you use 'thunk'
Jorge
@OrangeKulture
Nov 15 2018 18:34
i think i didnt even think about state management
Brad
@bradtaniguchi
Nov 15 2018 18:35
image.png
Lord help me
Simon Cordova
@gbsimon87
Nov 15 2018 18:35
lololololololol
I try everything within my power to avoid any merge conflicts sometimes
Jorge
@OrangeKulture
Nov 15 2018 18:36
you dont use enzyme and jest?
Simon Cordova
@gbsimon87
Nov 15 2018 18:37
yeah both
Jorge
@OrangeKulture
Nov 15 2018 18:37
oh you do duh
Brad
@bradtaniguchi
Nov 15 2018 18:37
This is what happens when you finally get around to merging an expansive feature branch.... when you already merged a different feature branch :(
Jorge
@OrangeKulture
Nov 15 2018 18:37
yeah sorry i missed the screenshot
Brad
@bradtaniguchi
Nov 15 2018 18:38
@OrangeKulture Yea I still see the benefit of using all the ngrx stuff, but It seems like a lot of extra code and thus maintenance. Like A LOT.
Jorge
@OrangeKulture
Nov 15 2018 18:38
yeah for sure .. i definitely need to brush up on my angular skills .. been so long
i did get a course on angular 7, maybe ill do that sometime in the next 40 years, whenever i finish the other 587 courses i got :(
Simon Cordova
@gbsimon87
Nov 15 2018 18:40
I guess @JLuboff isn't the only night walker out here
white walker**
Brad
@bradtaniguchi
Nov 15 2018 18:43
@OrangeKulture I mean angular 4 -> is basically exactly the same. Only changes are rxjs import paths, some service providedIn feature, and the cli updates. The core stuff is exactly the same, hell you can do pretty much everything the same as before design, implementation wise
Jorge
@OrangeKulture
Nov 15 2018 18:45
is it? oh nice .. i thought there were a lot more changes
in all honesty, i kinda just took the course, made a couple of projects from the ground up and that was it .. i did feel i had a good grasp on fundamentals
but then i got hired as a web dev, so i do a lot of basic stuff, u know graphic design and write a lot of markup but that's about it
i picked up react a like 3 or 4 months ago and really love it .. i find it a lot less complicated than angular
all that dependency injection .. felt like a diabetic with insulin shots :D
Simon Cordova
@gbsimon87
Nov 15 2018 18:48
Seeing that redux thunk handles the different action stages (pending, fulfilled, etc...) - is it sufficient to simply write cases for the 'fulfilled' stages inside a reducer?
case clientActions.FETCH_CLIENTS_FULFILLED:
      return async (dispatch) => {
        try {
          // dispatch fulfilled action
        } catch(error) {
          // dispatch error action
        }
      }
Jorge
@OrangeKulture
Nov 15 2018 18:51
im so bad at testing ... thats the one thing i know for sure i truly suck
one of the things .. i guess
Brad
@bradtaniguchi
Nov 15 2018 19:01
@OrangeKulture DI is great for testing, which is the main key selling point since all of that sorta stuff is built into angular
but then at the same time it seems like ngrx sucks away a lot of the DI aspects and splits up the tests, but then I have little experience with that sorta stuff so its hard to say
and after manually setting up a whole buncha stuff on an express app, I wish I had DI for testing and optimization. I even contemplating making my own "injector" hehe
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 15 2018 20:03
Do you guys usually use headings? I can use h1 h2 but as they say h3 4 5 6 are not for important things on website
idfso where do we use them ?
or do you even use them at all
Christopher McCormack
@cmccormack
Nov 15 2018 20:08
They're just different header sizes, use them as you want
Victor Popescu
@VicPopescu
Nov 15 2018 20:10
@Lia-Sue-Kim well, you should use them if your website has a lot of articles only
otherwise, h1 and h2 are used the most
Jorge
@OrangeKulture
Nov 15 2018 20:14
@bradtaniguchi yeah .. i do remember one was supposed to mock the dependencies or something, i didnt really got around to actually testing the angular apps
also h tags have some padding and margins auto applied .. at least with bootstrap
Jorge
@OrangeKulture
Nov 15 2018 20:59
<insert cricket sounds ... >
Jason Luboff
@JLuboff
Nov 15 2018 21:01
await db.query(`Insert into dbo.FCCHelpJS (noise) Values (N'Cricket')`)
Jorge
@OrangeKulture
Nov 15 2018 21:05
what was life like without async await
Jason Luboff
@JLuboff
Nov 15 2018 21:05
Promise
And before that...callback hell
Jorge
@OrangeKulture
Nov 15 2018 21:05
probs hell
haha yeah
Jason Luboff
@JLuboff
Nov 15 2018 21:06
I went and cleaned up some code that was using promises to use async/await instead...much cleaner and not all the ugly nesting
Simon Cordova
@gbsimon87
Nov 15 2018 21:08
Funny because promises were once a solution to the callback hell nesting
Jason Luboff
@JLuboff
Nov 15 2018 21:08
Yup
Brad
@bradtaniguchi
Nov 15 2018 21:08
they help, if used correctly
Jason Luboff
@JLuboff
Nov 15 2018 21:09
True
Brad
@bradtaniguchi
Nov 15 2018 21:10
the next step after async/await is observables :D
Jason Luboff
@JLuboff
Nov 15 2018 21:11
Who what now?
Brad
@bradtaniguchi
Nov 15 2018 21:13
https://rxjs-dev.firebaseapp.com/guide/overview, think promises, but on steroids
Jorge
@OrangeKulture
Nov 15 2018 21:14
you kinda use a lot of observables with angular .. dont you?
i do remember that
a lot of subscriptions
Brad
@bradtaniguchi
Nov 15 2018 21:18
Yes, rxjs/observables are an integral part of Angular. But "rx" and all those reactive functions aren't only in angular. I know they have some popularity in java too
Jason Luboff
@JLuboff
Nov 15 2018 21:19
Looks complicated
Keggatron
@Keggatron
Nov 15 2018 21:22
Hey guys, anyone know if it's possible to show a separate month date if and only if the month changed in the time interval. ie Nov 11 - 17, but if a month changes during any week interval to then show the month? ie Nov 25 - Dec 1
Sorry using momentJS
Brad
@bradtaniguchi
Nov 15 2018 21:22
It is tho :/ like imagine if promises didn't just have .then and .catch they had like 50 methods, for different use-cases
Jason Luboff
@JLuboff
Nov 15 2018 21:22
@Keggatron I feel like there was an FCC challenge or project that required something like that.. or maybe I'm thinking of codewars...but ya...it is possible
@bradtaniguchi So whats going to push developers to use it?
Keggatron
@Keggatron
Nov 15 2018 21:23
Sorry, yes I know it's possible, does anyone know if moment has a formatting for that though?
alpox
@alpox
Nov 15 2018 21:23
@bradtaniguchi They have a slightly different use-case than promises though
Jason Luboff
@JLuboff
Nov 15 2018 21:24
@Keggatron Probably just need to add a bit of logic in there
Brad
@bradtaniguchi
Nov 15 2018 21:24
@alpox Yes, but the "promise" use-case is still included @JLuboff they are more powerful than promises, and can cover the same use-cases.
alpox
@alpox
Nov 15 2018 21:25
@bradtaniguchi They can but I don't think they should. I find it not very accurate to use rxjs for covering the use-cases of promises
Brad
@bradtaniguchi
Nov 15 2018 21:25
and then some, like building a "auto-retry" for a promise-based request is complicated, rxjs provides an operator for that use-case.
@alpox Why shouldn't they if you already have them? If you ONLY have promise-based use-cases promises are fine, rxjs is overkill. (like backend operations)
alpox
@alpox
Nov 15 2018 21:26
But I try to avoid rxjs anyways as I find it too heavy in most cases
Having it doesn't mean its good to replace promises with it. When you have a hammer, everything looks like a nail
Brad
@bradtaniguchi
Nov 15 2018 21:30
That's true, but if you already have rxjs I don't think you should mix and match
(like in an angular environment, don't use promises)
Jason Luboff
@JLuboff
Nov 15 2018 21:33
Do you guys ever look at some code that you need to manipulate and go "Ya...this should be easy to handle" than go "Fuck..what the fuck"
alpox
@alpox
Nov 15 2018 21:33
As long as you stay in the environment zhat might be okay. Although i would opt for not using angular in the first place :D
Brad
@bradtaniguchi
Nov 15 2018 21:34
@alpox That's another story to talk about for another day hehe.
@JLuboff I start cusing due to what?
Jason Luboff
@JLuboff
Nov 15 2018 21:35
eh?
Brad
@bradtaniguchi
Nov 15 2018 21:35
Lets just say I cuss for a lot of different reasons when looking at code, which one are you talking about haha
Jason Luboff
@JLuboff
Nov 15 2018 21:36
oh haha
I have an array of numbers, and then an array of objects... I need to run through the array of objects and find the ones that correspond to my numbers to chagne a value
Brad
@bradtaniguchi
Nov 15 2018 21:39
yea sounds kinda convoluted haha
Jason Luboff
@JLuboff
Nov 15 2018 21:40
Its theoritically easy..but.. than I'm like..what the fuck
Brad
@bradtaniguchi
Nov 15 2018 21:42
Like you don't know how todo it WTF? or why is it like this WTF, or something else?
Jason Luboff
@JLuboff
Nov 15 2018 21:43
Like..I'm somewhat blanking on how to do it lol
Well..maybe more so blanking on how to do it without involving a bunch of looping mechanism..
Jorge
@OrangeKulture
Nov 15 2018 21:51
@Keggatron did u find out if that could be done, im curious
Brad
@bradtaniguchi
Nov 15 2018 21:51
I see two ways of doing it, 1. create a map from the array of objects by their "number" (assuming the number is unique) and then iterate over the array of numbers and change the value's via reference
.2. do 2 loops
Idk why it turned my 2 into a one haha
Jorge
@OrangeKulture
Nov 15 2018 21:52
@Keggatron i guess the whole point is to reference a single moment, it probable needs some conditionals and you're good to go
use lodash, maybe?
@JLuboff
Brad
@bradtaniguchi
Nov 15 2018 21:52

use lodash, maybe?

This is never the answer

Jason Luboff
@JLuboff
Nov 15 2018 21:52
:joy:
Jorge
@OrangeKulture
Nov 15 2018 21:53
why not?
Jason Luboff
@JLuboff
Nov 15 2018 21:53
I'm breaking it out into multiple pieces to get it working than will refactor
Jorge
@OrangeKulture
Nov 15 2018 21:53
i havent read anything do .. just saw the "need to run a comparison in an objects array
full disclose
lodash is a great library in my opinion .. i use it a lot
Brad
@bradtaniguchi
Nov 15 2018 21:56
I don't believe in lodash, nothing against lodash, just against using a lib for "utility". There are only a few cases where Id rather use a lib, like deep clones.
Or time-stuff
might be other cases out there, but never felt like I needed/wanted lodash haha
Victor Popescu
@VicPopescu
Nov 15 2018 21:58
@bradtaniguchi or you can just JSON.parse(JSON.stringify(potato)) for a deep clone
Keggatron
@Keggatron
Nov 15 2018 21:58
@OrangeKulture thanks for the response however I'm drawing a blank here are my start and endTimes:
const startTime = currentWeekStartTime.startOf('week').format('MMM D');
    const endTime = currentWeekStartTime.endOf('week').format('D');
Brad
@bradtaniguchi
Nov 15 2018 21:58
@VicPopescu that's one way, but I heard its super slow compared to the faster deep clone functions out there
Jorge
@OrangeKulture
Nov 15 2018 21:59
ahh ok cool .. yeah i guess it all comes down to coding styles and preferences. I used to look the other way when it came down to using utils .. but ive done it a couple times and its soo much easier, like insane
Keggatron
@Keggatron
Nov 15 2018 21:59
now say if I console.log(currentWeekStartTime.startOf('week') I get the same return as when I console.log(currentWeekStartTime.endOf('week')
Victor Popescu
@VicPopescu
Nov 15 2018 21:59
@bradtaniguchi it's the best if you don't want to spread ...object on each child for all levels
Keggatron
@Keggatron
Nov 15 2018 21:59
I'm not sure how I can distinguish between months
Victor Popescu
@VicPopescu
Nov 15 2018 22:00
@bradtaniguchi and yes, the most popular Object.assign()
Jorge
@OrangeKulture
Nov 15 2018 22:00
@Keggatron let me check the docs, keep forgetting the formating
Keggatron
@Keggatron
Nov 15 2018 22:01
@OrangeKulture Thanks for the help!
Brad
@bradtaniguchi
Nov 15 2018 22:02
@VicPopescu I never thought or wanted to try my own deep clone, too many potential issues.
Victor Popescu
@VicPopescu
Nov 15 2018 22:03
@bradtaniguchi yes, handling pointers is a pain in the ass... but I prefer to make my own deep clone instead of using some library only for that
Brad
@bradtaniguchi
Nov 15 2018 22:04
I had a coworker who wanted to use lodash for basic utils, then when I told him we shouldn't use it I found he couldn't figure-out how to use the built in es6 methods, and ended up with really bad solutions to common problems. Since they I kinda threw the idea of "libs helping" outa the window
Victor Popescu
@VicPopescu
Nov 15 2018 22:04
that is the issue with jquery too, people learn jquery, not javascript
Brad
@bradtaniguchi
Nov 15 2018 22:05
@VicPopescu Most of my use-cases are really simple, and probably could be done with a basic deep clone I write myself, but yea I was just looking for a better option over the stringify one (since I know it isn't fast)
Jason Luboff
@JLuboff
Nov 15 2018 22:05
@VicPopescu I'm definitely guilty of that one
Victor Popescu
@VicPopescu
Nov 15 2018 22:05
@bradtaniguchi it isn't that slow either to matter
Jason Luboff
@JLuboff
Nov 15 2018 22:05
But.. now that I'm using React...don't really needeither so..
Brad
@bradtaniguchi
Nov 15 2018 22:07
Realistically if objects aren't massive the different doesn't matter what-so ever, I was pushing more of a best practice thing than anything.
Victor Popescu
@VicPopescu
Nov 15 2018 22:07
@JLuboff well, react is a library too, but on a different level. But when I see people using angular + jquery it's like pairing oil with water
Jorge
@OrangeKulture
Nov 15 2018 22:07
@Keggatron what is the output you are looking to get?
Brad
@bradtaniguchi
Nov 15 2018 22:08
@VicPopescu more like oil with fire :P
Jason Luboff
@JLuboff
Nov 15 2018 22:08
Hmmm.. for loop within a for loop...it works...but..should I make it cleaner...
Jorge
@OrangeKulture
Nov 15 2018 22:09
@Keggatron maybe const startOfWeek = moment().startOf('isoWeek').format('dddd MMMM Do');
Victor Popescu
@VicPopescu
Nov 15 2018 22:09
@bradtaniguchi I know, I was thinking on this matter for some time too. Deep cloning is a very low documented subject
well I've seen angular 1 + angular 4 + jquery in the same project. I've seen them all...
Jorge
@OrangeKulture
Nov 15 2018 22:10
@bradtaniguchi i defintiely agree that you should know how to do it with es6 methods, first and foremost
@JLuboff there's a man here ... yusuf. He fabricates his own version of the loops :D
Brad
@bradtaniguchi
Nov 15 2018 22:13

On the topic of lodash, bad practices, and not knowing ES6, here's some bad code:

const obj = {};
_.each(_.keys(request.body), (bodyKey) => {
  obj[bodyKey] = request.body[bodyKey];
});

Pretty clearly could be done with forEach, or reduce and Object.keys.... Or just Object.assign -_-

Karma Drukpa
@coderkarma
Nov 15 2018 22:14
why is that bad @bradtaniguchi
Brad
@bradtaniguchi
Nov 15 2018 22:15

I also should add 90% of all lodash calls in the project are this.
@coderkarma using a lib for what could be done with this line:

const obj = Object.assign({}, request.body)

it's just a shallow clone. (could also be done with the spread syntax, but lets be serious they didn't know about that)

Jorge
@OrangeKulture
Nov 15 2018 22:18
thank god for the spread imarite
Karma Drukpa
@coderkarma
Nov 15 2018 22:20
@bradtaniguchi that looks clean
Brad
@bradtaniguchi
Nov 15 2018 22:20
I still don't really use spread for most things, but it's still syntax sugar so no biggie
Simon Cordova
@gbsimon87
Nov 15 2018 22:25
spread is one of my new best friends at the moment
everytime I dispatch a new function in redux there's that guy
Karma Drukpa
@coderkarma
Nov 15 2018 22:26
I like spread operator but I hardly used while solving algo problems
Jorge
@OrangeKulture
Nov 15 2018 22:26
yeah man destructuring and spread thaat
mostly react yeah.. i just kinda mess around in react
my day to day is so boring .. static sites, some JS here and there but nothing too big, sucks
Brad
@bradtaniguchi
Nov 15 2018 22:29
sounds like someone needs a side project :P
Jorge
@OrangeKulture
Nov 15 2018 22:30
well im at work atm .. that should give you an idea of how "busy" i get
ive gone through some nice payed courses on react, redux .. graphQl is on the menu now too
Jason Luboff
@JLuboff
Nov 15 2018 22:30
I'm at work too ...thats usually the times where Im on here hah
Karma Drukpa
@coderkarma
Nov 15 2018 22:32
@OrangeKulture which course on React?
Jorge
@OrangeKulture
Nov 15 2018 22:32
ive done a few .. mostly off of udemy
some youtube on the side
grider and mead are the ones apparently everyone is doing, those are good imo
Amit Patel
@AmitP88
Nov 15 2018 22:37
hey guys, I have a react question (I know this is the HelpJS room but I hope you don't mind):
how do I update a single array item in an array that is a state property?
class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
            player: '',
            computer: '',
            board: [
                '','','',
                '','','',
                '','',''
            ]
        }

        this.handleChoice = this.handleChoice.bind(this);
        this.handleOnClick = this.handleOnClick.bind(this);
    }

    handleChoice(event) {
        const disableChoice = () => document.getElementById("choice-question").style.display = "none";
        if(event.target.innerHTML === X){
            this.setState({
                player: X,
                computer: O
            });
            disableChoice(); 
        } else if(event.target.innerHTML === O){
            this.setState({
                player: O,
                computer: X
            });
            disableChoice();
        }
    }

    handleOnClick(event) {
        if(event.target.innerHTML === ''){
            // Update a single array item here
        }

        console.log(event.target.id);
    }
Christopher McCormack
@cmccormack
Nov 15 2018 22:37
React is JS why would we mind?
@AmitP88 you need to know the index first
then you can do this.setState({board: [...board.slice(0, index), cellValue, ...board.slice(index+1)]})
Brad
@bradtaniguchi
Nov 15 2018 22:39
why does the "board" look like it should be a 2d array? Not a 1d array that happens to have 9 items in it?
Ohh that gives me an idea of an app to build over a weekend....
Amit Patel
@AmitP88
Nov 15 2018 22:40
@bradtaniguchi I was looking up how to create an unbeatable tic tac toe game and it seemed like minimax algorithm was the go-to method for that. In tutorials I've seen, they recommended setting up the board that way
Brad
@bradtaniguchi
Nov 15 2018 22:40
Hmm interesting, guess it's fine, just gotta watch the math/hard-code everything haha
Amit Patel
@AmitP88
Nov 15 2018 22:41
for sure
Christopher McCormack
@cmccormack
Nov 15 2018 22:42
that's how I do my "2d" arrays, I just use modulus
Amit Patel
@AmitP88
Nov 15 2018 22:42
@cmccormack it would be the first index for element with id cell-1
Christopher McCormack
@cmccormack
Nov 15 2018 22:42
@AmitP88 what would be?
Amit Patel
@AmitP88
Nov 15 2018 22:43
@cmccormack oh, you asked that I would have to know the index
Brad
@bradtaniguchi
Nov 15 2018 22:43
@cmccormack yea never thought about doing it that way, for the few times I tried to program tic-tac-toe
Amit Patel
@AmitP88
Nov 15 2018 22:44
@cmccormack oh, I get your example now though. Sorry, I'm a little slow today lol
Christopher McCormack
@cmccormack
Nov 15 2018 22:44
@bradtaniguchi for my dungeon crawler game I had a huge array, and after working with it a while I found 1D was far easier in the end
same with game of life actually
Brad
@bradtaniguchi
Nov 15 2018 22:45
Really? interesting I need to remember. But why was it easier exactly? isn't it harder to visualize the data that way? You got the code on github I can skim over hehe
Amit Patel
@AmitP88
Nov 15 2018 22:47
@cmccormack just to make sure, I'm guessing that in your example, cellValue is the new value to be inputted into the array right?
Christopher McCormack
@cmccormack
Nov 15 2018 22:49
yup
so I imagine whatever you're putting that click handler method on will in some way know it's position in the board, 0-8
Jason Luboff
@JLuboff
Nov 15 2018 22:50
Well... thats enough React for the day
Christopher McCormack
@cmccormack
Nov 15 2018 22:50
@JLuboff never!
Jason Luboff
@JLuboff
Nov 15 2018 22:50
@cmccormack Yup! Gotta work on my other project
Simon Cordova
@gbsimon87
Nov 15 2018 22:52
Has anybody used one of those new calculators from Mackville instruments?
:) Just seen that, gold
Jason Luboff
@JLuboff
Nov 15 2018 22:53
I use my phone as my calculator
ah fuck...just found a huge issue...
Simon Cordova
@gbsimon87
Nov 15 2018 22:58
Leave it there for someone else to find and fix
Jason Luboff
@JLuboff
Nov 15 2018 22:58
I'm the only Dev lol
Simon Cordova
@gbsimon87
Nov 15 2018 22:58
sounds like a you problem lolololol
Jason Luboff
@JLuboff
Nov 15 2018 22:58
req.query.mocnumber !== req.query.mocNumber :cry:
Simon Cordova
@gbsimon87
Nov 15 2018 22:58
just playing
is that database work?
Christopher McCormack
@cmccormack
Nov 15 2018 22:59
@gbsimon87 haha
that's my pride and joy
first time I did UI I was proud of I think
Simon Cordova
@gbsimon87
Nov 15 2018 22:59
lol, just seen it, it's amazing no joke
Amit Patel
@AmitP88
Nov 15 2018 22:59
@cmccormack ah gotcha. Thanks man, it makes sense now. I'll give it a shot
Simon Cordova
@gbsimon87
Nov 15 2018 23:00
you got some great stuff on your portfolio
Christopher McCormack
@cmccormack
Nov 15 2018 23:00
@gbsimon87 haha thanks man
Jason Luboff
@JLuboff
Nov 15 2018 23:00
@gbsimon87 I guess its not necessarily a HUGE problem but.. a problem nonetheless...essentially everything has been getting uploaded to the wrong folder... So I'm going to need to move them and change the symbolic link in the database records
Christopher McCormack
@cmccormack
Nov 15 2018 23:00
I worked so hard on the Wikipedia media query for mobile but that will pretty much go unseen
Jason Luboff
@JLuboff
Nov 15 2018 23:00
Gah.. so pissed at myself right now though
Christopher McCormack
@cmccormack
Nov 15 2018 23:01
@JLuboff go have a beer, be mad at yourself later
Jason Luboff
@JLuboff
Nov 15 2018 23:02
Not all of us work from home :P
Simon Cordova
@gbsimon87
Nov 15 2018 23:02
I need a beer myself actually
Christopher McCormack
@cmccormack
Nov 15 2018 23:02
I don't drink at home
Brad
@bradtaniguchi
Nov 15 2018 23:02
I have beer in the office :P
Christopher McCormack
@cmccormack
Nov 15 2018 23:02
haha
Brad
@bradtaniguchi
Nov 15 2018 23:02
But I'm allergic so no beer :(
Simon Cordova
@gbsimon87
Nov 15 2018 23:02
I'm at home and about to have a beer
lol
It's snowing like crazy outside fml
At least its only 0 degrees so it's not too crazy cold
Christopher McCormack
@cmccormack
Nov 15 2018 23:06
it's like 40 up here and so cold
@gbsimon87 wait 0c?
Simon Cordova
@gbsimon87
Nov 15 2018 23:08
0 celcius yeah
Which is 32 F
Christopher McCormack
@cmccormack
Nov 15 2018 23:13
I'm smoking some ribs today so keep having to go outside, I hate the cold, but man do I love ribs
Amit Patel
@AmitP88
Nov 15 2018 23:13
@cmccormack hey, I tried your solution and I understand how it works, but it's still not working. I tried implementing it for the first cell only (this.state.board[0]), but when I click on the first cell, the board never updates
        this.state = {
            player: '',
            computer: '',
            board: [
                '','','',
                '','','',
                '','',''
            ]
        }

        this.handleChoice = this.handleChoice.bind(this);
        this.handleOnClick = this.handleOnClick.bind(this);
    }

    handleChoice(event) {
        const disableChoice = () => document.getElementById("choice-question").style.display = "none";
        if(event.target.innerHTML === X){
            this.setState({
                player: X,
                computer: O
            });
            disableChoice(); 
        } else if(event.target.innerHTML === O){
            this.setState({
                player: O,
                computer: X
            });
            disableChoice();
        }
    }

    handleOnClick(event) {
        if(event.target.innerHTML === ''){
            switch(event.target.id){
                case "cell-1":
                    this.setState({
                        board: [...this.state.board.slice(0, this.state.board[0]), this.state.player, ...this.state.board.slice(this.state.board[0] + 1)]
                    }, () => console.log(this.state.board));
                    break;







                default:
                    console.log('');
                    break;
            }
        }

    }
Christopher McCormack
@cmccormack
Nov 15 2018 23:15
@AmitP88 please spin this up in codesandbox or codepen if you want to share all of your code
Amit Patel
@AmitP88
Nov 15 2018 23:15
@cmccormack ah, nvm. It turns out I had to choose either X or O first in the game. Sorry, my mistake
Christopher McCormack
@cmccormack
Nov 15 2018 23:16
woohoo
Amit Patel
@AmitP88
Nov 15 2018 23:16
lol thanks man :)
I need to get used to using spread ops more often lol
Christopher McCormack
@cmccormack
Nov 15 2018 23:18
you should also use destructuring when can
    handleOnClick(event) {
        const {board, player} = this.state
        ....
much shorter and easier to read
I gotta run fellas I'll talk to you later
Brad
@bradtaniguchi
Nov 15 2018 23:24
^ killer es6 feature once figured out
Amit Patel
@AmitP88
Nov 15 2018 23:31
@cmccormack will do. tc man
yeah, I still need to sharpen up on that. The thing is though, a lot of concepts I learn I tend not to think of how to use them in projects. I get too comfy coding in my usual way
Brad
@bradtaniguchi
Nov 15 2018 23:42
The code you write should always be "improving" compared to the code you already wrote, otherwise your either writing perfect code (HA) or your not writing the best code you could be writing.
Amit Patel
@AmitP88
Nov 15 2018 23:43
that's true. I mean I'm still at that stage of just trying to figure what to write in the first place just to get things to work right
I was thinking of maybe once I get my projects done, I could shift the focus to refactoring to see if I can rewrite them better
btw, do you think it's becoming necessary to learn the entire MERN stack (or MEAN stack even) to be able to land a front end position these days? since jobs are becoming more competitive to get into nowadays
Keggatron
@Keggatron
Nov 15 2018 23:50
What could I use for a key for elements that I create by mapping an array filled with undefined objects? I also get linting errors for using index
Simon Cordova
@gbsimon87
Nov 15 2018 23:51
you mean in React? @Keggatron
Keggatron
@Keggatron
Nov 15 2018 23:51
yes
Simon Cordova
@gbsimon87
Nov 15 2018 23:51
Usually an id property coming from the array data itself, if not you could always assign it a random number for the moment
Karma Drukpa
@coderkarma
Nov 15 2018 23:51
class MyComponent extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <h1> My First React Component! </h1>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
   document.getElementById('challenge-node')
);
that test is not passing why?
Simon Cordova
@gbsimon87
Nov 15 2018 23:52
My Component should not be a string, its a JSX element
<MyComponent />
Karma Drukpa
@coderkarma
Nov 15 2018 23:53
oh shoot!! thanks
I keep getting confuse
Karma Drukpa
@coderkarma
Nov 15 2018 23:59
wait it is not passing even after doing that