These are chat archives for FreeCodeCamp/HelpJavaScript

25th
Jan 2019
Brad
@bradtaniguchi
Jan 25 00:27
sigh I setup notifications to get on my phone, email, and slack, and yet the person reporting the issue still has to personally ping me that the have a problem, and then restate the entire bug in chat :/
Jason Luboff
@JLuboff
Jan 25 00:33
You probably should fix the problem so they don't do that anymore :P
Brad
@bradtaniguchi
Jan 25 00:40
also its critical even tho its a feature that I literally didn't even know we have, like if this is critical.... whats not a critical bug haha
Jason Luboff
@JLuboff
Jan 25 00:41
heh
Well got my Delete and Up/Down deal working. Still need to modify things a bit but its working
Brad
@bradtaniguchi
Jan 25 00:46
Nice :D
Jason Luboff
@JLuboff
Jan 25 00:48
Now just to finish up some validation stuff...and refactor...and...
Brad
@bradtaniguchi
Jan 25 00:53
Add tests :P
Jason Luboff
@JLuboff
Jan 25 00:54
I think for the main functions I do. But I haven't set up e2e tests or snapshot tests...
Pagnito
@Pagnito
Jan 25 01:03
hey if i use twitter passport strategy and sign up for their dev account and agree to their terms, is there something i should know about those terms that anyone knows about?
Brad
@bradtaniguchi
Jan 25 01:04
Are you asking if someone read the terms and conditions of twitter?
Christopher McCormack
@cmccormack
Jan 25 01:04
Well they do require you offer them your first born child but nothing too bad to worry about
Pagnito
@Pagnito
Jan 25 01:04
haha
yea basically if someone has read em
Brad
@bradtaniguchi
Jan 25 01:06
Who has ever read the terms and conditions to anything? XD
Pagnito
@Pagnito
Jan 25 01:08
lol
i feel like they ask too many questions when i create an app with twitter
i gotta tell em about my app and shit dfuk
they can easily read that shit implement some idea way before me
Christopher McCormack
@cmccormack
Jan 25 01:20
That's pretty much what you're giving away, just assume it
Amit Patel
@AmitP88
Jan 25 01:25
Hey guys, do you think hamburger menus are still good to use this year or are they severely outdated?
Hills
@Hillsie
Jan 25 01:25
@Pagnito haha, yeah . the easiest way to read them is to listen to them. What I do is setup accessiblity options on the mac, highlight the text and playback on a level as fast as my brain can comprehend.
Pagnito
@Pagnito
Jan 25 01:26
@Hillsie oof
Hills
@Hillsie
Jan 25 01:26
What you do is just say that it’s for learning. Later on you can change it.
Brad
@bradtaniguchi
Jan 25 01:27
@AmitP88 whats wrong the hamburger menu exactly? (Im a material design guy, its still in the spec haha)
Amit Patel
@AmitP88
Jan 25 01:28
@bradtaniguchi Idk, I've been reading online that ppl say it's bad to use and that it's outdated, etc lol
I'm with you though, I don't see anything wrong with them
I just wanted to see what other ppl think :)
Hills
@Hillsie
Jan 25 01:28
Nothing bad, guess it’s preference based.
Brad
@bradtaniguchi
Jan 25 01:29
Yup, up to you how you want to design it
Hills
@Hillsie
Jan 25 01:29
Design preferences evolve.
Amit Patel
@AmitP88
Jan 25 01:29
Gotcha. I was just worried if employers might look down upon it lol
Hills
@Hillsie
Jan 25 01:30
Nah, just fire the question right back at them. What’s your preference?
Amit Patel
@AmitP88
Jan 25 01:30
lol ok
Hills
@Hillsie
Jan 25 01:31
:->
Amit Patel
@AmitP88
Jan 25 01:31
Brad
@bradtaniguchi
Jan 25 01:31
I mean, thats like not employing someone base upon their taste in music XD. If you dont' get hired because you have a hamburger menu, then they are.... haumburger-menu-ist :P
Amit Patel
@AmitP88
Jan 25 01:32
lol I see haha
I was thinking they might be like "oh, this guy's using a hamburger menu in 2019. He's not up to the latest design trends"
Hills
@Hillsie
Jan 25 01:33
if you are feeling insecure about it, change it. At least it makes you feel better.
Brad
@bradtaniguchi
Jan 25 01:33
XD, go into almost any of google's apps right now and look in the upper left, yea it's still a thing :P
Hills
@Hillsie
Jan 25 01:33
That too.
Tell them to look at the google apps
Amit Patel
@AmitP88
Jan 25 01:34
lol gotcha
ok, sticking with hamburger menu haha. Thanks guys :)
Brad
@bradtaniguchi
Jan 25 01:34
But seriously I highly doubt employers care about what you have now haha, as long as you can do what they want
Amit Patel
@AmitP88
Jan 25 01:35
lol for sure
Hills
@Hillsie
Jan 25 01:35
more likely to check out your code
Amit Patel
@AmitP88
Jan 25 01:36
oh also, do you think Redux will be replaced by Context API or not really?
Hills
@Hillsie
Jan 25 01:36
Did you dot your i’s and cross your t’s , is your code readable… etc etc
Amit Patel
@AmitP88
Jan 25 01:36
I think so, although with my portfolio site, I have some repeated code that I need to refactor
here's my github if you wanna browse: https://github.com/AmitP88
Christopher McCormack
@cmccormack
Jan 25 01:38
@AmitP88 hamburger menu is easily recognizable by users. no reason not to keep using it
Amit Patel
@AmitP88
Jan 25 01:39
@cmccormack That's what I was thinking too actually. Idk why articles online were so against it
Christopher McCormack
@cmccormack
Jan 25 01:41
Probably designers talking about design, but you shouldn't really worry about what they're doing
Unless they offer something better, of course
Amit Patel
@AmitP88
Jan 25 01:42
For sure. I'm probably over-analyzing as usual lol
Hills
@Hillsie
Jan 25 01:47
Yeah, there is a fair bit to soak up in this industry. Designers always trying to come up with something fresh and unique to stand out. Design is fashionable. Sounds interesting, probably could burrow down into that space. For now, begining to click with JS.
haha... look at gitter. left corner. Hamburger
Amit Patel
@AmitP88
Jan 25 01:49
ah you're right! haha
Yeah, definitely sticking with hamburger then haha
Brad
@bradtaniguchi
Jan 25 01:50
gitter's ui is kinda wack, I wouldn't follow it tho (hamburger on the bottom corners, double side navs)
Hills
@Hillsie
Jan 25 01:51
lol, yea.
not a one man job
Amit Patel
@AmitP88
Jan 25 01:52
yeah, I was wondering about that when I first started using gitter
I was like wtf? why is it down here? lol
btw, do you think Redux will still be in demand this year? or will context API eventually replace it? I've been getting into redux so I'm just wondering if I should continue with it
Brad
@bradtaniguchi
Jan 25 01:57
I believe things will always change, but the concept behind redux is good to understand, so even if it falls out of favor, you will learn something that "pushed" the idea for contexts. I personally think contexts aren't "the be all end all" solution either. It reminds me waaaayyyy to much of $scope from angularjs
abraham anak agung
@padunk
Jan 25 01:58
graphQL will eventually replace Redux :smile:
Hills
@Hillsie
Jan 25 01:59
think JavaScript. Frameworks and patterns change for what ever reason.
ditto….
Amit Patel
@AmitP88
Jan 25 01:59
Damn, I was hoping my redux skills would still be useful haha
I was just starting to get into it too (I've built two projects with it so far)
Pagnito
@Pagnito
Jan 25 02:00
hey i can user passport serialize with local strategy too right?
Brad
@bradtaniguchi
Jan 25 02:00
I'd learn context, and still use redux so you can choose between either or under the circumstances presented. Don't just jump and learn 1 over another "cuse people said so"
Amit Patel
@AmitP88
Jan 25 02:02
Yeah, I might just build 1 more redux app, then build 2 context API apps
that way I know a little of both
I feel like I missed the boat with redux though. I was just starting to enjoy using it lol
abraham anak agung
@padunk
Jan 25 02:04
don't learn redux, learn hooks :smiling_imp:
Amit Patel
@AmitP88
Jan 25 02:05
ah f* lol
dammit, idk what to choose, hooks, context API, or graphQL
ugh
Christopher McCormack
@cmccormack
Jan 25 02:05
learn context AND hooks
Amit Patel
@AmitP88
Jan 25 02:06
ok, here's what I'll do: 1 project for Hooks, 1 project for context, and 1 for graphQL
Pagnito
@Pagnito
Jan 25 02:07
oh boi
Amit Patel
@AmitP88
Jan 25 02:07
I've built 2 projects for redux so I think I'm ok in that area for now
Christopher McCormack
@cmccormack
Jan 25 02:09
I'd start with context first so https://reactjs.org/docs/hooks-reference.html#usecontext makes more sense
Pagnito
@Pagnito
Jan 25 02:10
so r the hooks basically like redux?
codingfreak2018
@codingfreak2018
Jan 25 02:10
Hello guys. I am trying to build a battleship game. When the user hits 3 the alert gives alert("HIT");
But when i press the ok button then it rapidly jumpst to the else statement

        if (guess == location1 || guess == location2 || guess == location3) {
            alert("HIT");
            hits = hits + 1;

            if (hits == 3) {


                isSunk = true;

                alert("You sank my battleship!")


            } else {
                alert("MISS");

            }
        }
abraham anak agung
@padunk
Jan 25 02:11
nope, it just another abstraction to replace class and this
Amit Patel
@AmitP88
Jan 25 02:11
@cmccormack will do. Thanks for the link. :)
codingfreak2018
@codingfreak2018
Jan 25 02:26
Can someone help me
abraham anak agung
@padunk
Jan 25 02:32
@codingfreak2018 idk battleship, but shouldn't your else should be on the outer if?
codingfreak2018
@codingfreak2018
Jan 25 02:33
Omg
thanx
Didnt think logically
should have read my code
Pagnito
@Pagnito
Jan 25 02:34
hey @padunk u know about useState in react?
after readin ur guys convo i started lookin into it but im really confused about the useState
abraham anak agung
@padunk
Jan 25 02:34
@codingfreak2018 idk if that work or not, cause idk the game, but try indenting your code properly tho :smile:
@Pagnito hooks? a little bit
Pagnito
@Pagnito
Jan 25 02:34
yea
i don get how useState works
codingfreak2018
@codingfreak2018
Jan 25 02:35
@padunk it worked
abraham anak agung
@padunk
Jan 25 02:35
@Pagnito try my counting code pen : https://codepen.io/padunk/pen/LgKRZe :smile:
codingfreak2018
@codingfreak2018
Jan 25 02:35
its 03:35
i shoulda go to sleep
abraham anak agung
@padunk
Jan 25 02:35
bascically it just abstracting away the use of this.setState
Pagnito
@Pagnito
Jan 25 02:36
@padunk what are the [ ] for?
abraham anak agung
@padunk
Jan 25 02:37

