Savio Comments - Answer Overflow

Savio

Posts Comments

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

what can i do to achieve this view?

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

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

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

Thats my code. So here the getShifts is a utlitiy function used to fetch the shifts.

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

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;

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

And the following screenshot is the current layout that i have built

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

this is how they look on the console

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

{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)}

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/31/2024 in #front-end

Front end layout

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.

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/30/2024 in #os-and-tools

Vercel server issue

So what I am doing is I am using firebase for authentication. So when a user registers by default i am sending the credentials and the

isApproved

isApproved

as a boolean value value to the database. Based on this the admin has the ability to make it true or false so when made true it always stays that way. Also yes they are still logged in after 25 minutes because I didnot setup any time to make them logout or something like that also the website shows that they are logged in

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/30/2024 in #os-and-tools

Vercel server issue

What can be done ?

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/30/2024 in #os-and-tools

Vercel server issue

The dashboard component doesn't get showed anymore

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/30/2024 in #os-and-tools

Vercel server issue

So even if it's approved and the user is logged in it doesn't work anymore after 20-25 minutes

10 replies

KPCKevin Powell - Community

•Created by Savio on 7/30/2024 in #os-and-tools

Vercel server issue

Well I have a feature where I built that after registration to the website one must wait for the access from the admin to view the website. After that they can view the dashboard that's the main feature of the website. The dashboard is configured like this.