Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

prisoner of waffles posted:

consider using

and if you really have to, https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Doesn't this pretty much just not work?

# ? Apr 13, 2019 14:09

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 04:39

necrotic: Aug 2, 2005; I owe my brother big time for this!

Ape Fist posted:

Doesn't this pretty much just not work?

Why would you think that? There'd be memory and performance issues all over if removeEventListener didn't work.

# ? Apr 13, 2019 20:18

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

necrotic posted:

Why would you think that? There'd be memory and performance issues all over if removeEventListener didn't work.

You know what I think I'm thinking of something else.

# ? Apr 14, 2019 18:48

Cheen: Apr 17, 2005

I am very confused as to how to keep a user from having to log in every time on refresh for the one page app i'm creating.

This is what i'm currently doing with google login in button in react and passport on my back end:

Step 1: On the frontend, get the 3rd party app�s login popup to appear.

Step 2: (Still on the frontend) Grab the authentication token the 3rd party app returns after agreeing to login.

Step 3: (Yep, still frontend) Send that token to the backend as part of the body of your request.

Step 4: On the backend, verify the token.

Step 5: If the token is authentic, receive the user as part of the verification response.

Step 6: Save the user�s data to your database.

Step 7: Return a req.user back to the client, which sets the state ot logged in and puts the user info on the state.

So what do I do once they've gone through that process so they don't have to log in every time? Do i need to do some sort of verification on mount or something?

# ? Apr 14, 2019 20:59

necrotic: Aug 2, 2005; I owe my brother big time for this!

You need a cookie or local storage. State in react components is not persisted across page reloads.

# ? Apr 14, 2019 21:04

Cheen: Apr 17, 2005

necrotic posted:

You need a cookie or local storage. State in react components is not persisted across page reloads.

Isn't passport supposed to be creating a cookie for me? I have serializeUser and deserializeUser on my backend, and I know that serializeUser is getting called when I login.

# ? Apr 14, 2019 21:07

TIP: Mar 21, 2006; Your move, creep.

Cheen posted:

Isn't passport supposed to be creating a cookie for me? I have serializeUser and deserializeUser on my backend, and I know that serializeUser is getting called when I login.

You need to set up a route to check if your user is logged in.

Something like:

code:

app.get("/loggedIn", isLoggedIn, function(req, res){
	res.send({
		loggedIn: true
	});
});


// route middleware to make sure a user is logged in
function isLoggedIn(req, res, next) {
    // if user is authenticated in the session, carry on 
    if (req.isAuthenticated()){
        return next();
	}
	res.send({
		loggedIn: false
	});
}

You can also use the isLoggedIn function on any route you want to only work for logged in users.

EDIT: I don't use React, and this just worked for me without having to do anything special. If you're already doing something like this, but just always get false for loggedIn, then yeah, I guess there's more you have to do to play nice with whatever React is doing.

TIP fucked around with this message at 21:37 on Apr 14, 2019

# ? Apr 14, 2019 21:31

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Cheen posted:

Isn't passport supposed to be creating a cookie for me? I have serializeUser and deserializeUser on my backend, and I know that serializeUser is getting called when I login.

Usually you'd ensure persistence of login via a session. Passport does do this automatically, but you need to configure it to play nice with whatever other frameworks you've got messing with the session. See step 3 here:
http://www.passportjs.org/docs/configure/

# ? Apr 14, 2019 21:33

necrotic: Aug 2, 2005; I owe my brother big time for this!

Cheen posted:

Isn't passport supposed to be creating a cookie for me? I have serializeUser and deserializeUser on my backend, and I know that serializeUser is getting called when I login.

I missed that you were using passport.

# ? Apr 14, 2019 21:51

Happy Thread: Jul 10, 2005; by Fluffdaddy; Plaster Town Cop

Has Chrome's DevTools performance Profiler broken with an update, or have I just forgotten how to use it?

I swear until recently it used to be able to show me a specific line-by-line breakdown of which lines the CPU spent the most time on during sampling, coloring them red or something, including little millisecond readings. Just like Visual Studio. Now, sampling over 10 seconds shows no lines lit up anywhere, almost like it's been turned off.

The rest of my profile says most of my time is taken up by my own vector math, so it seems something should be showing up.

# ? Apr 18, 2019 18:38

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Functional components with hooks in React is so new it's hard to find good tutorials for them. Does anyone have any good video tutorials or is it too new? I've been using this Scrimba tutorial by Bob Ziroll which is great, but if hooks are the way React is going to be written from now on I don't know if I want to start learning with classes if they're (mostly) on their way out.

I've got this:

code:

import React, {useState, useEffect} from 'react';

