Merge pull request Beaukenny#62 from Beaukenny/PhotosArray

Photos array

.env.example

@@ -2,3 +2,6 @@ FLASK_APP=app
 FLASK_ENV=development
 SECRET_KEY=lkasjdf09ajsdkfljalsiorj12n3490re9485309irefvn,u90818734902139489230
 DATABASE_URL=postgresql://starter_app_dev:appacademy@localhost/starter_app
+S3_BUCKET=<either Beau or Marys S3 Bucket name>
+S3_KEY=<Either Beau or Marys key>
+S3_SECRET_ACCESS_KEY=<Either Beau or Marys secret access key>

app/api/picture_routes.py

@@ -2,22 +2,84 @@
 from flask_login import login_required
 from app.models import Workout, db, Picture
 import json
-
+from ..config import Config
+import boto3
+from datetime import date
 
 picture_routes = Blueprint('pictures', __name__)
 
-
 @picture_routes.route('/')
-# @login_required
+@login_required
 def pictures_by_workout():
     pictures = Picture.query.join(Workout).order_by(Picture.workout_id.desc()).all()
 
     return {"pictures": [picture.to_dict() for picture in pictures]}
 
 
 @picture_routes.route('/all')
-# @login_required
+@login_required
 def pictures_all():
     pictures = Picture.query.all()
 
     return {"pictures": [picture.to_dict() for picture in pictures]}
+
+#
+# new picture
+#
+#
+
+@picture_routes.route('/<int:id>', methods=['GET'])
+def workoutPictures(id):
+    returnPictures = []
+    Pictures = Picture.query.filter(Picture.workout_id == id)
+    for picture in Pictures:
+        returnPictures.append({
+            "photoUrl": picture.url,
+        })
+    return jsonify(returnPictures)
+
+@picture_routes.route('/<int:id>', methods=['POST'])
+def postPhoto(id):
+    #constants needed for AWS request
+    credentials = {
+        'aws_access_key_id': Config.AWS_ACCESS_KEY_ID,
+        'aws_secret_access_key': Config.AWS_SECRET_ACCESS_KEY
+    }
+    region = Config.AWS_S3_REGION
+    client = boto3.client('s3', region, **credentials)
+    bucket = Config.S3_BUCKET
+    workoutId = id
+
+    #Now iterate through list and create S3 properties
+    list = request.files.getlist('image')
+    for i in list:
+        filename = i.filename.replace(" ", "")
+        key = '%s-%s' % (date.today(), filename)
+        properties = { 'ACL': 'public-read',
+                       'Body': i,
+                       'Bucket': bucket,
+                       'Key': key,
+                       'ContentType': i.mimetype
+        }
+        retVal = client.put_object(**properties)
+        status=retVal['ResponseMetadata']['HTTPStatusCode']
+
+        if (status != 200):
+            return status
+        else:
+            photoUrl = 'https://%s.s3-%s.amazonaws.com/%s' % (bucket, region, key)
+            updatePicture(photoUrl, workoutId)
+    return {"message": "ok"}
+
+
+
+
+def updatePicture(photoUrl, workoutId):
+    newPicture = Picture(
+        url=photoUrl,
+        workout_id =workoutId
+    )
+
+    db.session.add(newPicture)
+    db.session.commit()
+    return {"message": "ok"}

app/config.py

@@ -9,3 +9,4 @@ class Config:
     AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
     AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
     S3_BUCKET = os.environ.get('S3_BUCKET')
+    AWS_S3_REGION = os.environ.get('AWS_S3_REGION')

app/models/tempCodeRunnerFile.py

@@ -0,0 +1 @@
+self.

react-app/package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^7.1.2",
     "d3": "^6.2.0",
     "http-proxy-middleware": "^1.0.5",
+    "material-ui-dropzone": "^3.5.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-google-maps": "^9.4.5",

react-app/src/App.js

@@ -1,17 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 import LoginForm from "./components/auth/LoginForm";
 import SignUpForm from "./components/auth/SignUpForm";
-import NavBar from "./components/NavBar";
 import ProtectedRoute from "./components/auth/ProtectedRoute";
 import UsersList from "./components/UsersList";
 import User from "./components/User";
 import MapRoute from "./components/route/MapRoute";
-import { authenticate, logout } from "./services/auth";
+import { authenticate } from "./services/auth";
 import { CssBaseline } from "@material-ui/core";
 import Theme from './Theme';
 import Workout from './components/workout/Workout'
-import Home from "./components/Home";
 import Menuw from "./components/Menu";
 import MyRoutes from "./components/myRoute/MyRoutes"
 import Splash from './Splash';
@@ -20,6 +18,7 @@ import MyWorkouts from "./components/myWorkout/MyWorkouts"
 import WorkoutFeed from "./components/workout/WorkoutFeed"
 import NavBar2 from "./components/navigator/NavBar"
 import WorkoutDetail from "./components/myWorkout/WorkoutDetail"
