Merge pull request #1138 from chunlishao/allowShareOnDashboard

[Issue 596]sync share function on mydashboard and eventdetails
TrashMob-eco · Jul 15, 2023 · 815dd4c · 815dd4c
2 parents 1bf4ac2 + 2e1d5f2
commit 815dd4c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/TrashMob/client-app/src/components/Pages/EventDetails.tsx b/TrashMob/client-app/src/components/Pages/EventDetails.tsx
@@ -15,6 +15,7 @@ import moment from 'moment';
 import { Calendar, Facebook, GeoAlt, Link, Share, Stopwatch, Twitter } from 'react-bootstrap-icons';
 import { RegisterBtn } from '../RegisterBtn';
 import globes from '../assets/gettingStarted/globes.png';
+import { getTwitterUrl, getFacebookUrl } from '../../store/ShareUrl';
 
 export interface DetailsMatchParams {
     eventId: string;
@@ -54,6 +55,7 @@ export const EventDetails: FC<EventDetailsProps> = ({ match, currentUser, isUser
     const [isAttending, setIsAttending] = useState<string>("No");
     const [myAttendanceList, setMyAttendanceList] = useState<EventData[]>([]);
     const [isUserEventDataLoaded, setIsUserEventDataLoaded] = useState(false);
+    const [isEventCompleted, setIsEventCompleted] = useState<boolean>();
 
     const startDateTime = moment(eventDate);
     const endDateTime = moment(startDateTime).add(durationHours, 'hours').add(durationMinutes, 'minutes');
@@ -81,9 +83,6 @@ export const EventDetails: FC<EventDetailsProps> = ({ match, currentUser, isUser
             });
 
         if (eventId != null) {
-            var host = window.location.host;
-            var eventUrl = "https://" + host + "/eventdetails/" + eventId;
-
             fetch('/api/eventattendees/' + eventId, {
                 method: 'GET',
                 headers: headers,
@@ -114,12 +113,12 @@ export const EventDetails: FC<EventDetailsProps> = ({ match, currentUser, isUser
                     setLatitude(eventData.latitude);
                     setLongitude(eventData.longitude);
                     setCreatedById(eventData.createdByUserId);
-                    const shareMessage = "Help clean up Planet Earth! Sign up for this TrashMob.eco event in " + eventData.city + ", " + eventData.region + " on " + (new Date(eventData.eventDate)).toLocaleDateString() + "! via @TrashMobEco " + eventUrl;
-                    setTwitterUrl("https://twitter.com/intent/tweet?text=" + encodeURI(shareMessage) + "&ref_src=twsrc%5Etfw");
-                    setFacebookUrl("https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.trashmob.eco%2Feventdetails%2" + eventId + "&amp;src=sdkpreparse");
+                    setTwitterUrl(getTwitterUrl(eventData));
+                    setFacebookUrl(getFacebookUrl(eventData.id));
                     setMaxNumberOfParticipants(eventData.maxNumberOfParticipants);
                     setCenter(new data.Position(eventData.longitude, eventData.latitude));
                     setIsDataLoaded(true);
+                    setIsEventCompleted(new Date(eventData.eventDate) < new Date());
                 })
                 .then(() => {
                     if (!isUserLoaded || !currentUser) {
@@ -282,8 +281,8 @@ export const EventDetails: FC<EventDetailsProps> = ({ match, currentUser, isUser
                                 <Dropdown.Toggle id="share-toggle" variant="outline" className="h-100 p-18"><Share className="mr-2" aria-hidden="true" />Share</Dropdown.Toggle>
                                 <Dropdown.Menu id="share-menu">
                                     <Dropdown.Item className="share-link" onClick={handleCopyLink}><Link className="mr-2 p-18" aria-hidden="true" />{!copied ? "Copy link" : "Copied!"}</Dropdown.Item>
-                                    <Dropdown.Item className="share-link" href={facebookUrl}><Facebook className="mr-2 p-18" aria-hidden="true" />Share to Facebook</Dropdown.Item>
-                                    <Dropdown.Item className="share-link" href={twitterUrl}><Twitter className="mr-2 p-18" aria-hidden="true" />Share to Twitter</Dropdown.Item>
+                                    <Dropdown.Item className="share-link" href={facebookUrl} hidden={isEventCompleted}><Facebook className="mr-2 p-18" aria-hidden="true" />Share to Facebook</Dropdown.Item>
+                                    <Dropdown.Item className="share-link" href={twitterUrl} hidden={isEventCompleted}><Twitter className="mr-2 p-18" aria-hidden="true" />Share to Twitter</Dropdown.Item>
                                 </Dropdown.Menu>
                             </Dropdown>
                             <RegisterBtn eventId={eventId} isAttending={isAttending} currentUser={currentUser} onAttendanceChanged={handleAttendanceChanged} isUserLoaded={isUserLoaded} history={history} location={location} match={match}></RegisterBtn>

diff --git a/TrashMob/client-app/src/components/Pages/MyDashboard.tsx b/TrashMob/client-app/src/components/Pages/MyDashboard.tsx
@@ -13,7 +13,7 @@ import { Table } from '../Table';
 import twofigure from '../assets/card/twofigure.svg';
 import calendarclock from '../assets/card/calendarclock.svg';
 import bucketplus from '../assets/card/bucketplus.svg';
-import { Eye, PersonX, Link as LinkIcon, Pencil, FileEarmarkCheck, CheckSquare, XSquare, ArrowRightSquare } from 'react-bootstrap-icons';
+import { Eye, PersonX, Link as LinkIcon, Pencil, FileEarmarkCheck, CheckSquare, XSquare, ArrowRightSquare, Facebook, Twitter } from 'react-bootstrap-icons';
 import StatsData from '../Models/StatsData';
 import { PartnerStatusActive } from '../Models/Constants';
 import DisplayPartnershipData from '../Models/DisplayPartnershipData';
@@ -24,6 +24,7 @@ import DisplayPartnerAdminInvitationData from '../Models/DisplayPartnerAdminInvi
 import { PartnerLocationEventRequests } from '../Partners/PartnerLocationEventRequests';
 import { Guid } from 'guid-typescript';
 import PickupLocationData from '../Models/PickupLocationData';
+import { getTwitterUrl, getFacebookUrl } from '../../store/ShareUrl';
 
 interface MyDashboardProps extends RouteComponentProps<any> {
     isUserLoaded: boolean;
@@ -405,28 +406,41 @@ const MyDashboard: FC<MyDashboardProps> = (props) => {
         });
     }
 
-    const attendeeActionDropdownList = (eventId: string) => {
+    const attendeeActionDropdownList = (event: EventData) => {
         return (
             <>
-                <Dropdown.Item href={'/eventdetails/' + eventId}><Eye />View event</Dropdown.Item>
-                <Dropdown.Item onClick={() => handleUnregisterEvent(eventId, props.currentUser.userName)}><PersonX />Unregister for event</Dropdown.Item>
-                <Dropdown.Item onClick={() => handleCopyLink(eventId)}><LinkIcon />{copied ? 'Copied!' : 'Copy event link'}</Dropdown.Item>
+                <Dropdown.Item href={'/eventdetails/' + event.id}><Eye />View event</Dropdown.Item>
+                <Dropdown.Item onClick={() => handleUnregisterEvent(event.id, props.currentUser.userName)}><PersonX />Unregister for event</Dropdown.Item>
+                <Dropdown.Item onClick={() => handleCopyLink(event.id)}><LinkIcon />{copied ? 'Copied!' : 'Copy event link'}</Dropdown.Item>
+                <Dropdown.Item href={getFacebookUrl(event.id)}><Facebook />Share to Facebook</Dropdown.Item>
+                <Dropdown.Item href={getTwitterUrl(event)}><Twitter />Share to Twitter</Dropdown.Item>
             </>
         )
     }
 
-    const eventOwnerActionDropdownList = (eventId: string) => {
+    const eventOwnerActionDropdownList = (event: EventData) => {
+        return (
+            <>
+                <Dropdown.Item href={'/manageeventdashboard/' + event.id}><Pencil />Manage event</Dropdown.Item>
+                <Dropdown.Item href={'/eventdetails/' + event.id}><Eye />View event</Dropdown.Item>
+                <Dropdown.Item onClick={() => handleCopyLink(event.id)}><LinkIcon />{copied ? 'Copied!' : 'Copy event link'}</Dropdown.Item>
+                <Dropdown.Item href={getFacebookUrl(event.id)}><Facebook />Share to Facebook</Dropdown.Item>
+                <Dropdown.Item href={getTwitterUrl(event)}><Twitter />Share to Twitter</Dropdown.Item>
+                <Dropdown.Item href={'/cancelevent/' + event.id}><XSquare />Cancel event</Dropdown.Item>
+            </>
+        )
+    }
+
+    const completedAttendeeActionDropdownList = (eventId: string) => {
         return (
             <>
-                <Dropdown.Item href={'/manageeventdashboard/' + eventId}><Pencil />Manage event</Dropdown.Item>
                 <Dropdown.Item href={'/eventdetails/' + eventId}><Eye />View event</Dropdown.Item>
                 <Dropdown.Item onClick={() => handleCopyLink(eventId)}><LinkIcon />{copied ? 'Copied!' : 'Copy event link'}</Dropdown.Item>
-                <Dropdown.Item href={'/cancelevent/' + eventId}><XSquare />Cancel event</Dropdown.Item>
             </>
         )
     }
 
-    const eventCompletedOwnerActionDropdownList = (eventId: string) => {
+    const completedEventOwnerActionDropdownList = (eventId: string) => {
         return (
             <>
                 <Dropdown.Item href={'/eventsummary/' + eventId}><FileEarmarkCheck />Event Summary</Dropdown.Item>
@@ -501,7 +515,7 @@ const MyDashboard: FC<MyDashboardProps> = (props) => {
                                         <Dropdown role="menuitem">
                                             <Dropdown.Toggle id="share-toggle" variant="outline" className="h-100 border-0">...</Dropdown.Toggle>
                                             <Dropdown.Menu id="share-menu">
-                                                {event.createdByUserId === props.currentUser.id ? eventOwnerActionDropdownList(event.id) : attendeeActionDropdownList(event.id)}
+                                                {event.createdByUserId === props.currentUser.id ? eventOwnerActionDropdownList(event) : attendeeActionDropdownList(event)}
                                             </Dropdown.Menu>
                                         </Dropdown>
                                     </td>
@@ -543,7 +557,7 @@ const MyDashboard: FC<MyDashboardProps> = (props) => {
                                             <Dropdown role="menuitem">
                                                 <Dropdown.Toggle id="share-toggle" variant="outline" className="h-100 border-0">...</Dropdown.Toggle>
                                                 <Dropdown.Menu id="share-menu">
-                                                    {event.createdByUserId === props.currentUser.id ? eventCompletedOwnerActionDropdownList(event.id) : attendeeActionDropdownList(event.id)}
+                                                    {event.createdByUserId === props.currentUser.id ? completedEventOwnerActionDropdownList(event.id) : completedAttendeeActionDropdownList(event.id)}
                                                 </Dropdown.Menu>
                                             </Dropdown>
                                         </td>

diff --git a/TrashMob/client-app/src/store/ShareUrl.tsx b/TrashMob/client-app/src/store/ShareUrl.tsx
@@ -0,0 +1,12 @@
+import EventData from "../components/Models/EventData";
+
+export function getTwitterUrl(eventData: EventData): string {
+    var host = window.location.host;
+    const eventUrl = "https://" + host + "/eventdetails/" + eventData.id;
+    const shareMessage = "Help clean up Planet Earth! Sign up for this TrashMob.eco event in " + eventData.city + ", " + eventData.region + " on " + (new Date(eventData.eventDate)).toLocaleDateString() + "! via @TrashMobEco " + eventUrl;
+    return "https://twitter.com/intent/tweet?text=" + encodeURI(shareMessage) + "&ref_src=twsrc%5Etfw";
+}
+
+export function getFacebookUrl(eventId: string): string {
+    return "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.trashmob.eco%2Feventdetails%2" + eventId + "&amp;src=sdkpreparse";
+}