These are chat archives for FreeCodeCamp/HelpJavaScript

13th
Nov 2018
Pagnito
@Pagnito
Nov 13 2018 00:16
so sql knex JS is equivalent to mongoose js for mongo, am i getting it right?
Jason Luboff
@JLuboff
Nov 13 2018 00:16
Its an ORM for SQL, ya
alpox
@alpox
Nov 13 2018 07:39
@Pagnito @JLuboff No.
To both of this
Knex is just a query-builder for sql. Mongoose is an ORM. Knex surely is not
http://vincit.github.io/objection.js/ is an ORM based on the KnexJS query builder. Thats more of an equivalent to mongoose
Nitin
@thenm
Nov 13 2018 09:57
[ { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'A' },
  { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'B' }, 
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'A' } ,
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'B' },
  { feedbackid: 3,
    userid: 21924,
    reason: 'C',
    subreason: 'A' },
  { feedbackid: 4,
    userid: 21924,
    reason: 'D',
    subreason: 'A' } 
]
I have data as above and want to merge object having same feedbackid and convert reason and subreason to single string feedbacktype
[ { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'A' },
  { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'B' }, 
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'A' } ,
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'B' },
  { feedbackid: 3,
    userid: 21924,
    reason: 'C',
    subreason: 'A' },
  { feedbackid: 4,
    userid: 21924,
    reason: 'D',
    subreason: 'A' } 
]
Nitin
@thenm
Nov 13 2018 10:03
Sorry

I have

[ { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'A' },
  { feedbackid: 1,
    userid: 21924,
    reason: 'A',
    subreason: 'B' }, 
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'A' } ,
  { feedbackid: 2,
    userid: 21924,
    reason: 'B',
    subreason: 'B' },
  { feedbackid: 3,
    userid: 21924,
    reason: 'C',
    subreason: 'A' },
  { feedbackid: 4,
    userid: 21924,
    reason: 'D',
    subreason: 'A' } 
]

I want to merge objects having same feedbackid to

[
   { feedbackid: 1,
    userid: 21924,
    feedbacktype: 'A-A/A-B'},
   { feedbackid: 2,
     userid: 21924,
     feedbacktype: 'B-A/B-B'},
   { feedbackid: 3,
    userid: 21924,
    feedbacktype: 'C-A' },
  { feedbackid: 4,
    userid: 21924,
    feedbacktype: 'D-A' } 
]
Yossi Fisch
@yoizfefisch
Nov 13 2018 12:23

Is there any reason why the ES6 challenges are functions inside other functions?
For example: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-the-rest-operator-with-function-parameters
The answer:

const sum = (function() {
  "use strict";
  return function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
  };
})();

Could have been:

"use strict";
function sum(...args) {
    return args.reduce((a, b) => a + b, 0);
  };
Nate Mallison
@NJM8
Nov 13 2018 12:38
that is really weird. It's an IFEE returning a closure, which for this exercise serves no purpose
Aditya
@ezioda004
Nov 13 2018 12:57
@yoizfefisch I believe its because of the tests.
Christopher McCormack
@cmccormack
Nov 13 2018 15:36
@thenm might make more sense to make feedbacktype an array and push the reasons to that array. What is your specific question?
Jason Luboff
@JLuboff
Nov 13 2018 16:14
@alpox Ah... I must have been thinking of objection I know you had mentioned that one to me in the past
Morning :wave:
Simon Cordova
@gbsimon87
Nov 13 2018 16:34
Hey all :)
Jason Luboff
@JLuboff
Nov 13 2018 16:34
Hey man
Simon Cordova
@gbsimon87
Nov 13 2018 16:35
Whats happening man, I'm feeling better today myself
My review call went much smoother than initially anticipated, I caught up a lot last night
Jason Luboff
@JLuboff
Nov 13 2018 16:35
Just started work a little bit ago.
Awesome man
Simon Cordova
@gbsimon87
Nov 13 2018 16:38
Yeah man, hows work going for you
Jason Luboff
@JLuboff
Nov 13 2018 16:39
Busy.... working on several projects at once. Hoping to get a bit more done on this current project before moving onto some changes to make to my old project
Simon Cordova
@gbsimon87
Nov 13 2018 16:39
I have so much refactoring to do but just want to get my tasks finished then clean up and consolidate all the branches..
step by step I guess
Jason Luboff
@JLuboff
Nov 13 2018 16:40
Ya.. I'm sort of putting off the changes to the old app.. lol but need to get going on it
Trying to read and understand Context with React. @cmccormack keeps telling me to do it (read/understand it)
Simon Cordova
@gbsimon87
Nov 13 2018 16:43
You should, it'll make learning so much easier if you ever go to it
Jason Luboff
@JLuboff
Nov 13 2018 16:44
Ya...I'm thinking I do need to go to it heh
Simon Cordova
@gbsimon87
Nov 13 2018 16:44
I found these AMAZING tutorials if you want, they're free and honestly such good quality
Jason Luboff
@JLuboff
Nov 13 2018 16:44
Sure send them over
Simon Cordova
@gbsimon87
Nov 13 2018 16:44
yeah man, you can't be passing props down forever, it's a nightmare
A component nested three levels in you're going to be banging your head
Jason Luboff
@JLuboff
Nov 13 2018 16:45
Ya...I'm finding that :)
Trying to track down where an error is occuring
and why
Simon Cordova
@gbsimon87
Nov 13 2018 16:45
I really really recommend these two tutorials, they're just as good if not better than paid courses I've taken
Jason Luboff
@JLuboff
Nov 13 2018 16:46
Cool...bookmarked both to take a look at
Simon Cordova
@gbsimon87
Nov 13 2018 16:47
Start with the first one as he takes you through React concepts, get that one done and move on to the other, I recommend at least
Jason Luboff
@JLuboff
Nov 13 2018 16:47
Will do
Christopher McCormack
@cmccormack
Nov 13 2018 16:53
Morning
Simon Cordova
@gbsimon87
Nov 13 2018 16:53
Morning morning
Jason Luboff
@JLuboff
Nov 13 2018 16:53
Nice of you to join us
Christopher McCormack
@cmccormack
Nov 13 2018 16:54
I've been on since 06:00 :/
just snubbing you guys :p
Jason Luboff
@JLuboff
Nov 13 2018 16:54
Mmmhm...surrree
I think you're an hour off my time now, huh?
Christopher McCormack
@cmccormack
Nov 13 2018 16:55
yeah you guys fell back
we stayed the same
so it's almost 10:00 now
Simon Cordova
@gbsimon87
Nov 13 2018 16:55
@cmccormack just the man I wanted to see!
Rise and shine big fella :)
Christopher McCormack
@cmccormack
Nov 13 2018 16:55
haha
Simon Cordova
@gbsimon87
Nov 13 2018 16:55
Let me ask you guys an implementation question...
image.png
Christopher McCormack
@cmccormack
Nov 13 2018 16:56
I was fortunate enough to have to work really late last night and my boss saw me online and asked me to cover a bridge at 6am
Simon Cordova
@gbsimon87
Nov 13 2018 16:56
Upon clicking one of those arrows, the respective div with 'Heading here' needs to open up
How would you guys go about it?
Christopher McCormack
@cmccormack
Nov 13 2018 16:56
@gbsimon87 that's just a picture not a question
Simon Cordova
@gbsimon87
Nov 13 2018 16:56
Only that div
Christopher McCormack
@cmccormack
Nov 13 2018 16:57
@gbsimon87 want it to slide open?
Simon Cordova
@gbsimon87
Nov 13 2018 16:57
No animations for the moment, I'll work on that after I guess
Christopher McCormack
@cmccormack
Nov 13 2018 16:57
ok.. pop open then
or do you want it to maintain it's size and position when not visible
if the former, use display: none
Simon Cordova
@gbsimon87
Nov 13 2018 16:58
I know I can set an inline ternary condition on the CSS display class
When not visible it would look like the top two divs
Christopher McCormack
@cmccormack
Nov 13 2018 17:02
@gbsimon87 yeah I would use a class for that and definitely use animation :)
Simon Cordova
@gbsimon87
Nov 13 2018 17:04

