Skip to content

Commit

Permalink
Working out comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@WongSaine
WongSaine committed Nov 4, 2023
1 parent 7cce1fb commit 2238e53
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 78 deletions.
151 changes: 90 additions & 61 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React, {Component} from 'react'
import { Alert, Col, ConfigProvider, Layout, Pagination, Row, Spin, Tabs } from 'antd'
/* 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 MovieService from './services/MovieService.js'
import SearchTab from './components/SearchTab'
import RatedTab from './components/RatedTab'
import FilmList from './components/FilmList'
import FetcherService from './services/FetcherService.js';
import { Context } from './services/Context.js';
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';

const { Content } = Layout;

export default class App extends Component {
constructor(props) {
super(props)
super(props);
this.state = {
movie: new MovieService(),
genres: [],
Expand All @@ -23,68 +25,95 @@ export default class App extends Component {
error: false,
ratedFilms: [],
fetcher: new FetcherService(),
};
}

async componentDidMount() {
const { movie, fetcher } = this.state;

const createSession = async () => {
const x = await movie.createGuestSession();
return x;
};
await createSession();
fetcher.fetch(this.getGenres, (error) => this.setState({ error }));
}

componentDidUpdate(prevProps, prevState) {
const { fetcher } = this.state;
if (prevState.fetcher.state.loading !== fetcher.state.loading) {
this.setState({ isLoading: fetcher.state.loading });
}
if (prevState.fetcher.state.error !== fetcher.state.error) {
this.setState({ error: fetcher.state.error });
}
}

changeRatingHandler = async (filmId, rating) => {
this.setState((oldState) => ({
ratedFilms: [...oldState.ratedFilms.filter((film) => film.id !== filmId), { id: filmId, rating }],
}))
await this.state.movie.addRatingToFilm(filmId, rating).catch((exception) => this.setState({ error: exception.message }))
}
const { movie } = this.state;
this.setState((state) => ({
// eslint-disable-next-line prettier/prettier
ratedFilms: [...state.ratedFilms.filter(
(film) => film.id !== filmId,
), { id: filmId, rating }],
}));
/* eslint-disable prettier/prettier */
await movie.addRatingToFilm(filmId, rating).catch((exception) =>
// eslint-disable-next-line indent, implicit-arrow-linebreak
this.setState({ error: exception.message }));
};
/* eslint-enable prettier/prettier */

getGenres = async () => {
await this.state.movie.getGenreList().then((response) => {
this.setState({ genres: response.genres })
})
}
const { movie } = this.state;
await movie.getGenreList().then((response) => {
this.setState({ genres: response.genres });
});
};

setError = (error) => {
this.setState({ error });
}
};

setFilms = (films) => {
this.setState({films});
}
this.setState({ films });
};

setTotalItems = (totalItems) => {
this.setState({ totalItems });
}
};

setIsLoading = (isLoading) => {
this.setState({ isLoading });
}
};

setCurrentPage = (page) => {
this.setState({
currentPage: page
currentPage: page,
});
}

componentDidMount() {
const createSession = async () => await this.state.movie.createGuestSession()
createSession()
this.state.fetcher.fetch(this.getGenres, (error) => this.setState({ error }))
}

componentDidUpdate(prevProps, prevState) {
if (prevState.fetcher.state.loading !== this.state.fetcher.state.loading) {
this.setState({ isLoading: this.state.fetcher.state.loading })
}
if (prevState.fetcher.state.error !== this.state.fetcher.state.error) {
this.setState({ error: this.state.fetcher.state.error })
}
}
};

changeTabHandler = () => {
this.setState({
films: [],
isLoading: true,
currentPage: 1,
})
}
});
};

render() {
/* eslint-disable prettier/prettier */
const {
currentPage,
ratedFilms,
movie,
genres,
error,
isLoading,
films,
totalItems,
} = this.state;
/* eslint-enable prettier/prettier */
const tabs = [
{
key: 1,
Expand All @@ -93,10 +122,10 @@ export default class App extends Component {
<SearchTab
setFilms={this.setFilms}
setIsLoading={this.setIsLoading}
currentPage={this.state.currentPage}
currentPage={currentPage}
setTotalItems={this.setTotalItems}
setError={this.setError}
ratedFilms={this.state.ratedFilms}
ratedFilms={ratedFilms}
/>
),
},
Expand All @@ -107,16 +136,15 @@ export default class App extends Component {
<RatedTab
setFilms={this.setFilms}
setIsLoading={this.setIsLoading}
currentPage={this.state.currentPage}
currentPage={currentPage}
setTotalItems={this.setTotalItems}
setError={this.setError}
/>
),
},
]
];