function App() {

  const [cardNames, setCardName] = useState([]);
  
  const rezCards = async () => {
    //const rez = await fetch('https://api.scryfall.com/cards?page=3')
    const rez = await fetch ('https://api.scryfall.com/catalog/card-names')
    const json = await rez.json()
    setCardName(json.data)
  }

  useEffect(() => {
    rezCards()
  },[])

  return <ul>{cardNames
    .slice(0,150)
    .map(
      (cardName) => {
        return <li key={cardName}>{cardName}</li>
      }
    )}</ul>
}

export default App

I've been dabbling with it for days on my own trying to make it work when I un-comment-out that top line and comment out the card-names one. It's something to do with the nested data in that JSON output; I'm thinking it's returning an object, not an array, but I want to deal with the info inside that array, say for example "oracle_text". I just don't know how to write that.

# ? Apr 20, 2019 02:02

HexiDave: Mar 20, 2009

LifeLynx posted:

Functional components with hooks in React is so new it's hard to find good tutorials for them. Does anyone have any good video tutorials or is it too new? I've been using this Scrimba tutorial by Bob Ziroll which is great, but if hooks are the way React is going to be written from now on I don't know if I want to start learning with classes if they're (mostly) on their way out.

I've got this:
code:
import React, {useState, useEffect} from 'react';

function App() {

  const [cardNames, setCardName] = useState([]);
  
  const rezCards = async () => {
    //const rez = await fetch('https://api.scryfall.com/cards?page=3')
    const rez = await fetch ('https://api.scryfall.com/catalog/card-names')
    const json = await rez.json()
    setCardName(json.data)
  }

  useEffect(() => {
    rezCards()
  },[])

  return <ul>{cardNames
    .slice(0,150)
    .map(
      (cardName) => {
        return <li key={cardName}>{cardName}</li>
      }
    )}</ul>
}

export default App
I've been dabbling with it for days on my own trying to make it work when I un-comment-out that top line and comment out the card-names one. It's something to do with the nested data in that JSON output; I'm thinking it's returning an object, not an array, but I want to deal with the info inside that array, say for example "oracle_text". I just don't know how to write that.

Well, just throwing those URLs into the browser and I can see that 'card-names' returns just the card names in the 'data' field (nearly 20k of them, so be careful trying to render that all at once). The paged 'cards' endpoint returns a 'data' array of objects, each with details about each card - including their name. So, you want to map the 'name' field:

code:

// In 'rezCards'
const cardNames = json.data.map(card => card.name);

# ? Apr 20, 2019 02:20

necrotic: Aug 2, 2005; I owe my brother big time for this!

Classes are not on their way out unless they changed that stance recently.

# ? Apr 20, 2019 02:50

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

necrotic posted:

Classes are not on their way out unless they changed that stance recently.

ReactJS.org says "We intend for Hooks to cover all existing use cases for classes", though it stressed that classes will continue to be supported.

# ? Apr 20, 2019 03:19

Boris Galerkin: Dec 17, 2011; I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!

e: i think this is the wrong thread

Boris Galerkin fucked around with this message at 11:12 on Apr 20, 2019

# ? Apr 20, 2019 11:05

Summit: Mar 6, 2004; David wanted you to have this.

Hooks are really awesome. It�s real nice to be able to do all functional components all the time. I like the consistency.

# ? Apr 24, 2019 02:16

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Summit posted:

Hooks are really awesome. It�s real nice to be able to do all functional components all the time. I like the consistency.

I got in at the right time it seems. Too bad most tutorials I've found use classes and stateless functional components and teach how to convert them when needed, even though they almost always end with "Well hooks are coming, so start learning those. Good luck out there!"

# ? Apr 24, 2019 03:37

underage at the vape shop: May 11, 2011; by Cyrano4747

What would cause useEffect to be undefined? I have react and reactdom 16.8.3 and the docs say I only need 16.8

# ? Apr 24, 2019 06:44

Strong Sauce: Jul 2, 2003; You know I am not really your father.

underage at the vape shop posted:

What would cause useEffect to be undefined? I have react and reactdom 16.8.3 and the docs say I only need 16.8

you need to import useEffect from react, so in the line at the top you need to do

code:

import React, { useState, useEffect } from 'react';

# ? Apr 24, 2019 07:42

underage at the vape shop: May 11, 2011; by Cyrano4747

I cant beleive i forgot that. Im having another issue now. I loving hate react so far, its so frustrating to learn when it doesn't tell you why its not working

code:

function App() {

  const {loading,offenceList,error} = getSearchables();
  

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Something went wrong: {error.message}</p>;
  }
  console.log({offenceList})

