{Title}
+
+ {Year}
+
+ {
+ handleMouseMove(e);
+ onMouseMove(e);
+ }}
+ onMouseOut={() => {
+ handleMouseOut();
+ onMouseOut();
+ }}
+ onBlur={handleMouseOut}
+ className="h-full space-y-4 rounded-4xl p-2">
+ 
+
+
+
+ -
+
+ handler={setMoviesPerPage} value={moviesPerPage}>
+ value={3}>3 movies
+ value={5}>5 movies
+ value={10}>10 movies
+
+
+ {renderMovies?.map((movie, i) => (
+ You're search did not match any movies.
+Please try again. 👉👈
+
+
+
+
+ );
+}
+
+export default Pagination;
diff --git a/src/features/Pagination/hooks/usePagination.ts b/src/features/Pagination/hooks/usePagination.ts
new file mode 100644
index 0000000..819f166
--- /dev/null
+++ b/src/features/Pagination/hooks/usePagination.ts
@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+import { DEFAULT_PAGE, PAGE_PARAM } from '../../../shared/const/const.ts';
+import useUrl from '../../../shared/hooks/useUrl.ts';
+import useSearch from '../../Search/hooks/useSearch.ts';
+
+function usePagination() {
+ const { setUrl, readUrl } = useUrl();
+ const { fetchMovies, query, isLoading, totalResults } = useSearch();
+
+ const currPage = Number(readUrl(PAGE_PARAM));
+ const isPrevDisabled = currPage === 1 || isLoading;
+ const isNextDisabled = isLoading;
+ const isPage = Boolean(currPage);
+ const noPages = totalResults <= 10;
+
+ const handleNextPage = useCallback(() => {
+ const newPage = currPage + 1;
+
+ setUrl(PAGE_PARAM, isPage ? String(newPage) : String(DEFAULT_PAGE));
+
+ fetchMovies(query, newPage);
+ }, [isPage, setUrl, fetchMovies, query, currPage]);
+
+ const handlePrevPage = useCallback(() => {
+ if (!isPage || currPage === 1) return;
+
+ const newPage = currPage - 1;
+
+ setUrl(PAGE_PARAM, String(newPage));
+ fetchMovies(query, newPage);
+ }, [isPage, currPage, setUrl, fetchMovies, query]);
+
+ return {
+ handleNextPage,
+ handlePrevPage,
+ isPrevDisabled,
+ isNextDisabled,
+ noPages,
+ };
+}
+
+export default usePagination;
diff --git a/src/features/Pagination/ui/Button.tsx b/src/features/Pagination/ui/Button.tsx
new file mode 100644
index 0000000..179e0ab
--- /dev/null
+++ b/src/features/Pagination/ui/Button.tsx
@@ -0,0 +1,45 @@
+interface IButtonProps {
+ disabled: boolean;
+ onClick: () => void;
+ position: 'left' | 'right';
+ children: string;
+}
+
+function Button({ disabled, onClick, position, children }: IButtonProps) {
+ const isLeftPosition = position === 'left';
+ const btnPosition = isLeftPosition
+ ? 'left-0 lg:-left-16'
+ : 'right-0 lg:-right-16';
+ const arrowDirectionMain = isLeftPosition
+ ? 'group-hover:-translate-x-14'
+ : 'group-hover:translate-x-14';
+ const arrowDirectionSecondSnooze = isLeftPosition
+ ? 'translate-x-14'
+ : '-translate-x-14';
+
+ return (
+
+ );
+}
+
+export default Button;
diff --git a/src/features/Search/Search.tsx b/src/features/Search/Search.tsx
new file mode 100644
index 0000000..ead407a
--- /dev/null
+++ b/src/features/Search/Search.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+
+import { RefObject, useCallback, useRef } from 'react';
+
+import LocomotiveScroll from 'locomotive-scroll';
+
+import { ENTER_KEY, ESCAPE_KEY } from './const/const.ts';
+import useSearch from './hooks/useSearch.ts';
+import searchIcon from '../../assets/search.svg';
+import {
+ DEFAULT_PAGE,
+ LOCAL_STORAGE_SEARCH_QUERY,
+ PAGE_PARAM,
+ SCROLL_TOP_DURATION,
+} from '../../shared/const/const.ts';
+import useKey from '../../shared/hooks/useKey.ts';
+import useLocalStorageState from '../../shared/hooks/useLocalStorageState.ts';
+import useUrl from '../../shared/hooks/useUrl.ts';
+import Button from '../../shared/ui/Button.tsx';
+
+interface IMovieListProps {
+ scroll: RefObject
+
+ {isLoading &&
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default GradientBackground;
diff --git a/src/shared/const/const.ts b/src/shared/const/const.ts
new file mode 100644
index 0000000..955c620
--- /dev/null
+++ b/src/shared/const/const.ts
@@ -0,0 +1,10 @@
+export const API_KEY = 'dbb72d83';
+export const API_URL = `https://www.omdbapi.com/?apikey=${API_KEY}`;
+export const QUERY_FALLBACK = 'all';
+export const NOT_EXIST = 'N/A';
+export const LOCAL_STORAGE_SEARCH_QUERY = 'search-query';
+export const PAGE_PARAM = 'page';
+export const DEFAULT_PAGE = 1;
+export const APP_TITLE = 'Cinemania | Dive into Movie Wonderland';
+export const LOADING_STATE = 'loading';
+export const SCROLL_TOP_DURATION = 300;
diff --git a/src/shared/hooks/useKey.ts b/src/shared/hooks/useKey.ts
new file mode 100644
index 0000000..40d7747
--- /dev/null
+++ b/src/shared/hooks/useKey.ts
@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+
+function useKey(key: string, action: () => void) {
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ const keyMatched = e.key.toLowerCase() === key.toLowerCase();
+
+ if (keyMatched) {
+ action();
+ }
+ },
+ [action, key],
+ );
+
+ useEffect(() => {
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [handleKeyDown]);
+}
+
+export default useKey;
diff --git a/src/shared/hooks/useLocalStorageState.ts b/src/shared/hooks/useLocalStorageState.ts
new file mode 100644
index 0000000..ba84ed6
--- /dev/null
+++ b/src/shared/hooks/useLocalStorageState.ts
@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+function useLocalStorageState(initialState: string, key: string) {
+ const storedValue = localStorage.getItem(key);
+ const init = storedValue || initialState;
+
+ const [value, setValue] = useState(init);
+
+ useEffect(() => {
+ localStorage.setItem(key, value);
+ }, [value, key]);
+
+ return [value, setValue] as [string, Dispatch+ Something went really wrong 😱 +
+If you faced any issues, please contact our support team
+ + cinemania-help@gmail.com + +
+
+
,
+ document.body,
+ );
+}
+
+export default Loader;
diff --git a/src/shared/ui/Modal.tsx b/src/shared/ui/Modal.tsx
new file mode 100644
index 0000000..fbaafcc
--- /dev/null
+++ b/src/shared/ui/Modal.tsx
@@ -0,0 +1,29 @@
+import useRadialHover from '../hooks/useRadialHover.ts';
+import { IChildren } from '../types/interfaces.ts';
+
+interface IModalProps extends IChildren {
+ className?: string;
+}
+
+function Modal({ className = '', children }: IModalProps) {
+ const {
+ handleMouseOut,
+ handleMouseMove,
+ containerRef: modalRef,
+ } = useRadialHover
+ {children}
+
+
+
+ {children}
+
+
+ );
+}
+
+function Option
+ {children}
+
,
+ document.body,
+ );
+}
+
+export default Tooltip;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// + {LOGO_LETTERS.map((letter, i) => ( + + {letter} + + ))} +
++ Found {totalResults} movies +
+ ); +} + +export default TotalResults; diff --git a/src/widgets/Main/Main.tsx b/src/widgets/Main/Main.tsx new file mode 100644 index 0000000..0631c0f --- /dev/null +++ b/src/widgets/Main/Main.tsx @@ -0,0 +1,9 @@ +import { IChildren } from '../../shared/types/interfaces.ts'; + +function Main({ children }: IChildren) { + return ( +
+
+ );
+}
+
+export default MovieDetails;
diff --git a/src/widgets/MovieDetails/hooks/useMovie.ts b/src/widgets/MovieDetails/hooks/useMovie.ts
new file mode 100644
index 0000000..ec65748
--- /dev/null
+++ b/src/widgets/MovieDetails/hooks/useMovie.ts
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+
+import { useLoaderData } from 'react-router-dom';
+
+import ReactLogo from '../../../assets/reactJS-logo.png';
+import { APP_TITLE, NOT_EXIST } from '../../../shared/const/const.ts';
+import { ApiMovieResponse } from '../../../shared/types/types.ts';
+
+function useMovie() {
+ const movie = useLoaderData() as ApiMovieResponse;
+
+ useEffect(() => {
+ const newTitle = movie.Title;
+
+ if (newTitle) document.title = `Cinemania | ${newTitle}`;
+
+ return () => {
+ document.title = APP_TITLE;
+ };
+ }, [movie.Title]);
+
+ if (!movie) return {};
+
+ const {
+ Poster,
+ Title,
+ Runtime,
+ Genre,
+ Plot,
+ Year,
+ imdbRating,
+ imdbVotes,
+ Director,
+ Actors,
+ } = movie;
+
+ const timeSeconds = Number(Runtime.slice(0, -4));
+ const hrs = Math.floor(timeSeconds / 60);
+ const min = Math.floor(timeSeconds % 60);
+ const time = hrs !== 0 ? `${hrs}h ${min}m` : `${min}m`;
+ const description = `${Plot.slice(0, 150)}...`;
+ const poster = Poster === NOT_EXIST ? ReactLogo : Poster;
+
+ return {
+ title: Title,
+ time,
+ description,
+ poster,
+ genre: Genre,
+ year: Year,
+ imdbRating,
+ imdbVotes,
+ director: Director,
+ actors: Actors,
+ };
+}
+
+export default useMovie;
diff --git a/src/widgets/MovieDetails/ui/BackButton.tsx b/src/widgets/MovieDetails/ui/BackButton.tsx
new file mode 100644
index 0000000..d04a995
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/BackButton.tsx
@@ -0,0 +1,23 @@
+import chevronLeft from '../../../assets/chevron-left.svg';
+import LinkWithQuery from '../../../shared/ui/LinkWithQuery.tsx';
+
+function BackButton() {
+ return (
+
+
+
+
+
+ {title}
+ + {time} | {year} + + {genre} + + ⭐{imdbRating}/10 | 🍿{imdbVotes} + +{description}
++ Directed By: + {director} +
++ Cast: + {actors} +
+
+ 
+
+
+