Share events to

src/components/EventCard/index.tsx

@@ -2,23 +2,27 @@ import Link from "next/link";
 import { saveToAppleCal, EventObject, saveToGoogleCal } from "src/api/EventsAPI";
 import { useState } from "react";
 import { CalendarModal } from "../CalendarModal";
+import { ShareToModal } from "../ShareToModal";
 import s from "./EventCard.module.scss";
 import { days, months, formatURLEventTitle, getDateTime, withHttp } from "src/utils/general";
 import {  FaCalendarAlt } from "react-icons/fa";
+import { FaShareAlt } from "react-icons/fa";
 import { GRAY } from "src/utils/constants";
 
 const EventCard: React.FC<{
   event: EventObject;
 }> = ({ event }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCalModalOpen, setIsCalModalOpen] = useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
   const month = months[new Date(event.start).getMonth()];
   const date = new Date(event.start).getDate();
   const day = days[new Date(event.start).getDay()];
   const time = getDateTime(event).time;
   const { committee, uuid, title, location, eventLink } = event;
   return (
     <>
-      <CalendarModal show={isModalOpen} onClose={() => setIsModalOpen(false)} event={event} />
+      <CalendarModal show={isCalModalOpen} onClose={() => setIsCalModalOpen(false)} event={event} />
+      <ShareToModal show={isShareModalOpen} onClose={() => setIsShareModalOpen(false)} event={event} />
       <Link href={`/events/${formatURLEventTitle(title)}-${uuid}`} passHref>
         <div className={s.card}>
           <div className={s.cardHeader}>
@@ -36,12 +40,20 @@ const EventCard: React.FC<{
           <div className={s.cardFooter}>
             <a
               onClick={e => {
-                setIsModalOpen(true);
+                setIsCalModalOpen(true);
                 e.stopPropagation();
               }}
             >
               <FaCalendarAlt color={GRAY} size={25} />
             </a>
+            <a
+              onClick={e => {
+                setIsShareModalOpen(true);
+                e.stopPropagation();
+              }}
+            >
+              <FaShareAlt color={GRAY} size={25} />
+            </a>
           </div>
         </div>
       </Link>

src/components/ShareToModal/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+    EmailShareButton,
+    EmailIcon,
+    FacebookShareButton,
+    FacebookIcon,
+    LinkedinShareButton,
+    LinkedinIcon
+  } from 'next-share';
+import { EventObject } from "src/api/EventsAPI";
+
+interface ShareToModalProps{
+    show: boolean;
+    event: EventObject;
+    onClose: () => void;
+}
+
+export const ShareToModal:React.FC<ShareToModalProps> = ({ show, event, onClose }) => (
+    <dialog className="" open={show}>
+        <section className="">
+            <h3>Share Event with Friends</h3>
+            <div className="">
+                <EmailShareButton
+                    url={event.eventLink}
+                    subject={event.title}
+                    body={"Join me on "+event.start+" at "+event.location}>
+                <EmailIcon size={32} round />
+                    <b>Email</b>
+                </EmailShareButton>
+                <FacebookShareButton
+                    url={event.eventLink}
+                    quote={'next-share is a social share buttons for your next React apps.'}
+                    hashtag={'#ACMUCSD'}>
+                <FacebookIcon size={32} round />
+                <b>Facebook</b>
+                </FacebookShareButton>
+            </div>
+            <br/>
+            <button onClick={onClose}><b>Cancel</b></button>
+        </section>
+    </dialog>
+);