Skip to content

Commit

Permalink
WEB-16: Finish logic for all past announcements
Browse files Browse the repository at this point in the history
  • Loading branch information
vinnie4k committed Dec 12, 2024
1 parent 2c4ce74 commit 1873875
Show file tree
Hide file tree
Showing 44 changed files with 1,003 additions and 289 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@
"test": "jest"
},
"dependencies": {
"@headlessui/react": "^2.1.9",
"@headlessui/tailwindcss": "^0.2.1",
"@nextui-org/date-picker": "^2.1.8",
"@nextui-org/theme": "^2.2.11",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-progress": "^1.1.0",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/react-query": "^5.51.5",
"axios": "^1.7.2",
Expand All @@ -32,6 +31,7 @@
"react-dom": "^18",
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7",
"uuid": "^11.0.3",
"zustand": "^4.5.4"
},
"devDependencies": {
Expand Down
Binary file removed public/app-icons/Scooped.png
Binary file not shown.
24 changes: 20 additions & 4 deletions src/app/past/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
export default function Past() {
"use client";

import AuthGuard from "@/components/authGuard/authGuard";
import Past from "@/components/past/past";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export default function PastPage() {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
},
},
});

return (
<div>
<h1>Past Announcements</h1>
</div>
<QueryClientProvider client={queryClient}>
<AuthGuard>
<Past />
</AuthGuard>
</QueryClientProvider>
);
}
2 changes: 1 addition & 1 deletion src/components/announcement/announcementBanner.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import CrossThick from "@/icons/CrossThickIcon";
import CrossThick from "@/icons/crossThickIcon";
import { Announcement } from "@/models/announcement";