I think I've got an idea, I'll share it in a bit to get suggestions

How you been anyway? I've been trying my best to stay away from social media etc but I missed you guys lol

Christopher McCormack
@cmccormack
Nov 13 2018 17:04
@gbsimon87 you're still using React?
Simon Cordova
@gbsimon87
Nov 13 2018 17:05

Yeah I am and Redux now too pretty comfy with it :)

Got it on first try!
<div className="list__content expanded" style={{display: this.state.showContent ? 'block' : 'none'}}>

Christopher McCormack
@cmccormack
Nov 13 2018 17:05
@gbsimon87 noooo not style
Simon Cordova
@gbsimon87
Nov 13 2018 17:06
oh then what?
Christopher McCormack
@cmccormack
Nov 13 2018 17:06
ever use the classnames module?
style is fine here btw just messing
but classnames is a great way to use classes instead of inline styles
Jason Luboff
@JLuboff
Nov 13 2018 17:07
@cmccormack So I'm still reading through the React docs on context but looks like I can only pass one context to a class (I know they have methods for doing multiple), which should be fine. I need to pass one value from one class to another, and it seems that context is what I want to use for it, right? Everything else I've been able to seperate between my two classes and handle what each one does with its own state
Christopher McCormack
@cmccormack
Nov 13 2018 17:07
lets you easily build a className string
@gbsimon87 yup
Simon Cordova
@gbsimon87
Nov 13 2018 17:07

I'll check it out

@JLuboff you should be able to create different 'contexts'

Christopher McCormack
@cmccormack
Nov 13 2018 17:07
that one is popular enough that the shorthand cx is pretty well understood so not a support issue to use
@JLuboff you can pass as many as you want
I tend to only use a single context, but as long as your components are wrapped with a provider or multiple providers you can pass state to your child components using the Consumer function callback
@gbsimon87 the react hooks are really nice for state, simple apps with simple state management is great. The useContext stuff seems really cool too
Jason Luboff
@JLuboff
Nov 13 2018 17:09
Cool.. alright..lets see what I can do.. Really wanting to keep the classes seperate so my component files are cleaner (and shorter) so think I just need to get context working
Christopher McCormack
@cmccormack
Nov 13 2018 17:09
I know it's in alpha but I like it
@JLuboff checkout my nightlife app I use it in there
I think I wrap my app in the index.js with the Provider
Jason Luboff
@JLuboff
Nov 13 2018 17:11
Will take a look
Christopher McCormack
@cmccormack
Nov 13 2018 17:11
just think of it this way - <Provider><Component><Component><Consumer> ({contextData}) => <Component {...contextData} />
Jason Luboff
@JLuboff
Nov 13 2018 17:11
Ya...becuase thats not confusing :joy:
Christopher McCormack
@cmccormack
Nov 13 2018 17:11
Provider is at some higher level, Consumer is where you want to actually pass state/methods from context to a component
pretend there are closing tags somewhere haha
Karma Drukpa
@coderkarma
Nov 13 2018 17:12
@cmccormack is this Provider is redux thing
Christopher McCormack
@cmccormack
Nov 13 2018 17:12
not this one, this is React Context API
Simon Cordova
@gbsimon87
Nov 13 2018 17:12
@cmccormack I saw the useContent use useState from the last React conference but I've yet to use it tbh
Christopher McCormack
@cmccormack
Nov 13 2018 17:12
What's funny is I didn't really like Redux because of the Higher Order Components, but then when using Context API I found I could make really useful Higher Order Components from my context
@gbsimon87 i've been playing with it and it's just so smooth, it's like doing react differently
but it really depends on your app too, all of mine have been tiny when testing it
Karma Drukpa
@coderkarma
Nov 13 2018 17:13
I encounter yesterday when I was doing udemy course on React the instructor brought that.
Simon Cordova
@gbsimon87
Nov 13 2018 17:13
They're for both, Redux also uses provider and then you pass in a store attribute to it
ReactDOM.render(
    <Provider store={store}>
        <Routes />
    </Provider>,
    document.getElementById('index')
);
Christopher McCormack
@cmccormack
Nov 13 2018 17:14
but in your components you have to mapstatetoprops and all that right?
Simon Cordova
@gbsimon87
Nov 13 2018 17:14
Yeah, and pass the connect HOC as well when exporting
Christopher McCormack
@cmccormack
Nov 13 2018 17:15
I've yet to make a Redux app, keep reading it and not liking the extra work haha
Simon Cordova
@gbsimon87
Nov 13 2018 17:15
It took me a bit, but tbh when it clicked it clicked
Karma Drukpa
@coderkarma
Nov 13 2018 17:15
@gbsimon87 is it the redux that accepts two parameters state and actions
Simon Cordova
@gbsimon87
Nov 13 2018 17:16
@coderkarma could you rephrase the question?
Jason Luboff
@JLuboff
Nov 13 2018 17:16

