2 files changed, 65 insertions, 8 deletions
diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx
new file mode 100644
index 0000000..97581fc
--- /dev/null
+++ b/src/components/ReviewCard/ReviewCard.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Card,
+  CardContent,
+  Typography,
+  Divider
+} from '@material-ui/core/';
+import { Rating } from '@material-ui/lab';
+import { Feedback } from 'which-types';
+
+import UserStrip from '../UserStrip/UserStrip';
+
+interface PropTypes {
+  feedback: Feedback;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: theme.spacing(4, 0, 1, 0)
+  }
+}));
+
+const ReviewCard: React.FC<PropTypes> = ({ feedback }) => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root} elevation={2}>
+      <UserStrip
+        user={feedback.author}
+        info={<Rating value={feedback.score} readOnly size="small" />}
+      />
+      <Divider />
+      <CardContent>
+        <Typography>
+          {feedback.contents}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ReviewCard;
diff --git a/src/components/UploadImage/UploadImage.tsx b/src/components/UploadImage/UploadImage.tsx
index 8ad65d5..836b2a0 100644
--- a/src/components/UploadImage/UploadImage.tsx
+++ b/src/components/UploadImage/UploadImage.tsx
@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControlLabel,
+  Switch
+} from '@material-ui/core';
 
 interface PropTypes {
   isOpen: boolean;
@@ -15,6 +19,7 @@ interface PropTypes {
 
 const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
   const [url, setUrl] = useState<string>('');
+  const [isInstagramLink, setIsInstagramLink] = useState<boolean>(false);
 
 
   const handleClose = () => {
@@ -22,14 +27,19 @@ const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
   };
 
   const handleSubmit = () => {
+    const result = isInstagramLink ? `${url.slice(0, url.length - 29)}/media/?size=l` : url;
+    callback(result || '');
     handleClose();
-    callback(url || '');
   };
 
   const handleChange = (event:React.ChangeEvent<HTMLInputElement>) => {
     setUrl(event.target.value);
   };
 
+  const handleSwitch = () => {
+    setIsInstagramLink(!isInstagramLink);
+  };
+
   return (
     <div>
       <Dialog open={isOpen} onClose={handleClose}>
@@ -48,6 +58,10 @@ const UploadImage: React.FC<PropTypes> = ({ setIsOpen, isOpen, callback }) => {
             autoComplete="off"
             onChange={handleChange}
           />
+          <FormControlLabel
+            control={<Switch color="primary" onClick={handleSwitch} checked={isInstagramLink} size="small" />}
+            label="It's an Instagram link"
+          />
         </DialogContent>
         <DialogActions>
           <Button onClick={handleClose} color="primary">