interface Props {
Expand Down
40 changes: 22 additions & 18 deletions src/components/announcement/announcementCell.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import AppIcon from "@/icons/AppIcon";
import TertiaryButton from "../system/ButtonTertiary";
import AppIcon from "@/icons/appIcon";
import ButtonTertiary from "../system/button/buttonTertiary";
import { Announcement } from "@/models/announcement";
import { dateInRange, filterActiveAnnouncements, formatDate } from "@/utils/utils";
import AnnouncementIndicator from "./announcementIndicator";
import { DateFormat } from "@/models/enums/dateFormat";

interface Props {
announcement: Announcement;
Expand All @@ -18,31 +19,34 @@ export default function AnnouncementCell({ announcement, onClick, onEditClick }:
className="flex flex-col p-6 items-start md:items-end md:flex-row justify-center gap-6 md:gap-8 self-stretch bg-neutral-white rounded-lg border border-other-stroke relative cursor-pointer"
onClick={onClick}
>
<img
src={announcement.imageUrl}
className="h-[265px] md:w-[108px] md:h-[108px] self-stretch rounded-lg object-cover bg-center"
/>
<img src={announcement.imageUrl} className="rounded-lg md:size-[108px]" />
<div className="flex flex-col items-start gap-4 self-stretch md:justify-between md:w-full">
<div className="flex items-start gap-6 self-stretch w-full md:justify-between">
<div className="flex flex-col gap-1">
<div className="flex flex-col gap-1 w-full">
<h4 className="self-stretch text-neutral-800">{announcement.title}</h4>
<p className="b1 self-stretch text-neutral-600">
{" "}
{formatDate(new Date(announcement.startDate))} - {formatDate(new Date(announcement.endDate))}{" "}
{formatDate(new Date(announcement.startDate), DateFormat.SHORT)} -{" "}
{formatDate(new Date(announcement.endDate), DateFormat.SHORT)}
</p>
</div>
{isActive ? <TertiaryButton text="Edit" action={onEditClick} className="max-md:hidden" /> : null}
{isActive ? (
<ButtonTertiary text="Edit" action={onEditClick} className="max-md:hidden flex-1 rounded-xl py-2" />
) : null}
</div>
<div className="flex h-[32px] items-center gap-2">
{announcement.apps.map((app) => (
<AppIcon key={app} appName={app} className="rounded-sm w-[32px] h-[32px]" />
))}
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between w-full">
<div className="flex h-[32px] items-center gap-2">
{announcement.apps.map((app) => (
<AppIcon key={app} appName={app} className="rounded-sm w-[32px] h-[32px]" />
))}
</div>
{dateInRange(new Date(announcement.startDate), new Date(announcement.endDate), new Date()) ? (
<AnnouncementIndicator announcement={announcement} />
) : null}
</div>
{isActive ? <TertiaryButton text="Edit" action={onEditClick} className="md:hidden" /> : null}
{isActive ? (
<ButtonTertiary text="Edit" action={onEditClick} className="md:hidden flex-1 rounded-xl py-2" />
) : null}
</div>
{dateInRange(new Date(announcement.startDate), new Date(announcement.endDate), new Date()) ? (
<AnnouncementIndicator announcement={announcement} />
) : null}
</div>
);
}
18 changes: 10 additions & 8 deletions src/components/announcement/announcementForm.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import CrossThinIcon from "@/icons/CrossThinIcon";
import SpeakerIcon from "@/icons/SpeakerIcon";
import CrossThinIcon from "@/icons/crossThinIcon";
import SpeakerIcon from "@/icons/speakerIcon";
import AnnouncementBanner from "./announcementBanner";
import { useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { Announcement } from "@/models/announcement";
import InputText from "../system/input/inputText";
import InputDatePicker from "../system/input/inputDatePicker";
import InputMultiSelect from "../system/input/inputMultiselect";
import InputUpload from "../system/input/inputUpload";
import ButtonPrimary1 from "../system/ButtonPrimary1";
import ButtonPrimary1 from "../system/button/buttonPrimary1";
import { useUserStore } from "@/stores/useUserStore";
import { addDays } from "date-fns";

Expand Down Expand Up @@ -46,9 +46,11 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
() =>
announcement.apps.length !== 0 &&
announcement.body !== "" &&
announcement.endDate &&
announcement.endDate !== "" &&
announcement.imageUrl !== "" &&
announcement.link !== "" &&
announcement.startDate &&
announcement.startDate !== "" &&
announcement.title !== "",
[announcement]
Expand All @@ -59,7 +61,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
if (!user) return;

try {
console.log("scheduling");
console.log("Scheduling", announcement);
} catch (err) {
console.error(err);
}
Expand Down Expand Up @@ -110,8 +112,8 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
to: new Date(announcement.endDate),
}}
setDateRange={(dateRange) => {
handleChange("startDate", dateRange.from);
handleChange("endDate", dateRange.to);
handleChange("startDate", dateRange?.from ?? "");
handleChange("endDate", dateRange?.to ?? "");
}}
/>
</div>
Expand All @@ -123,7 +125,7 @@ export default function AnnouncementForm({ onClose, editingAnnouncement }: Props
/>
<div className="flex flex-col gap-2">
<h6 className="text-neutral-800">Apps</h6>
<InputMultiSelect value={announcement.apps} setApps={(apps) => handleChange("apps", apps)} />
<InputMultiSelect value={announcement.apps} setValues={(apps) => handleChange("apps", apps)} />
</div>
<div className="flex flex-col gap-2">
<h6 className="text-neutral-800">Upload Image</h6>
Expand Down
18 changes: 11 additions & 7 deletions src/components/announcement/announcementModal.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Announcement } from "@/models/announcement";
import AnnouncementBanner from "./announcementBanner";
import AppIcon from "@/icons/AppIcon";
import ButtonPrimary2 from "../system/ButtonPrimary2";
import ButtonPrimary3 from "../system/ButtonPrimary3";
import CrossThinIcon from "@/icons/CrossThinIcon";
import AppIcon from "@/icons/appIcon";
import CrossThinIcon from "@/icons/crossThinIcon";
import { dateInRange, formatDate } from "@/utils/utils";
import AnnouncementIndicator from "./announcementIndicator";
import { DateFormat } from "@/models/enums/dateFormat";
import ButtonSecondary2 from "../system/button/buttonSecondary2";
import ButtonPrimary2 from "../system/button/buttonPrimary2";

