Added fetchThumbnail query, updates thumbnail on upload (#53)

* 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 * fetchThumbnail query, updates thumbnail on upload * removes non-null assertion * Thumbnail size fixed but layout responsive * ran format * added hook to manage thumbnail state * fixes flakey tests (#62) * updates cypress to 7.6 from 7.1 * updates deps * removes only Co-authored-by: Jim Alvarez <[email protected]> Co-authored-by: larry kirschner <[email protected]>
mentorpal · Jul 2, 2021 · 67f5495 · 67f5495
1 parent c5b5596
commit 67f5495
Show file tree

Hide file tree

Showing 9 changed files with 3,810 additions and 1,871 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -20,38 +20,38 @@
   },
   "license": "0BSD",
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@material-ui/lab": "^4.0.0-alpha.58",
     "@reach/router": "^1.3.4",
     "clsx": "^1.1.1",
-    "gatsby": "^3.6.2",
+    "gatsby": "^3.8.1",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-google-login": "^5.2.2",
     "react-player": "^2.9.0",
-    "react-toastify": "^7.0.3",
-    "styled-components": "^5.2.3",
+    "react-toastify": "^7.0.4",
+    "styled-components": "^5.3.0",
     "url-join": "^4.0.1",
     "uuid": "^8.3.2",
-    "videojs-record": "^4.4.0"
+    "videojs-record": "^4.5.0"
   },
   "devDependencies": {
-    "@types/node": "^14.14.41",
+    "@types/node": "^14.17.4",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "eslint": "^7.25.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.1",
+    "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "^7.24.0",
     "gatsby-plugin-env-variables": "^2.1.0",
     "gatsby-plugin-eslint": "^3.0.0",
-    "gatsby-plugin-manifest": "^3.3.0",
+    "gatsby-plugin-manifest": "^3.8.0",
     "gatsby-plugin-material-ui": "^3.0.1",
-    "gatsby-plugin-sitemap": "^3.3.0",
-    "gatsby-plugin-typescript": "^3.3.0",
-    "typescript": "^4.2.4"
+    "gatsby-plugin-sitemap": "^4.4.0",
+    "gatsby-plugin-typescript": "^3.8.0",
+    "typescript": "^4.3.5"
   }
 }
diff --git a/client/src/api.ts b/client/src/api.ts
@@ -621,7 +621,25 @@ export async function uploadThumbnail(
   });
   return result.data.data;
 }
