From 5d0216657c3697b0e9b1d9d6cfbb6945dce68a96 Mon Sep 17 00:00:00 2001 From: Adiron Date: Tue, 10 Dec 2019 00:38:46 -0500 Subject: [PATCH 1/4] began componenting out the pieces of app.js. Rendering no longer working. --- src/App.js | 15 ++++- src/components/profile/profile.component.jsx | 68 ++++++++++++++++++++ 2 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 src/components/profile/profile.component.jsx diff --git a/src/App.js b/src/App.js index 18c8beb..a6799ee 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,8 @@ import React, { Component } from 'react'; import LRTree from 'legislative-rtree'; import {geolocated} from 'react-geolocated'; +import Profile from './components/profile/profile.component' + function _browserLocation(props) { if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) return {}; @@ -13,6 +15,15 @@ function _browserLocation(props) { return {}; } +class App extends Component { + render(){ + return (
+ +
+ ) + } +} +/* class App extends Component { constructor(props) { @@ -58,12 +69,12 @@ class App extends Component { Districts from your location: {districts.map((d, i) => ())}

- mimiced google civics: 
{JSON.stringify(civ, null, 2)}
+ mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
); } } - +*/ const District = props => { return (
diff --git a/src/components/profile/profile.component.jsx b/src/components/profile/profile.component.jsx new file mode 100644 index 0000000..8b19321 --- /dev/null +++ b/src/components/profile/profile.component.jsx @@ -0,0 +1,68 @@ +import React from 'react' +import LRTree from 'legislative-rtree'; +import {geolocated} from 'react-geolocated'; + + +function _browserLocation(props) { + if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) + return {}; + if (props.coords) + return { + lng: props.coords.longitude, + lat: props.coords.latitude + }; + return {}; + } + +class Profile extends React.Component { + + constructor(props) { + super(props); + + this.state = { + districts: [], + civ: {}, + }; + } + + componentDidMount() { + this._loadData(); + } + + _loadData = async () => { + let tree = new LRTree(); + + let location = _browserLocation(this.props); + + if (!location.lng) { + setTimeout(() => this._loadData(), 500); + return; + } + + let districts = await tree.getDistricts(location.lng, location.lat); + let civ = await tree.mimicGoogleCivicsAPI(location.lng, location.lat); + + this.setState({civ, districts}); + } + + render() { + const {civ, districts} = this.state; + + let location = _browserLocation(this.props); + if (!location.lng || !location.lat) return (
Loading location from browser...
); + + return ( +
+ Location from your browser: {JSON.stringify(location)} +
+
+ {/* Districts from your location: {districts.map((d, i) => ())} */} +
+
+ mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
+
+ ); + } + } + + export default Profile \ No newline at end of file From 361a49a8cc6113aa44455fe5e0ec525513265e96 Mon Sep 17 00:00:00 2001 From: Adiron Date: Thu, 12 Dec 2019 16:50:05 -0500 Subject: [PATCH 2/4] Created components to duplicate functionality of for district and location data --- src/App.js | 24 ++++++++----------- .../district/district.component.jsx | 14 +++++++++++ .../district/districts.component.jsx | 14 +++++++++++ .../location-component/location.component.jsx | 11 +++++++++ src/components/profile/profile.component.jsx | 23 ++++++++++++++---- 5 files changed, 67 insertions(+), 19 deletions(-) create mode 100644 src/components/district/district.component.jsx create mode 100644 src/components/district/districts.component.jsx create mode 100644 src/components/location-component/location.component.jsx diff --git a/src/App.js b/src/App.js index a6799ee..6c54325 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,8 @@ import React, { Component } from 'react'; import LRTree from 'legislative-rtree'; import {geolocated} from 'react-geolocated'; -import Profile from './components/profile/profile.component' +import Location from './components/location-component/location.component' +import Districts from './components/district/districts.component' function _browserLocation(props) { if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) @@ -15,15 +16,8 @@ function _browserLocation(props) { return {}; } -class App extends Component { - render(){ - return (
- -
- ) - } -} -/* + + class App extends Component { constructor(props) { @@ -47,7 +41,7 @@ class App extends Component { if (!location.lng) { setTimeout(() => this._loadData(), 500); return; - } + } let districts = await tree.getDistricts(location.lng, location.lat); let civ = await tree.mimicGoogleCivicsAPI(location.lng, location.lat); @@ -63,10 +57,10 @@ class App extends Component { return (
- Location from your browser: {JSON.stringify(location)} + { /* Location from your browser: {JSON.stringify(location)} */ }

