Save the last selected tag and date range

Author: medyo

src/cards/ReposCard.js

@@ -63,33 +63,44 @@ 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
+    console.log(githubCardSettings)
+    if (githubCardSettings && githubCardSettings.dateRange) {
+      return githubCardSettings.dateRange
+    }
+    return 'daily'
+  }
+
   const globalTag = { value: 'global', label: 'All trending', githubValues: ['global'] }
 
   const preferences = useContext(PreferencesContext)
 
-  const { userSelectedTags = [], userBookmarks = [] } = preferences
+  const { userSelectedTags = [], dispatcher, cardsSettings } = preferences
 
   const getTags = () => [...userSelectedTags, globalTag]
 
   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 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())
     setRefresh(!refresh)
@@ -98,11 +109,13 @@ function ReposCard({ analyticsTag, icon, withAds }) {
   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)
   }
@@ -165,7 +178,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/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