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

733 default to past tab when all questions are closed #734

Merged
merged 11 commits into from
Aug 6, 2024
Merged

733 default to past tab when all questions are closed #734

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0cd32e7
Remove internal state from tabs header
camilovegag Aug 5, 2024
d5cae6e
Add useEffect to handle empty openCycles
camilovegag Aug 5, 2024
22f0f2c
Change prop to initial tab and remove extra if
camilovegag Aug 5, 2024
6e8362e
Set active tab after openCycles response, removing unwanted useEffect
camilovegag Aug 5, 2024
4d08f6b
simplify state
diegoalzate Aug 6, 2024
fdb940e
wip: add sepearte section for question tabs
diegoalzate Aug 6, 2024
d903c0d
remove not needed function
diegoalzate Aug 6, 2024
dec4c67
fix linting
diegoalzate Aug 6, 2024
a526094
Merge branch 'develop' into 733-default-to-past-tab-when-all-question…
diegoalzate Aug 6, 2024
c18bab3
move tabs so they can modify the activetab state in questions
diegoalzate Aug 6, 2024
006c1fd
Fix grid
camilovegag Aug 6, 2024
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
9 changes: 3 additions & 6 deletions packages/berlin/src/components/tabs/TabsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
import { Fragment, useState } from 'react';
import { Fragment } from 'react';
import { Body } from '../typography/Body.styled';
import { Tab } from './TabsHeader.styled';

type TabsHeaderProps = {
tabNames: string[];
initialTab?: string;
activeTab?: string;
className?: string;
onTabChange?: (tab: string) => void;
};

export function TabsHeader({ tabNames, initialTab, className, onTabChange }: TabsHeaderProps) {
const [activeTab, setActiveTab] = useState<string>(initialTab || tabNames[0]);

export function TabsHeader({ tabNames, activeTab, className, onTabChange }: TabsHeaderProps) {
const handleTabClick = (tab: string) => {
setActiveTab(tab);
if (onTabChange) {
onTabChange(tab);
}
Expand Down
109 changes: 68 additions & 41 deletions packages/berlin/src/pages/Event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';

// API
import { fetchEvent, fetchEventCycles } from 'api';
import { fetchEvent, fetchEventCycles, GetCycleResponse } from 'api';
diegoalzate marked this conversation as resolved.
Show resolved Hide resolved

// Components
import { Body } from '../components/typography/Body.styled';
Expand Down Expand Up @@ -44,8 +44,66 @@ function Event() {
[eventCycles],
);

const initialTab = useMemo(
() => (openCycles && openCycles.length > 0 ? 'upcoming' : 'past'),
[openCycles],
);

return (
<>
<Onboarding steps={eventSteps} type="event" />
<section className="event grid w-full grid-cols-3 gap-4">
<div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
<BackButton fallbackRoute="/events" />
<Subtitle>{event?.name}</Subtitle>
{event?.description && (
<div>
<Markdown
components={{
a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
p: ({ node, ...props }) => <Body>{props.children}</Body>,
}}
>
{event.description}
</Markdown>
</div>
)}
</div>
{event?.imageUrl && (
<div className="col-span-3 md:col-span-1">
<img
src={event?.imageUrl}
alt={`${event.name} image`}
className="h-52 w-full object-cover object-center md:h-full"
/>
</div>
)}
<Questions
initialTab={initialTab}
key={initialTab}
closedCycles={closedCycles}
eventId={eventId}
openCycles={openCycles}
/>
</section>
</>
);
}

function Questions({
initialTab,
openCycles,
closedCycles,
eventId,
}: {
initialTab: string;
openCycles: GetCycleResponse[] | undefined;
eventId?: string;
closedCycles: GetCycleResponse[] | undefined;
}) {
const [activeTab, setActiveTab] = useState<string>(initialTab);

const tabNames = ['upcoming', 'past'];
const [activeTab, setActiveTab] = useState<string>('upcoming');

const tabs = {
upcoming: (
Expand Down Expand Up @@ -73,46 +131,15 @@ function Event() {
};

return (
<>
<Onboarding steps={eventSteps} type="event" />
<FlexColumn $gap="2rem" className="event">
<section className="grid w-full grid-cols-3 gap-x-4">
<div className={`${event?.imageUrl ? 'col-span-2' : 'col-span-3'} flex flex-col gap-4`}>
<BackButton fallbackRoute="/events" />
<Subtitle>{event?.name}</Subtitle>
{event?.description && (
<div>
<Markdown
components={{
a: ({ node, ...props }) => <Link to={props.href ?? ''}>{props.children}</Link>,
p: ({ node, ...props }) => <Body>{props.children}</Body>,
}}
>
{event.description}
</Markdown>
</div>
)}
</div>
{event?.imageUrl && (
<div className="col-span-1">
<img
src={event?.imageUrl}
alt={`${event.name} image`}
className="h-full w-full object-cover object-center"
/>
</div>
)}
</section>
<section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
<Subtitle>Questions</Subtitle>
<Tabs.TabsHeader className="tabs" tabNames={tabNames} onTabChange={setActiveTab} />
</section>
<FlexColumn className="cycles">
<Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
</FlexColumn>
<FlexColumn className="col-span-3">
<section className="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center">
<Subtitle>Questions</Subtitle>
<Tabs.TabsHeader tabNames={tabNames} activeTab={activeTab} onTabChange={setActiveTab} />
</section>
<FlexColumn className="cycles">
<Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
</FlexColumn>
</>
</FlexColumn>
);
}

export default Event;
Loading