Renaming jsx to tsx and creating interfaces

package.json

@@ -30,6 +30,7 @@
     "react-test-renderer": "16.10.2",
     "redux-devtools-extension": "2.13.8",
     "stylelint-config-htmlacademy": "0.1.4",
+    "ts-loader": "6.2.1",
     "typescript": "3.7.2",
     "utility-types": "3.10.0",
     "webpack": "4.41.1",

src/components/add-review/add-review.jsx → src/components/add-review/add-review.tsx

@@ -1,14 +1,38 @@
-import React, {useEffect, memo} from 'react';
-import PropTypes from 'prop-types';
-import {Redirect, Link} from 'react-router-dom';
+import * as React from 'react';
+import {Redirect, Link, withRouter} from 'react-router-dom';
 import {connect} from 'react-redux';
-import {withRouter} from "react-router-dom";
 
 import {ActionCreator, Operation} from '../../reducer/reducer';
 import Avatar from '../avatar/avatar';
+import {Film, User} from "../../types";
+
+interface Props {
+  films: Film[];
+  user: User;
+  onSubmitForm: (review: {
+    rating: number;
+    comment: string;
+  }, id: number) => void;
+  onLoadFilms: () => void;
+  onRadioClick: () => void;
+  onTextareaChange: (evt: any) => void;
+  isValidated: boolean;
+  isReviewSending: boolean;
+  onUpdateForm: () => void;
+  didReviewSend: boolean;
+  history: {
+    push: (path: string) => void;
+  };
+  match: {
+    params: {
+      id: number;
+    };
+  };
+}
 