+import "@reach/combobox/styles.css";
 
 function App() {
   const [authenticated, setAuthenticated] = useState(false);
@@ -33,7 +32,7 @@ function App() {
         window.localStorage.setItem("currentUser",user.id)
 
       }
-      
+
       setLoaded(true);
     })();
   }, []);
@@ -44,74 +43,51 @@ function App() {
 
   return (
     <CssBaseline>
-    <Theme>
-
-      <BrowserRouter>
-<NavBar2 ></NavBar2>
-        {/* <NavBar setAuthenticated={setAuthenticated} authenticated={authenticated} /> */}
-        {/* <Switch>
-          <Redirect exact from="/home" to="/home/workouts" />
-          <Route exact path="/home/:page?" render={props => <Home {...props} />} />
-        </Switch> */}
-
-
-        <Switch>
-        <Route exact path="/sign-up" component={SignUpForm} />
-        <Route exact path="/login" component={LoginForm} />
-        <Route exact path="/logout" redirect="/" />
-
-        <Route path='/' exact={true}>
-          <Splash setAuthenticated={setAuthenticated} authenticated={authenticated} />
-        </Route>
-
-        <Route path="/login" exact={true}>
-          <LoginForm authenticated={authenticated} setAuthenticated={setAuthenticated} />
-        </Route>
-
-        <Route path="/sign-up" exact={true}>
-          <SignUpForm authenticated={authenticated} setAuthenticated={setAuthenticated} />
-        </Route>
-
-        <ProtectedRoute path="/users" exact={true} authenticated={authenticated}>
-          <UsersList/>
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId/route/create" exact={true} authenticated={authenticated}>
-          <MapRoute />
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId/myroutes" exact={true} authenticated={authenticated}>
-          <MyRoutes />
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId/myworkouts" exact={true} authenticated={authenticated}>
-          <MyWorkouts />
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId/workout/:workoutId" exact={true} authenticated={authenticated}>
-          <WorkoutDetail />
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId/route/:routeId/workout/create" exact={true} authenticated={authenticated}>
-          <Workout />
-        </ProtectedRoute>
-        <ProtectedRoute path="/users/:userId" exact={true} authenticated={authenticated}>
-          <User />
-        </ProtectedRoute>
-        <ProtectedRoute path="/workouts" exact={true} authenticated={authenticated}>
-          <WorkoutFeed />
-        </ProtectedRoute>
-
-
-
-
-        <ProtectedRoute path="/user-options" exact={true} authenticated={authenticated}>
-          <div style={{ height: "fit-content", width: "fit-content", marginLeft: "60vw"}}>
-            <Menuw />
-          </div>
-        </ProtectedRoute>
-
-        <Route path="/search-result" exact={true}>
-          <SearchResult/>
-        </Route>
-        </Switch>
-      </BrowserRouter>
-    </Theme>
+      <Theme>
+        <BrowserRouter>
+          <NavBar2 ></NavBar2>
+          <Switch>
+            <Route exact path="/sign-up" component={SignUpForm} />
+            <Route exact path="/login" component={LoginForm} />
+            <Route exact path="/logout" redirect="/" />
+            <Route path='/' exact={true}>
+              <Splash setAuthenticated={setAuthenticated} authenticated={authenticated} />
+            </Route>
+            <ProtectedRoute path="/users" exact={true} authenticated={authenticated}>
+              <UsersList/>
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId/route/create" exact={true} authenticated={authenticated}>
+              <MapRoute />
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId/myroutes" exact={true} authenticated={authenticated}>
+              <MyRoutes />
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId/myworkouts" exact={true} authenticated={authenticated}>
+              <MyWorkouts />
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId/workout/:workoutId" exact={true} authenticated={authenticated}>
+              <WorkoutDetail />
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId/route/:routeId/workout/create" exact={true} authenticated={authenticated}>
+              <Workout />
+            </ProtectedRoute>
+            <ProtectedRoute path="/users/:userId" exact={true} authenticated={authenticated}>
+              <User />
+            </ProtectedRoute>
+            <ProtectedRoute path="/workouts" exact={true} authenticated={authenticated}>
+              <WorkoutFeed />
+            </ProtectedRoute>
+            <ProtectedRoute path="/user-options" exact={true} authenticated={authenticated}>
+              <div style={{ height: "fit-content", width: "fit-content", marginLeft: "60vw"}}>
+                <Menuw />
+              </div>
+            </ProtectedRoute>
+            <Route path="/search-result" exact={true}>
+              <SearchResult/>
+            </Route>
+          </Switch>
+        </BrowserRouter>
+      </Theme>
     </CssBaseline>
   );
 }

react-app/src/Theme.js

@@ -16,7 +16,6 @@ const theme = createMuiTheme({
     fontFamily: "Helvetica"
   }
 });
-// console.log(theme);
 
 const Theme = props => {
   return (