« first day (2881 days earlier)      last day (2083 days later) » 

12:00 AM
can you show me your debounce code in the event that you are using to capture the event being fired that eventually sets off your api call
use ctrl-k to format before posting
 
// debouncing execution of startSearch action creator
  private startSearchDebounce = debounce(5000, data => {
    this.props.startSearch(data)
  })

  handleSearch = async e => {
    e.preventDefault()
    // value from onChange
    const { target: { value: input }} = e
    const { category, query, startSearch } = this.props
    query(input)
    const data = {
      input,
      tags: input.replace(/\s/g, '').split(','),
      category: category
    }

    // action creator that starts api call, currently wrapped around debounce above
^^^ in component
export const startSearch = data => {
  return async (dispatch, getState) => {
    const conditions = {
      ...data,
      id: getState().auth.id
    }

    // send api call here
    const imageResultsByTag = await api.image.getAllByTags(conditions)

    // then dispatch image results to store
    return dispatch(search(imageResultsByTag))
  }
}
^^ action creator
 
where is your handle search being fired?
 
in the render of the component:
  <input
      type="text"
      className="input spawnSearch"
      placeholder="Search"
      onChange={this.handleSearch}
      value={input}
      ref={this.inputRef}
    />
 
user1596138
@55Cancri very oddly specific with getState
 
lol what do you mean?
thats where the id is in the redux store
 
user1596138
12:15 AM
Func().prop.nestedProp
 
it is ugly though I will admit
 
does your debounce time argument go before or after the curly brackets
 
user1596138
It's dAnGEroUS
 
it goes before with this particular pacakage
if it was lodash it would be reversed
I wonder if const { id } = getState() would work
 
when you console.log() inside your debounce and inside the api call. does the debounce console get fired?
 
12:19 AM
testing right now
 
const means it can't be reassigned. is the desired behavior?
 
yes I won't need it again in that particular action creator
just tested
debounce called, action creator called, debounce called, action creator called, debounce called, action creator called, etc
so debounce first then action creator
 
your debounce should not be firing on every event.
 
then am I assigning it correctly with:
 
const debounce = (fn, time) => {
  let timeout;

  return function() {
    const functionCall = () => fn.apply(this, arguments);

    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}
 
12:22 AM
private startSearchDebounce = debounce(5000, data => {
    console.log('in debounce')
    this.props.startSearch(data)
  })
 
try this debounce function
 
testing now
 
is there a way to take the paths from an svg and put them into your file without copying and pasting like a prole?
 
it doesnt seem to except any parameters
  debounce = (fn, time) => {
    let timeout

    return function() {
      const functionCall = () => fn.apply(this, arguments)

      clearTimeout(timeout)
      timeout = setTimeout(functionCall, time)
    }
  }

  // debouncing execution of startSearch action creator
  private startSearchDebounce = this.debounce(data => {
    this.props.startSearch(data)
  }, 5000)
when calling: this.startSearchDebounce(data) in:
  handleSearch = async e => {
    e.preventDefault()
    // value from onChange
    const {
      target: { value: input }
    } = e
    const { category, query, startSearch } = this.props
    query(input)
    const data = {
      input,
      tags: input.replace(/\s/g, '').split(','),
      category: category
    }

    // action creator that starts api call, currently wrapped around debounce above
    this.startSearchDebounce(data)
  }
it doesnt like that data variable being passed to it
not sure how to reformat the debounce function
oh wait, I think I see
give me one second
 
correct debounce(this.startSearchDebounce(data),5000)
 
12:27 AM
okay, I got it, give me one more second
  private startSearchDebounce = this.debounce(
    this.props.startSearch(data),
    5000
  )
gives is an error with data
it can't find it. I think does need to be a callback
  private startSearchDebounce = this.debounce(data => {
    this.props.startSearch(data)
  }, 5000)
but I wonder if the fact that it is a callback is what is making it fail
 
correct, it's already a callback
 
I can't pass the data variable to it though
when its written as a callback, the same problem from before happens of delaying then executing all
but not as a callback, it doesnt get access to passed in variable
 
why does data need to be a call back?
 
well in the handleSearch function:
  handleSearch = async e => {
    e.preventDefault()
    // value from onChange
    const {
      target: { value: input }
    } = e
    const { category, query, startSearch } = this.props
    query(input)
    const data = {
      input,
      tags: input.replace(/\s/g, '').split(','),
      category: category
    }

    // action creator that starts api call, currently wrapped around debounce above
    this.startSearchDebounce(data)
  }
the data object needs to be passed to the debounced action creator
 
does the event handle need an async?
 
12:37 AM
actually, no. I guess I just got in the habit of putting it on every function
unless the action creator is async...
hold on
 
I have also never seen async used like that without a closure
 
Isn't debouncing just setting a time out in middleware
 
awaiting the debounce function doesnt work either
closures aren't necessary for async/await
they are just an alternative to .then().catch(e) {}
 
I know but your function will become synchronous
 
then async await is not necessary, though taking them off wont change the behavior
 
12:44 AM
@55Cancri that's not exactly accurate. .catch(callback) not .catch(){}
 
right, sorry havent used in awhile
my issue though, is that I am someone creating multiple debounce functions on each onChange event
I don't know why its doing that when the function is defined on the instance of the class
 
@55Cancri anything that requires a pause in execution is asynchronous
 
somehow this:
  private startSearchDebounce = debounce(5000, data => {
    console.log('in debounce')
    this.props.startSearch(data)
  })
is causing a new debounce function to be created everytime its called in the onChange
 
startSearchDebounce does not take any arguments
 
What does your onchange look like?
 
12:46 AM
Dont the arguments get ported over to the debounce function, since startSearchDebounce now equals debounce(...)
here is my onchange
    <input
      type="text"
      className="input spawnSearch"
      placeholder="Search"
      onChange={this.handleSearch}
      value={input}
      ref={this.inputRef}
    />
thats it!!!
the new debounce functions are being created each time handleSearch is called!
this is handleSearch
handleSearch = async e => {
    e.preventDefault()
    // value from onChange
    const {
      target: { value: input }
    } = e
    const { category, query, startSearch } = this.props
    query(input)
    const data = {
      input,
      tags: input.replace(/\s/g, '').split(','),
      category: category
    }

    // action creator that starts api call, currently wrapped around debounce above
    this.startSearchDebounce(data)
  }
isnt that right?
or no.
 
Yeah you are changing inpu? Isn't that in state?
Doesn't replace mutate?
 
take out the call back and just pass it in as an argument
 
Yeah...
 
on which part Rick?
convert this :
  private startSearchDebounce = debounce(5000, data => {
    console.log('in debounce')
    this.props.startSearch(data)
  })
 
all string methods mutate
 
12:51 AM
to this:
private startSearchDebounce = debounce(5000, this.props.startSearch() })
?
 
startSearchDebounce(data){ debounce(5000, this.props.startSearch(data) }) }
 