For some reason, offense list is always undefined. Below is the getSearchables function. Right at the end of the function, I have a console.log telling me what its about to return as the value of offence list. Without fail, it is always the array I need from the API. Without fail, it never gives the loving array back and offencelist stays undefined.

code:

function getSearchables(){
  const [loading, setLoading] = useState(true);
  const [offList, setOffList] = useState([]);
  //const [areaList,setAreaList] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://cab230.hackhouse.sh/offences")
    .then (res=>res.json())
    .then (res =>res.offences)
    .then (offences=>{
      setOffList(offences)
      setLoading (false);
    })
    .catch(e => {
      setError(e);
      setLoading (false);
    });
  },[]);
  console.log(offList);
  return {loading,offList,error};
}

# ? Apr 24, 2019 12:51

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

underage at the vape shop posted:

I cant beleive i forgot that. Im having another issue now. I loving hate react so far, its so frustrating to learn when it doesn't tell you why its not working
code:
function App() {

  const {loading,offenceList,error} = getSearchables();
  

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Something went wrong: {error.message}</p>;
  }
  console.log({offenceList})
For some reason, offense list is always undefined. Below is the getSearchables function. Right at the end of the function, I have a console.log telling me what its about to return as the value of offence list. Without fail, it is always the array I need from the API. Without fail, it never gives the loving array back and offencelist stays undefined.
code:
function getSearchables(){
  const [loading, setLoading] = useState(true);
  const [offList, setOffList] = useState([]);
  //const [areaList,setAreaList] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://cab230.hackhouse.sh/offences")
    .then (res=>res.json())
    .then (res =>res.offences)
    .then (offences=>{
      setOffList(offences)
      setLoading (false);
    })
    .catch(e => {
      setError(e);
      setLoading (false);
    });
  },[]);
  console.log(offList);
  return {loading,offList,error};
}

I think the problem you're having is not so much with React as with destructuring assignment. Specifically, that offList and offenceList aren't the same name.

# ? Apr 24, 2019 13:52

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

I've mostly gotten the hang out of building "To Do" style apps in React, but now I want to move on to actually storing that information. It'd be neat to have, for example, a To Do app where the information was stored in a MySQL database so things could be saved for later.

