feat: add full main api + add delete btn for saved movies

src/components/Movies/Movies.js

@@ -4,9 +4,23 @@ import SearchForm from '../SearchForm/SearchForm';
 import MoviesCardList from '../MoviesCardList/MoviesCardList';
 
 function Movies({ movies }) {
+  //стейт отфильтрованного массива с результатом
+  /*const [filteredMovies, setFilteredMovies] = React.useState([]);
+
+  const handleFilterMovies = (inputValue) => {
+    setFilteredMovies(
+      movies.filter((movie) => {
+        return (
+          movie.nameRU.toLowerCase().includes(inputValue) ||
+          movie.nameEN.toLowerCase().includes(inputValue)
+        );
+      }),
+    );
+  };*/
+
   return (
     <section className="movies">
-      <SearchForm />
+      <SearchForm /*onFilter={handleFilterMovies}*/ />
       <MoviesCardList movies={movies} />
       <div className="movies__button-zone">
         <button className="movies__button" type="button">

src/components/MoviesCard/MoviesCard.css

@@ -87,6 +87,24 @@
   }
 }
 
+.movies-card__delete {
+  cursor: pointer;
+  border: none;
+  box-sizing: border-box;
+  background: url('../../images/delete.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  border: none;
+  width: 14px;
+}
+
+@media screen and (max-width: 450px) {
+  .movies-card__delete {
+    margin: 0;
+  }
+}
+
 .movies-card__duration {
   padding: 0 0 16px 16px;
   font-style: normal;

src/components/MoviesCard/MoviesCard.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useLocation, Link } from 'react-router-dom';
 
 import './MoviesCard.css';
 import { timeConverter } from '../../utils/functions/timeConverter';
 import { baseImgLink } from '../../utils/constants';
 
 function MoviesCard({ movie }) {
+  const { pathname } = useLocation();
+
   return (
     <li className="movies-card">
       <Link
@@ -20,7 +22,13 @@ function MoviesCard({ movie }) {
       </Link>
       <div className="movies-card__about">
         <h2 className="movies-card__header">{movie.nameRU}</h2>
-        <button type="button" className="movies-card__icon" alt="Лайк" />
+
+        {pathname === '/movies' && (
+          <button type="button" className="movies-card__icon" alt="Лайк" />
+        )}
+        {pathname === '/saved-movies' && (
+          <button type="button" className="movies-card__delete" alt="Крестик" />
+        )}
       </div>
       <span className="movies-card__duration">
         {timeConverter(movie.duration)}

src/components/SearchForm/SearchForm.js

@@ -5,12 +5,18 @@ import FilterCheckbox from '../FilterCheckbox/FilterCheckbox';
 import { useFormAndValidation } from '../../hooks/useFormAndValidation';
 import { validateSearch } from '../../utils/functions/validators';
 
-function SearchForm() {
+function SearchForm({ onFilter }) {
   const { values, handleChange, isValid } = useFormAndValidation();
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    //тут будет функция на поиск и отображение фильмов (отфильтрованных)
+    onFilter(values.search);
+  };
+
   return (
     <section className="search-form">
-      <form className="search-form__input-zone">
+      <form className="search-form__input-zone" onSubmit={handleSubmit}>
         <input
           className="search-form__input"
           name="search"

src/utils/api/MainApi.js

@@ -1,3 +1,5 @@
+import { baseImgLink } from '../constants';
+
 export default class MainApi {
   constructor({ url, headers }) {
     this._url = url;
@@ -35,4 +37,40 @@ export default class MainApi {
       }),
     });
   }
+
+  //получаем сохраненные фильмы
+  getSavedMovies() {
+    return this._request(`${this._url}/movies`, {
+      headers: this._headers,
+    });
+  }
+
+  //добавить в избранное
+  saveMovie(movie) {
+    return this._request(`${this._url}/movies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        country: movie.country,
+        director: movie.director,
+        duration: movie.duration,
+        year: movie.year,
+        description: movie.description,
+        image: `${baseImgLink}${movie.image.url}`,
+        trailerLink: movie.trailerLink,
+        thumbnail: `${baseImgLink}${movie.image.formats.thumbnail.url}`,
+        movieId: movie.id,
+        nameRU: movie.nameRU,
+        nameEN: movie.nameEN,
+      }),
+      headers: this._headers,
+    }).then(this._returnResponse);
+  }
+
+  //удалить из избранного
+  deleteMovie(id) {
+    return this._request(`${this._url}/movies/${id}`, {
+      method: 'DELETE',
+      headers: this._headers,
+    }).then(this._returnResponse);
+  }
 }