implement add to calendar feature for events

Author: medyo

src/assets/App.css

@@ -458,7 +458,9 @@ a {
   box-shadow: 0 0 15px 2px var(--card-actions-background-shadow);
   color: var(--card-action-button-color);
   cursor: pointer;
-  display: block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 18px;
   height: 28px;
   line-height: 12px;
@@ -1127,6 +1129,13 @@ Producthunt item
   opacity: 1;
 }
 
+.calendarProviderIcon {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  vertical-align: sub;
+  margin-right: 6px;
+}
 /*****************
 *** BREAKPOINTS
 *******************/

src/assets/calendar_icons/apple.svg

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { BiBookmarkMinus, BiBookmarkPlus, BiShareAlt } from 'react-icons/bi'
 import { MdBugReport } from 'react-icons/md'
 import { reportLink } from 'src/config'
@@ -14,15 +14,22 @@ type CardItemWithActionsProps = {
     url: string
     id: string
   }
+  showBookmarkAction?: boolean
   source: string
   cardItem: React.ReactNode
+  customActions?: Array<{
+    label: string
+    Component: React.ReactNode
+  }>
   sourceType?: 'rss' | 'supported'
 }
 
 export const CardItemWithActions = ({
   cardItem,
   item,
   source,
+  showBookmarkAction = true,
+  customActions,
   sourceType = 'supported',
 }: CardItemWithActionsProps) => {
   const [shareModalData, setShareModalData] = useState<ShareModalData>()
@@ -32,7 +39,7 @@ export const CardItemWithActions = ({
     userBookmarks.some((bm) => bm.source === source && bm.url === item.url)
   )
 
-  const onBookmarkClick = () => {
+  const onBookmarkClick = useCallback(() => {
     const itemToBookmark = {
       title: item.title,
       url: item.url,
@@ -56,22 +63,22 @@ export const CardItemWithActions = ({
     } else {
       trackLinkBookmark(analyticsAttrs)
     }
-  }
+  }, [isBookmarked, item, source, sourceType, bookmarkPost, unbookmarkPost])
 
   useEffect(() => {
     setIsBookmarked(userBookmarks.some((bm) => bm.source === source && bm.url === item.url))
   }, [userBookmarks, source, item])
 
-  const onShareModalClicked = () => {
+  const onShareModalClicked = useCallback(() => {
     setShareModalData({ title: item.title, link: item.url, source: source })
-  }
+  }, [item.title, item.url, source])
 
-  const onReportClicked = () => {
+  const onReportClicked = useCallback(() => {
     const tags = useUserPreferences
       .getState()
       .userSelectedTags.map((tag) => tag.label.toLocaleLowerCase())
     window.open(`${reportLink}?tags=${tags.join(',')}&url=${item.url}`, '_blank')
-  }
+  }, [item.url])
 
   return (
     <div key={item.id} className="blockRow">
@@ -96,12 +103,22 @@ export const CardItemWithActions = ({
           aria-label="Open share modal">
           <BiShareAlt />
         </button>
-        <button
-          className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
-          onClick={onBookmarkClick}
-          aria-label="Bookmark item">
-          {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
-        </button>
+
+        {customActions &&
+          customActions.map((action) => (
+            <div key={action.label} aria-label={action.label}>
+              {action.Component}
+            </div>
+          ))}
+
+        {showBookmarkAction && (
+          <button
+            className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
+            onClick={onBookmarkClick}
+            aria-label="Bookmark item">
+            {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
+          </button>
+        )}
       </div>
     </div>
   )