My Mentor Page shows relevant information about mentor progress. (#44)

* new layout for mentor info card * format and tests * removed import error * circular progress, shows thumbnail or placeholder * prompts upload on image hover (non-functional) * new layout draft * ui changes * test for upload * fixed test * setup for mentor.thumbnailSrc + tests * thumbnailsrc > thumbnail, uploadthumbnail function * mock test for displaying changed image * renamed component * renamed test and removed post request * removed upload tooltip, moved upload button * fixed missing mentor id * ran new make format * adds licenses * fixes: missing thumbnail in gql query * fix lint errors Co-authored-by: Jim Alvarez <[email protected]> Co-authored-by: larry kirschner <[email protected]>
mentorpal · Jun 23, 2021 · b2316f0 · b2316f0
1 parent 487b184
commit b2316f0
Show file tree

Hide file tree

Showing 10 changed files with 389 additions and 175 deletions.
diff --git a/client/gatsby-browser.js b/client/gatsby-browser.js
@@ -3,10 +3,13 @@ import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import { Provider } from "./src/context";
 
 import "video.js/dist/video-js.css";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import videojs from "video.js";
 import "webrtc-adapter";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import RecordRTC from "recordrtc";
 import "videojs-record/dist/css/videojs.record.css";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import Record from "videojs-record/dist/videojs.record.js";
 
 const theme = createMuiTheme({

diff --git a/client/src/api.ts b/client/src/api.ts
@@ -374,6 +374,7 @@ export async function fetchMentor(
             title
             email
             mentorType
+            thumbnail
             lastTrainedAt
             defaultSubject {
               _id
@@ -606,7 +607,20 @@ export async function fetchTrainingStatus(
   }
   return result.data.data;
 }
-
+export async function uploadThumbnail(
+  mentorId: string,
+  thumbnail: File
+): Promise<AsyncJob> {
+  const data = new FormData();
+  data.append("body", JSON.stringify({ mentor: mentorId }));
+  data.append("thumbnail", thumbnail);
+  const result = await uploadRequest.post("/thumbnail", data, {
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+  return result.data.data;
+}
 export async function uploadVideo(
   mentorId: string,
   video: File,

diff --git a/client/src/components/home/index.tsx b/client/src/components/home/index.tsx
@@ -18,15 +18,14 @@ import {
   Typography,
 } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-
 import NavBar from "components/nav-bar";
 import RecordingBlockItem from "components/home/recording-block";
 import withLocation from "wrap-with-location";
 import withAuthorizationOnly from "hooks/wrap-with-authorization-only";
 import { useWithSetup } from "hooks/graphql/use-with-setup";
 import { useWithReviewAnswerState } from "hooks/graphql/use-with-review-answer-state";
 import { ErrorDialog, LoadingDialog } from "components/dialog";
-import StageCard from "components/stage-card";
+import MyMentorCard from "components/my-mentor-card";
 
 const useStyles = makeStyles((theme) => ({
   toolbar: theme.mixins.toolbar,
@@ -106,12 +105,18 @@ function HomePage(props: {
 
   return (
     <div className={classes.root}>
-      <div style={{ flexShrink: 0 }}>
+      <div>
         <NavBar title="Mentor Studio" mentorId={mentor?._id} />
-        <StageCard
+        <MyMentorCard
+          mentorId={mentor!._id || ""}
+          name={mentor!.name || "Unnamed"}
+          type={mentor!.mentorType}
+          title={mentor!.title || "none"}
+          lastTrainedAt={mentor!.lastTrainedAt || "never"}
           value={
             mentor?.answers.filter((a) => a.status === "COMPLETE").length || 0
           }
+          thumbnail={mentor!.thumbnail || ""}
         />
         <Select
           data-cy="select-subject"