diff --git a/craco.config.js b/craco.config.js index b303aa96..22f34e28 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,7 +1,19 @@ const path = require('path') +const webpack = require('webpack') + +function isDevelopmentEnv() { + return process.env.NODE_ENV === 'development' +} module.exports = { webpack: { + plugins: { + add: [ + new webpack.DefinePlugin({ + process: { env: {} }, + }), + ], + }, alias: { '@': path.resolve(__dirname, 'src'), }, @@ -10,10 +22,10 @@ module.exports = { filename: 'static/js/[name].js', }, optimization: { - runtimeChunk: false, + runtimeChunk: isDevelopmentEnv(), splitChunks: { chunks(chunk) { - return false + return isDevelopmentEnv() }, }, }, @@ -23,6 +35,10 @@ module.exports = { { plugin: { overrideWebpackConfig: ({ webpackConfig }) => { + if (isDevelopmentEnv()) { + return webpackConfig + } + let mcep webpackConfig.plugins.some((p) => { if (p.constructor.name === 'MiniCssExtractPlugin') { diff --git a/package.json b/package.json index db989a0f..7c7c2e18 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,13 @@ "dependencies": { "@amplitude/analytics-browser": "^1.5.5", "@craco/craco": "^6.4.5", + "@sentry/react": "^7.17.4", + "@sentry/tracing": "^7.17.4", + "@tanstack/react-query": "^4.13.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "@types/dompurify": "^2.3.4", "axios": "^0.21.2", "axios-cache-adapter": "^2.7.3", "country-emoji": "^1.5.4", @@ -25,22 +29,30 @@ "react-modal": "^3.12.1", "react-pro-sidebar": "^0.6.0", "react-scripts": "4.0.1", - "react-select": "^4.0.2", + "react-select": "^5.0.1", "react-spinners": "^0.10.4", "react-toggle": "^4.1.1", "react-tooltip": "^4.2.21", "styled-components": "2", "timeago.js": "^4.0.2", - "web-vitals": "^0.2.4" + "type-fest": "^1.2.0", + "web-vitals": "^0.2.4", + "zustand": "^4.1.3" }, "proxy": "https://api.hackertab.dev/", "scripts": { "start": "craco start", - "web-build": "REACT_APP_WEB_BUILD=1 CI= react-scripts --max_old_space_size=3072 build", + "web-build": "craco --max_old_space_size=4096 build", "build": "./script/build.sh", "stores-build": "./script/stores_build.sh", "eject": "react-scripts eject" }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, "browserslist": { "production": [ ">0.2%", @@ -53,12 +65,30 @@ "last 1 safari version" ] }, + "resolutions": { + "react-error-overlay": "6.0.9" + }, "devDependencies": { "@types/chrome": "^0.0.198", "@types/jest": "^29.1.2", "@types/node": "^18.11.0", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", + "@types/react-modal": "^3.13.1", + "@types/react-toggle": "^4.0.3", + "@typescript-eslint/eslint-plugin": "^5.40.1", + "@typescript-eslint/parser": "^5.40.1", + "eslint-config-airbnb": "19.0.4", + "eslint-config-airbnb-typescript": "^17.0.0", + "eslint-config-prettier": "^8.5.0", + "eslint-config-react-app": "^7.0.1", + "eslint-plugin-import": "^2.25.3", + "eslint-plugin-jest": "^27.1.3", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.3.0", + "prettier": "^2.7.1", "typescript": "^4.8.4" } } diff --git a/public/manifest.json b/public/manifest.json index f584349c..b83f0713 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,17 +1,15 @@ { "name": "Hackertab.dev - developer news", "description": "All developer news in one tab", - "version": "1.14.1", - "manifest_version": 2, + "version": "1.14.2", + "manifest_version": 3, "chrome_url_overrides": { "newtab": "index.html" }, "background": { - "scripts": [ - "background.js" - ] + "service_worker": "background.js" }, - "permissions": [ + "host_permissions": [ "https://*.hackertab.dev/*" ], "icons": { @@ -19,11 +17,5 @@ "32": "/logos/logo32.png", "48": "/logos/logo48.png", "128": "/logos/logo128.png" - }, - "content_security_policy": "script-src 'self' object-src 'self'", - "applications": { - "gecko": { - "id": "{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}" - } } } diff --git a/script/stores_build.sh b/script/stores_build.sh index caee7d36..39a70bd8 100755 --- a/script/stores_build.sh +++ b/script/stores_build.sh @@ -27,6 +27,12 @@ firefox_build() { export INLINE_RUNTIME_CHUNK=false export GENERATE_SOURCEMAP=false + echo 'add missing geeko id' + yarn global add json + json -I -f public/manifest.json -e 'this.applications={}' + json -I -f public/manifest.json -e 'this.applications.gecko={}' + json -I -f public/manifest.json -e 'this.applications.gecko.id="{f8793186-e9da-4332-aa1e-dc3d9f7bb04c}"' + yarn build mkdir -p dist @@ -35,7 +41,10 @@ firefox_build() { cd dist/ && zip -r ../firefox_extension.zip * -x "*.DS_Store" && cd .. echo 'zipping the source code for Firefox' - zip -r source_code.zip 'public/' 'script/' 'src' 'LICENSE' 'package.json' 'yarn.lock' 'README.md' 'craco.config.js' '.env' -x "*.DS_Store" + zip -r source_code.zip 'public/' 'script/' 'src' 'LICENSE' 'package.json' 'yarn.lock' 'README.md' 'craco.config.js' '.env' 'tsconfig.json' -x "*.DS_Store" + + echo "revert manifest changes" + git restore public/manifest.json } chrome_build firefox_build \ No newline at end of file diff --git a/src/App.js b/src/App.js index aaf88a9b..16b37faf 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,23 @@ -import React, { useState, useEffect, useContext } from 'react' -import './App.css' -import ConfigurationContext from './configuration/ConfigurationContext' -import Footer from './components/Footer' -import Header from './components/Header' -import BookmarksSidebar from './bookmark/BookmarksSidebar' -import MarketingBanner from './components/MarketingBanner' +import React, { useState, useEffect } from 'react' +import 'src/assets/App.css' +import { Footer, Header } from 'src/components/Layout' +import { BookmarksSidebar } from 'src/features/bookmarks' +import { MarketingBanner } from 'src/components/Elements' import ScrollCardsNavigator from './components/ScrollCardsNavigator' -import AppContentLayout from './components/AppContentLayout' +import { AppContentLayout } from './components/Layout' import 'react-contexify/dist/ReactContexify.css' -import PreferencesContext from './preferences/PreferencesContext' import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics' +import { useRemoteConfigStore } from 'src/features/remoteConfig' function App() { - const { marketingBannerConfig = {}, feedbackWidget } = useContext(ConfigurationContext) const [showSideBar, setShowSideBar] = useState(false) const [showSettings, setShowSettings] = useState(false) - const { dispatcher, ...state } = useContext(PreferencesContext) + + const { marketingBannerConfig } = useRemoteConfigStore() useEffect(() => { setupAnalytics() - setupIdentification(state) + setupIdentification() trackPageView('home') }, []) @@ -27,8 +25,6 @@ function App() {
setShowSideBar(false)} /> -
) } diff --git a/src/App.css b/src/assets/App.css similarity index 97% rename from src/App.css rename to src/assets/App.css index 45e56af0..71f8405b 100644 --- a/src/App.css +++ b/src/assets/App.css @@ -717,6 +717,10 @@ Producthunt item color: white; } .changelogButton.active { + width: auto; + font-size: 12px; + padding:0 4px; + text-transform: lowercase; background-color: var(--tooltip-accent-color); } @@ -1006,4 +1010,28 @@ Producthunt item .block { width: calc((1800px - 12px * 4)/4); } +} + +/***** PAGE ****/ +.Page { + max-width: 1024px; + margin: 0 auto; + color: var(--primary-text-color); +} +.Page .title { + color: var(--primary-text-color) +} +.Page button { + background: var(--card-background-color); + border:none; + border-radius: 20px; + border: 1px solid var(--card-border-color); + padding: 8px 16px; + color: var(--primary-text-color); + cursor: pointer; +} + +.Page .buttonIcon { + position: relative; + vertical-align: middle; } \ No newline at end of file diff --git a/src/static/fonts/nunito/nunito-regular.woff2 b/src/assets/fonts/nunito/nunito-regular.woff2 similarity index 100% rename from src/static/fonts/nunito/nunito-regular.woff2 rename to src/assets/fonts/nunito/nunito-regular.woff2 diff --git a/src/static/fonts/nunito/nunito-semibold.woff2 b/src/assets/fonts/nunito/nunito-semibold.woff2 similarity index 100% rename from src/static/fonts/nunito/nunito-semibold.woff2 rename to src/assets/fonts/nunito/nunito-semibold.woff2 diff --git a/src/static/icon_hashnode.png b/src/assets/icon_hashnode.png similarity index 100% rename from src/static/icon_hashnode.png rename to src/assets/icon_hashnode.png diff --git a/src/static/icon_lobsters.png b/src/assets/icon_lobsters.png similarity index 100% rename from src/static/icon_lobsters.png rename to src/assets/icon_lobsters.png diff --git a/src/index.css b/src/assets/index.css similarity index 100% rename from src/index.css rename to src/assets/index.css diff --git a/src/logo.svg b/src/assets/logo.svg similarity index 100% rename from src/logo.svg rename to src/assets/logo.svg diff --git a/src/variables.css b/src/assets/variables.css similarity index 95% rename from src/variables.css rename to src/assets/variables.css index 6a12b39f..91c0db28 100644 --- a/src/variables.css +++ b/src/assets/variables.css @@ -1,13 +1,13 @@ @font-face { font-family: 'Nunito'; - src: url("static/fonts/nunito/nunito-regular.woff2") format('woff2'); + src: url("fonts/nunito/nunito-regular.woff2") format('woff2'); } @font-face { font-family: 'Nunito'; font-weight: 600; font-style: normal; - src: url("static/fonts/nunito/nunito-semibold.woff2") format('woff2'); + src: url("fonts/nunito/nunito-semibold.woff2") format('woff2'); } html.dark { diff --git a/src/bookmark/BookmarksSidebar.js b/src/bookmark/BookmarksSidebar.js deleted file mode 100644 index d11baf73..00000000 --- a/src/bookmark/BookmarksSidebar.js +++ /dev/null @@ -1,125 +0,0 @@ -import React, { useContext } from "react"; -import './Sidebar.css'; -import { VscChromeClose } from 'react-icons/vsc'; -import { TiDelete } from 'react-icons/ti'; -import { HiTicket } from 'react-icons/hi'; -import { SiGithub, SiReddit, SiProducthunt, SiYcombinator } from 'react-icons/si' -import { ProSidebar, Menu, MenuItem, SubMenu, SidebarHeader, SidebarContent } from 'react-pro-sidebar'; -import 'react-pro-sidebar/dist/css/styles.css'; -import PreferencesContext from '../preferences/PreferencesContext'; -import CardLink from "../components/CardLink"; -import { trackLinkUnBookmark, Attributes } from 'src/lib/analytics' - -const BookmarkItem = ({ item, appendRef = true }) => { - const { dispatcher } = useContext(PreferencesContext) - const analyticsAttrs = { - [Attributes.TRIGERED_FROM]: 'bookmarks', - [Attributes.TITLE]: item.title, - [Attributes.LINK]: item.url, - [Attributes.SOURCE]: item.source, - } - const unBookmark = () => { - dispatcher({ type: 'unBookmarkItem', value: item }) - trackLinkUnBookmark(analyticsAttrs) - } - return ( - - - - }> - - {`${item.title}`} - - - ) -} - -function BookmarksSidebar({ showSidebar, onClose }) { - - const { userBookmarks = [] } = useContext(PreferencesContext) - const githubBookmarks = userBookmarks.filter((bm) => bm.source == 'github') - const newsBookmarks = userBookmarks.filter( - (bm) => - [ - 'hackernews', - 'devto', - 'hashnode', - 'lobsters', - 'freecodecamp', - 'medium', - 'indiehackers', - ].indexOf(bm.source) != -1 - ) - const conferencesBookmarks = userBookmarks.filter(bm => bm.source == "conferences") - const productsBookmarks = userBookmarks.filter(bm => bm.source == "producthunt") - const redditBookmarks = userBookmarks.filter(bm => bm.source == "reddit") - - return ( - - -
- Bookmarks - -
- - - - - } - suffix={{githubBookmarks.length}} - > - { - githubBookmarks.map((bm, index) => ()) - } - - - - } - suffix={{newsBookmarks.length}} - > - { - newsBookmarks.map((bm, index) => ()) - } - - - } - suffix={{productsBookmarks.length}} - > - { - productsBookmarks.map((bm, index) => ()) - } - - - - } - suffix={{conferencesBookmarks.length}} - > - { - conferencesBookmarks.map((bm, index) => ()) - } - - } - suffix={{redditBookmarks.length}} - > - { - redditBookmarks.map((bm, index) => ()) - } - - - - - ) -} - -export default BookmarksSidebar \ No newline at end of file diff --git a/src/cards/ConferencesCard.js b/src/cards/ConferencesCard.js deleted file mode 100644 index b0500685..00000000 --- a/src/cards/ConferencesCard.js +++ /dev/null @@ -1,158 +0,0 @@ -import React, { useContext, useEffect, useState } from 'react' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import confstechApi from '../services/confstech' -import { MdAccessTime } from 'react-icons/md' -import { flag } from 'country-emoji' -import { IoIosPin } from 'react-icons/io' -import { RiCalendarEventFill } from 'react-icons/ri' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import CardItemWithActions from '../components/CardItemWithActions' -import ColoredLanguagesBadge from '../components/ColoredLanguagesBadge' -import { Attributes } from 'src/lib/analytics' - -const ConferenceItem = ({ conf, index }) => { - const { listingMode } = useContext(PreferencesContext) - - const formatConfsDate = (date) => { - const monthNames = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December', - ] - - return `${monthNames[date.getMonth()]} ${('0' + date.getDate()).slice(-2)}` - } - - const ConferenceLocation = () => { - return conf.online - ? '🌐 Online' - : `${flag(conf.country.replace(/[^a-zA-Z ]/g, ''))} ${conf.city}` - } - - const ConferenceDate = () => { - let value = '' - if (conf.startDate) { - value = `${formatConfsDate(conf.startDate)}` - } - if (conf.endDate && conf.endDate > conf.startDate) { - value = `${value} - ${ - conf.endDate.getMonth() === conf.startDate.getMonth() - ? ('0' + conf.endDate.getDate()).slice(-2) - : formatConfsDate(conf.endDate) - }` - } - return value - } - return ( - - - - {conf.name} - - {listingMode === 'normal' ? ( - <> -
- - {ConferenceLocation()} - - - {ConferenceDate()} - -
-
- -
- - ) : ( -
- - {ConferenceDate()} - -
- )} - - } - /> - ) -} - -function ConferencesCard({ label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags = [] } = preferences - const [refresh, setRefresh] = useState(true) - - useEffect(() => { - setRefresh(!refresh) - }, [userSelectedTags]) - - const fetchConfs = async () => { - const promises = userSelectedTags.map((tag) => { - if (tag.confsValues) { - return confstechApi.getTagConfs(tag.confsValues[0]) - } - return [] - }) - const results = await Promise.allSettled(promises) - - return results - .map((res, index) => { - let value = res.value - if (res.status === 'rejected') { - value = [] - } - return value.map((c) => ({ - ...c, - tag: userSelectedTags[index], - startDate: new Date(c.startDate), - endDate: new Date(c.endDate), - })) - }) - .flat() - .sort((a, b) => a.startDate - b.startDate) - .filter((c) => c.startDate >= new Date()) - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - link="https://confs.tech/" - title={label}> - - - ) -} - -export default ConferencesCard diff --git a/src/cards/DevToCard.js b/src/cards/DevToCard.js deleted file mode 100644 index 846e3cae..00000000 --- a/src/cards/DevToCard.js +++ /dev/null @@ -1,183 +0,0 @@ -import React, { useContext, useState, useEffect } from 'react' -import devtoApi from '../services/devto' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import { format } from 'timeago.js' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import { BiCommentDetail } from 'react-icons/bi' -import { MdAccessTime } from 'react-icons/md' -import { AiOutlineLike } from 'react-icons/ai' -import CardItemWithActions from '../components/CardItemWithActions' -import ColoredLanguagesBadge from '../components/ColoredLanguagesBadge' -import SelectableCard from '../components/SelectableCard' -import { GLOBAL_TAG, MY_LANGUAGES_TAG, MAX_MERGED_ITEMS_PER_LANGUAGE } from '../Constants' -import { mergeMultipleDataSources } from '../utils/DataUtils' -import { trackCardLanguageSelect } from 'src/lib/analytics' -import { Attributes } from 'src/lib/analytics' - -const DT_MENU_LANGUAGE_ID = 'DT_MENU_LANGUAGE_ID' - -const ArticleItem = ({ item, index, selectedLanguage }) => { - const { listingMode } = useContext(PreferencesContext) - - return ( - - - {listingMode === 'compact' && ( -
- - {item.public_reactions_count} -
- )} -
{item.title}
- - - {listingMode === 'normal' && ( - <> -

- - - {format(new Date(item.published_at))} - - - - {item.comments_count} comments - - - - {item.public_reactions_count} reactions - -

-

- -

- - )} - - } - /> - ) -} - -function DevToCard({ analyticsTag, label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags, cardsSettings, dispatcher } = preferences - const [refresh, setRefresh] = useState(true) - const [selectedLanguage, setSelectedLanguage] = useState() - const [cacheCardData, setCacheCardData] = useState({}) - - useEffect(() => { - if (selectedLanguage) { - dispatcher({ - type: 'setCardSettings', - value: { card: label.toLowerCase(), language: selectedLanguage.label }, - }) - setRefresh(!refresh) - } - }, [selectedLanguage]) - - const fetchArticles = async () => { - if (!selectedLanguage) { - return [] - } - - if (!selectedLanguage.devtoValues) { - throw Error(`Devto does not support ${selectedLanguage?.label}.`) - } - - let data = [] - const cacheKey = `${selectedLanguage.label}` - - // Cache found - if (cacheCardData[cacheKey]) { - return cacheCardData[cacheKey] - } - - if (selectedLanguage.value == MY_LANGUAGES_TAG.value) { - const selectedTagsArticlesPromises = userSelectedTags.map((tag) => { - if (tag.devtoValues) { - if (cacheCardData[tag.label]) { - return cacheCardData[tag.label] - } else { - return devtoApi.getArticlesByCount(tag.devtoValues[0], MAX_MERGED_ITEMS_PER_LANGUAGE) - } - } - return [] - }) - - data = await mergeMultipleDataSources( - selectedTagsArticlesPromises, - MAX_MERGED_ITEMS_PER_LANGUAGE - ) - } else { - data = await devtoApi.getArticles(selectedLanguage.devtoValues[0]) - } - - data = data.sort((a, b) => b.public_reactions_count - a.public_reactions_count) - - setCacheCardData({ ...cacheCardData, [cacheKey]: data }) - return data - } - - const renderItem = (item, index) => ( - - ) - - function HeaderTitle() { - return ( -
- DevTo - trackCardLanguageSelect('Devto', tag.value)} - data={userSelectedTags.map((tag) => ({ - label: tag.label, - value: tag.value, - }))} - /> -
- ) - } - - return ( - {icon}} - title={} - link="https://dev.to/"> - - - ) -} - -export default DevToCard diff --git a/src/cards/FreeCodeCampCard.js b/src/cards/FreeCodeCampCard.js deleted file mode 100644 index cbab1ded..00000000 --- a/src/cards/FreeCodeCampCard.js +++ /dev/null @@ -1,98 +0,0 @@ -import React, { useContext, useState, useEffect } from 'react' -import freecodecampApi from '../services/freecodecamp' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import { format } from 'timeago.js' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import { MdAccessTime } from 'react-icons/md' -import CardItemWithActions from '../components/CardItemWithActions' -import ColoredLanguagesBadge from '../components/ColoredLanguagesBadge' -import { Attributes } from 'src/lib/analytics' - -const ArticleItem = ({ item, index }) => { - return ( - - -
{item.title}
- - <> -

- - - {format(new Date(item.isoDate))} - -

-

- -

- - - } - /> - ) -} - -function FreeCodeCampCard({ analyticsTag, label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags } = preferences - - const [refresh, setRefresh] = useState(true) - - useEffect(() => { - setRefresh(!refresh) - }, [userSelectedTags]) - - const fetchArticles = async () => { - const promises = userSelectedTags.map((tag) => { - if (tag.freecodecampValues) { - return freecodecampApi.getArticles(tag.freecodecampValues[0]) - } - return [] - }) - - const results = await Promise.allSettled(promises) - return results - .map((res) => { - let value = res.value - if (res.status === 'rejected') { - value = [] - } - return value - }) - .flat() - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - title={label} - link="https://freecodecamp.com/news"> - - - ) -} - -export default FreeCodeCampCard diff --git a/src/cards/HashNodeCard.js b/src/cards/HashNodeCard.js deleted file mode 100644 index 3d47b3b6..00000000 --- a/src/cards/HashNodeCard.js +++ /dev/null @@ -1,179 +0,0 @@ -import React, { useContext, useState, useEffect } from 'react' -import hashNodeApi from '../services/hashnode' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import { format } from 'timeago.js' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import { BiCommentDetail } from 'react-icons/bi' -import { MdAccessTime } from 'react-icons/md' -import { AiTwotoneHeart } from 'react-icons/ai' -import CardItemWithActions from '../components/CardItemWithActions' -import ColoredLanguagesBadge from '../components/ColoredLanguagesBadge' -import SelectableCard from '../components/SelectableCard' -import { GLOBAL_TAG, MY_LANGUAGES_TAG, MAX_MERGED_ITEMS_PER_LANGUAGE } from '../Constants' -import { mergeMultipleDataSources } from '../utils/DataUtils' -import { trackCardLanguageSelect, Attributes } from 'src/lib/analytics' - -const HN_MENU_LANGUAGE_ID = 'HN_MENU_LANGUAGE_ID' - -const ArticleItem = ({ item, index, selectedLanguage }) => { - const { listingMode } = useContext(PreferencesContext) - - return ( - - - {listingMode === 'compact' && ( -
- - {item.totalReactions || 0} -
- )} -
{item.title}
- - - {listingMode === 'normal' && ( - <> -

- - - {format(new Date(item.dateAdded))} - - - - {item.replyCount || 0} comments - - - - {item.totalReactions || 0} reactions - -

-

- -

- - )} - - } - /> - ) -} - -function HashNodeCard({ analyticsTag, label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags, cardsSettings, dispatcher } = preferences - const [selectedLanguage, setSelectedLanguage] = useState() - const [refresh, setRefresh] = useState(true) - const [cacheCardData, setCacheCardData] = useState({}) - - useEffect(() => { - if (selectedLanguage) { - dispatcher({ - type: 'setCardSettings', - value: { card: label, language: selectedLanguage.label.toLowerCase() }, - }) - setRefresh(!refresh) - } - }, [selectedLanguage]) - - const fetchArticles = async () => { - if (!selectedLanguage) { - return [] - } - if (!selectedLanguage.label) { - throw Error(`Hashnode does not support ${selectedLanguage.label}.`) - } - - let data = [] - const cacheKey = `${selectedLanguage.label}` - - // Cache found - if (cacheCardData[cacheKey]) { - return cacheCardData[cacheKey] - } - - if (selectedLanguage.value == MY_LANGUAGES_TAG.value) { - const selectedTagsArticlesPromises = userSelectedTags.map((tag) => { - if (tag.hashnodeValues) { - if (cacheCardData[tag.label]) { - return cacheCardData[tag.label] - } else { - return hashNodeApi.getArticles(tag.hashnodeValues[0]) - } - } - return [] - }) - - data = await mergeMultipleDataSources( - selectedTagsArticlesPromises, - MAX_MERGED_ITEMS_PER_LANGUAGE - ) - } else { - data = await hashNodeApi.getArticles(selectedLanguage.hashnodeValues[0]) - } - - setCacheCardData({ ...cacheCardData, [cacheKey]: data }) - return data - } - - function HeaderTitle() { - return ( -
- Hashnode - trackCardLanguageSelect('Hashnode', tag.value)} - fallbackTag={GLOBAL_TAG} - cardSettings={cardsSettings?.hashnode?.language} - data={userSelectedTags.map((tag) => ({ - label: tag.label, - value: tag.value, - }))} - /> -
- ) - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - title={} - link="https://hashnode.com/"> - - - ) -} - -export default HashNodeCard diff --git a/src/cards/MediumCard.js b/src/cards/MediumCard.js deleted file mode 100644 index d97d509f..00000000 --- a/src/cards/MediumCard.js +++ /dev/null @@ -1,170 +0,0 @@ -import React, { useContext, useState, useEffect } from 'react' -import mediumApi from '../services/medium' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import { format } from 'timeago.js' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import { BiCommentDetail } from 'react-icons/bi' -import { MdAccessTime } from 'react-icons/md' -import { MdWavingHand } from 'react-icons/md' -import CardItemWithActions from '../components/CardItemWithActions' -import SelectableCard from '../components/SelectableCard' -import { GLOBAL_TAG, MY_LANGUAGES_TAG, MAX_MERGED_ITEMS_PER_LANGUAGE } from '../Constants' -import { mergeMultipleDataSources } from '../utils/DataUtils' -import { trackCardLanguageSelect } from 'src/lib/analytics' -import { Attributes } from 'src/lib/analytics' - -const ArticleItem = ({ item, index, selectedLanguage }) => { - const { listingMode } = useContext(PreferencesContext) - - return ( - - - {listingMode === 'compact' && ( -
- - {item.clapCount || 0} -
- )} -
{item.title}
- - - {listingMode === 'normal' && ( -

- - {item.clapCount || 0} claps - - - {item.commentsCount || 0} comments - - - - {format(new Date(item.latestPublishedAt))} - -

- )} - - } - /> - ) -} - -function MediumCard({ analyticsTag, label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags, cardsSettings, dispatcher } = preferences - const [selectedLanguage, setSelectedLanguage] = useState() - const [refresh, setRefresh] = useState(true) - const [cacheCardData, setCacheCardData] = useState({}) - - useEffect(() => { - if (selectedLanguage) { - dispatcher({ - type: 'setCardSettings', - value: { card: label.toLowerCase(), language: selectedLanguage.label }, - }) - setRefresh(!refresh) - } - }, [selectedLanguage]) - - const fetchArticles = async () => { - if (!selectedLanguage) { - return [] - } - if (!selectedLanguage.label) { - throw Error(`Medium does not support ${selectedLanguage.label}.`) - } - - let data = [] - const cacheKey = `${selectedLanguage.label}` - - // Cache found - if (cacheCardData[cacheKey]) { - return cacheCardData[cacheKey] - } - - if (selectedLanguage.value == MY_LANGUAGES_TAG.value) { - const selectedTagsArticlesPromises = userSelectedTags.map((tag) => { - if (tag.mediumValues) { - if (cacheCardData[tag.label]) { - return cacheCardData[tag.label] - } else { - return mediumApi.getArticles(tag.mediumValues[0]) - } - } - return [] - }) - - data = await mergeMultipleDataSources( - selectedTagsArticlesPromises, - MAX_MERGED_ITEMS_PER_LANGUAGE - ) - } else { - data = await mediumApi.getArticles(selectedLanguage.mediumValues[0]) - } - - setCacheCardData({ ...cacheCardData, [cacheKey]: data }) - return data - } - - function HeaderTitle() { - return ( -
- Medium - trackCardLanguageSelect('Medium', tag.value)} - fallbackTag={GLOBAL_TAG} - cardSettings={cardsSettings?.medium?.language} - data={userSelectedTags.map((tag) => ({ - label: tag.label, - value: tag.value, - }))} - /> -
- ) - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - title={} - link="https://medium.com/"> - - - ) -} - -export default MediumCard diff --git a/src/cards/ProductHuntCard.js b/src/cards/ProductHuntCard.js deleted file mode 100644 index 6a36d0fe..00000000 --- a/src/cards/ProductHuntCard.js +++ /dev/null @@ -1,95 +0,0 @@ - -import React, { useEffect, useState, useContext } from 'react' -import CardComponent from "../components/CardComponent"; -import ListComponent from "../components/ListComponent"; -import { BiCommentDetail } from "react-icons/bi" -import { VscTriangleUp } from 'react-icons/vsc'; -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from "../components/CardLink" -import CardItemWithActions from '../components/CardItemWithActions' -import producthuntApi from '../services/producthunt' -import ProductHuntPlaceholder from '../components/ProductHuntPlaceholder' -import { Attributes } from 'src/lib/analytics' - -const ProductItem = ({ item, index }) => { - const { listingMode } = useContext(PreferencesContext) - - return ( - - -
- - {item.name} - -

{item.tagline}

- - {listingMode === 'normal' && ( -

- - {item.commentsCount || 0} comments - - {item.topics && item.topics.lenght > 0 ? ( - {item.topics[0]} - ) : null} -

- )} -
-
- - {item.votesCount} -
- - } - /> - ) -} - -function ProductHuntCard({ label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - - const { userSelectedTags } = preferences - - const [refresh, setRefresh] = useState(true) - - const fetchProducts = async () => { - return await producthuntApi.getTodayProducts() - } - - useEffect(() => { - setRefresh(!refresh) - }, [userSelectedTags]) - - const renderItem = (item, index) => - - return ( - {icon}} - link="https://www.producthunt.com/" - title={label}> - } - refresh={refresh} - withAds={withAds} - /> - - ) -} - -export default ProductHuntCard \ No newline at end of file diff --git a/src/cards/RedditCard.js b/src/cards/RedditCard.js deleted file mode 100644 index 9f7c90c3..00000000 --- a/src/cards/RedditCard.js +++ /dev/null @@ -1,166 +0,0 @@ -import React, { useContext, useState, useEffect } from 'react' -import { FaReddit } from 'react-icons/fa'; -import redditApi from '../services/reddit' -import CardComponent from "../components/CardComponent" -import ListComponent from "../components/ListComponent" -import { format } from 'timeago.js'; -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from "../components/CardLink" -import { BiCommentDetail } from 'react-icons/bi'; -import { MdAccessTime } from "react-icons/md" -import { VscTriangleUp } from 'react-icons/vsc'; -import { GoPrimitiveDot } from "react-icons/go" -import { BsArrowReturnRight } from "react-icons/bs" -import CardItemWithActions from '../components/CardItemWithActions' -import { Attributes } from 'src/lib/analytics' - -const formatResponsePost = (post) => { - const { - data: { - title, - subreddit, - link_flair_text, - link_flair_background_color, - score, - num_comments, - permalink, - created_utc, - link_flair_text_color, - }, - } = post - return { - title, - subreddit, - link_flair_text, - link_flair_background_color, - score, - num_comments, - permalink, - created_utc, - link_flair_text_color, - } -} - -const PostFlair = ({ link_flair_text, link_flair_background_color, link_flair_text_color }) => { - const color = link_flair_text_color == 'light' ? '#fff' : '#000' - const backgroundColor = link_flair_background_color ? link_flair_background_color : '#dadada' - return ( -
- {link_flair_text} -
- ) -} - -const PostItem = ({ item, index }) => { - const fullUrl = `https://www.reddit.com${item.permalink}` - const { listingMode } = useContext(PreferencesContext) - - return ( - - - {listingMode === 'compact' && ( -
- - {item.score} -
- )} - -
- {item.link_flair_text && } - {item.title} -
- - -
- {listingMode === 'normal' && ( - <> - - {item.score} points - - - {' '} - {format(new Date(item.created_utc * 1000))} - - - {item.num_comments} comments - - - {`r/${item.subreddit}`} - - - )} -
- - } - /> - ) -} - - - -function RedditCard({ analyticsTag, icon, label, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags } = preferences - - const [refresh, setRefresh] = useState(true) - - useEffect(() => { - setRefresh(!refresh) - }, [userSelectedTags]) - - const fetchPosts = async () => { - const promises = userSelectedTags.map((tag) => { - if (tag.redditValues) { - return redditApi.getTopPostsBySubReddit(tag.redditValues[0]) - } - return [] - }) - - const results = await Promise.allSettled(promises) - return results - .map((res) => { - let value = res.value - if (res.status === 'rejected') { - value = [] - } - return value.map((item) => formatResponsePost(item)) - }) - .flat() - .sort((a, b) => b.score - a.score) - .slice(0, 40) - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - link="https://www.reddit.com/" - title={label}> - - - ) -} - -export default RedditCard \ No newline at end of file diff --git a/src/cards/ReposCard.js b/src/cards/ReposCard.js deleted file mode 100644 index b7f4644b..00000000 --- a/src/cards/ReposCard.js +++ /dev/null @@ -1,211 +0,0 @@ -import React, { useState, useEffect, useContext, useMemo } from 'react' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import { VscRepo, VscRepoForked, VscStarFull } from 'react-icons/vsc' -import githubApi from '../services/github' -import PreferencesContext from '../preferences/PreferencesContext' -import CardLink from '../components/CardLink' -import CardItemWithActions from '../components/CardItemWithActions' -import SelectableCard from '../components/SelectableCard' -import { GLOBAL_TAG, MY_LANGUAGES_TAG, MAX_MERGED_ITEMS_PER_LANGUAGE } from '../Constants' -import { mergeMultipleDataSources } from '../utils/DataUtils' -import ColoredLanguagesBadge from '../components/ColoredLanguagesBadge' -import { trackCardLanguageSelect, trackCardDateRangeSelect, Attributes } from 'src/lib/analytics' - -const sourceName = 'github' - -const RepoItem = ({ item, index, selectedLanguage }) => { - const { listingMode } = useContext(PreferencesContext) - const title = useMemo(() => { - return `${item.owner ? item.owner + '/' : ''}${item.name}` - }, [item]) - - return ( - - - - {item.owner && `${item?.owner}/`} - {item.name} - -

{item.description}

- {listingMode === 'normal' && ( -
- - {item.stars && ( - - {item.stars} stars - - )} - {item.forks && ( - - {item.forks} forks - - )} -
- )} - - } - /> - ) -} - -const TAGS_MENU_ID = 'tags-menu' -const DATE_RANGE_MENU_ID = 'date-range-id' - -function ReposCard({ analyticsTag, label, icon, withAds }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags = [], dispatcher, cardsSettings } = preferences - const [selectedLanguage, setSelectedLanguage] = useState() - const [selectedDateRange, setSelectedDateRange] = useState() - const [refresh, setRefresh] = useState(true) - const [cacheCardData, setCacheCardData] = useState({}) - - const dateRangeMapper = { - daily: 'the day', - weekly: 'the week', - monthly: 'the month', - } - - useEffect(() => { - if (selectedLanguage) { - dispatcher({ - type: 'setCardSettings', - value: { card: 'repos', language: selectedLanguage.label }, - }) - setRefresh(!refresh) - } - }, [selectedLanguage]) - - useEffect(() => { - if (selectedDateRange) { - dispatcher({ - type: 'setCardSettings', - value: { card: 'repos', dateRange: selectedDateRange.value }, - }) - setRefresh(!refresh) - } - }, [selectedDateRange]) - - const fetchRepos = async () => { - if (!selectedLanguage) { - return [] - } - - if (!selectedLanguage?.githubValues) { - throw Error(`Github Trending does not support ${selectedLanguage.label}.`) - } - - let data = [] - const cacheKey = `${selectedLanguage.value}-${selectedDateRange.value}` - - // Cache found - if (cacheCardData[cacheKey]) { - return cacheCardData[cacheKey] - } - if (selectedLanguage.value == MY_LANGUAGES_TAG.value) { - const selectedTagsReposPromises = userSelectedTags.map((tag) => { - if (tag.githubValues) { - if (cacheCardData[tag.value + `-${selectedDateRange.value}`]) { - return cacheCardData[tag.value + `-${selectedDateRange.value}`] - } else { - return githubApi.getTrending(tag.githubValues[0], selectedDateRange.value) - } - } - return [] - }) - - data = await mergeMultipleDataSources( - selectedTagsReposPromises, - MAX_MERGED_ITEMS_PER_LANGUAGE - ) - } else { - data = await githubApi.getTrending(selectedLanguage.githubValues[0], selectedDateRange.value) - } - - data = data.sort((a, b) => b.public_reactions_count - a.public_reactions_count) - - setCacheCardData({ ...cacheCardData, [cacheKey]: data }) - return data - } - - function HeaderTitle() { - return ( -
- trackCardLanguageSelect('Repos', tag.value)} - data={userSelectedTags.map((tag) => ({ - label: tag.label, - value: tag.value, - }))} - /> - Repos of - { - trackCardDateRangeSelect('Repos', tag.value)} - cardSettings={cardsSettings?.repos?.dateRange} - data={Object.keys(dateRangeMapper).map((tag) => ({ - label: dateRangeMapper[tag], - value: tag, - }))} - /> - } -
- ) - } - - const renderItem = (item, index) => ( - - ) - - return ( - <> - {icon}} - title={}> - - - - ) -} - -export default ReposCard diff --git a/src/components/AppContentLayout.js b/src/components/AppContentLayout.js deleted file mode 100644 index e5d858f6..00000000 --- a/src/components/AppContentLayout.js +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useContext, useState } from 'react' -import { SUPPORTED_CARDS } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' -import BottomNavigation from './BottomNavigation' -import { isDesktop } from 'react-device-detect' - -function MobileCards({ selectedCard }) { - const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name) - return ( - currentCard && - React.createElement(currentCard.component, { - key: currentCard.value, - label: currentCard.label, - analyticsTag: currentCard.analyticsTag, - withAds: true, - }) - ) -} - -function DesktopCards({ cards }) { - return cards.map((card, index) => { - const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name) - return React.createElement(constantCard.component, { - key: card.name, - label: constantCard.label, - icon: constantCard.icon, - analyticsTag: constantCard.analyticsTag, - withAds: index == 0, - }) - }) -} - -function AppContentLayout({ setShowSettings }) { - const { cards } = useContext(PreferencesContext) - const [selectedCard, setSelectedCard] = useState(cards[0]) - - return ( - <> -
- {isDesktop ? : } -
- - - - ) -} - -export default AppContentLayout diff --git a/src/components/BottomNavigation.js b/src/components/BottomNavigation.js deleted file mode 100644 index e5b65d62..00000000 --- a/src/components/BottomNavigation.js +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useContext } from 'react' -import { SUPPORTED_CARDS } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' -import { AiOutlineMenu } from 'react-icons/ai' - -function BottomNavigation({ selectedCard, setSelectedCard, setShowSettings }) { - const { cards } = useContext(PreferencesContext) - - return ( -
- {cards.map((card) => { - const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name) - return ( - setSelectedCard(card)}> - {constantCard.icon} - - ) - })} - { - setShowSettings((prev) => !prev)}> - {} - - } -
- ) -} - -export default BottomNavigation diff --git a/src/components/CarbonAd.js b/src/components/CarbonAd.js deleted file mode 100644 index 76b6d61c..00000000 --- a/src/components/CarbonAd.js +++ /dev/null @@ -1,80 +0,0 @@ -import axios from 'axios' -import React, { useEffect, useState, useRef } from 'react' -import './CarbonAd.css' -import { getBaseApi } from '../utils/DataUtils' - -export default function CarbonAd() { - const [ad, setAd] = useState() - const cancelTokenSource = useRef() - - useEffect(() => { - cancelTokenSource.current = axios.CancelToken.source() - - const setup = async () => { - const userAgent = new URLSearchParams(navigator.userAgent).toString() - try { - const request = await axios.get(`${getBaseApi('')}/monetization/?useragent=${userAgent}`, { - cancelToken: cancelTokenSource.current.token, - }) - if (request.data) { - setAd(request.data.ads[0]) - } - } catch (_) {} - } - setup() - return () => { - cancelTokenSource.current.cancel() - } - }, []) - - const prependHTTP = (url) => { - url = decodeURIComponent(url) - if (!/^(?:f|ht)tps?\:\/\//.test(url)) { - url = 'https:' + url - } - return url - } - - return ( -
- {ad && ( - - )} -
- ) -} diff --git a/src/components/CardComponent.js b/src/components/CardComponent.js deleted file mode 100644 index 79d23355..00000000 --- a/src/components/CardComponent.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useContext } from 'react'; -import { BsBoxArrowInUpRight } from 'react-icons/bs'; -import { APP } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' - -function CardComponent({ icon, title, children, fullBlock, link }) { - const { openLinksNewTab } = useContext(PreferencesContext); - - const handleHeaderLinkClick = (e) => { - e.preventDefault(); - let url = `${link}?${APP.ref}`; - window.open(url, openLinksNewTab ? '_blank' : '_self'); - }; - - return ( -
-
- {icon} {title}{' '} - {link && ( - - - - )} -
-
{children}
-
- ) -} - -export default CardComponent; diff --git a/src/components/CardItemWithActions.js b/src/components/CardItemWithActions.js deleted file mode 100644 index 3bb9d712..00000000 --- a/src/components/CardItemWithActions.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useState, useContext, useEffect } from 'react' -import PreferencesContext from '../preferences/PreferencesContext' -import { BiBookmarkPlus } from "react-icons/bi"; -import { BiBookmarkMinus } from "react-icons/bi"; -import { trackLinkBookmark, trackLinkUnBookmark, Attributes } from 'src/lib/analytics' - -export default function CardItemWithActions({ cardItem, item, index, source }) { - const { dispatcher, userBookmarks } = useContext(PreferencesContext) - const [isBookmarked, setIsBookmarked] = useState( - userBookmarks.some((bm) => bm.source == source && bm.url == item.url) - ) - const onBookmarkClick = () => { - dispatcher({ - type: isBookmarked ? 'unBookmarkItem' : 'bookmarkItem', - value: { - title: item.title, - url: item.url, - source, - }, - }) - setIsBookmarked(!isBookmarked) - const analyticsAttrs = { - [Attributes.TRIGERED_FROM]: 'card', - [Attributes.TITLE]: item.title, - [Attributes.LINK]: item.url, - [Attributes.SOURCE]: source, - } - if (isBookmarked) { - trackLinkUnBookmark(analyticsAttrs) - } else { - trackLinkBookmark(analyticsAttrs) - } - } - useEffect(() => { - setIsBookmarked(userBookmarks.some((bm) => bm.source == source && bm.url == item.url)) - }, [userBookmarks]) - - return ( -
- {cardItem} -
- -
-
- ) -} diff --git a/src/components/CardLink.js b/src/components/CardLink.js deleted file mode 100644 index 0ef60857..00000000 --- a/src/components/CardLink.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import ClickableItem from "./ClickableItem" - - -function CardLink({ link, className, children, appendRef = true, analyticsAttributes }) { - return ( - - {children} - - ) -} - -export default CardLink diff --git a/src/components/Changelog.js b/src/components/Changelog.js deleted file mode 100644 index 4ff3949f..00000000 --- a/src/components/Changelog.js +++ /dev/null @@ -1,121 +0,0 @@ -import React, { useEffect, useState, useContext } from 'react' -import ReactTooltip from 'react-tooltip' -import { HiBell } from 'react-icons/hi' -import ReactMarkdown from 'react-markdown' -import axios from 'axios' -import { format } from 'timeago.js' -import BeatLoader from 'react-spinners/BeatLoader' -import { APP } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' - -function Changelog({}) { - const tooltipId = 'tl-1' - const [changelogMarkdown, setChangelogMarkdown] = useState([]) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - const [localAppVersion, setLocalAppVersion] = useState('') - const preferences = useContext(PreferencesContext) - const { dispatcher, changelogMeta } = preferences - const [isChangelogRead, setIsChangelogRead] = useState(false) - - const afterShow = () => { - if (changelogMarkdown.length === 0) { - dispatcher({ type: 'setChangelogMeta', value: { shown: true, version: localAppVersion } }) - fetchChangelog() - } - } - - useEffect(() => { - setIsChangelogRead(changelogMeta?.shown == true && changelogMeta?.version == localAppVersion) - }, [localAppVersion, changelogMeta]) - - useEffect(() => { - try { - setLocalAppVersion(chrome.runtime.getManifest().version) - } catch (e) { - setLocalAppVersion('') - } - }, []) - - const fetchChangelog = async () => { - setLoading(true) - setError(null) - setChangelogMarkdown([]) - - try { - const response = await axios.get(APP.changeLogLink) - const data = response.data - - let sameLocalVersionIndex = 0 - - if (localAppVersion) { - sameLocalVersionIndex = data.findIndex( - (item) => localAppVersion == item.name.replace(/[^\d.-]/g, '') - ) - } - - if (sameLocalVersionIndex == -1) { - sameLocalVersionIndex = 0 - } - - const mappedVersions = data.slice(sameLocalVersionIndex, data.length).map((item) => { - return { - version: item.name, - date: item.published_at, - body: item.body, - url: item.html_url, - } - }) - setChangelogMarkdown(mappedVersions) - } catch (e) { - setError(e) - } finally { - setLoading(false) - } - } - - return ( - <> - - {loading ? ( -
- -
- ) : error ? ( -

Failed to load the changelog

- ) : ( - changelogMarkdown.map((item) => { - return ( -
-
- window.open(item.url, '_blank')}> - {item.version} - - {format(new Date(item.date))} -
-
- -
-
- ) - }) - )} - - - - - - ) -} - -export default Changelog diff --git a/src/components/ClickableItem.js b/src/components/ClickableItem.js deleted file mode 100644 index 980e9f6c..00000000 --- a/src/components/ClickableItem.js +++ /dev/null @@ -1,42 +0,0 @@ -import { trackLinkOpen } from 'src/lib/analytics' -import React, { useContext } from 'react' -import { APP } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' - -const ClickableItem = ({ link, className, children, analyticsAttributes, appendRef = true }) => { - const { openLinksNewTab } = useContext(PreferencesContext) - - const handleClick = (e) => { - e.preventDefault() - - trackLinkOpen(analyticsAttributes) - - if (!link) { - return - } - - if (appendRef) { - const url = new URL(link) - let utmUrl = link - - // Url has some query params - if (url.search) { - utmUrl += `&${APP.ref}` - } else { - utmUrl += `?${APP.ref}` - } - - window.open(utmUrl, openLinksNewTab ? '_blank' : '_self') - } else { - window.open(link, openLinksNewTab ? '_blank' : '_self') - } - } - - return ( - - {children} - - ) -} - -export default ClickableItem diff --git a/src/components/ColoredLanguagesBadge.js b/src/components/ColoredLanguagesBadge.js deleted file mode 100644 index c03ed85f..00000000 --- a/src/components/ColoredLanguagesBadge.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; - -function ColoredLanguageItem({ language }) { - return ({language}) -} -function ColoredLanguagesBadge({ languages }) { - return languages - ? languages.map( - (language, index) => - language && - ) - : null -} - -export default ColoredLanguagesBadge \ No newline at end of file diff --git a/src/components/DropDownMenu.js b/src/components/DropDownMenu.js index 3934373b..af3eb0d7 100644 --- a/src/components/DropDownMenu.js +++ b/src/components/DropDownMenu.js @@ -1,6 +1,5 @@ import { RiArrowDownSFill } from 'react-icons/ri' import { Menu, Item, animation, useContextMenu } from 'react-contexify' -import { useEffect, useState } from 'react' const DropDownMenu = ({ data, tagId, label, setSelectedDropDownItem }) => { const { show: showMenu } = useContextMenu() diff --git a/src/components/Elements/BottomNavigation/BottomNavigation.tsx b/src/components/Elements/BottomNavigation/BottomNavigation.tsx new file mode 100644 index 00000000..12a7363c --- /dev/null +++ b/src/components/Elements/BottomNavigation/BottomNavigation.tsx @@ -0,0 +1,45 @@ +import { SUPPORTED_CARDS } from 'src/config' +import { SelectedCard } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { AiOutlineMenu } from 'react-icons/ai' + +type BottomNavigationProps = { + selectedCard: SelectedCard + setSelectedCard: (card: SelectedCard) => void + setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void +} + +export const BottomNavigation = ({ + selectedCard, + setSelectedCard, + setShowSettings, +}: BottomNavigationProps) => { + const { cards } = useUserPreferences() + + return ( +
+ {cards.map((card) => { + const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name) + return ( + setSelectedCard(card)}> + {constantCard?.icon} + + ) + })} + { + setShowSettings((prev: boolean) => !prev)}> + {} + + } +
+ ) +} diff --git a/src/components/Elements/BottomNavigation/index.ts b/src/components/Elements/BottomNavigation/index.ts new file mode 100644 index 00000000..422445f3 --- /dev/null +++ b/src/components/Elements/BottomNavigation/index.ts @@ -0,0 +1 @@ +export * from "./BottomNavigation" \ No newline at end of file diff --git a/src/components/Elements/Card/Card.tsx b/src/components/Elements/Card/Card.tsx new file mode 100644 index 00000000..b902b85d --- /dev/null +++ b/src/components/Elements/Card/Card.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import { BsBoxArrowInUpRight } from 'react-icons/bs' +import { ref } from 'src/config' +import { useUserPreferences } from 'src/stores/preferences' +import { SupportedCard } from 'src/config' + +type CardProps = { + children: React.ReactNode + card: SupportedCard + titleComponent?: React.ReactNode + fullBlock?: boolean +} +export const Card = ({ + card: { link, icon, label }, + titleComponent, + children, + fullBlock = false, +}: CardProps) => { + const { openLinksNewTab } = useUserPreferences() + + const handleHeaderLinkClick = (e: React.MouseEvent) => { + e.preventDefault() + let url = `${link}?${ref}` + window.open(url, openLinksNewTab ? '_blank' : '_self') + } + + return ( +
+
+ {icon} {titleComponent || label}{' '} + {link && ( + + + + )} +
+
{children}
+
+ ) +} diff --git a/src/components/Elements/Card/index.ts b/src/components/Elements/Card/index.ts new file mode 100644 index 00000000..6a2d9109 --- /dev/null +++ b/src/components/Elements/Card/index.ts @@ -0,0 +1 @@ +export * from "./Card" \ No newline at end of file diff --git a/src/components/Elements/CardLink/CardLink.tsx b/src/components/Elements/CardLink/CardLink.tsx new file mode 100644 index 00000000..b26c4aaf --- /dev/null +++ b/src/components/Elements/CardLink/CardLink.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { ClickableItem } from '../ClickableItem' + +type CardLinkProps = { + link: string + children: React.ReactNode + className?: string + appendRef?: boolean + analyticsAttributes: { + [key: string]: string | number | undefined + } +} +export const CardLink = ({ + link, + children, + className = '', + appendRef = true, + analyticsAttributes, +}: CardLinkProps) => { + return ( + + {children} + + ) +} diff --git a/src/components/Elements/CardLink/index.ts b/src/components/Elements/CardLink/index.ts new file mode 100644 index 00000000..8f599a0c --- /dev/null +++ b/src/components/Elements/CardLink/index.ts @@ -0,0 +1 @@ +export * from "./CardLink" \ No newline at end of file diff --git a/src/components/Elements/CardWithActions/CardItemWithActions.tsx b/src/components/Elements/CardWithActions/CardItemWithActions.tsx new file mode 100644 index 00000000..d6e521cd --- /dev/null +++ b/src/components/Elements/CardWithActions/CardItemWithActions.tsx @@ -0,0 +1,65 @@ +import React, { useState, useEffect } from 'react' +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' + +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) + ) + const onBookmarkClick = () => { + const itemToBookmark = { + title: item.title, + url: item.url, + source, + } + if (isBookmarked) { + unbookmarkPost(itemToBookmark) + } else { + bookmarkPost(itemToBookmark) + } + setIsBookmarked(!isBookmarked) + const analyticsAttrs = { + [Attributes.TRIGERED_FROM]: 'card', + [Attributes.TITLE]: item.title, + [Attributes.LINK]: item.url, + [Attributes.SOURCE]: source, + } + if (isBookmarked) { + trackLinkUnBookmark(analyticsAttrs) + } else { + trackLinkBookmark(analyticsAttrs) + } + } + useEffect(() => { + setIsBookmarked(userBookmarks.some((bm) => bm.source === source && bm.url === item.url)) + }, [userBookmarks, source, item]) + + return ( +
+ {cardItem} +
+ +
+
+ ) +} diff --git a/src/components/Elements/CardWithActions/index.ts b/src/components/Elements/CardWithActions/index.ts new file mode 100644 index 00000000..f959c236 --- /dev/null +++ b/src/components/Elements/CardWithActions/index.ts @@ -0,0 +1 @@ +export * from "./CardItemWithActions" \ No newline at end of file diff --git a/src/components/Elements/ClickableItem/ClickableItem.tsx b/src/components/Elements/ClickableItem/ClickableItem.tsx new file mode 100644 index 00000000..ee2b8ef4 --- /dev/null +++ b/src/components/Elements/ClickableItem/ClickableItem.tsx @@ -0,0 +1,56 @@ +import { trackLinkOpen } from 'src/lib/analytics' +import React from 'react' +import { ref } from 'src/config' + +import { useUserPreferences } from 'src/stores/preferences' + +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: React.MouseEvent) => { + e.preventDefault() + + trackLinkOpen(analyticsAttributes) + + if (!link) { + return + } + + if (appendRef) { + const url = new URL(link) + let utmUrl = link + + // Url has some query params + if (url.search) { + utmUrl += `&${ref}` + } else { + utmUrl += `?${ref}` + } + + window.open(utmUrl, openLinksNewTab ? '_blank' : '_self') + } else { + window.open(link, openLinksNewTab ? '_blank' : '_self') + } + } + + return ( + + {children} + + ) +} diff --git a/src/components/Elements/ClickableItem/index.ts b/src/components/Elements/ClickableItem/index.ts new file mode 100644 index 00000000..e58fb8ee --- /dev/null +++ b/src/components/Elements/ClickableItem/index.ts @@ -0,0 +1 @@ +export * from "./ClickableItem" \ No newline at end of file diff --git a/src/components/Elements/ColoredLanguagesBadges/ColoredLanguagesBadge.tsx b/src/components/Elements/ColoredLanguagesBadges/ColoredLanguagesBadge.tsx new file mode 100644 index 00000000..7eac619c --- /dev/null +++ b/src/components/Elements/ColoredLanguagesBadges/ColoredLanguagesBadge.tsx @@ -0,0 +1,16 @@ +export const ColoredLanguageItem = ({ language }: { language: string }) => { + return ( + {language} + ) +} +export const ColoredLanguagesBadge = ({ languages }: { languages: string[] }) => { + return ( + <> + {languages && + languages.map( + (language, index) => + language && + )} + + ) +} diff --git a/src/components/Elements/ColoredLanguagesBadges/index.ts b/src/components/Elements/ColoredLanguagesBadges/index.ts new file mode 100644 index 00000000..95bd6310 --- /dev/null +++ b/src/components/Elements/ColoredLanguagesBadges/index.ts @@ -0,0 +1 @@ +export * from "./ColoredLanguagesBadge" \ No newline at end of file diff --git a/src/components/Elements/MarketingBanner/MarketingBanner.tsx b/src/components/Elements/MarketingBanner/MarketingBanner.tsx new file mode 100644 index 00000000..d0d29b6a --- /dev/null +++ b/src/components/Elements/MarketingBanner/MarketingBanner.tsx @@ -0,0 +1,14 @@ +import DOMPurify from 'dompurify' + +type MarketingBannerProps = { + show: boolean + htmlContent: string +} +export const MarketingBanner = ({ show, htmlContent }: MarketingBannerProps) => { + if (!show) { + return null + } + let cleanHtmlContent = DOMPurify.sanitize(htmlContent) + + return
+} diff --git a/src/components/Elements/MarketingBanner/index.ts b/src/components/Elements/MarketingBanner/index.ts new file mode 100644 index 00000000..5664b5ed --- /dev/null +++ b/src/components/Elements/MarketingBanner/index.ts @@ -0,0 +1 @@ +export * from "./MarketingBanner" \ No newline at end of file diff --git a/src/components/Elements/SearchBar/SearchBar.tsx b/src/components/Elements/SearchBar/SearchBar.tsx new file mode 100644 index 00000000..e1628088 --- /dev/null +++ b/src/components/Elements/SearchBar/SearchBar.tsx @@ -0,0 +1,41 @@ +import React, { useEffect, useRef } from 'react' +import { trackSearchEngineUse } from 'src/lib/analytics' +import { GoSearch } from 'react-icons/go' +import { SUPPORTED_SEARCH_ENGINES } from 'src/config' +import { useUserPreferences } from 'src/stores/preferences' +import { SearchEngine } from 'src/types' + +export const SearchBar = () => { + const { searchEngine } = useUserPreferences() + + const keywordsInputRef = useRef(null) + const usedSearchEngine: SearchEngine = + SUPPORTED_SEARCH_ENGINES.find((engine) => engine.label === searchEngine) || + SUPPORTED_SEARCH_ENGINES[0] + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + const target = e.target as typeof e.target & { + keyword: { value: string } + } + + trackSearchEngineUse(usedSearchEngine.label) + window.open(`${usedSearchEngine.url}${target.keyword}`, '_self') + } + + useEffect(() => { + keywordsInputRef.current?.focus() + }, []) + + return ( +
+ + + + ) +} diff --git a/src/components/Elements/SearchBar/index.ts b/src/components/Elements/SearchBar/index.ts new file mode 100644 index 00000000..0c52338f --- /dev/null +++ b/src/components/Elements/SearchBar/index.ts @@ -0,0 +1 @@ +export * from "./SearchBar" \ No newline at end of file diff --git a/src/components/Elements/UserTags/UserTags.tsx b/src/components/Elements/UserTags/UserTags.tsx new file mode 100644 index 00000000..f20dbdb2 --- /dev/null +++ b/src/components/Elements/UserTags/UserTags.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { TiPlus } from 'react-icons/ti' +import { useUserPreferences } from 'src/stores/preferences' + +type UserTagsProps = { + onAddClicked: () => void +} + +export const UserTags = ({ onAddClicked }: UserTagsProps) => { + const { userSelectedTags } = useUserPreferences() + + return ( + + ) +} diff --git a/src/components/Elements/UserTags/index.ts b/src/components/Elements/UserTags/index.ts new file mode 100644 index 00000000..0c34fa5f --- /dev/null +++ b/src/components/Elements/UserTags/index.ts @@ -0,0 +1 @@ +export * from "./UserTags" \ No newline at end of file diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts new file mode 100644 index 00000000..b0a608cb --- /dev/null +++ b/src/components/Elements/index.ts @@ -0,0 +1,9 @@ +export * from "./ColoredLanguagesBadges" +export * from "./Card" +export * from "./MarketingBanner" +export * from "./SearchBar" +export * from "./UserTags" +export * from "./BottomNavigation" +export * from "./CardLink" +export * from "./CardWithActions" +export * from "./ClickableItem" \ No newline at end of file diff --git a/src/components/Footer.js b/src/components/Footer.js deleted file mode 100644 index a72ed87c..00000000 --- a/src/components/Footer.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react' -import { APP } from '../Constants' -import { RiCodeSSlashFill } from 'react-icons/ri' -import { HiLightBulb } from 'react-icons/hi' -import { trackPageView } from 'src/lib/analytics' - -function Footer({ feedbackWidget }) { - const { show: showFeedbackWidget } = feedbackWidget || { show: false } - - const onSourceCodeClick = () => { - trackPageView('Source Code') - window.open(APP.repository, '_blank') - } - - const onNewFeatureRequest = () => { - trackPageView('Feature Request') - window.open(APP.supportLink) - } - - const onPrivacyPolicyClick = () => { - trackPageView('Privacy Policy') - window.open(APP.privacyPolicyLink) - } - const onTermsClick = () => { - trackPageView('Terms And Conditions') - window.open(APP.termsAndConditionsLink) - } - const onDataSourcesClick = () => { - trackPageView('Data Sources') - window.open(APP.dataSourcesLink) - } - - return ( - - ) -} - -export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js deleted file mode 100644 index 399454c7..00000000 --- a/src/components/Header.js +++ /dev/null @@ -1,120 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react' -import { BsFillGearFill } from "react-icons/bs" -import { CgTab } from 'react-icons/cg'; -import { BsFillBookmarksFill } from "react-icons/bs" -import { ReactComponent as HackertabLogo } from '../logo.svg'; -import UserTags from "./UserTags"; -import { SUPPORTED_SEARCH_ENGINES } from '../Constants' -import SettingsModal from '../settings/SettingsModal' -import { BsMoon } from 'react-icons/bs' -import { IoMdSunny } from 'react-icons/io' -import { trackSearchEngineUse } from 'src/lib/analytics' -import Changelog from './Changelog' -import { GoSearch } from 'react-icons/go' - -function SearchBar({ state }) { - const keywordsInputRef = React.useRef(null) - const userSearchEngine = SUPPORTED_SEARCH_ENGINES.find( - (engine) => engine.label == state.searchEngine - ) - - const handleSubmit = (e) => { - e.preventDefault() - const keywords = e.target.children[1].value - trackSearchEngineUse(userSearchEngine.label) - window.open(`${userSearchEngine.url}${keywords}`, '_self') - } - - useEffect(() => { - keywordsInputRef.current.focus() - }, []) - - return ( -
- - - - ) -} -function Header({ state, dispatcher, showSideBar, setShowSideBar, showSettings, setShowSettings }) { - const [themeIcon, setThemeIcon] = useState() - const isFirstRun = useRef(true) - - useEffect(() => { - document.documentElement.classList.add(state.theme) - }, []) - - useEffect(() => { - if (isFirstRun.current) { - isFirstRun.current = false - } else { - if (!document.documentElement.classList.contains('transitionBgColor')) { - document.documentElement.classList.add('transitionBgColor') - } - } - - if (state.theme === 'light') { - document.documentElement.classList.replace('dark', state.theme) - setThemeIcon() - } else if (state.theme === 'dark') { - document.documentElement.classList.replace('light', state.theme) - setThemeIcon() - } - }, [state?.theme]) - - const onThemeChange = () => { - dispatcher({ type: 'toggleTheme' }) - } - - const onSettingsClick = () => { - setShowSettings(true) - } - - const BookmarksBadgeCount = () => { - return state.userBookmarks.length > 0 ? ( - state.userBookmarks.length < 10 ? ( - {state.userBookmarks.length} - ) : ( - +9 - ) - ) : null - } - - return ( - <> - - -
- - - - {' '} - - - - -
- - - -
-
- -
- - ) -} - -export default Header; \ No newline at end of file diff --git a/src/components/Layout/AppContentLayout.tsx b/src/components/Layout/AppContentLayout.tsx new file mode 100644 index 00000000..e92186e1 --- /dev/null +++ b/src/components/Layout/AppContentLayout.tsx @@ -0,0 +1,29 @@ +import { useState } from 'react' +import { BottomNavigation } from '../Elements' +import { isDesktop } from 'react-device-detect' +import { useUserPreferences } from 'src/stores/preferences' +import { MobileCards } from './MobileCards' +import { DesktopCards } from './DesktopCards' + +export const AppContentLayout = ({ + setShowSettings, +}: { + setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void +}) => { + const { cards } = useUserPreferences() + const [selectedCard, setSelectedCard] = useState(cards[0]) + + return ( + <> +
+ {isDesktop ? : } +
+ + + + ) +} diff --git a/src/components/Layout/DesktopCards.tsx b/src/components/Layout/DesktopCards.tsx new file mode 100644 index 00000000..f3ac74ab --- /dev/null +++ b/src/components/Layout/DesktopCards.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { SUPPORTED_CARDS } from 'src/config' +import { SelectedCard } from 'src/types' + +export const DesktopCards = ({ cards }: { cards: SelectedCard[] }) => { + return ( + <> + {cards.map((card, index) => { + const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name) + if (!constantCard) { + return null + } + + return React.createElement(constantCard.component, { + key: card.name, + meta: constantCard, + withAds: index === 0, + }) + })} + + ) +} diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx new file mode 100644 index 00000000..ca33f79a --- /dev/null +++ b/src/components/Layout/Footer.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { + repository, + supportLink, + privacyPolicyLink, + termsAndConditionsLink, + dataSourcesLink, +} from 'src/config' +import { RiCodeSSlashFill } from 'react-icons/ri' +import { HiLightBulb } from 'react-icons/hi' +import { trackPageView } from 'src/lib/analytics' + +export const Footer = () => { + return ( + + ) +} diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx new file mode 100644 index 00000000..61c6fec0 --- /dev/null +++ b/src/components/Layout/Header.tsx @@ -0,0 +1,108 @@ +import React, { useEffect, useRef, useState } from 'react' +import { BsFillGearFill } from 'react-icons/bs' +import { CgTab } from 'react-icons/cg' +import { BsFillBookmarksFill } from 'react-icons/bs' +import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg' +import { UserTags } from 'src/components/Elements/UserTags' +import { SettingsModal } from 'src/features/settings' +import { BsMoon } from 'react-icons/bs' +import { IoMdSunny } from 'react-icons/io' +import { Changelog } from 'src/features/changelog' +import { SearchBar } from 'src/components/Elements/SearchBar' +import { useUserPreferences } from 'src/stores/preferences' +import { useBookmarks } from 'src/stores/bookmarks' +import { trackThemeSelect, identifyUserTheme } from 'src/lib/analytics' + +type HeaderProps = { + showSideBar: boolean + setShowSideBar: (show: boolean) => void + showSettings: boolean + setShowSettings: (show: boolean) => void +} + +export const Header = ({ + showSideBar, + setShowSideBar, + showSettings, + setShowSettings, +}: HeaderProps) => { + const [themeIcon, setThemeIcon] = useState() + const isFirstRun = useRef(true) + const { theme, setTheme } = useUserPreferences() + const { userBookmarks } = useBookmarks() + + useEffect(() => { + document.documentElement.classList.add(theme) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + useEffect(() => { + if (isFirstRun.current) { + isFirstRun.current = false + } else { + if (!document.documentElement.classList.contains('transitionBgColor')) { + document.documentElement.classList.add('transitionBgColor') + } + } + + if (theme === 'light') { + document.documentElement.classList.replace('dark', theme) + setThemeIcon() + } else if (theme === 'dark') { + document.documentElement.classList.replace('light', theme) + setThemeIcon() + } + }, [theme]) + + const onThemeChange = () => { + const newTheme = theme === 'dark' ? 'light' : 'dark' + setTheme(newTheme) + trackThemeSelect(newTheme) + identifyUserTheme(newTheme) + } + + const onSettingsClick = () => { + setShowSettings(true) + } + + const BookmarksBadgeCount = () => { + return userBookmarks.length > 0 ? ( + userBookmarks.length < 10 ? ( + {userBookmarks.length} + ) : ( + +9 + ) + ) : null + } + + return ( + <> + + +
+ + + + {' '} + + + + +
+ + + +
+
+ +
+ + ) +} diff --git a/src/components/Layout/MobileCards.tsx b/src/components/Layout/MobileCards.tsx new file mode 100644 index 00000000..aaf01d16 --- /dev/null +++ b/src/components/Layout/MobileCards.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { SUPPORTED_CARDS } from 'src/config' +import { SelectedCard } from 'src/types' + +export const MobileCards = ({ selectedCard }: { selectedCard: SelectedCard }) => { + const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name) + return currentCard + ? React.createElement(currentCard.component, { + key: currentCard.value, + meta: currentCard, + withAds: true, + }) + : null +} diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts new file mode 100644 index 00000000..41a23525 --- /dev/null +++ b/src/components/Layout/index.ts @@ -0,0 +1,3 @@ +export * from "./Header" +export * from "./Footer" +export * from "./AppContentLayout" \ No newline at end of file diff --git a/src/components/List/ListComponent.tsx b/src/components/List/ListComponent.tsx new file mode 100644 index 00000000..79df967b --- /dev/null +++ b/src/components/List/ListComponent.tsx @@ -0,0 +1,62 @@ +import React, { ReactNode } from 'react' +import { Placeholder } from 'src/components/placeholders' +import { MAX_ITEMS_PER_CARD } from 'src/config' +import { CarbonAd } from 'src/features/carbonAds' +import { BaseEntry } from 'src/types' + +type PlaceholdersProps = { + placeholder: ReactNode +} + +const Placeholders = React.memo(({ placeholder }) => { + return ( + <> + {[...Array(7)].map((x, i) => ( + {placeholder} + ))} + + ) +}) + +export type ListComponentPropsType = { + items: T[] + isLoading: boolean + renderItem: (item: T, index: number) => React.ReactNode + withAds: boolean + placeholder?: React.ReactNode + refresh?: boolean + error?: any + limit?: number +} + +export function ListComponent(props: ListComponentPropsType) { + const { + items, + isLoading, + error, + renderItem, + withAds, + placeholder = , + limit = MAX_ITEMS_PER_CARD, + } = props + + if (error) { + return

{error?.message || error}

+ } + + const renderItems = () => { + if (!items) { + return + } + + return items.slice(0, limit).map((item, index) => { + let content: ReactNode[] = [renderItem(item, index)] + if (withAds && index === 0) { + content.unshift() + } + return content + }) + } + + return <>{isLoading ? : renderItems()} +} diff --git a/src/components/List/index.ts b/src/components/List/index.ts new file mode 100644 index 00000000..7439fa3c --- /dev/null +++ b/src/components/List/index.ts @@ -0,0 +1 @@ +export * from "./ListComponent" \ No newline at end of file diff --git a/src/components/ListComponent.js b/src/components/ListComponent.js deleted file mode 100644 index d998b0dd..00000000 --- a/src/components/ListComponent.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState, useEffect } from 'react' -import CarbonAd from './CarbonAd' -import Placeholder from './Placeholder' - -function ListComponent({ fetchData, refresh, renderItem, withAds, placeholder = }) { - const [items, setItems] = useState([]) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - - const fetch = async () => { - setLoading(true) - setError(null) - setItems([]) - try { - const data = await fetchData() - setItems(data) - } catch (e) { - setError(e) - } finally { - setLoading(false) - } - } - useEffect(() => { - fetch() - }, [refresh]) - - if (error) { - return

{error.message}

- } - - const renderItems = () => { - if (!items) { - return - } - - return items.map((item, index) => { - let content = [renderItem(item, index)] - if (withAds && index == 0) { - content.unshift() - } - return content - }) - } - - function Placeholders() { - return ( - <> - {[...Array(5)].map((x, i) => ( - {placeholder} - ))} - - ) - } - - return <>{loading ? : renderItems()} -} - -export default ListComponent diff --git a/src/components/MarketingBanner.js b/src/components/MarketingBanner.js deleted file mode 100644 index 679b08c2..00000000 --- a/src/components/MarketingBanner.js +++ /dev/null @@ -1,13 +0,0 @@ -import DOMPurify from 'dompurify'; - - -const MarketingBanner = ({ show, htmlContent }) => { - if (!show) { return null } - let cleanHtmlContent = DOMPurify.sanitize(htmlContent); - - return ( -
- ) -} - -export default MarketingBanner \ No newline at end of file diff --git a/src/components/ScrollCardsNavigator.js b/src/components/ScrollCardsNavigator.js index 510504d0..713e0fc5 100644 --- a/src/components/ScrollCardsNavigator.js +++ b/src/components/ScrollCardsNavigator.js @@ -1,11 +1,11 @@ -import React, { useState, useEffect, useContext, useLayoutEffect, useRef } from 'react' +import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from 'react' import { FiChevronLeft, FiChevronRight } from 'react-icons/fi' -import { APP } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' +import { maxCardsPerRow } from 'src/config' +import { useUserPreferences } from 'src/stores/preferences' import { trackPageScroll } from 'src/lib/analytics' function ScrollCardsNavigator() { - const { cards } = useContext(PreferencesContext) + const { cards } = useUserPreferences() const [leftButtonVisible, setLeftButtonVisible] = useState(true) const [rightButtonVisible, setRightButtonVisible] = useState(true) const scrollBarContainer = useRef(null) @@ -17,13 +17,13 @@ function ScrollCardsNavigator() { setRightButtonVisible(scrollRight > 0) } - const handleKeyboardKeys = (e) => { - if (e.keyCode == 37) { + const handleKeyboardKeys = useCallback((e) => { + if (e.keyCode === 37) { scrollTo('left') - } else if (e.keyCode == 39) { + } else if (e.keyCode === 39) { scrollTo('right') } - } + }, []) useLayoutEffect(() => { scrollBarContainer.current = document.querySelector('.AppContent') @@ -36,11 +36,11 @@ function ScrollCardsNavigator() { window.removeEventListener('keydown', handleKeyboardKeys) scrollBarContainer.current.removeEventListener('scroll', handleScroll) } - }, []) + }, [handleKeyboardKeys]) useEffect(() => { setLeftButtonVisible(false) - setRightButtonVisible(cards.length > APP.maxCardsPerRow) + setRightButtonVisible(cards.length > maxCardsPerRow) }, [cards]) const scrollTo = (direction) => { diff --git a/src/components/SelectableCard.js b/src/components/SelectableCard.js index a0ac4f19..f21dab13 100644 --- a/src/components/SelectableCard.js +++ b/src/components/SelectableCard.js @@ -1,7 +1,7 @@ -import React, { useContext, useLayoutEffect } from 'react' +import { useCallback, useLayoutEffect } from 'react' import DropDownMenu from './DropDownMenu' -import { GLOBAL_TAG, MY_LANGUAGES_TAG } from '../Constants' -import PreferencesContext from '../preferences/PreferencesContext' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { useUserPreferences } from 'src/stores/preferences' function SelectableCard({ tagId, @@ -13,43 +13,47 @@ function SelectableCard({ trackEvent, isLanguage = false, }) { - const preferences = useContext(PreferencesContext) - const { userSelectedTags } = preferences + const { userSelectedTags } = useUserPreferences() let mergedTags = data if (isLanguage) { mergedTags = [...userSelectedTags, GLOBAL_TAG, MY_LANGUAGES_TAG] } - const getInitialSelectedTagValue = () => { + const findTagByValue = useCallback( + (value) => { + if (!value) { + return null + } + + return mergedTags.find((t) => t.value === value) + }, + [mergedTags] + ) + + const findTagByLabel = useCallback( + (name) => { + if (!name) { + return null + } + + return mergedTags.find((t) => t.label === name) + }, + [mergedTags] + ) + const getInitialSelectedTagValue = useCallback(() => { if (isLanguage) { return findTagByLabel(cardSettings) ?? fallbackTag } else { return findTagByValue(cardSettings) ?? fallbackTag } - } - - const findTagByValue = (value) => { - if (!value) { - return null - } - - return mergedTags.find((t) => t.value == value) - } - - const findTagByLabel = (name) => { - if (!name) { - return null - } - - return mergedTags.find((t) => t.label == name) - } + }, [cardSettings, fallbackTag, findTagByLabel, findTagByValue, isLanguage]) useLayoutEffect(() => { if (selectedTag == null) { setSelectedTag(getInitialSelectedTagValue()) } - }, []) + }, [getInitialSelectedTagValue, selectedTag, setSelectedTag]) return ( - {userSelectedTags.map((tag, index) => {tag.value})} - - - ) -} - -export default UserTags \ No newline at end of file diff --git a/src/components/Placeholder.js b/src/components/placeholders/Placeholder.tsx similarity index 87% rename from src/components/Placeholder.js rename to src/components/placeholders/Placeholder.tsx index 2194adea..b347e6b7 100644 --- a/src/components/Placeholder.js +++ b/src/components/placeholders/Placeholder.tsx @@ -1,6 +1,6 @@ import React from 'react' -function Placeholder() { +export const Placeholder = () => { return (
@@ -13,5 +13,3 @@ function Placeholder() {
) } - -export default Placeholder diff --git a/src/components/ProductHuntPlaceholder.js b/src/components/placeholders/ProductHuntPlaceholder.tsx similarity index 78% rename from src/components/ProductHuntPlaceholder.js rename to src/components/placeholders/ProductHuntPlaceholder.tsx index 72d467dc..0df83be2 100644 --- a/src/components/ProductHuntPlaceholder.js +++ b/src/components/placeholders/ProductHuntPlaceholder.tsx @@ -1,10 +1,10 @@ import React from 'react' -function ProductHuntPlaceholder() { +export const ProductHuntPlaceholder = () => { return (
-
+
@@ -16,5 +16,3 @@ function ProductHuntPlaceholder() {
) } - -export default ProductHuntPlaceholder diff --git a/src/components/placeholders/index.ts b/src/components/placeholders/index.ts new file mode 100644 index 00000000..e5e12bc3 --- /dev/null +++ b/src/components/placeholders/index.ts @@ -0,0 +1,2 @@ +export * from "./Placeholder" +export * from "./ProductHuntPlaceholder" \ No newline at end of file diff --git a/src/Constants.js b/src/config/index.tsx similarity index 54% rename from src/Constants.js rename to src/config/index.tsx index 788e1d6e..ed162ef2 100644 --- a/src/Constants.js +++ b/src/config/index.tsx @@ -1,60 +1,102 @@ import React from 'react' -import HNCard from './cards/HNCard' -import DevToCard from './cards/DevToCard' -import ConferencesCard from './cards/ConferencesCard' -import ReposCard from './cards/ReposCard' -import ProductHuntCard from './cards/ProductHuntCard' -import RedditCard from './cards/RedditCard' -import LobstersCard from './cards/LobstersCard' -import HashNodeCard from './cards/HashNodeCard' -import IndieHackersCard from './cards/IndieHackersCard' -import FreeCodeCampCard from './cards/FreeCodeCampCard' -import MediumCard from './cards/MediumCard' import { SiGithub } from 'react-icons/si' import { SiYcombinator } from 'react-icons/si' import { FaDev } from 'react-icons/fa' import { SiProducthunt } from 'react-icons/si' import { FaReddit, FaMediumM } from 'react-icons/fa' import { HiTicket } from 'react-icons/hi' -import HashNodeIcon from './static/icon_hashnode.png' -import LobstersIcon from './static/icon_lobsters.png' +import HashNodeIcon from 'src/assets/icon_hashnode.png' +import LobstersIcon from 'src/assets/icon_lobsters.png' import { FaFreeCodeCamp } from 'react-icons/fa' import { CgIndieHackers } from 'react-icons/cg' +import { + HackernewsCard, + ProductHuntCard, + IndiehackersCard, + FreecodecampCard, + ConferencesCard, + GithubCard, + MediumCard, + HashnodeCard, + LobstersCard, + DevtoCard, + RedditCard, +} from 'src/features/cards' +import { CardPropsType } from 'src/types' -const APP = { - name: 'Hackertab.dev', - slogan: '— Stay updated with the new technology and trends', - repository: 'https://github.com/medyo/hackertab.dev', - ref: 'utm_source=hackertab.dev&utm_medium=post&utm_campaign=home', - contactEmail: 'hello@hackertab.dev', - maxCardsPerRow: 4, - supportLink: 'https://github.com/medyo/hackertab.dev/issues', - privacyPolicyLink: 'https://www.hackertab.dev/privacy-policy', - termsAndConditionsLink: 'https://www.hackertab.dev/terms-and-conditions', - dataSourcesLink: 'https://www.hackertab.dev/data-sources', - changeLogLink: 'https://api.github.com/repos/medyo/hackertab.dev/releases', -} -export const ANALYTICS_ENDPOINT = 'https://api.hackertab.dev/analytics' -export const ANALYTICS_SDK_KEY = '9662c93f91473ba6e96711b22e0a367d' +// Keys +export const ANALYTICS_ENDPOINT = process.env.REACT_APP_AMPLITUDE_URL as string +export const ANALYTICS_SDK_KEY = process.env.REACT_APP_AMPLITUDE_KEY as string +export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN as string +export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId' +// Meta +export const name = 'Hackertab.dev' +export const slogan = '— Stay updated with the new technology and trends' +export const repository = 'https://github.com/medyo/hackertab.dev' +export const ref = 'utm_source=hackertab.dev&utm_medium=post&utm_campaign=home' +export const contactEmail = 'hello@hackertab.dev' +export const maxCardsPerRow = 4 +export const supportLink = 'https://github.com/medyo/hackertab.dev/issues' +export const privacyPolicyLink = 'https://www.hackertab.dev/privacy-policy' +export const termsAndConditionsLink = 'https://www.hackertab.dev/terms-and-conditions' +export const dataSourcesLink = 'https://www.hackertab.dev/data-sources' +export const changeLogLink = 'https://api.github.com/repos/medyo/hackertab.dev/releases' +// Cfgs +export const SUPPORTED_SEARCH_ENGINES = [ + { + label: 'Google', + url: 'https://google.com/search?q=', + }, + { + label: 'DuckDuckGo', + url: 'https://duckduckgo.com?q=', + }, + { + label: 'Bing', + url: 'https://bing.com/search?q=', + }, + { + label: 'Yahoo', + url: 'https://search.yahoo.com/search?p=', + }, + { + label: 'Baidu', + url: 'https://baidu.com/s?wd=', + }, + { + label: 'Yandex', + url: 'https://yandex.ru/search/?text=', + }, + { + label: 'Startpage', + url: 'https://www.startpage.com/sp/search?query=', + }, +] -export const LOCAL_CONFIGURATION = { - supportedTags: [], // Loaded remotly +export type SupportedCard = { + value: string + icon: React.ReactNode + analyticsTag: string + label: string + link: string + component: React.FunctionComponent } - -export const SUPPORTED_CARDS = [ +export const SUPPORTED_CARDS: SupportedCard[] = [ { value: 'github', - icon: , - analyticsTag: 'repos', + analyticsTag: 'github', label: 'Github repositories', - component: ReposCard, + component: GithubCard, + icon: , + link: 'https://github.com/', }, { value: 'hackernews', icon: , analyticsTag: 'hackernews', label: 'Hackernews', - component: HNCard, + component: HackernewsCard, + link: 'https://news.ycombinator.com/', }, { value: 'conferences', @@ -62,13 +104,15 @@ export const SUPPORTED_CARDS = [ analyticsTag: 'events', label: 'Upcoming events', component: ConferencesCard, + link: 'https://confs.tech/', }, { value: 'devto', icon: , analyticsTag: 'devto', label: 'DevTo', - component: DevToCard, + component: DevtoCard, + link: 'https://dev.to/', }, { value: 'producthunt', @@ -76,6 +120,7 @@ export const SUPPORTED_CARDS = [ analyticsTag: 'producthunt', label: 'Product Hunt', component: ProductHuntCard, + link: 'https://producthunt.com/', }, { value: 'reddit', @@ -83,34 +128,39 @@ export const SUPPORTED_CARDS = [ analyticsTag: 'reddit', label: 'Reddit', component: RedditCard, + link: 'https://reddit.com/', }, { value: 'lobsters', - icon: , + icon: lobsters, analyticsTag: 'lobsters', label: 'Lobsters', component: LobstersCard, + link: 'https://lobste.rs/', }, { value: 'hashnode', - icon: , + icon: hn, analyticsTag: 'hashnode', label: 'Hashnode', - component: HashNodeCard, + component: HashnodeCard, + link: 'https://hashnode.com/', }, { value: 'freecodecamp', icon: , analyticsTag: 'freecodecamp', label: 'FreeCodeCamp', - component: FreeCodeCampCard, + component: FreecodecampCard, + link: 'https://freecodecamp.com/news', }, { value: 'indiehackers', icon: , analyticsTag: 'indiehackers', label: 'IndieHackers', - component: IndieHackersCard, + component: IndiehackersCard, + link: 'https://indiehackers.com/', }, { value: 'medium', @@ -118,48 +168,19 @@ export const SUPPORTED_CARDS = [ analyticsTag: 'medium', label: 'Medium', component: MediumCard, - } -] - -export const SUPPORTED_SEARCH_ENGINES = [ - { - label: 'Google', - url: 'https://google.com/search?q=', - }, - { - label: 'DuckDuckGo', - url: 'https://duckduckgo.com?q=', - }, - { - label: 'Bing', - url: 'https://bing.com/search?q=', - }, - { - label: 'Yahoo', - url: 'https://search.yahoo.com/search?p=', - }, - { - label: 'Baidu', - url: 'https://baidu.com/s?wd=', - }, - { - label: 'Yandex', - url: 'https://yandex.ru/search/?text=', - }, - { - label: 'Startpage', - url: 'https://www.startpage.com/sp/search?query=', + link: 'https://medium.com/', }, ] + export const LS_PREFERENCES_KEY = 'hackerTabPrefs' -export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId' export const GLOBAL_TAG = { value: 'global', label: 'Trending', githubValues: ['global'], - devtoValues: [''], + devtoValues: ['programming'], hashnodeValues: ['programming'], mediumValues: ['programming'], + freecodecampValues: ['programming'], } export const MY_LANGUAGES_TAG = { value: 'myLangs', @@ -168,6 +189,6 @@ export const MY_LANGUAGES_TAG = { devtoValues: ['myLangs'], hashnodeValues: ['myLangs'], mediumValues: ['myLangs'], + freecodecampValues: ['myLangs'], } -export const MAX_MERGED_ITEMS_PER_LANGUAGE = 10 -export { APP } +export const MAX_ITEMS_PER_CARD = 50 diff --git a/src/configuration/AppLoadingHOC.js b/src/configuration/AppLoadingHOC.js deleted file mode 100644 index 57d1c4ed..00000000 --- a/src/configuration/AppLoadingHOC.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { useState } from 'react' -import BeatLoader from 'react-spinners/BeatLoader' - -export const AppLoadingHOC = (WrappedComponent) => { - function HOC(props) { - const [isLoading, setIsLoading] = useState(true) - const setLoadingState = (isComponentLoading) => setIsLoading(isComponentLoading) - - return ( - <> - {isLoading && ( -
- -
- )} - - - ) - } - return HOC -} diff --git a/src/configuration/AppWrapper.js b/src/configuration/AppWrapper.js deleted file mode 100644 index 0a4553b4..00000000 --- a/src/configuration/AppWrapper.js +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useReducer, useContext } from 'react' -import { LS_PREFERENCES_KEY } from 'src/Constants' -import AppStorage from '../services/localStorage' -import { PreferencesProvider } from '../preferences/PreferencesContext' -import { getOSMode } from '../services/os' -import AppReducer from '../preferences/AppReducer' -import ConfigurationContext from './ConfigurationContext' - -export default function AppWrapper({ children }) { - const configuration = useContext(ConfigurationContext) - - const [state, dispatcher] = useReducer( - AppReducer, - { - userSelectedTags: configuration.supportedTags.filter((t) => t.value === 'javascript'), - userBookmarks: [], - theme: getOSMode(), - openLinksNewTab: true, - listingMode: 'normal', - searchEngine: 'Google', - cards: [ - { id: 0, name: 'github' }, - { id: 1, name: 'hackernews' }, - { id: 2, name: 'devto' }, - { id: 3, name: 'producthunt' }, - ], - }, - (initialState) => { - let preferences = AppStorage.getItem(LS_PREFERENCES_KEY) - if (preferences) { - preferences = JSON.parse(preferences) - preferences = { - ...preferences, - userSelectedTags: configuration.supportedTags.filter((tag) => - preferences.userSelectedTags.includes(tag.value) - ), - cards: preferences.cards.filter((card) => card.name != 'stackoverflow'), - } - return { - ...initialState, - ...preferences, - } - } - - return initialState - } - ) - - return ( - - {children} - - ) -} diff --git a/src/configuration/ConfigurationContext.js b/src/configuration/ConfigurationContext.js deleted file mode 100644 index e072cebe..00000000 --- a/src/configuration/ConfigurationContext.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -const ConfigurationContext = React.createContext({ - supportedTags: [ - { - value: 'javascript', - label: 'Javascript', - githubValues: ['javascript'], - confsValues: ['javascript'], - devtoValues: ['javascript'], - hashnodeValues: ['javascript'], - mediumValues: ['javascript'], - }, - ], -}) - - -export const ConfigurationProvider = ConfigurationContext.Provider - -export default ConfigurationContext diff --git a/src/configuration/ConfigurationWrapper.js b/src/configuration/ConfigurationWrapper.js deleted file mode 100644 index b91376e6..00000000 --- a/src/configuration/ConfigurationWrapper.js +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useEffect, useState } from 'react' -import remoteConfigurationApi from '../services/remoteConfiguration' -import { ConfigurationProvider } from './ConfigurationContext' -import { AppLoadingHOC } from './AppLoadingHOC' -import useAsyncError from '../hooks/useAsyncError' - -export const ConfigurationWrapper = (props) => { - const { setLoading, isLoading } = props - const [configurationData, setConfigurationData] = useState(null) - const throwError = useAsyncError() - - useEffect(() => { - setLoading(true) - const setup = async () => { - // try { - const data = await remoteConfigurationApi.getRemoteConfiguration() - if (!data) { - throwError( - 'Could not fetch configuration data, Make sure you are connected to the internet' - ) - } else { - setConfigurationData(data) - } - setLoading(false) - } - - setup() - }, []) - - return ( - <> - {configurationData && ( - {props.children} - )} - - ) -} - -export default AppLoadingHOC(ConfigurationWrapper) diff --git a/src/features/bookmarks/components/BookmarksSidebar.tsx b/src/features/bookmarks/components/BookmarksSidebar.tsx new file mode 100644 index 00000000..f0ba99bf --- /dev/null +++ b/src/features/bookmarks/components/BookmarksSidebar.tsx @@ -0,0 +1,141 @@ +import './Sidebar.css' +import { VscChromeClose } from 'react-icons/vsc' +import { TiDelete } from 'react-icons/ti' +import { HiTicket } from 'react-icons/hi' +import { SiGithub, SiReddit, SiProducthunt, SiYcombinator } from 'react-icons/si' +import { + ProSidebar, + Menu, + MenuItem, + SubMenu, + SidebarHeader, + SidebarContent, +} from 'react-pro-sidebar' +import 'react-pro-sidebar/dist/css/styles.css' +import { CardLink } from 'src/components/Elements' +import { trackLinkUnBookmark, Attributes } from 'src/lib/analytics' +import { useBookmarks } from 'src/stores/bookmarks' + +type BookmarkItemProps = { + item: { + url: string + title: string + source: string + } + appendRef?: boolean +} +const BookmarkItem = ({ item, appendRef = true }: BookmarkItemProps) => { + const { unbookmarkPost } = useBookmarks() + const analyticsAttrs = { + [Attributes.TRIGERED_FROM]: 'bookmarks', + [Attributes.TITLE]: item.title, + [Attributes.LINK]: item.url, + [Attributes.SOURCE]: item.source, + } + const unBookmark = () => { + unbookmarkPost(item) + trackLinkUnBookmark(analyticsAttrs) + } + return ( + + + + }> + + {`${item.title}`} + + + ) +} + +type BookmarksSidebarTtypes = { + showSidebar: boolean + onClose: () => void +} +export const BookmarksSidebar = ({ showSidebar, onClose }: BookmarksSidebarTtypes) => { + const { userBookmarks } = useBookmarks() + const githubBookmarks = userBookmarks.filter((bm) => bm.source === 'github') + const newsBookmarks = userBookmarks.filter( + (bm) => + [ + 'hackernews', + 'devto', + 'hashnode', + 'lobsters', + 'freecodecamp', + 'medium', + 'indiehackers', + ].indexOf(bm.source) !== -1 + ) + const conferencesBookmarks = userBookmarks.filter((bm) => bm.source === 'conferences') + const productsBookmarks = userBookmarks.filter((bm) => bm.source === 'producthunt') + const redditBookmarks = userBookmarks.filter((bm) => bm.source === 'reddit') + + return ( + + +
+ Bookmarks + + + +
+ + + + } + suffix={{githubBookmarks.length}}> + {githubBookmarks.map((bm, index) => ( + + ))} + + + } + suffix={{newsBookmarks.length}}> + {newsBookmarks.map((bm, index) => ( + + ))} + + + } + suffix={{productsBookmarks.length}}> + {productsBookmarks.map((bm, index) => ( + + ))} + + + } + suffix={{conferencesBookmarks.length}}> + {conferencesBookmarks.map((bm, index) => ( + + ))} + + } + suffix={{redditBookmarks.length}}> + {redditBookmarks.map((bm, index) => ( + + ))} + + + + + ) +} + +export default BookmarksSidebar diff --git a/src/bookmark/Sidebar.css b/src/features/bookmarks/components/Sidebar.css similarity index 100% rename from src/bookmark/Sidebar.css rename to src/features/bookmarks/components/Sidebar.css diff --git a/src/features/bookmarks/index.ts b/src/features/bookmarks/index.ts new file mode 100644 index 00000000..9d030294 --- /dev/null +++ b/src/features/bookmarks/index.ts @@ -0,0 +1,2 @@ +export * from "./components/BookmarksSidebar" +export * from "./types" \ No newline at end of file diff --git a/src/features/bookmarks/types/index.ts b/src/features/bookmarks/types/index.ts new file mode 100644 index 00000000..5b6a0c93 --- /dev/null +++ b/src/features/bookmarks/types/index.ts @@ -0,0 +1,5 @@ +export type BookmarkedPost = { + title: string, + source: string, + url: string; +} \ No newline at end of file diff --git a/src/features/carbonAds/api/getAd.ts b/src/features/carbonAds/api/getAd.ts new file mode 100644 index 00000000..c8601261 --- /dev/null +++ b/src/features/carbonAds/api/getAd.ts @@ -0,0 +1,37 @@ +import { useQuery } from '@tanstack/react-query'; +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'; +import { Ad } from "../types"; +import { axios } from 'src/lib/axios'; + +type Response = { + ads: Ad[] +} + +const getAd = async (): Promise => { + const userAgent = new URLSearchParams(navigator.userAgent).toString() + + return axios.get('/monetization/', { + params: { + useragent: userAgent + } + }).then(response => { + const data = response as unknown as Response; + if (!!data.ads.length) { + return data.ads[0]; + } + return null; + }); +} + +type QueryFnType = typeof getAd; + +type UseGetAdOptions = { + config?: QueryConfig; +}; +export const useGetAd = ({ config }: UseGetAdOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['ad'], + queryFn: () => getAd(), + }); +} \ No newline at end of file diff --git a/src/components/CarbonAd.css b/src/features/carbonAds/components/CarbonAd.css similarity index 100% rename from src/components/CarbonAd.css rename to src/features/carbonAds/components/CarbonAd.css diff --git a/src/features/carbonAds/components/CarbonAd.tsx b/src/features/carbonAds/components/CarbonAd.tsx new file mode 100644 index 00000000..12fe0f29 --- /dev/null +++ b/src/features/carbonAds/components/CarbonAd.tsx @@ -0,0 +1,59 @@ +import './CarbonAd.css' +import { addHttpsProtocol } from 'src/utils/UrlUtils' +import { useGetAd } from '../api/getAd' +import { useRemoteConfigStore } from 'src/features/remoteConfig' +export const CarbonAd = () => { + const { refresh_rate } = useRemoteConfigStore() + const { data: ad } = useGetAd({ + config: { + refetchInterval: refresh_rate, + }, + }) + + if (!ad) { + return null + } + + return ( +
+ {ad && ( + + )} +
+ ) +} diff --git a/src/features/carbonAds/index.ts b/src/features/carbonAds/index.ts new file mode 100644 index 00000000..5f97d5e7 --- /dev/null +++ b/src/features/carbonAds/index.ts @@ -0,0 +1 @@ +export * from "./components/CarbonAd"; \ No newline at end of file diff --git a/src/features/carbonAds/types/index.ts b/src/features/carbonAds/types/index.ts new file mode 100644 index 00000000..503d0dc8 --- /dev/null +++ b/src/features/carbonAds/types/index.ts @@ -0,0 +1,9 @@ +export type Ad = { + statlink: string, + company: string, + companyTagline: string, + smallImage: string, + backgroundColor: string, + description: string, + ad_via_link: string +} \ No newline at end of file diff --git a/src/features/cards/api/getConferences.ts b/src/features/cards/api/getConferences.ts new file mode 100644 index 00000000..acbe8a93 --- /dev/null +++ b/src/features/cards/api/getConferences.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Conference } from 'src/types' +import { axios } from 'src/lib/axios' + +const getConferences = async (tag: string): Promise => { + return axios.get(`/data/v2/conferences/${tag}.json`) +} + +type QueryFnType = typeof getConferences + +type UseGetConferencesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetConferences = ({ config, tags }: UseGetConferencesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['conferences', tag], + queryFn: () => getConferences(tag), + } + }) + }) +} diff --git a/src/features/cards/api/getDevtoArticles.ts b/src/features/cards/api/getDevtoArticles.ts new file mode 100644 index 00000000..4aeb90d5 --- /dev/null +++ b/src/features/cards/api/getDevtoArticles.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (tag: string): Promise => { + return axios.get(`/data/v2/devto/${tag}.json`) +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetDevtoArticles = ({ config, tags }: UseGetArticlesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['devto', tag], + queryFn: () => getArticles(tag), + } + }) + }) +} diff --git a/src/features/cards/api/getFreeCodeCampArticles.ts b/src/features/cards/api/getFreeCodeCampArticles.ts new file mode 100644 index 00000000..dcacd36f --- /dev/null +++ b/src/features/cards/api/getFreeCodeCampArticles.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (tag: string): Promise => { + return axios.get(`/data/v2/freecodecamp/${tag}.json`) +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetFreeCodeCampArticles = ({ config, tags }: UseGetArticlesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['freecodecamp', tag], + queryFn: () => getArticles(tag), + } + }) + }) +} diff --git a/src/features/cards/api/getGithubRepos.ts b/src/features/cards/api/getGithubRepos.ts new file mode 100644 index 00000000..07b7916a --- /dev/null +++ b/src/features/cards/api/getGithubRepos.ts @@ -0,0 +1,28 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Repository } from 'src/types' +import { axios } from 'src/lib/axios' + +const getRepos = async (tag: string, dateRange: string): Promise => { + return axios.get(`/data/v2/github/${tag}/${dateRange}.json`) +} + +type QueryFnType = typeof getRepos + +type UseGetReposOptions = { + config?: QueryConfig + tags: string[] + dateRange: "daily" | "monthly" | "weekly" +} + +export const useGetGithubRepos = ({ config, tags, dateRange }: UseGetReposOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['github', tag, dateRange], + queryFn: () => getRepos(tag, dateRange), + } + }) + }) +} \ No newline at end of file diff --git a/src/features/cards/api/getHackerNewsArticles.ts b/src/features/cards/api/getHackerNewsArticles.ts new file mode 100644 index 00000000..f5b5ecd8 --- /dev/null +++ b/src/features/cards/api/getHackerNewsArticles.ts @@ -0,0 +1,22 @@ +import { useQuery } from '@tanstack/react-query' +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (): Promise => { + return axios.get('/data/v2/hackernews.json') +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig +} + +export const useGetHackertNewsArticles = ({ config }: UseGetArticlesOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['hackernews'], + queryFn: () => getArticles(), + }) +} diff --git a/src/features/cards/api/getHashnodeArticles.ts b/src/features/cards/api/getHashnodeArticles.ts new file mode 100644 index 00000000..69065436 --- /dev/null +++ b/src/features/cards/api/getHashnodeArticles.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (tag: string): Promise => { + return axios.get(`/data/v2/hashnode/${tag}.json`) +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetHashnodeArticles = ({ config, tags }: UseGetArticlesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['hashnode', tag], + queryFn: () => getArticles(tag), + } + }) + }) +} diff --git a/src/features/cards/api/getIndieHackersArticles.ts b/src/features/cards/api/getIndieHackersArticles.ts new file mode 100644 index 00000000..938559f3 --- /dev/null +++ b/src/features/cards/api/getIndieHackersArticles.ts @@ -0,0 +1,22 @@ +import { useQuery } from '@tanstack/react-query' +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (): Promise => { + return axios.get('/data/v2/indiehackers.json') +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig +} + +export const useGetIndieHackersArticles = ({ config }: UseGetArticlesOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['indiehackers'], + queryFn: () => getArticles(), + }) +} diff --git a/src/features/cards/api/getLobstersArticles.ts b/src/features/cards/api/getLobstersArticles.ts new file mode 100644 index 00000000..560d97ad --- /dev/null +++ b/src/features/cards/api/getLobstersArticles.ts @@ -0,0 +1,22 @@ +import { useQuery } from '@tanstack/react-query' +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (): Promise => { + return axios.get('/data/v2/lobsters.json') +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig +} + +export const useGetLobstersArticles = ({ config }: UseGetArticlesOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['lobsters'], + queryFn: () => getArticles(), + }) +} diff --git a/src/features/cards/api/getMediumArticles.ts b/src/features/cards/api/getMediumArticles.ts new file mode 100644 index 00000000..153608cf --- /dev/null +++ b/src/features/cards/api/getMediumArticles.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (tag: string): Promise => { + return axios.get(`/data/v2/devto/${tag}.json`) +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetMediumArticles = ({ config, tags }: UseGetArticlesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['medium', tag], + queryFn: () => getArticles(tag), + } + }) + }) +} diff --git a/src/features/cards/api/getProductHuntProducts.ts b/src/features/cards/api/getProductHuntProducts.ts new file mode 100644 index 00000000..fcff8f87 --- /dev/null +++ b/src/features/cards/api/getProductHuntProducts.ts @@ -0,0 +1,22 @@ +import { useQuery } from '@tanstack/react-query' +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (): Promise => { + return axios.get('/data/v2/producthunt.json') +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig +} + +export const useGeProductHuntProducts = ({ config }: UseGetArticlesOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['producthunt'], + queryFn: () => getArticles(), + }) +} diff --git a/src/features/cards/api/getRedditArticles.ts b/src/features/cards/api/getRedditArticles.ts new file mode 100644 index 00000000..523340c1 --- /dev/null +++ b/src/features/cards/api/getRedditArticles.ts @@ -0,0 +1,27 @@ +import { useQueries, UseQueryOptions } from '@tanstack/react-query' +import { QueryConfig } from 'src/lib/react-query' +import { Article } from 'src/types' +import { axios } from 'src/lib/axios' + +const getArticles = async (tag: string): Promise => { + return axios.get(`/data/v2/reddit/${tag}.json`) +} + +type QueryFnType = typeof getArticles + +type UseGetArticlesOptions = { + config?: QueryConfig + tags: string[] +} + +export const useGetRedditArticles = ({ config, tags }: UseGetArticlesOptions) => { + return useQueries({ + queries: tags.map>((tag) => { + return { + ...config, + queryKey: ['reddit', tag], + queryFn: () => getArticles(tag), + } + }) + }) +} diff --git a/src/features/cards/components/conferencesCard/ConferenceItem.tsx b/src/features/cards/components/conferencesCard/ConferenceItem.tsx new file mode 100644 index 00000000..57981d8c --- /dev/null +++ b/src/features/cards/components/conferencesCard/ConferenceItem.tsx @@ -0,0 +1,100 @@ +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Conference } from 'src/types' +import { MdAccessTime } from 'react-icons/md' +import { ColoredLanguagesBadge } from 'src/components/Elements' +import { flag } from 'country-emoji' +import { IoIosPin } from 'react-icons/io' +import { RiCalendarEventFill } from 'react-icons/ri' +import { useUserPreferences } from 'src/stores/preferences' + +const ConferencesItem = ({ item, index, analyticsTag }: BaseItemPropsType) => { + const { listingMode } = useUserPreferences() + + const ConferenceLocation = () => { + if (item.online) { + return '🌐 Online' + } + if (item.country) { + return `${flag(item.country.replace(/[^a-zA-Z ]/g, ''))} ${item.city}` + } + } + + const ConferenceDate = () => { + if (!item.start_date) { + return '' + } + const monthNames = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', + ] + const startDate = new Date(item.start_date) + const startMnth = monthNames[startDate.getMonth()] + let value = `${startMnth} ${('0' + startDate.getDate()).slice(-2)}` + if (!item.end_date || item.end_date === item.start_date) { + return value + } + const endDate = new Date(item.end_date) + let endValue = ('0' + endDate.getDate()).slice(-2) + if (endDate.getMonth() !== startDate.getMonth()) { + endValue = `${monthNames[endDate.getMonth()]} ${endValue}` + } + return `${value} - ${endValue}` + } + return ( + + + + {item.title} + + {listingMode === 'normal' ? ( + <> +
+ + {ConferenceLocation()} + + + {ConferenceDate()} + +
+
+ +
+ + ) : ( +
+ + {ConferenceDate()} + +
+ )} + + } + /> + ) +} + +export default ConferencesItem diff --git a/src/features/cards/components/conferencesCard/ConferencesCard.tsx b/src/features/cards/components/conferencesCard/ConferencesCard.tsx new file mode 100644 index 00000000..87559798 --- /dev/null +++ b/src/features/cards/components/conferencesCard/ConferencesCard.tsx @@ -0,0 +1,44 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetConferences } from '../../api/getConferences' +import { Conference, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ConferenceItem from './ConferenceItem' + +export function ConferencesCard({ meta, withAds }: CardPropsType) { + const { userSelectedTags } = useUserPreferences() + + const results = useGetConferences({ tags: getCardTagsValue(userSelectedTags, 'confsValues') }) + + const isLoading = results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Conference[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => a.start_date - b.start_date) + } + + const renderItem = (item: Conference, index: number) => ( + + ) + + return ( + + + + ) +} diff --git a/src/features/cards/components/conferencesCard/index.ts b/src/features/cards/components/conferencesCard/index.ts new file mode 100644 index 00000000..79bde84a --- /dev/null +++ b/src/features/cards/components/conferencesCard/index.ts @@ -0,0 +1 @@ +export * from './ConferencesCard' \ No newline at end of file diff --git a/src/features/cards/components/devtoCard/ArticleItem.tsx b/src/features/cards/components/devtoCard/ArticleItem.tsx new file mode 100644 index 00000000..25c642e9 --- /dev/null +++ b/src/features/cards/components/devtoCard/ArticleItem.tsx @@ -0,0 +1,69 @@ +import { BiCommentDetail } from 'react-icons/bi' +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { format } from 'timeago.js' +import { MdAccessTime } from 'react-icons/md' +import { AiOutlineLike } from 'react-icons/ai' +import { ColoredLanguagesBadge } from 'src/components/Elements' + +const ArticleItem = (props: BaseItemPropsType
) => { + const { item, index, selectedTag, analyticsTag } = props + const { listingMode } = useUserPreferences() + + return ( + + + {listingMode === 'compact' && ( +
+ + {item.reactions} +
+ )} +
{item.title}
+ + + {listingMode === 'normal' && ( + <> +

+ + + {format(new Date(item.published_at))} + + + + {item.comments} comments + + + + {item.reactions} reactions + +

+

+ +

+ + )} + + } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/devtoCard/DevtoCard.tsx b/src/features/cards/components/devtoCard/DevtoCard.tsx new file mode 100644 index 00000000..261231f3 --- /dev/null +++ b/src/features/cards/components/devtoCard/DevtoCard.tsx @@ -0,0 +1,91 @@ +import { useState, useEffect } from 'react' +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetDevtoArticles } from '../../api/getDevtoArticles' +import { Article, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ArticleItem from './ArticleItem' +import { Tag } from 'src/features/remoteConfig' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { trackCardLanguageSelect } from 'src/lib/analytics' +import SelectableCard from 'src/components/SelectableCard' + +const DT_MENU_LANGUAGE_ID = 'DT_MENU_LANGUAGE_ID' + +export function DevtoCard({ withAds, meta }: CardPropsType) { + const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences() + const [selectedTag, setSelectedTag] = useState() + + useEffect(() => { + if (selectedTag) { + setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label }) + } + }, [selectedTag, meta, setCardSettings]) + + const getQueryTags = () => { + if (!selectedTag) { + return [] + } + + if (selectedTag.value === MY_LANGUAGES_TAG.devtoValues[0]) { + return getCardTagsValue(userSelectedTags, 'devtoValues') + } + return selectedTag.devtoValues + } + + const results = useGetDevtoArticles({ tags: getQueryTags() }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Article[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.reactions - a.reactions) + } + + const renderItem = (item: Article, index: number) => ( + + ) + + const HeaderTitle = () => { + return ( +
+ {meta.label} + trackCardLanguageSelect(meta.analyticsTag, tag.value)} + data={userSelectedTags.map((tag) => ({ + label: tag.label, + value: tag.value, + }))} + /> +
+ ) + } + + return ( + }> + + + ) +} diff --git a/src/features/cards/components/devtoCard/index.ts b/src/features/cards/components/devtoCard/index.ts new file mode 100644 index 00000000..124eef55 --- /dev/null +++ b/src/features/cards/components/devtoCard/index.ts @@ -0,0 +1 @@ +export * from "./DevtoCard"; \ No newline at end of file diff --git a/src/features/cards/components/freecodecampCard/ArticleItem.tsx b/src/features/cards/components/freecodecampCard/ArticleItem.tsx new file mode 100644 index 00000000..22cc3638 --- /dev/null +++ b/src/features/cards/components/freecodecampCard/ArticleItem.tsx @@ -0,0 +1,46 @@ +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { format } from 'timeago.js' +import { MdAccessTime } from 'react-icons/md' +import { ColoredLanguagesBadge } from 'src/components/Elements' + +const ArticleItem = (props: BaseItemPropsType
) => { + const { item, index, selectedTag, analyticsTag } = props + return ( + + +
{item.title}
+ + <> +

+ + + {format(new Date(item.published_at))} + +

+

+ +

+ + + } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx b/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx new file mode 100644 index 00000000..b19fecfc --- /dev/null +++ b/src/features/cards/components/freecodecampCard/FreecodecampCard.tsx @@ -0,0 +1,91 @@ +import { useState, useEffect } from 'react' +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetFreeCodeCampArticles } from '../../api/getFreeCodeCampArticles' +import { Article, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ArticleItem from './ArticleItem' +import { Tag } from 'src/features/remoteConfig' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { trackCardLanguageSelect } from 'src/lib/analytics' +import SelectableCard from 'src/components/SelectableCard' + +const FCC_MENU_LANGUAGE_ID = 'FCC_MENU_LANGUAGE_ID' + +export function FreecodecampCard({ meta, withAds }: CardPropsType) { + const [selectedTag, setSelectedTag] = useState() + const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences() + + useEffect(() => { + if (selectedTag) { + setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label }) + } + }, [meta.label, setCardSettings, selectedTag]) + + const getQueryTags = () => { + if (!selectedTag) { + return [] + } + + if (selectedTag.value === MY_LANGUAGES_TAG.freecodecampValues[0]) { + return getCardTagsValue(userSelectedTags, 'freecodecampValues') + } + return selectedTag.freecodecampValues + } + + const results = useGetFreeCodeCampArticles({ tags: getQueryTags() }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Article[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.reactions - a.reactions) + } + + const renderItem = (item: Article, index: number) => ( + + ) + + const HeaderTitle = () => { + return ( +
+ {meta.label} + trackCardLanguageSelect(meta.analyticsTag, tag.value)} + data={userSelectedTags.map((tag) => ({ + label: tag.label, + value: tag.value, + }))} + /> +
+ ) + } + + return ( + }> + + + ) +} diff --git a/src/features/cards/components/freecodecampCard/index.ts b/src/features/cards/components/freecodecampCard/index.ts new file mode 100644 index 00000000..5859d263 --- /dev/null +++ b/src/features/cards/components/freecodecampCard/index.ts @@ -0,0 +1 @@ +export * from "./FreecodecampCard"; \ No newline at end of file diff --git a/src/features/cards/components/githubCard/GithubCard.tsx b/src/features/cards/components/githubCard/GithubCard.tsx new file mode 100644 index 00000000..69026290 --- /dev/null +++ b/src/features/cards/components/githubCard/GithubCard.tsx @@ -0,0 +1,139 @@ +import { useState, useEffect } from 'react' +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetGithubRepos } from '../../api/getGithubRepos' +import { Repository, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import RepoItem from './RepoItem' +import { Tag } from 'src/features/remoteConfig' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { trackCardLanguageSelect, trackCardDateRangeSelect } from 'src/lib/analytics' +import SelectableCard from 'src/components/SelectableCard' + +const TAGS_MENU_ID = 'tags-menu' +const DATE_RANGE_MENU_ID = 'date-range-id' + +type DateRangeType = { + value: 'daily' | 'monthly' | 'weekly' + label: string +} +const dateRanges: DateRangeType[] = [ + { label: 'the day', value: 'daily' }, + { label: 'the week', value: 'weekly' }, + { label: 'the month', value: 'monthly' }, +] + +export function GithubCard({ meta, withAds }: CardPropsType) { + const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences() + const [selectedTag, setSelectedTag] = useState() + const [selectedDateRange, setSelectedDateRange] = useState(dateRanges[0]) + + useEffect(() => { + if (selectedTag) { + setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label }) + } + }, [meta.label, selectedTag, setCardSettings]) + + useEffect(() => { + if (selectedDateRange) { + setCardSettings(meta.label.toLowerCase(), { language: selectedDateRange.value }) + } + }, [meta.label, selectedDateRange, setCardSettings]) + + const getQueryTags = () => { + if (!selectedTag) { + return [] + } + if (!selectedTag?.githubValues) { + return [] + } + + if (selectedTag.value === MY_LANGUAGES_TAG.githubValues[0]) { + return getCardTagsValue(userSelectedTags, 'githubValues') + } + return selectedTag.githubValues + } + + const results = useGetGithubRepos({ + tags: getQueryTags(), + dateRange: selectedDateRange.value, + config: { + enabled: !!selectedTag?.githubValues, + }, + }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Repository[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.stars - a.stars) + } + + const renderItem = (item: Repository, index: number) => ( + + ) + + const HeaderTitle = () => { + return ( +
+ trackCardLanguageSelect(meta.analyticsTag, tag.value)} + data={userSelectedTags.map((tag) => ({ + label: tag.label, + value: tag.value, + }))} + /> + Repos of + + trackCardDateRangeSelect(meta.analyticsTag, tag.value) + } + cardSettings={cardsSettings?.repos?.dateRange} + data={dateRanges} + /> +
+ ) + } + + const getError = () => { + if (!selectedTag?.githubValues) { + return `Github Trending does not support ${selectedTag?.label || 'the selected tag'}.` + } else if (results.every((result) => result.isError)) { + return 'Failed to load Github trending repositories' + } else { + return undefined + } + } + return ( + }> + + + ) +} diff --git a/src/features/cards/components/githubCard/RepoItem.tsx b/src/features/cards/components/githubCard/RepoItem.tsx new file mode 100644 index 00000000..bec834a9 --- /dev/null +++ b/src/features/cards/components/githubCard/RepoItem.tsx @@ -0,0 +1,60 @@ +import { CardLink, CardItemWithActions } from 'src/components/Elements' + +import { Attributes } from 'src/lib/analytics' +import { ColoredLanguagesBadge } from 'src/components/Elements' +import { VscRepo, VscRepoForked, VscStarFull } from 'react-icons/vsc' +import { BaseItemPropsType, Repository } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' + +function numberWithCommas(x: number | string) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +} + +const RepoItem = ({ item, index, selectedTag, analyticsTag }: BaseItemPropsType) => { + const { listingMode } = useUserPreferences() + + return ( + + + + {item.title} + +

