chore: migrate profile page to Typescript :label:

4 files changed, 30 insertions, 19 deletions

diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.tsx
index 65c3734..bbf55f1 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.tsx
@@ -5,12 +5,13 @@ import {
   makeStyles,
 } from '@material-ui/core';
 
-import Registration from './Registration/Registration';
+import Registration from './Registration';
 import {
   Window,
   ContentSection,
   SmartList,
 } from 'react-benzin';
+import { User, Solution, RenderPropTypes } from '../../types';
 
 import SolutionCard from '../../components/SolutionCard/SolutionCard';
 
@@ -27,10 +28,16 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const Profile = ({ user, setUser }) => {
+interface PropTypes {
+  user: User;
+  setUser: (user: User) => void;
+}
+
+
+const Profile: React.FC<PropTypes> = ({ user, setUser }) => {
   const classes = useStyles();
 
-  const [profileSolutions, setProfileSolutions] = useState([]);
+  const [profileSolutions, setProfileSolutions] = useState<Solution[]>([]);
 
   const handleLogout = () => {
     setUser({ username: 'anonymous', id: null });
@@ -43,11 +50,11 @@ const Profile = ({ user, setUser }) => {
     });
   }, [user]);
 
-  const removeSolution = (id) => {
+  const removeSolution = (id: number): void => {
     setProfileSolutions(profileSolutions.filter((solution => solution.id !== id)));
   };
 
-  const renderItem = ({ index, style }) => {
+  const renderItem: React.FC<RenderPropTypes> = ({ index, style }) => {
     return (
       <div style={style} className={classes.cell}>
         <SolutionCard data={profileSolutions[index]} removeThisCard={removeSolution} />
diff --git a/src/pages/Profile/Registration/Registration.js b/src/pages/Profile/Registration.tsx
index b2d5503..30e357d 100644
--- a/src/pages/Profile/Registration/Registration.js
+++ b/src/pages/Profile/Registration.tsx
@@ -7,21 +7,26 @@ import {
   FormControlLabel,
   Grid,
 } from '@material-ui/core';
+import { User } from '../../types';
 
 import { ContentSection } from 'react-benzin';
-import { get, post } from '../../../requests';
+import { get, post } from '../../requests';
 
 
-const Registration = ({ setUser }) => {
+interface PropTypes {
+  setUser: (user: User) => void;
+}
 
-  const [username, setUsername] = useState('');
-  const [isRememberMe, setIsRememberMe] = useState(false);
+const Registration: React.FC<PropTypes> = ({ setUser }) => {
 
-  const handleChange = (event) => {
+  const [username, setUsername] = useState<string>('');
+  const [isRememberMe, setIsRememberMe] = useState<boolean>(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setUsername(event.target.value);
   };
 
-  const handleCheck = (event) => {
+  const handleCheck = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setIsRememberMe(event.target.checked);
   };
 
@@ -37,7 +42,7 @@ const Registration = ({ setUser }) => {
         })
         .catch(err => {
           get('users/').then(response => {
-            const user = response.data.filter(user => user.username === username)[0];
+            const user = response.data.filter((user: User) => user.username === username)[0];
             setUser(user);
             if (isRememberMe) {
               localStorage.setItem('userId', user.id);
diff --git a/src/pages/Scoreboard/Scoreboard.tsx b/src/pages/Scoreboard/Scoreboard.tsx
index 9b9ee01..e4185bd 100644
--- a/src/pages/Scoreboard/Scoreboard.tsx
+++ b/src/pages/Scoreboard/Scoreboard.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 
 import { Window, SmartList } from 'react-benzin';
-import { Solution } from '../../types';
+import { Solution, RenderPropTypes } from '../../types';
 
 import SolutionCard from '../../components/SolutionCard/SolutionCard';
 import Loading from '../../components/Loading/Loading';
@@ -24,12 +24,6 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-interface RenderPropTypes {
-  index: number;
-  style: React.CSSProperties;
-}
-
-
 const Scoreboard: React.FC = () => {
   const classes = useStyles();
   const [solutions, setSolutions] = useState<Solution[]>([]);
diff --git a/src/types.d.ts b/src/types.d.ts
index cfc60bc..949d410 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -10,3 +10,8 @@ export interface Solution {
   author: User;
 }
 
+interface RenderPropTypes {
+  index: number;
+  style: React.CSSProperties;
+}
+