interface AnnouncementModalProps {
onClose: () => void;
Expand All @@ -28,7 +29,10 @@ export default function AnnouncementModal({ onClose, announcement }: Announcemen
</button>
</div>
<p className="b1 text-neutral-600">
{`${formatDate(new Date(announcement.startDate))} - ${formatDate(new Date(announcement.endDate))}`}
{`${formatDate(new Date(announcement.startDate), DateFormat.SHORT)} - ${formatDate(
new Date(announcement.endDate),
DateFormat.SHORT
)}`}
</p>
</div>
<div className="flex flex-row items-center gap-2">
Expand All @@ -50,12 +54,12 @@ export default function AnnouncementModal({ onClose, announcement }: Announcemen
</div>

{dateInRange(new Date(announcement.startDate), new Date(announcement.endDate), new Date()) ? (
<ButtonPrimary3
<ButtonPrimary2
text="End Live Announcement"
action={() => console.log("End Live Announcement button tapped")}
/>
) : (
<ButtonPrimary2 text="Delete Announcement" action={() => console.log("Delete button tapped")} />
<ButtonSecondary2 text="Delete Announcement" action={() => console.log("Delete button tapped")} />
)}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/navBar.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import appDevLogo from "@/../public/images/appdev_logo.png";
import appDevLogoName from "@/../public/images/appdev_logo_name.png";
import ButtonSecondary2 from "../system/ButtonSecondary2";
import ButtonSecondary2 from "../system/button/buttonSecondary2";
import { Constants } from "@/utils/constants";
import { useUserStore } from "@/stores/useUserStore";
import { useRouter } from "next/navigation";
Expand All @@ -25,7 +25,7 @@ export default function NavBar() {
</a>
<div className="flex flex-row gap-3 items-center">
<img src={user?.imageUrl} alt="User profile image" className="size-[40px] rounded-xl" />
<ButtonSecondary2 text="LOG OUT" action={logoutAction} />
<ButtonSecondary2 text="LOG OUT" action={logoutAction} className="py-2 rounded-lg" />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/landing/landing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function Landing() {
};

return user?.name !== "" ? (
<div className="flex flex-col gap-16">
<div className="flex flex-col gap-16 md:gap-20 lg:gap-[132px]">
<NavBar />

{showForm ? <AnnouncementForm onClose={closeForm} editingAnnouncement={editingAnnouncement} /> : null}
Expand Down
2 changes: 1 addition & 1 deletion src/components/landing/landingActiveSection.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import CalendarArrowIcon from "@/icons/CalendarArrowIcon";
import CalendarArrowIcon from "@/icons/calendarArrowIcon";
import { Announcement } from "@/models/announcement";
import { filterActiveAnnouncements, sortAnnouncementsByStartDate } from "@/utils/utils";
import AnnouncementModal from "../announcement/announcementModal";
Expand Down
4 changes: 2 additions & 2 deletions src/components/landing/landingCreateAnnouncement.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import SpeakerIcon from "@/icons/SpeakerIcon";
import ButtonPrimary1 from "../system/ButtonPrimary1";
import SpeakerIcon from "@/icons/speakerIcon";
import ButtonPrimary1 from "../system/button/buttonPrimary1";

interface Props {
action: () => void;
Expand Down
17 changes: 11 additions & 6 deletions src/components/landing/landingPastSection.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import CalendarPlainIcon from "@/icons/CalendarPlainIcon";
import CalendarPlainIcon from "@/icons/calendarPlainIcon";
import { Announcement } from "@/models/announcement";
import { filterPastAnnouncements, sortAnnouncementsByStartDate } from "@/utils/utils";
import AnnouncementCell from "../announcement/announcementCell";
import AnnouncementModal from "../announcement/announcementModal";
import { useState } from "react";
import ButtonSecondary1 from "../system/ButtonSecondary1";
import ButtonSecondary1 from "../system/button/buttonSecondary1";
import { Constants } from "@/utils/constants";
import { useRouter } from "next/navigation";

interface Props {
announcements?: Announcement[];
onEditClick: (announcement: Announcement) => void;
}

export default function LandingPastSection({ announcements, onEditClick }: Props) {
const router = useRouter();

const pastAnnouncements = sortAnnouncementsByStartDate(filterPastAnnouncements(announcements ?? []));
const [selectedAnnouncement, setSelectedAnnouncement] = useState<Announcement | null>(null);

Expand All @@ -23,6 +26,10 @@ export default function LandingPastSection({ announcements, onEditClick }: Props
setSelectedAnnouncement(null);
};

const viewAllAction = () => {
router.push(Constants.pagePath.past);
};

return (
<div className="flex flex-col p-6 items-start gap-6 rounded-lg bg-neutral-white">
<div className="flex items-center gap-4 self-stretch">
Expand All @@ -41,9 +48,7 @@ export default function LandingPastSection({ announcements, onEditClick }: Props
onClick={() => openModal(pastAnnouncements[0])}
onEditClick={() => onEditClick(pastAnnouncements[0])}
/>
{pastAnnouncements.length > 1 && (
<ButtonSecondary1 text="View all announcements" action={() => console.log("Button clicked")} />
)}
{pastAnnouncements.length > 1 && <ButtonSecondary1 text="View all announcements" action={viewAllAction} />}
</div>

<div className="flex flex-col items-start self-stretch bg-neutral-white rounded-lg gap-3 max-md:hidden">
Expand All @@ -57,7 +62,7 @@ export default function LandingPastSection({ announcements, onEditClick }: Props
onEditClick={() => onEditClick(announcement)}
/>
))}
<ButtonSecondary1 text="View all announcements" action={() => console.log("Button clicked")} />
<ButtonSecondary1 text="View all announcements" action={viewAllAction} />
</>
) : (
pastAnnouncements.map((announcement) => (
Expand Down
2 changes: 1 addition & 1 deletion src/components/landing/landingUpcomingSection.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useEffect, useMemo } from "react";
import HourglassIcon from "@/icons/HourglassIcon";
import HourglassIcon from "@/icons/hourglassIcon";
import AnnouncementBanner from "../announcement/announcementBanner";
import { Announcement } from "@/models/announcement";
import { calculateTimeRemaining, filterFutureAnnouncements, getEarliestAnnouncements } from "@/utils/utils";
Expand Down
Loading

0 comments on commit 1873875

Please sign in to comment.