Skip to content

Commit 2d6f10f

Browse files
medyomedyo
committed
migrate the bookmarks to ts
1 parent 0b70cd1 commit 2d6f10f

7 files changed

Lines changed: 156 additions & 128 deletions

File tree

‎src/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react'
22
import './App.css'
33
import { Footer } from 'src/components/Layout'
44
import Header from 'src/components/Header'
5-
import BookmarksSidebar from './bookmark/BookmarksSidebar'
5+
import { BookmarksSidebar } from 'src/features/bookmarks'
66
import { MarketingBanner } from 'src/components/Elements/MarketingBanner'
77
import ScrollCardsNavigator from './components/ScrollCardsNavigator'
88
import AppContentLayout from './components/AppContentLayout'

‎src/bookmark/BookmarksSidebar.js‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎src/features/bookmarks/components/BookmarksSidebar.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from 'react'
2+
import './Sidebar.css'
3+
import { VscChromeClose } from 'react-icons/vsc'
4+
import { TiDelete } from 'react-icons/ti'
5+
import { HiTicket } from 'react-icons/hi'
6+
import { SiGithub, SiReddit, SiProducthunt, SiYcombinator } from 'react-icons/si'
7+
import {
8+
ProSidebar,
9+
Menu,
10+
MenuItem,
11+
SubMenu,
12+
SidebarHeader,
13+
SidebarContent,
14+
} from 'react-pro-sidebar'
15+
import 'react-pro-sidebar/dist/css/styles.css'
16+
import CardLink from '../../../components/CardLink'
17+
import { trackLinkUnBookmark, Attributes } from 'src/lib/analytics'
18+
import { useUserPreferences } from 'src/stores/preferences'
19+
20+
type BookmarkItemProps = {
21+
item: {
22+
url: string
23+
title: string
24+
source: string
25+
}
26+
appendRef?: boolean
27+
}
28+
const BookmarkItem = ({ item, appendRef = true }: BookmarkItemProps) => {
29+
const { unbookmarkPost } = useUserPreferences()
30+
const analyticsAttrs = {
31+
[Attributes.TRIGERED_FROM]: 'bookmarks',
32+
[Attributes.TITLE]: item.title,
33+
[Attributes.LINK]: item.url,
34+
[Attributes.SOURCE]: item.source,
35+
}
36+
const unBookmark = () => {
37+
unbookmarkPost(item)
38+
trackLinkUnBookmark(analyticsAttrs)
39+
}
40+
return (
41+
<MenuItem
42+
suffix={
43+
<span className="unbookmarkBtn" onClick={unBookmark}>
44+
<TiDelete />
45+
</span>
46+
}>
47+
<CardLink
48+
link={item.url}
49+
appendRef={appendRef}
50+
analyticsAttributes={analyticsAttrs}
51+
className="">
52+
{`${item.title}`}
53+
</CardLink>
54+
</MenuItem>
55+
)
56+
}
57+
58+
type BookmarksSidebarTtypes = {
59+
showSidebar: boolean
60+
onClose: () => void
61+
}
62+
export const BookmarksSidebar = ({ showSidebar, onClose }: BookmarksSidebarTtypes) => {
63+
const { userBookmarks } = useUserPreferences()
64+
const githubBookmarks = userBookmarks.filter((bm) => bm.source === 'github')
65+
const newsBookmarks = userBookmarks.filter(
66+
(bm) =>
67+
[
68+
'hackernews',
69+
'devto',
70+
'hashnode',
71+
'lobsters',
72+
'freecodecamp',
73+
'medium',
74+
'indiehackers',
75+
].indexOf(bm.source) !== -1
76+
)
77+
const conferencesBookmarks = userBookmarks.filter((bm) => bm.source === 'conferences')
78+
const productsBookmarks = userBookmarks.filter((bm) => bm.source === 'producthunt')
79+
const redditBookmarks = userBookmarks.filter((bm) => bm.source === 'reddit')
80+
81+
return (
82+
<ProSidebar className="sidebar" collapsed={!showSidebar} collapsedWidth={'0px'} width={'14%'}>
83+
<SidebarHeader>
84+
<div className="sidebarHeader">
85+
<span className="title">Bookmarks</span>
86+
<span className="closeBtn" onClick={onClose}>
87+
<VscChromeClose />
88+
</span>
89+
</div>
90+
</SidebarHeader>
91+
<SidebarContent>
92+
<Menu iconShape="circle">
93+
<SubMenu
94+
title="Github Repos"
95+
icon={<SiGithub />}
96+
suffix={<span className="badge yellow">{githubBookmarks.length}</span>}>
97+
{githubBookmarks.map((bm, index) => (
98+
<BookmarkItem item={bm} key={`gh-${index}`} />
99+
))}
100+
</SubMenu>
101+
102+
<SubMenu
103+
title="News & Articles"
104+
icon={<SiYcombinator />}
105+
suffix={<span className="badge yellow">{newsBookmarks.length}</span>}>
106+
{newsBookmarks.map((bm, index) => (
107+
<BookmarkItem item={bm} key={`ne-${index}`} />
108+
))}
109+
</SubMenu>
110+
111+
<SubMenu
112+
title="Product Hunt"
113+
icon={<SiProducthunt />}
114+
suffix={<span className="badge yellow">{productsBookmarks.length}</span>}>
115+
{productsBookmarks.map((bm, index) => (
116+
<BookmarkItem item={bm} key={`gh-${index}`} appendRef={false} />
117+
))}
118+
</SubMenu>
119+
120+
<SubMenu
121+
title="Conferences"
122+
icon={<HiTicket />}
123+
suffix={<span className="badge yellow">{conferencesBookmarks.length}</span>}>
124+
{conferencesBookmarks.map((bm, index) => (
125+
<BookmarkItem item={bm} key={`co-${index}`} />
126+
))}
127+
</SubMenu>
128+
<SubMenu
129+
title="Reddit"
130+
icon={<SiReddit />}
131+
suffix={<span className="badge yellow">{redditBookmarks.length}</span>}>
132+
{redditBookmarks.map((bm, index) => (
133+
<BookmarkItem item={bm} key={`co-${index}`} />
134+
))}
135+
</SubMenu>
136+
</Menu>
137+
</SidebarContent>
138+
</ProSidebar>
139+
)
140+
}
141+
142+
export default BookmarksSidebar