return (

<ConfigProvider
theme={{
token: {
Expand All @@ -127,41 +155,42 @@ export default class App extends Component {
>
<Context.Provider
value={{
movie: this.state.movie,
genres: this.state.genres,
movie,
genres,
}}
>
<Layout style={{ backgroundColor: '#fff' }}>
<Content>
<Col xs={{ span: 22, offset: 1 }} md={{ span: 18, offset: 4 }}>
<Col xs={{ span: 22, offset: 1 }} md={{ span: 17, offset: 4 }}>
<Tabs
defaultActiveKey={1}
items={tabs}
style={{ background: '#fff', justifyContent: 'center' }}
destroyInactiveTabPane={true}
destroyInactiveTabPane
onChange={this.changeTabHandler}
/>

<>
{this.state.error && <Alert type={'error'} message={this.state.error} style={{ margin: '10px auto' }} />}
{this.state.isLoading ? (
{error && <Alert type="error" message={error} style={{ margin: '10px auto' }} />}
{isLoading ? (
<Row>
<Spin tip={'Loading...'} style={{ margin: '10px auto' }} />
<Spin tip="Loading..." style={{ margin: '10px auto' }} />
</Row>
) : (
<>
<FilmList
films={this.state.films}
setRatingHandler={(filmId, rating) => this.changeRatingHandler(filmId, rating)}
<FilmList
films={films}
// eslint-disable-next-line max-len
setRatingHandler={(filmId, rating) => this.changeRatingHandler(filmId, rating)}
/>
<Pagination
defaultCurrent={1}
current={this.state.currentPage}
total={this.state.totalItems}
current={currentPage}
total={totalItems}
defaultPageSize={20}
showQuickJumper={false}
showSizeChanger={false}
hideOnSinglePage={true}
hideOnSinglePage
style={{ display: 'flex', justifyContent: 'center', marginBottom: '20px' }}
onChange={(page) => this.setCurrentPage(page)}
itemRender={this.paginationItemRender}
Expand All @@ -174,6 +203,6 @@ export default class App extends Component {
</Layout>
</Context.Provider>
</ConfigProvider>
)
);
}
}
25 changes: 17 additions & 8 deletions src/components/FilmCard/FilmCard.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
.film-card {
display: flex;
border-radius: 0;
height: 300px;
height: 279px;
max-width: 451px;
filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.15));
padding: 0;
}

.film-card__header {
Expand All @@ -11,7 +13,12 @@
align-items: center;
width: 100%;
font-weight: 100 !important;
padding-bottom: 0ch;
margin-bottom: 0;
line-height: 1;
}

.ant-card-body {
padding: 10px !important;
}

.film-card__content {
Expand All @@ -27,18 +34,19 @@
}

.film-card__image {
max-width: 18rem;
height: 100%;
min-width: 10rem;
max-width: 12rem;
height: 17.4375rem;
border-radius: 0 !important;
object-fit: cover;
object-fit: fill;
margin: 0;
padding: 0;
}

.film-card__rating {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -52,6 +60,7 @@

.film-card__stars {
margin: auto 0 0;
font-size: 16px;
}

@media screen and (max-width: 576px) {
Expand All @@ -68,7 +77,7 @@
}

.film-card__content-wrapper {
margin-top: 20px;
margin-top: 10px;
display: flex;
flex-direction: column;
}
Expand Down
24 changes: 15 additions & 9 deletions src/components/SearchTab/SearchTab.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { Component } from 'react'
import { Input } from 'antd'
import { debounce } from 'lodash'
import PropTypes from 'prop-types'
import React, { Component } from 'react';
import { Input } from 'antd';
import { debounce } from 'lodash';
import PropTypes from 'prop-types';

import FetcherService from '../../services/FetcherService.js'
import { Context } from '../../services/Context.js'
import FetcherService from '../../services/FetcherService';
import { Context } from '../../services/Context';

export default class SearchTab extends Component {
constructor(props) {
Expand Down Expand Up @@ -34,17 +34,18 @@ export default class SearchTab extends Component {
}
return film
})
setFilms(films);
setFilms(films);
setTotalItems(response.total_results);
} catch(error) {
this.setState({error: error});
setError(error);
setError(error);
}
this.setState({isLoading: false});
}

componentDidMount() {
this.checkQueryString();
this.debouncedQueryHandler({ target: { value: 'return' } });
}

componentDidUpdate(prevProps, prevState) {
Expand Down Expand Up @@ -74,7 +75,12 @@ export default class SearchTab extends Component {
this.setState({queryString: e.target.value});
}
render() {
return <Input placeholder="Type to search..." onChange={this.debouncedQueryHandler} style={{ marginTop: '20px' }} />
return <Input
placeholder="Type to search..."
defaultValue="return"
onChange={this.debouncedQueryHandler}
style={{ marginTop: '20px' }}
/>
}
}

Expand Down

0 comments on commit 2238e53

Please sign in to comment.