api and ui now works for: createChallenge, list(chlg,resp), respond, view response. createChallenge and listchallenge already worked.

Author: exrhizo

api/api/models.py

@@ -76,8 +76,8 @@ class Challenge(db.Model):
   instructions = db.Column(db.UnicodeText, nullable=False)
   grading_notes = db.Column(db.UnicodeText, nullable=False)
 
-  creator = db.relationship('User', backref='challenges')
-  creator_id = db.Column(UUID(as_uuid=True), db.ForeignKey('users.id'))
+  user = db.relationship('User', backref='challenges')
+  user_id = db.Column(UUID(as_uuid=True), db.ForeignKey('users.id'))
 
   video = db.relationship('Video', backref=backref('challenges', uselist=False))
   video_id = db.Column(UUID(as_uuid=True), db.ForeignKey('videos.id'), nullable=True)
@@ -95,6 +95,7 @@ class User(db.Model):
   id = db.Column(UUID(as_uuid=True), server_default=sqlalchemy.text("gen_random_uuid()"), primary_key=True)
   name = db.Column(db.Unicode(255))
   email = db.Column(db.String(255), unique=True, nullable=False)
+  # password = db.Column(db.Varchar(255))
 
   created_at = db.Column(db.DateTime(timezone=True), server_default=func.now(), nullable=False)
   updated_at = db.Column(db.DateTime(timezone=True), server_default=func.now(), onupdate=datetime.utcnow, nullable=False)

api/api/resources.py

@@ -34,22 +34,26 @@ def post(self):
 
     json = request.get_json()
 
-    print("REQUESTFIEL", request.files['videoBlob'])
     video = m.Video().create_and_upload(request.files['videoBlob'])
 
-    # TODO: don't create a new user each time!
-    user = m.User(
-      name = request.form['name'],
-      email = request.form['email']
-    )
+    user_name = request.form['name']
+    user_email = request.form['email']
+
+    user = m.User.query.filter_by(name=user_name, email=user_email).one_or_none()
+
+    if user == None:
+      user = m.User(
+        name = user_name,
+        email = user_email
+      )
 
-    user.save()
+      user.save()
 
     challenge = m.Challenge(
       title = request.form['title'],
       instructions = request.form['instructions'],
       grading_notes = request.form['grading_notes'],
-      creator = user,
+      user = user,
       video = video
     )
 
@@ -59,22 +63,58 @@ def post(self):
 
 class ChallengeList(Resource):
   def get(self):
+    # TODO: Add user name to the response
     challenges = m.Challenge.query.options(joinedload('video')).all()
 
     return s.ChallengeSchema(many=True).jsonify(challenges).json, 200
 
 class Response(Resource):
   def get(self, response_id):
-    response = m.Response.get_or_404(response_id)
+    response = m.Response.query.get_or_404(response_id)
 
     return s.ResponseSchema().jsonify(response).json, 200
 
 class ResponseList(Resource):
   def get(self):
-    responses = m.Response.query.all()
+    responses = m.Response.query.options(
+      joinedload('challenge'),
+      joinedload('user'),
+      joinedload('video')
+    ).all()
+
     return s.ResponseSchema(many=True).jsonify(responses).json, 200
 
 
 class CreateResponse(Resource):
   def post(self):
-    return {"<response>": "response"}, 201
+    if 'videoBlob' not in request.files:
+      abort(400)
+
+    json = request.get_json()
+
+    video = m.Video().create_and_upload(request.files['videoBlob'])
+
+    user_name = request.form['name']
+    user_email = request.form['email']
+
+    user = m.User.query.filter_by(name=user_name, email=user_email).one_or_none()
+
+    if user == None:
+      user = m.User(
+        name = user_name,
+        email = user_email
+      )
+
+      user.save()
+
+    challenge = m.Challenge.query.get_or_404(request.form['challengeId'])
+
+    response = m.Response(
+      challenge = challenge,
+      user = user,
+      video = video
+    )
+
+    response.save()
+
+    return s.ResponseSchema().jsonify(response).json, 201

api/api/schemas.py

@@ -6,7 +6,6 @@
 class VideoSchema(ModelSchema):
   class Meta:
     model = models.Video
-    exclude = ["challenges", "response"]
 
 class UserSchema(ModelSchema):
   class Meta:
@@ -17,7 +16,12 @@ class Meta:
     model = models.Challenge
 
   video = fields.Nested(VideoSchema)
