Submitted about 3 years ago

Daily/weekly/monthly time tracking dashboard

accessibility, fetch, react, sass/scss, typescript

Martin Eliáš•890

@martinelias1312

A solution to the Time tracking dashboard challenge

Preview Code

Solution retrospective

This was one of my longest challenges, i tried to do it all on my own. Mostly i struggled on sending props from one component to other. But anyways, i learned to fetch data, from local json in this case, communicate through components, little bit of typescript...

I am little bit unsure of my components folders layout and i am not sure if i used best practive for scss files layout. (should i use module.scss ?)

Thanks for feedback!

Code

Please log in to post a comment

Community feedback

Fazza Razaq Amiarso•2,320

@fazzaamiarso

Posted about 3 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

Martin Eliáš•890
@martinelias1312
Posted about 3 years ago
Anyways, first challenge with React !!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord