These are chat archives for FreeCodeCamp/Help

9th
May 2018
Amit Patel
@AmitP88
May 09 2018 02:21
@Marmiz @khaduch hey guys, sorry for not replying earlier. I was at work and then I had to sleep lol. But I did read your suggestions. Thanks for your help guys :)
CamperBot
@camperbot
May 09 2018 02:21
amitp88 sends brownie points to @marmiz and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1220 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 3911 | @khaduch |http://www.freecodecamp.org/khaduch
Claudio Restifo
@Marmiz
May 09 2018 02:27
@AmitP88 :clap: :clap:
(no clue what you talking about :shipit: but) I'm glad :sparkles:
Amit Patel
@AmitP88
May 09 2018 02:28
@Marmiz lol yesterday I had a question about linking my break and work timers on my pomodoro :P
Claudio Restifo
@Marmiz
May 09 2018 02:28
Ooooh that one! does the jsbin still works?
Kyle Holm
@thekholm80
May 09 2018 02:31
@Marmiz I'm an idiot. the last time i used graphql i didn't even realize there were components in the react-apollo library (or maybe at that time they didn't exist). either way, it sure makes life easier
Amit Patel
@AmitP88
May 09 2018 02:32
@Marmiz not sure lol. I haven't checked since yesterday
Claudio Restifo
@Marmiz
May 09 2018 02:35
@thekholm80 yeh. They added the components in the 2.1 version, before that (and the one that I'm using in production) uses HOC
way easier to write components with one of those :)
Kyle Holm
@thekholm80
May 09 2018 02:35
i really like it
Claudio Restifo
@Marmiz
May 09 2018 02:40
@thekholm80 you can do all sort of props and options manipulations in there. It's actually super clean :)
Kyle Holm
@thekholm80
May 09 2018 02:40
mine isn't clean lol
but it makes more sense to me
Claudio Restifo
@Marmiz
May 09 2018 02:40
I hate only the fact that with apollo-graphql is super verbose and "difficult" to just perform a basic fetch in response to an action
Kyle Holm
@thekholm80
May 09 2018 02:41
i hate the cache
Claudio Restifo
@Marmiz
May 09 2018 02:41
@thekholm80 I <3 the cache. Such fast. Much loading
Kyle Holm
@thekholm80
May 09 2018 02:41
lol
const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'network-only',
    errorPolicy: 'ignore',
  },
  query: {
    fetchPolicy: 'network-only',
    errorPolicy: 'all',
  }
};

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  defaultOptions
});
network-only ftw
i had trouble with loading from the cache after reloading the page and i don't want to spend the rest of my life figuring out how to deal with it
i'm fortunate that my apps all have exactly 0 users, so speed isn't a factor
Claudio Restifo
@Marmiz
May 09 2018 02:49
const authMiddleware = new ApolloLink((operation, forward) => {...})

const errorMiddleware = onError(({ graphQLErrors, networkError }) => {...})

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(...);

const configureApolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
});
No clue how half of this actually works... but it does so I'm ok with it :)
Kyle Holm
@thekholm80
May 09 2018 02:49
lol
i read a little about ApolloLink but my use-case is a bit simple for that
Muhammad Anas Qasmi
@m1anas
May 09 2018 08:11
Hello All!
class Leaderboard extends React.Component{
  constructor(props){
    super(props);
    this.state={
      error:null,
      loaded:false,
      campers:[],
      link:'alltime'
    };
    this.allSwapper=this.allSwapper.bind(this);
    this.recentSwapper=this.recentSwapper.bind(this);
  }
  allSwapper(){
    this.setState({
      link:'alltime'
    });
  }
  recentSwapper(){
    this.setState({
      link:'recent'
    });
  }
  componentDidMount(){
  fetch('https://fcctop100.herokuapp.com/api/fccusers/top/'+this.state.link)
    .then(response=>response.json())
    .then(
      (data)=>{
      this.setState({
        loaded:true,
        campers:data,
      });
      },
      (error)=>{
        this.setState({
          loaded:true,
          error
        });
      }
    )
  }
  render(){
    const{error,loaded,campers}=this.state;
    if(error){
      return <div>Error:{error.message}</div>;
    }else if(!loaded){
      return <div>Loading...</div>;
    }else{
      return(
        <div>
          <h1>Leaderboard</h1>
          <table align='center'>
            <tr>
              <th>Name</th>
              <th><button onClick={this.allSwapper}>All-time points</button></th>
              <th><button onClick={this.recentSwapper}>Last month points</button></th>
            </tr>
            {this.state.campers.map(item=>(
            <tr key={item.username}>
                <td>{item.username}</td>
                <td>{item.alltime}</td>
                <td>{item.recent}</td>
            </tr>
            ))}
          </table>
        </div>
      );
    }
  }
}
ReactDOM.render(<Leaderboard/>,document.getElementById('main'));
This is my React code. The buttons are working fine but when they change the 'state' of the 'link' the component does not rerenders. :(
The component DOES rerender if I put a JS sort function for the buttons for example but it is not rerendering when the state of link is changed
Muhammad Anas Qasmi
@m1anas
May 09 2018 08:16
Muhammad Anas Qasmi
@m1anas
May 09 2018 08:24
You probably need to open codepen in browser as it is not showing me the result here
Aditya
@ezioda004
May 09 2018 08:27
@m1anas componentDidMount()only gets called once in lifetime ie the first time the elements render, so seems like you're making AJAX request again which is why it isnt working. To fix you can make 2 separate AJAX request initially and save them to state.
Muhammad Anas Qasmi
@m1anas
May 09 2018 09:12
@ezioda004 so I have to copy all the fetch code again just for one word :worried:
@ezioda004 anyway thank you
CamperBot
@camperbot
May 09 2018 09:13
m1anas sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 556 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Claudio Restifo
@Marmiz
May 09 2018 09:16
@m1anas you can have it as a method and call it from both didmount and click (or whatever you use)
Kranti Nebhwani
@darkphotonKN
May 09 2018 09:27
Is there anyway to make the title here be on the same line as the nav ? https://codepen.io/darkphotonKN/pen/RyLPXM
The nav is one line below it. I tried display: inline-block etc it doesnt work
Muhammad Anas Qasmi
@m1anas
May 09 2018 09:33
@Marmiz I have to do both the fetch es in componentDidMount
Claudio Restifo
@Marmiz
May 09 2018 09:36
@m1anas you can write a function that accept a url and fetch on that url :)
fetchThis = url => fetch(url).then([...])

fetchThis('aURL')
fetchThis('aDifferentUrl')
Muhammad Anas Qasmi
@m1anas
May 09 2018 09:40
@Marmiz Interesting. Here is my code pen:
https://codepen.io/m1anas/pen/odpjGW
As you can see I am fetching twice (as the first answerer said to me) and saving both to different states so that I can swap between states by the click of a button.
@Marmiz How do you think you can shorten that code ?
Fahmi Syahrul yahya
@Fahmisyahya
May 09 2018 09:56
How to fixed Escape Sequences in Strings Challenge , i don't understand
Claudio Restifo
@Marmiz
May 09 2018 10:01
@m1anas perhaps something similar?
const fetch  = (url, callback) => fetch(url)then(callback)

fetch('allTime', (data) => setState({alltime}) )
fetch('recent', (data) => setState({recent}) )
also why swithing states? I'd simply have a recent and a alltime and render based on the currectly selected one :)
Muhammad Anas Qasmi
@m1anas
May 09 2018 10:07

@Marmiz

also why swithing states? I'd simply have a recent and a alltime and render based on the currectly selected one :)

have a what?? How can it be done by other than switching states?

Claudio Restifo
@Marmiz
May 09 2018 10:13

@m1anas you have two arrays containing two values.
In your component that map and render the arrays, simply pass which one to render as props.

Perhaps you mean the same when you said swap between states

Muhammad Anas Qasmi
@m1anas
May 09 2018 10:21
@Marmiz yes but then how do I set the buttons to change the props from recent to alltime? Right now I am changing the state of changer by the click of buttons which also rerenders the new output. I wanted to do the way you said it but was
unable to give the correct function to buttons
Claudio Restifo
@Marmiz
May 09 2018 10:29
@m1anas
handleSwitch = () => this.setState(prevState => ({whichOneToRender: prevState.render === 'alltime' ?  'recent' : 'alltime'}) );
Or any other variation of it :)
Muhammad Anas Qasmi
@m1anas
May 09 2018 10:40
@Marmiz samething dude. you used whichOneToRender in place of my changer. I wanted to eliminate this extra state and switch between the alltime and recent states without creating a third state. Seems like its not possible
Claudio Restifo
@Marmiz
May 09 2018 10:45
@m1anas I'd do that with a HOC, but for a simple app like that seems like an overkill :)
Michael S
@Ohshi60
May 09 2018 12:12
if i have installed a npm package(learnyoumongo) and as a dependency it has installed mongodb version 2.2.35 (found using npm ls -g) how do i access that version of mongodb?
Muhammad Anas Qasmi
@m1anas
May 09 2018 12:49

@Marmiz

@m1anas perhaps something similar?
```js
const fetch = (url, callback) => fetch(url)then(callback)

fetch('allTime', (data) => setState({alltime}) )
fetch('recent', (data) => setState({recent}) )
```