+  user = fields.Nested(UserSchema)
 
 class ResponseSchema(ModelSchema):
   class Meta:
     model = models.Response
+
+  challenge = fields.Nested(ChallengeSchema)
+  video = fields.Nested(VideoSchema)
+  user = fields.Nested(UserSchema)

api/migrations/versions/ae32602be2ae_.py api/migrations/versions/7a8df53a11e8_.py

@@ -1,16 +1,16 @@
 """empty message
 
-Revision ID: ae32602be2ae
+Revision ID: 7a8df53a11e8
 Revises: 
-Create Date: 2019-07-02 23:20:48.175119
+Create Date: 2019-07-11 19:22:25.849737
 
 """
 from alembic import op
 import sqlalchemy as sa
 from sqlalchemy.dialects import postgresql
 
 # revision identifiers, used by Alembic.
-revision = 'ae32602be2ae'
+revision = '7a8df53a11e8'
 down_revision = None
 branch_labels = None
 depends_on = None
@@ -39,11 +39,11 @@ def upgrade():
     sa.Column('title', sa.Unicode(length=255), nullable=False),
     sa.Column('instructions', sa.UnicodeText(), nullable=False),
     sa.Column('grading_notes', sa.UnicodeText(), nullable=False),
-    sa.Column('creator_id', postgresql.UUID(as_uuid=True), nullable=True),
+    sa.Column('user_id', postgresql.UUID(as_uuid=True), nullable=True),
     sa.Column('video_id', postgresql.UUID(as_uuid=True), nullable=True),
     sa.Column('created_at', sa.DateTime(timezone=True), server_default=sa.text('now()'), nullable=False),
     sa.Column('updated_at', sa.DateTime(timezone=True), server_default=sa.text('now()'), nullable=False),
-    sa.ForeignKeyConstraint(['creator_id'], ['users.id'], ),
+    sa.ForeignKeyConstraint(['user_id'], ['users.id'], ),
     sa.ForeignKeyConstraint(['video_id'], ['videos.id'], ),
     sa.PrimaryKeyConstraint('id')
     )

ui/src/App.js