{item.description}

+ {listingMode === 'normal' && ( +
+ + {numberWithCommas(item.stars) && ( + + {numberWithCommas(item.stars)} stars + + )} + {item.forks && ( + + {numberWithCommas(item.forks)} forks + + )} +
+ )} + + } + /> + ) +} + +export default RepoItem diff --git a/src/features/cards/components/githubCard/index.ts b/src/features/cards/components/githubCard/index.ts new file mode 100644 index 00000000..4b3bcca6 --- /dev/null +++ b/src/features/cards/components/githubCard/index.ts @@ -0,0 +1 @@ +export * from "./GithubCard"; \ No newline at end of file diff --git a/src/cards/HNCard.js b/src/features/cards/components/hackernewsCard/ArticleItem.tsx similarity index 53% rename from src/cards/HNCard.js rename to src/features/cards/components/hackernewsCard/ArticleItem.tsx index 80919064..5dbbb717 100644 --- a/src/cards/HNCard.js +++ b/src/features/cards/components/hackernewsCard/ArticleItem.tsx @@ -1,24 +1,20 @@ -import React, {useContext} from 'react'; import { format } from 'timeago.js' import { VscTriangleUp } from 'react-icons/vsc' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import hackernewsApi from '../services/hackernews' import { BiCommentDetail } from 'react-icons/bi' import { MdAccessTime } from 'react-icons/md' import { GoPrimitiveDot } from 'react-icons/go' -import CardLink from '../components/CardLink' -import CardItemWithActions from '../components/CardItemWithActions' -import ClickableItem from '../components/ClickableItem' -import PreferencesContext from '../preferences/PreferencesContext' +import { CardLink, CardItemWithActions, ClickableItem } from 'src/components/Elements' import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' -const StoryItem = ({ item, index }) => { - const { listingMode } = useContext(PreferencesContext) +const ArticleItem = (props: BaseItemPropsType
) => { + const { item, index, analyticsTag } = props + const { listingMode } = useUserPreferences() return ( { {listingMode === 'compact' && ( - {item.score} + {item.reactions} )} @@ -47,22 +43,22 @@ const StoryItem = ({ item, index }) => { {listingMode === 'normal' && (
- {item.score} points + {item.reactions} points - - {format(new Date(item.time * 1000))} + + {format(new Date(item.published_at))} - {item.descendants} comments + {item.comments} comments
)} @@ -72,24 +68,4 @@ const StoryItem = ({ item, index }) => { ) } - -function HNCard({ analyticsTag, label, icon, withAds }) { - const fetchStories = async () => { - return await hackernewsApi.getTopStories() - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - link="https://news.ycombinator.com/" - title={label}> - - - ) -} - -export default HNCard \ No newline at end of file +export default ArticleItem diff --git a/src/features/cards/components/hackernewsCard/HackernewsCard.tsx b/src/features/cards/components/hackernewsCard/HackernewsCard.tsx new file mode 100644 index 00000000..311d44e7 --- /dev/null +++ b/src/features/cards/components/hackernewsCard/HackernewsCard.tsx @@ -0,0 +1,25 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles' +import { Article, CardPropsType } from 'src/types' +import ArticleItem from './ArticleItem' + +export function HackernewsCard({ meta, withAds }: CardPropsType) { + const { data: articles = [], isLoading, error } = useGetHackertNewsArticles() + + const renderItem = (item: Article, index: number) => ( + + ) + + return ( + + + + ) +} diff --git a/src/features/cards/components/hackernewsCard/index.ts b/src/features/cards/components/hackernewsCard/index.ts new file mode 100644 index 00000000..94ea78b2 --- /dev/null +++ b/src/features/cards/components/hackernewsCard/index.ts @@ -0,0 +1 @@ +export * from "./HackernewsCard"; \ No newline at end of file diff --git a/src/features/cards/components/hashnodeCard/ArticleItem.tsx b/src/features/cards/components/hashnodeCard/ArticleItem.tsx new file mode 100644 index 00000000..a3bc88b4 --- /dev/null +++ b/src/features/cards/components/hashnodeCard/ArticleItem.tsx @@ -0,0 +1,71 @@ +import { BiCommentDetail } from 'react-icons/bi' +import { CardLink, CardItemWithActions } from 'src/components/Elements' + +import { BaseItemPropsType, Article } from 'src/types' +import { format } from 'timeago.js' +import { MdAccessTime } from 'react-icons/md' +import { ColoredLanguagesBadge } from 'src/components/Elements' +import { useUserPreferences } from 'src/stores/preferences' + +import { AiTwotoneHeart } from 'react-icons/ai' +import { Attributes } from 'src/lib/analytics' + +const ArticleItem = (props: BaseItemPropsType
) => { + const { item, index, selectedTag, analyticsTag } = props + const { listingMode } = useUserPreferences() + + return ( + + + {listingMode === 'compact' && ( +
+ + {item.reactions || 0} +
+ )} +
{item.title}
+ + + {listingMode === 'normal' && ( + <> +

+ + + {format(new Date(item.published_at))} + + + + {item.comments || 0} comments + + + + {item.reactions || 0} reactions + +

+

+ +

+ + )} + + } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/hashnodeCard/HashnodeCard.tsx b/src/features/cards/components/hashnodeCard/HashnodeCard.tsx new file mode 100644 index 00000000..31eee80b --- /dev/null +++ b/src/features/cards/components/hashnodeCard/HashnodeCard.tsx @@ -0,0 +1,91 @@ +import { useState, useEffect } from 'react' +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetHashnodeArticles } from '../../api/getHashnodeArticles' +import { Article, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ArticleItem from './ArticleItem' +import { Tag } from 'src/features/remoteConfig' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { trackCardLanguageSelect } from 'src/lib/analytics' +import SelectableCard from 'src/components/SelectableCard' + +const HN_MENU_LANGUAGE_ID = 'HN_MENU_LANGUAGE_ID' + +export function HashnodeCard({ withAds, meta }: CardPropsType) { + const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences() + const [selectedTag, setSelectedTag] = useState() + + useEffect(() => { + if (selectedTag) { + setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label }) + } + }, [selectedTag, meta.label, setCardSettings]) + + const getQueryTags = () => { + if (!selectedTag) { + return [] + } + + if (selectedTag.value === MY_LANGUAGES_TAG.hashnodeValues[0]) { + return getCardTagsValue(userSelectedTags, 'hashnodeValues') + } + return selectedTag.hashnodeValues + } + + const results = useGetHashnodeArticles({ tags: getQueryTags() }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Article[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.reactions - a.reactions) + } + + const renderItem = (item: Article, index: number) => ( + + ) + + const HeaderTitle = () => { + return ( +
+ {meta.label} + trackCardLanguageSelect(meta.analyticsTag, tag.value)} + data={userSelectedTags.map((tag) => ({ + label: tag.label, + value: tag.value, + }))} + /> +
+ ) + } + + return ( + }> + + + ) +} diff --git a/src/features/cards/components/hashnodeCard/index.ts b/src/features/cards/components/hashnodeCard/index.ts new file mode 100644 index 00000000..c9899b36 --- /dev/null +++ b/src/features/cards/components/hashnodeCard/index.ts @@ -0,0 +1 @@ +export * from "./HashnodeCard"; \ No newline at end of file diff --git a/src/cards/IndieHackersCard.js b/src/features/cards/components/indiehackersCard/ArticleItem.tsx similarity index 51% rename from src/cards/IndieHackersCard.js rename to src/features/cards/components/indiehackersCard/ArticleItem.tsx index 09c425d4..fa0248fd 100644 --- a/src/cards/IndieHackersCard.js +++ b/src/features/cards/components/indiehackersCard/ArticleItem.tsx @@ -1,42 +1,39 @@ -import React, { useContext } from 'react' +import { format } from 'timeago.js' import { VscTriangleUp } from 'react-icons/vsc' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import indiehackersApi from '../services/indiehackers' import { BiCommentDetail } from 'react-icons/bi' import { MdAccessTime } from 'react-icons/md' -import CardLink from '../components/CardLink' -import CardItemWithActions from '../components/CardItemWithActions' -import PreferencesContext from '../preferences/PreferencesContext' -import { FaChevronUp } from 'react-icons/fa' -import { format } from 'timeago.js' +import { CardLink, CardItemWithActions } from 'src/components/Elements' import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { FaChevronUp } from 'react-icons/fa' +import { useUserPreferences } from 'src/stores/preferences' -const StoryItem = ({ item, index }) => { - const { listingMode } = useContext(PreferencesContext) +export const ArticleItem = (props: BaseItemPropsType
) => { + const { item, index, analyticsTag } = props + const { listingMode } = useUserPreferences() return (

{listingMode === 'compact' && ( - {item.likes} + {item.reactions} )} @@ -46,7 +43,7 @@ const StoryItem = ({ item, index }) => { {listingMode === 'normal' && (

- {item.likes} points + {item.reactions} points {format(new Date(item.published_at))} @@ -61,24 +58,3 @@ const StoryItem = ({ item, index }) => { /> ) } - -function IndieHackersCard({ analyticsTag, label, icon, withAds }) { - const fetchStories = async () => { - return await indiehackersApi.getTopStories() - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - link="https://indiehackers.com/" - title={label}> - - - ) -} - -export default IndieHackersCard diff --git a/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx b/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx new file mode 100644 index 00000000..44a13be7 --- /dev/null +++ b/src/features/cards/components/indiehackersCard/IndiehackersCard.tsx @@ -0,0 +1,25 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetIndieHackersArticles } from '../../api/getIndieHackersArticles' +import { Article, CardPropsType } from 'src/types' +import { ArticleItem } from './ArticleItem' + +export function IndiehackersCard({ meta, withAds }: CardPropsType) { + const { data: articles = [], isLoading, error } = useGetIndieHackersArticles() + + const renderItem = (item: Article, index: number) => ( + + ) + + return ( + + + + ) +} diff --git a/src/features/cards/components/indiehackersCard/index.ts b/src/features/cards/components/indiehackersCard/index.ts new file mode 100644 index 00000000..3a67f961 --- /dev/null +++ b/src/features/cards/components/indiehackersCard/index.ts @@ -0,0 +1 @@ +export * from "./IndiehackersCard"; \ No newline at end of file diff --git a/src/cards/LobstersCard.js b/src/features/cards/components/lobstersCard/ArticleItem.tsx similarity index 52% rename from src/cards/LobstersCard.js rename to src/features/cards/components/lobstersCard/ArticleItem.tsx index 4f322262..1ce325dd 100644 --- a/src/cards/LobstersCard.js +++ b/src/features/cards/components/lobstersCard/ArticleItem.tsx @@ -1,23 +1,19 @@ -import React, { useContext } from 'react' import { format } from 'timeago.js' import { VscTriangleUp } from 'react-icons/vsc' -import CardComponent from '../components/CardComponent' -import ListComponent from '../components/ListComponent' -import lobstersApi from '../services/lobsters' import { BiCommentDetail } from 'react-icons/bi' import { MdAccessTime } from 'react-icons/md' import { GoPrimitiveDot } from 'react-icons/go' -import CardLink from '../components/CardLink' -import CardItemWithActions from '../components/CardItemWithActions' -import ClickableItem from '../components/ClickableItem' -import PreferencesContext from '../preferences/PreferencesContext' +import { CardLink, CardItemWithActions, ClickableItem } from 'src/components/Elements' import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' + +const ArticleItem = ({ item, index, analyticsTag }: BaseItemPropsType
) => { + const { listingMode } = useUserPreferences() -const StoryItem = ({ item, index }) => { - const { listingMode } = useContext(PreferencesContext) return ( { {listingMode === 'compact' && (
- {item.score} + {item.reactions}
)} @@ -46,22 +42,22 @@ const StoryItem = ({ item, index }) => { {listingMode === 'normal' && (
- {item.score} points + {item.reactions} points - - {format(new Date(item.created_at))} + + {format(new Date(item.published_at))} - {item.comment_count} comments + {item.comments} comments
)} @@ -71,23 +67,4 @@ const StoryItem = ({ item, index }) => { ) } -function LobstersCard({ analyticsTag, label, icon, withAds }) { - const fetchStories = async () => { - return await lobstersApi.getTopStories() - } - - const renderItem = (item, index) => ( - - ) - - return ( - {icon}} - link="https://lobste.rs/" - title={label}> - - - ) -} - -export default LobstersCard +export default ArticleItem diff --git a/src/features/cards/components/lobstersCard/LobstersCard.tsx b/src/features/cards/components/lobstersCard/LobstersCard.tsx new file mode 100644 index 00000000..ac9d1a64 --- /dev/null +++ b/src/features/cards/components/lobstersCard/LobstersCard.tsx @@ -0,0 +1,25 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetLobstersArticles } from '../../api/getLobstersArticles' +import { Article, CardPropsType } from 'src/types' +import ArticleItem from './ArticleItem' + +export function LobstersCard({ withAds, meta }: CardPropsType) { + const { data: articles = [], isLoading, error } = useGetLobstersArticles() + + const renderItem = (item: Article, index: number) => ( + + ) + + return ( + + + + ) +} diff --git a/src/features/cards/components/lobstersCard/index.ts b/src/features/cards/components/lobstersCard/index.ts new file mode 100644 index 00000000..d77b425c --- /dev/null +++ b/src/features/cards/components/lobstersCard/index.ts @@ -0,0 +1 @@ +export * from "./LobstersCard"; \ No newline at end of file diff --git a/src/features/cards/components/mediumCard/ArticleItem.tsx b/src/features/cards/components/mediumCard/ArticleItem.tsx new file mode 100644 index 00000000..492ba06c --- /dev/null +++ b/src/features/cards/components/mediumCard/ArticleItem.tsx @@ -0,0 +1,60 @@ +import { BiCommentDetail } from 'react-icons/bi' +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { format } from 'timeago.js' +import { MdAccessTime } from 'react-icons/md' +import { MdWavingHand } from 'react-icons/md' + +const ArticleItem = ({ item, index, selectedTag, analyticsTag }: BaseItemPropsType
) => { + const { listingMode } = useUserPreferences() + + return ( + + + {listingMode === 'compact' && ( +
+ + {item.reactions || 0} +
+ )} +
{item.title}
+ + + {listingMode === 'normal' && ( +

+ + {item.reactions || 0} claps + + + {item.comments || 0} comments + + + + {format(new Date(item.published_at))} + +

+ )} + + } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/mediumCard/MediumCard.tsx b/src/features/cards/components/mediumCard/MediumCard.tsx new file mode 100644 index 00000000..1aea6f11 --- /dev/null +++ b/src/features/cards/components/mediumCard/MediumCard.tsx @@ -0,0 +1,91 @@ +import { useState, useEffect } from 'react' +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetMediumArticles } from '../../api/getMediumArticles' +import { Article, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ArticleItem from './ArticleItem' +import { Tag } from 'src/features/remoteConfig' +import { GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config' +import { trackCardLanguageSelect } from 'src/lib/analytics' +import SelectableCard from 'src/components/SelectableCard' + +const MEDIUM_MENU_LANGUAGE_ID = 'MEDIUM_MENU_LANGUAGE_ID' + +export function MediumCard({ meta, withAds }: CardPropsType) { + const { userSelectedTags, cardsSettings, setCardSettings } = useUserPreferences() + const [selectedTag, setSelectedTag] = useState() + + useEffect(() => { + if (selectedTag) { + setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label }) + } + }, [selectedTag, meta, setCardSettings]) + + const getQueryTags = () => { + if (!selectedTag) { + return [] + } + + if (selectedTag.value === MY_LANGUAGES_TAG.mediumValues[0]) { + return getCardTagsValue(userSelectedTags, 'mediumValues') + } + return selectedTag.mediumValues + } + + const results = useGetMediumArticles({ tags: getQueryTags() }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Article[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.reactions - a.reactions) + } + + const renderItem = (item: Article, index: number) => ( + + ) + + const HeaderTitle = () => { + return ( +
+ {meta.label} + trackCardLanguageSelect(meta.analyticsTag, tag.value)} + data={userSelectedTags.map((tag) => ({ + label: tag.label, + value: tag.value, + }))} + /> +
+ ) + } + + return ( + }> + + + ) +} diff --git a/src/features/cards/components/mediumCard/index.ts b/src/features/cards/components/mediumCard/index.ts new file mode 100644 index 00000000..b9a9008d --- /dev/null +++ b/src/features/cards/components/mediumCard/index.ts @@ -0,0 +1 @@ +export * from "./MediumCard"; \ No newline at end of file diff --git a/src/features/cards/components/producthuntCard/ArticleItem.tsx b/src/features/cards/components/producthuntCard/ArticleItem.tsx new file mode 100644 index 00000000..e1198730 --- /dev/null +++ b/src/features/cards/components/producthuntCard/ArticleItem.tsx @@ -0,0 +1,56 @@ +import { BiCommentDetail } from 'react-icons/bi' +import { VscTriangleUp } from 'react-icons/vsc' +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' + +const ArticleItem = ({ item, index, analyticsTag }: BaseItemPropsType
) => { + const { listingMode } = useUserPreferences() + + return ( + + {item.title} +
+ + {item.title} + +

{item.description}

+ + {listingMode === 'normal' && ( +

+ + {item.comments || 0} comments + + {item.tags && item.tags.length > 0 ? ( + {item.tags[0]} + ) : null} +

+ )} +
+
+ + {item.reactions} +
+
+ } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/producthuntCard/ProducthuntCard.tsx b/src/features/cards/components/producthuntCard/ProducthuntCard.tsx new file mode 100644 index 00000000..64510c9b --- /dev/null +++ b/src/features/cards/components/producthuntCard/ProducthuntCard.tsx @@ -0,0 +1,27 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGeProductHuntProducts } from '../../api/getProductHuntProducts' +import { Article, CardPropsType } from 'src/types' +import { ProductHuntPlaceholder } from 'src/components/placeholders' +import ArticleItem from './ArticleItem' + +export function ProductHuntCard({ meta, withAds }: CardPropsType) { + const { data: products = [], isLoading, error } = useGeProductHuntProducts() + + const renderItem = (item: Article, index: number) => ( + + ) + + return ( + + } + /> + + ) +} diff --git a/src/features/cards/components/producthuntCard/index.ts b/src/features/cards/components/producthuntCard/index.ts new file mode 100644 index 00000000..d2a3cf58 --- /dev/null +++ b/src/features/cards/components/producthuntCard/index.ts @@ -0,0 +1 @@ +export * from "./ProducthuntCard"; \ No newline at end of file diff --git a/src/features/cards/components/redditCard/ArticleItem.tsx b/src/features/cards/components/redditCard/ArticleItem.tsx new file mode 100644 index 00000000..c354d62e --- /dev/null +++ b/src/features/cards/components/redditCard/ArticleItem.tsx @@ -0,0 +1,90 @@ +import { BiCommentDetail } from 'react-icons/bi' +import { VscTriangleUp } from 'react-icons/vsc' +import { CardLink, CardItemWithActions } from 'src/components/Elements' +import { Attributes } from 'src/lib/analytics' +import { BaseItemPropsType, Article } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { format } from 'timeago.js' +import { MdAccessTime } from 'react-icons/md' +import { GoPrimitiveDot } from 'react-icons/go' +import { BsArrowReturnRight } from 'react-icons/bs' + +type PostFlairPropsType = { + text: string + textColor?: string + bgColor?: string +} + +const PostFlair = ({ text, bgColor, textColor }: PostFlairPropsType) => { + const color = textColor === 'light' ? '#fff' : '#000' + const backgroundColor = bgColor ? bgColor : '#dadada' + return ( +
+ {text} +
+ ) +} + +const ArticleItem = ({ item, index, analyticsTag }: BaseItemPropsType
) => { + const { listingMode } = useUserPreferences() + return ( + + + {listingMode === 'compact' && ( +
+ + {item.reactions} +
+ )} + +
+ {item.flair_text && ( + + )} + {item.title} +
+ + +
+ {listingMode === 'normal' && ( + <> + + {item.reactions} points + + + {format(new Date(item.published_at))} + + + {item.comments} comments + + + {`r/${item.subreddit}`} + + + )} +
+ + } + /> + ) +} + +export default ArticleItem diff --git a/src/features/cards/components/redditCard/RedditCard.tsx b/src/features/cards/components/redditCard/RedditCard.tsx new file mode 100644 index 00000000..51901d93 --- /dev/null +++ b/src/features/cards/components/redditCard/RedditCard.tsx @@ -0,0 +1,41 @@ +import { Card } from 'src/components/Elements' +import { ListComponent } from 'src/components/List' +import { useGetRedditArticles } from '../../api/getRedditArticles' +import { Article, CardPropsType } from 'src/types' +import { useUserPreferences } from 'src/stores/preferences' +import { getCardTagsValue } from 'src/utils/DataEnhancement' +import ArticleItem from './ArticleItem' + +export function RedditCard({ withAds, meta }: CardPropsType) { + const { userSelectedTags } = useUserPreferences() + + const tags = getCardTagsValue(userSelectedTags, 'redditValues') + + const results = useGetRedditArticles({ tags }) + + const getIsLoading = () => results.some((result) => result.isLoading) + + const getData = () => { + return results + .reduce((acc: Article[], curr) => { + if (!curr.data) return acc + return [...acc, ...curr.data] + }, []) + .sort((a, b) => b.reactions - a.reactions) + } + + const renderItem = (item: Article, index: number) => ( + + ) + + return ( + + + + ) +} diff --git a/src/features/cards/components/redditCard/index.ts b/src/features/cards/components/redditCard/index.ts new file mode 100644 index 00000000..03fcaf25 --- /dev/null +++ b/src/features/cards/components/redditCard/index.ts @@ -0,0 +1 @@ +export * from "./RedditCard"; \ No newline at end of file diff --git a/src/features/cards/index.ts b/src/features/cards/index.ts new file mode 100644 index 00000000..a0e9b13d --- /dev/null +++ b/src/features/cards/index.ts @@ -0,0 +1,11 @@ +export * from "./components/conferencesCard" +export * from "./components/devtoCard" +export * from "./components/freecodecampCard" +export * from "./components/githubCard" +export * from "./components/hackernewsCard" +export * from "./components/hashnodeCard" +export * from "./components/indiehackersCard" +export * from "./components/lobstersCard" +export * from "./components/mediumCard" +export * from "./components/producthuntCard" +export * from "./components/redditCard" \ No newline at end of file diff --git a/src/features/changelog/api/getVersions.ts b/src/features/changelog/api/getVersions.ts new file mode 100644 index 00000000..833408e9 --- /dev/null +++ b/src/features/changelog/api/getVersions.ts @@ -0,0 +1,26 @@ +import { useQuery } from '@tanstack/react-query'; +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'; +import { Version } from "../types"; +import { axios } from 'src/lib/axios'; + +const getAd = async (): Promise => { + + return axios.get('https://api.github.com/repos/medyo/hackertab.dev/releases') + .then(response => { + const versions = response as unknown as Version[]; + return versions + }) +} + +type QueryFnType = typeof getAd; + +type UseGetAdOptions = { + config?: QueryConfig; +}; +export const useGetVersions = ({ config }: UseGetAdOptions = {}) => { + return useQuery>({ + ...config, + queryKey: ['versions'], + queryFn: () => getAd(), + }); +} \ No newline at end of file diff --git a/src/features/changelog/components/Changelog.tsx b/src/features/changelog/components/Changelog.tsx new file mode 100644 index 00000000..e3d5547f --- /dev/null +++ b/src/features/changelog/components/Changelog.tsx @@ -0,0 +1,89 @@ +import React, { useEffect, useState } from 'react' +import ReactTooltip from 'react-tooltip' +import { HiBell } from 'react-icons/hi' +import ReactMarkdown from 'react-markdown' +import { format } from 'timeago.js' +import BeatLoader from 'react-spinners/BeatLoader' +import {useGetVersions} from "../api/getVersions"; +import {useChangelogStore} from "../stores/changelog"; +import {getAppVersion} from "src/utils/Os"; +import { trackChangeLogOpen } from 'src/lib/analytics' + +export const Changelog = () => { + const tooltipId = 'tl-1' + const [tooltipShown, setTooltipShown] = useState(false) + const { + isLoading, + isError, + data: versions, + } = useGetVersions({ + config: { + enabled: tooltipShown, + }, + }) + + const { lastReadVersion, setVersionAsRead } = useChangelogStore() + + const isChangelogRead = (): boolean => { + return lastReadVersion === getAppVersion() + } + + useEffect(() => { + const currentVersion = getAppVersion() + if (tooltipShown) { + trackChangeLogOpen() + + if (currentVersion) { + setVersionAsRead(currentVersion) + } + } + }, [tooltipShown, setVersionAsRead]) + + return ( + <> + { + setTooltipShown(true) + }} + place="bottom" + className="changelogTooltip scrollable" + globalEventOff="click"> + {isLoading ? ( +
+ +
+ ) : isError || !versions.length ? ( +

Failed to load the changelog

+ ) : ( + versions.map((item) => { + return ( +
+
+ window.open(item.html_url, '_blank')}> + {item.name} + + {format(new Date(item.published_at))} +
+
+ +
+
+ ) + }) + )} + + + {isChangelogRead() ? : `New`} + + + ) +} \ No newline at end of file diff --git a/src/features/changelog/index.ts b/src/features/changelog/index.ts new file mode 100644 index 00000000..7d017bc4 --- /dev/null +++ b/src/features/changelog/index.ts @@ -0,0 +1,2 @@ +export * from "./types" +export * from "./components/Changelog" \ No newline at end of file diff --git a/src/features/changelog/stores/changelog.ts b/src/features/changelog/stores/changelog.ts new file mode 100644 index 00000000..b4462a03 --- /dev/null +++ b/src/features/changelog/stores/changelog.ts @@ -0,0 +1,17 @@ +import create from 'zustand'; +import { persist } from 'zustand/middleware' + +type ChangelogVersionStore = { + lastReadVersion: string | undefined | null; + setVersionAsRead: (versionName: string | undefined | null) => void; +}; + +export const useChangelogStore = create(persist((set) => ({ + lastReadVersion: undefined, + setVersionAsRead: (versionName: string | undefined | null) => + set(() => ({ + lastReadVersion: versionName, + })) +}),{ + name: 'changelog_storage', +})); diff --git a/src/features/changelog/types/index.ts b/src/features/changelog/types/index.ts new file mode 100644 index 00000000..ad2a7088 --- /dev/null +++ b/src/features/changelog/types/index.ts @@ -0,0 +1,6 @@ +export type Version = { + name: string; + published_at: string; + body: string; + html_url: string; +} \ No newline at end of file diff --git a/src/features/remoteConfig/api/getRemoteConfig.ts b/src/features/remoteConfig/api/getRemoteConfig.ts new file mode 100644 index 00000000..f2e4d058 --- /dev/null +++ b/src/features/remoteConfig/api/getRemoteConfig.ts @@ -0,0 +1,25 @@ +import { useQuery } from '@tanstack/react-query'; +import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'; +import { RemoteConfig } from "../types"; +import { axios } from 'src/lib/axios'; +import { useRemoteConfigStore } from "../stores/remoteConfig"; + +const getAd = async (): Promise => { + return axios.get('/data/remoteConfiguration.json'); +} + +type QueryFnType = typeof getAd; + +type UseGetAdOptions = { + config?: QueryConfig; +}; +export const useGetRemoteConfig = ({ config }: UseGetAdOptions = {}) => { + return useQuery>({ + onSuccess(remoteConfig) { + useRemoteConfigStore.getState().setRemoteConfig(remoteConfig); + }, + ...config, + queryKey: ['remote-config'], + queryFn: () => getAd(), + }); +} \ No newline at end of file diff --git a/src/features/remoteConfig/index.ts b/src/features/remoteConfig/index.ts new file mode 100644 index 00000000..6709ae9d --- /dev/null +++ b/src/features/remoteConfig/index.ts @@ -0,0 +1,3 @@ +export * from './providers/ConfigurationWrapper'; +export * from './types'; +export * from './stores/remoteConfig'; \ No newline at end of file diff --git a/src/features/remoteConfig/providers/ConfigurationWrapper.tsx b/src/features/remoteConfig/providers/ConfigurationWrapper.tsx new file mode 100644 index 00000000..d7e4d43c --- /dev/null +++ b/src/features/remoteConfig/providers/ConfigurationWrapper.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { useAsyncError } from 'src/hooks/useAsyncError' +import { useGetRemoteConfig } from '../api/getRemoteConfig' +import BeatLoader from 'react-spinners/BeatLoader' + +type ConfigurationWrapperProps = { + children: React.ReactNode +} + +export const ConfigurationWrapper = ({ children }: ConfigurationWrapperProps) => { + const { + isLoading, + isError, + data: remoteConfig, + } = useGetRemoteConfig({ + config: { + staleTime: 3600000, //1 Hour + cacheTime: 86400000, // 1 Day + }, + }) + const throwError = useAsyncError() + + if (isLoading) { + return ( +
+ +
+ ) + } + + if (isError || !remoteConfig) { + throwError('Could not fetch configuration data, Make sure you are connected to the internet') + } + + return <>{children} +} diff --git a/src/features/remoteConfig/stores/remoteConfig.ts b/src/features/remoteConfig/stores/remoteConfig.ts new file mode 100644 index 00000000..697c0c50 --- /dev/null +++ b/src/features/remoteConfig/stores/remoteConfig.ts @@ -0,0 +1,34 @@ +import create from 'zustand'; +import { persist } from 'zustand/middleware' +import { RemoteConfig, Tag, MarketingBannerConfig } from "../types"; + +type ChangelogVersionStore = { + supportedTags: Tag[]; + refresh_rate: number | false; + marketingBannerConfig?: MarketingBannerConfig; + setRemoteConfig: (remoteConfig: RemoteConfig) => void; +}; + +export const useRemoteConfigStore = create(persist((set) => ({ + marketingBannerConfig: undefined, + refresh_rate: false, + supportedTags: [ + { + value: 'javascript', + label: 'Javascript', + githubValues: ['javascript'], + confsValues: ['javascript'], + devtoValues: ['javascript'], + hashnodeValues: ['javascript'], + mediumValues: ['javascript'], + redditValues: ['javascript'], + freecodecampValues: ['javascript'] + }, + ], + setRemoteConfig: (remoteConfig: RemoteConfig) => + set(() => { + return { ...remoteConfig } + }), +}), { + name: 'remote_config_storage', +})); diff --git a/src/features/remoteConfig/types/index.ts b/src/features/remoteConfig/types/index.ts new file mode 100644 index 00000000..326c8498 --- /dev/null +++ b/src/features/remoteConfig/types/index.ts @@ -0,0 +1,32 @@ +export type Tag = { + confsValues: string[] + devtoValues: string[] + hashnodeValues: string[] + redditValues: string[] + githubValues: string[] + freecodecampValues: string[] + mediumValues: string[] + label: string + value: string +} + +export type TagValuesFieldType = + | 'confsValues' + | 'devtoValues' + | 'hashnodeValues' + | 'redditValues' + | 'githubValues' + | 'freecodecampValues' + | 'mediumValues' + +export type MarketingBannerConfig = { + show: boolean + campaign_name: string + htmlContent: string +} + +export type RemoteConfig = { + supportedTags: Tag[] + refresh_rate: number | false, + marketingBannerConfig?: MarketingBannerConfig +} diff --git a/src/settings/SettingsModal.js b/src/features/settings/components/SettingsModal.tsx similarity index 59% rename from src/settings/SettingsModal.js rename to src/features/settings/components/SettingsModal.tsx index 309901e2..94818351 100644 --- a/src/settings/SettingsModal.js +++ b/src/features/settings/components/SettingsModal.tsx @@ -1,14 +1,13 @@ -import React, { useContext, useState } from "react"; -import ReactModal from 'react-modal'; -import "react-toggle/style.css" -import { VscClose } from "react-icons/vsc" -import Select from 'react-select' +import React, { useState } from 'react' +import ReactModal from 'react-modal' +import 'react-toggle/style.css' +import { VscClose } from 'react-icons/vsc' +import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select' +import { SearchEngineType } from 'src/types' import Toggle from 'react-toggle' -import '../App.css'; -import './settings.css'; -import PreferencesContext from '../preferences/PreferencesContext'; -import ConfigurationContext from '../configuration/ConfigurationContext'; -import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, APP } from '../Constants' +import './settings.css' +import { useUserPreferences } from 'src/stores/preferences' +import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, supportLink } from 'src/config' import { trackLanguageAdd, trackLanguageRemove, @@ -17,68 +16,119 @@ import { trackSearchEngineSelect, trackListingModeSelect, trackTabTarget, + trackThemeSelect, + identifyUserTheme, + identifyUserLinksInNewTab, + identifyUserSearchEngine, + identifyUserCards, + identifyUserListingMode, + identifyUserLanguages, } from 'src/lib/analytics' +import { useRemoteConfigStore } from 'src/features/remoteConfig' +import { Tag } from 'src/features/remoteConfig' -function SettingsModal({ showSettings, setShowSettings }) { - const { supportedTags } = useContext(ConfigurationContext) - const preferences = useContext(PreferencesContext) - const { dispatcher, cards, userSelectedTags, openLinksNewTab, listingMode, theme, searchEngine } = - preferences +type SettingsModalProps = { + showSettings: boolean + setShowSettings: (show: boolean) => void +} + +type OptionType = { + value: string + label: string +} + +export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalProps) => { + const { supportedTags } = useRemoteConfigStore() + + const { + cards, + userSelectedTags, + openLinksNewTab, + listingMode, + theme, + searchEngine, + setTheme, + setListingMode, + setSearchEngine, + setOpenLinksNewTab, + setCards, + setTags, + } = useUserPreferences() const [selectedCards, setSelectedCards] = useState(cards) const handleCloseModal = () => { setShowSettings(false) } - const onTagsSelectChange = (tags, metas) => { + const onTagsSelectChange = (tags: MultiValue, metas: ActionMeta) => { switch (metas.action) { case 'select-option': - trackLanguageAdd(metas.option.label) + if (metas.option?.label) { + trackLanguageAdd(metas.option.label) + } break case 'remove-value': - trackLanguageRemove(metas.removedValue.label) + if (metas.removedValue?.label) { + trackLanguageRemove(metas.removedValue.label) + } + break } - - dispatcher({ type: 'setUserSelectedTags', value: tags }) + setTags(tags as Tag[]) + identifyUserLanguages(tags.map((tag) => tag.value)) } - const onlistingModeChange = (e) => { + const onlistingModeChange = (e: React.ChangeEvent) => { const value = e.target.checked ? 'compact' : 'normal' trackListingModeSelect(value) - dispatcher({ type: 'changelistingMode', value }) + identifyUserListingMode(value) + setListingMode(value) } - const onCardSelectChange = (cards, metas) => { + const onCardSelectChange = (cards: MultiValue, metas: ActionMeta) => { switch (metas.action) { case 'select-option': - trackSourceAdd(metas.option.label) + if (metas.option?.label) { + trackSourceAdd(metas.option.label) + } break case 'remove-value': - trackSourceRemove(metas.removedValue.label) + if (metas.removedValue?.label) { + trackSourceRemove(metas.removedValue.label) + } break } let newCards = cards.map((c, index) => { return { id: index, name: c.value } }) + identifyUserCards(newCards.map((card) => card.name)) setSelectedCards(newCards) - dispatcher({ type: 'setCards', value: newCards }) + setCards(newCards) } - const onSearchEngineSelectChange = (value) => { + const onSearchEngineSelectChange = (value: SingleValue) => { + if (!value) { + return + } + + identifyUserSearchEngine(value.label) trackSearchEngineSelect(value.label) - dispatcher({ type: 'setSearchEngine', value }) + setSearchEngine(value.label) } - const onOpenLinksNewTabChange = (e) => { + const onOpenLinksNewTabChange = (e: React.ChangeEvent) => { const checked = e.target.checked trackTabTarget(checked) - dispatcher({ type: 'setOpenLinksNewTab', value: checked }) + identifyUserLinksInNewTab(checked) + setOpenLinksNewTab(checked) } - const onDarkModeChange = (e) => { - dispatcher({ type: 'toggleTheme' }) + const onDarkModeChange = () => { + const newTheme = theme === 'dark' ? 'light' : 'dark' + setTheme(newTheme) + trackThemeSelect(newTheme) + identifyUserTheme(newTheme) } return ( @@ -114,7 +164,7 @@ function SettingsModal({ showSettings, setShowSettings }) { />