src/bookmark/Sidebar.css renamed to src/features/bookmarks/components/Sidebar.css

File renamed without changes.

‎src/features/bookmarks/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./components/BookmarksSidebar"

‎src/stores/preferences.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import create from 'zustand';
22
import { persist } from 'zustand/middleware'
3-
import { SelectedCard, SelectedTag, Theme, ListingMode } from "../types";
3+
import { SelectedCard, SelectedTag, Theme, ListingMode, BookmarkedPost } from "../types";
44

55
type UserPreferencesStore = {
66
userSelectedTags: SelectedTag[]
7-
userBookmarks: any[]
7+
userBookmarks: BookmarkedPost[]
88
theme: Theme,
99
openLinksNewTab: boolean,
1010
listingMode: ListingMode,
@@ -16,6 +16,8 @@ type UserPreferencesStore = {
1616
setListingMode: (listingMode: ListingMode) => void;
1717
setCards: (selectedCards: SelectedCard[]) => void;
1818
setTags: (selectedTags: SelectedTag[]) => void;
19+
bookmarkPost: (post: BookmarkedPost) => void;
20+
unbookmarkPost: (post: BookmarkedPost) => void;
1921
};
2022

2123
export const useUserPreferences = create(persist<UserPreferencesStore>((set) => ({
@@ -32,6 +34,8 @@ export const useUserPreferences = create(persist<UserPreferencesStore>((set) =>
3234
setOpenLinksNewTab: (openLinksNewTab: boolean) => set({ openLinksNewTab: openLinksNewTab }),
3335
setCards: (selectedCards: SelectedCard[]) => set({ cards: selectedCards }),
3436
setTags: (selectedTags: SelectedTag[]) => set({ userSelectedTags: selectedTags }),
37+
bookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })),
38+
unbookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: state.userBookmarks.filter((bookmarkedPost) => bookmarkedPost.url !== post.url), }))
3539
}), {
3640
name: 'preferences_storage',
3741
}));

‎src/types/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ export type SelectedTag = {
1313
value: string
1414
}
1515

16+
export type BookmarkedPost = {
17+
title: string,
18+
source: string,
19+
url: string;
20+
}
21+
1622
export type UserPreferences = {
1723
userSelectedTags: string[]
1824
userBookmarks: any[]

0 commit comments

Comments
 (0)