movie-project-v3 #6
Conversation
osamaakb
left a comment
osamaakb
left a comment
There was a problem hiding this comment.
good job guys, I really like your practices compared to the time you practiced react, check out the comments and keep up the good work
| animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; | ||
| } | ||
|
|
||
| @-webkit-keyframes scale-up-center { |
There was a problem hiding this comment.
you could have used any css animation libraries for react like
https://www.npmjs.com/package/react-animated-css
movie-project/src/App.js
Outdated
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
| import Myfooter from "./components/footer"; | ||
| import Main from "./components/main"; | ||
| let TMDB_BASE_URL = "https://api.themoviedb.org/3"; |
movie-project/src/App.js
Outdated
| import Main from "./components/main"; | ||
| let TMDB_BASE_URL = "https://api.themoviedb.org/3"; | ||
|
|
||
| const constructUrl = (path, query) => { |
There was a problem hiding this comment.
I would put this inside API.js file and add all network requests there and related network work there too
| import React, { useState } from "react"; | ||
| import { Card, Button, Badge } from "react-bootstrap"; | ||
| import MovieOverview from './MovieOverview' | ||
| let imageBaseUrl = "https://image.tmdb.org/t/p/w500"; |
| return ( | ||
| <li className='m-5 tilt-in-top-1'> | ||
| <Card | ||
| style={{ width: "18rem", border: 'none' }} |
There was a problem hiding this comment.
try to avoid using inline styles
| handleMovies={props.handleMovies} | ||
| handleGenresList={props.handleGenresList} | ||
| isLoaded={props.isLoaded} | ||
| setIsLoaded={props.setIsLoaded} |
| <SearchBox | ||
| handleMovies={props.handleMovies} | ||
| handleQuery={props.handleQuery} | ||
| constructUrl={props.constructUrl} |
There was a problem hiding this comment.
why are you passing this here?
| handleMovies={props.handleMovies} | ||
| handleQuery={props.handleQuery} | ||
| constructUrl={props.constructUrl} | ||
| query={props.query} |
There was a problem hiding this comment.
since you are passing the handleQuery here you don't need to pass query
| .then(response => response.json()) | ||
| .then(json => { | ||
| props.handleMovies(json.results); | ||
| element.value = ""; |
There was a problem hiding this comment.
I believe you can remove the element and replace this one here with
| element.value = ""; | |
| e.target.value = ""; |
| import React from "react"; | ||
| import { Spinner } from "react-bootstrap"; | ||
|
|
||
| export default function MySpinner(props) { |
There was a problem hiding this comment.
| export default function MySpinner(props) { | |
| export default function MySpinner({ show }) { |
3 participants
The movie project with all requirements of v-3
Team- Members:
https://vazhin.github.io/iraq-bc-movies-project-students/