move move frontend to progress-test

app/javascript/components/AvatarEditor/AvatarEditor.tsx

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,49 @@
+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

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