pullstate migration

Author: marcusbuffett

frontend/pages/houses/[uuid].tsx

@@ -4,7 +4,6 @@ import _ from "lodash";
 // prettier-ignore
 import {justifyBetween, intersperse, Spacer, mt, absolute, alignCenter, bg, border, br, column, fullWidth, height, p, px, py, row, s, weightBold, width, noResize, justifyCenter, fg, fontSize, clickable, justifyStart, pl, pr, size, weightSemiBold, weightRegular, minWidth, mr, maxWidth, selfCenter, selfStretch, opacity, mb, light1, flexGrow, grow, pageHeight, dark4, dark3, dark5, light2, s6, full, f2, f3, caps, light3, light4, light5, flexWrap, dark2, s4, s3, hsl, f0, f1, selfEnd, alignEnd, alignStretch, keyedProp, inline, s5, alignStart, dark1, shadow, dark0, flexible, textAlign, s7, s8, s9, s10, selfStart, constrainWidth, center, light0, textOverflowClip, oneLine, stiff } from "src/styles";
 import { Investment, FieldFormat, FinancingOption } from "src/models";
-import { useSelector, useDispatch } from "react-redux";
 import { useRouter } from "next/router";
 import {
   isSSR,
@@ -21,6 +20,7 @@ import { AppAction } from "src/redux/reducer";
 import { card, editableStyles, plColor, primaryColor } from "src/app_styles";
 import { Selector } from "src/Selector";
 import { useWindowSize } from "rooks";
+import { AppStore } from "src/store";
 
 const SliderGroup = ({ firstSlider, secondSlider, mobile }) => {
   if (mobile) {
@@ -44,8 +44,7 @@ const SliderGroup = ({ firstSlider, secondSlider, mobile }) => {
 export default function HousePage(props: {}): ReactElement {
   const router = useRouter();
   const uuid = router.query.uuid as string;
-  const dispatch = useDispatch();
-  const house = useSelector((state) =>
+  const house = AppStore.useState((state) =>
     _.find(state.houses, (house: Investment) => {
       return house.uuid === uuid;
     })
@@ -61,9 +60,10 @@ export default function HousePage(props: {}): ReactElement {
   const projection = createInvestmentProjection(house);
 
   const updateHouse = (house: Investment) => {
-    dispatch({
-      type: AppAction.UpdateInvestment,
-      house: house,
+    AppStore.update((s) => {
+      s.houses = _.map(s.houses, (h: Investment) => {
+        return h.uuid === house.uuid ? house : h;
+      });
     });
   };
   const labelColor = light4;

frontend/pages/index.tsx

@@ -13,9 +13,10 @@ import {
   formatUSDShorten,
 } from "src/utilities";
 import { useWindowSize } from "rooks";
+import { AppStore } from "src/store";
 
 export default function Home() {
-  const investments = useSelector((state: AppState) => state.houses);
+  const investments = AppStore.useState((state) => state.houses);
   console.log("investments:", investments);
   const labelColor = light4;
   const { innerWidth } = useWindowSize();

frontend/src/AppContainer.tsx

@@ -4,12 +4,12 @@ import { f1, f2, intersperse, mt, absolute, alignCenter, bg, border, br, column,
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { useWindowSize } from "rooks";
-import { useSelector, useDispatch } from "react-redux";
 import { useModal } from "react-modal-hook";
 import { SignInForm } from "src/SignInForm";
 import { AppState } from "src/redux/reducer";
 import _ from "lodash";
 import { HouseUploadService } from "src/HouseUploadService";
+import { AppStore } from "src/store";
 
 const navItems = [
   {
@@ -26,11 +26,10 @@ export const AppContainer: FC<{}> = (props): ReactElement => {
   const router = useRouter();
   const { innerWidth } = useWindowSize();
   const mobile = innerWidth < 1000;
-  const dispatch = useDispatch();
   const [openSignIn, closeSignIn] = useModal(() => {
     return <SignInForm onClose={closeSignIn} />;
   });
-  const user = useSelector((state: AppState) => state.user);
+  const user = AppStore.useState((s) => s.user);
   const loggedIn = !_.isNil(user);
   return (
     <div style={s(column, pageHeight)}>

frontend/src/HouseUploadService.tsx

@@ -8,30 +8,26 @@ import React, {
 import { inputStyles, primaryColor, secondaryColor } from "src/app_styles";
 import { AppAction, AppState } from "src/redux/reducer";
 import superagent from "superagent";
-import { useDispatch, useSelector } from "react-redux";
 import { useRequestAuth } from "src/useAuthenticatedRequester";
 import _ from "lodash";
 import { useInterval, usePrevious } from "rooks";
+import { AppStore } from "src/store";
 
 export const HouseUploadService = ({}) => {
   const requestAuth = useRequestAuth();
-  const user = useSelector((state: AppState) => state.user);
-  const changedHouseUuids = useSelector((state: AppState) => state.changed);
-  const houses = useSelector((state: AppState) => state.houses);
-  const dispatch = useDispatch();
-  console.log("changedHouseUuids:", changedHouseUuids);
+  const user = AppStore.useState((s) => s.user);
+  const changedHouseUuids = AppStore.useState((s) => s.changed);
+  const houses = AppStore.useState((s) => s.houses);
   const changedHouses = _.filter(houses, (house) => {
     return changedHouseUuids.has(house.uuid);
   });
-  // const previousHouses = usePrevious(latestHouses);
-  // const [changedHouses, setChangedHouses] = useRef(null);
   useInterval(
     () => {
       if (!_.isEmpty(changedHouses)) {
         _.forEach(changedHouses, (house) => {
-          dispatch({
-            type: AppAction.InvestmentUploaded,
-            uuid: house.uuid,
+          // TODO: delete after successful
+          AppStore.update((s) => {
+            s.changed.delete(house.uuid);
           });
           requestAuth(superagent.post("/api/investments").send(house)).end(
             (err, res) => {

frontend/src/SignInForm.tsx

@@ -5,7 +5,7 @@ import { AppAction } from "src/redux/reducer";
 // prettier-ignore
 import {justifyEnd, justifyBetween, intersperse, Spacer, mt, absolute, alignCenter, bg, border, br, column, fullWidth, height, p, px, py, row, s, weightBold, width, noResize, justifyCenter, fg, fontSize, clickable, justifyStart, pl, pr, size, weightSemiBold, weightRegular, minWidth, mr, maxWidth, selfCenter, selfStretch, opacity, mb, light1, flexGrow, grow, pageHeight, dark4, dark3, dark5, light2, s6, full, f2, f3, caps, light3, light4, light5, flexWrap, dark2, s4, s3, hsl, f0, f1, selfEnd, alignEnd, alignStretch, keyedProp, inline, s5, alignStart, dark1, shadow, dark0, flexible, textAlign, s7, s8, s9, s10, selfStart, constrainWidth, center, light0, textOverflowClip, oneLine, stiff, modalContainer } from "src/styles";
 import superagent from "superagent";
-import { useDispatch } from "react-redux";
+import { AppStore } from "src/store";
 
 export const SignInForm = ({ onClose }) => {
   const ref = useRef(null);
@@ -23,7 +23,6 @@ export const SignInForm = ({ onClose }) => {
   );
   const [email, setEmail] = useState();
   const [password, setPassword] = useState();
-  const dispatch = useDispatch();
   return (
     <div
       style={s(modalContainer)}
@@ -65,12 +64,9 @@ export const SignInForm = ({ onClose }) => {
                 .send({ email, password })
                 .end((err, res) => {
                   console.log("res:", res);
-                  dispatch({
-                    type: AppAction.Login,
-                    user: {
-                      email,
-                    },
-                    token: res.body.token,
+                  AppStore.update((s) => {
+                    s.jwt = res.body.token;
+                    s.user = { email };
                   });
                 });
             }}
@@ -85,12 +81,9 @@ export const SignInForm = ({ onClose }) => {
                 .post("/api/login")
                 .send({ email, password })
                 .end((err, res) => {
-                  dispatch({
-                    type: AppAction.Login,
-                    user: {
-                      email,
-                    },
-                    token: res.body.token,
+                  AppStore.update((s) => {
+                    s.jwt = res.body.token;
+                    s.user = { email };
                   });
                 });
             }}

frontend/src/redux/reducer.ts

@@ -1,5 +1,65 @@
 import { Store } from "pullstate";
+import { FinancingOption, Investment } from "src/models";
 
-export const AppStore = new Store({
+export const AppStore = new Store<{
+  houses: Investment[];
+  signInModalOpen: boolean;
+  user: {
+    email: string;
+  };
+  jwt: string;
+  changed: Set<string>;
+  deleted: Set<string>;
+}>({
   changed: new Set(),
+  deleted: new Set(),
+  user: null,
+  jwt: null,
+  houses: [
+    {
+      title: "9572 Gonzalez Dr",
+      purchasePrice: 80000,
+      downPayment: 0.2,
+      interestRate: 0.045,
+      rent: 1150,
+      annualTaxes: 2400,
+      insurance: 200,
+      expenseRatio: 0.15,
+      financingOption: FinancingOption.Mortgage,
+      propManagement: 0.1,
+      hoa: 0,
+      miscExpenses: 0,
+      uuid: "7354a4fa-d5fd-4369-b54d-340a86b582ef",
+    },
+    {
+      title: "9576 Gonzalez Dr",
+      purchasePrice: 70000,
+      downPayment: 0.2,
+      interestRate: 0.045,
+      rent: 975,
+      annualTaxes: 2400,
+      insurance: 200,
+      expenseRatio: 0.15,
+      financingOption: FinancingOption.Mortgage,
+      propManagement: 0.1,
+      hoa: 0,
+      miscExpenses: 0,
+      uuid: "e2c5ea65-d16a-4a27-ae6d-c6516e6d0591",
+    },
+    {
+      title: "42 Wallaby Way",
+      purchasePrice: 1000000,
+      downPayment: 0.2,
+      interestRate: 0.045,
+      rent: 2150,
+      annualTaxes: 4800,
+      insurance: 400,
+      expenseRatio: 0.15,
+      financingOption: FinancingOption.Mortgage,
+      propManagement: 0.1,
+      hoa: 0,
+      miscExpenses: 0,
+      uuid: "144588a0-1047-4d05-b1ea-af5c1de54309",
+    },
+  ],
 });

frontend/src/store.ts

@@ -33,6 +33,7 @@ struct Claims {
 }
 
 #[derive(Serialize, Deserialize, PartialEq, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
 struct Investment {
     purchase_price: u32,
     uuid: String,