Solve challenge

src/App.tsx

@@ -1,95 +1,20 @@
-import { useEffect, useState } from 'react';
 
-import { Button } from './components/Button';
-import { MovieCard } from './components/MovieCard';
 
-// import { SideBar } from './components/SideBar';
-// import { Content } from './components/Content';
-
-import { api } from './services/api';
+import { MoviesProvider } from './hooks/useMovies'
+import { SideBar } from './components/SideBar';
+import { Content } from './components/Content';
 
 import './styles/global.scss';
 
-import './styles/sidebar.scss';
-import './styles/content.scss';
-
-interface GenreResponseProps {
-  id: number;
-  name: 'action' | 'comedy' | 'documentary' | 'drama' | 'horror' | 'family';
-  title: string;
-}
-
-interface MovieProps {
-  imdbID: string;
-  Title: string;
-  Poster: string;
-  Ratings: Array<{
-    Source: string;
-    Value: string;
-  }>;
-  Runtime: string;
-}
-
 export function App() {
-  const [selectedGenreId, setSelectedGenreId] = useState(1);
-
-  const [genres, setGenres] = useState<GenreResponseProps[]>([]);
-
-  const [movies, setMovies] = useState<MovieProps[]>([]);
-  const [selectedGenre, setSelectedGenre] = useState<GenreResponseProps>({} as GenreResponseProps);
-
-  useEffect(() => {
-    api.get<GenreResponseProps[]>('genres').then(response => {
-      setGenres(response.data);
-    });
-  }, []);
-
-  useEffect(() => {
-    api.get<MovieProps[]>(`movies/?Genre_id=${selectedGenreId}`).then(response => {
-      setMovies(response.data);
-    });
-
-    api.get<GenreResponseProps>(`genres/${selectedGenreId}`).then(response => {
-      setSelectedGenre(response.data);
-    })
-  }, [selectedGenreId]);
-
-  function handleClickButton(id: number) {
-    setSelectedGenreId(id);
-  }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'row' }}>
-      <nav className="sidebar">
-        <span>Watch<p>Me</p></span>
-
-        <div className="buttons-container">
-          {genres.map(genre => (
-            <Button
-              key={String(genre.id)}
-              title={genre.title}
-              iconName={genre.name}
-              onClick={() => handleClickButton(genre.id)}
-              selected={selectedGenreId === genre.id}
-            />
-          ))}
-        </div>
-
-      </nav>
-
-      <div className="container">
-        <header>
-          <span className="category">Categoria:<span> {selectedGenre.title}</span></span>
-        </header>
-
-        <main>
-          <div className="movies-list">
-            {movies.map(movie => (
-              <MovieCard key ={movie.imdbID} title={movie.Title} poster={movie.Poster} runtime={movie.Runtime} rating={movie.Ratings[0].Value} />
-            ))}
-          </div>
-        </main>
+    <MoviesProvider>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <SideBar />
+        <Content />
       </div>
-    </div>
+    </MoviesProvider>
+
   )
 }

src/components/Content.tsx

@@ -1,3 +1,23 @@
+import { useMovies } from '../hooks/useMovies';
+import { MovieCard } from './MovieCard';
+
 export function Content() {
-  // Complete aqui
+
+  const { selectedGenre, movies } = useMovies();
+
+  return (
+    <div className="container">
+      <header>
+        <span className="category">Categoria:<span> {selectedGenre.title}</span></span>
+      </header>
+
+      <main>
+        <div className="movies-list">
+          {movies.map(movie => (
+            <MovieCard key={movie.imdbID} title={movie.Title} poster={movie.Poster} runtime={movie.Runtime} rating={movie.Ratings[0].Value} />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
 }

src/components/MovieCard.tsx

@@ -1,5 +1,4 @@
 import { Star, Clock } from 'react-feather';
-
 import '../styles/movie-card.scss';
 
 interface MovieCardProps {

src/components/SideBar.tsx

@@ -1,3 +1,28 @@
+import { useMovies } from "../hooks/useMovies";
+import '../styles/sidebar.scss';
+import '../styles/content.scss';
+import { Button } from './Button';
+
 export function SideBar() {
-  // Complete aqui
+
+  const { genres, selectedGenreId, handleClickButton } = useMovies();
+
+  return (
+    <nav className="sidebar">
+      <span>Watch<p>Me</p></span>
+
+      <div className="buttons-container">
+        {genres.map(genre => (
+          <Button
+            key={String(genre.id)}
+            title={genre.title}
+            iconName={genre.name}
+            onClick={() => handleClickButton(genre.id)}
+            selected={selectedGenreId === genre.id}
+          />
+        ))}
+      </div>
+
+    </nav>
+  );
 }

src/hooks/useMovies.tsx

@@ -0,0 +1,75 @@
+import { createContext, useEffect, useState, ReactNode, useContext } from 'react';
+import { api } from '../services/api';
+
+interface GenreResponseProps {
+    id: number;
+    name: 'action' | 'comedy' | 'documentary' | 'drama' | 'horror' | 'family';
+    title: string;
+}
+
+interface MovieProps {
+    imdbID: string;
+    Title: string;
+    Poster: string;
+    Ratings: Array<{
+        Source: string;
+        Value: string;
+    }>;
+    Runtime: string;
+}
+
+interface MoviesProviderProps {
+    children: ReactNode;
+}
+
+interface MoviesContextData {
+    movies: MovieProps[];
+    genres: GenreResponseProps[];
+    selectedGenreId: number;
+    selectedGenre: GenreResponseProps;
+    handleClickButton: (id: number) => void;
+}
+
+
+const MoviesContext = createContext<MoviesContextData>(
+    {} as MoviesContextData
+);
+
+export function MoviesProvider({ children }: MoviesProviderProps) {
+    const [selectedGenreId, setSelectedGenreId] = useState(1);
+    const [genres, setGenres] = useState<GenreResponseProps[]>([]);
+    const [movies, setMovies] = useState<MovieProps[]>([]);
+    const [selectedGenre, setSelectedGenre] = useState<GenreResponseProps>({} as GenreResponseProps);
+
+    useEffect(() => {
+        api.get<GenreResponseProps[]>('genres').then(response => {
+            setGenres(response.data);
+        });
+    }, []);
+
+    useEffect(() => {
+        api.get<MovieProps[]>(`movies/?Genre_id=${selectedGenreId}`).then(response => {
+            setMovies(response.data);
+        });
+
+        api.get<GenreResponseProps>(`genres/${selectedGenreId}`).then(response => {
+            setSelectedGenre(response.data);
+        })
+    }, [selectedGenreId]);
+
+    function handleClickButton(id: number) {
+        setSelectedGenreId(id);
+    }
+
+    return (
+        <MoviesContext.Provider value={{ movies, genres, selectedGenreId, selectedGenre, handleClickButton }}>
+            {children}
+        </MoviesContext.Provider>
+    )
+
+}
+
+export function useMovies() {
+    const context = useContext(MoviesContext);
+    return context;
+}