From c1fac48ff97f388b69bf7e7bb31e1c0409532da3 Mon Sep 17 00:00:00 2001
From: CarmenHe <43501759+CarmenHe@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:24:49 -0700
Subject: [PATCH 1/5] shows default image for board without photo link

---
 src/api/BoardAPI.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/api/BoardAPI.ts b/src/api/BoardAPI.ts
index 563a054..a8b032f 100644
--- a/src/api/BoardAPI.ts
+++ b/src/api/BoardAPI.ts
@@ -13,6 +13,9 @@ const formatLinkedIn = (val: string): string => {
   return val.includes("https://www.linkedin.com/in/") ? val : `https://www.linkedin.com/in/${val}`;
 };
 
+
+//If data from row is blank or not formatted correctly (jpg or jpeg), use default link in place, otherwise do nothing
+const formatProfileImage = (val: string) => ((val?.includes(".jpg") || false) || (val?.includes(".jpeg")|| false) || (val?.includes(".png")||false)) ? val : `https://i.imgur.com/j7icEAQ.png`;
 export const getBoardData = async () => {
   const { BOARD_SPREADSHEET_ID, GOOGLE_SERVICE_ACC_EMAIL, GOOGLE_SERVICE_KEY_PRIVATE } =
     process.env;
@@ -43,7 +46,7 @@ export const getBoardData = async () => {
         name: row["Name"],
         org: row["Team"]?.toLowerCase(),
         title: row["Position"],
-        profile_image: row["Profile Picture"],
+        profile_image: formatProfileImage(row["Profile Picture"]),
         email: row["ACM Email"] || null,
         personal_link: row["Website"] || null,
         linkedin_link: formatLinkedIn(row["LinkedIn"] || null),

From 7db2e149b11df99cd28e0048a33c128d825e7b54 Mon Sep 17 00:00:00 2001
From: CarmenHe <43501759+CarmenHe@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:28:28 -0700
Subject: [PATCH 2/5] checks board photo links, shows default photo

---
 src/api/BoardAPI.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/api/BoardAPI.ts b/src/api/BoardAPI.ts
index a8b032f..7ebfe53 100644
--- a/src/api/BoardAPI.ts
+++ b/src/api/BoardAPI.ts
@@ -16,6 +16,7 @@ const formatLinkedIn = (val: string): string => {
 
 //If data from row is blank or not formatted correctly (jpg or jpeg), use default link in place, otherwise do nothing
 const formatProfileImage = (val: string) => ((val?.includes(".jpg") || false) || (val?.includes(".jpeg")|| false) || (val?.includes(".png")||false)) ? val : `https://i.imgur.com/j7icEAQ.png`;
+
 export const getBoardData = async () => {
   const { BOARD_SPREADSHEET_ID, GOOGLE_SERVICE_ACC_EMAIL, GOOGLE_SERVICE_KEY_PRIVATE } =
     process.env;

From ef2e2eafebbc551dc2677f6a85d85ac0d80eb2d0 Mon Sep 17 00:00:00 2001
From: CarmenHe <43501759+CarmenHe@users.noreply.github.com>
Date: Mon, 23 Oct 2023 19:10:53 -0700
Subject: [PATCH 3/5] Sized down default image to fit container

---
 src/api/BoardAPI.ts                              | 2 +-
 src/components/BoardCard/index.tsx               | 3 ++-
 src/components/BoardCard/styles.module.scss      | 6 ++++++
 src/components/BoardCard/styles.module.scss.d.ts | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/api/BoardAPI.ts b/src/api/BoardAPI.ts
index 7ebfe53..3890073 100644
--- a/src/api/BoardAPI.ts
+++ b/src/api/BoardAPI.ts
@@ -15,7 +15,7 @@ const formatLinkedIn = (val: string): string => {
 
 
 //If data from row is blank or not formatted correctly (jpg or jpeg), use default link in place, otherwise do nothing
-const formatProfileImage = (val: string) => ((val?.includes(".jpg") || false) || (val?.includes(".jpeg")|| false) || (val?.includes(".png")||false)) ? val : `https://i.imgur.com/j7icEAQ.png`;
+const formatProfileImage = (val: string) => ((val?.includes(".jpg") || false) || (val?.includes(".jpeg")|| false) || (val?.includes(".png")||false)) ? val : `https://i.imgur.com/WneyVtE.png`;
 
 export const getBoardData = async () => {
   const { BOARD_SPREADSHEET_ID, GOOGLE_SERVICE_ACC_EMAIL, GOOGLE_SERVICE_KEY_PRIVATE } =
diff --git a/src/components/BoardCard/index.tsx b/src/components/BoardCard/index.tsx
index 1523ee2..5bb68e1 100644
--- a/src/components/BoardCard/index.tsx
+++ b/src/components/BoardCard/index.tsx
@@ -30,12 +30,13 @@ const BoardCard: React.FC<BoardCardProps> = ({ boardmember }) => {
 
   const portfolioLink = withHttp(personal_link);
   const linkedinLink = withHttp(linkedin_link);
+  const defaultImage = (profile_image) => (profile_image==="https://i.imgur.com/WneyVtE.png") ? style.default: null;
 
   return (
     <div className={`${style.card} ${style[org]}`}>
       <div className={style.title}>{title}</div>
       <div className={style.image}>
-        <img src={profile_image} alt="" />
+        <img className = {defaultImage(profile_image)} src={profile_image} alt="" height=""/>
       </div>
       <div className={style.footer}>
         <p>{name}</p>
diff --git a/src/components/BoardCard/styles.module.scss b/src/components/BoardCard/styles.module.scss
index 13c7bfc..a373e78 100644
--- a/src/components/BoardCard/styles.module.scss
+++ b/src/components/BoardCard/styles.module.scss
@@ -48,6 +48,12 @@
       padding: 0;
       margin: 0;
     }
+    .default{
+      object-fit: contain;
+      top: 0;
+      min-height:100%;
+      height: 100%;
+    }
   }
   .footer {
     width: 100%;
diff --git a/src/components/BoardCard/styles.module.scss.d.ts b/src/components/BoardCard/styles.module.scss.d.ts
index 096f900..4616cf2 100644
--- a/src/components/BoardCard/styles.module.scss.d.ts
+++ b/src/components/BoardCard/styles.module.scss.d.ts
@@ -5,6 +5,7 @@ declare namespace StylesModuleScssNamespace {
     ai: string;
     card: string;
     cyber: string;
+    default: string;
     footer: string;
     image: string;
     links: string;

From ca9cb0427d8bfbb743fe710d43012c4a8a0daad5 Mon Sep 17 00:00:00 2001
From: CarmenHe <43501759+CarmenHe@users.noreply.github.com>
Date: Mon, 27 Nov 2023 19:32:24 -0800
Subject: [PATCH 4/5] improved code concision, access images from codebase

---
 src/api/BoardAPI.ts                         | 26 ++++++++++-----------
 src/components/BoardCard/index.tsx          | 23 ++++++++++++++----
 src/components/BoardCard/styles.module.scss |  4 ++--
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/api/BoardAPI.ts b/src/api/BoardAPI.ts
index 3890073..2a78089 100644
--- a/src/api/BoardAPI.ts
+++ b/src/api/BoardAPI.ts
@@ -10,16 +10,17 @@ import {
 // Otherwise, consistently format as a LinkedIn profile url (some people may provide only the username portion on the spreadsheet)
 const formatLinkedIn = (val: string): string => {
   if (!val) return null;
-  return val.includes("https://www.linkedin.com/in/") ? val : `https://www.linkedin.com/in/${val}`;
+  return val.includes("https://www.linkedin.com/in/")
+    ? val
+    : `https://www.linkedin.com/in/${val}`;
 };
 
-
-//If data from row is blank or not formatted correctly (jpg or jpeg), use default link in place, otherwise do nothing
-const formatProfileImage = (val: string) => ((val?.includes(".jpg") || false) || (val?.includes(".jpeg")|| false) || (val?.includes(".png")||false)) ? val : `https://i.imgur.com/WneyVtE.png`;
-
 export const getBoardData = async () => {
-  const { BOARD_SPREADSHEET_ID, GOOGLE_SERVICE_ACC_EMAIL, GOOGLE_SERVICE_KEY_PRIVATE } =
-    process.env;
+  const {
+    BOARD_SPREADSHEET_ID,
+    GOOGLE_SERVICE_ACC_EMAIL,
+    GOOGLE_SERVICE_KEY_PRIVATE,
+  } = process.env;
 
   const doc = new GoogleSpreadsheet(BOARD_SPREADSHEET_ID);
 
@@ -42,22 +43,21 @@ export const getBoardData = async () => {
 
   // Map through array of rows, each one is an object with column headers as keys
   const boardMembers = rows
-    .map(row => {
+    .map((row) => {
       const boardMemberData: BoardMemberProps = {
         name: row["Name"],
         org: row["Team"]?.toLowerCase(),
         title: row["Position"],
-        profile_image: formatProfileImage(row["Profile Picture"]),
+        profile_image: row["Profile Picture"] || "",
         email: row["ACM Email"] || null,
         personal_link: row["Website"] || null,
         linkedin_link: formatLinkedIn(row["LinkedIn"] || null),
       };
       return boardMemberData;
     })
-    .filter(user => user.name) // name is required
-    .filter(user => user.org && user.org !== "members at large") // valid suborg is required
-    .filter(user => user.title) // position title is required
-    .filter(user => user.profile_image); // image url is required
+    .filter((user) => user.name) // name is required
+    .filter((user) => user.org && user.org !== "members at large") // valid suborg is required
+    .filter((user) => user.title); // position title is required
 
   return boardMembers;
 };
diff --git a/src/components/BoardCard/index.tsx b/src/components/BoardCard/index.tsx
index 5bb68e1..b22b39b 100644
--- a/src/components/BoardCard/index.tsx
+++ b/src/components/BoardCard/index.tsx
@@ -2,6 +2,7 @@ import style from "./styles.module.scss";
 import GeneralDefault from "public/assets/default-board-images/general-default.svg";
 import AIDefault from "public/assets/default-board-images/ai-default.svg";
 import CyberDefault from "public/assets/default-board-images/cyber-default.svg";
+import HackDefault from "public/assets/default-board-images/hack-default.svg";
 import { BoardMemberProps } from "src/types/index";
 import { withHttp } from "src/utils/general";
 
@@ -9,7 +10,6 @@ interface BoardCardProps {
   boardmember: BoardMemberProps;
 }
 
-
 const BoardCard: React.FC<BoardCardProps> = ({ boardmember }) => {
   const {
     name = "",
@@ -25,24 +25,39 @@ const BoardCard: React.FC<BoardCardProps> = ({ boardmember }) => {
     general: GeneralDefault,
     ai: AIDefault,
     cyber: CyberDefault,
+    hack: HackDefault,
   };
 
+  const boardPictureRegex = /(jpg)|(png)|(jpeg)/gim;
+  const validProfileImage = profile_image.match(boardPictureRegex);
+
+  let profileImage = profile_image;
+  if (!validProfileImage) {
+    profileImage = defaultImgs[org]?.src ?? defaultImgs.general.src;
+  }
 
   const portfolioLink = withHttp(personal_link);
   const linkedinLink = withHttp(linkedin_link);
-  const defaultImage = (profile_image) => (profile_image==="https://i.imgur.com/WneyVtE.png") ? style.default: null;
 
   return (
     <div className={`${style.card} ${style[org]}`}>
       <div className={style.title}>{title}</div>
       <div className={style.image}>
-        <img className = {defaultImage(profile_image)} src={profile_image} alt="" height=""/>
+        <img
+          className={!validProfileImage ? style.default : null}
+          src={profileImage}
+          alt="Board Photo"
+        />
       </div>
       <div className={style.footer}>
         <p>{name}</p>
         <div className={style.links}>
           {!email ? null : (
-            <a href={`mailto:${email}`} target="_blank" rel="noopener noreferrer">
+            <a
+              href={`mailto:${email}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <svg width="18" height="14" viewBox="1 0 16 13.5" fill="none">
                 <path d="M16.6177 0.458008H1.36449C1.04 0.458008 0.777832 0.718533 0.777832 1.041V12.7009C0.777832 13.0233 1.04 13.2838 1.36449 13.2838H16.6177C16.9422 13.2838 17.2043 13.0233 17.2043 12.7009V1.041C17.2043 0.718533 16.9422 0.458008 16.6177 0.458008ZM15.8844 2.47662V11.9721H2.09782V2.47662L1.59182 2.08492L2.31232 1.16489L3.09698 1.77156H14.887L15.6717 1.16489L16.3922 2.08492L15.8844 2.47662ZM14.887 1.76974L8.99109 6.32437L3.09514 1.76974L2.31048 1.16306L1.58999 2.0831L2.09599 2.4748L8.35859 7.31364C8.5387 7.45268 8.76027 7.52816 8.98834 7.52816C9.21641 7.52816 9.43798 7.45268 9.61808 7.31364L15.8844 2.47662L16.3904 2.08492L15.6699 1.16489L14.887 1.76974Z" />
               </svg>
diff --git a/src/components/BoardCard/styles.module.scss b/src/components/BoardCard/styles.module.scss
index a373e78..fc27929 100644
--- a/src/components/BoardCard/styles.module.scss
+++ b/src/components/BoardCard/styles.module.scss
@@ -48,10 +48,10 @@
       padding: 0;
       margin: 0;
     }
-    .default{
+    .default {
       object-fit: contain;
       top: 0;
-      min-height:100%;
+      min-height: 100%;
       height: 100%;
     }
   }

From 5965dfa69881e0e53eccf67bd2adfaa102ffff19 Mon Sep 17 00:00:00 2001
From: CarmenHe <43501759+CarmenHe@users.noreply.github.com>
Date: Mon, 29 Jan 2024 18:52:31 -0800
Subject: [PATCH 5/5] Button on events card opens dialog with share options

---
 src/components/EventCard/index.tsx            | 18 ++++++--
 .../ShareToModal/ShareToModal.module.scss     |  0
 src/components/ShareToModal/index.tsx         | 42 +++++++++++++++++++
 3 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ShareToModal/ShareToModal.module.scss
 create mode 100644 src/components/ShareToModal/index.tsx

diff --git a/src/components/EventCard/index.tsx b/src/components/EventCard/index.tsx
index 4dffecb..91382ec 100644
--- a/src/components/EventCard/index.tsx
+++ b/src/components/EventCard/index.tsx
@@ -2,15 +2,18 @@ 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()];
@@ -18,7 +21,8 @@ const EventCard: React.FC<{
   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>
diff --git a/src/components/ShareToModal/ShareToModal.module.scss b/src/components/ShareToModal/ShareToModal.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ShareToModal/index.tsx b/src/components/ShareToModal/index.tsx
new file mode 100644
index 0000000..39f15c0
--- /dev/null
+++ b/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>
+);