Add Calendar button on sessions

Author: nalves599

package.json

@@ -18,6 +18,7 @@
     "eslint-config-next": "^14.1.0",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.469.0",
+    "moment": "^2.30.1",
     "msw": "^2.6.5",
     "next": "^14.1.0",
     "next-auth": "^4.23.1",
@@ -29,6 +30,7 @@
     "react-qr-code": "^2.0.12",
     "react-social-icons": "^6.18.0",
     "react-use": "^17.6.0",
+    "sharp": "^0.33.5",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },

src/app/(authenticated)/sessions/[id]/check-in/SessionCheckInScanner.tsx

@@ -20,8 +20,7 @@ export default function SessionCheckInScanner({
 }: SessionCheckInScannerProps) {
   const [status, setStatus] = useState({
     participantsNumber: sinfoSession.participants?.length || 0,
-    unauthenticatedParticipantsNumber:
-      sinfoSession.unauthenticatedParticipants || 0,
+    unregisteredParticipantsNumber: sinfoSession.unregisteredParticipants || 0,
   });
   const [topCard, setTopCard] = useState<ReactNode | undefined>();
   const [bottomCard, setBottomCard] = useState<ReactNode | undefined>();
@@ -64,8 +63,8 @@ export default function SessionCheckInScanner({
             <MessageCard type="danger" content="Invalid QR-Code" />,
           );
         setStatus({
-          unauthenticatedParticipantsNumber:
-            sessionStatus.unauthenticatedParticipantsNumber,
+          unregisteredParticipantsNumber:
+            sessionStatus.unregisteredParticipantsNumber,
           participantsNumber: sessionStatus.participantsNumber,
         });
       }
@@ -101,7 +100,7 @@ export default function SessionCheckInScanner({
             <span>{status.participantsNumber}</span>
             /
             <Ghost size={16} />
-            <span>{status.unauthenticatedParticipantsNumber}</span>
+            <span>{status.unregisteredParticipantsNumber}</span>
           </div>
           <button className="button button-primary flex-1">
             <UserPlus size={32} strokeWidth={1} />

src/app/(authenticated)/sessions/[id]/page.tsx

@@ -4,10 +4,12 @@ import List from "@/components/List";
 import ListCard from "@/components/ListCard";
 import MessageCard from "@/components/MessageCard";
 import { PrizeTile } from "@/components/prize";
+import AddToCalendarButton from "@/components/session/AddToCalendarButton";
+import { CalendarButton } from "@/components/session/CalendarButton";
 import { SessionService } from "@/services/SessionService";
 import { UserService } from "@/services/UserService";
 import { generateTimeInterval, isMember } from "@/utils/utils";
-import { CalendarClock, MapPin, Scan, Users } from "lucide-react";
+import { Calendar, CalendarClock, MapPin, Scan, Users } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Image from "next/image";
 import Link from "next/link";
@@ -79,6 +81,15 @@ export default async function Session({ params }: { params: SessionParams }) {
           </Link>
         </div>
       )}
+      <div className="flex justify-center items-center p-4 gap-2">
+        <AddToCalendarButton
+          name={`[SINFO 32] - ${sinfoSession.name} (${sinfoSession.kind})`}
+          startDate={sinfoSession.date}
+          duration={sinfoSession.duration}
+          location={sinfoSession.place}
+          description={sinfoSession.description}
+        />
+      </div>
       {/* ExtraInformation */}
       {sinfoSession.extraInformation?.length ? (
         <List title="Information">

src/app/(authenticated)/speakers/SpeakersList.tsx

@@ -21,7 +21,7 @@ export default function SpeakersList({ speakers }: SpeakersListProps) {
           speakers.filter(
             (speaker) =>
               speaker.name.toLowerCase().includes(text.toLowerCase()) ||
-              speaker.company?.name.toLowerCase().includes(text.toLowerCase()),
+              speaker.company?.name?.toLowerCase().includes(text.toLowerCase()),
           ),
         );
       }

src/assets/icons/apple-calendar.svg

@@ -2,3 +2,5 @@ export { default as googleIcon } from "./google.png";
 export { default as istIcon } from "./ist.png";
 export { default as linkedinIcon } from "./linkedin.png";
 export { default as microsoftIcon } from "./microsoft.png";
+export { default as googleCalendarIcon } from "./google-calendar.svg";
+export { default as appleCalendarIcon } from "./apple-calendar.svg";

src/assets/icons/google-calendar.svg

@@ -24,9 +24,9 @@ export default function GridCard({
 }: GridCardProps) {
   return (
     <Link href={link || "#"} {...linkProps}>
-      <div className="w-[160px] min-h-[220px] flex flex-col items-center justify-between px-4 py-4 gap-y-2 text-sm bg-white rounded-md shadow-md text-center overflow-hidden hover:bg-slate-50 hover:shadow-sm active:bg-gray-200 active:shadow-none">
+      <div className="w-[160px] min-h-[240px] flex flex-col items-center justify-between px-4 py-4 gap-y-2 text-sm bg-white rounded-md shadow-md text-center overflow-hidden hover:bg-slate-50 hover:shadow-sm active:bg-gray-200 active:shadow-none">
         {/* TODO: Fix large names! Truncate is not working */}
-        <span title={title} className="truncate">
+        <span title={title} className="h-12 w-full line-clamp-2">
           {title}
         </span>
         <Image

src/assets/icons/index.ts

@@ -1,6 +1,7 @@
 import Link, { LinkProps } from "next/link";
 
 export interface ListProps {
+  id?: string;
   title?: string;
   description?: string;
   link?: string;
@@ -13,6 +14,7 @@ export interface ListProps {
 }
 
 export default function List({
+  id,
   title,
   description,
   link,
@@ -24,7 +26,7 @@ export default function List({
   children,
 }: ListProps) {
   return (
-    <div className="flex flex-col gap-y-2 p-4">
+    <div className="flex flex-col gap-y-2 p-4" id={id}>
       <div className="flex justify-between items-center">
         <div className="flex flex-col">
           {title && <span className="text-lg font-bold">{title}</span>}

src/components/GridCard.tsx

@@ -1,6 +1,11 @@
 import { SocialIcon } from "react-social-icons";
 
-type SocialNetworkType = "linkedin" | "email" | "github" | "website";
+type SocialNetworkType =
+  | "linkedin"
+  | "linkedinCompany"
+  | "email"
+  | "github"
+  | "website";
 
 interface SocialNetworkProps {
   text: string;
@@ -9,6 +14,7 @@ interface SocialNetworkProps {
 
 const baseHref: Record<SocialNetworkType, string> = {
   linkedin: "https://linkedin.com/in/",
+  linkedinCompany: "https://linkdein.com/company/",
   email: "mailto:",
   github: "https://github.com/",
   website: "",