Upload avatar

@app/client/src/graphql/CreateUploadUrl.graphql

@@ -0,0 +1,5 @@
+mutation CreateUploadUrl($input: CreateUploadUrlInput!) {
+  createUploadUrl(input: $input) {
+    uploadUrl
+  }
+}

@app/client/src/graphql/UpdateUser.graphql

@@ -5,6 +5,7 @@ mutation UpdateUser($id: UUID!, $patch: UserPatch!) {
       id
       name
       username
+      avatarUrl
     }
   }
 }

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

@@ -1,4 +1,9 @@
-import { ErrorAlert, Redirect, SettingsLayout } from "@app/components";
+import {
+  AvatarUpload,
+  ErrorAlert,
+  Redirect,
+  SettingsLayout,
+} from "@app/components";
 import {
   ProfileSettingsForm_UserFragment,
   useSettingsProfileQuery,
@@ -10,7 +15,7 @@ import {
   getCodeFromError,
   tailFormItemLayout,
 } from "@app/lib";
-import { Alert, Button, Form, Input, PageHeader } from "antd";
+import { Alert, Button, Card, Form, Input, PageHeader } from "antd";
 import { useForm } from "antd/lib/form/util";
 import { ApolloError } from "apollo-client";
 import { NextPage } from "next";
@@ -104,64 +109,76 @@ function ProfileSettingsForm({
   const code = getCodeFromError(error);
   return (
     <div>
-      <PageHeader title="Edit profile" />
-      <Form
-        {...formItemLayout}
-        form={form}
-        onFinish={handleSubmit}
-        initialValues={{ name: user.name, username: user.username }}
-      >
-        <Form.Item
-          label="Name"
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: "Please enter your name",
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label="Username"
-          name="username"
-          rules={[
-            {
-              required: true,
-              message: "Please choose a username",
-            },
-          ]}
+      <PageHeader title="Profile" />
+      <Card title="Update profile information" style={{ margin: "1rem" }}>
+        <Form
+          {...formItemLayout}
+          form={form}
+          onFinish={handleSubmit}
+          initialValues={{ name: user.name, username: user.username }}
         >
-          <Input />
-        </Form.Item>
-        {error ? (
-          <Form.Item>
-            <Alert
-              type="error"
-              message={`Updating username`}
-              description={
-                <span>
-                  {extractError(error).message}
-                  {code ? (
-                    <span>
-                      {" "}
-                      (Error code: <code>ERR_{code}</code>)
-                    </span>
-                  ) : null}
-                </span>
-              }
-            />
+          <Form.Item
+            label="Name"
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: "Please enter your name",
+              },
+            ]}
+          >
+            <Input />
           </Form.Item>
-        ) : success ? (
-          <Form.Item>
-            <Alert type="success" message={`Profile updated`} />
+          <Form.Item
+            label="Username"
+            name="username"
+            rules={[
+              {
+                required: true,
+                message: "Please choose a username",
+              },
+            ]}
+          >
+            <Input />
           </Form.Item>
-        ) : null}
-        <Form.Item {...tailFormItemLayout}>
-          <Button htmlType="submit">Update Profile</Button>
-        </Form.Item>
-      </Form>
+          {error ? (
+            <Form.Item {...tailFormItemLayout}>
+              <Alert
+                type="error"
+                message={`Updating username`}
+                description={
+                  <span>
+                    {extractError(error).message}
+                    {code ? (
+                      <span>
+                        {" "}
+                        (Error code: <code>ERR_{code}</code>)
+                      </span>
+                    ) : null}
+                  </span>
+                }
+              />
+            </Form.Item>
+          ) : success ? (
+            <Form.Item {...tailFormItemLayout}>
+              <Alert type="success" message={`Profile updated`} />
+            </Form.Item>
+          ) : null}
+          <Form.Item {...tailFormItemLayout}>
+            <Button htmlType="submit">Update Profile</Button>
+          </Form.Item>
+        </Form>
+      </Card>
+      <Card title="Update avatar" style={{ margin: "1rem" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <AvatarUpload user={user} />
+        </div>
+      </Card>
     </div>
   );
 }

@app/components/package.json

@@ -11,8 +11,11 @@
     "@apollo/react-common": "^3.1.4",
     "@apollo/react-hooks": "^3.1.5",
     "@app/graphql": "0.0.0",
+    "@app/lib": "0.0.0",
+    "@types/axios": "^0.14.0",
     "antd": "^4.2.0",
     "apollo-client": "^2.6.8",
+    "axios": "^0.19.2",
     "next": "^9.3.6",
     "react": "^16.13.1",
     "tslib": "^1.11.1"

@app/components/src/AvatarUpload.tsx

@@ -0,0 +1,158 @@
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import {
+  ProfileSettingsForm_UserFragment,
+  useCreateUploadUrlMutation,
+  useUpdateUserMutation,
+} from "@app/graphql";
+import { extractError, getExceptionFromError } from "@app/lib";
+import { message, Upload } from "antd";
+import {
+  RcCustomRequestOptions,
+  UploadChangeParam,
+  UploadFile,
+} from "antd/lib/upload/interface";
+import axios from "axios";
+import React, { useState } from "react";
+import slugify from "slugify";
+
+export function getUid(name: string) {
+  const randomHex = () => Math.floor(Math.random() * 16777215).toString(16);
+  const fileNameSlug = slugify(name);
+  return randomHex() + "-" + fileNameSlug;
+}
+
+const ALLOWED_UPLOAD_CONTENT_TYPES = [
+  "image/apng",
+  "image/bmp",
+  "image/gif",
+  "image/jpeg",
+  "image/png",
+  "image/svg+xml",
+  "image/tiff",
+  "image/webp",
+];
+const ALLOWED_UPLOAD_CONTENT_TYPES_STRING = ALLOWED_UPLOAD_CONTENT_TYPES.join(
+  ","
+);
+
+export function AvatarUpload({
+  user,
+}: {
+  user: ProfileSettingsForm_UserFragment;
+}) {
+  const [updateUser] = useUpdateUserMutation();
+
+  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 [createUploadUrl] = useCreateUploadUrlMutation();
+
+  const [loading, setLoading] = useState(false);
+
+  const customRequest = async (option: RcCustomRequestOptions) => {
+    const { onSuccess, onError, file, onProgress } = option;
+    try {
+      const contentType = file.type;
+      const { data } = await createUploadUrl({
+        variables: {
+          input: {
+            contentType,
+          },
+        },
+      });
+      const uploadUrl = data?.createUploadUrl?.uploadUrl;
+
+      if (!uploadUrl) {
+        throw new Error("Failed to generate upload URL");
+      }
+      const response = await axios.put(uploadUrl, file, {
+        onUploadProgress: (e) => {
+          const progress = Math.round((e.loaded / e.total) * 100);
+          onProgress({ percent: progress }, file);
+        },
+      });
+      if (response.config.url) {
+        await updateUser({
+          variables: {
+            id: user.id,
+            patch: {
+              avatarUrl: response.config.url.split("?")[0],
+            },
+          },
+        });
+        onSuccess(response.config, file);
+      }
+    } catch (e) {
+      console.error(e);
+      onError(e);
+    }
+  };
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div className="ant-upload-text">Upload</div>
+    </div>
+  );
+
+  const onChange = (info: UploadChangeParam<UploadFile<any>>) => {
+    switch (info.file.status) {
+      case "uploading": {
+        setLoading(true);
+        break;
+      }
+      case "removed":
+      case "success": {
+        setLoading(false);
+        break;
+      }
+      case "error": {
+        const error: any = getExceptionFromError(info.file.error);
+        console.dir(error);
+        message.error(
+          typeof error === "string"
+            ? error
+            : error?.message ??
+                "Unknown error occurred" +
+                  (error?.code ? ` (${error.code})` : "")
+        );
+        setLoading(false);
+        break;
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Upload
+        accept={ALLOWED_UPLOAD_CONTENT_TYPES_STRING}
+        name="avatar"
+        listType="picture-card"
+        showUploadList={false}
+        beforeUpload={beforeUpload}
+        customRequest={customRequest}
+        onChange={onChange}
+      >
+        {user.avatarUrl ? (
+          <img src={user.avatarUrl} alt="avatar" style={{ width: "100%" }} />
+        ) : (
+          uploadButton
+        )}
+      </Upload>
+    </div>
+  );
+}

@app/components/src/SharedLayout.tsx

@@ -18,6 +18,7 @@ import { useCallback } from "react";
 
 import { ErrorAlert, H3, StandardWidth, Warn } from ".";
 import { Redirect } from "./Redirect";
+import { UserAvatar } from "./UserAvatar";
 
 const { Header, Content, Footer } = Layout;
 const { Text } = Typography;
@@ -243,9 +244,7 @@ export function SharedLayout({
                   data-cy="layout-dropdown-user"
                   style={{ whiteSpace: "nowrap" }}
                 >
-                  <Avatar>
-                    {(data.currentUser.name && data.currentUser.name[0]) || "?"}
-                  </Avatar>
+                  <UserAvatar user={data.currentUser} />
                   <Warn okay={data.currentUser.isVerified}>
                     <span style={{ marginLeft: 8, marginRight: 8 }}>
                       {data.currentUser.name}

@app/components/src/UserAvatar.tsx

@@ -0,0 +1,16 @@
+import { Avatar } from "antd";
+import React, { FC } from "react";
+
+export const UserAvatar: FC<{
+  user: {
+    name?: string | null;
+    avatarUrl?: string | null;
+  };
+}> = (props) => {
+  const { name, avatarUrl } = props.user;
+  if (avatarUrl) {
+    return <Avatar src={avatarUrl} />;
+  } else {
+    return <Avatar>{(name && name[0]) || "?"}</Avatar>;
+  }
+};

@app/components/src/index.tsx

@@ -1,3 +1,4 @@
+export * from "./AvatarUpload";
 export * from "./ButtonLink";
 export * from "./ErrorAlert";
 export * from "./ErrorOccurred";
@@ -11,5 +12,6 @@ export * from "./SocialLoginOptions";
 export * from "./SpinPadded";
 export * from "./StandardWidth";
 export * from "./Text";
+export * from "./UserAvatar";
 export * from "./Warn";
 export * from "./organizationHooks";