@Rick exactly. Mutating the value directly could fire another onchange?
 
no that calls it immediately
not even a delay this time
 
sorry put the time behind the function
unless your using your old debounce
ya mutation might fire it off again
 
cant believe i missed that
 
12:57 AM
but all string manipulations are copies
 
All this to avoid surrounding your function body with an if statement that checks for a class instance time out that is set and cleared manually lol
 
is there a reason why your method is private?
 
Well only this class should have access right?
 
Now... How do you use an svg flie as an svg tag?!? Lol
 
Or is that affecting things...
 
1:00 AM
that depends if you are calling that method from outside the class. if not your fine
 
no im not, but even with your changes, it still is called on every keypress
i really think something is causing that function to spawn more than once
which is triggering multiple debounce calls instead of one
 
you can test that by looking at the console.log()
 
yes the last time I did that it logged on every keypress, not once
I believe that handleSearch might be the culprit
if I just call debounced directly from the onChange event,
I wonder if that will solve it
give me a second
rebuilding...
no luck
I dont know the solution
 
1:16 AM
have you considered debouncing it at the source? instead of exporting startSearch export throttle(5000, startSearch)
 
what would the source be in this case?
The file with the action creators?
 
yep
 
alright, let me try that
 
1:29 AM
doesnt work
 
