Daily/weekly/monthly time tracking dashboard

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello Martin! Congrats on your first React project!

  I have some suggestions for you.

  • You should use string union for the timeMode state because it has specific value. It will make your work easier.

  export type TimeMode = 'day' | 'month' | 'week'
  const [timeMode, setTimeMode] = useState<TimeMode>("week");
  

  • In MainCardNav, to create buttons that have identical functionality, you can create an array of data and map it. Here is my refactor.

  const NAV_DATA : { name : string, mode : TimeMode } = [{	name : 'Daily',	mode : 'day'},{	name : 'Weekly',	mode : 'week'},{	name : 'Monthly',	mode : 'month'}]
  
  const MainCardNav = ({switchTimeMode, timeMode}: Props) => { 
    return (
      <div className="main-card-nav">
  	{NAV_DATA.map(data => {
  		return (
  		<button onClick={() => switchTimeMode(data.mode)}
   className={`${data.mode === timeMode ? 'active' : ''}  ${data.mode} time-btn`}>
  			{data.name}
  		</button>
  		)
  	})}
      </div>
    );
  };
  

  I hope it helps you! Cheers!

  Marked as helpful

  0
• 

  Martin Eliáš•890

  @martinelias1312Posted over 2 years ago

  Anyways, first challenge with React !!

  0