Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: add suggestion to fetch sessions #38

Open
wants to merge 1 commit into
base: activity
Choose a base branch
from
Open

refactor: add suggestion to fetch sessions #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 48 additions & 51 deletions src/app/atividades/activityPerDay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,48 @@
import { Session } from "./typeSession";
import Activity from "../../components/activity";
import { useEffect, useRef, useState } from "react";

interface ActivitySession {
daySession: Session[];
}

const ActivityPerDay: React.FC<ActivitySession> = ({ daySession }) => {


const sessionsByTime = daySession.reduce((acc, session) => {
if (session.start_time) {
if (!acc.has(session.start_time)) {
acc.set(session.start_time, []);
}
acc.get(session.start_time)?.push(session);
}
return acc;
}, new Map<string, Session[]>());

const groupedSessions = Array.from(sessionsByTime.entries());

return (
<section className="overflow-hidden">
{groupedSessions.map(([startTime, sessions], index) => (
<div key={index} className="relative mb-4">
<div className="horas-layout">{startTime}</div>
<div className="flex gap-4" >
{sessions.map((session, sessionIndex) => (
<div key={sessionIndex} className="overflow-visible" >
<Activity activitys={session} />
</div>

))}
{/* <><div className="cursor-pointer absolute left-0 bg-sunset-950 h-full flex items-center mt-2 p-4 opacity-75">
<span className="text-white text-3xl">&lt;</span>
</div>
<div className="cursor-pointer absolute right-0 bg-sunset-950 h-full flex items-center mt-2 p-4 opacity-75">
<span className="text-white text-3xl">&gt;</span>
</div>
</> */}

</div>
</div>
))}
</section>
);
};

export default ActivityPerDay;
import { useEffect, useRef, useState } from 'react'

import Activity from '../../components/activity'
import { Session } from './typeSession'

interface ActivitySession {
daySession: Session[]
}

const ActivityPerDay: React.FC<ActivitySession> = ({ daySession }) => {
const sessionsByTime = daySession.reduce((acc, session) => {
if (session.start_time) {
if (!acc.has(session.start_time)) {
acc.set(session.start_time, [])
}
acc.get(session.start_time)?.push(session)
}
return acc
}, new Map<string, Session[]>())

const groupedSessions = Array.from(sessionsByTime.entries())

return (
<section className="overflow-hidden">
{groupedSessions.map(([startTime, sessions], index) => (
<div key={index} className="relative mb-4">
<div className="horas-layout">{startTime}</div>
<div className="flex gap-4">
{sessions.map((session, sessionIndex) => (
<div key={sessionIndex} className="overflow-visible">
<Activity activitys={session} />
</div>
))}
{/* <><div className="cursor-pointer absolute left-0 bg-sunset-950 h-full flex items-center mt-2 p-4 opacity-75">
<span className="text-white text-3xl">&lt;</span>
</div>
<div className="cursor-pointer absolute right-0 bg-sunset-950 h-full flex items-center mt-2 p-4 opacity-75">
<span className="text-white text-3xl">&gt;</span>
</div>
</> */}
</div>
</div>
))}
</section>
)
}

export default ActivityPerDay
77 changes: 58 additions & 19 deletions src/app/atividades/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,58 @@

import ToggleSection from "./toggleSection";
import { getSession } from "@/lib/even3/get-session";

export default async function ActivityPage() {
const {data} = await getSession()

return (
<section>
<div className="w-full space-y-4 text-base lg:text-lg">
<h1 className="text-3xl font-medium md:text-4xl lg:text-5xl">
Atividades
</h1>

<ToggleSection dataSession={data} />
</div>
</section>
);
}
import { format } from 'date-fns'
import { ptBR } from 'date-fns/locale'
import Link from 'next/link'

import { getSessionsByDay } from '@/lib/even3/get-sessions-by-day'
import { cn } from '@/utils/merge-classes'

// import ToggleSection from './toggleSection'

export default async function ActivityPage({
searchParams,
}: {
searchParams: { day?: string }
}) {
const { schedules } = await getSessionsByDay()

const { day } = searchParams

let currentDay = schedules[0].date

if (day) {
const dayOnSchedule = schedules.find((schedule) => schedule.date === day)

if (dayOnSchedule) {
currentDay = day
}
}

return (
<section>
<div className="w-full space-y-4 text-base lg:text-lg">
<h1 className="text-3xl font-medium md:text-4xl lg:text-5xl">
Atividades
</h1>

<div className="flex w-fit gap-1 rounded-3xl bg-sunset-400 p-2 text-sm">
{schedules.map((schedule) => {
return (
<Link
key={schedule.epoch}
href={`/atividades?day=${schedule.date}`}
className={cn(
'px-2 py-4',
schedule.date === currentDay && 'rounded-2xl bg-sunset-900',
)}
>
{schedule.day},{' '}
{format(schedule.date, "d 'de' LLLL", { locale: ptBR })}
</Link>
)
})}
</div>

{/* <ToggleSection dataSession={data} /> */}
</div>
</section>
)
}
113 changes: 56 additions & 57 deletions src/app/atividades/toggleSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,56 @@
"use client"