I tried this const of yours.

@Marmiz
https://codepen.io/m1anas/pen/odpjGW
There is hardly any decrease in length of code :smile:
@Marmiz thanks anyway. in future it might help when I need calls from more than 2 apis :smile:
CamperBot
@camperbot
May 09 2018 12:52
m1anas sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1222 | @marmiz |http://www.freecodecamp.org/marmiz
gishy1
@gishy1
May 09 2018 14:00
any one on code fights have a look and let me know
I was able to get the expected results into an array
but cant ove on from there
Below we will define an n-interesting polygon. Your task is to find the area of a polygon for a given n.

A 1-interesting polygon is just a square with a side of length 1. An n-interesting polygon is obtained by taking the n - 1-interesting polygon and appending 1-interesting polygons to its rim, side by side. You can see the 1-, 2-, 3- and 4-interesting polygons in the picture below.
Example

For n = 2, the output should be
shapeArea(n) = 5;
For n = 3, the output should be
shapeArea(n) = 13.
Input/Output
function shapeArea(n) {
//when n=1 then area =1
//when n=2 then area=5
//when n=3 then area =13
//when n=4 then area =25
//when n=5 then area =41 
//create an array that takes all n's into account from 0-100
//using n as a base create an empty array that houses the area of each n-position 
//formula for area =previous area+4*n
//area=[0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80]
//form =5
//newArray[1, 5, 13, 25, 41, 61, 85, 113, 145, 181, 221, 265, 313, 365, 421, 481, 545, 613, 685, 761, 841, null]
var nArray=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var area=[]; 
var newArray=[];  
for(var i=0;i<nArray.length;i++){   
 area[0]=1;
 area[i]=(4*nArray[i])
}

var form=nArray[1]+area[1];
for(var a=0;a<area.length;a++){  
newArray[0]=1;
 newArray[a+1]=newArray[a]+area[a+1]; 

}

 for(var x=0;x<newArray.length;x++){
  if(nArray[x+1]){
return newArray;   
   } 
 }   
}
Kyle Holm
@thekholm80
May 09 2018 16:23
good morning, /help
Nazar
@IsaakNazar
May 09 2018 16:25
@thekholm80 hey Kyle :wave:
Kyle Holm
@thekholm80
May 09 2018 16:26
@IsaakNazar how's your day going?
Nazar
@IsaakNazar
May 09 2018 16:29
@thekholm80 thanx, not bad, trying to make my hamburger menu toggle, no luck :worried: , what about you?
Kyle Holm
@thekholm80
May 09 2018 16:29
busy day for me, but that's always good
Nazar
@IsaakNazar
May 09 2018 16:34
@thekholm80 what time is it?
Kyle Holm
@thekholm80
May 09 2018 16:36
10:30 am here
Nazar
@IsaakNazar
May 09 2018 16:36
@thekholm80 'the harder the battle, the sweeter the victory' :smile:
Kyle Holm
@thekholm80
May 09 2018 16:36
yep!
Kaz Baig
@kbaig
May 09 2018 18:57
@gishy1 looks like I'd already solved that problem
function shapeArea(n) {
    return n * n + (n-1) * (n-1);
}
Michael S
@Ohshi60
May 09 2018 18:57
I am trying to complete the microstamp API service. Is there a way to debug in the browser? I am using chrome developer tools and my console is showing nothing
Kaz Baig
@kbaig
May 09 2018 19:00
@Ohshi60 You should be able to pull up the server console in your IDE
Michael S
@Ohshi60
May 09 2018 19:01
@kbaig thanks i see it now, im blind :D
Kaz Baig
@kbaig
May 09 2018 19:01
@Ohshi60 :)
@gishy1 I guess we could make it a bit nicer:
function shapeArea(n) {
  return n ** 2 + (n - 1) ** 2;
}
Mehdi Amlal
@mehdiamlal
May 09 2018 19:05
Hello guys!
Wesley Alves
@wessph
May 09 2018 19:05
Hello, i trying make Your p element should contain the first few words of the provided additional kitty ipsum text. and error, i need help
Kaz Baig
@kbaig
May 09 2018 19:06
@gishy1 could also do it recursively but it wouldn't really make it cleaner / more efficient
Mehdi Amlal
@mehdiamlal
May 09 2018 19:06
Could you please tell me what is the difference between creating a React component using a class that extends Component, and a function?
Kaz Baig
@kbaig
May 09 2018 19:07
@mehdiamlal You can't have state and lifecycle hooks if you do it via function
Mehdi Amlal
@mehdiamlal
May 09 2018 19:09
I started learning react today, and the instructor said that it's good practice to use classes at the beginning
Kaz Baig
@kbaig
May 09 2018 19:11
@mehdiamlal It's good practice as a beginner in that it gives you access to all the features of a react component and makes it so that you don't have to think about the tradeoffs between class and other options
Mehdi Amlal
@mehdiamlal
May 09 2018 19:12
Ok thanks!
Another question. How would you define JSX?
Mehdi Amlal
@mehdiamlal
May 09 2018 19:17
So, as I understand, it could be considered a way of creating HTML elements within a JS file, without using things like document.createElement()?
Kaz Baig
@kbaig
May 09 2018 19:22
@mehdiamlal No it's just a more convenient syntax to write react API stuff
Like when you write a tag in JS, it turns into a call to React.createElement
Christopher McCormack
@cmccormack
May 09 2018 19:22
@mehdiamlal JSX is just sugar for the React function React.createElement
Moisés Man
@moigithub
May 09 2018 19:22
IF code runs on (client) browser u can see logs on ur browser devtools...
if run on server... https://static1.squarespace.com/static/51814c87e4b0c1fda9c1fc50/t/59a79f62197aea4355ec8563/1504158355335/3-glitch-logs-runscope-user.png @Ohshi60
Kaz Baig
@kbaig
May 09 2018 19:23
But yes it let's you visualize your components in an XML-like syntax
Which HTML also is
Mehdi Amlal
@mehdiamlal
May 09 2018 19:23
Alright, thanks you so much dude!!
Kaz Baig
@kbaig
May 09 2018 19:23
No prob my man
"Every day we stray further from god's light"
Kyle Holm
@thekholm80
May 09 2018 19:32
react without jsx :eyes:
Christopher McCormack
@cmccormack
May 09 2018 19:32
@kbaig thanks that's awesome!
and it really shows JSX in it's naked form, basically just pretty functions
Kaz Baig
@kbaig
May 09 2018 19:33
@cmccormack np. It's from r/webdev a couple days ago
Christopher McCormack
@cmccormack
May 09 2018 19:33
or hideous depending on the viewer
May Kittens Devour Your Soul
@diomed
May 09 2018 19:54
I don't trust stairs.
They are always up to something.
Kyle Holm
@thekholm80
May 09 2018 19:56
"An escalator can never break: it can only become stairs. You should never see an Escalator Temporarily Out Of Order sign, just Escalator Temporarily Stairs. Sorry for the convenience." - Mitch Hedberg
May Kittens Devour Your Soul
@diomed
May 09 2018 19:58
I used to like Mitch Hedberg.
I still do.
Kyle Holm
@thekholm80
May 09 2018 19:58
but you used to, too
May Kittens Devour Your Soul
@diomed
May 09 2018 19:58
yeah
Kyle Holm
@thekholm80
May 09 2018 19:58
he's my favorite
May Kittens Devour Your Soul
@diomed
May 09 2018 19:59
he'd be king of twitter comedy if he made it :(
Kyle Holm
@thekholm80
May 09 2018 19:59
i agree
it's like twitter was invented just specifically for his one-liner comedy
I give you money, you give me a donut. End of Transaction. There's no need to bring paper into this
May Kittens Devour Your Soul
@diomed
May 09 2018 20:04
@thekholm80 you should watch AP Bio
Grace was actually protecting her real secret boyfriend Devin, not realizing Marcus is secretly dating Sarika who got super jealous.
So, Sarika decided to revenge date Devin. But Devin is fluid so he might actually like Anthony.
Kyle Holm
@thekholm80
May 09 2018 20:04
oh geez
i tried watching the first episode, it was painful
May Kittens Devour Your Soul
@diomed
May 09 2018 20:04
really?
it had me going from the start
what's not to like
Kyle Holm
@thekholm80
May 09 2018 20:07
the lead guy is really annoying
maybe i didn't give it a fair shake, though
i might try it again
May Kittens Devour Your Soul
@diomed
May 09 2018 20:17
ever tried Archer?
Kyle Holm
@thekholm80
May 09 2018 20:17
the cartoon? nope
May Kittens Devour Your Soul
@diomed
May 09 2018 20:19
it's like constantly drunk James Bond
Kyle Holm
@thekholm80
May 09 2018 20:19
lol
i'd like to watch Bo Jack Horseman
i've seen some clips and it's pretty funny
May Kittens Devour Your Soul
@diomed
May 09 2018 20:23
Archer's funny and light
Bojack's funny but it'll hurt you
how sad it can get sometimes
and real
Kyle Holm
@thekholm80
May 09 2018 20:29
hmm
maybe i'll hold off lol
I just really liked the two kids in a trench coat, Vincent Adultman
Mehdi Amlal
@mehdiamlal
May 09 2018 20:52
Guys can I use Bootstrap in a React project?
i'm currently using this
i like it