Merge pull request #71 from medyo/develop

V 1.11.0

Author: medyo

src/App.css

@@ -671,7 +671,9 @@ Producthunt item
 .navigationItem.active {
   background-color: #3c4f651f;
 }
-
+.changelogTooltip {
+  overflow-x: hidden !important;
+}
 .changelogButton {
   width: 20px;
   height: 20px;

src/Constants.js

@@ -134,6 +134,10 @@ export const SUPPORTED_SEARCH_ENGINES = [
     label: 'Yandex',
     url: 'https://yandex.ru/search/?text=',
   },
+  {
+    label: 'Startpage',
+    url: 'https://www.startpage.com/sp/search?query=',
+  },
 ]
 export const LS_PREFERENCES_KEY = 'hackerTabPrefs'
 export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId'

src/cards/HNCard.js

@@ -20,52 +20,44 @@ const StoryItem = ({ item, index, analyticsTag }) => {
 
   return (
     <CardItemWithActions
-      source={"hackernews"}
+      source={'hackernews'}
       index={index}
       item={item}
       key={index}
       cardItem={
         <>
           <p className="rowTitle">
             <CardLink link={item.url} analyticsSource={analyticsTag}>
-              { listingMode === "compact" && 
-                    <div className="counterWrapper">
-                        <VscTriangleUp/>
-                        <span className="value">{item.score}</span>
-                    </div>
-                }
-                
-                <div className="subTitle">
-                    {item.title}
-                </div>
+              {listingMode === 'compact' && (
+                <span className="counterWrapper">
+                  <VscTriangleUp />
+                  <span className="value">{item.score}</span>
+                </span>
+              )}
+
+              <span className="subTitle">{item.title}</span>
             </CardLink>
           </p>
-          {listingMode === "normal" && (
+          {listingMode === 'normal' && (
             <div className="rowDetails">
               <span className="rowItem hnRowItem">
                 <GoPrimitiveDot className="rowItemIcon" /> {item.score} points
               </span>
-              <span
-                className="rowItem"
-                title={new Date(item.time * 1000).toUTCString()}
-              >
-                <MdAccessTime className="rowItemIcon" />{" "}
-                {format(new Date(item.time * 1000))}
+              <span className="rowItem" title={new Date(item.time * 1000).toUTCString()}>
+                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.time * 1000))}
               </span>
               <ClickableItem
                 link={`https://news.ycombinator.com/item?id=${item.id}`}
                 className="rowItem rowItemClickable"
-                analyticsSource={analyticsTag}
-              >
-                <BiCommentDetail className="rowItemIcon" /> {item.descendants}{" "}
-                comments
+                analyticsSource={analyticsTag}>
+                <BiCommentDetail className="rowItemIcon" /> {item.descendants} comments
               </ClickableItem>
             </div>
           )}
         </>
       }
     />
-  );
+  )
 }
 
 

src/cards/ReposCard.js

