From 2e9e20414c2ea49d7f40bcff09b89897e13fd2f4 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sat, 21 Mar 2020 15:32:02 +0300
Subject: chore: migrate components to Typescript

---
 src/components/Loading/Loading.js            |  33 --------
 src/components/Loading/Loading.tsx           |  33 ++++++++
 src/components/SolutionCard/SolutionCard.js  | 114 -------------------------
 src/components/SolutionCard/SolutionCard.tsx | 122 +++++++++++++++++++++++++++
 4 files changed, 155 insertions(+), 147 deletions(-)
 delete mode 100644 src/components/Loading/Loading.js
 create mode 100644 src/components/Loading/Loading.tsx
 delete mode 100644 src/components/SolutionCard/SolutionCard.js
 create mode 100644 src/components/SolutionCard/SolutionCard.tsx

(limited to 'src/components')

diff --git a/src/components/Loading/Loading.js b/src/components/Loading/Loading.js
deleted file mode 100644
index e8793cc..0000000
--- a/src/components/Loading/Loading.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-import {
-  Card,
-  CardHeader,
-} from '@material-ui/core';
-
-import { makeStyles } from '@material-ui/core/styles';
-import CircularProgress from '@material-ui/core/CircularProgress';
-
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(1),
-    background: theme.palette.background.elevation2,
-  },
-}));
-
-const Loading = () => {
-  const classes = useStyles();
-
-  return (
-    <Card className={classes.root}>
-      <CardHeader
-        avatar={(<CircularProgress color="secondary" />)}
-        title="Loading"
-        subheader="Please, wait."
-      />
-    </Card>
-  )
-};
-
-export default Loading;
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..a784be1
--- /dev/null
+++ b/src/components/Loading/Loading.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {
+  Card,
+  CardHeader,
+} from '@material-ui/core';
+
+import { makeStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+    background: theme.palette.background.elevation2,
+  },
+}));
+
+const Loading: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        avatar={(<CircularProgress color="secondary" />)}
+        title="Loading"
+        subheader="Please, wait."
+      />
+    </Card>
+  )
+};
+
+export default Loading;
diff --git a/src/components/SolutionCard/SolutionCard.js b/src/components/SolutionCard/SolutionCard.js
deleted file mode 100644
index fdd4bdf..0000000
--- a/src/components/SolutionCard/SolutionCard.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Typography,
-  Card,
-  CardHeader,
-  CardContent,
-  IconButton,
-  Avatar,
-  Grid,
-  Menu,
-  MenuItem,
-} from '@material-ui/core';
-
-import { makeStyles } from '@material-ui/core/styles';
-import TimerIcon from '@material-ui/icons/Timer';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import DeleteIcon from '@material-ui/icons/Delete';
-
-import { del } from '../../requests';
-
-
-const DATE_FORMAT = {
-  month: 'long',
-  day: 'numeric',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    padding: theme.spacing(1),
-    background: theme.palette.background.elevation2,
-
-    '& .MuiTypography-h3': {
-      margin: theme.spacing(2),
-    },
-  },
-  menu: {
-    '& ul': {
-      background: theme.palette.background.elevation3,
-    }
-  },
-}));
-
-const SolutionCard = ({ data, removeThisCard }) => {
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = useState(null);
-
-  const author = data.author? data.author.username : 'anonymous';
-  const date = new Date(data.date);
-
-  const handleOpenMenu = event => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleDelete = () => {
-    del(`solutions/${data.id}/`).then(() => {
-      removeThisCard(data.id);
-    });
-    handleClose();
-  };
-
-  return (
-    <Card className={classes.root}>
-      <CardHeader
-        avatar={
-          author === 'anonymous'?
-            (<Avatar/>)
-            :
-            (<Avatar>{author[0].toUpperCase()}</Avatar>)
-        }
-        title={author}
-        subheader={date.toLocaleString('default', DATE_FORMAT)}
-        action={(
-          <IconButton onClick={handleOpenMenu}>
-            <MoreVertIcon />
-          </IconButton>
-        )}
-      />
-      <Menu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        keepMounted
-        onClose={handleClose}
-        className={classes.menu}
-      >
-        <MenuItem onClick={handleDelete}>
-          <DeleteIcon />
-          Delete
-        </MenuItem>
-      </Menu>
-      <CardContent>
-        <Grid container direction="row" justify="center" alignItems="center">
-          <Grid item>
-            <TimerIcon/>
-          </Grid>
-          <Grid item>
-            <Typography variant="h3" color="primary">
-              { data.result }
-            </Typography>
-          </Grid>
-        </Grid>
-      </CardContent>
-    </Card>
-  )
-};
-
-export default SolutionCard;
diff --git a/src/components/SolutionCard/SolutionCard.tsx b/src/components/SolutionCard/SolutionCard.tsx
new file mode 100644
index 0000000..5adbff9
--- /dev/null
+++ b/src/components/SolutionCard/SolutionCard.tsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+
+import {
+  Typography,
+  Card,
+  CardHeader,
+  CardContent,
+  IconButton,
+  Avatar,
+  Grid,
+  Menu,
+  MenuItem,
+} from '@material-ui/core';
+import { Solution } from '../../types';
+
+import { makeStyles } from '@material-ui/core/styles';
+import TimerIcon from '@material-ui/icons/Timer';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import DeleteIcon from '@material-ui/icons/Delete';
+
+import { del } from '../../requests';
+
+
+const DATE_FORMAT = {
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+};
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+    background: theme.palette.background.elevation2,
+
+    '& .MuiTypography-h3': {
+      margin: theme.spacing(2),
+    },
+  },
+  menu: {
+    '& ul': {
+      background: theme.palette.background.elevation3,
+    }
+  },
+}));
+
+
+interface PropTypes {
+  data: Solution;
+  removeThisCard: (id: number) => void;
+}
+
+
+const SolutionCard: React.FC<PropTypes> = ({ data, removeThisCard }) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const author = data.author? data.author.username : 'anonymous';
+  const date = new Date(data.date);
+
+  const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  const handleDelete = (): void => {
+    del(`solutions/${data.id}/`).then(() => {
+      removeThisCard(data.id);
+    });
+    handleClose();
+  };
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        avatar={
+          author === 'anonymous'?
+            (<Avatar/>)
+            :
+            (<Avatar>{author[0].toUpperCase()}</Avatar>)
+        }
+        title={author}
+        subheader={date.toLocaleString('default', DATE_FORMAT)}
+        action={
+          <IconButton onClick={handleOpenMenu}>
+            <MoreVertIcon />
+          </IconButton>
+        }
+      />
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        keepMounted
+        onClose={handleClose}
+        className={classes.menu}
+      >
+        <MenuItem onClick={handleDelete}>
+          <DeleteIcon />
+          Delete
+        </MenuItem>
+      </Menu>
+      <CardContent>
+        <Grid container direction="row" justify="center" alignItems="center">
+          <Grid item>
+            <TimerIcon/>
+          </Grid>
+          <Grid item>
+            <Typography variant="h3" color="primary">
+              { data.result }
+            </Typography>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+};
+
+export default SolutionCard;
-- 
cgit v1.2.3