persist agenda timeframe

changelog.org

@@ -4,6 +4,12 @@ All user visible changes to organice will be documented in this file.
 
 When there are updates to the changelog, you will be notified and see a 'gift' icon appear on the top right corner.
 
+* [2020-11-21 Sat]
+
+** Added
+   - When going to the Agenda view, the selected tab is persisted - meaning it will be pre-selected when you go to the Agenda next time.
+     - Relevant PR: /~https://github.com/200ok-ch/organice/pull/562
+
 * [2020-11-20 Fri]
 ** Fixed
    - organice understands =:PROPERTIES:= drawers and smartly parses the values in case one of the values is a timestamp.

src/actions/base.js

@@ -198,3 +198,9 @@ export const activatePopup = (popupType, data) => ({
 export const closePopup = () => ({
   type: 'CLOSE_POPUP',
 });
+
+export const setAgendaTimeframe = (agendaTimeframe) => (dispatch) =>
+  dispatch({
+    type: 'SET_AGENDA_TIMEFRAME',
+    agendaTimeframe,
+  });

src/components/OrgFile/OrgFile.integration.test.js

@@ -56,6 +56,7 @@ describe('Render all views', () => {
         base: new fromJS({
           customKeybindings: {},
           shouldTapTodoToAdvance: true,
+          agendaTimeframe: 'Week',
         }),
       },
       applyMiddleware(thunk)

src/components/OrgFile/components/AgendaModal/index.js

@@ -9,7 +9,7 @@ import Drawer from '../../../UI/Drawer';
 import TabButtons from '../../../UI/TabButtons';
 
 import { isMobileBrowser } from '../../../../lib/browser_utils';
-
+import * as baseActions from '../../../../actions/base';
 import * as orgActions from '../../../../actions/org';
 
 import _ from 'lodash';
@@ -30,16 +30,24 @@ import format from 'date-fns/format';
 // in structure and partially in logic. When changing one, consider
 // changing all.
 function AgendaModal(props) {
+  const {
+    onClose,
+    headers,
+    todoKeywordSets,
+    agendaTimeframe,
+    agendaDefaultDeadlineDelayValue,
+    agendaDefaultDeadlineDelayUnit,
+  } = props;
+
   const [selectedDate, setSelectedDate] = useState(new Date());
-  const [timeframeType, setTimeframeType] = useState('Week');
   const [dateDisplayType, setDateDisplayType] = useState('absolute');
 
-  function handleTimeframeTypeChange(timeframeType) {
-    setTimeframeType(timeframeType);
+  function handleTimeframeTypeChange(agendaTimeframe) {
+    props.base.setAgendaTimeframe(agendaTimeframe);
   }
 
   function handleNextDateClick() {
-    switch (timeframeType) {
+    switch (agendaTimeframe) {
       case 'Day':
         setSelectedDate(addDays(selectedDate, 1));
         break;
@@ -60,7 +68,7 @@ function AgendaModal(props) {
   }
 
   function handlePreviousDateClick() {
-    switch (timeframeType) {
+    switch (agendaTimeframe) {
       case 'Day':
         setSelectedDate(subDays(selectedDate, 1));
         break;
@@ -80,7 +88,7 @@ function AgendaModal(props) {
   }
 
   function calculateTimeframeHeader() {
-    switch (timeframeType) {
+    switch (agendaTimeframe) {
       case 'Day':
         return format(selectedDate, 'MMMM do');
       case 'Week':
@@ -97,16 +105,8 @@ function AgendaModal(props) {
     }
   }
 
-  const {
-    onClose,
-    headers,
-    todoKeywordSets,
-    agendaDefaultDeadlineDelayValue,
-    agendaDefaultDeadlineDelayUnit,
-  } = props;
-
   let dates = [];
-  switch (timeframeType) {
+  switch (agendaTimeframe) {
     case 'Day':
       dates = [selectedDate];
       break;
@@ -130,7 +130,7 @@ function AgendaModal(props) {
       <div className="agenda__tab-container">
         <TabButtons
           buttons={['Day', 'Week', 'Month']}
-          selectedButton={timeframeType}
+          selectedButton={agendaTimeframe}
           onSelect={handleTimeframeTypeChange}
           useEqualWidthTabs
         />
@@ -144,11 +144,6 @@ function AgendaModal(props) {
 
       <div
         className="agenda__days-container"
-        // On mobile devices, the Drawer already handles the touch
-        // event. Hence, scrolling within the Drawers container does
-        // not work with the same event. Therefore, we're just opting
-        // to scroll the whole drawer. That's not the best UX. And a
-        // better CSS juggler than me is welcome to improve on it.
         style={isMobileBrowser ? undefined : { overflow: 'auto' }}
       >
         {dates.map((date) => (
@@ -173,12 +168,14 @@ function AgendaModal(props) {
 
 const mapStateToProps = (state) => ({
   todoKeywordSets: state.org.present.get('todoKeywordSets'),
+  agendaTimeframe: state.base.get('agendaTimeframe'),
   agendaDefaultDeadlineDelayValue: state.base.get('agendaDefaultDeadlineDelayValue') || 5,
   agendaDefaultDeadlineDelayUnit: state.base.get('agendaDefaultDeadlineDelayUnit') || 'd',
 });
 
 const mapDispatchToProps = (dispatch) => ({
   org: bindActionCreators(orgActions, dispatch),
+  base: bindActionCreators(baseActions, dispatch),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(AgendaModal);

src/reducers/base.js

@@ -111,6 +111,8 @@ const closePopup = (state) => {
 
 const setIsLoading = (state, action) => state.set('isLoading', action.isLoading);
 
+const setAgendaTimeframe = (state, action) => state.set('agendaTimeframe', action.agendaTimeframe);
+
 const setColorScheme = (state, action) => {
   return state.set('colorScheme', action.colorScheme);
 };
@@ -178,6 +180,8 @@ export default (state = Map(), action) => {
       return closePopup(state, action);
     case 'SET_IS_LOADING':
       return setIsLoading(state, action);
+    case 'SET_AGENDA_TIMEFRAME':
+      return setAgendaTimeframe(state, action);
     default:
       return state;
   }

src/util/settings_persister.js

@@ -162,6 +162,13 @@ export const persistableFields = [
     shouldStoreInConfig: true,
     default: List(),
   },
+  {
+    category: 'base',
+    name: 'agendaTimeframe',
+    type: 'string',
+    default: 'Week',
+    shouldStoreInConfig: false,
+  },
 ];
 
 export const readOpennessState = () => {
@@ -190,7 +197,7 @@ const getFieldsToPersist = (state, fields) => {
 };
 
 const getConfigFileContents = (fieldsToPersist) => {
-  return JSON.stringify(_.fromPairs(fieldsToPersist), null, 2);
+  return JSON.stringify(_.fromPairs(fieldsToPersist.filter((f) => f.shouldStoreInConfig)), null, 2);
 };
 
 export const applyCategorySettingsFromConfig = (state, config, category) => {