Add avatar photo upload component

@app/client/package.json

@@ -25,6 +25,7 @@
     "apollo-link-error": "^1.1.11",
     "apollo-link-http": "^1.5.15",
     "apollo-link-ws": "^1.0.18",
+    "axios": "^0.19.1",
     "graphql": "^14.4.2",
     "less": "^3.9.0",
     "less-vars-to-js": "^1.3.0",

@app/client/src/graphql/ChangeAvatar.graphql

@@ -0,0 +1,9 @@
+mutation ChangeAvatar($id: Int!, $patch: UserPatch!) {
+  updateUser(input: { id: $id, patch: $patch }) {
+    clientMutationId
+    user {
+      id
+      avatarUrl
+    }
+  }
+}

@app/client/src/layout/SharedLayout.tsx

@@ -132,9 +132,14 @@ function SharedLayout({ title, noPad = false, children }: SharedLayoutProps) {
                   data-cy="layout-dropdown-user"
                   style={{ whiteSpace: "nowrap" }}
                 >
-                  <Avatar>
-                    {(data.currentUser.name && data.currentUser.name[0]) || "?"}
-                  </Avatar>
+                  {data.currentUser.avatarUrl ? (
+                    <Avatar src={`${data.currentUser.avatarUrl}`} />
+                  ) : (
+                    <Avatar>
+                      {(data.currentUser.name && data.currentUser.name[0]) ||
+                        "?"}
+                    </Avatar>
+                  )}
                   <Warn okay={data.currentUser.isVerified}>
                     <span style={{ marginLeft: 8, marginRight: 8 }}>
                       {data.currentUser.name}

@app/client/src/next.config.js

@@ -1,7 +1,14 @@
 require("@app/config");
 const compose = require("lodash/flowRight");
 
-const { ROOT_URL, T_AND_C_URL } = process.env;
+const {
+  ROOT_URL,
+  T_AND_C_URL,
+  BUCKET,
+  AWSACCESSKEYID,
+  AWSSECRETKEY,
+  AWS_REGION,
+} = process.env;
 if (!ROOT_URL) {
   throw new Error("ROOT_URL is a required envvar");
 }
@@ -31,6 +38,12 @@ if (!ROOT_URL) {
       withCss,
       withLess
     )({
+      serverRuntimeConfig: {
+        BUCKET: BUCKET,
+        AWSACCESSKEYID: AWSACCESSKEYID,
+        AWSSECRETKEY: AWSSECRETKEY,
+        AWS_REGION: AWS_REGION,
+      },
       poweredByHeader: false,
       distDir: `../.next`,
       exportTrailingSlash: true,

@app/client/src/pages/api/s3.tsx

@@ -0,0 +1,67 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import AWS from "aws-sdk";
+import getConfig from "next/config";
+const { serverRuntimeConfig } = getConfig();
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const bucket = serverRuntimeConfig.BUCKET;
+  const key = req.query.key;
+  const params: AWS.S3.PutObjectRequest = {
+    Bucket: bucket,
+    Key: key as string,
+  };
+  const client = getClient();
+  const operation = req.query.operation;
+  if (operation === "put") {
+    put(client, params);
+  } else if (operation === "delete") {
+    del(client, params);
+  }
+
+  function getClient() {
+    const region = serverRuntimeConfig.AWS_REGION;
+    const accessKey = serverRuntimeConfig.AWSACCESSKEYID;
+    const secretKey = serverRuntimeConfig.AWSSECRETKEY;
+    AWS.config.update({
+      accessKeyId: accessKey,
+      secretAccessKey: secretKey,
+      signatureVersion: "v4",
+      region: region,
+    });
+    const options = {
+      signatureVersion: "v4",
+      region: region,
+      // uncomment to use accelerated endpoint
+      // accelerated endpoint must be turned on in your s3 bucket first
+      // endpoint: new AWS.Endpoint(
+      //   "bucket.s3-accelerate.amazonaws.com"
+      // ),
+      // useAccelerateEndpoint: true,
+    };
+    const client = new AWS.S3(options);
+    return client;
+  }
+  function put(client: AWS.S3, params: AWS.S3.PutObjectRequest) {
+    const putParams = {
+      ...params,
+      Expires: 5 * 60,
+    };
+
+    client.getSignedUrl("putObject", putParams, (err, url) => {
+      if (err) {
+        res.json({ success: false, err });
+      } else {
+        res.json({ success: true, url });
+      }
+    });
+  }
+  function del(client: AWS.S3, params: AWS.S3.DeleteObjectRequest) {
+    client.deleteObject(params, err => {
+      if (err) {
+        res.json({ success: false, err });
+      } else {
+        res.json({ success: true });
+      }
+    });
+  }
+};

@app/client/src/pages/settings/index.tsx

@@ -12,7 +12,7 @@ import { ApolloError } from "apollo-client";
 import { FormComponentProps, ValidateFieldsOptions } from "antd/lib/form/Form";
 import { getCodeFromError, extractError } from "../../errors";
 import { formItemLayout, tailFormItemLayout } from "../../forms";
-import { Redirect, ErrorAlert, H3 } from "@app/components";
+import { Redirect, ErrorAlert, H3, AvatarUpload } from "@app/components";
 
 const Settings_Profile: NextPage = () => {
   const [formError, setFormError] = useState<Error | ApolloError | null>(null);
@@ -114,6 +114,13 @@ function ProfileSettingsForm({
     <div>
       <H3>Edit Profile</H3>
       <Form {...formItemLayout} onSubmit={handleSubmit}>
+        <Form.Item label="Avatar">
+          <AvatarUpload
+            user={user}
+            setError={setError}
+            setSuccess={setSuccess}
+          />
+        </Form.Item>
         <Form.Item label="Name">
           {getFieldDecorator("name", {
             initialValue: user.name,
@@ -137,7 +144,7 @@ function ProfileSettingsForm({
           })(<Input />)}
         </Form.Item>
         {error ? (
-          <Form.Item>
+          <Form.Item label="Error">
             <Alert
               type="error"
               message={`Updating username`}
@@ -155,7 +162,7 @@ function ProfileSettingsForm({
             />
           </Form.Item>
         ) : success ? (
-          <Form.Item>
+          <Form.Item label="success">
             <Alert type="success" message={`Profile updated`} />
           </Form.Item>
         ) : null}

@app/components/package.json

@@ -10,6 +10,7 @@
     "apollo-client": "^2.6.8",
     "next": "^9.2.0",
     "react": "^16.9.0",
-    "tslib": "^1.10.0"
+    "tslib": "^1.10.0",
+    "@app/graphql": "0.0.0"
   }
 }

@app/components/src/AvatarUpload.tsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from "react";
+import { Upload, Icon, message } from "antd";
+import { UploadChangeParam } from "antd/lib/upload";
+import { UploadFile, RcCustomRequestOptions } from "antd/lib/upload/interface";
+import axios from "axios";
+import {
+  useChangeAvatarMutation,
+  ProfileSettingsForm_UserFragment,
+} from "@app/graphql";
+import { ApolloError } from "apollo-client";
+
+export function slugify(string: string) {
+  const a =
+    "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
+  const b =
+    "aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------";
+  const p = new RegExp(a.split("").join("|"), "g");
+
+  return string
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[^\w\-]+/g, "") // Remove all non-word characters
+    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, ""); // Trim - from end of text
+}
+
+export function getUid(name: string) {
+  const randomHex = () => Math.floor(Math.random() * 16777215).toString(16);
+  const fileNameSlug = slugify(name);
+  return randomHex() + "-" + fileNameSlug;
+}
+
+export function AvatarUpload({
+  user,
+  setSuccess,
+  setError,
+}: {
+  user: ProfileSettingsForm_UserFragment;
+  setSuccess: React.Dispatch<React.SetStateAction<boolean>>;
+  setError: (error: Error | ApolloError | null) => void;
+}) {
+  const [changeAvatar] = useChangeAvatarMutation();
+  const [fileList, setFileList] = useState<any>(
+    user && user.avatarUrl
+      ? [
+          {
+            uid: "-1",
+            name: "avatar",
+            type: "image",
+            size: 1,
+            url: user.avatarUrl,
+          },
+        ]
+      : null
+  );
+
+  useEffect(() => {
+    if (user) {
+      const avatar = user.avatarUrl;
+      if (avatar) {
+        setFileList([
+          {
+            uid: "-1",
+            name: "avatar",
+            type: "image",
+            size: 1,
+            url: avatar,
+          },
+        ]);
+      } else {
+        setFileList(null);
+      }
+    }
+  }, [user, user.avatarUrl]);
+
+  // const onChange = (info: UploadChangeParam) => {
+  //   console.log(info);
+  //   setFileList([...fileList]);
+  // };
+
+  const beforeUpload = (file: any) => {
+    const fileName = file.name.split(".")[0];
+    const fileType = file.name.split(".")[1];
+    file.uid = getUid(fileName) + "." + fileType;
+    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
+    if (!isJpgOrPng) {
+      message.error("You can only upload JPG or PNG images!");
+      file.status = "error";
+    }
+    const isLt3M = file.size / 1024 / 1024 < 3;
+    if (!isLt3M) {
+      message.error("Image must smaller than 3MB!");
+      file.status = "error";
+    }
+    return isJpgOrPng && isLt3M;
+  };
+
+  const changeUserAvatar = async (avatarUrl: string | null) => {
+    setSuccess(false);
+    setError(null);
+    try {
+      await changeAvatar({
+        variables: {
+          id: user.id,
+          patch: {
+            avatarUrl,
+          },
+        },
+      });
+      setError(null);
+      setSuccess(true);
+    } catch (e) {
+      setError(e);
+    }
+  };
+
+  const customRequest = (option: RcCustomRequestOptions) => {
+    const { onSuccess, onError, file, onProgress } = option;
+    axios
+      .get(`${process.env.ROOT_URL}/api/s3`, {
+        params: {
+          key: file.uid,
+          operation: "put",
+        },
+      })
+      .then(response => {
+        const preSignedUrl = response.data.url;
+        axios
+          .put(preSignedUrl, file, {
+            onUploadProgress: e => {
+              const progress = Math.round((e.loaded / e.total) * 100);
+              onProgress({ percent: progress }, file);
+            },
+          })
+          .then(response => {
+            if (response.config.url) {
+              changeUserAvatar(response.config.url.split("?")[0]);
+              onSuccess(response.config, file);
+            }
+          })
+          .catch(error => {
+            console.log(error);
+            onError(error);
+          });
+      })
+      .catch(error => {
+        console.log(error);
+        onError(error);
+      });
+  };
+
+  const deleteUserAvatarFromBucket = async () => {
+    if (user && user.avatarUrl) {
+      const key = user.avatarUrl.substring(user.avatarUrl.lastIndexOf("/") + 1);
+      await axios
+        .get(`${process.env.ROOT_URL}/api/s3`, {
+          params: {
+            key: `${key}`,
+            operation: "delete",
+          },
+        })
+        .then(() => {
+          // this isn't confirmation that the item was deleted
+          // only confimation that there wasnt an error..
+          changeUserAvatar(null);
+          return true;
+        })
+        .catch(error => {
+          console.log(JSON.stringify(error));
+          return false;
+        });
+    }
+    return true;
+  };
+
+  const onRemove = async () => {
+    if (await deleteUserAvatarFromBucket()) {
+      setFileList(null);
+    }
+  };
+
+  const uploadButton = (
+    <div>
+      <Icon type="plus" />
+      <div className="ant-upload-text">Avatar</div>
+    </div>
+  );
+
+  return (
+    <div>
+      <Upload
+        name="avatar"
+        listType="picture-card"
+        fileList={fileList}
+        beforeUpload={beforeUpload}
+        customRequest={customRequest}
+        onRemove={onRemove}
+        showUploadList={{ showPreviewIcon: false, showDownloadIcon: false }}
+      >
+        {fileList && fileList.length >= 0 ? null : uploadButton}
+      </Upload>
+    </div>
+  );
+}

@app/components/src/index.tsx

@@ -5,3 +5,4 @@ export * from "./StandardWidth";
 export * from "./Text";
 export * from "./Warn";
 export * from "./PasswordStrength";
+export * from "./AvatarUpload";