temp image upload

src/components/ImageDropzone/ImageDropzone.tsx

@@ -1,53 +1,101 @@
-import {Dropzone, DropzoneProps} from "@mantine/dropzone";
-import {FC} from "react";
-import {Group, rem, Text} from "@mantine/core";
+import {Dropzone, DropzoneProps, FileWithPath} from "@mantine/dropzone";
+import {FC, useState} from "react";
+import {Button, Fieldset, Flex, Group, Image, rem, Text} from "@mantine/core";
 import {IconPhoto, IconUpload, IconX} from "@tabler/icons-react";
 import {omit} from "lodash";
+import {BaseFormInputProps} from "../../types/utils.ts";
+import {notifications} from "../../shared/lib/notifications.ts";
+import {ProductService} from "../../client";
 
-type RestProps = {
-    imageUrl?: string;
-};
-const ALL_PROPERTIES = Object.keys(colDefProperties) as (keyof ColDef)[];
+interface RestProps {
+    imageUrlInputProps?: BaseFormInputProps<string>;
+    productId?: number;
+}
 
 
-type Props = DropzoneProps & RestProps;
+type Props = Omit<DropzoneProps, 'onDrop'> & RestProps;
 
 const ImageDropzone: FC<Props> = (props: Props) => {
-    const restProps = omit()
-    return (
-        <Dropzone
-            {...props}
-        >
-            <Group justify="center" gap="xl" style={{pointerEvents: 'none'}}>
-                <Dropzone.Accept>
-                    <IconUpload
-                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)'}}
-                        stroke={1.5}
-                    />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                    <IconX
-                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)'}}
-                        stroke={1.5}
-                    />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                    <IconPhoto
-                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)'}}
-                        stroke={1.5}
-                    />
-                </Dropzone.Idle>
+    const [showDropzone, setShowDropzone] = useState(
+        !(typeof props.imageUrlInputProps?.value === 'string' &&
+            props.imageUrlInputProps.value.trim() !== '')
+    );
+    console.log(props.imageUrlInputProps);
+    console.log(showDropzone);
+    const restProps = omit(props, ['imageUrl', 'productId', 'imageUrlInputProps']);
+    const onDrop = (files: FileWithPath[]) => {
+        if (!props.productId || !props.imageUrlInputProps) return;
+        if (files.length > 1) {
+            notifications.error({message: "Прикрепите одно изображение"});
+            return;
+        }
+        const file = files[0];
+        // TODO check if file is image
+        ProductService.uploadProductImage({
+            productId: props.productId,
+            formData: {
+                upload_file: file
+            }
+        }).then(({ok, message, imageUrl}) => {
+            notifications.guess(ok, {message});
+            if (!ok || !imageUrl) {
+                return;
+            }
+            props.imageUrlInputProps?.onChange(imageUrl);
+            setShowDropzone(false);
+        });
+    }
+    const getBody = () => {
+        return props.imageUrlInputProps?.value && showDropzone ? (
+            <Image src={props.imageUrlInputProps.value}/>
+        ) : (
+            <Dropzone
+                {...restProps}
+                multiple={false}
+                onDrop={onDrop}
 
-                <div>
-                    <Text size="xl" inline>
-                        Drag images here or click to select files
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                        Attach as many files as you like, each file should not exceed 5mb
-                    </Text>
-                </div>
-            </Group>
-        </Dropzone>
+            >
+                <Group justify="center" gap="xl" style={{pointerEvents: 'none'}}>
+                    <Dropzone.Accept>
+                        <IconUpload
+                            style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)'}}
+                            stroke={1.5}
+                        />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                        <IconX
+                            style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)'}}
+                            stroke={1.5}
+                        />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                        <IconPhoto
+                            style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)'}}
+                            stroke={1.5}
+                        />
+                    </Dropzone.Idle>
+
+                    <div>
+                        <Text size="xl" inline>
+                            Drag images here or click to select files
+                        </Text>
+                        <Text size="sm" c="dimmed" inline mt={7}>
+                            Attach as many files as you like, each file should not exceed 5mb
+                        </Text>
+                    </div>
+                </Group>
+            </Dropzone>
+        );
+    }
+    return (
+        <Flex gap={rem(10)} direction={"column"}>
+            <Fieldset legend={'Изображение'}>
+                {getBody()}
+            </Fieldset>
+            {!showDropzone &&
+                <Button variant={"default"}>Заменить изображение {}</Button>
+            }
+        </Flex>
     )
 }