import ActivityPerDay from './activityPerDay';
import { Schedule } from './typeSession'
import { useState } from "react";

interface ToggleSectionProps {
dataSession: Schedule[]
}

export default function ToggleSection({dataSession}: ToggleSectionProps){
const [selectedButton, setSelectedButton] = useState("28");

const daySelected = "bg-sunset-900 button-2 p-3 rounded-xl";
const dayNotSelected = "p-3 pr-4 text-sunset-900 font-semibold";

const day27 = "Sexta-feira, 27 de setembro";
const day28 = "Sexta-feira, 28 de setembro";

function handleData(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
const buttonId = e.currentTarget.id;

if (buttonId === "27") {
setSelectedButton("27");
} else if (buttonId === "28") {
setSelectedButton("28");
}

}

const filteredSessions = dataSession
.filter(data => data.id_schedule === `${selectedButton}092024`)
.flatMap(data => data.sessions);

return (
<section >
<section className="flex h-12 w-72 items-center gap-4 whitespace-nowrap rounded-2xl bg-yellow-500 px-1 py-6 text-xs">
<button
id="27"
onClick={handleData}
className={selectedButton === "27" ? daySelected : dayNotSelected}
>
{selectedButton === "27" ? day27 : "Seção 1"}
</button>
<button
id="28"
onClick={handleData}
className={selectedButton === "28" ? daySelected : dayNotSelected}
>
{selectedButton === "28" ? day28 : "Seção 2"}
</button>
</section>
<ActivityPerDay daySession={filteredSessions}/>
</section>
);
};

'use client'

import { useState } from 'react'

import ActivityPerDay from './activityPerDay'
import { Schedule } from './typeSession'

interface ToggleSectionProps {
dataSession: Schedule[]
}

export default function ToggleSection({ dataSession }: ToggleSectionProps) {
const [selectedButton, setSelectedButton] = useState('28')

const daySelected = 'bg-sunset-900 button-2 p-3 rounded-xl'
const dayNotSelected = 'p-3 pr-4 text-sunset-900 font-semibold'

const day27 = 'Sexta-feira, 27 de setembro'
const day28 = 'Sexta-feira, 28 de setembro'

function handleData(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
const buttonId = e.currentTarget.id

if (buttonId === '27') {
setSelectedButton('27')
} else if (buttonId === '28') {
setSelectedButton('28')
}
}

const filteredSessions = dataSession
.filter((data) => data.id_schedule === `${selectedButton}092024`)
.flatMap((data) => data.sessions)

return (
<section>
<section className="flex h-12 w-72 items-center gap-4 whitespace-nowrap rounded-2xl bg-yellow-500 px-1 py-6 text-xs">
<button
id="27"
onClick={handleData}
className={selectedButton === '27' ? daySelected : dayNotSelected}
>
{selectedButton === '27' ? day27 : 'Seção 1'}
</button>
<button
id="28"
onClick={handleData}
className={selectedButton === '28' ? daySelected : dayNotSelected}
>
{selectedButton === '28' ? day28 : 'Seção 2'}
</button>
</section>
<ActivityPerDay daySession={filteredSessions} />
</section>
)
}
65 changes: 32 additions & 33 deletions src/app/atividades/typeSession.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
export interface Speaker {
id_speaker: number;
name: string;
photo: string;
resume: string;
facebook: string;
linkedin: string;
email: string;
lattes: string;
twitter: string;
site: string;
}

export interface Session {
id_session: number;
title: string;
title_schedule: string;
venue: string | null;
description: string;
tags: string | null;
date: string;
start_time: string;
end_time: string;
speakers: Speaker[];
}

export interface Schedule {
id_schedule: string;
date: string;
day: string;
sessions: Session[];
}

export interface Speaker {
id_speaker: number
name: string
photo: string
resume: string
facebook: string
linkedin: string
email: string
lattes: string
twitter: string
site: string
}

export interface Session {
id_session: number
title: string
title_schedule: string
venue: string | null
description: string
tags: string | null
date: string
start_time: string
end_time: string
speakers: Speaker[]
}

export interface Schedule {
id_schedule: string
date: string
day: string
sessions: Session[]
}
Loading
Loading