1:57 AM
i feel like ripping my hair out but I must remain calm
moments like these, moments of intense agitation, I will encounter them frequently in life
so I must remain calm.
This debounce thing is giving me total hell, but I must stay calm.
Getting angry does nothing. I need to practice actions that get me to think better, not endulgde in pent up rage.
 
2:17 AM
@55Cancri It's funny how you have to talk yourself down to a calm composure. I am sure you will figure it out
 
I won't give up until I figure it out. I'm tempted to say I won't sleep until I figure it out but I don't want to be disappointed in the morning.
 
why don't you make it work with a simple javascript example
 
well its a react app and making a barebones version will be too time consuming
I'm not totally lost with what I'm working with
 
it might help you see your mistakes more clearly
 
I dont know how to do OOP outside of react in javascript
or mock api calls
 
2:21 AM
Umm. React is way more cumbersome than vanilla js and the dom
well you only really need to get the keytrokes correct the firing function can be any thing.
Javascript is functional using it in an OOP fashion not where it's strengths are
 
no I definitely agree
but the debounce implementation will be in react eventually. And I love vanilla js, the first thing I learned in js
but have you tried building an SPA using vanilla?
its a pain in the ass
 
I think react is more of a pain. but that's probably just me.
 
I love react with a passion. Virtual dom is a godsend
 
Does anyone know how I can rewrite URLs like in .htaccess with Webpack Dev Server? I would like to make .html files accessible without having it in the path (eg. localhost:9000/about will work instead of localhost:9000/about.html)
I see rewriting for proxy, but I don't think that's the same
 
2:37 AM
why don't you use express
.htaccess seems like a pain
 
I prefer Nginx personally, but uh, using express wouldn't solve my problem
I don't think webpack-dev-server can run use express
Oh wait I might be missing something, webpack-dev-server might actually use express
 
webpack-dev-middleware
but I don't even know why you would need that, you can just proxy through express
I remember using proxy-express made life really easy
 
I'm likely missing something, but I don't know how a proxy would help when I'm just trying to server html files from my local machine
Would I just proxy all requests without .html to the url + .html? I suppose that could make sense
Although now looking deeper into the webpack-dev-server documentation I see..
  setup: function(app) {
    // Here you can access the Express app object and add your own custom middleware to it.
    // For example, to define custom handlers for some paths:
    // app.get('/some/path', function(req, res) {
    //   res.json({ custom: 'response' });
    // });
  },
As an option, doesn't seem to be working though
Ah it was replaced by before:, although it seems that there may yet be a better way to do it
 
3:21 AM
@Alesana using express, serving react on a pm2 process with nginx is magnifico
 
Wait you use express alongside nginx?
I did a small tutorial on express, I didn't realize it could be used with nginx
Maybe I need to learn more
 
yeah, mots setups i've seen use something in front of node to handle the simple stuff
static asset serving forexample
 
3:46 AM
I'm just building static websites with Webpack
No api or anything
 
yeah i'd just do that with nginx or apache
dev it etc with express
 
4:00 AM
once your site is bundled you can serve it with whatever. our company just shoves the files on s3 and puts a CDN infront of it
 
:O That's not a bad idea
 
Anyone here using Visual Code editor here? The most recent update is asking me to install something...
^ what is all that about?
And when I do try to install, it is asking me to uninstall the previous version...then apply the update (whatever mentioned above)...
 
4:48 AM
flat and flatmap has just been added to chrome
 
5:13 AM
Hi all, I am new to react native development. I want to make card view. So I went through react native docs but card view is not present. Can someone please suggest me which npm package is good for card view ? Should I make use of prebuilt components or should I create my own component ?
 
5:30 AM
Should I try to avoid adding additional third party libraries for creating UI in react native app
 
6:09 AM
@Alesana yeah just use something like pm2 and put it on localhost:3000 and point your nginx server at it.
 
6:25 AM
@deostroll "click --> here <--- to learn more"
Happy birthday @rlemon
go mockup some poutine!
 
6:47 AM
@stonerock The alternative I suppose would be to do everything yourself for the UI
I think I'd prefer to use react bootstrap honestly
 
7:11 AM
this question suddenly got downvotes while it is pretty reasonable stackoverflow.com/questions/52179016/…
 
