Social Dashboard using Reactjs and Bootstrap

Community feedback

• 

  David Omar•580

  @davidomarfPosted about 4 years ago

  Hi José!

  I'll get into some React tips instead of your layout.

  I saw you heavily use setState in your card.js component. And there's really no need to. All of that could have been replaced with props and some logical operators.

  And since you wouldn't be using state in your component, you could write it instead as a functional component!

  Using functional components will result in cleaner code, since you don't need a lot of boilerplate code that comes with using Class components.

  For example, card.js could be written like this:

  const icons = {
    tw: IconTw,
    ig: IconIn,
    yu: IconYu
    //... all other icons
  }
  
  // This "{ title, ... }" notation is "spreading". It allows you to declare the
  // props without you needing to manually say "props.title".
  function Card( {  title, type, insight, subtitle, upgrowth } ) {
    return (
    <div className="container">
    // Some other elements... 
      <div className="icon">
        <img src={icons[type]} />  @nathanf
      </div>
    // Some other elements...
      <div className="col">
        <div className="card-insight">
          {insight}
        </div>
        <div className="subtitle">
          {subtitle}
        </div>
      </div>
    // Some other elements...
    </div>
    )
  }
  

  Also, generally you don't want very complex logic in your JSX, but some is fine.

  For example, you have

  <img src={this.getTypeIconGrowth()} className={(this.props.upgrowth <= 0) ? "down":"up"}/>
  

  You're using a function and a logical expression for almost the same thing.

  I'd rewrite it like this:

  <img src={ upwroth <= 0 ? iconDown : iconUp } className={ upgrowth <= 0 ? "down" : "up" }/>
  

  Also, you could have used just the plain type or title props to set typeCardNetwork and classNetwork.

  For example, instead of setting those two, you could just have done a workaround with something like:

  <div className={ type ? 'card' : '' }>
    <div className={ type }></div>
  </div>
  

  The { type ? 'card' : '' } will check if type is "truthy" or "falsy". An empty string, null, or undefined are all "falsy", so it'd end up being ''.

  And in yout .scss, you could style whatever you pass as type (which I'd also suggest, should be more expressive and meaningful: yt -> youtube, im -> instagram, etc...)

  2

  ---

  

  Jose Sinahy•50

  @JSinahyPosted about 4 years ago

  @davidomarf wow, Thank you very much for your contribution, I will continue practicing. I don't have much time with react, and it is still not clear to me the functional components and class components. But thank you very much for your comments.

  0

  

  David Omar•580

  @davidomarfPosted about 4 years ago

  @JSinahy All the luck! You'll eventually feel more confident.

  0
• 

  Cat Ballar•175

  @catcarbonellPosted about 4 years ago

  At a high-level, the layout is great! Almost spot on. The percentages at the bottom should be aligned at the baseline of the larger number to the left.

  Your dark mode toggle isn't working :( Perhaps try out doing the dark mode version!

  2

  ---

  

  Jose Sinahy•50

  @JSinahyPosted about 4 years ago

  @catcarbonell Hi, thanks for your comments, I'll have it present and I going apply what you say. Thanks so much, My english is not good, but I hope that you understand me :) , thanks is my second Page in reactjs.

  0