yolo

Author: sh1mmer

gatsby-browser.js

@@ -3,11 +3,14 @@ import { Provider } from "react-redux";
 import initStore from "./src/methods/initStore";
 import { I18nextProvider } from "react-i18next";
 import i18n from "./src/methods/i18n";
+import { AppContextProvider } from "./src/components/AppContext"
 
 const store = initStore();
 
 export const wrapRootElement = ({ element }) => (
-  <Provider store={store}>
-    <I18nextProvider i18n={i18n}>{element}</I18nextProvider>
-  </Provider>
+  <AppContextProvider>
+    <Provider store={store}>
+      <I18nextProvider i18n={i18n}>{element}</I18nextProvider>
+    </Provider>
+  </AppContextProvider>
 );

package-lock.json

@@ -0,0 +1,68 @@
+import React from "react";
+
+// Explainer here: https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/
+// See also: ../../gatsby-browser.js
+
+/*
+zip: '', // zip code
+area: '', // statistical area for CPI calc
+town: '', // encorporated town/city for local ordinances 
+county: '', // county for local ordinances
+building_age: null, // building age (proxy for certificate of occupancy)
+rental_type: null, // category of rental (e.g. condo, sfh, room, dorm room, hotel, etc)
+duplex: null, // in a unit of a duplex
+sfh_or_condo: null, // in a condo or single family home (proxy for alienable separable from title)
+share_with_landlord: null, // do they share either a sfh/condo with landlord or duplex
+share_bathroom_kitchen: null, // do they share a bathroom of kitchen with their landlord
+gov_housing: null, // is it gov housing (or subsidized)
+dorm: null, // is it a dorm
+corp_owned: null, // is it owned by a corp
+notice: null, // did they get a notice of excemption
+shared_with_landlord_start_of_lease: null, // did they share with the landlord at the start of their lease
+*/
+
+const defaultState = {
+    appCtx: {},
+    updateContext: () => { },
+}
+const AppContext = React.createContext(defaultState);
+
+class AppContextProvider extends React.Component {
+    state = {
+        appCtx: {}
+    }
+
+    updateContext = (appCtx) => {
+        this.setState({ appCtx }, () => {
+            console.log('updated context : ' + appCtx);
+        });
+    }
+
+    componentDidMount() {
+        // Getting appstate mode value from localStorage!
+        const lsAppCtx = JSON.parse(localStorage.getItem("appCtx"))
+        if (lsAppCtx) {
+            this.setState({ appCtx: lsAppCtx })
+        }
+    }
+
+    render() {
+        const { children } = this.props;
+        const { appCtx } = this.state;
+
+        return (
+            <AppContext.Provider
+                value={{
+                    appCtx,
+                    updateContext: this.updateContext,
+                }}
+            >
+                {children}
+            </AppContext.Provider>
+        )
+
+    }
+}
+
+export default AppContext;
+export { AppContextProvider };

src/components/AppContext.js

@@ -1,7 +1,7 @@
 import React from "react";
 
-const Building = ({ title, description }) => (
-  <li className="building-card">
+const Building = ({ title, description, onClick }) => (
+  <li className="building-card" onClick={(e)=>{onClick(e)}}>
     <div></div>
     <h2>{title}</h2>
     <p>{description}</p>

src/components/Building.js

@@ -1,45 +1,60 @@
 import React from "react";
 import Building from "./Building";
+import AppContext from "./AppContext"
+import { navigate } from "@reach/router";
 
 const buildingTypes = [
   {
     title: "Apartment",
     description:
-      "Your building has multiple units that are all rented. No one owns their units in this building. "
+      "The property has multiple (3+) units that are all rented. In apartments buildings all residents will rent from the same owner.",
+      type: "apartment",
+      to: "/tom/state/apartments",
   },
   {
     title: "Duplex",
-    description: "Your building has exactly 2 separate units in it. "
+    description: "The property has exactly 2 separate units in it. The other unit may or may not be rented.",
+    type: "duplex",
+    to: "",
   },
   {
     title: "Single Family",
-    description: "Your building has one living space in it that you rent. "
+    description: "The property has one living space in it and you rent either all or some of it (such as a bedroom or an 'in-law' apartment).",
+    type: "sfh",
+    to: "",
   },
   {
     title: "Condo",
     description:
-      "Your building has multiple units that have been bought by individual owners. Some may be owned, but you rent your unit. "
-  },
-  {
-    title: "Dormitory",
-    description:
-      "You are a student living in housing that is owned and managed by a school or university."
-  },
-  {
-    title: "Public Housing",
-    description:
-      "You live in housing that is owned or managed by your local goverment. This also include Below Market Rate (BMR) housing."
+      "The property has multiple (3+) units that have been bought by individual owners. In a condo residents will either own their apartments or rent from different landlords.",
+    type: "condo",
+    to: "",
   }
 ];
 
-const Buildings = () => {
-  const listItems = buildingTypes.map(type => {
+const onClick = (appCtx, updateContext, type, to) => {
+  appCtx.buildingType = type;
+  updateContext(appCtx);
+
+  navigate(to);
+}
+
+const Buildings = (buildings) => {
+  if (Object.keys(buildings).length === 0) {
+    buildings = buildingTypes;
+  }
+  const listItems = buildings.map(building => {
     return (
-      <Building
-        key={type.title}
-        title={type.title}
-        description={type.description}
-      ></Building>
+      <AppContext.Consumer>
+        {({ appCtx, updateContext }) => (
+          <Building
+            key={building.title}
+            title={building.title}
+            description={building.description}
+            onClick={(e)=>{onClick(appCtx, updateContext, building.type, building.to)}}
+          ></Building>
+        )}
+      </AppContext.Consumer>
     );
   });
   return <ul className="buildings-list">{listItems}</ul>;

src/components/Buildings.js

@@ -22,7 +22,7 @@ export const SecondaryButton = ({ to, children }) => {
   );
 };
 
-export const PrimaryButton = ({ to, children }) => {
+export const PrimaryButton = ({ to, children}) => {
   return (
     <StyledPrimaryButton onClick={() => navigate(to)} type="button">
       {children}