use google user avatar as profile phone

app/javascript/components/AvatarEditor/AvatarEditor.tsx

@@ -1,63 +0,0 @@
-import React, { FC, useState } from "react";
-import axios from "axios";
-
-import { Alert } from "../Alert";
-import { Button } from "../Button";
-import { PhotoCrop } from "./PhotoCrop";
-import { useCurrentUser } from "../../contexts";
-import { Modal } from "../Modal";
-
-type Props = {
-  isOpen: boolean
-  setIsOpen: (value: boolean) => void;
-};
-
-export const AvatarEditor: FC<Props> = ({ isOpen, setIsOpen }) => {
-  const [croppedImage, setCroppedImage] = useState<any>()
-  const [alert, setAlert] = useState<boolean>()
-  const { refetch, authToken } = useCurrentUser()
-
-  const instance = axios.create({
-  });
-
-  instance.defaults.headers.common.Authorization = `Bearer ${authToken}`;
-
-  const onSubmit = () => {
-    instance
-      .post("/update_avatar", {
-        upload: croppedImage,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          setIsOpen(false)
-          refetch()
-        } else {
-          setAlert(true);
-        }
-      })
-      .catch(() => {
-        setAlert(true);
-      });
-  };
-
-  return (
-    <Modal
-      title="Alterar Imagem de Perfil"
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
-      buttons={
-        <>
-          <Button onClick={() => setIsOpen(false)}>
-            Cancelar
-          </Button>
-          <Button type="primary" onClick={() => onSubmit()}>
-            Salvar
-          </Button>
-        </>
-      }
-    >
-      {alert && <Alert>Algo deu errado, tente novamente mais tarde.</Alert>}
-      <PhotoCrop callback={setCroppedImage} />
-    </Modal>
-  );
-};

app/javascript/components/AvatarEditor/PhotoCrop.tsx

@@ -1,49 +0,0 @@
-import React, { FC, useState } from "react";
-import PhotoCropper from "react-avatar-edit";
-
-type Props = {
-  callback: (value: any) => void
-}
-
-const borderStyle: React.CSSProperties = {
-  textAlign: 'center',
-  margin: 'auto',
-  borderStyle: 'dotted',
-  borderWidth: '0.3rem',
-  borderRadius: '0.3rem',
-}
-
-export const PhotoCrop: FC<Props> = ({ callback }) => {
-  const [result, setResult] = useState<any>();
-  const onCrop = (cropped: any) => {
-    setResult(cropped);
-    callback(result);
-  };
-
-  const onClose = () => {
-    setResult(null);
-  };
-
-  const onBeforeFileLoad = (elem: any) => {
-    if (elem.target.files[0].size > 1000000) {
-      elem.target.value = "";
-      alert("A imagem selecionada é grande de mais!")
-    }
-  };
-
-  const dimention = 300;
-
-  return (
-    <PhotoCropper
-      borderStyle={borderStyle}
-      label="Escolha uma imagem"
-      width={dimention}
-      height={dimention}
-      imageWidth={dimention}
-      imageHeight={dimention}
-      onCrop={(e) => onCrop(e)}
-      onClose={() => onClose()}
-      onBeforeFileLoad={onBeforeFileLoad}
-    />
-  );
-};

app/javascript/components/AvatarEditor/index.ts

@@ -1 +0,0 @@
-export { AvatarEditor } from "./AvatarEditor";

app/javascript/components/UserAvatar/UserAvatar.tsx

@@ -10,12 +10,19 @@ type Props = {
 export const UserAvatar: FC<Props> = ({user, className}) => {
   return (
     <div className={`rounded-full border-2 border-primary-light shadow ${className || ''}`}>
-      <BoringAvatar
-        size={"100%"}
-        name={user.name}
-        variant="pixel"
-        colors={["#595F72", "#575D90", "#84A07C", "#C3D350", "#E6F14A"]}
-      />
+      {user.avatarUrl ?
+        <img
+          className="rounded-full"
+          src={user.avatarUrl}
+          alt={`Avatar do usuário ${user.name}`}
+        />
+        : <BoringAvatar
+          size={"100%"}
+          name={user.name}
+          variant="pixel"
+          colors={["#595F72", "#575D90", "#84A07C", "#C3D350", "#E6F14A"]}
+        />
+      }
     </div>
   )
 };

app/javascript/components/index.ts

@@ -4,7 +4,6 @@ export * from "./Button";
 export * from "./Card";
 export * from "./CardGrid";
 export * from "./InputGroup";
-export * from "./AvatarEditor";
 export * from "./Navegator";
 export * from "./UserAvatar";
 export * from "./Dialog";