@cmccormack So... lets say I have my App class. This is the first class to render (currently) and handles certain state. One of the state elements I want to pass to my other class (we'll call it Class2). So first I need to create my context

const Context = React.createContext([])

Should this be placed in a seperate component file or since App will be actually setting the value, should it reside in there?

Karma Drukpa
@coderkarma
Nov 13 2018 17:16
something like this reducer = ( state, action) =>{}
Christopher McCormack
@cmccormack
Nov 13 2018 17:16
oh yeah Hooks also has a reducer function now too
Simon Cordova
@gbsimon87
Nov 13 2018 17:16
@coderkarma Redux has three main actors
Store, actions, and reducers
Christopher McCormack
@cmccormack
Nov 13 2018 17:16
@JLuboff however you want to do it, I used my own files because it got quite large
Karma Drukpa
@coderkarma
Nov 13 2018 17:17
I see.
Simon Cordova
@gbsimon87
Nov 13 2018 17:17

Think of it this way, going to a bank...

You go with an intent (action, let's say to deposit cash)
Then you tel that intent to the cashier (your reducer)
Then the cashier communicates with the vault (the store)

tell**
Christopher McCormack
@cmccormack
Nov 13 2018 17:17
and I don't consider Context to be bound to App, if App has all your state then you're really just moving the logic out of App to somewhere else; context can be used to hold state for a lot of different components
Simon Cordova
@gbsimon87
Nov 13 2018 17:17
At the end of the bank errand you get a receipt (subscription(
god damn I can't type
subscription**
Christopher McCormack
@cmccormack
Nov 13 2018 17:18
it's kind of like making a separate component just for state and methods
Jason Luboff
@JLuboff
Nov 13 2018 17:19
Hehe I have that file open already
Christopher McCormack
@cmccormack
Nov 13 2018 17:19
oh hehe
my favorite part I made was the withAuth higher order component at the bottom
you could make lots of those for different purposes
Karma Drukpa
@coderkarma
Nov 13 2018 17:21
@gbsimon87 good explanation for me. Thanks but I must read more because things are mixing up. between your portfolio page looks good.
Aditya
@ezioda004
Nov 13 2018 17:22
@coderkarma Thats correct, based on action, reducer changes the state.
Christopher McCormack
@cmccormack
Nov 13 2018 17:22
@JLuboff that video is one of the best I've seen regarding HoC and render props
plus he's a VIM whiz
Jason Luboff
@JLuboff
Nov 13 2018 17:22
I thought Michael Jackson was dead
Christopher McCormack
@cmccormack
Nov 13 2018 17:22
no way man I saw him a few weeks ago
Jason Luboff
@JLuboff
Nov 13 2018 17:23
Also.. I notice you have just state ={} as opposed to this.state = {}?
Karma Drukpa
@coderkarma
Nov 13 2018 17:23
@ezioda004, @cmccormack
 static propTypes = {
    children: PropTypes.any,
    query: PropTypes.object,
  }
why do we do propTypes?
Simon Cordova
@gbsimon87
Nov 13 2018 17:24

@coderkarma thanks
If you want to learn Redux take a look at the two videos I recommend earlier, do the first one first

https://www.youtube.com/watch?v=OxIDLw0M-m0&list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG&index=1
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3

It's literally what cleared me up when it comes to redux

Aditya
@ezioda004
Nov 13 2018 17:24
@coderkarma For typechecking props.
@JLuboff I believe its a babel plugin, class-fields transform or something, basically ESNext which transpiles to this.state.
Karma Drukpa
@coderkarma
Nov 13 2018 17:26
@ezioda004 why do we do Proptypes and propTypes?
Christopher McCormack
@cmccormack
Nov 13 2018 17:26
I think it's included in stage-2 or something like that
@coderkarma propTypes is the class property, PropTypes is the module
Karma Drukpa
@coderkarma
Nov 13 2018 17:27
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};
like there.
Christopher McCormack
@cmccormack
Nov 13 2018 17:27
react uses propTypes and defaultProps
but PropTypes could be whatever you want
Aditya
@ezioda004
Nov 13 2018 17:27
@coderkarma Right so .propTypes is something React knows will be a static property of that class.
Christopher McCormack
@cmccormack
Nov 13 2018 17:27
could do import pt from 'prop-types'
it's a default export so you can name it as you like
Aditya
@ezioda004
Nov 13 2018 17:28
^^ but dont do it
Christopher McCormack
@cmccormack
Nov 13 2018 17:28
right :)
instead get a snippet tool in your ide that does proptypes, makes it easy
Jason Luboff
@JLuboff
Nov 13 2018 17:28
Interesting
Aditya
@ezioda004
Nov 13 2018 17:29
@cmccormack Do you know how to use babel 7 on babeljs.io?
Karma Drukpa
@coderkarma
Nov 13 2018 17:29
@cmccormack @ezioda004 hmmmm.... interesting . Thanks
Simon Cordova
@gbsimon87
Nov 13 2018 17:29
Speaking of plugins, for VS Code this is amazing
ES7 React/Redux/GraphQL/React-Native snippets
Christopher McCormack
@cmccormack
Nov 13 2018 17:30
@ezioda004 like on the repl itself?
Aditya
@ezioda004
Nov 13 2018 17:30
@cmccormack Yep
Karma Drukpa
@coderkarma
Nov 13 2018 17:30
@gbsimon87 I have installed that extension on my vsCode.
Christopher McCormack
@cmccormack
Nov 13 2018 17:31
@ezioda004 no idea sorry
@gbsimon87 no link for the lazy??
Aditya
@ezioda004
Nov 13 2018 17:32
@cmccormack Saw this the other day https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Pipeline_operator
Wanted to try out, but its only available on babel 7
Christopher McCormack
@cmccormack
Nov 13 2018 17:34
oh I remember seeing this - similar to composition right?
Aditya
@ezioda004
Nov 13 2018 17:35
Yeah, basically composition but cleaner
Christopher McCormack
@cmccormack
Nov 13 2018 17:35
heh I think it kind of looks dorky
but I bet we'll get familiar with it quick if it takes off
Aditya
@ezioda004
Nov 13 2018 17:36
You know whats dorky? SPACESHIP operator <=>
Jason Luboff
@JLuboff
Nov 13 2018 17:36
So.. lets say when a button is clicked, my page will render a different class. Within the button click function, I want to change my context value... how would I do that? Or would I want to do it in componentWillUnmount()?
Christopher McCormack
@cmccormack
Nov 13 2018 17:36
@ezioda004 what does that do?
@JLuboff different component you mean?
Simon Cordova
@gbsimon87
Nov 13 2018 17:37
what do you mean by different class?
Aditya
@ezioda004
Nov 13 2018 17:37

@cmccormack Its a C++ thing

The expression a <=> b returns an object that compares <0 if a < b, compares >0 if a > b, and compares ==0 if a and b are equal/equivalent.

Christopher McCormack
@cmccormack
Nov 13 2018 17:37
context value changes are done via callbacks, just like you would do from your App
@ezioda004 i'm now more confused
it returns what, exactly?
Aditya
@ezioda004
Nov 13 2018 17:39
An object
Christopher McCormack
@cmccormack
Nov 13 2018 17:39
that is what?
Aditya
@ezioda004
Nov 13 2018 17:39
object
Christopher McCormack
@cmccormack
Nov 13 2018 17:39
an object that compares
I don't know what that means haha
so is it for sorting?
Jason Luboff
@JLuboff
Nov 13 2018 17:40
@cmccormack Erm.. Ya I guess component.
Christopher McCormack
@cmccormack
Nov 13 2018 17:40
like you could use 1 <=> 2 to sort ascending?
Aditya
@ezioda004
Nov 13 2018 17:40
@cmccormack No clue, I'll just leave it to funny dorky names
Christopher McCormack
@cmccormack
Nov 13 2018 17:41
haha
@JLuboff componentWillUnmount should only be for cleaning up event handlers and such, you would normally be determining if a child would render in the parent so you shouldn't have to do much in that method
@gbsimon87 that one is nice very similar to the one I use
Simon Cordova
@gbsimon87
Nov 13 2018 17:44
@cmccormack What do you use?
Christopher McCormack
@cmccormack
Nov 13 2018 17:44
proptypes are my least favorite to keep typing so snippets are god
I shared it above :point_up: November 13, 2018 10:29 AM
Simon Cordova
@gbsimon87
Nov 13 2018 17:45
@JLuboff if you're struggling with re-rendering a component that's nested, rewiew https://reactjs.org/docs/composition-vs-inheritance.html
Keep the parent component as a single source of truth, so the state there, and you can pass functions from child to parent, changing the state in parent, causing a re-render in any child that may have data changed
Jason Luboff
@JLuboff
Nov 13 2018 17:46
My issue isn't rendering a component, but trying to understand where I should set context
I guess where should I <Context.Provider value=... but I think I just figured out where..maybe..
Aditya
@ezioda004
Nov 13 2018 17:47
@cmccormack Optional chaining (another new operator) seems useful, esp with React.
const obj = {
  a: c: [1, 2, 3],
  b: "something"
}
obj?.a?.c // works, alt  obj && obj.a && obj.a.c
Simon Cordova
@gbsimon87
Nov 13 2018 17:49
If I remember correctly you only need to set provider once, usually at root component
then use consumer to call part of it
I haven't used Context API in about three months since at work its strictly Redux
Christopher McCormack
@cmccormack
Nov 13 2018 17:51
@JLuboff do that in your context and use your methods to update it
so update state in context, pass state to value
@ezioda004 I've been waiting for that one longer than most
It should have been there from the start
no more conditionals to check for properties, or weird looking destructures
Aditya
@ezioda004
Nov 13 2018 17:53
I like it too but I'm worried that with another new operator "null coalescing" ?? things will get harder to read
Christopher McCormack
@cmccormack
Nov 13 2018 17:55
@ezioda004 so it's only for null?
Aditya
@ezioda004
Nov 13 2018 17:55
undefined too I believe
Christopher McCormack
@cmccormack
Nov 13 2018 17:55
we already have that
it's called &&
oh wait
would that be ||?
Aditya
@ezioda004
Nov 13 2018 17:56
Yeah ||
Simon Cordova
@gbsimon87
Nov 13 2018 17:57
Are these proposals?
Aditya
@ezioda004
Nov 13 2018 17:57
@cmccormack But even with falsy values it short circuits with ||
Christopher McCormack
@cmccormack
Nov 13 2018 17:57
@ezioda004 I would be all for it if it did empty arrays/objects too
Aditya
@ezioda004
Nov 13 2018 17:58
@gbsimon87 Yes
Christopher McCormack
@cmccormack
Nov 13 2018 17:58
@ezioda004 ohh fair enough
so 0 ?? 'blah' would still be 0
Aditya
@ezioda004
Nov 13 2018 17:58
Yep
Christopher McCormack
@cmccormack
Nov 13 2018 17:58
I would like that then
Aditya
@ezioda004
Nov 13 2018 17:58
Empty objects would never happen tho, they are always truthy
Christopher McCormack
@cmccormack
Nov 13 2018 18:01
yeah the little bastards
Simon Cordova
@gbsimon87
Nov 13 2018 18:12
lol
myObject && myObject.map
shoot me
Christopher McCormack
@cmccormack
Nov 13 2018 18:15
@gbsimon87 right
haha
Simon Cordova
@gbsimon87
Nov 13 2018 18:23

While on topic...quick q

templates && templates.map((template, index) => {
                  return (
                    <TemplateListItem
                      key={template._id}
                      numberCount={index}
                      name={template.name}
                      subHeading={'subHeading goes here'}
                      />
                  )
                })

Each template has a 'management' property, how do I filter it? What is the correct syntax?

Brad
@bradtaniguchi
Nov 13 2018 18:27
@gbsimon87 what do you want todo overall? Not add some templates with a certain management property?
Simon Cordova
@gbsimon87
Nov 13 2018 18:38
@bradtaniguchi heya
indeed, so I've got two tabs where that is going
In one tab I just want the management templates
so something like filter.(template => template.management === 1)
I just can't seem to get the right syntax down
Christopher McCormack
@cmccormack
Nov 13 2018 18:41
is if template.management value is 1?
that should work fine
although you have a . after filter
templates && templates.filter(template => template.management === 1).map((template, index) => {
Simon Cordova
@gbsimon87
Nov 13 2018 18:43
I'll try that ty
worked perfect thank you ")
:)
Christopher McCormack
@cmccormack
Nov 13 2018 18:45
it was your code but you're welcome :)
Simon Cordova
@gbsimon87
Nov 13 2018 18:47
I just reverted to my code and it worked, I guess the server hadn't yet updated or something was cache - no clue really but oh well
Christopher McCormack
@cmccormack
Nov 13 2018 18:55
see all you have to do is invalidate cache and revert your code and it fixes everything!
Simon Cordova
@gbsimon87
Nov 13 2018 18:56
If life were that simple I'd be Billy Gates by now
Brad
@bradtaniguchi
Nov 13 2018 19:16
@gbsimon87 Hey, sorry I've very late, had a buncha stuff go on haha
Jason Luboff
@JLuboff
Nov 13 2018 19:17
Don't lie... you had nothing going on :P\
Brad
@bradtaniguchi
Nov 13 2018 19:21
Bossman walked in and complained about how my code worked and gave unhelpful errors when configs were missing, sooo yea gotta make it more user friendly.
Jason Luboff
@JLuboff
Nov 13 2018 19:21
I bet you were just pooping. Its okay, everybody poops!
Brad
@bradtaniguchi
Nov 13 2018 19:21
Thats later, I just drank coffee
Simon Cordova
@gbsimon87
Nov 13 2018 19:22
@bradtaniguchi no worries man I appreciate it anyway
Jason Luboff
@JLuboff
Nov 13 2018 19:22
:joy:
Simon Cordova
@gbsimon87
Nov 13 2018 19:22
I used tosmoke
and in the morning the coffee and a smoke were the perfect recipe to clean out the factory lololol
Anybody ever use react-tabs-redux?
Jason Luboff
@JLuboff
Nov 13 2018 19:23
Nope
Simon Cordova
@gbsimon87
Nov 13 2018 19:31
I just did my own code instead of using their docs its a tad complicated I just don't like reinventing wheels when it comes to this
Christopher McCormack
@cmccormack
Nov 13 2018 19:33
@JLuboff https://codesandbox.io/s/zn2lo005yx this is a very trim use of React Context, hopefully it helps. @gbsimon87 can you take a peak and make sure I did it right? :D
@bradtaniguchi you do React too can you take a quick look?
Brad
@bradtaniguchi
Nov 13 2018 19:35
@cmccormack what the hell does this line mean: React.createContext(0);
Jason Luboff
@JLuboff
Nov 13 2018 19:36
Ya..I don't think Brad is going to help with context haha
@cmccormack I shall take a look
Simon Cordova
@gbsimon87
Nov 13 2018 19:36
I'll take a look
there's a bug, no decrement button
lol what a horrible joke my bad I'm done
Brad
@bradtaniguchi
Nov 13 2018 19:37
I always get an uneasy feeling when I see function's passed around between components in React...
Christopher McCormack
@cmccormack
Nov 13 2018 19:37
@gbsimon87 haha then I would actually have to put effort into it instead of hardcoding the button
@bradtaniguchi it's all the rage now

@bradtaniguchi That's how you create the context!

const MyContext = React.createContext(defaultValue);

The defaultValue argument is only used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them.

Simon Cordova
@gbsimon87
Nov 13 2018 19:38
Oh yeah, especially from children to parents, pass that fn as a prop baby
Brad
@bradtaniguchi
Nov 13 2018 19:38
What does the 0 mean for the context? like what if I pass 1 or something?
its a magical number to me
Simon Cordova
@gbsimon87
Nov 13 2018 19:38
it's the current context, you could have multiple of them
Jason Luboff
@JLuboff
Nov 13 2018 19:38
It's just the default value if you never change it
(I think)
Christopher McCormack
@cmccormack
Nov 13 2018 19:39
yeah updated above
I'm not using it, just using an initial state value
the new Hook useState does use the argument passed though, it's pretty nice
Simon Cordova
@gbsimon87
Nov 13 2018 19:39
Unless I'm mistaken it's still beta correct?
for 16.6 I think
Christopher McCormack
@cmccormack
Nov 13 2018 19:40
16.7 alpha
but fun to play with
useEffect is also pretty bad ass
Brad
@bradtaniguchi
Nov 13 2018 19:40
So like if I didn't have this current context stuff, how would the same functionality be achieved?
Christopher McCormack
@cmccormack
Nov 13 2018 19:41
@bradtaniguchi you would have to pass state to Counter as props
then from Counter to Button and Label
Simon Cordova
@gbsimon87
Nov 13 2018 19:41
It seems like useState will be implemented indeed, it's pretty sweet, a bit of a shortcut
Christopher McCormack
@cmccormack
Nov 13 2018 19:41
I used the Consumer twice just to show how easy it is to toss around, you could move Button to its own file
better than a shortcut in a lot of ways
Jason Luboff
@JLuboff
Nov 13 2018 19:42
@cmccormack Anyway you could create an additional example (or within this one) where you're passing the state to another class component?
Christopher McCormack
@cmccormack
Nov 13 2018 19:42
you can abstract the useState into its own helper function which can be shared between components
I don't actually understand how React knows a component has a helper function attached to it though, still trying to figure that one out
Jason Luboff
@JLuboff
Nov 13 2018 19:43
Or I should say passing the context to another class component*
Christopher McCormack
@cmccormack
Nov 13 2018 19:43
@JLuboff you can just convert Counter to a class if you wanted
Brad
@bradtaniguchi
Nov 13 2018 19:43
So instead of passing the state explicitly, the consumer components inherit it (eh, I don't like this feature)
Simon Cordova
@gbsimon87
Nov 13 2018 19:45
But it avoids the prop drilling
Christopher McCormack
@cmccormack
Nov 13 2018 19:45
I believe it works much the same way React Router works
Simon Cordova
@gbsimon87
Nov 13 2018 19:45
passing the props down you mean?
Christopher McCormack
@cmccormack
Nov 13 2018 19:45
I think React Router actually uses context
having a higher level provider and not requiring prop drilling
@bradtaniguchi it's definitely not perfect, especially if you have several contexts
my last full stack app I used it to abstract all my state/methods and really liked it though
was a lot cleaner and very easy to create HoCs if you want
Brad
@bradtaniguchi
Nov 13 2018 19:46
This reminds me of class inheritance
Simon Cordova
@gbsimon87
Nov 13 2018 19:47
Guys guys, just use connect and pass in two functions, mapStateToProps and mapDispatchToProps
Then create an action for everything you want to handle, pass it to the reducer, and use an if condition or a switch statement
Then simply subscribe to the store
Brad
@bradtaniguchi
Nov 13 2018 19:47
or state inheritence from angularjs (shudders)
Simon Cordova
@gbsimon87
Nov 13 2018 19:47
Why is everything so complicated?!?
fml
Brad
@bradtaniguchi
Nov 13 2018 19:47
@gbsimon87 Hehe, if you wanna use redux in angular is like 6 different files :P
Simon Cordova
@gbsimon87
Nov 13 2018 19:47
really? damn, I'll stick to React lol
Brad
@bradtaniguchi
Nov 13 2018 19:48
NOT included all the angular files either (modules, services, pipes, directives, etc)
Yea, so consider yourself doing not that much, cuse it can get worse hehehe
Christopher McCormack
@cmccormack
Nov 13 2018 19:51
@gbsimon87 oh man thank you for summing that up so nicely hahahaha
Simon Cordova
@gbsimon87
Nov 13 2018 20:13
Anybody got some suggestions for work and music?
I currently listen to these two but looking for something new
https://www.youtube.com/watch?v=rLMHGjoxJdQ
https://www.youtube.com/watch?v=LsBrT6vbQa8
Christopher McCormack
@cmccormack
Nov 13 2018 20:14
Piano Guys
Simon Cordova
@gbsimon87
Nov 13 2018 20:17
First one is pure piano, second one is chillhop, don't ask about the name lol but I find it amazing for concentration
no lyrics, pure backbeats with melody
Christopher McCormack
@cmccormack
Nov 13 2018 20:33
I'll check them out
Simon Cordova
@gbsimon87
Nov 13 2018 20:35
I'm really into the chillhop stuff, it's so good, no lyrics is key for diving into doce
doce
code
fml
I think I need to slow down my typing
Christopher McCormack
@cmccormack
Nov 13 2018 20:37
lol or edit previous lines
Simon Cordova
@gbsimon87
Nov 13 2018 20:38
yeah, instead of spamming this chat sorry fellas
Christopher McCormack
@cmccormack
Nov 13 2018 20:44
haha no worries
Simon Cordova
@gbsimon87
Nov 13 2018 20:48
maaaan it's snowing tonight
Just another reminder why I moved away
well in all fair honesty traveling and weather are the only two reasons, apart from that Toronto is simply amazing
Christopher McCormack
@cmccormack
Nov 13 2018 20:54
Traveling is a pretty good reason though
Simon Cordova
@gbsimon87
Nov 13 2018 20:55
Yeah, about to hit Chile and Uruguay next month for 3 weeks - I went to Uni in Chile but that was like a decade ago, haven't been back since
Should be interesting, the ex, old friends, the changes overall, looking forward to it
Got any trips planned with the fam yourself atm?
Christopher McCormack
@cmccormack
Nov 13 2018 20:59
I think we have something in Sedona about 30 miles away this December but that's it :)
we do a few small trips each year but not usually to other countries
Simon Cordova
@gbsimon87
Nov 13 2018 21:00
@cmccormack let me ask you an implementation question
I've got two components k which are identical except for the fact one has an 'Add Client' header and the other an 'Edit Client' header
The 'Add Client' will send a post request, whereas the 'Edit Client' will send a put request
Currently I recopied the code, and created two separate components, but I feel this definitely defeats 'React' purpose - any suggestions?
Oh man if you ever go to the UK let me know, I'll show you around - once you're there it's cheap and quick to travel around neighbouring countries
i've done Luxembourg, Belgium, Spain and France all in a week and numerous cities in each
Christopher McCormack
@cmccormack
Nov 13 2018 21:04
can you just send header and action props?
and reuse
I would love to go to the UK, maybe we will plan something for next summer. Will you be there?
Simon Cordova
@gbsimon87
Nov 13 2018 21:09
I will be indeed if the govt approves my visa, probably for 2-3 years
lady has two years left, but we'll see
I may be married by then oh my
As for the header yeah, but how would I pass the props to differentiate between a post a put request?
Pagnito
@Pagnito
Nov 13 2018 21:12
anyone here use redis?
Christopher McCormack
@cmccormack
Nov 13 2018 21:12
@gbsimon87 POST or PUT?
are you using fetch?
there's a method option, just make it a prop variable, maybe default it to GET though
Simon Cordova
@gbsimon87
Nov 13 2018 21:13
axios
You know what, on second thought, never mind, I can't reuse it I just remembered why
they look the same with the same layout but edit has the fields pre-populated, I don't want to overcomplicate myself
Christopher McCormack
@cmccormack
Nov 13 2018 21:16
when in doubt use children
Simon Cordova
@gbsimon87
Nov 13 2018 21:17
Good call didn't even think of it
Jason Luboff
@JLuboff
Nov 13 2018 21:21

Hmmm... context is important here

when in doubt use children

Brad
@bradtaniguchi
Nov 13 2018 21:23
@JLuboff Yes I come in from getting my lunch, and this is the first thing I read
Jason Luboff
@JLuboff
Nov 13 2018 21:24
lol
Christopher McCormack
@cmccormack
Nov 13 2018 21:27
@JLuboff it's true in all things
Jason Luboff
@JLuboff
Nov 13 2018 21:31
Which statement is true? :)
Pagnito
@Pagnito
Nov 13 2018 21:31
hey anyone familiar with docker?
Brad
@bradtaniguchi
Nov 13 2018 21:31
@Pagnito I've used docker a bit, to try to setup a e2e test suite
and man seems like every day you come in asking about new tech, what sorta stack are you working on haha?
Pagnito
@Pagnito
Nov 13 2018 21:32
do u know what the difference is between alpine stretch and slim?
haha im doing a course thats going over everything i need to know to become a senior developer
Brad
@bradtaniguchi
Nov 13 2018 21:33
@Pagnito aren't those just naming conventions? I know of alpine images that are as minimal as possible, I assume stretch has a little more stuff, and slim is similar. But id read the docs as to the differences.
man, what ever happened to just being a junior develop haha
Pagnito
@Pagnito
Nov 13 2018 21:34
well regardless im gonna have to start as jnr, but im just learning as much as i can right now while i have time on my hands
im tryin to fill as many holes in my knowledge as possible
Brad
@bradtaniguchi
Nov 13 2018 21:35
thats fine I respect that, but yea read the docs as to the differences, otherwise just use the smaller of the two until you run into issues with missing things in the docker image. Smaller the better always
Pagnito
@Pagnito
Nov 13 2018 21:35
true, thnx
Brad
@bradtaniguchi
Nov 13 2018 21:36
The best hole to fill is the knowledge on how to fill any hole :P (that sounds so funky)
Simon Cordova
@gbsimon87
Nov 13 2018 21:36
I use docker but all I really know is docker ps command to check the containers
Pagnito
@Pagnito
Nov 13 2018 21:37
@bradtaniguchi lol yea i just found a guy on that too >.<
jim kwik
Brad
@bradtaniguchi
Nov 13 2018 21:38
Wha never heard of him, or what your refering too haha. I thought I was saying something original :(
Pagnito
@Pagnito
Nov 13 2018 21:38
he teaches on how to turn ur brain into a super learning brain, and use techniques to remember close to 100% of the things you read or watch
lmao
Brad
@bradtaniguchi
Nov 13 2018 21:38
Eh I don't believe in that sorta stuff. Everyone learns differently. (I can't memorize anything for my life)
Pagnito
@Pagnito
Nov 13 2018 21:38
he has a course but i just watched his webinar to get the gist of it
well there is a physiological fact tho with everyone
and its emotion + new learninging = permanant memory
i think thats the biggest takewawy from his course
Brad
@bradtaniguchi
Nov 13 2018 21:40
I don't read or watch much of anything. I usually do and learn thru failure
Pagnito
@Pagnito
Nov 13 2018 21:40
thats y i transform all my course projects into something i like, instead of going step by step
Brad
@bradtaniguchi
Nov 13 2018 21:40
but that's my way hehe
Pagnito
@Pagnito
Nov 13 2018 21:40
haha
de wey
Brad
@bradtaniguchi
Nov 13 2018 21:43
I should take back not reading anything, I read a lot, but I don't learn much thru reading, only get some context as to whats out there
Pagnito
@Pagnito
Nov 13 2018 21:43
i feel u, reading sometimes can be a pain
sometimes i catch myself skipping too much , and im like "fccckkk, gota go back a paragraph and read the fckn thing"
Jason Luboff
@JLuboff
Nov 13 2018 21:44
I'm definitely more of a hands on learner but force myself to read lol
Brad
@bradtaniguchi
Nov 13 2018 21:44
Like I learned docker by using it, I didn't learn much by reading the docs. Only once I ran into issues and needed specific documentation the docs helped alot
Pagnito
@Pagnito
Nov 13 2018 21:48
yea i think thats the best way to learn
Jason Luboff
@JLuboff
Nov 13 2018 21:49
Gah...need to turn this function from a bunch of nested Promises to use async/await
Pagnito
@Pagnito
Nov 13 2018 21:49
oof
Brad
@bradtaniguchi
Nov 13 2018 21:50
@JLuboff vscode has a feature todo that for you automatically :D
Jason Luboff
@JLuboff
Nov 13 2018 21:50
Oh and it has an if/else if/else...which @bradtaniguchi loves :smile:
@bradtaniguchi Fancy
But.. I'd still rather do it myself I think
Brad
@bradtaniguchi
Nov 13 2018 21:51
gotta refactor that terrible if/else/if
Jason Luboff
@JLuboff
Nov 13 2018 21:52
Debate is whether I refactor all my queries to use async/await instead of promises as well... hmmm
@bradtaniguchi Ya I will...
Brad
@bradtaniguchi
Nov 13 2018 21:53
"It's not enough for code to work" - uncle bob
Jason Luboff
@JLuboff
Nov 13 2018 21:53
Uncle Bob don't know shit!
Brad
@bradtaniguchi
Nov 13 2018 21:53
"Do your best, to not write legacy" - me
Jason Luboff
@JLuboff
Nov 13 2018 21:54
Me don't know shit!
Brad
@bradtaniguchi
Nov 13 2018 21:54
and idk if I know anything, but I spent a good portion of my life fixing that crap XD
and when I say good portion, I mean like work time haha
Jason Luboff
@JLuboff
Nov 13 2018 21:55
lol
I might as well refactor at least my utilities.. not sure about my queries..It won't really make a difference. Making quite a few changes to my app so.. meh
Simon Cordova
@gbsimon87
Nov 13 2018 21:57
whats the promise to async await feature in vs code?
Joshua Arnett
@josha5
Nov 13 2018 21:59
Anyone know how to use local images in react? I can't import it since I'm grabbing the relative link from the database
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:00
What i don't understand is everywhere you apply for job they ask for wordpress and php
how these two related to each other
Brad
@bradtaniguchi
Nov 13 2018 22:00
I have never used it tho, since we started the project using only async/await
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:00
and is it worth learning wordpress?
Brad
@bradtaniguchi
Nov 13 2018 22:00
@Lia-Sue-Kim wordpress uses php AFAIK
yes, if you want to be a wordpress developer
Jason Luboff
@JLuboff
Nov 13 2018 22:00
Ya... Wordpress is based on PHP (or however you want to word it)
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:01
Wordpress developer?
Jason Luboff
@JLuboff
Nov 13 2018 22:01
@bradtaniguchi Not converting old projects with promises to async/await?
Brad
@bradtaniguchi
Nov 13 2018 22:01
@JLuboff hu?
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:01
what else do I need to become a wordpress developer
Brad
@bradtaniguchi
Nov 13 2018 22:01
@Lia-Sue-Kim Have you looked into it?
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:01
beside wordpress itslef
watching what can it do
Jason Luboff
@JLuboff
Nov 13 2018 22:02
@bradtaniguchi You said you haven't used the converter since your new project is being built solely with async/await...so just curious about updating old projects
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:02
but from other website that powered by wordpress I can see that it's functionality is better than html and css
Jason Luboff
@JLuboff
Nov 13 2018 22:02
It still uses HTML/CSS..
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:03
so you can use html and css?
Brad
@bradtaniguchi
Nov 13 2018 22:03
@JLuboff Ahhhh, yea the old projects COULD use that feature, but I have no control over those anymore. (i'd do a hell of a lot more than fix async await haha)
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:03
can I install it from my cpanel
Brad
@bradtaniguchi
Nov 13 2018 22:03
@Lia-Sue-Kim I recommend looking into these rather than asking here right now. Idk if anyone here has experience with wordpress
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:03
Okay
just tell me one thing @bradtaniguchi
what a wordpress developer use as web languagess?
Jason Luboff
@JLuboff
Nov 13 2018 22:04
@bradtaniguchi Ah. Think its worth while to refactor my promise based queries into async/await? I'm using async/await from the routes that call most of the queries...but seeing as how both are technically promises not sure if its worth while to go through the effort considering how many there are lol
Wordpress = HTML/CSS/PHP
atleast thats my understanding
Brad
@bradtaniguchi
Nov 13 2018 22:05
@Lia-Sue-Kim you know anything you can answer with a quick google search isn't exactly something to ask here, since were going to do the exact thing: https://www.google.com/search?client=firefox-b-1-ab&q=what+a+wordpress+developer+use+as+web+languagess
@JLuboff I wouldn't if you have promises setup and working for everything there really isn't any gain. Its all syntactical sugar
Jason Luboff
@JLuboff
Nov 13 2018 22:06
:thumbsup:
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 13 2018 22:06
Okay thank you
Jason Luboff
@JLuboff
Nov 13 2018 22:06
Maybe if I get bored hah
Simon Cordova
@gbsimon87
Nov 13 2018 22:06
@bradtaniguchi thans
thanks**
Jason Luboff
@JLuboff
Nov 13 2018 22:12
Ah...perfect case to turn this promise into async/await.. need to call a different query based on a parameter...so that would get ugly fast..versus async/await call which will be cleaner
Brad
@bradtaniguchi
Nov 13 2018 22:19
Yes, time for a refactor :D
Jason Luboff
@JLuboff
Nov 13 2018 22:20
Yup
Simon Cordova
@gbsimon87
Nov 13 2018 22:25
Boys I'm out - good night all :)
Jason Luboff
@JLuboff
Nov 13 2018 22:25
See ys
ya*
Christopher McCormack
@cmccormack
Nov 13 2018 22:32
@gbsimon87 see ya
I'm out for a bit too see you all later
Jason Luboff
@JLuboff
Nov 13 2018 22:33
Whhat?
its only 3:30 there!
Christopher McCormack
@cmccormack
Nov 13 2018 22:33
tired man too many hours past few days
gonna go take a nap haha
Jason Luboff
@JLuboff
Nov 13 2018 22:33
Man..I hate naps.. I always feel like shit after lol
Christopher McCormack
@cmccormack
Nov 13 2018 22:33
me too but I have nothing left in me
Jason Luboff
@JLuboff
Nov 13 2018 22:34
Fair enough. Enjoy
Christopher McCormack
@cmccormack
Nov 13 2018 22:34
thanks
Brad
@bradtaniguchi
Nov 13 2018 22:36
pilots take 45 min powernaps, including the time it takes to fall asleep and wake up
Jason Luboff
@JLuboff
Nov 13 2018 22:37
Look over here guys, we got a pilot expert!
Brad
@bradtaniguchi
Nov 13 2018 22:39
any longer and you feel like crap, no matter how nice it feels to take 2 hours naps dont haha
Jason Luboff
@JLuboff
Nov 13 2018 22:40
meh feel like crap regardless of the time hah
Oh..good..got an error on the front end..but no error on the backend
Jason Luboff
@JLuboff
Nov 13 2018 22:50
Ah fixed.. stupid promise
Jason Luboff
@JLuboff
Nov 13 2018 23:04
Alright...there's one requested feature done..
Henry
@GitHub-Henry
Nov 13 2018 23:22
naps are only supposed to be 20 min long, after that you go into deeper sleep, so if you wake after 20 minutes of sleep, you'd be getting up while you're in a deep sleep cycle, hence the crappy feeling when napping.
Jason Luboff
@JLuboff
Nov 13 2018 23:26
Thats true