fixed tab switching and filtering

dump-hr · Jan 29, 2025 · 9b8acea · 9b8acea
1 parent 40e58cc
commit 9b8acea
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/apps/app/src/components/ClickableTagGroup/ClickableTagGroup.tsx b/apps/app/src/components/ClickableTagGroup/ClickableTagGroup.tsx
@@ -1,7 +1,7 @@
 import c from './ClickableTagGroup.module.scss';
 import React, { useState } from 'react';
-import { TabProps } from '../Tab/Tab';
 import clsx from 'clsx';
+import { ClickableTagProps } from '../ClickableTag/ClickableTag';
 
 type ClickableTagGroupProps = {
   setter: (id: string) => void;
@@ -16,22 +16,22 @@ const ClickableTagGroup: React.FC<ClickableTagGroupProps> = ({
   defaultTag,
   className,
 }) => {
-  const [activeTab, setActiveTab] = useState<string | null>(null);
+  const [activeTag, setActiveTag] = useState<string | null>(null);
 
   const handleTabClick = (id: string) => {
-    setActiveTab(id);
+    setActiveTag(id);
     setter(id);
   };
 
   return (
     <div className={clsx(c.clickableTagGroup, className)}>
       {React.Children.map(children, (child, index) => {
-        if (React.isValidElement<TabProps>(child)) {
+        if (React.isValidElement<ClickableTagProps>(child)) {
           return React.cloneElement(child, {
             isActive:
-              activeTab === (child.props.id as string) ||
-              (activeTab === null && child.props.id === defaultTag) ||
-              (activeTab === null && defaultTag === undefined && index === 0),
+              activeTag === (child.props.id as string) ||
+              (activeTag === null && child.props.id === defaultTag) ||
+              (activeTag === null && defaultTag === undefined && index === 0),
             onClick: () => handleTabClick(child.props.id as string),
           });
         }

diff --git a/apps/app/src/pages/SchedulePage/SchedulePage.tsx b/apps/app/src/pages/SchedulePage/SchedulePage.tsx
@@ -7,7 +7,7 @@ import ClickableTag from '../../components/ClickableTag';
 import clsx from 'clsx';
 import { EventWithSpeakerDto } from '@ddays-app/types';
 import { events } from './events';
-import CompactScheduleCard from '../../components/CompactScheduleCard';
+import ScheduleCard from '../../components/ScheduleCard';
 
 enum TabId {
   FIRST_DAY = 'first-day',
@@ -48,7 +48,7 @@ export const SchedulePage = () => {
       <h1 className={c.pageTitle}>Raspored</h1>
       <div className={c.contentWrapper}>
         <TabGroup
-          setter={() => setActiveTab}
+          setter={(id) => setActiveTab(id as TabId)}
           defaultTab={TabId.FIRST_DAY}
           className={c.contentWidth}>
           <Tab id={TabId.FIRST_DAY}>23.5.</Tab>
@@ -57,7 +57,7 @@ export const SchedulePage = () => {
         </TabGroup>
 
         <ClickableTagGroup
-          setter={() => setActiveTag}
+          setter={(id) => setActiveTag(id as TagId)}
           className={clsx(c.contentWidth, c.tagGroup)}
           defaultTag={TagId.ALL}>
           <ClickableTag id={TagId.ALL}>Svi</ClickableTag>
@@ -68,7 +68,7 @@ export const SchedulePage = () => {
         </ClickableTagGroup>
 
         {filteredEvents.map((event) => (
-          <CompactScheduleCard id='id' key={event.id} event={event} />
+          <ScheduleCard clickHandler={() => {}} key={event.id} event={event} />
         ))}
       </div>
     </main>

diff --git a/apps/app/src/pages/SchedulePage/events.ts b/apps/app/src/pages/SchedulePage/events.ts
@@ -5,8 +5,8 @@ export const events: EventWithSpeakerDto[] = [
     id: 1,
     name: 'Mastering React',
     description: 'An advanced dive into React concepts.',
-    startsAt: '2025-01-21T08:00:00Z',
-    endsAt: '2025-01-21T23:00:00Z',
+    startsAt: '2025-05-23T08:00:00Z',
+    endsAt: '2025-05-23T23:00:00Z',
     maxParticipants: 100,
     requirements: 'Basic React knowledge',
     footageLink: undefined,
@@ -69,8 +69,8 @@ export const events: EventWithSpeakerDto[] = [
     id: 1,
     name: 'Mastering React',
     description: 'An advanced dive into React concepts.',
-    startsAt: '2025-01-21T08:00:00Z',
-    endsAt: '2025-01-21T23:00:00Z',
+    startsAt: '2025-05-23T08:00:00Z',
+    endsAt: '2025-05-23T23:00:00Z',
     maxParticipants: 100,
     requirements: 'Basic React knowledge',
     footageLink: undefined,