Refactor and update the create/find campaign flow

client/src/components/AuthenticatedRoutes.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withRouter } from 'react-router';
+import Loading from './ChooseCampaign/Loading';
+
+function AuthenticatedRoutes({ auth, children, router, location }) {
+  if (auth && auth.loading) {
+    return <Loading />;
+  } else if (auth.status !== 'SIGNED_IN') {
+    router.push({
+      pathname: '/login',
+      state: { nextPathname: location.pathname }
+    });
+  }
+
+  return children;
+}
+
+AuthenticatedRoutes.defaultProps = {
+  auth: null,
+  location: null
+};
+
+AuthenticatedRoutes.propTypes = {
+  auth: PropTypes.shape({
+    status: PropTypes.string.isRequired,
+    loading: PropTypes.bool.isRequired,
+    uid: PropTypes.string
+  }),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  router: PropTypes.shape({
+    push: PropTypes.func.isRequired
+  }).isRequired,
+  location: PropTypes.shape({
+    pathname: PropTypes.string.isRequired
+  })
+};
+
+export default withRouter(AuthenticatedRoutes);

client/src/components/AutoSuggestInput.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
 import scriptLoader from 'react-async-script-loader';
 import { GeoPoint } from '../firebase';
-import { clearSearchResults } from '../redux/actions/initialSearch';
+import { clearSearchResults } from '../redux/actions/firebaseInitialSearch';
 
 class AutoSuggestInput extends Component {
   constructor(props) {

client/src/components/ChooseCampaign/CampaignAlreadyExists.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Grid, Row, Col } from 'react-bootstrap';
+import AddressHeading from '../UtilComponents/AddressHeading';
+import SubmitButton from '../UtilComponents/SubmitButton';
+import Loading from './Loading';
+
+const CampaignAlreadyExists = ({ exactMatch, router }) => {
+  if (!exactMatch) {
+    console.error('Eek! We are not handling this case properly');
+    return <Loading />;
+  }
+  return (
+    <Grid>
+      <Row>
+        <Col xs={12} md={4} mdOffset={4} className="p-0 text-white">
+          <AddressHeading
+            headingTitle={'Looks like this address already has a campaign. Is this your address?'}
+            subTitle={exactMatch.address}
+          />
+          <SubmitButton
+            handleSelection={() => {
+              router.push(`/campaign/${exactMatch.campaignId}`);
+            }}
+            buttonText={'Yup! Show Me!'}
+            name={'EXISTING_CAMPAIGN'}
+          />
+          <div style={{ marginTop: '1em' }} />
+          <SubmitButton
+            handleSelection={router.goBack}
+            buttonText={'Nope, Take Me Back'}
+            name={'GO BACK'}
+            faArrowDirection={'left'}
+          />
+        </Col>
+      </Row>
+    </Grid>
+  );
+};
+
+CampaignAlreadyExists.defaultProps = {
+  exactMatch: null
+};
+
+CampaignAlreadyExists.propTypes = {
+  exactMatch: PropTypes.shape({
+    address: PropTypes.string.isRequired,
+    campaignId: PropTypes.string.isRequired
+  }),
+  router: PropTypes.shape({
+    goBack: PropTypes.func.isRequired
+  }).isRequired
+};
+
+export default withRouter(CampaignAlreadyExists);

client/src/components/ChooseCampaign/RenderLoading.js → client/src/components/ChooseCampaign/Loading.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-const RenderLoading = () => (
+const Loading = () => (
   <div className="loader">
     <h1 className="loading-header">Searching for nearby campaigns...</h1>
     <i className="fa fa-recycle fa-4x slow-spin loading-spinner" />
   </div>
 );
 
-export default RenderLoading;
+export default Loading;

client/src/components/ChooseCampaign/RenderNearbyCampaigns.js → client/src/components/ChooseCampaign/NearbyCampaigns.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// import RenderAddressHeading from './RenderAddressHeading';
+// import AddressHeading from './RenderAddressHeading';
 // import SubmitButton from './SubmitButton';
 
-const RenderNearbyCampaigns = ({ nearbyCampaigns, selectedAddress }) => (
+const NearbyCampaigns = ({ nearbyCampaigns, selectedAddress }) => (
   <div>
     {/* <form>
-      <RenderAddressHeading headingTitle={'We found some campaigns nearby!'} />
+      <AddressHeading headingTitle={'We found some campaigns nearby!'} />
       {nearbyCampaigns} {selectedAddress}
       <SubmitButton buttonText={'JOIN CAMPAIGN'} />
     </form> */}
   </div>
 );
 
-RenderNearbyCampaigns.propTypes = {
+NearbyCampaigns.propTypes = {
   nearbyCampaigns: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectedAddress: PropTypes.string.isRequired
 };
 
-export default RenderNearbyCampaigns;
+export default NearbyCampaigns;

client/src/components/ChooseCampaign/NewCampaign.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Grid, Row, Col } from 'react-bootstrap';
+import SubmitButton from '../UtilComponents/SubmitButton';
+import AddressHeading from '../UtilComponents/AddressHeading';
+
+function NewCampaign({ auth, router }) {
+  const handleSelection = () => {
+    auth.uid
+      ? router.push({
+          pathname: '/create-campaign'
+        })
+      : router.push({
+          pathname: '/login',
+          state: {
+            createCampaignFlow: true
+          }
+        });
+  };
+  return (
+    <Grid>
+      <Row>
+        <Col xs={12} md={4} mdOffset={4} className="p-0 text-white">
+          <AddressHeading
+            headingTitle={"You're the first to support recycling for your building!"}
+            subTitle={
+              'As the leader for your campaign, your account lets you access your campaign and make progress.'
+            }
+          />
+          <SubmitButton
+            buttonText={'CREATE CAMPAIGN'}
+            handleSelection={handleSelection}
+            name={'NEW_CAMPAIGN'}
+          />
+        </Col>
+      </Row>
+    </Grid>
+  );
+}
+
+NewCampaign.defaultProps = {
+  firebaseCampaigns: { activeCampaign: null },
+  firebaseInitialSearch: null
+};
+
+NewCampaign.propTypes = {
+  auth: PropTypes.shape({
+    status: PropTypes.string.isRequired,
+    loading: PropTypes.bool.isRequired,
+    uid: PropTypes.string
+  }).isRequired,
+  router: PropTypes.shape({
+    push: PropTypes.func.isRequired
+  }).isRequired
+};
+
+export default withRouter(NewCampaign);

client/src/components/CreateCampaignSteps/CreateCampaign.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Grid, Row, Col } from 'react-bootstrap';
+import SubmitButton from '../UtilComponents/SubmitButton';
+import AddressHeading from '../UtilComponents/AddressHeading';
+
+class CreateCampaign extends React.Component {
+  state = {
+    creatingCampaign: false
+  };
+
+  _makeNewCampaign = async () => {
+    this.setState({ creatingCampaign: true });
+    const { auth, firebaseCreateNewCampaign, firebaseInitialSearch } = this.props;
+    await firebaseCreateNewCampaign(
+      firebaseInitialSearch.searchedAddress,
+      firebaseInitialSearch.searchedGeoPoint,
+      auth.uid
+    );
+    // Route redirect handleing in Redux
+  };
+
+  render() {
+    return (
+      <Grid>
+        <Row>
+          <Col xs={12} md={4} mdOffset={4} className="p-0 text-white">
+            <AddressHeading
+              headingTitle={"You're the first to support recycling for your building!"}
+              subTitle={
+                "Launch your building's request for recycling! (We promise it will only take a minute)"
+              }
+            />
+            <SubmitButton
+              buttonText={'CREATE CAMPAIGN'}
+              handleSelection={this._makeNewCampaign}
+              name={'NEW_CAMPAIGN'}
+              disabled={this.state.creatingCampaign}
+            />
+          </Col>
+        </Row>
+      </Grid>
+    );
+  }
+}
+
+CreateCampaign.defaultProps = {
+  firebaseInitialSearch: null
+};
+
+CreateCampaign.propTypes = {
+  auth: PropTypes.shape({
+    status: PropTypes.string.isRequired,
+    loading: PropTypes.bool.isRequired,
+    uid: PropTypes.string
+  }).isRequired,
+  firebaseCreateNewCampaign: PropTypes.func.isRequired,
+  firebaseInitialSearch: PropTypes.shape({
+    searchedGeoPoint: PropTypes.shape({
+      _lat: PropTypes.number.isRequired,
+      _long: PropTypes.number.isRequired
+    }).isRequired
+  })
+};
+
+export default withRouter(CreateCampaign);

client/src/components/Login.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router';
+import { Button } from 'react-bootstrap';
+
+const NavBarSignIn = ({ auth, firebaseSignInGoogle, firebaseSignInFacebook, router }) => {
+  if (auth.status === 'SIGNED_IN' && router.location.state.createCampaignFlow === true) {
+    router.push('/create-campaign');
+  }
+
+  return (
+    <div>
+      To continue please sign in:{' '}
+      <Button bsStyle="primary" onClick={firebaseSignInFacebook}>
+        Sign in With Facebook
+      </Button>{' '}
+      <Button bsStyle="primary" onClick={firebaseSignInGoogle}>
+        Sign in With Google
+      </Button>
+    </div>
+  );
+};
+
+NavBarSignIn.propTypes = {
+  auth: PropTypes.shape({}).isRequired,
+  firebaseSignInGoogle: PropTypes.func.isRequired,
+  firebaseSignInFacebook: PropTypes.func.isRequired,
+  router: PropTypes.shape({
+    goBack: PropTypes.func.isRequired
+  }).isRequired
+};
+
+export default withRouter(NavBarSignIn);