Bug Fix

.eslintrc.cjs

@@ -21,32 +21,36 @@ module.exports = {
       }
     },
   rules: {
-      "indent": ["error", 2],
-      "prettier/prettier": "error",
-      "linebreak-style": [0, "unix"],
-      "quotes": ["error", "single", { "avoidEscape": true }],
-      "semi": ["error", "always"],
-      "react/react-in-jsx-scope": "off",
-      "react/prop-types": 0,
-      "import/no-unresolved": [2, { "caseSensitive": false }],
-      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-      "import/order": [
-        2,
-        {
-          "groups": [
-            "builtin",
-            "external",
-            "internal",
-            "parent",
-            "sibling",
-            "index"
-          ],
-          "newlines-between": "always"
-        }
-      ]
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "indent": ["error", 2, {"SwitchCase" : 1, "ObjectExpression": 1}],
+    "prettier/prettier": "error",
+    "linebreak-style": [0, "unix"],
+    "quotes": ["error", "single", { "avoidEscape": true }],
+    "semi": ["error", "always"],
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": 0,
+    "class-methods-use-this": ["error", { "enforceForClassFields": false }],
+    "import/no-unresolved": [2, { "caseSensitive": false }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/order": [
+      2,
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "always"
+      }
+    ]
   },
   ignorePatterns: [
-    'src/',
     '*.cjs',
     'vite.config.js',
     'build/',

.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
 node_modules
 dist
 dist-ssr

package.json

@@ -7,8 +7,6 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "lint:fix": "eslint --ext .js,.jsx src --fix",

src/App.jsx → src/components/App/App.jsx

@@ -1,14 +1,15 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React, { Component } from 'react';
 // eslint-disable-next-line object-curly-newline
-import { Alert, Col, ConfigProvider, Layout, Pagination, Row, Spin, Tabs } from 'antd';
+import { Alert, Col, ConfigProvider, Layout, Pagination, Spin, Tabs } from 'antd';
 
-import MovieService from './services/MovieService';
-import SearchTab from './components/SearchTab';
-import RatedTab from './components/RatedTab';
-import FilmList from './components/FilmList';
-import FetcherService from './services/FetcherService';
-import { Context } from './services/Context';
+import MovieService from '../../services/MovieService';
+import SearchTab from '../SearchTab';
+import RatedTab from '../RatedTab';
+import FilmList from '../FilmList';
+import ErrorBoundary from '../ErrorBoundary';
+import FetcherService from '../../services/FetcherService';
+import { Context } from '../../services/Context';
 
 const { Content } = Layout;
 
@@ -30,7 +31,7 @@ export default class App extends Component {
 
   async componentDidMount() {
     const { movie, fetcher } = this.state;
-    
+
     const createSession = async () => {
       const x = await movie.createGuestSession();
       return x;
@@ -161,23 +162,18 @@ export default class App extends Component {
         >
           <Layout style={{ backgroundColor: '#fff' }}>
             <Content>
-              <Col xs={{ span: 22, offset: 1 }} md={{ span: 17, offset: 4 }}>
-                <Tabs
-                  defaultActiveKey={1}
-                  items={tabs}
-                  style={{ background: '#fff', justifyContent: 'center' }}
-                  destroyInactiveTabPane
-                  onChange={this.changeTabHandler}
-                />
-
-                <>
-                  {error && <Alert type="error" message={error} style={{ margin: '10px auto' }} />}
-                  {isLoading ? (
-                    <Row>
-                      <Spin tip="Loading..." style={{ margin: '10px auto' }} />
-                    </Row>
-                  ) : (
-                    <>
+              <ErrorBoundary>
+                <Col xs={{ span: 22, offset: 1 }} md={{ span: 17, offset: 4 }}>
+                  <Tabs
+                    defaultActiveKey={1}
+                    items={tabs}
+                    style={{ background: '#fff', justifyContent: 'center' }}
+                    destroyInactiveTabPane
+                    onChange={this.changeTabHandler}
+                  />
+                  <>
+                    {error && <Alert type="error" message={error} style={{ margin: '10px auto' }} />}
+                    <Spin tip="Loading..." style={{ margin: '10px auto' }} spinning={isLoading}>
                       <FilmList
                         films={films}
                         // eslint-disable-next-line max-len
@@ -195,10 +191,10 @@ export default class App extends Component {
                         onChange={(page) => this.setCurrentPage(page)}
                         itemRender={this.paginationItemRender}
                       />
-                    </>
-                  )}
-                </>
-              </Col>
+                    </Spin>
+                  </>
+                </Col>
+              </ErrorBoundary>
             </Content>
           </Layout>
         </Context.Provider>

src/components/App/index.js

@@ -0,0 +1,3 @@
+import App from './App.jsx';
+
+export default App;

src/components/ErrorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children } = this.props;
+    if (hasError) {
+      return <h1>Что-то пошло не так. Проверьте настройки сети.</h1>;
+    }
+
+    return children;
+  }
+}

src/components/ErrorBoundary/index.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/extensions
+import ErrorBoundary from './ErrorBoundary.jsx';
+
+export default ErrorBoundary;

src/components/FilmCard/FilmCard.jsx

@@ -1,82 +1,91 @@
-import React, { Component } from 'react'
-import { Card, Typography } from 'antd'
-import PropTypes from 'prop-types'
-import { format } from 'date-fns'
+import React, { Component } from 'react';
+import { Card, Typography } from 'antd';
+import PropTypes from 'prop-types';
+import { format } from 'date-fns';
 
-import StarRating from '../StarRating'
-import { Context } from '../../services/Context.js'
-import classes from './FilmCard.module.css'
+import StarRating from '../StarRating';
+import { Context } from '../../services/Context';
 
-const { Title, Text, Paragraph } = Typography
+import classes from './FilmCard.module.css';
+
+const { Title, Text, Paragraph } = Typography;
 
 export default class FilmCard extends Component {
+  // eslint-disable-next-line react/static-property-placement
   static contextType = Context;
 
-  ellipsisText(text, words) {
+  changeRatingHandler = async (rating) => {
+    const { setRatingHandler, film } = this.props;
+    setRatingHandler(film.id, rating);
+  };
+
+  ellipsisText = (text, words) => {
     const arr = text.split(' ');
     if (arr.length <= words) {
       return text;
     }
-    return arr.splice(0, words).join(' ') + ' ...';
-  }
+    return `${arr.splice(0, words).join(' ')} ...`;
+  };
 
-  parseAndFormatDate(dateString) {
+  parseAndFormatDate = (dateString) => {
     const date = Date.parse(dateString);
-    if (isNaN(date)) {
+    if (Number.isNaN(date)) {
       return 'Unknown release date';
     }
     return format(date, 'PPP');
-  }
+  };
 
-  changeRatingHandler = async (rating) => {
-    this.props.setRatingHandler(this.props.film.id, rating);
-  }
-
-  getGenreName(genreId) {
-    const genre = this.context.genres.find((genreItem) => genreItem.id === genreId);
+  getGenreName = (genreId) => {
+    const { genres } = this.context;
+    const genre = genres.find((genreItem) => genreItem.id === genreId);
     return genre ? genre.name : 'Unknown genre';
-  }
+  };
 
-  ratingColor() {
-    if (this.props.film.vote_average <= 3) return '#E90000';
-    else if (this.props.film.vote_average <= 5) return '#E97E00';
-    else if (this.props.film.vote_average <= 7) return '#E9D100';
-    else return '#66E900';
-  }
+  ratingColor = () => {
+    const { film } = this.props;
+    if (film.vote_average <= 3) return '#E90000';
+    if (film.vote_average <= 5) return '#E97E00';
+    if (film.vote_average <= 7) return '#E9D100';
+    return '#66E900';
+  };
 
   render() {
     const { film } = this.props;
     return (
       <Card
-        cover={
+        /* eslint-disable prettier/prettier */
+        cover={(
           <img
             alt={film.title}
             src={
-              film.poster_path ? `https://image.tmdb.org/t/p/w500/${film.poster_path}` : 'https://via.placeholder.com/200'
+              film.poster_path
+                ? `https://image.tmdb.org/t/p/w500/${film.poster_path}`
+                : 'https://via.placeholder.com/200'
             }
             className={classes.filmCard__image}
           />
-        }
+        )}
         className={classes.filmCard}
       >
         <div className={classes.filmCard__content}>
           <div className={classes.filmCard__headerWrapper}>
             <Title level={3} className={classes.filmCard__header}>
               {this.ellipsisText(film.title, 3)}
-              <span className={classes.filmCard__rating} style={{ borderColor: this.ratingColor() }}>
+              <span
+                className={classes.filmCard__rating}
+                style={{ borderColor: this.ratingColor() }}
+              >
                 {film.vote_average.toFixed(1)}
               </span>
             </Title>
-            {film.release_date && <Text type={'secondary'}>{this.parseAndFormatDate(film.release_date)}</Text>}
+            {film.release_date && <Text type="secondary">{this.parseAndFormatDate(film.release_date)}</Text>}
             {!!film.genre_ids.length && (
               <div className={classes.filmCard__genres}>
-                {film.genre_ids.map((genreId) => {
-                  return (
-                    <Text code key={genreId} className={classes.filmCard__genre}>
-                      {this.getGenreName(genreId)}
-                    </Text>
-                  )
-                })}
+                {film.genre_ids.map((genreId) => (
+                  <Text code key={genreId} className={classes.filmCard__genre}>
+                    {this.getGenreName(genreId)}
+                  </Text>
+                ))}
               </div>
             )}
           </div>
@@ -90,7 +99,8 @@ export default class FilmCard extends Component {
           </div>
         </div>
       </Card>
-    )
+      /* eslint-enable prettier/prettier */
+    );
   }
 }
 
@@ -111,9 +121,9 @@ FilmCard.propTypes = {
     vote_average: PropTypes.number,
     vote_count: PropTypes.number,
     rating: PropTypes.oneOfType([PropTypes.number]),
-  }).isRequired,
-}
+  }),
+};
 
 FilmCard.defaultProps = {
   film: {},
-}
+};

src/components/FilmCard/index.js

@@ -1,3 +1,4 @@
-import FilmCard from './FilmCard.jsx'
+// eslint-disable-next-line import/extensions
+import FilmCard from './FilmCard.jsx';
 
-export default FilmCard
+export default FilmCard;