store group expansion state

src/components/menu.tsx

@@ -18,6 +18,7 @@ export type MenuProps = {
     selectSourceGroup: (group: SourceGroup, menuKey: string) => void,
     selectSource: (source: RSSSource) => void,
     groupContextMenu: (sids: number[], event: React.MouseEvent) => void,
+    updateGroupExpansion: (event: React.MouseEvent<HTMLElement>, key: string, selected: string) => void,
 }
 
 export class Menu extends React.Component<MenuProps> {
@@ -53,7 +54,7 @@ export class Menu extends React.Component<MenuProps> {
                     ariaLabel: this.countOverflow(sources.map(s => s.unreadCount).reduce((a, b) => a + b, 0)),
                     key: "g-" + i,
                     url: null,
-                    isExpanded: true,
+                    isExpanded: g.expanded,
                     onClick: () => this.props.selectSourceGroup(g, "g-" + i),
                     links: sources.map(this.getSource)
                 }
@@ -119,6 +120,7 @@ export class Menu extends React.Component<MenuProps> {
                         <Nav 
                             selectedKey={this.props.selected}
                             onRenderLink={this._onRenderLink}
+                            onLinkExpandClick={(event, item) => this.props.updateGroupExpansion(event, item.key, this.props.selected)}
                             groups={this.getGroups()} />
                     </div>
                 </div>

src/containers/menu-container.tsx

@@ -3,7 +3,7 @@ import { createSelector } from "reselect"
 import { RootState } from "../scripts/reducer"
 import { Menu } from "../components/menu"
 import { toggleMenu, openGroupMenu } from "../scripts/models/app"
-import { SourceGroup } from "../scripts/models/group"
+import { SourceGroup, toggleGroupExpansion } from "../scripts/models/group"
 import { selectAllArticles, selectSources } from "../scripts/models/page"
 import { initFeeds } from "../scripts/models/feed"
 import { RSSSource } from "../scripts/models/source"
@@ -39,6 +39,12 @@ const mapDispatchToProps = dispatch => ({
     },
     groupContextMenu: (sids: number[], event: React.MouseEvent) => {
         dispatch(openGroupMenu(sids, event))
+    },
+    updateGroupExpansion: (event: React.MouseEvent<HTMLElement>, key: string, selected: string) => {
+        if ((event.target as HTMLElement).tagName !== "DIV" || key === selected) {
+            let [type, index] = key.split("-")
+            if (type === "g") dispatch(toggleGroupExpansion(parseInt(index)))
+        }
     }
 })
 

src/scripts/models/app.ts

@@ -5,7 +5,7 @@ import { ActionStatus, AppThunk, getWindowBreakpoint } from "../utils"
 import { INIT_FEEDS, FeedActionTypes, ALL, initFeeds } from "./feed"
 import { SourceGroupActionTypes, UPDATE_SOURCE_GROUP, ADD_SOURCE_TO_GROUP, DELETE_SOURCE_GROUP, REMOVE_SOURCE_FROM_GROUP, REORDER_SOURCE_GROUPS } from "./group"
 import { PageActionTypes, SELECT_PAGE, PageType, selectAllArticles } from "./page"
-import { getCurrentLocale, setLocaleSettings } from "../settings"
+import { getCurrentLocale } from "../settings"
 import locales from "../i18n/_locales"
 
 export enum ContextMenuType {

src/scripts/models/group.ts

@@ -11,6 +11,7 @@ export class SourceGroup {
     isMultiple: boolean
     sids: number[]
     name?: string
+    expanded?: boolean
     index?: number // available only from groups tab container
 
     constructor(sids: number[], name: string = null) {
@@ -39,6 +40,7 @@ export const REMOVE_SOURCE_FROM_GROUP = "REMOVE_SOURCE_FROM_GROUP"
 export const UPDATE_SOURCE_GROUP = "UPDATE_SOURCE_GROUP"
 export const REORDER_SOURCE_GROUPS = "REORDER_SOURCE_GROUPS"
 export const DELETE_SOURCE_GROUP = "DELETE_SOURCE_GROUP"
+export const TOGGLE_GROUP_EXPANSION = "TOGGLE_GROUP_EXPANSION"
 
 interface CreateSourceGroupAction {
     type: typeof CREATE_SOURCE_GROUP,
@@ -73,9 +75,14 @@ interface DeleteSourceGroupAction {
     groupIndex: number
 }
 
+interface ToggleGroupExpansionAction {
+    type: typeof TOGGLE_GROUP_EXPANSION,
+    groupIndex: number
+}
+
 export type SourceGroupActionTypes = CreateSourceGroupAction | AddSourceToGroupAction 
     | RemoveSourceFromGroupAction | UpdateSourceGroupAction | ReorderSourceGroupsAction 
-    | DeleteSourceGroupAction
+    | DeleteSourceGroupAction | ToggleGroupExpansionAction
 
 export function createSourceGroupDone(group: SourceGroup): SourceGroupActionTypes {
     return {
@@ -167,6 +174,16 @@ export function reorderSourceGroups(groups: SourceGroup[]): AppThunk {
     }
 }
 
+export function toggleGroupExpansion(groupIndex: number): AppThunk {
+    return (dispatch, getState) => {
+        dispatch({
+            type: TOGGLE_GROUP_EXPANSION,
+            groupIndex: groupIndex
+        })
+        SourceGroup.save(getState().groups)
+    }
+}
+
 async function outlineToSource(dispatch: AppDispatch, outline: Element): Promise<number> {
     let url = outline.getAttribute("xmlUrl")
     let name = outline.getAttribute("text") || outline.getAttribute("name")
@@ -266,6 +283,10 @@ export function groupReducer(
             ...state[action.groupIndex].sids.map(sid => new SourceGroup([sid])),
             ...state.slice(action.groupIndex + 1)
         ]
+        case TOGGLE_GROUP_EXPANSION: return state.map((g, i) => i == action.groupIndex ? ({
+            ...g,
+            expanded: !g.expanded
+        }) : g)
         default: return state
     }
 }

src/scripts/models/item.ts

@@ -211,10 +211,9 @@ export function markAllRead(sids: number[] = null): AppThunk {
         db.idb.update(query, { $set: { hasRead: true } }, { multi: true }, (err) => {
             if (err) {
                 console.log(err)
-            } else {
-                dispatch(markAllReadDone(sids))
             }
         })
+        dispatch(markAllReadDone(sids))
     }
 }
 

src/scripts/models/page.ts

@@ -64,16 +64,18 @@ export function selectAllArticles(init = false): AppThunk {
 
 export function selectSources(sids: number[], menuKey: string, title: string): AppThunk {
     return (dispatch, getState) => {
-        dispatch({
-            type: SELECT_PAGE,
-            pageType: PageType.Sources,
-            keepMenu: getWindowBreakpoint(),
-            filter: getState().page.filter,
-            sids: sids,
-            menuKey: menuKey,
-            title: title,
-            init: true
-        } as PageActionTypes)
+        if (getState().app.menuKey !== menuKey) {
+            dispatch({
+                type: SELECT_PAGE,
+                pageType: PageType.Sources,
+                keepMenu: getWindowBreakpoint(),
+                filter: getState().page.filter,
+                sids: sids,
+                menuKey: menuKey,
+                title: title,
+                init: true
+            } as PageActionTypes)
+        }    
     }
 }