-const AddReview = (props) => {
-  const {films,
+const AddReview = (props: Props) => {
+  const {
+    films,
     user,
     onSubmitForm,
     onLoadFilms,
@@ -18,11 +42,12 @@ const AddReview = (props) => {
     isReviewSending,
     onUpdateForm,
     didReviewSend,
-    history} = props;
+    history
+  } = props;
   const formRef = React.createRef();
   let id;
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (didReviewSend) {
       formRef.current.reset();
       onUpdateForm();
@@ -32,15 +57,15 @@ const AddReview = (props) => {
 
   const redirect = () => history.push(`/film/${id}`);
 
-  const handleFormSubmit = (comment, rating, filmId) => {
+  const handleFormSubmit = (comment, rating, filmId: number) => {
     const review = {
       rating,
       comment
     };
     onSubmitForm(review, filmId);
   };
 
-  const renderFilm = (film) => {
+  const renderFilm = (film: Film) => {
     return <section className="movie-card movie-card--full">
       <div className="movie-card__header">
         <div className="movie-card__bg">
@@ -131,44 +156,6 @@ const AddReview = (props) => {
   return null;
 };
 
-AddReview.propTypes = {
-  films: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    posterImage: PropTypes.string.isRequired,
-    previewVideoLink: PropTypes.string.isRequired,
-    videoLink: PropTypes.string.isRequired,
-    backgroundColor: PropTypes.string.isRequired,
-    backgroundImage: PropTypes.string.isRequired,
-    previewImage: PropTypes.string.isRequired,
-    genre: PropTypes.string.isRequired,
-    released: PropTypes.number.isRequired,
-    rating: PropTypes.number.isRequired,
-    scoresCount: PropTypes.number.isRequired,
-    runTime: PropTypes.number.isRequired,
-    description: PropTypes.string.isRequired,
-    director: PropTypes.string.isRequired,
-    starring: PropTypes.arrayOf(PropTypes.string).isRequired,
-    isFavorite: PropTypes.bool.isRequired,
-  })),
-  match: PropTypes.object.isRequired,
-  onSubmitForm: PropTypes.func.isRequired,
-  onLoadFilms: PropTypes.func.isRequired,
-  onRadioClick: PropTypes.func.isRequired,
-  onTextareaChange: PropTypes.func.isRequired,
-  onUpdateForm: PropTypes.func.isRequired,
-  isValidated: PropTypes.bool.isRequired,
-  isReviewSending: PropTypes.bool.isRequired,
-  didReviewSend: PropTypes.bool.isRequired,
-  history: PropTypes.object.isRequired,
-  user: PropTypes.shape({
-    id: PropTypes.number,
-    name: PropTypes.string,
-    email: PropTypes.string,
-    avatarUrl: PropTypes.string,
-  }),
-};
-
 const mapStateToProps = (state, ownProps) => Object.assign({}, ownProps, {
   isReviewSending: state.isReviewSending,
   didReviewSend: state.isReviewSending,
@@ -184,5 +171,5 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 export {AddReview};
-export default connect(mapStateToProps, mapDispatchToProps)(memo(withRouter(AddReview)));
+export default connect(mapStateToProps, mapDispatchToProps)(React.memo(withRouter(AddReview)));
 

src/components/avatar/avatar.jsx → src/components/avatar/avatar.tsx

@@ -1,8 +1,13 @@
-import React, {memo} from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import {Link} from 'react-router-dom';
 
-const Avatar = (props) => {
+import {User} from "../../types";
+
+interface Props {
+  user: User;
+}
+
+const Avatar = (props: Props) => {
   const {user} = props;
 
   return <div className="user-block">
@@ -25,13 +30,4 @@ const Avatar = (props) => {
   </div>;
 };
 
-Avatar.propTypes = {
-  user: PropTypes.shape({
-    id: PropTypes.number,
-    name: PropTypes.string,
-    email: PropTypes.string,
-    avatarUrl: PropTypes.string,
-  }),
-};
-
-export default memo(Avatar);
+export default React.memo(Avatar);

src/components/big-player/big-player.jsx → src/components/big-player/big-player.tsx

@@ -1,8 +1,21 @@
-import React, {useEffect, useRef, memo} from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 
-const BigPlayer = (props) => {
-  const {playingFilm,
+import {Film} from "../../types";
+
+interface Props {
+  playingFilm: Film;
+  onOpenCloseVideoButtonClick: (bool: boolean) => void;
+  isPlaying: boolean;
+  setIsPlaying: (isPlaying: any) => void;
+  progress: number;
+  setProgress: (progress: number) => void;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+}
+
+const BigPlayer = (props: Props) => {
+  const {
+    playingFilm,
     onOpenCloseVideoButtonClick,
     isPlaying,
     setIsPlaying,
@@ -11,15 +24,15 @@ const BigPlayer = (props) => {
     isLoading,
     setIsLoading
   } = props;
-  const videoRef = useRef();
+  const videoRef = React.useRef();
 
-  useEffect(() => {
+  React.useEffect(() => {
     videoRef.current.oncanplaythrough = () => {
       setIsLoading(false);
     };
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (isPlaying) {
       videoRef.current.onended = () => {
         videoRef.current.load();
@@ -123,33 +136,4 @@ const BigPlayer = (props) => {
   </div>;
 };
 
-BigPlayer.propTypes = {
-  playingFilm: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    posterImage: PropTypes.string.isRequired,
-    previewVideoLink: PropTypes.string.isRequired,
-    videoLink: PropTypes.string.isRequired,
-    backgroundColor: PropTypes.string.isRequired,
-    backgroundImage: PropTypes.string.isRequired,
-    previewImage: PropTypes.string.isRequired,
-    genre: PropTypes.string.isRequired,
-    released: PropTypes.number.isRequired,
-    rating: PropTypes.number.isRequired,
-    scoresCount: PropTypes.number.isRequired,
-    runTime: PropTypes.number.isRequired,
-    description: PropTypes.string.isRequired,
-    director: PropTypes.string.isRequired,
-    starring: PropTypes.arrayOf(PropTypes.string).isRequired,
-    isFavorite: PropTypes.bool.isRequired,
-  }),
-  onOpenCloseVideoButtonClick: PropTypes.func.isRequired,
-  isPlaying: PropTypes.bool.isRequired,
-  setIsPlaying: PropTypes.func.isRequired,
-  progress: PropTypes.number.isRequired,
-  setProgress: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  setIsLoading: PropTypes.func.isRequired,
-};
-
-export default memo(BigPlayer);
+export default React.memo(BigPlayer);

src/components/favorites/favorites.jsx → src/components/favorites/favorites.tsx

@@ -1,16 +1,21 @@
-import React, {memo} from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
 import {connect} from 'react-redux';
 import {Link} from 'react-router-dom';
 
 import Avatar from '../avatar/avatar';
 import Footer from '../footer/footer';
 import FilmCard from '../film-card/film-card';
 import withIsPreviewPlaying from '../../hocs/with-is-preview-playing/with-is-preview-playing';
+import {Film, User} from "../../types";
+
+interface Props {
+  favorites: Film[];
+  user: User;
+}
 
 const FilmCardWrapped = withIsPreviewPlaying(FilmCard);
 
-const Favorites = (props) => {
+const Favorites = (props: Props) => {
   const {favorites, user} = props;
 
   return <div className="user-page">
@@ -40,38 +45,9 @@ const Favorites = (props) => {
   </div>;
 };
 
-Favorites.propTypes = {
-  favorites: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    posterImage: PropTypes.string.isRequired,
-    previewVideoLink: PropTypes.string.isRequired,
-    videoLink: PropTypes.string.isRequired,
-    backgroundColor: PropTypes.string.isRequired,
-    backgroundImage: PropTypes.string.isRequired,
-    previewImage: PropTypes.string.isRequired,
-    genre: PropTypes.string.isRequired,
-    released: PropTypes.number.isRequired,
-    rating: PropTypes.number.isRequired,
-    scoresCount: PropTypes.number.isRequired,
-    runTime: PropTypes.number.isRequired,
-    description: PropTypes.string.isRequired,
-    director: PropTypes.string.isRequired,
-    starring: PropTypes.arrayOf(PropTypes.string).isRequired,
-    isFavorite: PropTypes.bool.isRequired,
-  })),
-  user: PropTypes.shape({
-    id: PropTypes.number,
-    name: PropTypes.string,
-    email: PropTypes.string,
-    avatarUrl: PropTypes.string,
-  }),
-  match: PropTypes.object.isRequired,
-};
-
 const mapStateToProps = (state, ownProps) => Object.assign({}, ownProps, {
   favorites: state.favorites,
 });
 
 export {Favorites};
-export default connect(mapStateToProps, null)(memo(Favorites));
+export default connect(mapStateToProps, null)(React.memo(Favorites));