- Districts from your location: {districts.map((d, i) => ())} + {/*Districts from your location: {districts.map((d, i) => ())}*/} x

mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
@@ -74,7 +68,8 @@ class App extends Component { ); } } -*/ + +/* const District = props => { return (
@@ -82,6 +77,7 @@ const District = props => {
); } +*/ export default geolocated({ positionOptions: { diff --git a/src/components/district/district.component.jsx b/src/components/district/district.component.jsx new file mode 100644 index 0000000..7ab8cd1 --- /dev/null +++ b/src/components/district/district.component.jsx @@ -0,0 +1,14 @@ +import React from 'react'; + + +const District = ( props ) => { + return ( +
+ You are located in {props.dist.state} {props.dist.type} {props.dist.name} +
+ ); + } + + + + export default District; \ No newline at end of file diff --git a/src/components/district/districts.component.jsx b/src/components/district/districts.component.jsx new file mode 100644 index 0000000..b53504b --- /dev/null +++ b/src/components/district/districts.component.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import District from './district.component' + +const Districts = (props) => { + + + return ( +
+ Districts from your location: {props.dist.map((d, i) => ())} +
+ ) +} + +export default Districts; \ No newline at end of file diff --git a/src/components/location-component/location.component.jsx b/src/components/location-component/location.component.jsx new file mode 100644 index 0000000..1168da3 --- /dev/null +++ b/src/components/location-component/location.component.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Location = ( {...otherProps} ) => ( +
+ Location from your browser: { + JSON.stringify(otherProps.location) + } +
+ ) + +export default Location \ No newline at end of file diff --git a/src/components/profile/profile.component.jsx b/src/components/profile/profile.component.jsx index 8b19321..8fa17b6 100644 --- a/src/components/profile/profile.component.jsx +++ b/src/components/profile/profile.component.jsx @@ -1,8 +1,8 @@ import React from 'react' -import LRTree from 'legislative-rtree'; +/*import LRTree from 'legislative-rtree'; import {geolocated} from 'react-geolocated'; - - +*/ +/* function _browserLocation(props) { if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) return {}; @@ -14,6 +14,16 @@ function _browserLocation(props) { return {}; } +*/ +const Profile = ( {...otherProps} ) => ( +
+ Location from your browser: { + JSON.stringify(otherProps.location) + } +
+) + + /* class Profile extends React.Component { constructor(props) { @@ -56,7 +66,7 @@ class Profile extends React.Component { Location from your browser: {JSON.stringify(location)}

- {/* Districts from your location: {districts.map((d, i) => ())} */} + {/* Districts from your location: {districts.map((d, i) => ())} }

mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
@@ -65,4 +75,7 @@ class Profile extends React.Component { } } - export default Profile \ No newline at end of file + export default Profile + */ + + export default Profile; \ No newline at end of file From 89feb96a9b35ca9b33898764607d451243d1e126 Mon Sep 17 00:00:00 2001 From: Adiron Date: Thu, 12 Dec 2019 17:06:15 -0500 Subject: [PATCH 3/4] cleaned up some comments --- src/App.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 6c54325..288e029 100644 --- a/src/App.js +++ b/src/App.js @@ -57,10 +57,10 @@ class App extends Component { return (
- { /* Location from your browser: {JSON.stringify(location)} */ } +

- {/*Districts from your location: {districts.map((d, i) => ())}*/} x +

mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
@@ -69,15 +69,7 @@ class App extends Component { } } -/* -const District = props => { - return ( -
- You are located in {props.dist.state} {props.dist.type} {props.dist.name} -
- ); -} -*/ + export default geolocated({ positionOptions: { From 0d0b15cdb697295f9f1e8721128891f3d9c03ada Mon Sep 17 00:00:00 2001 From: Adiron Date: Thu, 13 Feb 2020 15:55:46 -0500 Subject: [PATCH 4/4] created components for poc. Added redux --- package-lock.json | 14 ++++ package.json | 3 +- src/App.js | 9 ++- .../district/district.component.jsx | 2 +- src/components/profile/profile.component.jsx | 75 +------------------ 5 files changed, 23 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index 737babc..f2e241d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9837,6 +9837,15 @@ "minimatch": "3.0.4" } }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -11149,6 +11158,11 @@ "util.promisify": "~1.0.0" } }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 144c8f6..ab276f6 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "react": "^16.9.0", "react-dom": "^16.9.0", "react-geolocated": "^2.5.1", - "react-scripts": "3.1.1" + "react-scripts": "3.1.1", + "redux": "^4.0.5" }, "eslintConfig": { "extends": "react-app" diff --git a/src/App.js b/src/App.js index 288e029..0b2e511 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import {geolocated} from 'react-geolocated'; import Location from './components/location-component/location.component' import Districts from './components/district/districts.component' +import Profile from './components/profile/profile.component' function _browserLocation(props) { if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) @@ -51,19 +52,19 @@ class App extends Component { render() { const {civ, districts} = this.state; - + let properties = ["name", "address", "line1", "line2", "line3", "zip", "phone", "phones", "photoUrl", "city", "party", "urls", "type", "id"] let location = _browserLocation(this.props); if (!location.lng || !location.lat) return (
Loading location from browser...
); return (
- +

- +

- mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
+
); } diff --git a/src/components/district/district.component.jsx b/src/components/district/district.component.jsx index 7ab8cd1..708af07 100644 --- a/src/components/district/district.component.jsx +++ b/src/components/district/district.component.jsx @@ -3,7 +3,7 @@ import React from 'react'; const District = ( props ) => { return ( -
+
You are located in {props.dist.state} {props.dist.type} {props.dist.name}
); diff --git a/src/components/profile/profile.component.jsx b/src/components/profile/profile.component.jsx index 8fa17b6..f281127 100644 --- a/src/components/profile/profile.component.jsx +++ b/src/components/profile/profile.component.jsx @@ -1,81 +1,8 @@ import React from 'react' -/*import LRTree from 'legislative-rtree'; -import {geolocated} from 'react-geolocated'; -*/ -/* -function _browserLocation(props) { - if (!props.isGeolocationAvailable || !props.isGeolocationEnabled) - return {}; - if (props.coords) - return { - lng: props.coords.longitude, - lat: props.coords.latitude - }; - return {}; - } -*/ const Profile = ( {...otherProps} ) => (
- Location from your browser: { - JSON.stringify(otherProps.location) - } + mimiced google civics: 
{JSON.stringify(otherProps.official.officials, otherProps.properties, 2)}
) - - /* -class Profile extends React.Component { - - constructor(props) { - super(props); - - this.state = { - districts: [], - civ: {}, - }; - } - - componentDidMount() { - this._loadData(); - } - - _loadData = async () => { - let tree = new LRTree(); - - let location = _browserLocation(this.props); - - if (!location.lng) { - setTimeout(() => this._loadData(), 500); - return; - } - - let districts = await tree.getDistricts(location.lng, location.lat); - let civ = await tree.mimicGoogleCivicsAPI(location.lng, location.lat); - - this.setState({civ, districts}); - } - - render() { - const {civ, districts} = this.state; - - let location = _browserLocation(this.props); - if (!location.lng || !location.lat) return (
Loading location from browser...
); - - return ( -
- Location from your browser: {JSON.stringify(location)} -
-
- {/* Districts from your location: {districts.map((d, i) => ())} } -
-
- mimiced google civics: 
{JSON.stringify(civ.officials, null, 2)}
-
- ); - } - } - - export default Profile - */ - export default Profile; \ No newline at end of file