-
+export async function fetchThumbnail(accessToken: string): Promise<string> {
+  const headers = { Authorization: `bearer ${accessToken}` };
+  const result = await graphqlRequest.post(
+    "",
+    {
+      query: `
+      query {
+        me {
+          mentor {
+            thumbnail
+          }
+        }
+      }
+    `,
+    },
+    { headers: headers }
+  );
+  return result.data.data.me.mentor.thumbnail;
+}
 export async function uploadVideo(
   mentorId: string,
   video: File,

diff --git a/client/src/components/home/index.tsx b/client/src/components/home/index.tsx
@@ -107,6 +107,7 @@ function HomePage(props: {
       <div>
         <NavBar title="Mentor Studio" mentorId={mentor?._id} />
         <MyMentorCard
+          accessToken={props.accessToken}
           mentorId={mentor?._id || ""}
           name={mentor?.name || "Unnamed"}
           type={mentor?.mentorType}

diff --git a/client/src/components/my-mentor-card.tsx b/client/src/components/my-mentor-card.tsx
@@ -14,12 +14,13 @@ import {
   Tooltip,
   Avatar,
   CircularProgress,
+  Grid,
 } from "@material-ui/core";
 import StageToast from "./stage-toast";
 import { makeStyles } from "@material-ui/core/styles";
 import { HelpOutline } from "@material-ui/icons";
 import { MentorType } from "types";
-import { uploadThumbnail } from "api";
+import { useWithThumbnail } from "hooks/graphql/use-with-thumbnail";
 
 function StageProgress(props: { value: number; max: number; percent: number }) {
   return (
@@ -83,17 +84,8 @@ StageProgress.propTypes = {
 };
 const useStyles = makeStyles(() => ({
   avatar: {
-    width: "100%",
-    height: "100%",
-  },
-  square: {
-    position: "relative",
-    height: "40%",
-    "&::before": {
-      display: "block",
-      content: "''",
-      paddingLeft: "100%",
-    },
+    width: 240,
+    height: 180,
   },
 }));
 const StageSelect = (value: number) => {
@@ -170,6 +162,7 @@ const StageSelect = (value: number) => {
   };
 };
 export default function MyMentorCard(props: {
+  accessToken: string;
   mentorId: string;
   name: string;
   type: MentorType | undefined;
@@ -180,15 +173,27 @@ export default function MyMentorCard(props: {
 }): JSX.Element {
   const currentStage = StageSelect(props.value);
   const classes = useStyles();
-  const thumbnailAvailable = props.thumbnail !== "";
+  const [thumbnail, updateThumbnail] = useWithThumbnail(
+    props.mentorId,
+    props.accessToken,
+    props.thumbnail
+  );
+  const thumbnailAvailable = thumbnail !== "";
   return (
     <div style={{ marginTop: 2, flexGrow: 1, marginLeft: 25, marginRight: 25 }}>
       <Card data-cy="stage-card">
         <CardContent>
-          <Box display="flex" width="100%" alignItems="center">
-            <Box alignItems="center">
+          <Grid alignItems="center" container={true} xs={12}>
+            <Grid
+              item={true}
+              container={true}
+              alignItems="center"
+              justify="center"
+              xs={12}
+              md={4}
+            >
               <Typography
-                variant="h3"
+                variant="h4"
                 color="textSecondary"
                 data-cy="mentor-card-name"
               >
@@ -201,18 +206,19 @@ export default function MyMentorCard(props: {
               >
                 Title: {props.title}
               </Typography>
-              <Box
-                className={classes.square}
+              <Grid
+                justify="center"
                 alignItems="center"
                 data-cy="thumbnail-wrapper"
-                width="80%"
+                item
+                xs={10}
               >
                 {thumbnailAvailable ? (
                   <Avatar
                     data-cy="uploaded-thumbnail"
-                    variant="square"
+                    variant="rounded"
                     className={classes.avatar}
-                    src={props.thumbnail}
+                    src={thumbnail}
                   />
                 ) : (
                   <Avatar
@@ -221,34 +227,31 @@ export default function MyMentorCard(props: {
                     className={classes.avatar}
                   />
                 )}
-              </Box>
+              </Grid>
               <input
                 data-cy="upload-file"
                 type="file"
                 accept="image/*"
                 onChange={(e) => {
-                  if (e.target.files)
-                    uploadThumbnail(props.mentorId, e.target.files[0]);
+                  e.target.files instanceof FileList
+                    ? updateThumbnail(e.target.files[0])
+                    : undefined;
                 }}
               />
-            </Box>
-            <Box
-              width="33%"
-              minWidth={140}
-              alignItems="center"
-              ml={2}
-              textAlign="left"
-            >
+            </Grid>
+            <Grid item={true} alignItems="center" xs={12} md={4}>
               <Typography
                 variant="h6"
                 color="textSecondary"
+                align="left"
                 data-cy="mentor-card-scope"
               >
                 Scope: {currentStage.name}
               </Typography>
               <Typography
                 variant="body1"
                 color="textSecondary"
+                align="left"
                 data-cy="mentor-card-scope-description"
               >
                 {currentStage.description}
@@ -257,6 +260,7 @@ export default function MyMentorCard(props: {
                 <Typography
                   variant="h6"
                   color="textSecondary"
+                  align="left"
                   data-cy="mentor-card-type"
                 >
                   {props.type[0].toUpperCase() +
@@ -267,6 +271,7 @@ export default function MyMentorCard(props: {
                 <Typography
                   variant="h6"
                   color="textSecondary"
+                  align="left"
                   data-cy="mentor-card-type"
                 >
                   Invalid Mentor
@@ -276,12 +281,13 @@ export default function MyMentorCard(props: {
               <Typography
                 variant="body1"
                 color="textSecondary"
+                align="left"
                 data-cy="mentor-card-trained"
               >
                 Last Trained: {props.lastTrainedAt.substring(0, 10)}
               </Typography>
-            </Box>
-            <Box width="33%" alignItems="center" ml={2} textAlign="left">
+            </Grid>
+            <Grid item={true} alignItems="center" xs={12} md={4}>
               <Typography variant="body1" color="textSecondary">
                 Next Goal: {currentStage.next.name}
                 {"   "}
@@ -307,8 +313,8 @@ export default function MyMentorCard(props: {
                   percent={currentStage.percent || 0}
                 />
               )}
-            </Box>
-          </Box>
+            </Grid>
+          </Grid>
         </CardContent>
       </Card>
 

diff --git a/client/src/hooks/graphql/use-with-thumbnail.tsx b/client/src/hooks/graphql/use-with-thumbnail.tsx
@@ -0,0 +1,26 @@
+/*
+This software is Copyright ©️ 2020 The University of Southern California. All Rights Reserved. 
+Permission to use, copy, modify, and distribute this software and its documentation for educational, research and non-profit purposes, without fee, and without a written agreement is hereby granted, provided that the above copyright notice and subject to the full license file found in the root of this software deliverable. Permission to make commercial use of this software may be obtained by contacting:  USC Stevens Center for Innovation University of Southern California 1150 S. Olive Street, Suite 2300, Los Angeles, CA 90115, USA Email: [email protected]
+
+The full terms of this copyright and license should always be found in the root directory of this software deliverable as "license.txt" and if these terms are not found with this software, please contact the USC Stevens Center for the full license.
+*/
+import { uploadThumbnail, fetchThumbnail } from "api";
+import { useState } from "react";
+
+export function useWithThumbnail(
+  mentorId: string,
+  accessToken: string,
+  current: string
+): [string, (file: File) => void] {
+  const [thumbnail, setThumbnail] = useState(current);
+
+  function updateThumbnail(file: File): Promise<void> {
+    return uploadThumbnail(mentorId, file).then(() => {
+      fetchThumbnail(accessToken).then((src: string) => {
+        setThumbnail(src);
+      });
+    });
+  }
+
+  return [thumbnail, updateThumbnail];
+}
diff --git a/cypress/cypress/integration/home.spec.ts b/cypress/cypress/integration/home.spec.ts
@@ -140,15 +140,7 @@ describe("Review answers page", () => {
     };
     cyMockDefault(cy, { mentor: testClint });
     cy.visit("/");
-    /* uncomment when graphql is available */
-    // cy.get('[data-cy=thumbnail-wrapper]').trigger('mouseover');
-    // cy.fixture('avatar.png').then((fileContent) => {
-    //   cy.get('input[type="file"]').attachFile({
-    //     fileContent: fileContent.toString(),
-    //     fileName: 'avatar.png',
-    //     mimeType: 'avatr.png',
-    //   });
-    // });
+
     cy.get("[data-cy=uploaded-thumbnail]").should("exist");
   });