I have an account with Lithium Hosting which offers both MySQL and PostgreSQL (which I've never used; I have some familiarity with MySQL, mostly resetting WordPress passwords in there). Is that the way to go or is there something easier?

# ? Apr 24, 2019 14:53

necrotic: Aug 2, 2005; I owe my brother big time for this!

underage at the vape shop posted:

I cant beleive i forgot that. Im having another issue now. I loving hate react so far, its so frustrating to learn when it doesn't tell you why its not working

You're ham fisting your way into react without the basics of JavaScript. Neither of these errors are reacts fault.

# ? Apr 24, 2019 15:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

I've mostly gotten the hang out of building "To Do" style apps in React, but now I want to move on to actually storing that information. It'd be neat to have, for example, a To Do app where the information was stored in a MySQL database so things could be saved for later.

I have an account with Lithium Hosting which offers both MySQL and PostgreSQL (which I've never used; I have some familiarity with MySQL, mostly resetting WordPress passwords in there). Is that the way to go or is there something easier?

"It depends"

If you want dirt simple and likely free, and want to play with something new, checkout Firebase. If you want to use a real DB, you will need some sort of server piece to handle DB access.

# ? Apr 24, 2019 18:29

Roadie: Jun 30, 2013

necrotic posted:

You're ham fisting your way into react without the basics of JavaScript. Neither of these errors are reacts fault.

# ? Apr 24, 2019 18:50

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Man wait til you gettaload of Redux, whoo boy. Why are you even React, why not just not use it?

# ? Apr 24, 2019 22:32

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Lumpy posted:

"It depends"

If you want dirt simple and likely free, and want to play with something new, checkout Firebase. If you want to use a real DB, you will need some sort of server piece to handle DB access.

Firebase seems great! I'm having trouble getting it properly configured, but I see the promise in it.

# ? Apr 24, 2019 23:07

underage at the vape shop: May 11, 2011; by Cyrano4747

necrotic posted:

You're ham fisting your way into react without the basics of JavaScript. Neither of these errors are reacts fault.

Yeah thats very fair. This course was very very old up until a few weeks before semester started, it was just html/css/basic boring js. They're literally rewriting it as we're doing it. Guess my cohort is the guinea pig. I'm powering through because I work too, and I want to graduate with a high GPA, and I need to keep up

Munkeymon posted:

I think the problem you're having is not so much with React as with destructuring assignment. Specifically, that offList and offenceList aren't the same name.

Thanks. Surprised the tutor didn't see that.

# ? Apr 25, 2019 02:01

Strong Sauce: Jul 2, 2003; You know I am not really your father.

underage at the vape shop posted:

Yeah thats very fair. This course was very very old up until a few weeks before semester started, it was just html/css/basic boring js. They're literally rewriting it as we're doing it. Guess my cohort is the guinea pig. I'm powering through because I work too, and I want to graduate with a high GPA, and I need to keep up

Thanks. Surprised the tutor didn't see that.

there are tools that work with text editors (like vs code from microsoft) where they will darken variables that aren't being used. this will point out when a variable has not been declared or been used properly.

# ? Apr 25, 2019 05:22

Roadie: Jun 30, 2013

underage at the vape shop posted:

Thanks. Surprised the tutor didn't see that.

Use ESLint. Once you add a couple of the premade configs out there it will catch all the really dumb errors for you.

# ? Apr 25, 2019 06:27

underage at the vape shop: May 11, 2011; by Cyrano4747

Strong Sauce posted:

there are tools that work with text editors (like vs code from microsoft) where they will darken variables that aren't being used. this will point out when a variable has not been declared or been used properly.

I am in VS code! Probably didn't set it up right but in this instance it didn't highlight it

Roadie posted:

Use ESLint. Once you add a couple of the premade configs out there it will catch all the really dumb errors for you.

I'll look into it thanks

For another probably dumb question, how do you use strings with hooks?
For instance, this works, but the second one does not (returns test as an empty array). (off filter is an array holding a string in the first one, and just a string in the second)

code:

  const [offFilter,setOffFilter] = useState(["A"])

  let firstCol=props.listArray[0];
  let test = firstCol.filter(offence => (
    offence.includes(offFilter[0])
  ))

code:

  const [offFilter,setOffFilter] = useState("A")

  let firstCol=props.listArray[0];
  let test = firstCol.filter(offence => (
    offence.includes(offFilter)
  ))

# ? Apr 25, 2019 07:26

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

LifeLynx posted:

Firebase seems great! I'm having trouble getting it properly configured, but I see the promise in it.

I started to make a decently complex app with firestore and google cloud functions.

Lumpy is correct, the first time you find yourself thinking about how to do a many to many relationship, dump all that poo poo and jump into an actual relational db.

Except keep cloud functions for some stuff cause they are pretty awesome for background tasks.

# ? Apr 26, 2019 00:52

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

ddiddles posted:

I started to make a decently complex app with firestore and google cloud functions.

Lumpy is correct, the first time you find yourself thinking about how to do a many to many relationship, dump all that poo poo and jump into an actual relational db.

Except keep cloud functions for some stuff cause they are pretty awesome for background tasks.

Yeah Firebase looks good for some simple stuff like storing sessions across devices for users, but it's new and looks easy to outgrow. Time for some React to MySQL tutorials I guess.

# ? Apr 26, 2019 01:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

Yeah Firebase looks good for some simple stuff like storing sessions across devices for users, but it's new and looks easy to outgrow. Time for some React to MySQL tutorials I guess.

You meant PostGRESQL, right?

# ? Apr 26, 2019 04:09

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

Just use rails and enjoy your life.

# ? Apr 26, 2019 05:30

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Lumpy posted:

You meant PostGRESQL, right?

Sure! Whatever works best and is easier to work with.

ddiddles posted:

Just use rails and enjoy your life.

Ruby on Rails? A quick Google says there's some integration thing I can do with React, but why?

# ? Apr 26, 2019 13:25

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

LifeLynx posted:

Ruby on Rails? A quick Google says there's some integration thing I can do with React, but why?

Rails includes an ORM that a lot of people like, but so does, say, Django.

# ? Apr 26, 2019 14:28

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

Sure! Whatever works best and is easier to work with.

The JSON fields on PostGRE make it so good that unless there is a compelling reason *not* to use it, you should use it. Gives you the "just throw unstructured data in there" ability of NoSQL things, but it's easily searchable and you have all the good stuff you want a relational DB for as well.

# ? Apr 26, 2019 15:04

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

LifeLynx posted:

Sure! Whatever works best and is easier to work with.

Ruby on Rails? A quick Google says there's some integration thing I can do with React, but why?

You can run RoR in just API mode and remove the templating stuff, and then you just expose your endpoints.

Django is also a great choice, only chose RoR because its what my work uses.

# ? Apr 26, 2019 16:07

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 04:39

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

ddiddles posted:

You can run RoR in just API mode and remove the templating stuff, and then you just expose your endpoints.

Django is also a great choice, only chose RoR because its what my work uses.

Could I use WordPress for the same effect? I know PHP is kind of disdained here, but I know it well. I know I can read from the API, but post to?

# ? Apr 26, 2019 16:58

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »