FocalPoints · johnnybryan · Nov 9, 2021 · Nov 9, 2021 · Nov 9, 2021 · Nov 9, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+.DS_STORE
diff --git a/README.md b/README.md
@@ -1 +1,7 @@
-# Halfway
+# MidPoint
+An app to connect friends and encourage in-person meet-ups through geocoding.
+
+Requires a Google Maps API Key to run.
+Requires Postgre SQL Database.
+
+Tags: React Redux Express Node.js PostgreSQL Geocoder Bcrypt Google Maps
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/build/bundle.js.LICENSE.txt b/build/bundle.js.LICENSE.txt
@@ -0,0 +1,41 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1 @@
+<html><head><meta charset="UTF-8"><title>Halfway</title><script defer="defer" src="bundle.js"></script></head><body><div id="root">Index.html</div></body></html>
diff --git a/client/App.jsx b/client/App.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes as Switch } from 'react-router-dom'
+import Access from './components/Access'
+import Main from './components/Main'
+
+
+// connect to endpoints
+const App = () => (
+  <div id="app">
+    <Router>
+      <Switch>
+        <Route path='/' element={<Access/>} />
+        <Route path='/main' element={<Main />} />
+      </Switch>
+    </Router>
+  </div>
+);
+
+export default App;
diff --git a/client/actions/actions.js b/client/actions/actions.js
@@ -0,0 +1,107 @@
+import * as types from '../constants/actionTypes';
+import axios from 'axios';
+
+export const logIn = (username, password) => (dispatch) => {
+  const request = {
+    method: 'GET',
+    url: '/database/login',
+    params: {username, password}
+  }
+
+  axios.request(request).then((response) => {
+    if(response.status = 201) dispatch({
+      type: types.LOG_IN,
+      payload: response.data, //will hold the user object
+    });
+  }).catch(console.error);
+};
+
+export const pageToSignup = () => ({
+  type: types.PAGE_TO_SIGN_UP,
+});
+
+export const signUpUser = (username, password, address) => (dispatch) => {
+  // const coordinates = {lat, lng}  
+
+  const request = {
+      method: 'POST',
+      url: '/database/signup',
+      data: {username, password, address}
+    }
+
+    axios.request(request).then((response) => {
+      if(response.status = 201) dispatch({
+        type: types.SIGN_UP_USER,
+        payload: response.data,
+      });
+    }).catch(console.error);
+};
+
+
+export const signUpCancel = () => ({
+  type: types.SIGN_UP_CANCEL,
+});
+
+export const updateLocation = (address) => ({
+  type: types.UPDATE_LOCATION,
+  payload: {address},
+})
+
+export const getMidpoint = (userCoords, friendCoords) => {
+
+  const lat = (userCoords.lat + friendCoords.lat) / 2;
+  const lng = (userCoords.lng + friendCoords.lng) / 2;
+
+  return ({
+    type: types.GET_MIDPOINT,
+    payload:  {'lat': lat, 'lng': lng}
+  })
+}
+
+export const addFriend = (user1_id, user2_id) => (dispatch) => {
+  const request = {
+    method: 'POST',
+    url: 'database/friend',
+    data: {user1_id, user2_id}
+  }
+
+  axios.request(request).then((response) => {
+    if(response.status = 201) dispatch({
+      type: types.ADD_FRIEND,
+      payload: response.data,
+    });
+  }).catch(console.error);
+}
+
+
+
+// export const deleteCard = id => (dispatch, getState) => {
+//   if (getState().markets.marketList[id].cards > 0) {
+//     dispatch({ type: types.DELETE_CARD, payload: id });
+//   }
+// };
+
+
+
+
+// export const buyStock = () => (dispatch, getState) => {
+//   // grab the symbol from state
+//   const sym = getState().stocks.searchBar;
+//   const user_id = getState().stocks.user_id;
+//   // hit API to get current price of stock
+//   const options = {
+//     method: 'POST',
+//     url: '/transaction',
+//     data: {user_id},
+//     params: {region: 'US', symbols: sym}
+//   }
+//   // make a post to the stocks database adding the stock name and current price
+//   // make a post to the transactions database with the current user and the stock ID and time, sold price/sold time null
+//   axios.request(options).then((response) => {
+//     if(response.status = 201) dispatch({
+//       type: types.BUY_STOCK,
+//       payload: response.data,
+//     });
+//   }).catch(console.error);
+//   // hit reducer to update state with the new query of all transactions...
+// };
diff --git a/client/components/Access.jsx b/client/components/Access.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Route, Routes as Switch } from 'react-router-dom'
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import * as actions from '../actions/actions';
+import Main from './Main';
+
+const mapStateToProps = ({
+   mainPage: { currentUserID, pageToDisplay , loggedIn , selfInfo, friendsList, notFriendsList, midpoint } 
+  }) => ({
+  pageToDisplay,
+  loggedIn,
+  selfInfo,
+  friendsList,
+  notFriendsList,
+  midpoint,
+  currentUserID,
+});
+
+const mapDispatchToProps = dispatch => ({
+  pageToSignup: () => dispatch(actions.pageToSignup()),
+  signUpCancel: () => dispatch(actions.signUpCancel()),
+  logIn: (user,pass) => dispatch(actions.logIn(user,pass)),
+  signUpUser: (user,pass,address) => dispatch(actions.signUpUser(user,pass,address)),
+  updateLocation: (address) => dispatch(actions.updateLocation(address)),
+  getMidpoint: (user, friendUser) => dispatch(actions.getMidpoint(user, friendUser)),
+  addFriend: (user1_id, user2_id) => dispatch(actions.addFriend(user1_id, user2_id)),
+});
+
+
+const Access = ({pageToDisplay, currentUserID, addFriend, loggedIn, pageToSignup, signUpCancel, logIn, signUpUser, selfInfo, updateLocation, friendsList, notFriendsList, getMidpoint, midpoint}) => {
+
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [address, setAddress] = useState('');
+
+  function onChangeHandler(event) {
+      const { name, value } = event.currentTarget;
+      if(name === "username") {
+        setUsername(value);
+      } else if(name === 'password') {
+        setPassword(value);
+      } else if(name === 'address') {
+        setAddress(value);
+      } 
+  }
+
+   if (loggedIn) {
+    return (<Main {...selfInfo} updateLocation={updateLocation} friendsList={friendsList} notFriendsList={notFriendsList} getMidpoint={getMidpoint} currentUserID={currentUserID} addFriend={addFriend} midpoint={midpoint}/>)
+  }
+
+  // Log In Page
+  if (pageToDisplay === 'login') return (
+    <div className='loginStyles'>
+
+      <h1>Login Page</h1>
+      <img src='https://i.imgur.com/YQ3shad.png'/>
+      <input 
+        name="username"
+        type="text"
+        placeholder="Username"
+        value={username}
+        onChange={(event) => onChangeHandler(event)}
+      />
+      <input 
+        name="password"
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(event) => onChangeHandler(event)}
+        />
+      <button onClick={() => logIn(username,password)}>Login</button> 
+      <button onClick={pageToSignup}>Sign-up</button>
+
+    </div>
+  );
+
+
+
+  // Sign Up Page
+  return (
+    <div className='loginStyles'>
+
+      <h1>Sign-up Page</h1>
+      <img src='https://i.imgur.com/YQ3shad.png'/>
+
+        <input name="username" id="username" value={username} type="text" placeholder="Username" onChange={(event) => onChangeHandler(event)}></input> 
+        <input name="password" id="password" value={password} type="password" placeholder="Password" onChange={(event) => onChangeHandler(event)}></input>
+        <input name="address" id="address" value={address} type="text" placeholder="45 main street" onChange={(event) => onChangeHandler(event)}></input>
+
+        <button onClick={() => {if((username || password || address) !== '') signUpUser(username,password,address)}}>Create an account</button>
+        <button onClick={signUpCancel}>Cancel</button>  
+    </div>
+  );
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Access);
diff --git a/client/components/Main.jsx b/client/components/Main.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Map from './Map'
+import Sidebar from './Sidebar'
+
+const Main = (props) => {
+    return(
+      <div id="main-content" className='mainStyles'>
+        <Sidebar {...props}/>
+        <Map {...props}/>
+      </div>
+    )
+}
+
+export default Main;
diff --git a/client/components/Map.jsx b/client/components/Map.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import GoogleMapReact from 'google-map-react';
+
+const imgUrl = 'https://i.imgur.com/WTHBUgm.png';
+const Marker = ({ icon }) => <img height={'100px'} width={'100px'} src={imgUrl}></img>;
+
+const Map = ({midpoint}) => {
+    return(
+
+        <div id="right-side-content" className='mapContainer'>
+          {console.log('we are in maps', midpoint.lat, midpoint.lng) }
+           {console.log('is middle point an object', midpoint) }
+
+
+          <div id="map-container" className='mapStyles'>
+            <GoogleMapReact 
+              bootstrapURLKeys={{key: 'AIzaSyAG8pD29eYb7EnZNrNFinFbmMtJiqqnzKI'}}
+              defaultCenter={midpoint}
+              defaultZoom={12}>
+              {/* do markers go in here? */}
+              <Marker lat={midpoint.lat} lng = {midpoint.lng} text='midpoint' icon={imgUrl} />
+            </GoogleMapReact>
+          </div>
+        </div>
+      )
+}
+
+
+export default Map;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<html><head><meta charset="UTF-8"><title>Halfway</title><script defer="defer" src="bundle.js"></script></head><body><div id="root">Index.html</div></body></html>