Front end layout

Hello I have been trying to build a layout like this.

3 Replies

Savio•3mo ago

but the thing is. What it must do is show events based on the dates and also have names like that. I am making and saving events to the database and also figured out to get them grouped by name.

{Duna Networks kft: Array(1), Savio: Array(2), hu: Array(1), sa xa: Array(3), Abul: Array(1)}

{Duna Networks kft: Array(1), Savio: Array(2), hu: Array(1), sa xa: Array(3), Abul: Array(1)}

this is how they look on the console And the following screenshot is the current layout that i have built

Savio•3mo ago

import dayjs from 'dayjs';
import { useContext, useEffect, useState } from 'react';
import CalendarContext from '../../Providers/CalendarContext';
import { getShifts } from '../../api/shifts';

const Day2 = ({ day }) => {
  const [dayEvents, setDayEvents] = useState([])
  const { setEventModal, setDaySelected, setEvents, savedEvents, setSelectedEvent, selectedEvent } = useContext(CalendarContext)

  const [shifts, setShifts] = useState([])
  useEffect(() => {
    getShifts()
      .then(data => {
        organizeShiftsByName(data)
      })
  }, [])

  const organizeShiftsByName = (shifts) => {
    const groupedShifts = shifts.reduce((acc, shift) => {
      if (!acc[shift.name]) {
        acc[shift.name] = [];
      }
      acc[shift.name].push(shift);
      return acc;
    }, {});

    setShifts(groupedShifts);
  };
  console.log(shifts)
  useEffect(() => {
    if (day) {
      const allShifts = Object.values(shifts).flat();
      const events = allShifts.filter(evt => dayjs(evt.day).format("DD-MM-YY") === day.format("DD-MM-YY"))
      setDayEvents(events)
    }
  }, [shifts, day])

  if (!day) {
    return; // or any placeholder content
  }

  return (
    <div className="border grid justify-center item-center cursor-pointer" onClick={() => {
      setEventModal(true);
      setDaySelected(day);
    }}
    >
      <p className='text-xs'>{day?.format("DD")}</p>
      <p className='text-xs'>{day.format("ddd").toUpperCase()}</p>
      <div className="flex-1 cursor-pointer">
        {dayEvents.map((evt, idx) => (
          <div key={idx} onClick={() => { setSelectedEvent(evt) }} className={`${evt.label} p-1 mr-1 text-gray flex text-xs rounded mb-1 truncate`}>
            {evt.name}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Day2;

import dayjs from 'dayjs';
import { useContext, useEffect, useState } from 'react';
import CalendarContext from '../../Providers/CalendarContext';
import { getShifts } from '../../api/shifts';

const Day2 = ({ day }) => {
  const [dayEvents, setDayEvents] = useState([])
  const { setEventModal, setDaySelected, setEvents, savedEvents, setSelectedEvent, selectedEvent } = useContext(CalendarContext)

  const [shifts, setShifts] = useState([])
  useEffect(() => {
    getShifts()
      .then(data => {
        organizeShiftsByName(data)
      })
  }, [])

  const organizeShiftsByName = (shifts) => {
    const groupedShifts = shifts.reduce((acc, shift) => {
      if (!acc[shift.name]) {
        acc[shift.name] = [];
      }
      acc[shift.name].push(shift);
      return acc;
    }, {});

    setShifts(groupedShifts);
  };
  console.log(shifts)
  useEffect(() => {
    if (day) {
      const allShifts = Object.values(shifts).flat();
      const events = allShifts.filter(evt => dayjs(evt.day).format("DD-MM-YY") === day.format("DD-MM-YY"))
      setDayEvents(events)
    }
  }, [shifts, day])

  if (!day) {
    return; // or any placeholder content
  }

  return (
    <div className="border grid justify-center item-center cursor-pointer" onClick={() => {
      setEventModal(true);
      setDaySelected(day);
    }}
    >
      <p className='text-xs'>{day?.format("DD")}</p>
      <p className='text-xs'>{day.format("ddd").toUpperCase()}</p>
      <div className="flex-1 cursor-pointer">
        {dayEvents.map((evt, idx) => (
          <div key={idx} onClick={() => { setSelectedEvent(evt) }} className={`${evt.label} p-1 mr-1 text-gray flex text-xs rounded mb-1 truncate`}>
            {evt.name}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Day2;

Thats my code. So here the getShifts is a utlitiy function used to fetch the shifts. The Organize byShiftsName function is used to organize the events in an object only by the names.and what the dayevents.map is doing is that it is showing the events based on the dates what can i do to achieve this view?

Gaming

Programming

Front end layout