aboutsummaryrefslogtreecommitdiff
path: root/src/components/UploadImage/UploadImage.tsx
blob: 238d5cd80a550ed6439ca86c4161d5743e056d65 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import React, { useState } from 'react';
import {
  Button,
  TextField,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from '@material-ui/core';

interface PropTypes {
  isOpen: boolean;
  setIsOpen: (value: boolean) => void;
  callback: (url: string) => void;
}

const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
  const [url, setUrl] = useState<string>('');

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSubmit = () => {
    let result = url;
    if (url.startsWith('https://www.instagram.com/')) {
      const match = url.match('/p/(.*)/');
      const id = match && match[1];
      result = `https://www.instagram.com/p/${id}/media/?size=l`;
    } else if (url.startsWith('https://drive.google.com/')) {
      const match = url.match('/d/(.*)/');
      const fileId = match && match[1];
      result = `https://drive.google.com/uc?export=view&id=${fileId}`;
    }
    callback(result || '');
    handleClose();
  };

  const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
    setUrl(event.target.value);
  };

  return (
    <div>
      <Dialog open={isOpen} onClose={handleClose}>
        <DialogTitle>Upload an Image</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Unfortunetly we do not support uploading images yet. Please provide a valid URL to your image:
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Image URL"
            type="text"
            fullWidth
            autoComplete="off"
            onChange={handleChange}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleSubmit} color="primary" disabled={!url.length}>
            Submit
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};

export default UploadImage;