Missing language or technology? create an issue{' '} - window.open(APP.supportLink, '_blank')}> + here

@@ -127,7 +177,7 @@ function SettingsModal({ showSettings, setShowSettings }) { e.label == searchEngine)} + value={SUPPORTED_SEARCH_ENGINES.find((e) => e.label === searchEngine)} isMulti={false} isClearable={false} isSearchable={false} @@ -184,7 +234,7 @@ function SettingsModal({ showSettings, setShowSettings }) { />

Missing a search engine? create an issue{' '} - window.open(APP.supportLink, '_blank')}> + here

@@ -194,5 +244,3 @@ function SettingsModal({ showSettings, setShowSettings }) { ) } - -export default SettingsModal diff --git a/src/settings/settings.css b/src/features/settings/components/settings.css similarity index 100% rename from src/settings/settings.css rename to src/features/settings/components/settings.css diff --git a/src/features/settings/index.ts b/src/features/settings/index.ts new file mode 100644 index 00000000..bcd0f2c8 --- /dev/null +++ b/src/features/settings/index.ts @@ -0,0 +1 @@ +export * from "./components/SettingsModal" \ No newline at end of file diff --git a/src/hooks/useAsyncError.js b/src/hooks/useAsyncError.js deleted file mode 100644 index 248c17d7..00000000 --- a/src/hooks/useAsyncError.js +++ /dev/null @@ -1,14 +0,0 @@ -import React, { useCallback, useState } from 'react' - -const useAsyncError = () => { - const [_, setError] = useState() - return useCallback( - (e) => { - setError(() => { - throw e - }) - }, - [setError] - ) -} -export default useAsyncError diff --git a/src/hooks/useAsyncError.tsx b/src/hooks/useAsyncError.tsx new file mode 100644 index 00000000..231f2565 --- /dev/null +++ b/src/hooks/useAsyncError.tsx @@ -0,0 +1,13 @@ +import { useCallback, useState } from 'react' + +export const useAsyncError = () => { + const [, setError] = useState() + return useCallback( + (e: string) => { + setError(() => { + throw e + }) + }, + [setError] + ) +} diff --git a/src/index.js b/src/index.js index bf86ba54..9a9eab88 100644 --- a/src/index.js +++ b/src/index.js @@ -1,20 +1,33 @@ import React from 'react'; import ReactDOM from 'react-dom'; import 'normalize.css'; -import './index.css'; +import 'src/assets/index.css' import App from './App'; -import AppWrapper from './configuration/AppWrapper' -import AppErrorBoundary from './configuration/AppErrorBoundary' -import ConfigurationWrapper from './configuration/ConfigurationWrapper' +import AppWrapper from 'src/providers/AppWrapper' +import {AppErrorBoundary} from 'src/providers/AppErrorBoundary' +import { ConfigurationWrapper } from 'src/features/remoteConfig/' +import { QueryClientProvider } from '@tanstack/react-query' +import { queryClient } from 'src/lib/react-query' +import * as Sentry from '@sentry/react' +import { SENTRY_DSN } from './config' +import { BrowserTracing } from '@sentry/tracing' + +Sentry.init({ + dsn: SENTRY_DSN, + integrations: [new BrowserTracing()], + tracesSampleRate: 1.0, +}) ReactDOM.render( - - - - - + + + + + + + , document.getElementById('root') diff --git a/src/lib/analytics.ts b/src/lib/analytics.ts index 422abc3d..bf170a1a 100644 --- a/src/lib/analytics.ts +++ b/src/lib/analytics.ts @@ -1,7 +1,9 @@ -import AppStorage from '../services/localStorage'; +import AppStorage from './localStorage'; import { init, track, identify, Identify } from '@amplitude/analytics-browser' import { isDevelopment } from 'src/utils/Environment'; -import { ANALYTICS_SDK_KEY, ANALYTICS_ENDPOINT, LS_ANALYTICS_ID_KEY } from 'src/Constants' +import { ANALYTICS_SDK_KEY, ANALYTICS_ENDPOINT, LS_ANALYTICS_ID_KEY } from 'src/config' +import {getAppVersion} from "src/utils/Os"; +import { useUserPreferences } from "src/stores/preferences"; enum Objects { PAGE = 'Page', @@ -14,6 +16,7 @@ enum Objects { CARD = 'Card', SEARCH_ENGINE = 'Search Engine', LISTING_MODE = 'Listing Mode', + CHANGE_LOG = 'Change Log', } enum Verbs { @@ -60,14 +63,16 @@ export const setupAnalytics = () => { }) } -export const setupIdentification = (state: any) => { +export const setupIdentification = () => { + const { userSelectedTags, theme, cards, listingMode, openLinksNewTab, searchEngine, } = useUserPreferences.getState(); + identifyUserProperty(Attributes.RESOLUTION, getScreenResolution()) - identifyUserLanguages(state.userSelectedTags.map((tag: any) => tag.value)) - identifyUserTheme(state.theme) - identifyUserCards(state.cards.map((card: any) => card.name)) - identifyUserListingMode(state.listingMode) - identifyUserSearchEngine(state.searchEngine) - identifyUserLinksInNewTab(state.searchEngine) + identifyUserLanguages(userSelectedTags.map((tag: any) => tag.value)) + identifyUserTheme(theme) + identifyUserCards(cards.map((card: any) => card.name)) + identifyUserListingMode(listingMode) + identifyUserSearchEngine(searchEngine) + identifyUserLinksInNewTab(openLinksNewTab) } export const trackPageView = (pageName: string) => { @@ -171,7 +176,7 @@ export const trackLinkUnBookmark = (attributes: { } export const trackLinkOpen = (attributes: { - [P: string]: string; + [P: string]: string | number | undefined; }) => { trackEvent({ @@ -205,10 +210,17 @@ export const trackCardDateRangeSelect = (sourceName: string, dateRange: string) }) } +export const trackChangeLogOpen = () => { + trackEvent({ + object: Objects.CHANGE_LOG, + verb: Verbs.OPEN + }) +} + // Identification export const identifyUserLanguages = (languages: string[]) => { - identifyUserProperty(Attributes.LANGUAGE, languages) + identifyUserProperty(Attributes.LANGUAGES, languages) } export const identifyUserListingMode = (listingMode: "compact" | "normal") => { @@ -232,26 +244,32 @@ export const identifyUserLinksInNewTab = (enabled: boolean) => { type trackEventProps = { object: Exclude, verb: Exclude, - attributes: { + attributes?: { //[P in Exclude]?: string; - [P: string]: string; + [P: string]: string | number | undefined; } } const trackEvent = ({ object, verb, attributes }: trackEventProps) => { try { const event = `${object}${_SEP_}${verb}` - Object.keys(attributes).map(attr => { - const value = attributes[attr]; - if (typeof value !== "number") { - attributes[attr] = value.toLowerCase(); - } - return attr; - }); - // Remove http and www from links - if (Object.keys(attributes).some((attr) => attr == Attributes.LINK)) { - attributes[Attributes.LINK] = attributes[Attributes.LINK].replace(/(https*:\/\/[www.]*)/, '') + if (attributes) { + Object.keys(attributes).map(attr => { + const value = attributes[attr]; + if (!value) { + return null; + } + if (typeof value !== "number") { + attributes[attr] = value.toLowerCase(); + } + return attr; + }); + + // Remove http and www from links + if (Object.keys(attributes).some((attr) => attr === Attributes.LINK)) { + attributes[Attributes.LINK] = (attributes[Attributes.LINK] as string).replace(/(https*:\/\/[www.]*)/, '') + } } if (isDevelopment()) { @@ -305,14 +323,7 @@ const getRandomUserId = () => { return userId } -const getAppVersion = (): string | undefined => { - try { - var manifestData = chrome.runtime.getManifest() - return manifestData.version - } catch (e) { - return undefined - } -} + const getScreenResolution = (): string => { const realWidth = window.screen.width const realHeight = window.screen.height diff --git a/src/lib/axios.ts b/src/lib/axios.ts new file mode 100644 index 00000000..f6ec5b4a --- /dev/null +++ b/src/lib/axios.ts @@ -0,0 +1,13 @@ +import Axios from 'axios'; +import { ResponseInterceptor } from "./interceptors/ResponseInterceptor"; +const packageFile = require('../../package.json') + +const getBaseApi = (fallback: string | null = null) => { + return process.env.NODE_ENV === 'production' ? packageFile.proxy : fallback +} + + +export const axios = Axios.create({ + baseURL: getBaseApi() +}); +axios.interceptors.response.use(ResponseInterceptor); \ No newline at end of file diff --git a/src/lib/interceptors/ResponseInterceptor.ts b/src/lib/interceptors/ResponseInterceptor.ts new file mode 100644 index 00000000..e555b421 --- /dev/null +++ b/src/lib/interceptors/ResponseInterceptor.ts @@ -0,0 +1,7 @@ +import { AxiosResponse } from 'axios'; + +export const ResponseInterceptor = ( + response: AxiosResponse +): AxiosResponse => { + return response.data; +}; \ No newline at end of file diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts new file mode 100644 index 00000000..fe51878c --- /dev/null +++ b/src/lib/localStorage.ts @@ -0,0 +1,54 @@ +export const canUseLocalStorage = () => { + try { + window.localStorage.setItem('test', 'test'); + window.localStorage.removeItem('test'); + return true; + } + catch (e) { + return false; + } +}; + +export default class AppStorage { + static getItem(key: string, defaultValue: string | null = null) { + let value + if (!canUseLocalStorage()) { + return defaultValue + } + try { + value = window.localStorage.getItem(key) + } catch (e) { + value = defaultValue + } + return value + } + + static setItem(key: string, value: string) { + try { + if (typeof value != 'string') { + value = JSON.stringify(value) + } + window.localStorage.setItem(key, value) + return true + } catch (e) { + return false + } + } + + static removeItem(key: string) { + try { + window.localStorage.removeItem(key) + return true + } catch (e) { + return false + } + } + + static getKeys() { + try { + return Object.keys(window.localStorage) + } catch { + return [] + } + } +} diff --git a/src/lib/react-query.ts b/src/lib/react-query.ts new file mode 100644 index 00000000..9b9749ca --- /dev/null +++ b/src/lib/react-query.ts @@ -0,0 +1,28 @@ +import { AxiosError } from 'axios'; +import { QueryClient, UseQueryOptions, UseMutationOptions, DefaultOptions } from '@tanstack/react-query'; +import { PromiseValue } from 'type-fest'; + +const queryConfig: DefaultOptions = { + queries: { + useErrorBoundary: false, + refetchOnWindowFocus: false, + retry: false, + }, +}; + +export const queryClient = new QueryClient({ defaultOptions: queryConfig }); + +export type ExtractFnReturnType any> = PromiseValue< + ReturnType +>; + +export type QueryConfig any> = Omit< + UseQueryOptions>, + 'queryKey' | 'queryFn' +>; + +export type MutationConfig any> = UseMutationOptions< + ExtractFnReturnType, + AxiosError, + Parameters[0] +>; diff --git a/src/pages/Page.css b/src/pages/Page.css deleted file mode 100644 index d9a3d644..00000000 --- a/src/pages/Page.css +++ /dev/null @@ -1,22 +0,0 @@ -.Page { - max-width: 1024px; - margin: 0 auto; - color: var(--primary-text-color); -} -.Page .title { - color: var(--primary-text-color) -} -.Page button { - background: var(--card-background-color); - border:none; - border-radius: 20px; - border: 1px solid var(--card-border-color); - padding: 8px 16px; - color: var(--primary-text-color); - cursor: pointer; -} - -.Page .buttonIcon { - position: relative; - vertical-align: middle; -} \ No newline at end of file diff --git a/src/preferences/AppReducer.js b/src/preferences/AppReducer.js deleted file mode 100644 index da49ec14..00000000 --- a/src/preferences/AppReducer.js +++ /dev/null @@ -1,100 +0,0 @@ - -import { LS_PREFERENCES_KEY } from '../Constants' -import AppStorage from '../services/localStorage' -import { - trackThemeSelect, - identifyUserLanguages, - identifyUserCards, - identifyUserListingMode, - identifyUserTheme, - identifyUserLinksInNewTab, - identifyUserSearchEngine, -} from 'src/lib/analytics' - -const AppReducer = (state, action) => { - let newState = { ...state } - const { value } = action - - switch (action.type) { - case 'setUserSelectedTags': - identifyUserLanguages(value.map((tag) => tag.value)) - // check duplication. - newState = { - ...newState, - userSelectedTags: value, - } - break - case 'setCards': - identifyUserCards(value.map((card) => card.name)) - newState = { ...state, cards: value } - break - case 'setChangelogMeta': - newState = { ...state, changelogMeta: value } - break - case 'toggleTheme': - let theme = value - if (!theme) { - theme = state.theme === 'dark' ? 'light' : 'dark' - } - - trackThemeSelect(theme) - identifyUserTheme(theme) - newState = { ...newState, theme } - break - case 'setOpenLinksNewTab': - newState = { - ...newState, - openLinksNewTab: value, - } - identifyUserLinksInNewTab(value) - break - case 'changelistingMode': - identifyUserListingMode(value) - newState = { ...newState, listingMode: value } - break - case 'bookmarkItem': - const exists = newState.userBookmarks.some( - (bm) => bm.source === value.source && bm.url === value.url - ) - if (!exists) { - newState.userBookmarks.unshift(value) - } - break - case 'unBookmarkItem': - newState.userBookmarks = newState.userBookmarks.filter( - (bm) => bm.source !== value.source || bm.url !== value.url - ) - break - case 'setSearchEngine': - newState = { ...newState, searchEngine: value.label } - identifyUserSearchEngine(value.label) - break - case 'setCardSettings': - newState = { - ...newState, - cardsSettings: { - ...newState?.cardsSettings, - [value.card]: { ...newState?.cardsSettings?.[value.card], ...value }, - }, - } - break - default: - throw new Error() - } - - const storageData = { - userSelectedTags: newState.userSelectedTags.map((tag) => tag.value), - theme: newState.theme, - cards: newState.cards, - openLinksNewTab: newState.openLinksNewTab, - listingMode: newState.listingMode, - changelogMeta: newState.changelogMeta, - userBookmarks: newState.userBookmarks, - searchEngine: newState.searchEngine, - cardsSettings: newState.cardsSettings, - } - AppStorage.setItem(LS_PREFERENCES_KEY, storageData) - return newState -} - -export default AppReducer; \ No newline at end of file diff --git a/src/preferences/PreferencesContext.js b/src/preferences/PreferencesContext.js deleted file mode 100644 index 8e8b859e..00000000 --- a/src/preferences/PreferencesContext.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' - -const PreferencesContext = React.createContext({ - userSelectedTags: [], - dispatcher: null -}); - - -export const PreferencesProvider = PreferencesContext.Provider - -export default PreferencesContext - - diff --git a/src/configuration/AppErrorBoundary.js b/src/providers/AppErrorBoundary.tsx similarity index 61% rename from src/configuration/AppErrorBoundary.js rename to src/providers/AppErrorBoundary.tsx index 0fcd10da..15f296d2 100644 --- a/src/configuration/AppErrorBoundary.js +++ b/src/providers/AppErrorBoundary.tsx @@ -1,16 +1,16 @@ -import React, { useContext } from 'react' -import { ErrorBoundary } from 'react-error-boundary' +import React from 'react' +import { ErrorBoundary} from 'react-error-boundary' import { AiFillBug } from 'react-icons/ai' import { WiRefresh } from 'react-icons/wi' -import '../pages/Page.css' -export default function AppErrorBoundary({ children }) { - function ErrorFallback({ error, resetErrorBoundary }) { +export const AppErrorBoundary = ({ children }: {children: React.ReactNode}) => { + + const ErrorFallback = ({ error, resetErrorBoundary }: {error: Error, resetErrorBoundary: () => void}) => { return (

Sorry there was a problem loading this page.

-

{error}

+

{error.message}

diff --git a/src/providers/AppWrapper.tsx b/src/providers/AppWrapper.tsx new file mode 100644 index 00000000..23f8c90d --- /dev/null +++ b/src/providers/AppWrapper.tsx @@ -0,0 +1,17 @@ +import React, { useState, useEffect } from 'react' +import { migrateToNewStorage } from 'src/utils/StorageMigration' + +export default function AppWrapper({ children }: { children: React.ReactNode }) { + const [appReady, setAppReady] = useState(false) + + useEffect(() => { + try { + migrateToNewStorage() + } catch { + } finally { + setAppReady(true) + } + }, []) + + return appReady && children +} diff --git a/src/services/cachedRequest.js b/src/services/cachedRequest.js deleted file mode 100644 index 91d56a21..00000000 --- a/src/services/cachedRequest.js +++ /dev/null @@ -1,40 +0,0 @@ -import axios from 'axios'; -import AppStorage from "./localStorage"; -import { getBaseApi } from '../utils/DataUtils' - -const axiosInstance = axios.create({ - baseURL: getBaseApi(null), -}) -const isWebVersion = !!+process.env.REACT_APP_WEB_BUILD - -const cachedRequest = async (url) => { - const cachedResponse = await AppStorage.getItem(url) - let headers = {} - let response - if (!isWebVersion && cachedResponse) { - let etag = JSON.parse(cachedResponse).headers.etag - headers = { - 'If-None-Match': etag, - } - } - - try { - response = await axiosInstance.get(url, { headers }) - if (response.headers.etag) { - AppStorage.setItem(url, response) - } - } catch (error) { - if (!error.response || error.response.status !== 304) { - return null //throw error - } - if (!cachedResponse) { - throw 'Network Failed' - } - response = error.response - response.status = 200 - response.data = JSON.parse(cachedResponse).data - } - return response.data -} - -export default cachedRequest \ No newline at end of file diff --git a/src/services/confstech.js b/src/services/confstech.js deleted file mode 100644 index 34931bf9..00000000 --- a/src/services/confstech.js +++ /dev/null @@ -1,13 +0,0 @@ -import cachedRequest from './cachedRequest'; - - -const getTagConfs = async (tag) => { - const currentYear = new Date().getFullYear(); - const url = `https://raw.githubusercontent.com/tech-conferences/conference-data/main/conferences/${currentYear}/${tag}.json` - const data = await cachedRequest(url); - return data -} - -export default { - getTagConfs: getTagConfs, -} diff --git a/src/services/devto.js b/src/services/devto.js deleted file mode 100644 index 38ca16bb..00000000 --- a/src/services/devto.js +++ /dev/null @@ -1,25 +0,0 @@ -import cachedRequest from './cachedRequest'; - - -const getArticlesByCount = async (tag, perPage) => { - let url = `/devto/articles?state=rising&per_page=${perPage}` - if (tag) { - url += `&tag=${tag}` - } - const data = await cachedRequest(url) - return data -} - -const getArticles = async (tag) => { - let url = `/devto/articles?state=rising&per_page=30` - if (tag) { - url += `&tag=${tag}` - } - const data = await cachedRequest(url) - return data -} - -export default { - getArticles: getArticles, - getArticlesByCount: getArticlesByCount, -} diff --git a/src/services/freecodecamp.js b/src/services/freecodecamp.js deleted file mode 100644 index d9cbf623..00000000 --- a/src/services/freecodecamp.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest' - -const getArticles = async (tag) => { - const url = `/data/freecodecamp/${tag}.json` - const data = await cachedRequest(url) - return data -} - -export default { - getArticles: getArticles, -} diff --git a/src/services/github.js b/src/services/github.js deleted file mode 100644 index 6e5979bc..00000000 --- a/src/services/github.js +++ /dev/null @@ -1,12 +0,0 @@ -import cachedRequest from './cachedRequest'; - -const getTrending = async (language, since) => { - const url = `/data/github/${language}/${since}.json`; - const data = await cachedRequest(url); - return data - -} - -export default { - getTrending: getTrending, -} diff --git a/src/services/hackernews.js b/src/services/hackernews.js deleted file mode 100644 index 3d0c73e4..00000000 --- a/src/services/hackernews.js +++ /dev/null @@ -1,12 +0,0 @@ -import cachedRequest from './cachedRequest'; - - -const getTopStories = async () => { - const url = `/data/hackernews.json`; - const data = await cachedRequest(url); - return data -} - -export default { - getTopStories: getTopStories, -} diff --git a/src/services/hashnode.js b/src/services/hashnode.js deleted file mode 100644 index e6c3e877..00000000 --- a/src/services/hashnode.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest' - -const getArticles = async (tag) => { - const url = `/data/hashnode/${tag}.json` - const data = await cachedRequest(url) - return data -} - -export default { - getArticles: getArticles, -} diff --git a/src/services/indiehackers.js b/src/services/indiehackers.js deleted file mode 100644 index cfc5474a..00000000 --- a/src/services/indiehackers.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest' - -const getTopStories = async () => { - const url = `/data/indiehackers.json` - const data = await cachedRequest(url) - return data -} - -export default { - getTopStories: getTopStories, -} diff --git a/src/services/lobsters.js b/src/services/lobsters.js deleted file mode 100644 index 47f65d75..00000000 --- a/src/services/lobsters.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest' - -const getTopStories = async () => { - const url = `/lobsters/hottest.json` - const data = await cachedRequest(url) - return data -} - -export default { - getTopStories: getTopStories, -} diff --git a/src/services/localStorage.js b/src/services/localStorage.js deleted file mode 100644 index 358bee59..00000000 --- a/src/services/localStorage.js +++ /dev/null @@ -1,50 +0,0 @@ -import localforage from 'localforage'; - -export const canUseLocalStorage = () => { - try { - window.localStorage.setItem('test', 'test'); - window.localStorage.removeItem('test'); - return true; - } - catch (e) { - return false; - } -}; - - -export default class AppStorage { - static getItem(key, defaultValue = null) { - let value; - if (!canUseLocalStorage()) { - return defaultValue - } - try { - value = window.localStorage.getItem(key); - } catch (e) { - value = defaultValue - } - return value - } - - static setItem(key, value) { - try { - if (typeof (value) != "string") { - value = JSON.stringify(value) - } - window.localStorage.setItem(key, value); - return true; - } - catch (e) { - return false; - } - } - - static removeItem(key) { - try { - window.localStorage.removeItem(key); - return true; - } catch (e) { - return false; - } - } -} diff --git a/src/services/medium.js b/src/services/medium.js deleted file mode 100644 index cfa7b4dd..00000000 --- a/src/services/medium.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest' - -const getArticles = async (tag) => { - const url = `/data/medium/${tag}.json` - const data = await cachedRequest(url) - return data -} - -export default { - getArticles: getArticles, -} diff --git a/src/services/os.js b/src/services/os.js deleted file mode 100644 index 7a43787d..00000000 --- a/src/services/os.js +++ /dev/null @@ -1,13 +0,0 @@ -const getOSMode = () => { - let osMode = 'light'; - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - osMode = 'dark'; - } - - return osMode; -} - - -export { - getOSMode, -} diff --git a/src/services/producthunt.js b/src/services/producthunt.js deleted file mode 100644 index 000aa1aa..00000000 --- a/src/services/producthunt.js +++ /dev/null @@ -1,12 +0,0 @@ -import cachedRequest from './cachedRequest'; - - -const getTodayProducts = async () => { - const url = `/data/producthunt.json`; - const data = await cachedRequest(url); - return data -} - -export default { - getTodayProducts: getTodayProducts, -} diff --git a/src/services/reddit.js b/src/services/reddit.js deleted file mode 100644 index 69a5ef54..00000000 --- a/src/services/reddit.js +++ /dev/null @@ -1,13 +0,0 @@ -import cachedRequest from './cachedRequest'; - - -const getTopPostsBySubReddit = async (subReddit) => { - const url = `/reddit/${subReddit}/top/.json?t=day`; - const { data : { children } } = await cachedRequest(url) - return children -} - - -export default { - getTopPostsBySubReddit: getTopPostsBySubReddit, -} \ No newline at end of file diff --git a/src/services/remoteConfiguration.js b/src/services/remoteConfiguration.js deleted file mode 100644 index 690e9c2d..00000000 --- a/src/services/remoteConfiguration.js +++ /dev/null @@ -1,11 +0,0 @@ -import cachedRequest from './cachedRequest'; - -const getRemoteConfiguration = async () => { - const url = `/data/remoteConfiguration.json` - const data = await cachedRequest(url, 60) - return data -} - -export default { - getRemoteConfiguration: getRemoteConfiguration, -} diff --git a/src/stores/bookmarks.ts b/src/stores/bookmarks.ts new file mode 100644 index 00000000..bd3b681d --- /dev/null +++ b/src/stores/bookmarks.ts @@ -0,0 +1,23 @@ +import create from 'zustand'; +import { persist } from 'zustand/middleware' +import { BookmarkedPost } from "src/features/bookmarks" + +type BookmarksState = { + userBookmarks: BookmarkedPost[] +}; + +type BookmarksActions = { + bookmarkPost: (post: BookmarkedPost) => void; + unbookmarkPost: (post: BookmarkedPost) => void; + initState: (state: BookmarksState) => void; +} + + +export const useBookmarks = create(persist((set) => ({ + userBookmarks: [], + bookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: [post, ...state.userBookmarks] })), + unbookmarkPost: (post: BookmarkedPost) => set((state) => ({ userBookmarks: state.userBookmarks.filter((bookmarkedPost) => bookmarkedPost.url !== post.url), })), + initState: (newState: BookmarksState) => set(() => ({ userBookmarks: newState.userBookmarks })) +}), { + name: 'bookmarks_storage' +})); diff --git a/src/stores/preferences.ts b/src/stores/preferences.ts new file mode 100644 index 00000000..4d7a4a4b --- /dev/null +++ b/src/stores/preferences.ts @@ -0,0 +1,80 @@ +import { enhanceTags } from 'src/utils/DataEnhancement' +import create from 'zustand' +import { persist } from 'zustand/middleware' +import { SelectedCard, Theme, ListingMode, CardSettingsType } from '../types' +import { Tag } from 'src/features/remoteConfig' + +export type UserPreferencesState = { + userSelectedTags: Tag[] + theme: Theme + openLinksNewTab: boolean + listingMode: ListingMode + searchEngine: string + cards: SelectedCard[] + cardsSettings: Record +} + +type UserPreferencesStoreActions = { + initState: (newState: UserPreferencesState) => void + setTheme: (theme: Theme) => void + setSearchEngine: (theme: string) => void + setOpenLinksNewTab: (openLinksNewTab: boolean) => void + setListingMode: (listingMode: ListingMode) => void + setCards: (selectedCards: SelectedCard[]) => void + setTags: (selectedTags: Tag[]) => void + setCardSettings: (card: string, settings: CardSettingsType) => void +} + +export const useUserPreferences = create( + persist( + (set) => ({ + userSelectedTags: [], + cardsSettings: {}, + theme: 'dark', + searchEngine: 'google', + listingMode: 'normal', + openLinksNewTab: true, + cards: [ + { id: 0, name: 'github' }, + { id: 1, name: 'hackernews' }, + { id: 2, name: 'devto' }, + { id: 3, name: 'producthunt' }, + ], + setSearchEngine: (searchEngine: string) => set({ searchEngine: searchEngine }), + setListingMode: (listingMode: ListingMode) => set({ listingMode: listingMode }), + setTheme: (theme: Theme) => set({ theme: theme }), + setOpenLinksNewTab: (openLinksNewTab: boolean) => set({ openLinksNewTab: openLinksNewTab }), + setCards: (selectedCards: SelectedCard[]) => set({ cards: selectedCards }), + setTags: (selectedTags: Tag[]) => set({ userSelectedTags: selectedTags }), + initState: (newState: UserPreferencesState) => + set(() => { + return { ...newState } + }), + setCardSettings: (card: string, settings: CardSettingsType) => + set((state) => ({ + cardsSettings: { + ...state.cardsSettings, + [card]: { ...state.cardsSettings[card], ...settings }, + }, + })), + }), + { + name: 'preferences_storage', + serialize: ({ state, version }) => { + const newState = { + ...state, + userSelectedTags: state.userSelectedTags.map((tag) => tag.value), + } + return JSON.stringify({ state: newState, version }) + }, + deserialize: (stateStr) => { + let { state, version } = JSON.parse(stateStr) + state = { + ...state, + userSelectedTags: enhanceTags(state.userSelectedTags), + } + return { state, version } + }, + } + ) +) diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 00000000..58add397 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,93 @@ +import { Tag } from "src/features/remoteConfig" +import { SupportedCard } from "src/config"; + +export type SearchEngineType = { + url: string + label: string +} + +export type SelectedCard = { + id: number, + name: string +} + +export type SelectedTag = { + label: string, + value: string +} + +export type UserPreferences = { + userSelectedTags: Tag[] + theme: "light" | "dark", + openLinksNewTab: boolean, + listingMode: "normal" | "compact", + searchEngine: string, + cards: SelectedCard[] +} + +export type SearchEngine = { + url: string, + label: string, +} + +export type Theme = "dark" | "light"; +export type ListingMode = "normal" | "compact"; + +export type BaseEntry = { + id: string + url: string + title: string +} + +export type Article = BaseEntry & { + published_at: number + tags: Array + reactions: number + comments: number + image_url: string + source: string + original_url?: string + comments_url?: string + description?: string + subreddit?: string + flair_text?: string + flair_background_color?: string + flair_text_color?: string +} + +export type Repository = BaseEntry & { + programmingLanguage: string + stars: number + source: string + description: string + owner: string + forks: number + starsInDateRange?: number + name: string +} + +export type Conference = BaseEntry & { + start_date: number + end_date: number + tag: string + online: Boolean + city?: string + country?: string +} + +export type CardPropsType = { + meta: SupportedCard, + withAds: boolean +} + +export type BaseItemPropsType = { + index: number + item: T + analyticsTag: string + selectedTag?: SelectedTag +} + +export type CardSettingsType = { + language: string + dateRange?: string +} \ No newline at end of file diff --git a/src/utils/DataEnhancement.ts b/src/utils/DataEnhancement.ts new file mode 100644 index 00000000..a73f464c --- /dev/null +++ b/src/utils/DataEnhancement.ts @@ -0,0 +1,18 @@ +import { Tag, useRemoteConfigStore, TagValuesFieldType } from 'src/features/remoteConfig' + +export const enhanceTags = (tags: string[]): Tag[] => { + const savedTags = useRemoteConfigStore.getState().supportedTags + + return tags + .map((tag) => savedTags.find((st) => st.value.toLowerCase() === tag.toLocaleString())) + .filter(Boolean) as Tag[] +} + + +export const getCardTagsValue = (tags: Tag[], valuesField: TagValuesFieldType): string[] => { + return tags.reduce((acc: string[], curr) => { + if (!curr[valuesField] || curr[valuesField].length === 0) return acc + acc = [...acc, ...curr[valuesField]] + return acc + }, []) +} diff --git a/src/utils/DataUtils.js b/src/utils/DataUtils.js deleted file mode 100644 index d7ea61fc..00000000 --- a/src/utils/DataUtils.js +++ /dev/null @@ -1,28 +0,0 @@ -const packageFile = require('../../package.json') - -export const mergeMultipleDataSources = async (promises, maxCount) => { - let promisesRequests = await Promise.allSettled(promises) - let promisesValues = promisesRequests - .map((res) => { - let value = res.value - if (res.status === 'rejected') { - value = [] - } - return value - }) - .filter(Boolean) - .filter((value) => value.length > 1) - const nbrTags = promisesValues.length - let minLength = Math.min(maxCount, ...promisesValues.map((v) => v.length)) - const data = [] - for (let index = 0; index < minLength; index++) { - for (let i = 0; i < nbrTags; i++) { - data.push(promisesValues[i][index]) - } - } - return data -} - -export const getBaseApi = (fallback) => { - return process.env.NODE_ENV === 'production' ? packageFile.proxy : fallback -} diff --git a/src/utils/Os.ts b/src/utils/Os.ts new file mode 100644 index 00000000..6e28dc76 --- /dev/null +++ b/src/utils/Os.ts @@ -0,0 +1,8 @@ +export const getAppVersion = (): string | undefined => { + try { + var manifestData = chrome.runtime.getManifest() + return manifestData.version + } catch (e) { + return undefined + } +} diff --git a/src/utils/StorageMigration.ts b/src/utils/StorageMigration.ts new file mode 100644 index 00000000..5cbfb5f6 --- /dev/null +++ b/src/utils/StorageMigration.ts @@ -0,0 +1,41 @@ +import AppStorage from 'src/lib/localStorage' +import { useUserPreferences } from 'src/stores/preferences' +import { useBookmarks } from 'src/stores/bookmarks' +import { enhanceTags } from './DataEnhancement' + +export const migrateToNewStorage = () => { + let preferences = AppStorage.getItem('hackerTabPrefs') + console.error('Here') + //userSelectedTags: supportedTags.filter((t) => t.value === 'javascript'), + + // Remove legacy cached requests + const legacyStorageKeys = AppStorage.getKeys() + for (let key of legacyStorageKeys) { + if (key.startsWith("/data/") || key.startsWith("/devto/")) { + AppStorage.removeItem(key) + } + } + if (!preferences) { + return + } + + let { userBookmarks, changelogMeta, ...parsedPreferences } = JSON.parse(preferences) + + // Migrate Bookmarkds + if (userBookmarks && !!userBookmarks.length) { + useBookmarks.getState().initState({ userBookmarks }) + } + + // Migrate preferences + if (parsedPreferences) { + parsedPreferences = { + ...parsedPreferences, + userSelectedTags: enhanceTags(parsedPreferences.userSelectedTags), + } + useUserPreferences.getState().initState(parsedPreferences) + } + + // Remove old LocalStorage item + AppStorage.removeItem('hackerTabPrefs') + +} diff --git a/src/utils/UrlUtils.ts b/src/utils/UrlUtils.ts new file mode 100644 index 00000000..6df0a2a6 --- /dev/null +++ b/src/utils/UrlUtils.ts @@ -0,0 +1,7 @@ +export const addHttpsProtocol = (url: string): string => { + url = decodeURIComponent(url) + if (!/^(?:f|ht)tps?:\/\//.test(url)) { + url = 'https:' + url + } + return url +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d2911c9a..78dfc2f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -130,6 +130,15 @@ json5 "^2.2.1" semver "^6.3.0" +"@babel/eslint-parser@^7.16.3": + version "7.19.1" + resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz#4f68f6b0825489e00a24b41b6a1ae35414ecd2f4" + integrity sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ== + dependencies: + "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1" + eslint-visitor-keys "^2.1.0" + semver "^6.3.0" + "@babel/generator@^7.12.1", "@babel/generator@^7.19.3", "@babel/generator@^7.19.4": version "7.19.5" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.5.tgz#da3f4b301c8086717eee9cab14da91b1fa5dcca7" @@ -1263,7 +1272,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== -"@emotion/react@^11.1.1": +"@emotion/react@^11.8.1": version "11.10.4" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.4.tgz#9dc6bccbda5d70ff68fdb204746c0e8b13a79199" integrity sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA== @@ -1364,6 +1373,18 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8" + integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA== + +"@floating-ui/dom@^1.0.1": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.3.tgz#b439c8a66436c2cae8d97e889f0b76cce757a6ec" + integrity sha512-6H1kwjkOZKabApNtXRiYHvMmYJToJ1DV7rQ3xc/WJpOABhQIOJJOdz2AOejj8X+gcybaFmBpisVTZxBZAM3V0w== + dependencies: + "@floating-ui/core" "^1.0.1" + "@gar/promisify@^1.0.1": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -1684,6 +1705,13 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": + version "5.1.1-v1" + resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129" + integrity sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg== + dependencies: + eslint-scope "5.1.1" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -1766,6 +1794,64 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rushstack/eslint-patch@^1.1.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728" + integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg== + +"@sentry/browser@7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.17.4.tgz#2e4ad09180905929b823d01e2a029f10933c0a03" + integrity sha512-cNLQ/6ea0KOZyLKXGLTdgfqWYdg43+T/uF9D/hmc6kp/5qXm2dR3FcFRZX6OicaENM3dXvSoBIF6bSWmcszRtQ== + dependencies: + "@sentry/core" "7.17.4" + "@sentry/types" "7.17.4" + "@sentry/utils" "7.17.4" + tslib "^1.9.3" + +"@sentry/core@7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.17.4.tgz#62686e1b2baf4e7ba3d9ca57d91d2dfc643b8250" + integrity sha512-U3ABSJBKGK8dJ01nEG2+qNOb6Wv7U3VqoajiZxfV4lpPWNFGCoEhiTytxBlFTOCmdUH8209zSZiWJZaDLy+TSA== + dependencies: + "@sentry/types" "7.17.4" + "@sentry/utils" "7.17.4" + tslib "^1.9.3" + +"@sentry/react@^7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.17.4.tgz#1d2c752841ace0561043be6a863de9fc7437f64c" + integrity sha512-Hw8lgeCgUthgVQ5OG24/iZWGNXnxodVfCmfngeIfqUWeFgQUae1V833GNkYZCiE5j2yjNVh3LL2bXA8PnvMCEg== + dependencies: + "@sentry/browser" "7.17.4" + "@sentry/types" "7.17.4" + "@sentry/utils" "7.17.4" + hoist-non-react-statics "^3.3.2" + tslib "^1.9.3" + +"@sentry/tracing@^7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.17.4.tgz#1254f4eb7397e1134248de1dade33d2fec864005" + integrity sha512-9Fz6DI16ddnd970mlB5MiCNRSmSXp4SVZ1Yv3L22oS3kQeNxjBTE+htYNwJzSPrQp9aL/LqTYwlnrCy24u9XQA== + dependencies: + "@sentry/core" "7.17.4" + "@sentry/types" "7.17.4" + "@sentry/utils" "7.17.4" + tslib "^1.9.3" + +"@sentry/types@7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.17.4.tgz#476522bc988989101e7aee9eee3c3f8f16fa59ea" + integrity sha512-QJj8vO4AtxuzQfJIzDnECSmoxwnS+WJsm1Ta2Cwdy+TUCBJyWpW7aIJJGta76zb9gNPGb3UcAbeEjhMJBJeRMQ== + +"@sentry/utils@7.17.4": + version "7.17.4" + resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.17.4.tgz#b8f4fb6a329765b97668b34f6d397e8de2169fef" + integrity sha512-ioG0ANy8uiWzig82/e7cc+6C9UOxkyBzJDi1luoQVDH6P0/PvM8GzVU+1iUVUipf8+OL1Jh09GrWnd5wLm3XNQ== + dependencies: + "@sentry/types" "7.17.4" + tslib "^1.9.3" + "@sinclair/typebox@^0.24.1": version "0.24.46" resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.46.tgz#57501b58023776dbbae9e25619146286440be34c" @@ -1896,6 +1982,19 @@ "@svgr/plugin-svgo" "^5.4.0" loader-utils "^2.0.0" +"@tanstack/query-core@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.13.0.tgz#89153096d1fce42c0294fa1d1ae4b3e72aa5353b" + integrity sha512-PzmLQcEgC4rl2OzkiPHYPC9O79DFcMGaKsOzDEP+U4PJ+tbkcEP+Z+FQDlfvX8mCwYC7UNH7hXrQ5EdkGlJjVg== + +"@tanstack/react-query@^4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.13.0.tgz#13797d590a6c0708545881e38aea5eb39b960c28" + integrity sha512-dI/5hJ/pGQ74P5hxBLC9h6K0/Cap2T3k0ZjjjFLBCNnohDYgl7LNmMopzrRzBHk2mMjf2hgXHIzcKNG8GOZ5hg== + dependencies: + "@tanstack/query-core" "4.13.0" + use-sync-external-store "^1.2.0" + "@testing-library/dom@^7.28.1": version "7.31.2" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a" @@ -2018,6 +2117,13 @@ dependencies: "@types/ms" "*" +"@types/dompurify@^2.3.4": + version "2.3.4" + resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.3.4.tgz#94e997e30338ea24d4c8d08beca91ce4dd17a1b4" + integrity sha512-EXzDatIb5EspL2eb/xPGmaC8pePcTHrkDCONjeisusLFrVfl38Pjea/R0YJGu3k9ZQadSvMqW0WXPI2hEo2Ajg== + dependencies: + "@types/trusted-types" "*" + "@types/eslint@^7.29.0": version "7.29.0" resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.29.0.tgz#e56ddc8e542815272720bb0b4ccc2aff9c3e1c78" @@ -2107,7 +2213,7 @@ expect "^29.0.0" pretty-format "^29.0.0" -"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8": +"@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9": version "7.0.11" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== @@ -2176,6 +2282,27 @@ dependencies: "@types/react" "*" +"@types/react-modal@^3.13.1": + version "3.13.1" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a" + integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg== + dependencies: + "@types/react" "*" + +"@types/react-toggle@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@types/react-toggle/-/react-toggle-4.0.3.tgz#8db98ac8d2c5e8c03c2d3a42027555c1cd2289da" + integrity sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA== + dependencies: + "@types/react" "*" + +"@types/react-transition-group@^4.4.0": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^18.0.21": version "18.0.21" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.21.tgz#b8209e9626bb00a34c76f55482697edd2b43cc67" @@ -2197,6 +2324,11 @@ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== +"@types/semver@^7.3.12": + version "7.3.12" + resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.12.tgz#920447fdd78d76b19de0438b7f60df3c4a80bf1c" + integrity sha512-WwA1MW0++RfXmCr12xeYOOC5baSC9mSb0ZqCquFzKhcoF4TvHu5MKOuXsncgZcpVFhB1pXd5hZmM0ryAoCp12A== + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9" @@ -2219,6 +2351,11 @@ dependencies: "@types/jest" "*" +"@types/trusted-types@*": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" + integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== + "@types/uglify-js@*": version "3.17.0" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.17.0.tgz#95271e7abe0bf7094c60284f76ee43232aef43b9" @@ -2285,6 +2422,20 @@ semver "^7.3.5" tsutils "^3.21.0" +"@typescript-eslint/eslint-plugin@^5.40.1", "@typescript-eslint/eslint-plugin@^5.5.0": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.40.1.tgz#3203a6ff396b1194083faaa6e5110c401201d7d5" + integrity sha512-FsWboKkWdytGiXT5O1/R9j37YgcjO8MKHSUmWnIEjVaz0krHkplPnYi7mwdb+5+cs0toFNQb0HIrN7zONdIEWg== + dependencies: + "@typescript-eslint/scope-manager" "5.40.1" + "@typescript-eslint/type-utils" "5.40.1" + "@typescript-eslint/utils" "5.40.1" + debug "^4.3.4" + ignore "^5.2.0" + regexpp "^3.2.0" + semver "^7.3.7" + tsutils "^3.21.0" + "@typescript-eslint/experimental-utils@4.33.0", "@typescript-eslint/experimental-utils@^4.0.1": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd" @@ -2308,6 +2459,13 @@ eslint-scope "^5.0.0" eslint-utils "^2.0.0" +"@typescript-eslint/experimental-utils@^5.0.0": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.40.1.tgz#2fa6b4f768d42fe7174c34cd02fa79717e4e2bfe" + integrity sha512-lynjgnQuoCgxtYgYWjoQqijk0kYQNiztnVhoqha3N0kMYFVPURidzCq2vn9XvUUu2XxP130ZRKVDKyeGa2bhbw== + dependencies: + "@typescript-eslint/utils" "5.40.1" + "@typescript-eslint/parser@^4.5.0": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899" @@ -2318,6 +2476,16 @@ "@typescript-eslint/typescript-estree" "4.33.0" debug "^4.3.1" +"@typescript-eslint/parser@^5.40.1", "@typescript-eslint/parser@^5.5.0": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.40.1.tgz#e7f8295dd8154d0d37d661ddd8e2f0ecfdee28dd" + integrity sha512-IK6x55va5w4YvXd4b3VrXQPldV9vQTxi5ov+g4pMANsXPTXOcfjx08CRR1Dfrcc51syPtXHF5bgLlMHYFrvQtg== + dependencies: + "@typescript-eslint/scope-manager" "5.40.1" + "@typescript-eslint/types" "5.40.1" + "@typescript-eslint/typescript-estree" "5.40.1" + debug "^4.3.4" + "@typescript-eslint/scope-manager@4.33.0": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3" @@ -2326,6 +2494,24 @@ "@typescript-eslint/types" "4.33.0" "@typescript-eslint/visitor-keys" "4.33.0" +"@typescript-eslint/scope-manager@5.40.1": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.40.1.tgz#a7a5197dfd234622a2421ea590ee0ccc02e18dfe" + integrity sha512-jkn4xsJiUQucI16OLCXrLRXDZ3afKhOIqXs4R3O+M00hdQLKR58WuyXPZZjhKLFCEP2g+TXdBRtLQ33UfAdRUg== + dependencies: + "@typescript-eslint/types" "5.40.1" + "@typescript-eslint/visitor-keys" "5.40.1" + +"@typescript-eslint/type-utils@5.40.1": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.40.1.tgz#091e4ce3bebbdb68f4980bae9dee2e4e1725f601" + integrity sha512-DLAs+AHQOe6n5LRraXiv27IYPhleF0ldEmx6yBqBgBLaNRKTkffhV1RPsjoJBhVup2zHxfaRtan8/YRBgYhU9Q== + dependencies: + "@typescript-eslint/typescript-estree" "5.40.1" + "@typescript-eslint/utils" "5.40.1" + debug "^4.3.4" + tsutils "^3.21.0" + "@typescript-eslint/types@3.10.1": version "3.10.1" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727" @@ -2336,6 +2522,11 @@ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72" integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ== +"@typescript-eslint/types@5.40.1": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.40.1.tgz#de37f4f64de731ee454bb2085d71030aa832f749" + integrity sha512-Icg9kiuVJSwdzSQvtdGspOlWNjVDnF3qVIKXdJ103o36yRprdl3Ge5cABQx+csx960nuMF21v8qvO31v9t3OHw== + "@typescript-eslint/typescript-estree@3.10.1": version "3.10.1" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853" @@ -2363,6 +2554,33 @@ semver "^7.3.5" tsutils "^3.21.0" +"@typescript-eslint/typescript-estree@5.40.1": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.40.1.tgz#9a7d25492f02c69882ce5e0cd1857b0c55645d72" + integrity sha512-5QTP/nW5+60jBcEPfXy/EZL01qrl9GZtbgDZtDPlfW5zj/zjNrdI2B5zMUHmOsfvOr2cWqwVdWjobCiHcedmQA== + dependencies: + "@typescript-eslint/types" "5.40.1" + "@typescript-eslint/visitor-keys" "5.40.1" + debug "^4.3.4" + globby "^11.1.0" + is-glob "^4.0.3" + semver "^7.3.7" + tsutils "^3.21.0" + +"@typescript-eslint/utils@5.40.1", "@typescript-eslint/utils@^5.10.0", "@typescript-eslint/utils@^5.13.0": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.40.1.tgz#3204fb73a559d3b7bab7dc9d3c44487c2734a9ca" + integrity sha512-a2TAVScoX9fjryNrW6BZRnreDUszxqm9eQ9Esv8n5nXApMW0zeANUYlwh/DED04SC/ifuBvXgZpIK5xeJHQ3aw== + dependencies: + "@types/json-schema" "^7.0.9" + "@types/semver" "^7.3.12" + "@typescript-eslint/scope-manager" "5.40.1" + "@typescript-eslint/types" "5.40.1" + "@typescript-eslint/typescript-estree" "5.40.1" + eslint-scope "^5.1.1" + eslint-utils "^3.0.0" + semver "^7.3.7" + "@typescript-eslint/visitor-keys@3.10.1": version "3.10.1" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931" @@ -2378,6 +2596,14 @@ "@typescript-eslint/types" "4.33.0" eslint-visitor-keys "^2.0.0" +"@typescript-eslint/visitor-keys@5.40.1": + version "5.40.1" + resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.40.1.tgz#f3d2bf5af192f4432b84cec6fdcb387193518754" + integrity sha512-A2DGmeZ+FMja0geX5rww+DpvILpwo1OsiQs0M+joPWJYsiEFBLsH0y1oFymPNul6Z5okSmHpP4ivkc2N0Cgfkw== + dependencies: + "@typescript-eslint/types" "5.40.1" + eslint-visitor-keys "^3.3.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -3145,7 +3371,7 @@ babel-preset-jest@^26.6.2: babel-plugin-jest-hoist "^26.6.2" babel-preset-current-node-syntax "^1.0.0" -babel-preset-react-app@^10.0.0: +babel-preset-react-app@^10.0.0, babel-preset-react-app@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.1.tgz#ed6005a20a24f2c88521809fa9aea99903751584" integrity sha512-b0D9IZ1WhhCWkrTXyFuIIgqGzSkRIH5D5AmB0bXbzYAB1OBAwHcUeyWW2LorutLWF5btNo/N7r/cIdmvvKJlYg== @@ -3945,7 +4171,7 @@ concat-stream@^1.5.0: readable-stream "^2.2.2" typedarray "^0.0.6" -confusing-browser-globals@^1.0.10: +confusing-browser-globals@^1.0.10, confusing-browser-globals@^1.0.11: version "1.0.11" resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81" integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA== @@ -3962,7 +4188,7 @@ console-browserify@^1.1.0: constants-browserify@^1.0.0: version "1.0.0" - resolved "https://registry.yarnpkg.com/Constants-browserify/-/Constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" + resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ== content-disposition@0.5.4: @@ -4466,7 +4692,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: dependencies: ms "2.0.0" -debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1: +debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -5062,6 +5288,37 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" +eslint-config-airbnb-base@^15.0.0: + version "15.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236" + integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig== + dependencies: + confusing-browser-globals "^1.0.10" + object.assign "^4.1.2" + object.entries "^1.1.5" + semver "^6.3.0" + +eslint-config-airbnb-typescript@^17.0.0: + version "17.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.0.0.tgz#360dbcf810b26bbcf2ff716198465775f1c49a07" + integrity sha512-elNiuzD0kPAPTXjFWg+lE24nMdHMtuxgYoD30OyMD6yrW1AhFZPAg27VX7d3tzOErw+dgJTNWfRSDqEcXb4V0g== + dependencies: + eslint-config-airbnb-base "^15.0.0" + +eslint-config-airbnb@19.0.4: + version "19.0.4" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz#84d4c3490ad70a0ffa571138ebcdea6ab085fdc3" + integrity sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew== + dependencies: + eslint-config-airbnb-base "^15.0.0" + object.assign "^4.1.2" + object.entries "^1.1.5" + +eslint-config-prettier@^8.5.0: + version "8.5.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1" + integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q== + eslint-config-react-app@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e" @@ -5069,6 +5326,26 @@ eslint-config-react-app@^6.0.0: dependencies: confusing-browser-globals "^1.0.10" +eslint-config-react-app@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-7.0.1.tgz#73ba3929978001c5c86274c017ea57eb5fa644b4" + integrity sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA== + dependencies: + "@babel/core" "^7.16.0" + "@babel/eslint-parser" "^7.16.3" + "@rushstack/eslint-patch" "^1.1.0" + "@typescript-eslint/eslint-plugin" "^5.5.0" + "@typescript-eslint/parser" "^5.5.0" + babel-preset-react-app "^10.0.1" + confusing-browser-globals "^1.0.11" + eslint-plugin-flowtype "^8.0.3" + eslint-plugin-import "^2.25.3" + eslint-plugin-jest "^25.3.0" + eslint-plugin-jsx-a11y "^6.5.1" + eslint-plugin-react "^7.27.1" + eslint-plugin-react-hooks "^4.3.0" + eslint-plugin-testing-library "^5.0.1" + eslint-import-resolver-node@^0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd" @@ -5092,7 +5369,15 @@ eslint-plugin-flowtype@^5.2.0: lodash "^4.17.15" string-natural-compare "^3.0.1" -eslint-plugin-import@^2.22.1: +eslint-plugin-flowtype@^8.0.3: + version "8.0.3" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-8.0.3.tgz#e1557e37118f24734aa3122e7536a038d34a4912" + integrity sha512-dX8l6qUL6O+fYPtpNRideCFSpmWOUVx5QcaGLVqe/vlDiBSe4vYljDWDETwnyFzpl7By/WVIu6rcrniCgH9BqQ== + dependencies: + lodash "^4.17.21" + string-natural-compare "^3.0.1" + +eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.25.3: version "2.26.0" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b" integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA== @@ -5118,7 +5403,21 @@ eslint-plugin-jest@^24.1.0: dependencies: "@typescript-eslint/experimental-utils" "^4.0.1" -eslint-plugin-jsx-a11y@^6.3.1: +eslint-plugin-jest@^25.3.0: + version "25.7.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz#ff4ac97520b53a96187bad9c9814e7d00de09a6a" + integrity sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ== + dependencies: + "@typescript-eslint/experimental-utils" "^5.0.0" + +eslint-plugin-jest@^27.1.3: + version "27.1.3" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-27.1.3.tgz#9f359eeac0c720a825f658e7e261a9eef869dc8d" + integrity sha512-7DrIfYRQPa7JQd1Le8G/BJsfYHVUKQdJQ/6vULSp/4NjKZmSMJ/605G2hhScEra++SiH68zPEjLnrO74nHrMLg== + dependencies: + "@typescript-eslint/utils" "^5.10.0" + +eslint-plugin-jsx-a11y@^6.3.1, eslint-plugin-jsx-a11y@^6.5.1: version "6.6.1" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff" integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q== @@ -5137,12 +5436,19 @@ eslint-plugin-jsx-a11y@^6.3.1: minimatch "^3.1.2" semver "^6.3.0" -eslint-plugin-react-hooks@^4.2.0: +eslint-plugin-prettier@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b" + integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ== + dependencies: + prettier-linter-helpers "^1.0.0" + +eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.3.0: version "4.6.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3" integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g== -eslint-plugin-react@^7.21.5: +eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.28.0: version "7.31.10" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz#6782c2c7fe91c09e715d536067644bbb9491419a" integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA== @@ -5169,15 +5475,14 @@ eslint-plugin-testing-library@^3.9.2: dependencies: "@typescript-eslint/experimental-utils" "^3.10.1" -eslint-scope@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848" - integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg== +eslint-plugin-testing-library@^5.0.1: + version "5.9.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.9.1.tgz#12e4bd34c48683ee98af4df2e3318ec9f51dcf8a" + integrity sha512-6BQp3tmb79jLLasPHJmy8DnxREe+2Pgf7L+7o09TSWPfdqqtQfRZmZNetr5mOs3yqZk/MRNxpN3RUpJe0wB4LQ== dependencies: - esrecurse "^4.1.0" - estraverse "^4.1.1" + "@typescript-eslint/utils" "^5.13.0" -eslint-scope@^5.0.0, eslint-scope@^5.1.1: +eslint-scope@5.1.1, eslint-scope@^5.0.0, eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== @@ -5185,6 +5490,14 @@ eslint-scope@^5.0.0, eslint-scope@^5.1.1: esrecurse "^4.3.0" estraverse "^4.1.1" +eslint-scope@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848" + integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg== + dependencies: + esrecurse "^4.1.0" + estraverse "^4.1.1" + eslint-utils@^2.0.0, eslint-utils@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27" @@ -5204,11 +5517,16 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ== -eslint-visitor-keys@^2.0.0: +eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== +eslint-visitor-keys@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826" + integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA== + eslint-webpack-plugin@^2.1.0: version "2.7.0" resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.7.0.tgz#0525793a4f8c652c1c6d863995ce1e0f2dcbd143" @@ -5510,6 +5828,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== +fast-diff@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" + integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== + fast-glob@^3.1.1, fast-glob@^3.2.9: version "3.2.12" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" @@ -5964,7 +6287,7 @@ globby@11.0.1: merge2 "^1.3.0" slash "^3.0.0" -globby@^11.0.3: +globby@^11.0.3, globby@^11.1.0: version "11.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== @@ -6138,7 +6461,7 @@ hoist-non-react-statics@^1.2.0: resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" integrity sha512-r8huvKK+m+VraiRipdZYc+U4XW43j6OFG/oIafe7GfDbRpCduRoX9JI/DRxqgtBSCeL+et6N6ibZoedHS2NyOQ== -hoist-non-react-statics@^3.3.1: +hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7940,10 +8263,10 @@ media-typer@0.3.0: resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== -memoize-one@^5.0.0: - version "5.2.1" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" - integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== memory-fs@^0.4.1: version "0.4.1" @@ -8664,7 +8987,7 @@ object-visit@^1.0.0: dependencies: isobject "^3.0.0" -object.assign@^4.1.0, object.assign@^4.1.3, object.assign@^4.1.4: +object.assign@^4.1.0, object.assign@^4.1.2, object.assign@^4.1.3, object.assign@^4.1.4: version "4.1.4" resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f" integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ== @@ -9788,6 +10111,18 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg== +prettier-linter-helpers@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" + integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== + dependencies: + fast-diff "^1.1.2" + +prettier@^2.7.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" + integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== + pretty-bytes@^5.3.0: version "5.6.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb" @@ -9870,7 +10205,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.0.0, prop-types@^15.0.0-0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.0.0, prop-types@^15.0.0-0, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10108,23 +10443,16 @@ react-error-boundary@^3.1.4: dependencies: "@babel/runtime" "^7.12.5" -react-error-overlay@^6.0.9: - version "6.0.11" - resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" - integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-error-overlay@6.0.9, react-error-overlay@^6.0.9: + version "6.0.9" + resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" + integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== react-icons@^4.4.0: version "4.6.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397" integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g== -react-input-autosize@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85" - integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg== - dependencies: - prop-types "^15.5.8" - react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10256,18 +10584,20 @@ react-scripts@4.0.1: optionalDependencies: fsevents "^2.1.3" -react-select@^4.0.2: - version "4.3.1" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.1.tgz#389fc07c9bc7cf7d3c377b7a05ea18cd7399cb81" - integrity sha512-HBBd0dYwkF5aZk1zP81Wx5UsLIIT2lSvAY2JiJo199LjoLHoivjn9//KsmvQMEFGNhe58xyuOITjfxKCcGc62Q== +react-select@^5.0.1: + version "5.5.7" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.5.7.tgz#87760030e6377a7ae3d0b1e419190af175ec2a0e" + integrity sha512-izQBXNhTPqXDw4gxzTbc9aLII4tCJ2pdMm6l/WVzKhfHm3RLErheqDNgeenU0XxzqbwT9swYO4CAYk5IzqLlYw== dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" - "@emotion/react" "^11.1.1" - memoize-one "^5.0.0" + "@emotion/react" "^11.8.1" + "@floating-ui/dom" "^1.0.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^6.0.0" prop-types "^15.6.0" - react-input-autosize "^3.0.0" react-transition-group "^4.3.0" + use-isomorphic-layout-effect "^1.1.2" react-slidedown@^2.4.5: version "2.4.7" @@ -10439,7 +10769,7 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.1, regexp.prototype.f define-properties "^1.1.3" functions-have-names "^1.2.2" -regexpp@^3.1.0: +regexpp@^3.1.0, regexpp@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2" integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg== @@ -10876,7 +11206,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -semver@^7.2.1, semver@^7.3.2, semver@^7.3.5: +semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7: version "7.3.8" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A== @@ -11862,7 +12192,7 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1: +tslib@^1.8.1, tslib@^1.9.3: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -11928,6 +12258,11 @@ type-fest@^0.8.1: resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d" integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA== +type-fest@^1.2.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1" + integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA== + type-is@~1.6.18: version "1.6.18" resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131" @@ -12186,6 +12521,16 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-isomorphic-layout-effect@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" + integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== + +use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + use@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" @@ -12885,3 +13230,10 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +zustand@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.3.tgz#72bc4c0ed8ed906fbd92c7c20cde8dd6114c018f" + integrity sha512-AdFyr6+4sVD6xlyc/ArQaOrleqzxJEBbAXglufZ5lgvisoz8GUN3icOrKOnX1uRSxmpmdVUQPen9hhymWIzhBg== + dependencies: + use-sync-external-store "1.2.0"