@@ -20,7 +20,6 @@ const App = () => (
         <ChallengeList path="/challenges" />
         <ChallengeRecorder path="/challenges/create" />
         <ResponseRecorder path="/challenges/:challengeId" />
-
         <ResponseList path="/responses" />
         <ResponseViewer path="/responses/:responseId" />
       </NavPage>

ui/src/api.js

@@ -1,92 +1,8 @@
 const API = "/api";
-const VIDEO_API = `${API}/videos`;
 const CHALLENGE_API = `${API}/challenges`;
+const RESPONSE_API = `${API}/responses`;
 
 class HumanApi {
-  constructor() {
-    this.challenges = [
-      {
-        challengeId: "45",
-        name: "car_crash",
-        instructions: "How much empathy do you have for bad drivers?",
-        gradingCriteria: "Does the viewer cringe?",
-        link: "https://fat.gfycat.com/PowerlessDiligentAstarte.webm",
-        author: "Brian Basham"
-      },
-      {
-        challengeId: "202",
-        name: "big_buck_bunny",
-        instructions: "Smile when you see animals!?",
-        gradingCriteria: "Does the viewer smile when they see animals?",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/19f32a31-5fd8-4ec9-85c4-5dc9216795f6",
-        author: "Leo Urbina"
-      },
-      {
-        challengeId: "345",
-        name: "brian_prices",
-        instructions: "Find out what Brian's budget is",
-        gradingCriteria: "How empathetic and curious are you?",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/d8912f88-3726-48e5-b280-fde3bf17d2b4",
-        author: "Brian Basham"
-      },
-      {
-        challengeId: "888",
-        name: "alex_cant_trust_tech",
-        instructions: "Find a way forward in the conversation",
-        gradingCriteria: "How empathetic and curious are you?",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/70e70f89-072e-4de1-9357-5214e5d6d6c9",
-        author: "Alex Warren"
-      }
-    ];
-
-    this.responses = [
-      {
-        responseId: "111",
-        challengeId: "345",
-        responder: "Leo Urbina",
-        notes: "I think I did OK.",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/cedd88e6-0841-4d2f-8b8e-123bc475f7a7"
-      },
-      {
-        responseId: "505",
-        challengeId: "345",
-        responder: "Alex Warren",
-        notes: "That was uncomfortable.",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/c1c57ea6-00bd-432f-a71c-09c7685ae70f"
-      },
-      {
-        responseId: "999",
-        challengeId: "888",
-        responder: "Brian Basham",
-        notes: "Couldn't stop laughing.",
-        link:
-          "https://storage.googleapis.com/the-human-factor-videos/10ded6f0-5e9f-45a9-88ce-a273cd1bb4ad"
-      }
-    ];
-  }
-
-  getResponseIds() {
-    return this.responses.map(response => {
-      return response.responseId;
-    });
-  }
-
-  getResponse(responseId) {
-    for (let response of this.responses) {
-      if (response.responseId === responseId) {
-        return response;
-      }
-    }
-    alert("no such response" + responseId);
-  }
-
-  addVideo(blob, callback) {}
-
   createChallenge(challenge) {
     let formData = this.convertToForm(challenge);
     return fetch(`${CHALLENGE_API}/create`, {
@@ -101,6 +17,20 @@ class HumanApi {
       });
   }
 
+  createResponse(response) {
+    let formData = this.convertToForm(response);
+    return fetch(`${RESPONSE_API}/create`, {
+      method: "POST",
+      body: formData
+    })
+      .then(res => {
+        return res.json();
+      })
+      .catch(error => {
+        console.error("Failed to createResponse:", error);
+      });
+  }
+
   convertToForm(obj) {
     var formData = new FormData();
     for (const [key, val] of Object.entries(obj)) {
@@ -116,6 +46,14 @@ class HumanApi {
         console.error("Failed to fetch challenges");
       });
   }
+
+  fetchResponses() {
+    return fetch(`${RESPONSE_API}`)
+      .then(res => res.json())
+      .catch(error => {
+        console.error("Failed to fetch challenges");
+      });
+  }
 }
 
 export default new HumanApi();

ui/src/images/VideoPlaceholder.jpg

@@ -0,0 +1,22 @@
+import { actions } from "./index";
+import api from "api";
+import { selectors } from "./";
+
+export const createResponse = data => dispatch => {
+  dispatch(actions.createResponsePending());
+  return api.createResponse(data).then(response => {
+    dispatch(actions.createResponseSuccess(response));
+  });
+};
+
+export const fetchResponses = (force = false) => (dispatch, getState) => {
+  if (selectors.isLoaded(getState()) && !force) {
+    console.log("Responses already loaded");
+    return;
+  }
+
+  dispatch(actions.fetchResponsesPending());
+  return api
+    .fetchResponses()
+    .then(responses => dispatch(actions.fetchResponsesSuccess(responses)));
+};

ui/src/modules/responses/actions.js

@@ -0,0 +1,5 @@
+import { actions, reducer } from "./slice";
+import * as selectors from "./selectors";
+
+export { actions, selectors };
+export default reducer;

ui/src/modules/responses/index.js

@@ -0,0 +1,14 @@
+import { selectors } from "./slice";
+import { State, TEMP_ID } from "modules/utils";
+
+const root = selectors.getResponses;
+
+export const isLoading = state => root(state).meta === State.LOADING;
+export const isLoaded = state => root(state).meta === State.LOADED;
+
+export const responses = state => root(state).data;
+
+export const responseCreationPending = (state, props) =>
+  root(state).data[TEMP_ID].meta === State.CREATING;
+
+export const response = (state, props) => root(state).data[props.responseId];

ui/src/modules/responses/selectors.js

@@ -0,0 +1,33 @@
+import { createSlice } from "redux-starter-kit";
+import { State, TEMP_ID } from "modules/utils";
+
+export const { actions, selectors, reducer } = createSlice({
+  slice: "responses",
+  initialState: { data: {}, meta: State.NOT_LOADED },
+  reducers: {
+    // Create responses
+    createResponsePending(state) {
+      const response = { meta: State.CREATING };
+      response.meta = State.CREATING;
+      state.data[TEMP_ID] = response;
+    },
+    createResponseSuccess(state, action) {
+      const response = action.payload;
+      console.log(state, response);
+      state.data[response.id] = response;
+    },
+
+    // Fetch responses
+    fetchResponsesPending(state) {
+      state.meta = State.LOADING;
+    },
+    fetchResponsesSuccess(state, action) {
+      const responsesById = action.payload.reduce((acc, response) => {
+        acc[response.id] = response;
+        return acc;
+      }, {});
+      state.meta = State.LOADED;
+      state.data = responsesById;
+    }
+  }
+});