@@ -63,46 +63,61 @@ const TAGS_MENU_ID = "tags-menu";
 const DATE_RANGE_MENU_ID = "date-range-id"
 
 function ReposCard({ analyticsTag, icon, withAds }) {
+
+  const getInitialSelectedTag = () => {
+    const githubCardSettings = cardsSettings && cardsSettings.repos ? cardsSettings.repos : null
+    if (githubCardSettings && githubCardSettings.language) {
+      return getTags().find((t) => t.label == githubCardSettings.language)
+    }
+
+    return getTags().find((t) => t.githubValues != null)
+  }
+
+  const getInitialDateRange = () => {
+    const githubCardSettings = cardsSettings && cardsSettings.repos ? cardsSettings.repos : null
+    if (githubCardSettings && githubCardSettings.dateRange) {
+      return githubCardSettings.dateRange
+    }
+    return 'daily'
+  }
+
   const globalTag = { value: 'global', label: 'All trending', githubValues: ['global'] }
+  const myLangsTag = { value: 'myLangs', label: 'My Languages', githubValues: ['myLangs'] }
 
   const preferences = useContext(PreferencesContext)
 
-  const { userSelectedTags = [], userBookmarks = [] } = preferences
+  const { userSelectedTags = [], dispatcher, cardsSettings } = preferences
 
-  const getTags = () => [...userSelectedTags, globalTag]
+  const getTags = () => [...userSelectedTags, globalTag, myLangsTag]
 
   const { show: showMenu } = useContextMenu()
 
-  const [selectedTag, setSelectedTag] = useState(getTags()[0])
-  const [since, setSince] = useState('daily')
+  const [selectedTag, setSelectedTag] = useState(getInitialSelectedTag())
+  const [since, setSince] = useState(getInitialDateRange())
   const [refresh, setRefresh] = useState(true)
+  const [repos, setRepos] = useState({})
   const dateRangeMapper = {
     daily: 'the day',
     weekly: 'the week',
     monthly: 'the month',
   }
 
-  const getInitialSelectedTag = () => {
-    return getTags().find((t) => t.githubValues != null)
-  }
-
-  useEffect(() => {
-    setSelectedTag(getInitialSelectedTag())
-  }, [])
-
   useEffect(() => {
     setSelectedTag(getInitialSelectedTag())
+    setRepos({})
     setRefresh(!refresh)
   }, [userSelectedTags])
 
   const onSelectedTagChange = (selTag) => {
     setSelectedTag(selTag)
     trackReposLanguageChange(selTag.value)
+    dispatcher({ type: 'setCardSettings', value: { card: 'repos', language: selTag.label } })
     setRefresh(!refresh)
   }
 
   const onDateRangeChange = (dateRange) => {
     setSince(dateRange)
+    dispatcher({ type: 'setCardSettings', value: { card: 'repos', dateRange } })
     trackReposDateRangeChange(dateRange)
     setRefresh(!refresh)
   }
@@ -123,7 +138,34 @@ function ReposCard({ analyticsTag, icon, withAds }) {
       throw Error(`Github Trending does not support ${selectedTag.label}.`)
     }
 
-    const data = await githubApi.getTrending(selectedTag.githubValues[0], since)
+    const tagValue = selectedTag.githubValues[0]
+    const key = `${tagValue}-${since}` 
+
+    if (repos[key]) {
+      return repos[key]
+    }
+
+    if (tagValue == myLangsTag.githubValues[0]) {
+      const promises = userSelectedTags.map(
+        t => !t.githubValues ? false : githubApi.getTrending(t.githubValues[0], since)
+      )
+      let values = await Promise.all(promises)
+      const nbrTags = values.length
+      let minLength = Math.min(...values.map(v => v.length))
+      const data = []
+      for (let index = 0; index < minLength; index++) {
+        for (let i = 0; i < nbrTags; i++) {
+          data.push(values[i][index])
+        }
+      }
+
+      setRepos({ ...repos, [key]: data })
+      return data
+      
+    }
+
+    const data = await githubApi.getTrending(tagValue, since)
+    setRepos({ ...repos, [key]: data })
     return data
   }
 
@@ -165,7 +207,7 @@ function ReposCard({ analyticsTag, icon, withAds }) {
         <Menu id={TAGS_MENU_ID} animation={animation.fade}>
           {getTags().map((tag) => {
             return (
-              <Item key={tag} onClick={() => onSelectedTagChange(tag)}>
+              <Item key={tag.value} onClick={() => onSelectedTagChange(tag)}>
                 {tag.label}
               </Item>
             )

src/components/Changelog.js

@@ -82,6 +82,7 @@ function Changelog({}) {
         scrollHide={false}
         afterShow={afterShow}
         place="bottom"
+        className="changelogTooltip scrollable"
         globalEventOff="click">
         {loading ? (
           <div className="tooltipLoading">

src/preferences/AppReducer.js

@@ -54,6 +54,15 @@ const AppReducer = (state, action) => {
     case 'setSearchEngine':
       newState = { ...newState, searchEngine: value.label }
       break
+    case 'setCardSettings':
+      newState = {
+        ...newState,
+        cardsSettings: {
+          ...newState?.cardsSettings,
+          [value.card]: { ...newState?.cardsSettings?.[value.card], ...value },
+        },
+      }
+      break
     default:
       throw new Error()
   }
@@ -67,6 +76,7 @@ const AppReducer = (state, action) => {
     changelogMeta: newState.changelogMeta,
     userBookmarks: newState.userBookmarks,
     searchEngine: newState.searchEngine,
+    cardsSettings: newState.cardsSettings,
   }
   AppStorage.setItem(LS_PREFERENCES_KEY, storageData)
   return newState