wip: start available-funds selection

src/views/NewBudget/03_fillCategories.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useRef, MutableRefObject, useMemo } from 'react';
+import React, { Suspense, useRef, useMemo } from 'react';
 import cx from 'classnames';
 import {
   ErrorBoundary,
@@ -9,71 +9,10 @@ import {
 } from '../../components';
 import { SidebarHeader, SidebarWrap } from '../CategorySidebar';
 import CategorySidebar from './components/CategorySidebar';
-import { Step, StepCompProps } from './Types';
+import SingleBudget from './components/SingleBudget';
+import { Step } from './Types';
 import styles from './NewBudget.module.scss';
-import { MonthData, useBudgetData } from '../../budget';
-import Month from '../Month';
-import { useSyncScrollY, createNumberFormatter } from '../../lib';
-
-function SingleBudget({
-  state,
-  moneyMoney,
-  innerRef,
-  syncScrollY,
-}: StepCompProps & {
-  innerRef?: MutableRefObject<HTMLDivElement | null>;
-  syncScrollY?: MutableRefObject<HTMLDivElement | null>;
-}) {
-  const { months, numberFormatter, categories } = useBudgetData(
-    state,
-    moneyMoney,
-  );
-  const syncScroll = useSyncScrollY(syncScrollY);
-  const month = useMemo<MonthData>(() => {
-    return {
-      ...months[0],
-      get: (): ReturnType<MonthData['get']> => {
-        const data = months[0].get();
-
-        return {
-          ...data,
-          uncategorized: { amount: 0, transactions: [] },
-          total: {
-            balance: 0,
-            budgeted: 0,
-            spend: 0,
-          },
-          categories: data.categories.map((cat) => ({
-            ...cat,
-            balance: 0,
-            budgeted: 0,
-            spend: 0,
-          })),
-        };
-      },
-    };
-  }, [months]);
-
-  return (
-    <div
-      className={styles.singleBudgetWrap}
-      ref={innerRef}
-      onScroll={syncScroll}
-    >
-      <Month
-        width="full"
-        key={month.key}
-        monthKey={month.key}
-        date={month.date}
-        initialVisible={true}
-        collapsedCategories={state.settings.collapsedCategories}
-        month={month}
-        categories={categories || []}
-        numberFormatter={numberFormatter}
-      />
-    </div>
-  );
-}
+import { createNumberFormatter } from '../../lib';
 
 const IntroIncomeCats: Step = {
   title: 'Fill Categories',

src/views/NewBudget/04_availableFunds.tsx

@@ -0,0 +1,28 @@
+import React, { useRef } from 'react';
+import cx from 'classnames';
+
+import SingleBudget from './components/SingleBudget';
+import { Step } from './Types';
+import styles from './NewBudget.module.scss';
+
+const AvailableFunds: Step = {
+  title: 'Fill Categories',
+  initialOk() {
+    return true;
+  },
+  Comp(props) {
+    const sidebarRef = useRef<HTMLDivElement | null>(null);
+    const budgetRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+      <>
+        <SingleBudget {...props} small />
+        <div className={cx(styles.explainBody, styles.explainSpaceS)}>
+          <h1 className={styles.center}>Setup Income Categories</h1>
+        </div>
+      </>
+    );
+  },
+};
+
+export default AvailableFunds;

src/views/NewBudget/NewBudget.module.scss

@@ -121,3 +121,7 @@
   overflow: scroll;
   display: flex;
 }
+.singleBudgetWrapSmall {
+  min-width: 33%;
+  max-width: calc(var(--sidebar-width) * 1.5);
+}

src/views/NewBudget/NewBudget.tsx

@@ -14,8 +14,9 @@ import useSelectAllAccounts from './useSelectAllAccounts';
 import Welcome from './01_welcome';
 import Categories from './02_categories';
 import FillCategories from './03_fillCategories';
+import AvailableFunds from './04_availableFunds';
 
-const STEPS: Step[] = [Welcome, Categories, FillCategories];
+const STEPS: Step[] = [Welcome, Categories, FillCategories, AvailableFunds];
 
 type Props = {
   state: BudgetState;
@@ -24,7 +25,7 @@ type Props = {
   onCreate: () => void;
 };
 
-const INITIAL_STEP = 2;
+const INITIAL_STEP = 3;
 
 function getProgress(i: number) {
   return (100 / (STEPS.length - 1)) * i;

src/views/NewBudget/components/SingleBudget.tsx

@@ -0,0 +1,72 @@
+import React, { MutableRefObject, useMemo } from 'react';
+import cx from 'classnames';
+import { StepCompProps } from '../Types';
+import styles from '../NewBudget.module.scss';
+import { MonthData, useBudgetData } from '../../../budget';
+import Month from '../../Month';
+import { useSyncScrollY } from '../../../lib';
+
+export default function SingleBudget({
+  state,
+  moneyMoney,
+  innerRef,
+  syncScrollY,
+  small,
+}: StepCompProps & {
+  small?: boolean;
+  innerRef?: MutableRefObject<HTMLDivElement | null>;
+  syncScrollY?: MutableRefObject<HTMLDivElement | null>;
+}) {
+  const { months, numberFormatter, categories } = useBudgetData(
+    state,
+    moneyMoney,
+  );
+  const syncScroll = useSyncScrollY(syncScrollY);
+  const month = useMemo<MonthData>(() => {
+    return {
+      ...months[0],
+      get: (): ReturnType<MonthData['get']> => {
+        const data = months[0].get();
+
+        return {
+          ...data,
+          uncategorized: { amount: 0, transactions: [] },
+          total: {
+            balance: 0,
+            budgeted: 0,
+            spend: 0,
+          },
+          categories: data.categories.map((cat) => ({
+            ...cat,
+            balance: 0,
+            budgeted: 0,
+            spend: 0,
+          })),
+        };
+      },
+    };
+  }, [months]);
+
+  return (
+    <div
+      className={cx(
+        styles.singleBudgetWrap,
+        small && styles.singleBudgetWrapSmall,
+      )}
+      ref={innerRef}
+      onScroll={syncScroll}
+    >
+      <Month
+        width="full"
+        key={month.key}
+        monthKey={month.key}
+        date={month.date}
+        initialVisible={true}
+        collapsedCategories={state.settings.collapsedCategories}
+        month={month}
+        categories={categories || []}
+        numberFormatter={numberFormatter}
+      />
+    </div>
+  );
+}