FE-Swim Meet display bugs

MarisiaS commented 3 months ago

Change Swim meet icon on the NavBar, we could use PoolIcon from material icons.
Format date to be MM/DD/YYYY and time to be HH:MM
On SwimMeetDisplay when setting Rows per page to 20 or 30 the table only displays 10 results

MarisiaS commented 2 weeks ago

Could you install dayjs? please

viriponce commented 2 weeks ago

@MarisiaS

The backend send the time with this format: "time": "17:00:00"

For formatting the time to be HH:MM in the frontend, I found two options:

Slicing the time string to take the first five characters:

const formattedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      date: dayjs(item.date).format('MM/DD/YYYY'),
      time: item.time.slice(0, 5),
    }));
  }, [data]);

Using dayjs for formating. In order to do so, dayjs is requiring to pass a complete date-time format string if not it shows invalid date. We can add a dummy date to the time and display only the HH:mm section like this:
```
const formattedData = useMemo(() => {
return data.map(item => ({
  ...item,
  date: dayjs(item.date).format('MM/DD/YYYY'),
  time: dayjs(`2024-01-01 ${item.time}`).format('HH:mm'),
}));
}, [data]);
```

Do you have any preference on how to handle this?

MarisiaS commented 2 weeks ago

@MarisiaS

The backend send the time with this format: "time": "17:00:00"

For formatting the time to be HH:MM in the frontend, I found two options:

Slicing the time string to take the first five characters:
const formattedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      date: dayjs(item.date).format('MM/DD/YYYY'),
      time: item.time.slice(0, 5),
    }));
  }, [data]);
Using dayjs for formating. In order to do so, dayjs is requiring to pass a complete date-time format string if not it shows invalid date. We can add a dummy date to the time and display only the HH:mm section like this:
const formattedData = useMemo(() => {
   return data.map(item => ({
     ...item,
     date: dayjs(item.date).format('MM/DD/YYYY'),
     time: dayjs(`2024-01-01 ${item.time}`).format('HH:mm'),
   }));
 }, [data]);
Do you have any preference on how to handle this?

I think the first one is more simple and straightforward.

Question: Why using useMemo to format the data? I think the data can be formatted inside the useEffect that we already have to fetch the data.

MarisiaS / SMM

FE-Swim Meet display bugs #90