🔥 removing lively from MonthPicker (#703)

packages/loot-design/src/components/budget/index.js

@@ -1,7 +1,5 @@
 import React, { useContext, useState, useMemo } from 'react';
 
-import { scope } from '@jlongster/lively';
-
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { styles, colors } from '../../style';
@@ -1243,55 +1241,36 @@ export const BudgetPageHeader = React.memo(
   },
 );
 
-export const MonthPicker = scope(lively => {
-  function getRangeForYear(year) {
+function getRangeForYear(year) {
   return monthUtils.rangeInclusive(
     monthUtils.getYearStart(year),
     monthUtils.getYearEnd(year),
   );
-  }
+}
 
-  function getMonth(year, idx) {
+function getMonth(year, idx) {
   return monthUtils.addMonths(year, idx);
-  }
+}
 
-  function getCurrentMonthName(startMonth, currentMonth) {
+function getCurrentMonthName(startMonth, currentMonth) {
   return monthUtils.getYear(startMonth) === monthUtils.getYear(currentMonth)
     ? monthUtils.format(currentMonth, 'MMM')
     : null;
-  }
+}
 
-  function getInitialState({ props: { startMonth, monthBounds } }) {
+export const MonthPicker = ({
+  startMonth,
+  numDisplayed,
+  monthBounds,
+  style,
+  onSelect,
+}) => {
   const currentMonth = monthUtils.currentMonth();
   const range = getRangeForYear(currentMonth);
   const monthNames = range.map(month => {
     return monthUtils.format(month, 'MMM');
   });
-
-    return {
-      monthNames,
-      currentMonthName: getCurrentMonthName(startMonth, currentMonth),
-    };
-  }
-
-  function componentWillReceiveProps({ props }, nextProps) {
-    if (
-      monthUtils.getYear(props.startMonth) !==
-      monthUtils.getYear(nextProps.startMonth)
-    ) {
-      return {
-        currentMonthName: getCurrentMonthName(
-          nextProps.startMonth,
-          monthUtils.currentMonth(),
-        ),
-      };
-    }
-  }
-
-  function MonthPicker({
-    state: { monthNames, currentMonthName },
-    props: { startMonth, numDisplayed, monthBounds, style, onSelect },
-  }) {
+  const currentMonthName = getCurrentMonthName(startMonth, currentMonth);
   const year = monthUtils.getYear(startMonth);
   const selectedIndex = monthUtils.getMonthIndex(startMonth);
 
@@ -1336,8 +1315,7 @@ export const MonthPicker = scope(lively => {
           >
             {monthNames.map((monthName, idx) => {
               const lastSelectedIndex = selectedIndex + numDisplayed;
-                const selected =
-                  idx >= selectedIndex && idx < lastSelectedIndex;
+              const selected = idx >= selectedIndex && idx < lastSelectedIndex;
               const current = monthName === currentMonthName;
               const month = getMonth(year, idx);
               const isMonthBudgeted =
@@ -1418,7 +1396,4 @@ export const MonthPicker = scope(lively => {
       </View>
     </View>
   );
-  }
-
-  return lively(MonthPicker, { getInitialState, componentWillReceiveProps });
-});
+};