migrate cardlink and clickable item to ts

Author: medyo

src/components/Elements/CardLink/CardLink.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ClickableItem from '../../ClickableItem'
+import { ClickableItem } from '../ClickableItem'
 
 type CardLinkProps = {
   link: string

src/components/CardItemWithActions.js …/CardWithActions/CardItemWithActions.tsxsrc/components/CardItemWithActions.js renamed to src/components/Elements/CardWithActions/CardItemWithActions.tsx src/components/CardItemWithActions.js renamed to src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -3,8 +3,21 @@ import { useBookmarks } from 'src/stores/bookmarks'
 import { BiBookmarkPlus } from 'react-icons/bi'
 import { BiBookmarkMinus } from 'react-icons/bi'
 import { trackLinkBookmark, trackLinkUnBookmark, Attributes } from 'src/lib/analytics'
+import { BaseEntry } from 'src/types'
 
-export default function CardItemWithActions({ cardItem, item, index, source }) {
+type CardItemWithActionsProps = {
+  item: BaseEntry
+  index: number
+  source: string
+  cardItem: React.ReactNode
+}
+
+export const CardItemWithActions = ({
+  cardItem,
+  item,
+  index,
+  source,
+}: CardItemWithActionsProps) => {
   const { bookmarkPost, unbookmarkPost, userBookmarks } = useBookmarks()
   const [isBookmarked, setIsBookmarked] = useState(
     userBookmarks.some((bm) => bm.source === source && bm.url === item.url)

src/components/Elements/CardWithActions/index.ts

@@ -0,0 +1 @@
+export * from "./CardItemWithActions"

src/components/ClickableItem.js …Elements/ClickableItem/ClickableItem.tsxsrc/components/ClickableItem.js renamed to src/components/Elements/ClickableItem/ClickableItem.tsx src/components/ClickableItem.js renamed to src/components/Elements/ClickableItem/ClickableItem.tsx

@@ -4,10 +4,25 @@ import { ref } from 'src/config'
 
 import { useUserPreferences } from 'src/stores/preferences'
 
-const ClickableItem = ({ link, className, children, analyticsAttributes, appendRef = true }) => {
+type ClickableItemProps = {
+  link: string
+  className?: string
+  children: React.ReactNode
+  analyticsAttributes: {
+    [key: string]: string | number | undefined
+  }
+  appendRef?: boolean
+}
+export const ClickableItem = ({
+  link,
+  className,
+  children,
+  analyticsAttributes,
+  appendRef = true,
+}: ClickableItemProps) => {
   const { openLinksNewTab } = useUserPreferences()
 
-  const handleClick = (e) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
 
     trackLinkOpen(analyticsAttributes)
@@ -39,5 +54,3 @@ const ClickableItem = ({ link, className, children, analyticsAttributes, appendR
     </a>
   )
 }
-
-export default ClickableItem

src/components/Elements/ClickableItem/index.ts

@@ -0,0 +1 @@
+export * from "./ClickableItem"

src/components/Elements/index.ts

@@ -4,4 +4,6 @@ export * from "./MarketingBanner"
 export * from "./SearchBar"
 export * from "./UserTags"
 export * from "./BottomNavigation"
-export * from "./CardLink"
+export * from "./CardLink"
+export * from "./CardWithActions"
+export * from "./ClickableItem"