Time Tracking App made with React, Vite and Tailwind

Community feedback

• 

  Eduard Ionescu•510

  @EduardIonescuPosted almost 2 years ago

  Hi,

  I think you've overcomplicated the problem here a little bit haha. I'd say it would be better to save the data in your state and then just map and filter the data you want to show in your App.jsx. That means you could probably refactor the daily, weekly and monthly functions into one single function.

  You can also set the daily/weekly/monthly values in a useState in App.jsx and then do something like this(make sure you change the values of the radio inputs to be all lowercase in order to get the right keys from the data):

  const [data, setData] = useState(Data); // normally you'd have to fetch it in a useEffect, but this works too, I think.
  const [timeframe, setTimeframe] = useState("weekly"); //change this on click in Profile
  const getTimeframe = {
  	daily: "Yesterday",
  	weekly: "Last Week",
  	monthly: "Last Month",
  };
  
  return (
  // ...previousCode
  
  data.map((d, index) =>{
     return <Card  last={getTimeframe[timeframe]} 
                      key={index} 
                      name={d.title} 
                      current={d.timeframes[timeframe].current} 
                      previous={d.timeframes[timeframe].previous} />
  }))
  )
  

  I haven't tested this but you can try to refactor to something similar to this. Another thing I've noticed is that you haven't implemented the hover effects on <Card />.

  I hope this is not too long and helps you in some way haha

  Marked as helpful

  1

  ---

  

  VNenad93•80

  @VNenad93Posted almost 2 years ago

  @EduardIonescu

  Hello again Eduard

  Thank you for taking your time and providing me with a constructive and detailed solution.

  I will try to implement it now!

  You've been great help, thanks again

  1