These are chat archives for FreeCodeCamp/HelpJavaScript

14th
Nov 2018
Brad
@bradtaniguchi
Nov 14 2018 00:31
Anyone know how I can use logs locally? Like using some GUI or gain some insights or something outside of manually going overthem with some text editor?
Christopher McCormack
@cmccormack
Nov 14 2018 01:37
@bradtaniguchi we use Splunk at work but not sure if there is a free version
it's pretty bad ass for visualizations and such
Brad
@bradtaniguchi
Nov 14 2018 01:42
Ill have to look into it more, I see splunk has a free version @cmccormack. What does this software do exactly? I've never had any experience with any logging software, but I have my app setup to write logs haha
Christopher McCormack
@cmccormack
Nov 14 2018 01:45
Only experience I had was pulling some kpi data every hour and pushing it to a splunk server, which gathered the data and parsed on certain elements in the logs. Makes it categorizable and searchable.
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 14 2018 01:46
When you learn a programming language.You will realize that HTML and CSS doesn't have as much brain as a pro language has
for example it can calculate or
conditions decide but still limited you have to specify
Brad
@bradtaniguchi
Nov 14 2018 01:48
@Lia-Sue-Kim CSS and HTML aren't programming languages. They aren't Turing complete (hell they aren't even close). They are just standards
Christopher McCormack
@cmccormack
Nov 14 2018 01:49
@Lia-Sue-Kim yeah CSS and HTML are structures with which we build but for adding logic we use a programming language.
There was a time before we even had a programming language for the browser, those were dark days
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 14 2018 01:51
playing with programming language is really cool
Like to put content as HTML does?
Christopher McCormack
@cmccormack
Nov 14 2018 01:52
most language have a library for displaying content, and tools for structuring it. I believe Java still uses Swing, Python has Tkinter an other tools, I'm sure C# has some great stuff
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 14 2018 01:54
Ohh so that's how languages that work with compiler can be used for the web
Today first time I tried wordpress and when you create something with programming
it is much easier to understand
as wordpress uses php
Brad
@bradtaniguchi
Nov 14 2018 01:56
@Lia-Sue-Kim Nope
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 14 2018 01:56
It doesn't?
Brad
@bradtaniguchi
Nov 14 2018 01:57
Swing, tkinter are for desktop applications. Like you technically can build a web browser (like firefox or chrome) with those utils
but they still display HTML CSS and use javascript.
Lia-Sue-Kim
@Lia-Sue-Kim
Nov 14 2018 01:57
Ohh okay
thank you
Christopher McCormack
@cmccormack
Nov 14 2018 02:09
yeah sorry didn't mean for web
Brad
@bradtaniguchi
Nov 14 2018 06:00
hot darn, 40 merge changes when merging with master fffffffffuuuuu
alpox
@alpox
Nov 14 2018 07:48
@bradtaniguchi Fun times
Simon Cordova
@gbsimon87
Nov 14 2018 16:00
Hey all
Jason Luboff
@JLuboff
Nov 14 2018 16:14
Morning
Simon Cordova
@gbsimon87
Nov 14 2018 16:20
Another not so bad day for me, I like it like that
I like it when my code works, who knows why it works but who cares, it works man
Happy camper :)
How you doing ? Joey voice lol
Jason Luboff
@JLuboff
Nov 14 2018 16:25
I'm doing. Going to see if I can get my context working properly. I was able to get it passed to my class component that I need it in..but still need to get it into state from there
Christopher McCormack
@cmccormack
Nov 14 2018 16:34
morning
Jason Luboff
@JLuboff
Nov 14 2018 16:34
Hey
Simon Cordova
@gbsimon87
Nov 14 2018 16:39
heya
Get the parts you need into state with a consumer
Nate Mallison
@NJM8
Nov 14 2018 16:43
it all sounds so complex, reading to your react conversations, I'm still trying to figure out why haha
Jason Luboff
@JLuboff
Nov 14 2018 16:45
It is complex...stupidly so :)
Christopher McCormack
@cmccormack
Nov 14 2018 16:46
It's less complex than Redux and that's very popular regardless of framework/library
You have a Provider and a Consumer. You wrap whatever components may need access to state/methods of your context with the Provider. You access those state/methods as part of a child function to the Consumer
Jason Luboff
@JLuboff
Nov 14 2018 16:50

Ok..so here's how I've thought to pass my Consumer data to my State..

class MyClass extends React.Component {
...
...
  consumeStepsArray = (inputArray) => {
    this.setState({
      inputArray,
    })
  }

  render() {

    return (
      <>
      <StepsArray.Consumer>
        {( inputArray ) => {
          this.consumeStepsArray(inputArray);
        }
      }
      </StepsArray.Consumer>
...
...

So..that does pass it to the function properly...but than I'm getting a Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Simon Cordova
@gbsimon87
Nov 14 2018 16:50
yeah, you can't cause side effects
let me send you a diagram hold on
Christopher McCormack
@cmccormack
Nov 14 2018 16:52
@JLuboff don't call setState in those methods
Nate Mallison
@NJM8
Nov 14 2018 16:52
So, let me get this straight, Provider and Consumer is so that you can use functions and state from your store in your components?
Christopher McCormack
@cmccormack
Nov 14 2018 16:52
if you only want to do it on mount do it in componentDidMount
@NJM8 yeah without having to pass them down from parent to child to child to child that needs it
Jason Luboff
@JLuboff
Nov 14 2018 16:53
@cmccormack That is what I want! But... can I have JSX in componentDidMount??
Simon Cordova
@gbsimon87
Nov 14 2018 16:53
there's no need to really
Christopher McCormack
@cmccormack
Nov 14 2018 16:53
@JLuboff what is what you want?
Nate Mallison
@NJM8
Nov 14 2018 16:53
You can't just, pass them into the component that uses them?
Christopher McCormack
@cmccormack
Nov 14 2018 16:53
@NJM8 sure you can
Jason Luboff
@JLuboff
Nov 14 2018 16:53
@cmccormack To get the value from the Consumer and put it in my state before anything else
Simon Cordova
@gbsimon87
Nov 14 2018 16:53
in CDM get your data and save it to state, then call the data from the render method
Christopher McCormack
@cmccormack
Nov 14 2018 16:53
but what if your component is 5 levels from your parent that has the state
Simon Cordova
@gbsimon87
Nov 14 2018 16:54
use an && condition to ensure the data exists
Nate Mallison
@NJM8
Nov 14 2018 16:54
then you just, pass it into that component
Christopher McCormack
@cmccormack
Nov 14 2018 16:54
with magic?
Simon Cordova
@gbsimon87
Nov 14 2018 16:54
image.png
Christopher McCormack
@cmccormack
Nov 14 2018 16:54
components are being imported from different files
they only care about what they receive as props from their parent
Nate Mallison
@NJM8
Nov 14 2018 16:55
if you are using a client side store for data storage there is no reason to pass methods and state between components, they should all interact with the store
Christopher McCormack
@cmccormack
Nov 14 2018 16:55
React is a one-way flow, with callbacks used to update parents
Yeah, that's what Context is doing...
Simon Cordova
@gbsimon87
Nov 14 2018 16:55
In the 'commit phase' you can run side effects (get data from a server for example), but if you do it in CDU hook you'll probably need shouldComponentUpdate condition to stop it from re-rendering (hence the infinite loop)
Christopher McCormack
@cmccormack
Nov 14 2018 16:56
but you have to set it up somehow, Provider Consumer model is how context works
Simon Cordova
@gbsimon87
Nov 14 2018 16:56
I hope that makes sense it was somewhat vague
It's basically how Redux works as well
concept wise at least
Christopher McCormack
@cmccormack
Nov 14 2018 16:57
yeah Redux just uses HoCs instead right?
Jason Luboff
@JLuboff
Nov 14 2018 16:57
@cmccormack To get the value from the Consumer and put it in my state before anything else
Christopher McCormack
@cmccormack
Nov 14 2018 16:57
@JLuboff why are you putting props in state?
can you just use your props?
Jason Luboff
@JLuboff
Nov 14 2018 16:57
Its the same thing I've been working on for the last few days..
Nate Mallison
@NJM8
Nov 14 2018 16:57
Hmmm, maybe I'm not understanding. But if parent cmp A has some state that child cmp B 5 levels down needs, you shouldn't be passing that through all the components in-between, just save it to the store from the parent and access it from the store in the child.
Christopher McCormack
@cmccormack
Nov 14 2018 16:58
@NJM8 yeah that's what the context api is for
you're using the term store but what store are you referring to?
Jason Luboff
@JLuboff
Nov 14 2018 16:58
I'm passing an array from my original class component (App) to another class component..
Simon Cordova
@gbsimon87
Nov 14 2018 16:58
@cmccormack Indeed - so you use a 'connect' HOC and wrap your whole component in it, and in there you can pass two other functions...
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';

/// my component code and helper functions


function mapStateToProps(state) {
  return {
    isLoggedIn: state.user.isLoggedIn,
    clientsList: state.clients.clientsList
  };
}

const mapDispatchToProps = {
  getAllClients
}

export default connect(mapStateToProps, mapDispatchToProps)(EditClient)
As a redux example...
Nate Mallison
@NJM8
Nov 14 2018 16:58
Vue uses Vuex, think of it like a client side database, design is based on Flux
Simon Cordova
@gbsimon87
Nov 14 2018 16:59
It's a similar concept to context
Christopher McCormack
@cmccormack
Nov 14 2018 16:59
@JLuboff does that child component need to have it in state? state should be local to that component or its children but if you're already receiving props you can just use props
Nate Mallison
@NJM8
Nov 14 2018 17:00
But it seems way easier haha.
Simon Cordova
@gbsimon87
Nov 14 2018 17:00
@JLuboff when you say to another class component, is this a child, parent, or sibling, what is it?
Aren't all the flux systems pretty much the same or am I mistaken?
Jason Luboff
@JLuboff
Nov 14 2018 17:00
@cmccormack I need it somewhere in my class component so that it can be used by functions inside that class component. The whole idea is breaking my state apart into multiple class components to keep things cleaner
@gbsimon87 It would be a child
Simon Cordova
@gbsimon87
Nov 14 2018 17:01
@JLuboff do you need multiple class components?
I try to keep as many stateless components as I possibly can to have fewer 'sources of truth'
Jason Luboff
@JLuboff
Nov 14 2018 17:01
So it goes (class component) App -> (non-class component) Content -> (class component) HazardControlClass
Christopher McCormack
@cmccormack
Nov 14 2018 17:02
@JLuboff cleaner how? Are you taking a piece of your data and then changing it for a subset of components? If not, I would say just use props
Simon Cordova
@gbsimon87
Nov 14 2018 17:02
If it's a child, you can pass all props with {...this.props} when rendering the element...
render() {
    return (
      <HazardControlClass {...this.props} />
    )
  }
Jason Luboff
@JLuboff
Nov 14 2018 17:03
@cmccormack Cleaner in that I don't have a huge single class component.. and seperate the work based on the step of the job
Nate Mallison
@NJM8
Nov 14 2018 17:04
import { mapState, mapGetters, mapActions, mapMutations } from "vuex"
export default {
  name: "Component",
  data() {
    return {};
  },
  computed: {
    ...mapState("myStoreState"),
    ...mapGetters("myStoreGetter")
  },
  methods: {
    ...mapActions("myStoreAction"),
    ...mapMutations("myStoreMutation"),
    getStoreStuff() {
      this.myStoreState;
      this.myStoreGetter;
      this.myStoreAction();
      this.myStoreMutation();
    }
  }
}
Simon Cordova
@gbsimon87
Nov 14 2018 17:04
Try to minimize the stateful components though, keep the data one way
Nate Mallison
@NJM8
Nov 14 2018 17:04
That's it in Vue, access to any piece of data in your store and manipulators in any component.
Simon Cordova
@gbsimon87
Nov 14 2018 17:04
@NJM8 where does the store come from?
is it Vue's local store/state?
Nate Mallison
@NJM8
Nov 14 2018 17:04
yes
Mohammed Boudad
@matrixersp
Nov 14 2018 17:05
Hey everyone! What's one of the best ways to implement a database which talks to an offline desktop app created with Electron & React? Do I need a RESTful API for that?
Jason Luboff
@JLuboff
Nov 14 2018 17:05
Right now my original stateful component is 400+ lines... and this will grow (this is including associated functions, state, etc). I'm trying to keep it from getting so large.. it gets unmanageable
Christopher McCormack
@cmccormack
Nov 14 2018 17:05
@JLuboff you can break data up and still maintain it as a prop without making it state. State should be used to determine if a new render is required mainly
Simon Cordova
@gbsimon87
Nov 14 2018 17:05
@JLuboff I'd probably stop take out the components now before it's a nightmare
Nate Mallison
@NJM8
Nov 14 2018 17:05
rest api not going to get you very far offline haha
Jason Luboff
@JLuboff
Nov 14 2018 17:05
the components are out..
Simon Cordova
@gbsimon87
Nov 14 2018 17:06
And still 400 lines?
Don't know the project but that's quite a bit man
Nate Mallison
@NJM8
Nov 14 2018 17:06
oh don't be nervous, my biggest store module is like 1400 lines, just add em in!
Jason Luboff
@JLuboff
Nov 14 2018 17:06
Yes....due to my functions mainly
Simon Cordova
@gbsimon87
Nov 14 2018 17:06
@matrixersp no idea
Damn, I'd go crazy, remember you can also import/export functions to use only when needed
Mohammed Boudad
@matrixersp
Nov 14 2018 17:07
@NJM8 Thanks! I think I don't need a REST API, but I have no idea how to implement it, I'm kinda new to React
Nate Mallison
@NJM8
Nov 14 2018 17:08
What is it you are making?
@JLuboff let me know if you need further help and whatnot
Mohammed Boudad
@matrixersp
Nov 14 2018 17:09
A management app for a private school, I think SQLite is fine
Jason Luboff
@JLuboff
Nov 14 2018 17:09
@gbsimon87 So you're saying I can move my functions to a seperate file, and they'll still know how to setState within to that stateful component?
Christopher McCormack
@cmccormack
Nov 14 2018 17:10
@JLuboff that's what I've been trying to tell ya! Put all that stuff into your context provider
Jason Luboff
@JLuboff
Nov 14 2018 17:11
@cmccormack ....thats what I've been trying to do... I only need one thing to pass through...but I need it in my state or as a variable or something so that my functions within that stateful component can use it!
Mohammed Boudad
@matrixersp
Nov 14 2018 17:12
@gbsimon87 Thank you! I need to learn how RxDB work first
Jason Luboff
@JLuboff
Nov 14 2018 17:12
Man...I still have the open
Christopher McCormack
@cmccormack
Nov 14 2018 17:12
Then in my index.js I have
ReactDOM.render(
  <AppProvider query={query}>
    <App/>
  </AppProvider>,
  document.getElementById("root")
)
query is the window location query parameters
then deeper like in my HeaderContainer I access from the Provider:
  render() {

    return (
      <AppConsumer>
        {
          (app) => <HeaderForm {...this.props} {...app} />
        }
      </AppConsumer>
    )
  }
man that's a pretty spaceship
Simon Cordova
@gbsimon87
Nov 14 2018 17:14

"Man... I still have that open" - lolol

You shouldn't have any functions in that file that you aren't using
Create a file for example elsewhere say called helperFunctions.js, in there create your functions such as...

export const sum = (a,b) => a + b;

Then if you need the fn in your project, do an import from it's folder location

Jason Luboff
@JLuboff
Nov 14 2018 17:14
@gbsimon87 I only have functions that I'm using in it
Simon Cordova
@gbsimon87
Nov 14 2018 17:15
But do the definitions need to live there?
Jason Luboff
@JLuboff
Nov 14 2018 17:15
As long as this.setState would work still when imported, than no
Simon Cordova
@gbsimon87
Nov 14 2018 17:16

if I want to use sum I don't necessarily need to create it in that file, I can import it and call it somewhere in my code
sum(firstNumber, secondNumber)

Just to keep it leaner and easier to digest

this.setState will work anywhere as long as its a stateful component
well, 'anywhere' - there's places you dont want to do it at as I mentioned earlier
Jason Luboff
@JLuboff
Nov 14 2018 17:17

Ok.. so lets say I have this function

  nextHazardButton = event => {
    const increment = this.state.increment + 1;
    const hazardStepsComplete = this.state.inputArray.length === increment;
    const controlSave = hazardStepsComplete ? "Complete JSA" : "Next Step";
    const hazards = [...this.state.hazards].map(hazard => {
      hazard.checked = false;
      return hazard;
    });

    this.setState({
      increment,
      hazards,
      hazardStepsComplete,
      controlSave,
      label: `Select category that applies to Step ${increment}: ${
        this.state.inputArray[increment - 1]
      }`
    });
  };

It both access state and sets it. So if I moved it out into a seperate file. And than imported it into my stateful component file. Would it work?

Simon Cordova
@gbsimon87
Nov 14 2018 17:19

First, in the file where you define it, you need to use the export keyword to allow it to be used elsewhere...

export const nextHazardButton = event => {...}

Then in the file you want to use it...

import { nextHazardButton } from '../../whateverTheLocationIs'
In the import, you need to use the { } because it's a named import (when you exported it you did not use the default keyword)
Let me know if that makes sense...
Jason Luboff
@JLuboff
Nov 14 2018 17:21
Ya I get all that
And I've done that already with components. But I just want to ensure that this.state... and this.setState({... will still know that this is for the stateful componjent
Simon Cordova
@gbsimon87
Nov 14 2018 17:22
if you use an arrow function it'll keep the 'this' context bound, you should be totally fine
Jason Luboff
@JLuboff
Nov 14 2018 17:22
Alright...I'll give it a try
Simon Cordova
@gbsimon87
Nov 14 2018 17:22
Bound to where you call it from that is
@cmccormack could you confirm what I've written above?
Jason Luboff
@JLuboff
Nov 14 2018 17:23
So I import it, and than instead of using <Content nextButton={this.nextHazardButton} /> I would just do <Content nextButton={nextHazardButton} />?
Christopher McCormack
@cmccormack
Nov 14 2018 17:25
I think you need to modify your method if you want to abstract it
you need to add arguments for the values you would get from the class, like state and setState
Jason Luboff
@JLuboff
Nov 14 2018 17:26
so.. <Content nextButton={nextHazardButton(arg1, arg2...} />...?
Simon Cordova
@gbsimon87
Nov 14 2018 17:27
@JLuboff yes without the this.
You only use this. if it's an instance of that class
Christopher McCormack
@cmccormack
Nov 14 2018 17:27
you could also abstract the setState possibly so you just pass an object to it
no you need that to be a function
unless nextHazardButton is generating a component that is then rendered using nextButton I guess
Jason Luboff
@JLuboff
Nov 14 2018 17:28
Man...this shit is getting more confusing by the minute..
Simon Cordova
@gbsimon87
Nov 14 2018 17:28
lolol
It really clicks eventually, take it step by step
Jason Luboff
@JLuboff
Nov 14 2018 17:29
Fuck it. I'm just going to have a single class component and have it be huge. At least it works than
Christopher McCormack
@cmccormack
Nov 14 2018 17:29
I personally would NOT move that function out as it's so dependent on state
but I might create helper methods in the class instead and then I could pass that to an abstracted version of that method
@JLuboff (Or put it in your context...)
Simon Cordova
@gbsimon87
Nov 14 2018 17:31
Looking at the fn I agree with @cmccormack, it's directly related, so even semantically makes sense to keep in there
My earlier comments about extracting were in general, I just feel 400 lines is quite a bit for a component
'single class component and have it be huge' - lol
I feel you man, but don't get used to that, I had to fully restart my stats app because it got so confusing due to the fact I did that
Christopher McCormack
@cmccormack
Nov 14 2018 17:32
you may be able to break apart that function into abstracted methods and use those instead, especially if some of that work is very similar across methods
your App component probably will be big, that's where your specialized code usually sits. It's the other components that you can keep small and abstracted, especially if they are well written
Of course you can split that up as needed
Jason Luboff
@JLuboff
Nov 14 2018 17:33
I have tried context and its not working out. So...I'll go back to single class component and work it out from there.
Christopher McCormack
@cmccormack
Nov 14 2018 17:34
like if the same part of your data is only used by a child three levels deep and it's children, then you can move a lot of those helper functions down there possibly
Simon Cordova
@gbsimon87
Nov 14 2018 17:34
@JLuboff I don't know how private the data is, but if it's not and you've got vs code i'll code share with you to help out if you want
Christopher McCormack
@cmccormack
Nov 14 2018 17:34
@JLuboff the way I saw you using it you had your Provider in your App, did you ever try it the other way, similar to my nightlife app?
Jason Luboff
@JLuboff
Nov 14 2018 17:35
@cmccormack No.. but I think I'm just getting too frustrated with the idea behind context right now. Think its best to come back to it a bit later once I understand more of React
@gbsimon87 Thanks.. its business related albeit minimal business information. But..I don't use vs code :P
Christopher McCormack
@cmccormack
Nov 14 2018 17:36
@JLuboff if you build your app alright it may not be difficult to move it to context later
Jason Luboff
@JLuboff
Nov 14 2018 17:36
@cmccormack Ya.. thats my thought lol
Simon Cordova
@gbsimon87
Nov 14 2018 17:37
@JLuboff If you don't use VS Code I don't know if I can continue this online friendship man lolololol
Jason Luboff
@JLuboff
Nov 14 2018 17:37
haha
Simon Cordova
@gbsimon87
Nov 14 2018 17:38
Don't overcomplicate yourself man, remember me three months ago ripping my hair out because of React and Redux? It'll click
Jason Luboff
@JLuboff
Nov 14 2018 17:38
Ya...pretty sure I've lost half my hair
Simon Cordova
@gbsimon87
Nov 14 2018 17:38
Try to keep the data ONE way, and have as little stateful components as you can so that the data is being manipulated only by those components that need to manipulate it, the stateless children will re-render anyway
If you do that, you'll be able to integrate Context Redux whatever later with much more ease
The whole concept is taking away the privilege from many parts of the app to control your data
Christopher McCormack
@cmccormack
Nov 14 2018 17:40
you shouldn't see much state in lower components, usually it's just state to update the appearance or functionality only of that component or its children. You should not have state at lower levels that's dependent on higher level state, unless it's only on mount maybe
Jason Luboff
@JLuboff
Nov 14 2018 17:41
Yes yes
Christopher McCormack
@cmccormack
Nov 14 2018 17:41
haha
so say you have data in App, it's a large object with lots of arrays or whatever
you have children that depend on one array each
there isn't a good reason to add state to those children when they could simply reference props
however,
say you pulled your header and footer information from a CDN for whatever reason
Aditya
@ezioda004
Nov 14 2018 17:42
@gbsimon87 :point_up: November 14, 2018 10:52 PM
I dont think arrow functions would work or rather keep the "this" binding when exported as a class field, since fields are kinda similar to properties (albeit a bit different calls underneath).
Simon Cordova
@gbsimon87
Nov 14 2018 17:43
Hmm, I felt they did, I have a number of axios helper functions which I import and console logging 'this' kept giving me the class component I called it from
Going to recheck it thx for your point
Christopher McCormack
@cmccormack
Nov 14 2018 17:43
you can pull that data and store it as state in App if you wish, then pass data.header to Header, data.footer to Footer, and they can store that information as state and modify it depending on the requirements of your app if you wish. Only Header will need the data at that point and so state should be managed there
Aditya
@ezioda004
Nov 14 2018 17:44
If you're calling it inside a method then yes it'd work but as a class field I dont think so
Jason Luboff
@JLuboff
Nov 14 2018 17:44
Ok
Aditya
@ezioda004
Nov 14 2018 17:45
@gbsimon87
const someFunc = _ => console.log(this);
class Test {
  a = someFunc;
}
const x = new Test();
x.a(); // Window
Aditya
@ezioda004
Nov 14 2018 17:52
@cmccormack I wonder if the modularized pattern would emerge in React as we slowly move away from Class syntax, like in Redux you separate action and reducers and stuff
Christopher McCormack
@cmccormack
Nov 14 2018 17:54
@ezioda004 like hooks?
feels like that is the future
Aditya
@ezioda004
Nov 14 2018 17:54
Yeah, like hooks
You can use more composition like in Redux
Christopher McCormack
@cmccormack
Nov 14 2018 17:55
just playing with it myself it feels powerful and simple
Simon Cordova
@gbsimon87
Nov 14 2018 18:41
aaaaaaaand the UK Home Office rejected my visa sponsorship
Jason Luboff
@JLuboff
Nov 14 2018 18:41
Oh man!
Simon Cordova
@gbsimon87
Nov 14 2018 18:41
Don't have 5 years experience in React, which came out in 2015
The owner and lawyer were like are these guys fuckheads or just can't count
Jason Luboff
@JLuboff
Nov 14 2018 18:41
So..what now?
Simon Cordova
@gbsimon87
Nov 14 2018 18:42
We are appealing with the lawyer involved this time
When the owner called me I thought I was getting fired, he was likeI'm going to cut straight to the point not sugar coat it
I was just like oh man here we go
But no, he proceeded to complimenting my improvement and asked if I was ok to continue on as a contractor
Oh man how am I going to tell the lady this right now oh my god
Jason Luboff
@JLuboff
Nov 14 2018 18:44
Man oh man...that sounds like a shitty scenario
Simon Cordova
@gbsimon87
Nov 14 2018 18:45
Honestly man, not even stressing - Gone through so much adversity this past year that I just learned how to use it to make me stronger
fuck it, head up, next step, I keep going
Jason Luboff
@JLuboff
Nov 14 2018 18:46
There you go
Simon Cordova
@gbsimon87
Nov 14 2018 18:47
Supposed to propose in France this Feb fuck man
Been paying for an apt haven't stepped foot in for 3 months
Jason Luboff
@JLuboff
Nov 14 2018 18:48
Ouch
Simon Cordova
@gbsimon87
Nov 14 2018 18:48
She's also from a Great Lake city why'd she have to be American fml
Couldn't her family have just gone 2 hours north
lol
Made things so much easier
From different countries living in a third country, the universe doesn't seem to like that
Jason Luboff
@JLuboff
Nov 14 2018 18:50
I'm sure you'll get it figured out
Simon Cordova
@gbsimon87
Nov 14 2018 18:50
I'm sure I will too, at least we got that vacay in Chile next month
I honestly don't know how to tell her, oh man that's the worst part
Jason Luboff
@JLuboff
Nov 14 2018 18:55
Well... its not over yet right?
Simon Cordova
@gbsimon87
Nov 14 2018 18:57
No no, it wont be - worse comes to worse I'll go to the UK and stay with her for some time - its a setback no doubt but I'll fight through it
So much for my pretty good day lololol its all good
@JLuboff did you get a chance to look at those tuts I sent you?
Jason Luboff
@JLuboff
Nov 14 2018 19:00
No, not yet
Simon Cordova
@gbsimon87
Nov 14 2018 19:01

They'll really clear you up man when it comes to React concepts

How's your work going along now?

Jason Luboff
@JLuboff
Nov 14 2018 19:01
Its going.. I just went back to using a single stateful component.
Simon Cordova
@gbsimon87
Nov 14 2018 19:02
Do you have a lot of JSX in there?
Jason Luboff
@JLuboff
Nov 14 2018 19:02
Not too much in that component, no. All the children are broken out
Simon Cordova
@gbsimon87
Nov 14 2018 19:04
Nice nice that's good stuff
JSX is usually an easy place to extract out common elements
In the JSX being returned from the render lifecycle that is
Jason Luboff
@JLuboff
Nov 14 2018 19:09
Ya its pretty easy to break out...but can still get a little dicey following comp[onents
Simon Cordova
@gbsimon87
Nov 14 2018 19:13
Definitely, your folder structure is very key as well to make sense
For example, say a sports app, I may have a folder for team related things, another for user related things, another for navbar related things, etc
keep like things together if it makes sense, at least it helps me, don't know if it'll help you per say you know
Brad
@bradtaniguchi
Nov 14 2018 19:22
I was reading about scalable angular folder structures and they split up their components into a "core" module and "modules" where the "modules" are the actual "pages" of the app, and the core has components used in multiple pages accross the app. Forgetting about the idea of modules in React, the same idea still seems to make sense. I used to make a lot of my component/modules in angular "flat" where views and common modules were next to each other but things got kinda messy
Jason Luboff
@JLuboff
Nov 14 2018 19:31
Ya right now I have all my components in a single folder but plan is to break those up when I get a better idea of how I'm using things
Shit....I always forget...what type of event listener should be placed on a select element?
Jason Luboff
@JLuboff
Nov 14 2018 19:36
onChange?
Brad
@bradtaniguchi
Nov 14 2018 19:37
If this was angular id say onChange :{
Jason Luboff
@JLuboff
Nov 14 2018 19:37
It uses standard listeners
and uses camelCase
Jason Luboff
@JLuboff
Nov 14 2018 19:45
Meh...switching projects lol
Jason Luboff
@JLuboff
Nov 14 2018 19:55

I might just be tired...but I can't recall if this would be valid..

const funcToUse = wellOp ? insert.preStartupItemsWellOp() : insert.preStartupItems();

funcToUse(arg1, arg2);

?

Ah.. need to drop the () from the ternary than it should be fine
Jason Luboff
@JLuboff
Nov 14 2018 20:04
Dope. Went from 92 to 49 lines by switching to async/await instead of promise.. and still will get rid of another 15ish lines
Chris
@crokita
Nov 14 2018 20:05
I love async/await
Jason Luboff
@JLuboff
Nov 14 2018 20:05
I'm learning to love it too lol
For most of my cases...makes things much more readable
Chris
@crokita
Nov 14 2018 20:05
mhmm
Simon Cordova
@gbsimon87
Nov 14 2018 21:06
Hey @JLuboff this is regarding the topic about the this instance inside the component
https://www.youtube.com/watch?v=XJzDF9bj368&index=8&list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG
Jason Luboff
@JLuboff
Nov 14 2018 21:32
@gbsimon87 I'll add it to my watch list
Simon Cordova
@gbsimon87
Nov 14 2018 21:34
lol its part of the previous one I sent
Jason Luboff
@JLuboff
Nov 14 2018 21:35
Well thats also on my watch list :)
Simon Cordova
@gbsimon87
Nov 14 2018 21:48
lol, how long is the current watch list?
Jason Luboff
@JLuboff
Nov 14 2018 21:50
Never ending
Simon Cordova
@gbsimon87
Nov 14 2018 21:51
Sounds like you're a man of the night's watch
Jason Luboff
@JLuboff
Nov 14 2018 21:53
Man...fuck that. Those white walkers aint no joke
Simon Cordova
@gbsimon87
Nov 14 2018 22:03
Oh man what a day, definitely hitting a bar tonight lololol
Karma Drukpa
@coderkarma
Nov 14 2018 22:04
@gbsimon87 doing udemy courses on React but now I feel like I am lost.. :crying_cat_face:
Jason Luboff
@JLuboff
Nov 14 2018 22:05
Just drink at home, its cheaper! hah
Simon Cordova
@gbsimon87
Nov 14 2018 22:05
meh I'm always lost haha
Karma Drukpa
@coderkarma
Nov 14 2018 22:05
@gbsimon87 state, context API
Jason Luboff
@JLuboff
Nov 14 2018 22:06
uugghhh...don't start talking about context
Karma Drukpa
@coderkarma
Nov 14 2018 22:06
way over my head now. I feel like i am just typing the code
Simon Cordova
@gbsimon87
Nov 14 2018 22:06

need help with something?

@JLuboff I work from home all day need to switch it up

@coderkarma give some context which part confuses?
Christopher McCormack
@cmccormack
Nov 14 2018 22:09
yay more context conversation
Jason Luboff
@JLuboff
Nov 14 2018 22:09
:angry:
Christopher McCormack
@cmccormack
Nov 14 2018 22:09
I almost never see it and now there's a glut!
Karma Drukpa
@coderkarma
Nov 14 2018 22:11
@gbsimon87 as of now everything. I need to rewatch and do more reading I guess.
class AddContact extends Component {
   state = {
       name: '',
       email: '',
       phone: ''
   }
   onSubmit = (dispatch, e) => {
       e.preventDefault();

       const {name, email, phone} = this.state;

       const newContact = {
            id: uuid(),
            name,
            email, 
            phone 
       }

       dispatch({type: "ADD_CONTACT", payload: newContact})
   }
@gbsimon87 for example , why do we do type in dispatch function
Simon Cordova
@gbsimon87
Nov 14 2018 22:14
Honestly I'd take it back a step and read this https://reactjs.org/docs/context.html
Christopher McCormack
@cmccormack
Nov 14 2018 22:15
dispatch is Redux right?
Simon Cordova
@gbsimon87
Nov 14 2018 22:15
dispatch isn't Context API
Karma Drukpa
@coderkarma
Nov 14 2018 22:15
@gbsimon87 true, I am doing that.
Simon Cordova
@gbsimon87
Nov 14 2018 22:15
man how do you always beat me to it @cmccormack lol
Christopher McCormack
@cmccormack
Nov 14 2018 22:15
haha
Karma Drukpa
@coderkarma
Nov 14 2018 22:15
@gbsimon87 thought this course is for beginner but he seems adding some high level stuff
:crying_cat_face:
Simon Cordova
@gbsimon87
Nov 14 2018 22:16
Which course?
Karma Drukpa
@coderkarma
Nov 14 2018 22:17
React front to back
Simon Cordova
@gbsimon87
Nov 14 2018 22:17
If you're new to React you may want to concentrate on understanding the core concepts before something like Context.
Many apps can do well with just using local state, I personally see using an external store concept more of a scaling and procedural thing.
Just because Context and Redux are monsters themselves really.
Karma Drukpa
@coderkarma
Nov 14 2018 22:23
@gbsimon87 Yes I am new to React. should I read more docs or experiment while reading ?
@gbsimon87 I felt like I was just following instructor codes without much understanding. :cry:
Christopher McCormack
@cmccormack
Nov 14 2018 22:32
@coderkarma everytime you run into something interesting, stop what you're doing, jump onto codesandbox, and try to build it yourself
best way to learn
Simon Cordova
@gbsimon87
Nov 14 2018 22:33

@coderkarma
If you feel you can learn by reading definitely hit the docs first

If not try this...
https://www.youtube.com/watch?v=OxIDLw0M-m0&index=1&list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG

There's a lot of React tutorials out there, but obviously some are better than others
I find the official React docs probably the best source for React questions
Christopher McCormack
@cmccormack
Nov 14 2018 22:35
I've read a lot of the React docs multiple times, they are really good and you'll find you get something new out of it each read
Karma Drukpa
@coderkarma
Nov 14 2018 22:40
@cmccormack @gbsimon87 sure. Thank you.
Christopher McCormack
@cmccormack
Nov 14 2018 22:41
@coderkarma if you have specific questions feel free to ask @JLuboff
Simon Cordova
@gbsimon87
Nov 14 2018 22:41
NO worries if you have questions ask
damn this guy
always beats me
lolololololol
Jason Luboff
@JLuboff
Nov 14 2018 22:41
@cmccormack :angry:
Simon Cordova
@gbsimon87
Nov 14 2018 22:41
lolol
Christopher McCormack
@cmccormack
Nov 14 2018 22:41
I have one of those wall street high speed trading computers that watches your comments go on the wire then beats you to it :)
Simon Cordova
@gbsimon87
Nov 14 2018 22:41
@JLuboff is about to teach you how to create the biggest component you've ever seen
lol
you're like Adrian Wojnarowski eh
Jason Luboff
@JLuboff
Nov 14 2018 22:42
:(
Brad
@bradtaniguchi
Nov 14 2018 22:43
Stupid windows CLI not taking environment variables like linux machines -_-
Christopher McCormack
@cmccormack
Nov 14 2018 22:44
@bradtaniguchi crossenv
is it node?
Brad
@bradtaniguchi
Nov 14 2018 22:44
@cmccormack Yea that's the next step, but gotta cater to the one windows dev :/
Karma Drukpa
@coderkarma
Nov 14 2018 22:45
@gbsimon87 is that tutorial series on React?
Christopher McCormack
@cmccormack
Nov 14 2018 22:45
would crossenv actually be catering to them?
Brad
@bradtaniguchi
Nov 14 2018 22:45
yes, but I haven't had the time to set that up from home, where I have both my windows and linux machines to make sure everything works
in the mean time I just have "win" version of npm scripts
Christopher McCormack
@cmccormack
Nov 14 2018 22:46
I use both depending on the time of day so I always use something like crossenv
I kind of wish process.env wasn't used
an explicit flag for setting the mode would be better
default to prod if you want but add something like -mode=dev or whatever if it's not prod. Webpack does that well
Simon Cordova
@gbsimon87
Nov 14 2018 22:48
@coderkarma yes it is
Jason Luboff
@JLuboff
Nov 14 2018 22:52
Mmm...lovely...the smell of smoke is seeping into the office
Christopher McCormack
@cmccormack
Nov 14 2018 22:53
@JLuboff I know you're getting pretty complacent with all the fires, but I hope you at least checked to make sure your building is not on fire right?
Jason Luboff
@JLuboff
Nov 14 2018 22:54
I have not, but my wife said it smelled at home which is ~7 miles away
Christopher McCormack
@cmccormack
Nov 14 2018 23:01
It's pretty normal to smell fire up here but I live in a forest. Smelling it in the city has to be rough
Jason Luboff
@JLuboff
Nov 14 2018 23:02
It is not enjoyable
Christopher McCormack
@cmccormack
Nov 14 2018 23:04
I bet
burning trees usually smell good :)
Jason Luboff
@JLuboff
Nov 14 2018 23:05
Burning buildings do not :(
Christopher McCormack
@cmccormack
Nov 14 2018 23:06
imagine the health effects, you guys should vacate for a bit
Jason Luboff
@JLuboff
Nov 14 2018 23:06
Eh... its no where near as bad as it was last year...that one was awful...
Smoke for weeks
Christopher McCormack
@cmccormack
Nov 14 2018 23:06
The fact it's reoccurring only reinforces my point
Jason Luboff
@JLuboff
Nov 14 2018 23:08
Touche
Just a lot of effort (and money) to leave for some time.. :(
Brad
@bradtaniguchi
Nov 14 2018 23:09
The windows guy hasn't touched the project so the need hasn't come up until now, but it's on the list of "todos", probably something I might do from home one day
oops thats super late haha
Christopher McCormack
@cmccormack
Nov 14 2018 23:10
@bradtaniguchi hehe
Simon Cordova
@gbsimon87
Nov 14 2018 23:21
California is crazy right now with all that fire
Jason Luboff
@JLuboff
Nov 14 2018 23:31
Ya... that one in Northern California is awful considering how many lives lost not to mention structures (I think I heard it was like 7700+)
And at least 42 dead
Simon Cordova
@gbsimon87
Nov 14 2018 23:33
Damn man
How do people die in those fires? It is from the fumes mainly or...?
Jason Luboff
@JLuboff
Nov 14 2018 23:35
Burned alive :-/
Simon Cordova
@gbsimon87
Nov 14 2018 23:35
Are you sure, I feel like the fire doesn't just appear out of nowhere
Jason Luboff
@JLuboff
Nov 14 2018 23:35
It was moving so rapidly a lot of people weren't either able to get out of town ( I believe its only one lane in, one lane out)
Simon Cordova
@gbsimon87
Nov 14 2018 23:36
oh my god
Jason Luboff
@JLuboff
Nov 14 2018 23:36
I can't remember if it was that fire or the one here, but it was moving at 8 football field lengths a minute
Simon Cordova
@gbsimon87
Nov 14 2018 23:36
that's crazy man
I had no idea fire burned like that, how could they ever stop it?
Jason Luboff
@JLuboff
Nov 14 2018 23:36
so whats that, 2400 feet? Just a bit shy of half a mile?
Simon Cordova
@gbsimon87
Nov 14 2018 23:37
You imperial fucks lolol
That's crazy though
Jason Luboff
@JLuboff
Nov 14 2018 23:37
It can take a while.. the fire that was near me last year burned around 290,000 acres and continued to burn for weeks
Simon Cordova
@gbsimon87
Nov 14 2018 23:38
Oh my god imagine being locked in a town and you can't get out and you know what's coming oh man
Jason Luboff
@JLuboff
Nov 14 2018 23:38
Just shy of 3/4 KM per minute
Simon Cordova
@gbsimon87
Nov 14 2018 23:38
what a horror movie
Jason Luboff
@JLuboff
Nov 14 2018 23:38
Ya.. there were people who were stuck in their cars and got trapped by the fire
Simon Cordova
@gbsimon87
Nov 14 2018 23:38
Do you know what the mean causes are?
Jason Luboff
@JLuboff
Nov 14 2018 23:39
Word is it was potentially power related (down power lines)
Christopher McCormack
@cmccormack
Nov 14 2018 23:39
did you see the video of the family escaping? that shit overwhelms. You can't even see anything
Jason Luboff
@JLuboff
Nov 14 2018 23:40
I've seen part of it. There's also a video of a guy who survived that went back and recorded it...it includes the remains of people caught in it..including one family that didn't make it becuase according to him, he told them to go and the wife insisted on doing her make up first..
Simon Cordova
@gbsimon87
Nov 14 2018 23:41
I saw a crazy video that went viral last year I think it was, or two years ago, in Kelowna, BC I believe.
From inside the car, it looked like Armageddon it was insane.
Jason Luboff
@JLuboff
Nov 14 2018 23:43
It is insane..
My aunt and uncle actually lost their home in the fire last year
Knew a couple other people as well
Simon Cordova
@gbsimon87
Nov 14 2018 23:44
How does that work in the US, I'd assume it's by a state matter?
Jason Luboff
@JLuboff
Nov 14 2018 23:44
How does what work?
Simon Cordova
@gbsimon87
Nov 14 2018 23:44
Sorry that was vague indeed - their home loss
Christopher McCormack
@cmccormack
Nov 14 2018 23:44
insurance
Simon Cordova
@gbsimon87
Nov 14 2018 23:44
Does insurance cover them?
Christopher McCormack
@cmccormack
Nov 14 2018 23:44
it should
but it depends on where you live, acts of nature aren't always covered
Jason Luboff
@JLuboff
Nov 14 2018 23:45
If they have fire insurance and even then...insurance companies want to pay as little as possible
Christopher McCormack
@cmccormack
Nov 14 2018 23:45
but IANAL
Simon Cordova
@gbsimon87
Nov 14 2018 23:45
I'd expect fire to be mandatory in Californian home insurance policies
Jason Luboff
@JLuboff
Nov 14 2018 23:45
It is not
Or at least I don't think it is
Simon Cordova
@gbsimon87
Nov 14 2018 23:45
I feel that place is always on fire man
same with lower BC
It's crazy out there
Christopher McCormack
@cmccormack
Nov 14 2018 23:46
that whole region even outside CA is always on fire, you just don't hear about most because it's mostly national forest or whatever
Simon Cordova
@gbsimon87
Nov 14 2018 23:46
And sorry about your uncles losing their home man that sucks
Oh yeah eh, I'd really like to know what they're caused by
Christopher McCormack
@cmccormack
Nov 14 2018 23:47
it's just dry a lot
and tons of trees
Jason Luboff
@JLuboff
Nov 14 2018 23:47
Ya it was hard for them at first..but... they ended up getting a ton of money (I think) but.... last I heard they were planning to spend a shit ton of it (or all of it) to rebuild and actually over budget
California has been having years of drought...it was okay a few years ago but haven't had much rain which results in dry brush everywhere
Simon Cordova
@gbsimon87
Nov 14 2018 23:48
And the lack of rainfall I take it
Jason Luboff
@JLuboff
Nov 14 2018 23:48
And people don't clear it out like they should around their homes
Simon Cordova
@gbsimon87
Nov 14 2018 23:48
I'd assume at least
Brad
@bradtaniguchi
Nov 14 2018 23:49
I'm lucky I live in a concrete jungle, literally nothing to catch on fire but a building here or there. But then I'm next to a refinery that explodes all the time :P
Simon Cordova
@gbsimon87
Nov 14 2018 23:49
Clear out dry bush? Is that like an actual thing ?
Or an expression?
Jason Luboff
@JLuboff
Nov 14 2018 23:49
Thats a thing
Christopher McCormack
@cmccormack
Nov 14 2018 23:49
@bradtaniguchi rofl
Jason Luboff
@JLuboff
Nov 14 2018 23:49
Its dead....which means fire fuel
Simon Cordova
@gbsimon87
Nov 14 2018 23:49
damn
you guys got some funny problems out west
Jason Luboff
@JLuboff
Nov 14 2018 23:49
@bradtaniguchi Which refinery?
Brad
@bradtaniguchi
Nov 14 2018 23:50
The torrance refinery, that thing has been having lots of problems
Jason Luboff
@JLuboff
Nov 14 2018 23:50
Wasn't it shut down for a while?
Brad
@bradtaniguchi
Nov 14 2018 23:52
Yes, but I heard it's back up, but then they had other problems. Its just a huge mess. No idea the state of it right now
Jason Luboff
@JLuboff
Nov 14 2018 23:53
I wonder if thats where we ship our oil lol
Brad
@bradtaniguchi
Nov 14 2018 23:56
It's a mobile refinery so is your oil "mobile oil?" (I have no idea what i'm talking about)
Jason Luboff
@JLuboff
Nov 14 2018 23:57
I'm not positive who we sell to just that it heads out to LA area I think
Simon Cordova
@gbsimon87
Nov 14 2018 23:58
I think the US sells their oil to Iraq
room intensifies
lol