Refactor/updated the timeline tab (#383)

* feat: enhance hackathon timeline management and publishing flow

- Updated HackathonPublishedModal to utilize new publish response structure.
- Refactored TimelineSection to display additional timeline details including judging start/end and winner announcement dates.
- Introduced DateTimeInput component for better date and time selection.
- Added FieldLabel component for improved form labeling with tooltips.
- Created timelineConstants for standardized tooltips and timezone options.
- Modified timelineSchema to include new fields for judging start, end, and winner announcement dates with validation.
- Enhanced TimelineSettingsTab to support new timeline fields and improved user experience with time inputs.
- Updated use-hackathon-publish hook to handle new publish response format and manage state accordingly.
- Adjusted use-hackathons hook to ensure proper handling of publish responses.
- Updated API interfaces and utility functions to accommodate new timeline structure.
- Improved validation logic for hackathon steps to ensure all necessary dates are set correctly.
- Enhanced timeline calculation logic to reflect new judging and announcement phases.

* chore: update markdown-it to version 14.1.1 and remove framer-motion dependency

* refactor: clean up ReviewTab and HackathonPublishedModal components, improve DateTimeInput logic, and update timeline constants

* refactor: update timeline calculation logic to ensure phases are only created with non-zero duration and add endDate to HackathonTimeline interface

Author: 0xdevcollins

app/(landing)/hackathons/preview/[orgId]/[draftId]/page.tsx

@@ -132,7 +132,15 @@ export default function DraftPreviewPage({ params }: PreviewPageProps) {
             timezone: draft.data.timeline?.timezone || 'UTC',
 
             startDate: draft.data.timeline?.startDate || '',
-            endDate: draft.data.timeline?.winnerAnnouncementDate || '',
+            endDate:
+              draft.data.timeline?.winnersAnnouncedAt ||
+              draft.data.timeline?.winnerAnnouncementDate ||
+              draft.data.timeline?.judgingEnd ||
+              draft.data.timeline?.judgingDate ||
+              draft.data.timeline?.judgingStart ||
+              draft.data.timeline?.submissionDeadline ||
+              draft.data.timeline?.startDate ||
+              '',
             submissionDeadline: draft.data.timeline?.submissionDeadline || '',
             registrationDeadline:
               draft.data.participation?.registrationDeadline || '',

app/(landing)/organizations/[id]/hackathons/page.tsx

@@ -41,8 +41,7 @@ const calculateDraftCompletion = (draft: HackathonDraft): number => {
     draft.data.information?.categories,
     draft.data.timeline?.startDate,
     draft.data.timeline?.submissionDeadline,
-    draft.data.timeline?.judgingDate,
-    draft.data.timeline?.winnerAnnouncementDate,
+    draft.data.timeline?.judgingStart || draft.data.timeline?.judgingDate,
     draft.data.timeline?.timezone,
     draft.data.participation?.participantType,
     draft.data.rewards?.prizeTiers?.length,
@@ -402,7 +401,12 @@ export default function HackathonsPage() {
                   ? (hackathon as HackathonDraft).data.timeline
                       ?.submissionDeadline ||
                     (hackathon as HackathonDraft).data.timeline
-                      ?.winnerAnnouncementDate
+                      ?.winnersAnnouncedAt ||
+                    (hackathon as HackathonDraft).data.timeline
+                      ?.winnerAnnouncementDate ||
+                    (hackathon as HackathonDraft).data.timeline?.judgingEnd ||
+                    (hackathon as HackathonDraft).data.timeline?.judgingDate ||
+                    (hackathon as HackathonDraft).data.timeline?.judgingStart
                   : (hackathon as Hackathon).submissionDeadline ||
                     (hackathon as Hackathon).endDate;
                 const totalPrize = isDraft

app/sitemap.ts

@@ -3,7 +3,7 @@ import { getBlogPosts } from '@/lib/api/blog';
 import { getHackathons } from '@/lib/api/hackathons';
 import { getCrowdfundingProjects } from '@/features/projects/api';
 import type { BlogPost } from '@/types/blog';
-import type { Hackathon } from '@/types/hackathon/core';
+import type { Hackathon as HackathonAPI } from '@/lib/api/hackathons';
 import type { Crowdfunding } from '@/features/projects/types';
 
 // Constants
@@ -173,14 +173,14 @@ async function fetchHackathonsSitemap(): Promise<MetadataRoute.Sitemap> {
     }
 
     return response.data.hackathons
-      .filter((hackathon: Hackathon) => {
+      .filter((hackathon: HackathonAPI) => {
         // Validate required fields
         if (!hackathon.slug) {
           return false;
         }
         return true;
       })
-      .map((hackathon: Hackathon) => ({
+      .map((hackathon: HackathonAPI) => ({
         url: `${SITE_URL}/hackathons/${hackathon.slug}`,
         lastModified: new Date(
           hackathon.updatedAt || hackathon.publishedAt || new Date()

components/organization/hackathons/new/NewHackathonTab.tsx

@@ -159,7 +159,7 @@ export default function NewHackathonTab({
     onDraftLoadedRef.current = onDraftLoaded;
   }, [onDraftLoaded]);
 
-  const { isPublishing, publish } = useHackathonPublish({
+  const { isPublishing, publish, publishResponse } = useHackathonPublish({
     organizationId: derivedOrgId || '',
     stepData,
     draftId: draftId || '',
@@ -323,6 +323,7 @@ export default function NewHackathonTab({
               isSavingDraft={isSavingDraft}
               organizationId={derivedOrgId}
               draftId={draftId}
+              publishResponse={publishResponse}
             />
           </TabsContent>
         </div>

components/organization/hackathons/new/tabs/ReviewTab.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { InfoFormData } from './schemas/infoSchema';
 import { TimelineFormData } from './schemas/timelineSchema';
 import { ParticipantFormData } from './schemas/participantSchema';
@@ -22,6 +22,7 @@ import { SectionRenderer } from './components/review/SectionRenderer';
 import { usePrizePoolCalculations } from '@/hooks/use-prize-pool-calculations';
 import { REVIEW_SECTION_CONFIG } from './constants/review-sections';
 import { toast } from 'sonner';
+import type { PublishResponseData } from '@/hooks/use-hackathon-publish';
 
 interface ReviewTabProps {
   allData: {
@@ -37,9 +38,9 @@ interface ReviewTabProps {
   onSaveDraft?: () => Promise<void>;
   isLoading?: boolean;
   isSavingDraft?: boolean;
-  hackathonUrl?: string;
   organizationId?: string;
   draftId?: string | null;
+  publishResponse?: PublishResponseData | null;
 }
 
 export default function ReviewTab({
@@ -49,9 +50,9 @@ export default function ReviewTab({
   onSaveDraft,
   isLoading = false,
   isSavingDraft = false,
-  hackathonUrl,
   organizationId,
   draftId,
+  publishResponse,
 }: ReviewTabProps) {
   const [showDraftModal, setShowDraftModal] = useState(false);
   const [showPublishedModal, setShowPublishedModal] = useState(false);
@@ -60,11 +61,18 @@ export default function ReviewTab({
   const { totalPrizePool, platformFee, totalFunding } =
     usePrizePoolCalculations(allData.rewards);
 
+  // Show published modal only when we have a successful publish response
+  useEffect(() => {
+    if (publishResponse) {
+      setShowPublishedModal(true);
+    }
+  }, [publishResponse]);
+
   const handlePublish = async () => {
     try {
       if (onPublish) {
         await onPublish();
-        setShowPublishedModal(true);
+        // Modal will be shown automatically when publishResponse is set via useEffect
       }
     } catch {
       // Error is handled in the hook, so we don't need to show another toast
@@ -154,7 +162,8 @@ export default function ReviewTab({
       <HackathonPublishedModal
         open={showPublishedModal}
         onOpenChange={setShowPublishedModal}
-        hackathonUrl={hackathonUrl}
+        publishResponse={publishResponse}
+        organizationId={organizationId}
       />
     </div>
   );