@Pagnito

const [count, setCount] = React.useState(0);
// same as
this.state = {
  count: 0,
}

and setCount is this.setState({ count: //new value })

@Pagnito it just array destructuring syntax, same as object destructuring syntax tho
Pagnito
@Pagnito
Jan 25 02:38
so even tho C starts with a capital?
abraham anak agung
@padunk
Jan 25 02:38
which C ?
Pagnito
@Pagnito
Jan 25 02:38
setCount
as ppose to setState({ count
abraham anak agung
@padunk
Jan 25 02:39
yeah, you can name it whatever you want i think. but convention is must use set as prefix
const [count, setMyCount] = React.useState(0);
Pagnito
@Pagnito
Jan 25 02:40
where do u define setMyCount tho
abraham anak agung
@padunk
Jan 25 02:41
@Pagnito you don't need too. It is array destructuring syntax. It come with React.useState()
I didn't go really deep with it just playing it a liitle bit. The syntax is confusing first time
You can read the docs here https://reactjs.org/docs/hooks-intro.html
Christopher McCormack
@cmccormack
Jan 25 02:43
@padunk I think you explained nicely
Pagnito
@Pagnito
Jan 25 02:43
so if i use setUserName, it will setState({username: ?
abraham anak agung
@padunk
Jan 25 02:43
@cmccormack thanks mate, Hooks is awesome tho :smile:
@Pagnito if you put it like const [username, setUserName] = React.useState('pagnito');
yes it will set the state
Pagnito
@Pagnito
Jan 25 02:45
i see
k thnx
abraham anak agung
@padunk
Jan 25 02:46
@Pagnito :thumbsup: you can even make your own hooks with React Hooks https://reactjs.org/docs/hooks-custom.html
Pagnito
@Pagnito
Jan 25 02:47
nice
im keep watching the vid for the hooks and look into again later
abraham anak agung
@padunk
Jan 25 02:48
Ryan Florence section with hooks is amazing. I love it
if you look at my codepen, you can compare between using hooks and the old class @Pagnito
Pagnito
@Pagnito
Jan 25 02:50
yea i noticed, ima def be looking into it as i learn these hooks
Pagnito
@Pagnito
Jan 25 03:06
@padunk i cant seem to use useState, i try to console log it and its undefined
abraham anak agung
@padunk
Jan 25 03:10
@Pagnito how do you use it?
Pagnito
@Pagnito
Jan 25 03:10
i think its because i had the wrong react version
hold on
how do i specify in npm shell command which version
is it npm install react@16.7.0-alpha
abraham anak agung
@padunk
Jan 25 03:12
new one is React v16.8.0-alpha.1
Pagnito
@Pagnito
Jan 25 03:13
k
Brad
@bradtaniguchi
Jan 25 03:56
I just realized in my new profile pic I'm wearing two headphones for some reason XD
Pagnito
@Pagnito
Jan 25 04:17
lol
Estdy hongda
@Estdy
Jan 25 06:16

function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = "";
// 请把你的代码写在这条注释以下
result=myNoun+" "+myAdjective+" "+myVerb+" "+myAdverb;
// 请把你的代码写在这条注释以上
return result;
}

wordBlanks("dog", "big", "ran", "quickly"); // 你可以修改这一行来测试你的代码

how to do the things cool and clean
Yashwardhan Pauranik
@yashwp
Jan 25 06:23
lost_night
@Remakeo
Jan 25 07:47
wordBlanks("cat", "little", "hit", "slowly") 应该包含所有传入的单词并且单词之间要有间隔(可以添加任意修饰的单词).
这句话什么意思啊
Yashwardhan Pauranik
@yashwp
Jan 25 08:04
Idowu Wasiu
@Hoxtygen
Jan 25 08:25
hi guys, need help to see how to make this code better
static deleteParty(req, res) {
    const id = parseInt(req.params.id, 10);
    let deleted;
    Parties.filter((party, index) => {
      if (party.id === id) {
        Parties.splice(index, 1);
        deleted = party;
      }
    });
    if (deleted) {
      return res.status(200).json({
        status: 200,
        message: 'party deleted successfully',
      });
    }
    return res.status(404).json({
      status: 404,
      error: 'Party not found',
    });
  }
abdellah hariti
@a-hariti
Jan 25 08:52

hi, Array.prototype.filter returns a new array where the callback you supplied returns true, in your case you can just:

const previousPartiesLength = Parties.length;
const Parties = Parties.filter( party => party.id !== id),
                                newPartiesLength = Parites.length;

that way the new parties will hold the the parties that don't have the id of interest.
As per the part if( deleted ) you can replace it with checking if the newPartiesLength is less than previousPartiesLength (meaning that some party was filtered out) like so:

if (newPartiesLength < previousPartiesLength) {
  return res.status(200).json({
    status: 200,
    message: "party deleted successfully"
  });
} else {
  return res.status(404).json({
    status: 404,
    error: "Party not found"
  });
}
Shekhar Ramola
@shekharramola
Jan 25 10:18
window.scrollTo method will not work if I am writing a fake click function?
Jason Luboff
@JLuboff
Jan 25 16:05
Morning :wave:
Christopher McCormack
@cmccormack
Jan 25 16:09
@JLuboff heya gm
Jason Luboff
@JLuboff
Jan 25 16:10
Yo. Morning
Whats happening?
Christopher McCormack
@cmccormack
Jan 25 16:14
helping people at work solve a problem I have nothing to do with
Jason Luboff
@JLuboff
Jan 25 16:15
Lol...always fun when that happens
Christopher McCormack
@cmccormack
Jan 25 16:15
I've found if you let indecisive people try to run a call it takes forever, better to just step in and guide the whole thing if you can lol
even if you're WAY outside your role
your results may vary of course lol
what about you?
Jason Luboff
@JLuboff
Jan 25 16:16
I can be pretty indecisive...but.. thats besides the point here since I'm not on that call lol.
Just getting started with the day
See how much I can get done today
Christopher McCormack
@cmccormack
Jan 25 16:18
all of it maybe?
Jason Luboff
@JLuboff
Jan 25 16:18
Perhaps. Who knows!
Think mostly going to be working on some validation stuff, backend DB stuff...and whatever other fixes I have notated
Pagnito
@Pagnito
Jan 25 16:20
hey whats the difference between all the hashes types like sha1, md5, sha256 etc
Jason Luboff
@JLuboff
Jan 25 16:20
Varying amounts of strength
Pagnito
@Pagnito
Jan 25 16:20
is there like standard that ppl use for passwords?
Jason Luboff
@JLuboff
Jan 25 16:21
The stronger the better
Like md5 I'm pretty sure is not great to use for passwords
Pagnito
@Pagnito
Jan 25 16:23
what about hmac vs createHash?
oh it looks like hmac, has a secret along with it
Jason Luboff
@JLuboff
Jan 25 16:31
I'm not familar with hmac
Christopher McCormack
@cmccormack
Jan 25 16:39
I think hmac uses a pre-shared key or public key to sign the hash of the payload to ensure the source is authenticated right?
Christopher McCormack
@cmccormack
Jan 25 16:49
md5 is pretty much useless now, SHA1 is being deprecated in some places, so better to use the SHA2 suite of protocols
Jason Luboff
@JLuboff
Jan 25 16:53
@cmccormack Do you deal with a lot of encryption?
Christopher McCormack
@cmccormack
Jan 25 16:54
Some, I manage our IPSec infrastructure
But you don't need to know a ton to use it. I did do a little security in college but forgot most of it. I keep meaning to read those books again
Jason Luboff
@JLuboff
Jan 25 16:55
Ya same here...did a security+ class..but forgot most of it
Pagnito
@Pagnito
Jan 25 18:44
hey im trying to get email field from twitter passport strategy, but the dev twtter console is sayin i gotta provide terms of service and privacy policy urls, anyone familiar with this?
Jason Luboff
@JLuboff
Jan 25 18:48
Does the T&A not get presented the first time a first auth's to your site using twitter?
Pagnito
@Pagnito
Jan 25 18:59
i think its talkin about terms of servie on my own app, i remember i had to get somethin similar for facebook auth strategy a while back
but im still not very sure what this all means, and i kinda wanna see if this app will have real world application so i dont wanna fck it up, as opposed to the course project i was doing
Riadh
@KWFE
Jan 25 19:00
hi i need help with this one
function gradeCalculator(grade) {
  //your code goes here...
 if (grade >= 90){
   return "A";
 } else if (80 <= grade && grade <= 89){
   return "B";
 } else if ( 70 <= grade && grade <= 79){
   return "C";
 } else if ( 60 <= grade && grade <= 69){
   return "D";
 };
}

//Uncomment the lines below to test your code

//console.log(gradeCalculator(92)); //=> "A"
console.log(gradeCalculator(82)); //=> "B"
//console.log(gradeCalculator(70)); //=> "C"
console.log(gradeCalculator(61)); //=> "D"
console.log(gradeCalculator(43)); //=> "F"
Brad
@bradtaniguchi
Jan 25 19:01
@KWFE Looks like your on the right path, just need to get the logic down
Jason Luboff
@JLuboff
Jan 25 19:01
You need to have return "F" somewhere
Brad
@bradtaniguchi
Jan 25 19:01
^
Jason Luboff
@JLuboff
Jan 25 19:02
@bradtaniguchi What up
Riadh
@KWFE
Jan 25 19:05
@bradtaniguchi yes but i want to make is briefer @JLuboff yes i know just want to make the code shorter
Jason Luboff
@JLuboff
Jan 25 19:07
Unless you get into maybe regex..I don't know that it can be much shorter than it is. I mean.. you could just have if statements only and no else ifs
Simon Cordova
@gbsimon87
Jan 25 19:07
Ey oh!
whats happening?
Jason Luboff
@JLuboff
Jan 25 19:08
Whats up man
Riadh
@KWFE
Jan 25 19:09
@JLuboff i am not sure would you check with me for a shorter solution
Jason Luboff
@JLuboff
Jan 25 19:10
As I said, I don't know that it can be much shorter. Maybe something with regex, but I'm not that great with regex

I guess this would be kind of shorter

const gradeCalculator = (grade) => grade <= 59 ? "F" : grade <= 69 ? "D" : grade <= 79 ? "C" : grade <= 89 ? "B" : "A";

but...not the most readable

So I guess you could go that route with your if statements, starting with checking for low grades and work your way up
Simon Cordova
@gbsimon87
Jan 25 19:14
@JLuboff what's good man, I've had a toughey this week so much work and complex
how you doing
Jason Luboff
@JLuboff
Jan 25 19:14
Doing alright. Getting close to be done with the first part of my React project lol. Showed it off in a meeting the other day and got some feedback so made some changes
Riadh
@KWFE
Jan 25 19:14
@JLuboff thanks man i think i'll just keep the code as it is till i'll start working on regex
Jason Luboff
@JLuboff
Jan 25 19:15
A regex solution (if there is one) maybe longer and slower
There's really nothing wrong with your solution besides missing return "F"
Jason Luboff
@JLuboff
Jan 25 19:48
Anybody else always write their .filter() statements the wrong way (remove what you want instead of what you don't want)?
Pagnito
@Pagnito
Jan 25 19:51
hey anyone know how google storage works, is it basically stored on the file system?
enestatli
@enestatli
Jan 25 19:53
by saying google storage, you mean 'google drive' ?
Pagnito
@Pagnito
Jan 25 19:54
nah, the firebase functions
enestatli
@enestatli
Jan 25 19:59
no idea, I hope one day I will be able to answer one of your 'advanced' questions :D
Pagnito
@Pagnito
Jan 25 20:01
lol
Brad
@bradtaniguchi
Jan 25 20:15
Man had a meeting haha
Brad
@bradtaniguchi
Jan 25 20:46
@Pagnito Oh I didnt read your comment, yes google storage is a blob storage, so you can store "blob" data (files)
Pagnito
@Pagnito
Jan 25 20:46
sweet thnx
im trying to create absolute paths in webpack so can have src/components/comp instead of lets say ../../components/comp
resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
this doesnt seem to work
Brad
@bradtaniguchi
Jan 25 20:52
I could always check my angular config (they have it setup to do that), but not right now, about to step out
Pagnito
@Pagnito
Jan 25 20:53
k
Pagnito
@Pagnito
Jan 25 21:07
ended up using aliases for now
Pagnito
@Pagnito
Jan 25 21:17
hey what do u guys think is a better file strucutre
src
   components
   styles
or
src
   components
       header
          header.js
          header.css
Jason Luboff
@JLuboff
Jan 25 21:20
where would header files go in the first example?
Pagnito
@Pagnito
Jan 25 21:20
in comonents for js files and styles for css
Jason Luboff
@JLuboff
Jan 25 21:20
I'd probably go with the first one then
Pagnito
@Pagnito
Jan 25 21:21
k, thats what im doing too, tho somethin seems appealing about the other one atm
Brad
@bradtaniguchi
Jan 25 21:33
I have something like:
  • src
    -core
    -header
    -footer
    -components
    -page1
So header/footer/sidenav/top-bar core stuff goes into its own place, as they aren't the usual run of the mill "view" component, or re-usable component
Uh all the stuff under the core is suppose to be indented haha
and I usually have other stuff in the core that doesn't pertain to just components (other angular stuffs)
Jason Luboff
@JLuboff
Jan 25 21:46
If I want an empty element in an array i.e [ , 2] I basically need to use null right?
Brad
@bradtaniguchi
Jan 25 22:01
I'd use undefined
But it depends on how your defining an "empty" element
Jason Luboff
@JLuboff
Jan 25 22:20
Hmmm.. ya
The reason I was thinking of using null was due to the use case. I'm swapping position of two elements that are next to each other, but its possible that the array only has one element but it needs to be at index 1 therefore index 0 would be empty (whether I go with null or undefined..)
That empty position will end up being filled after
Brad
@bradtaniguchi
Jan 25 22:32
I personally would use undefined, but yea just stay consistent
Jason Luboff
@JLuboff
Jan 25 22:34
I just have to play with it and see what happens lol. Writing my TDD's right now though
Brad
@bradtaniguchi
Jan 25 22:38
Nice :+1:
Jason Luboff
@JLuboff
Jan 25 22:40
I feel more accomplished by writing the tests :joy:
Pagnito
@Pagnito
Jan 25 22:44
is redux using context api?
im using redux, and i just noticed this
Screen Shot 2019-01-25 at 5.48.10 PM.png
Brad
@bradtaniguchi
Jan 25 22:50
@JLuboff Haha good, this morning I listened to a guy talk about testing, he said "he never runs the app locally, he only runs in it 'production'" he only runs tests locally so its super fast
Jason Luboff
@JLuboff
Jan 25 22:52
@bradtaniguchi I still don't quite get how you can test every single thing but I'll get there
Brad
@bradtaniguchi
Jan 25 22:57
He took an approach where there was more integration tests than anything
So it was pretty much e2e, but no database calls (so its fast)
Jason Luboff
@JLuboff
Jan 25 22:57
Ah.. all mock testing?
Brad
@bradtaniguchi
Jan 25 23:01
Well it's in the middle, he would call all the code except where it would make a database call, there he would do mocking.
He talked about how there's two camps, 1 is a piramid for TDD, which is having a lot of unit-tests, some integration test, and a few e2e tests. The other is a "diamon" approach, where you have a few unit tests, lots of integration tests, and a few e2e tests.
The reasoning was when you make changes to the code, you end up having to change a lot of unit-tests, but integration tests should be easier to change
Jason Luboff
@JLuboff
Jan 25 23:02
Interesting... my current e2e tests does all the database calls, clicks, etc so it does take a while but.. atleast I don't have to do it myself lol
Jason Luboff
@JLuboff
Jan 25 23:11
Can't pass a test if you expect the wrong thing :joy:
Simon Cordova
@gbsimon87
Jan 25 23:14
@JLuboff I got a little question for you
Jason Luboff
@JLuboff
Jan 25 23:14
Alright
Simon Cordova
@gbsimon87
Jan 25 23:14
struggling with something FCC had helped so much two years ago, but I'm out of practice
image.png
Jason Luboff
@JLuboff
Jan 25 23:15
Alright
Simon Cordova
@gbsimon87
Jan 25 23:16

Say I've got a playersData array...

How can I loop through the array and create a table, the thing is I'd like the table headings to be the keys of the arrays (name, username, etc...) and the table body made up of rows with the respective data

Let me know if that makes sense
Jason Luboff
@JLuboff
Jan 25 23:17
Use Object.keys() on the first element to get the headers... and then iterate over each object to make up your rows?
Simon Cordova
@gbsimon87
Jan 25 23:18
I've tried that to no avail! :(
I did object keys on the first element as I don't need the headers repeated
Jason Luboff
@JLuboff
Jan 25 23:18
playersData.map((player) => Object.entries(player)?
Er that might not work actually
Well.. actually ya it would give you back an array of the values
But then I guess you'd need to iterate over that again..
Simon Cordova
@gbsimon87
Jan 25 23:20
That's why I thought I'd do that on the first array only, so it doesn't repeat
Brad
@bradtaniguchi
Jan 25 23:20
  1. get the headers from the first player (object.keys(playersData[0]))
Jason Luboff
@JLuboff
Jan 25 23:20
Ya... 1 is what I was saying to do
Brad
@bradtaniguchi
Jan 25 23:20
  1. iterate over each of the elements to do the rows
Jason Luboff
@JLuboff
Jan 25 23:20
But its Object.keys homie!
Brad
@bradtaniguchi
Jan 25 23:20
Yea you iterate over the first person "more than once" but were talking about 1 person haha
this is assuming the keys are the same for ever player (not like some have them and some don't hehe)
Simon Cordova
@gbsimon87
Jan 25 23:22
For the moment I will make the keys the same for every player

For some reason

if (playersData) {
    const headings = Object.keys(playersData[0])
    console.log('headings', headings);
}

For some reasons I'm getting 'Cannot convert undefined or null to object', even though playersData exists

Jason Luboff
@JLuboff
Jan 25 23:24
Anybody see a different way to write this? Tests are passing..but.. I'm not crazy about it lol I feel like there's a cleaner way to do it
const indexSwap = (array, initialIndex, swapIndex) => {
  const arrayAtSwapExists = array[swapIndex] !== undefined;
  if (!array.length) {
    return [];
  }

  if (arrayAtSwapExists) {
    array[initialIndex].stepNumber = swapIndex + 1;
    array[swapIndex].stepNumber = swapIndex;

    [array[initialIndex], array[swapIndex]] = [
      array[swapIndex],
      array[initialIndex]
    ];

    return array;
  }

  if (!arrayAtSwapExists) {
    array[initialIndex].stepNumber = swapIndex + 1;
    array[swapIndex] = array[initialIndex];
    array[initialIndex] = null;

    return array;
  }
};
@gbsimon87 If you log playersData before...is it defined?
Man...thats bad naming structure on my part... should probably be elementAtSwapExists lol
Simon Cordova
@gbsimon87
Jan 25 23:26

Yes it is defined before, that's whats strange

I usually check for empty/null undefined arrays like this...

if (!Array.isArray(array) || !array.length) {
  // array does not exist, is not an array, or is empty
}
Jason Luboff
@JLuboff
Jan 25 23:26
And what if you just do Object.keys(playersData)?
Simon Cordova
@gbsimon87
Jan 25 23:27
The first check weeds out values like null and undefined
Object.keys(playersData) works
Jason Luboff
@JLuboff
Jan 25 23:28
Well I have 3 test cases..
  1. Empty array, thus nothing to swap, return back empty array
  2. Array with a single element that needs to be put into the second position
  3. Elements to swap both exist, so swap and change stepNumber
    And I just thought of a fourth case too hmm
Simon Cordova
@gbsimon87
Jan 25 23:28
got it to work
if (playersData && playersData[0]) {
      const headings = Object.keys(playersData[0])
      console.log('headings', headings);
    }
Jason Luboff
@JLuboff
Jan 25 23:29
Odd
Simon Cordova
@gbsimon87
Jan 25 23:31
The value must not be there yet
abraham anak agung
@padunk
Jan 25 23:40
@JLuboff what is that stepNumber do?
Jason Luboff
@JLuboff
Jan 25 23:41
Specifies the job step number. Guess I could always omit that and just use index lol
abraham anak agung
@padunk
Jan 25 23:43
oh, ok. less code without it :smile:
Jason Luboff
@JLuboff
Jan 25 23:43
Ya thats true
Simon Cordova
@gbsimon87
Jan 25 23:56
@JLuboff want to see how I got it?
Jason Luboff
@JLuboff
Jan 25 23:57
sure
Simon Cordova
@gbsimon87
Jan 25 23:57
I'll put it on codepen so I don't spam this chat one sec
It's all about the !! combined with && when iterating