Merge pull request #282 from medyo/develop

New Version

Author: medyo

src/assets/App.css

@@ -201,6 +201,7 @@ a {
   box-sizing: border-box;
   scroll-snap-align: start;
   width: 100%;
+  position: relative;
 }
 
 .blockContent {
@@ -467,7 +468,8 @@ a {
   padding: 0;
   pointer-events: all;
   text-align: center;
-  transition: opacity 0.3s ease, right 0.3s ease;
+  transition: opacity 0.3s ease, right 0.3s ease, transform 0.1s ease, background-color 0.15s ease,
+    color 0.15s ease;
   width: 28px;
   margin-bottom: 6px;
   margin-right: 6px;
@@ -543,6 +545,10 @@ a {
 .rowTitle:hover {
   color: var(--primary-hover-text-color);
 }
+
+.blockRow.isRead {
+  opacity: 0.3;
+}
 .titleWithCover {
   display: block;
   width: 100%;

src/components/Elements/CardLink/CardLink.tsx

@@ -14,7 +14,7 @@ export const CardLink = ({
   link,
   children,
   className = '',
-  appendRef = false,
+  appendRef = true,
   analyticsAttributes,
 }: CardLinkProps) => {
   return (

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -1,9 +1,17 @@
+import clsx from 'clsx'
 import React, { useCallback, useEffect, useState } from 'react'
-import { BiBookmarkMinus, BiBookmarkPlus, BiShareAlt } from 'react-icons/bi'
+import { BiBookmarkMinus, BiBookmarkPlus, BiCheckDouble, BiShareAlt } from 'react-icons/bi'
 import { ShareModal } from 'src/features/shareModal'
 import { ShareModalData } from 'src/features/shareModal/types'
-import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
+import {
+  Attributes,
+  trackLinkBookmark,
+  trackLinkUnBookmark,
+  trackMarkAsRead,
+} from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
+import { useReadPosts } from 'src/stores/readPosts'
+import { useShallow } from 'zustand/shallow'
 
 type CardItemWithActionsProps = {
   item: {
@@ -32,11 +40,36 @@ export const CardItemWithActions = ({
   const [shareModalData, setShareModalData] = useState<ShareModalData>()
 
   const { bookmarkPost, unbookmarkPost, userBookmarks } = useBookmarks()
+  const { isRead, markAsRead, markAsUnread } = useReadPosts(
+    useShallow((state) => ({
+      markAsRead: state.markAsRead,
+      markAsUnread: state.markAsUnread,
+      isRead: state.readPostIds.includes(item.id),
+    }))
+  )
   const [isBookmarked, setIsBookmarked] = useState(
     userBookmarks.some((bm) => bm.source === source && bm.url === item.url)
   )
 
-  const onBookmarkClick = useCallback(() => {
+  const onMarkAsReadClicked = useCallback(() => {
+    if (isRead) {
+      markAsUnread(item.id)
+    } else {
+      markAsRead(item.id)
+    }
+
+    if (isRead) {
+      const analyticsAttrs = {
+        [Attributes.TRIGERED_FROM]: 'card',
+        [Attributes.TITLE]: item.title,
+        [Attributes.LINK]: item.url,
+        [Attributes.SOURCE]: source,
+      }
+      trackMarkAsRead(analyticsAttrs)
+    }
+  }, [isRead, item.id])
+
+  const onBookmarkClicked = useCallback(() => {
     const itemToBookmark = {
       title: item.title,
       url: item.url,
@@ -70,7 +103,7 @@ export const CardItemWithActions = ({
     setShareModalData({ title: item.title, link: item.url, source: source })
   }, [item.title, item.url, source])
   return (
-    <div key={item.id} className="blockRow">
+    <div key={item.id} className={clsx('blockRow', { isRead })}>
       <ShareModal
         showModal={setShareModalData !== undefined}
         closeModal={() => setShareModalData(undefined)}
@@ -95,11 +128,18 @@ export const CardItemWithActions = ({
         {showBookmarkAction && (
           <button
             className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
-            onClick={onBookmarkClick}
+            onClick={onBookmarkClicked}
             aria-label="Bookmark item">
             {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
           </button>
         )}
+
+        <button
+          className={`blockActionButton ${isRead ? 'active' : ''}`}
+          onClick={onMarkAsReadClicked}
+          aria-label={isRead ? 'Mark as unread' : 'Mark as read'}>
+          <BiCheckDouble />
+        </button>
       </div>
     </div>
   )

src/components/Elements/UserTags/UserTags.tsx

@@ -1,33 +1,65 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
+import { FaGlobe } from 'react-icons/fa'
 import { TiPlus } from 'react-icons/ti'
 import { Link } from 'react-router-dom'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useShallow } from 'zustand/shallow'
 
 export const UserTags = () => {
-  const { cards, userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences(
-    useShallow((state) => ({
-      cards: state.cards,
-      userSelectedTags: state.userSelectedTags,
-      cardsSettings: state.cardsSettings,
-      setCardSettings: state.setCardSettings,
-    }))
-  )
+  const { cards, userSelectedTags, cardsSettings, setCardSettings, clearCardSettingsLanguages } =
+    useUserPreferences(
+      useShallow((state) => ({
+        cards: state.cards,
+        userSelectedTags: state.userSelectedTags,
+        cardsSettings: state.cardsSettings,
+        setCardSettings: state.setCardSettings,
+        clearCardSettingsLanguages: state.clearCardSettingsLanguages,
+      }))
+    )
 
-  const onTagClicked = useCallback((tagValue: string) => {
-    cards.forEach((card) => {
-      setCardSettings(card.name, {
-        ...cardsSettings[card.id],
-        language: tagValue,
+  const onTagClicked = useCallback(
+    (tagValue: string) => {
+      if (tagValue === 'all') {
+        clearCardSettingsLanguages()
+        return
+      }
+
+      cards.forEach((card) => {
+        setCardSettings(card.name, {
+          ...cardsSettings[card.id],
+          language: tagValue,
+        })
       })
-    })
-  }, [])
+    },
+    [cards, cardsSettings, setCardSettings]
+  )
+
+  const tagsList = useMemo(() => {
+    const tags = userSelectedTags.map((tag) => ({
+      label: tag.label,
+      value: tag.value,
+      icon: undefined,
+    }))
+
+    if (tags.length === 0) {
+      return tags
+    }
+
+    return [
+      {
+        label: 'All',
+        value: 'all',
+        icon: <FaGlobe className="tagIcon" />,
+      },
+      ...tags,
+    ]
+  }, [userSelectedTags])
 
   return (
     <div className="tags">
-      {userSelectedTags.map((tag, index) => (
+      {tagsList.map((tag, index) => (
         <button key={index} className="tag tagHoverable" onClick={() => onTagClicked(tag.value)}>
-          {tag.label}
+          {tag.icon} {tag.label}
         </button>
       ))}
       <Link to="/settings/topics" className="tag tagHoverable" aria-label="Open settings">

src/components/List/ListComponent.tsx

@@ -1,6 +1,8 @@
 import React, { memo, ReactNode, useMemo } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
+import { useUserPreferences } from 'src/stores/preferences'
+import { useReadPosts } from 'src/stores/readPosts'
 
 type PlaceholdersProps = {
   placeholder: ReactNode
@@ -42,13 +44,28 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     limit = MAX_ITEMS_PER_CARD,
   } = props
 
+  const { showReadPosts } = useUserPreferences()
+  const readPostIdSet = useReadPosts((state) => state.readPostIdSet)
+
+  const filteredItems = useMemo(() => {
+    if (!items || items.length === 0) {
+      return []
+    }
+
+    if (showReadPosts) {
+      return items
+    }
+
+    return items.filter((item: any) => !readPostIdSet.has(item.id))
+  }, [items, readPostIdSet, showReadPosts])
+
   const sortedData = useMemo(() => {
-    if (!items || items.length == 0) return []
-    if (!sortBy) return items
+    if (!filteredItems || filteredItems.length == 0) return []
+    if (!sortBy) return filteredItems
 
     const result = sortFn
-      ? [...items].sort(sortFn)
-      : [...items].sort((a, b) => {
+      ? [...filteredItems].sort(sortFn)
+      : [...filteredItems].sort((a, b) => {
           const aVal = a[sortBy]
           const bVal = b[sortBy]
           if (typeof aVal === 'number' && typeof bVal === 'number') return bVal - aVal
@@ -57,7 +74,7 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
         })
 
     return result
-  }, [sortBy, sortFn, items])
+  }, [sortBy, sortFn, filteredItems])
 
   const enrichedItems = useMemo(() => {
     if (!sortedData || sortedData.length === 0) {
@@ -93,5 +110,15 @@ export function ListComponent<T extends any>(props: ListComponentPropsType<T>) {
     )
   }
 
+  if (items && items.length > 0 && filteredItems.length === 0) {
+    return (
+      <div className="errorMsg">
+        <span>✨</span>
+        <b>You're all caught up!</b>
+        <p>Check back later for fresh content.</p>
+      </div>
+    )
+  }
+
   return <>{enrichedItems}</>
 }

src/features/adv/components/AdvBanner.tsx

@@ -98,8 +98,8 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
           <img
             src={ad.imageUrl}
             alt={ad.title}
-            height={!feedDisplay ? '100' : '200'}
-            width={!feedDisplay ? '130' : '260'}
+            height={!feedDisplay ? '120' : '200'}
+            width={!feedDisplay ? '156' : '260'}
             style={{ border: 0 }}
           />
         </a>

src/features/cards/components/producthuntCard/ArticleItem.tsx

@@ -18,7 +18,6 @@ const ArticleItem = ({ item, analyticsTag }: BaseItemPropsType<Product>) => {
           <div className="phContent">
             <CardLink
               link={item.url}
-              appendRef={false}
               analyticsAttributes={{
                 [Attributes.POINTS]: item.votes_count,
                 [Attributes.TRIGERED_FROM]: 'card',

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -25,10 +25,12 @@ export const GeneralSettings = () => {
     listingMode,
     theme,
     maxVisibleCards,
+    showReadPosts,
     setTheme,
     setListingMode,
     setMaxVisibleCards,
     setOpenLinksNewTab,
+    setShowReadPosts,
   } = useUserPreferences()
 
   const onOpenLinksNewTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -52,6 +54,10 @@ export const GeneralSettings = () => {
     identifyUserTheme(newTheme)
   }
 
+  const onShowReadPostsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setShowReadPosts(e.target.checked)
+  }
+
   return (
     <SettingsContentLayout
       title="General Settings"
@@ -77,6 +83,13 @@ export const GeneralSettings = () => {
           </div>
         </div>
 
+        <div className="settingRow">
+          <p className="settingTitle">Display read posts</p>
+          <div className="settingContent">
+            <Toggle checked={showReadPosts} icons={false} onChange={onShowReadPostsChange} />
+          </div>
+        </div>
+
         <div className="settingRow">
           <p className="settingTitle">Compact mode</p>
           <div className="settingContent">

src/lib/analytics.ts

@@ -37,6 +37,7 @@ enum Verbs {
   TARGET = 'Target',
   BOOKMARK = 'Bookmark',
   UNBOOKMARK = 'Unbookmark',
+  MARK_AS_READ = 'Mark as Read',
   REMOVE = 'Remove',
   START = 'Start',
   FINISH = 'Finish',
@@ -226,6 +227,14 @@ export const trackLinkUnBookmark = (attributes: { [P: string]: string }) => {
   })
 }
 
+export const trackMarkAsRead = (attributes: { [P: string]: string }) => {
+  trackEvent({
+    object: Objects.LINK,
+    verb: Verbs.MARK_AS_READ,
+    attributes,
+  })
+}
+
 export const trackLinkOpen = (attributes: { [P: string]: string | number | undefined }) => {
   trackEvent({
     object: Objects.LINK,