7:23 AM
started using vscode. I love the minimap on the right so much already
 
minimap?
 
yes :)
my controller file got so long that I took it out of my cloud ide now just to have that minimap
 
I dont bother with it.. I just navigate the symbols.
 
Is there a way to have this transparent overlay on the minimap all the time?
that things, it currently only shows up when I mouseover the minimap
 
7:39 AM
@RaisingAgent editor.minimap.showSlider stackoverflow.com/questions/42561099/…
 
thx <3
 
Happy Birthday @rlemon!
26
@KarelG Can you pin?
 
if you were a mod...
 
No thanks
 
Hi folcs
 
7:51 AM
hi folcc
 
@BenFortune done
1 hour ago, by KarelG
Happy birthday @rlemon
already done it but whatever
had to cleanup a mess here, dropped a glass full of water D:
 
cheers love
 
I am getting undefined type error in react native I think I am not accessing the data correctly
Code:
class VenueList extends Component {

    componentWillMount () {
        this.props.fetchVenues();
    }

    render() {

        const name  = this.props.venues.data.attributes.name;
        const location2 = this.props.venues.data.attributes.place.location[2];

        return (
            <View style={styles.container}>
                <View style={styles.boxcontainer}>
                    <Image
                    style={styles.img}
                    source={{ uri: 'https://www.dike.lib.ia.us/images/sample-1.jpg/image' }}
Data:
{
  "data": [
    {
      "type": "venues",
      "id": "nb",
      "attributes": {
        "name": "Barasti Beach",
        "description": "Barasti Beach is lotacated in the awesome barasti beach",
        "price_range": "$$$",
        "opening_hours": "10:30-12:40/16:00-2:00",
        "organization": {
          "id": "GD",
          "legal_name": "Barasti",
          "brand": "Barasti"
        },
        "place": {
          "address": "Le Meridien Mina Seyahi Beach Resort & Marina, Dubai Marina - Dubai - United Arab Emirates",
 
that's because it's an array
 
In VenueList component I am extracting data and assigning it to const variable name and location2
 
8:05 AM
this.props.venues.data[0].attributes...
> I'll learn React first, the simple constructs of JavaScript can come later.
 
@BenFortune I tried const name = this.props.venues.data[0].attributes.name; doesn't work
 
What's this.props.fetchVenues()?
 
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, Image, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { fetchVenues } from '../actions/venueAction';

class VenueList extends Component {

    componentWillMount () {
        this.props.fetchVenues();
    }

    render() {

        const name  = this.props.venues.data[0].attributes.name;

        return (
            <View style={styles.container}>
                <View style={styles.boxcontainer}>
@BenFortune See entire component in above code
 
That absolutely doesn't help
 
fetchVenues() gives the data which I shared above
@BenFortune Should I remove this line from render() const name = this.props.venues.data[0].attributes.name;
 
8:21 AM
I'm not here
 
> What's this.props.fetchVenues()?
just trace back, what does this.props give??
if object, walk through it
 
8:40 AM
@KarelG I am mapping statetoProps is it a problem
fetchVenues is a funtion
export const fetchVenues = () => dispatch => {
    axios.get(`my_link`)
    .then( venues =>
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )
    .catch( error => {
        console.log(error);
    });
};
 
Wait, where are you logging that JSON?
It could be this.props.venues[0]
 
where should I log data ?
console.log(this.props.venues[0]) where ?
 
The JSON you posted above, how did you get it? Did you inspect a network request or log it somewhere?
 
Where should I console.log(this.props.venues[0]) ?
 
If your payload is venues.data then your prop will be this.props.venues[0].attributes...
I think, not sure how axios works
 
8:51 AM
But where should I add console.log(this.props.venues[0].attributes.name) ? I am getting error if I add inside render()
I am not getting anything in console ?
 
just log this.props
 
I dont get anything in console if I do console.log(this.props.venues[0]) see screenshot below:
@BenFortune I am getting the data if I add flatList in this code:
 
Oh right, native
 
renderItem = ({ item }) => (
+        <View style={styles.item}>
+          <Text style={styles.titleText}>{item.attributes.name}</Text>
+        </View>
+    );
+
+    render() {
+
+        return (
+            <FlatList
+                styles={styles.container}
+                data={this.props.venues.data}
+                renderItem={this.renderItem}
+            />
+        );
+    }
 
yeah I dno
 
8:59 AM
@BenFortune Above flatlist works fine but don;t know how to access the data incase if I want to display it through <Text>
 
you need to step back to the basics because you are even having trouble to debug properly
 
@KarelG Can you please tell me what should I learn ?
I think I am doing everything right but still data is not displayed
 
9:20 AM
@stonerock Write a TODO application using only vanilla javascript, html, and css
and very simple backend if at all possible
Get a good understanding about how ajax works too
Don't focus too strongly on the prettiness unless that's something you think you might want to do normally I guess
Once you're done, try to do the same using react with no UI
 
@rlemon Happy birthday!
 
10:19 AM
what up my dudes!
Do you guys know of a way to simulate onTouchStart using a mouse in a non touch device without using the dev tools?
 
21
Q: manually trigger touch event

AndreM96I searched for the past 30 minutes, but didn't find a solution. I want to trigger a touchstart event on an element. This fires the touchstart event: var e = document.createEvent('MouseEvent'); e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY, ctrlKe...

 
Neil, you have a good understanding of React, Redux, and Typescript right?
 
@rlemon happy birthday!
 
@55Cancri why on earth would you have that idea? :)
 
Well have you done anything with debounce and throttle in a react application?
 
10:34 AM
I'm not being humble. I consider myself strong in javascript (including node), but not so much react, redux, and typescript
nope, sorry
but feel free to ask. Someone's bound to be bored in here :)
 
Well, I still cannot solve this debounce / throttle issue!
Its been driving me insane for 3+ days!
 
@Neil is there some chrome extension that captures a click event and converts it into a touch?
is it possible to make an extension like this?
 
@Thaenor I'll bet there are javascript libraries which do this
no need for an extension
 
@55Cancri Just post your question, if someone want to help, they will.
 
When I use my current debounce function, the delay occurs, but it happens for every keystroke
a debounce should only happen once.
This means my debounce function is being recreated on every keypress.
two files, three pieces of code
  public handleSearch = async e => {
    e.preventDefault()
    // value from onChange
    const { target: { value: input } } = e
    const { category, query, startSearch } = this.props

    query(input)
    // data sent to action creator
    const data = {
      input,
      tags: input.replace(/\s/g, '').split(','),
      category: category
    }

    this.startSearchDebounce(data)
  }

  // is debounced for 5 seconds, but then makes calls for every keystroke
  public handleCall = async data => this.props.startSearch(data)
^^^ component
export const startSearch = data => {
  console.log('in action creator')
  return async (dispatch, getState) => {
    const conditions = {
      ...data,
      id: getState().auth.id
    }

    // send api call here
    const imageResultsByTag = await api.image.getAllByTags(conditions)

    // then dispatch image results to store
    return dispatch(search(imageResultsByTag))
  }
}
^^^ action creator
    <input
      type="text"
      className="input spawnSearch"
      placeholder="Search"
      onChange={this.handleSearch}
      value={input}
      ref={this.inputRef}
    />
^^^ input with keystroke onChange. Calls handleSearch
please help.
 
10:47 AM
@Neil but I wanted to do this as an extension for chrome
you see I'm working on a web app that's meant to work on a smart mirror.
It's meant to run on a touch device's chrome, but it's developed on a normal laptop's chrome.
on my laptop I need to open dev tools and use the simulate touch device so it actually accepts mouse clicks as touch events.
I want this feature, but that could happen even if dev tools is closed
 
How can I see console.log() in react native app
If i try to click on debug remotely it says timeout
 
@stonerock probably from logcat on Android
 
logcat ?
 
It's where all logs are typically written to in Android developer.android.com/studio/command-line/logcat
 
@BenjaminGruenbaum Missed opportunity to call it logdog.
 
10:55 AM
See in windows for react native app I turn on 2 cmd terminals one for react-native start and another for react-native run-android after that react-native run-android is done I open my app in emulator and then Bundling happens in react-native start terminal
 
@MadaraUchiha they have a ton such jokes in Android
@stonerock run adb logcat from the command line
 
ok
Can I see console.log() in browser ? of RN app
 
11:11 AM
@BenjaminGruenbaum See below screenshot:
I don;t see anything in console
 
@stonerock you can (in the debugger)
 
@stonerock there is a huge post in documentation when I have used react native to debug it
 
Yes got it
thank you
 
react-native log-android works fine
 
11:19 AM
but you need to run react on your pc, not through an emulator
for that you need another solutions. Like you already figured out
 
Or just use Expo
 
I am getting undefined in console if I do console.log(this.props.venues) see VenueList.js
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import { View, Text, Image, FlatList, StyleSheet } from 'react-native';
    import { connect } from 'react-redux';
    import { fetchVenues } from '../actions/venueAction';

    class VenueList extends Component {

        componentWillMount () {
            this.props.fetchVenues();
        }

        render() {

            console.log(this.props.venues)

            return (
                <View style={styles.container}>
@BenjaminGruenbaum @KarelG I get undefined for console.log(this.props.venues) see code above
 
I have told you before that you need to inspect this.props.
debug the component hierarchy and go through the view facebook.github.io/react-native/docs/…
 
@KarelG I am getting { venues: undefined, fetchVenues: [Function] }
 
see that explains why venues is undefined. Now figuring out why. what happens if you do fetchVenues() instead? Do you get venues data?
(was it not that function where you have used axios to get some data from a server? )
 
11:31 AM
@KarelG console.log(this.props.fetchVenues()) gives undefined
 
12:05 PM
 
@MadaraUchiha You're the chosen one
 
I want to get json data from file and then parse it in javsacript
can someone help me out
 
Can someone explain to me when to use the different parenthesis with arrow functions?

1. () => ( ... )
2. () => { ... }
3. () => ({ ...})

If i understand correctly, 1. is used if it is a single statement that was broken into multiple lines. 2 is used if it is a function with multiple statements. Though I'm not quite understanding ({...}).
 
12:20 PM
@Strict 1) expression 2) block 3) object literal
2
 
12:33 PM
4) off-by-one error
 
12:44 PM
@KarelG @BenjaminGruenbaum @BenFortune @SomeGuy danke
 
no poutine? :(
 
that's what we have instead of cake
 
[]

0: Object { id: "2117161781878238", picture_full: "https://scontent.xx.fbcdn.net/v/t1.0-9/40964539_2117161788544904_3839877148340912128_o.jpg?_nc_cat=0&oh=7a5990fa2e1db24296f68f3f779a56c2&oe=5C23E398" }

1: Object { id: "2117161771878239", picture_full: "https://scontent.xx.fbcdn.net/v/t1.0-9/40752486_2117161778544905_5145548348786212864_o.jpg?_nc_cat=0&oh=a50f3422aefe609741472e741ed1e08c&oe=5BEF75F4" }

2: Object { id: "2117161728544910", picture_full: "https://scontent.xx.fbcdn.net/v/t1.0-9/40694557_2117161735211576_3486826052016144384_o.jpg?_nc_cat=0&oh=4a0bb87d78f353377dc81901b9c
 
@AbhishekBurkule Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
 
this is my array how do I iterate this to get id and picture_full value ?
 
12:52 PM
@rlemon any plans for next year?
 
I have push it in var quotations = []; I am unable to loop this array
 
don't get fat and bald
like every year
 
good advice
Wish I could follow that
 
@AbhishekBurkule you have an array of objects. When looping through your array, keep in mind that each element is an object. To access eg that id, if element = array[0], then you need to do element.idto access the id of the first object in your array.
 
Yeah I tried it manually but its always undefined
can you show me how do I get first elements id
0: Object { id: "2117161781878238", picture_full: "https://scontent.xx.fbcdn.net/v/t1.0-9/40964539_2117161788544904_38398771483409‌​12128_o.jpg?_nc_cat=0&oh=7a5990fa2e1db24296f68f3f779a56c2&oe=5C23E398" }
 
12:58 PM
@rlemon :D
 

« first day (2881 days earlier)      last day (2083 days later) »