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 2 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
15 changes: 7 additions & 8 deletions packages/berlin/src/components/tabs/TabsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
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);
if (activeTab !== tab) {
if (onTabChange) {
onTabChange(tab);
}
}
};

diegoalzate marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
18 changes: 16 additions & 2 deletions packages/berlin/src/pages/Event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// React and third-party libraries
import { useState, useMemo } from 'react';
import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';

Expand Down Expand Up @@ -47,6 +47,15 @@ function Event() {
const tabNames = ['upcoming', 'past'];
const [activeTab, setActiveTab] = useState<string>('upcoming');

// Update the active tab based on the presence of openCycles
useEffect(() => {
if (!openCycles || openCycles.length === 0) {
setActiveTab('past');
} else {
setActiveTab('upcoming');
}
}, [openCycles]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this can be done in a different way, maybe just a function that returns 'past' | 'upcoming' and the result is passed as a prop


const tabs = {
upcoming: <Cycles cycles={openCycles} eventId={eventId} errorMessage="No upcoming events..." />,
past: <Cycles cycles={closedCycles} eventId={eventId} errorMessage="No past events..." />,
Expand Down Expand Up @@ -85,7 +94,12 @@ function Event() {
</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} />
<Tabs.TabsHeader
className="tabs"
tabNames={tabNames}
activeTab={activeTab}
onTabChange={setActiveTab}
/>
</section>
<FlexColumn className="cycles">
<Tabs.TabsManager tabs={tabs} tab={activeTab} fallback={'Tab not found'} />
Expand Down
Loading