Skip to content

Commit

Permalink
kuan refactor 0702
Browse files Browse the repository at this point in the history
  • Loading branch information
@kusakawazeusu
kusakawazeusu committed Jul 2, 2020
1 parent 70dd7fa commit 355c806
Showing 1 changed file with 124 additions and 111 deletions.
235 changes: 124 additions & 111 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,94 @@
(function () {
const BASE_URL = 'https://movie-list.alphacamp.io'
const INDEX_URL = BASE_URL + '/api/v1/movies/'
const POSTER_URL = BASE_URL + '/posters/'
const data = []

const dataPanel = document.getElementById('data-panel')
const searchForm = document.getElementById('search')
const searchInput = document.getElementById('search-input')

const pagination = document.getElementById('pagination')
const ITEM_PER_PAGE = 12
let paginationData = []

axios.get(INDEX_URL).then((response) => {
data.push(...response.data.results)
getTotalPages(data)
// displayDataList(data)
getPageData(1, data)
}).catch((err) => console.log(err))

// listen to data panel
dataPanel.addEventListener('click', (event) => {
if (event.target.matches('.btn-show-movie')) {
showMovie(event.target.dataset.id)
} else if (event.target.matches('.btn-add-favorite')) {
console.log(event.target.dataset.id)
addFavoriteItem(event.target.dataset.id)
}
})

// listen to search form submit event
searchForm.addEventListener('submit', event => {
event.preventDefault()
let input = searchInput.value.toLowerCase()
let results = data.filter(
movie => movie.title.toLowerCase().includes(input)
)
console.log(results)
// displayDataList(results)
getTotalPages(results)
getPageData(1, results)
})

// listen to pagination click event
pagination.addEventListener('click', event => {
console.log(event.target.dataset.page)
if (event.target.tagName === 'A') {
getPageData(event.target.dataset.page)
}
})

function getTotalPages (data) {
let totalPages = Math.ceil(data.length / ITEM_PER_PAGE) || 1
let pageItemContent = ''
for (let i = 0; i < totalPages; i++) {
pageItemContent += `
const BASE_URL = "https://movie-list.alphacamp.io";
const INDEX_URL = BASE_URL + "/api/v1/movies/";
const POSTER_URL = BASE_URL + "/posters/";
const movies = [];

const dataPanel = document.getElementById("data-panel");
const searchForm = document.getElementById("search");
const searchInput = document.getElementById("search-input");
const pagination = document.getElementById("pagination");
const ITEM_PER_PAGE = 8;
let filteredMovies = [];

// API Services
async function fetchMovies() {
try {
const { data } = await axios.get(INDEX_URL);
return data.results;
} catch (error) {
console.error("Calling Index API Error: ", error);
}
}

async function fetchMovieById(id) {
try {
const { data } = await axios.get(INDEX_URL + id);
return data.results;
} catch (error) {
console.error("Calling Show API Error: ", error);
}
}

// listen to data panel
dataPanel.addEventListener("click", function onPanelClicked(event) {
if (event.target.matches(".btn-show-movie")) {
showMovieModal(event.target.dataset.id);
} else if (event.target.matches(".btn-add-favorite")) {
console.log("Add favorite movie id: ", event.target.dataset.id);
addFavoriteItem(event.target.dataset.id);
}
});

// listen to search form submit event
searchForm.addEventListener("submit", function onSearchSubmitted(event) {
event.preventDefault();
let input = searchInput.value.toLowerCase();
filteredMovies = movies.filter((movie) =>
movie.title.toLowerCase().includes(input)
);
console.log(
"Search button clicked, keyword: ",
input,
"result: ",
filteredMovies
);
renderPaginator(filteredMovies.length);
renderMovieList(getMoviesByPage(1));
});

// listen to pagination click event
pagination.addEventListener("click", function onPaginatorClicked(event) {
if (event.target.tagName !== "A") return;

console.log("Paginator clicked, page number: ", event.target.dataset.page);
renderMovieList(getMoviesByPage(event.target.dataset.page));
});

function getMoviesByPage(pageNum) {
const data = filteredMovies.length ? filteredMovies : movies;
let offset = (pageNum - 1) * ITEM_PER_PAGE;
return data.slice(offset, offset + ITEM_PER_PAGE);
}

function renderPaginator(amount) {
let totalPages = Math.ceil(amount / ITEM_PER_PAGE) || 1;
let pageItemContent = "";
for (let i = 0; i < totalPages; i++) {
pageItemContent += `
<li class="page-item">
<a class="page-link" href="javascript:;" data-page="${i + 1}">${i + 1}</a>
<a class="page-link" href="javascript:;" data-page="${i + 1}">${
i + 1
}</a>
</li>
`
}
pagination.innerHTML = pageItemContent
`;
}
pagination.innerHTML = pageItemContent;
}

function getPageData (pageNum, data) {
paginationData = data || paginationData
let offset = (pageNum - 1) * ITEM_PER_PAGE
let pageData = paginationData.slice(offset, offset + ITEM_PER_PAGE)
displayDataList(pageData)
}

function displayDataList (data) {
let htmlContent = ''
data.forEach(function (item, index) {
htmlContent += `
function renderMovieList(data) {
let htmlContent = "";
data.forEach(function (item) {
htmlContent += `
<div class="col-sm-3">
<div class="card mb-2">
<img class="card-img-top " src="${POSTER_URL}${item.image}" alt="Card image cap">
Expand All @@ -89,45 +104,43 @@
</div>
</div>
</div>
`
})
dataPanel.innerHTML = htmlContent
`;
});
dataPanel.innerHTML = htmlContent;
}

function showMovieModal(id) {
// get elements
const modalTitle = document.getElementById("show-movie-title");
const modalImage = document.getElementById("show-movie-image");
const modalDate = document.getElementById("show-movie-date");
const modalDescription = document.getElementById("show-movie-description");

// send request to show api
fetchMovieById(id).then((data) => {
// insert data into modal ui
modalTitle.textContent = data.title;
modalImage.innerHTML = `<img src="${POSTER_URL}${data.image}" class="img-fluid" alt="Responsive image">`;
modalDate.textContent = `release at : ${data.release_date}`;
modalDescription.textContent = `${data.description}`;
});
}

function addFavoriteItem(id) {
const list = JSON.parse(localStorage.getItem("favoriteMovies")) || [];
const movie = movies.find((item) => item.id === Number(id));

if (list.some((item) => item.id === Number(id))) {
return alert(`${movie.title} is already in your favorite list.`);
}

function showMovie (id) {
// get elements
const modalTitle = document.getElementById('show-movie-title')
const modalImage = document.getElementById('show-movie-image')
const modalDate = document.getElementById('show-movie-date')
const modalDescription = document.getElementById('show-movie-description')

// set request url
const url = INDEX_URL + id
console.log(url)

// send request to show api
axios.get(url).then(response => {
const data = response.data.results
console.log(data)

// insert data into modal ui
modalTitle.textContent = data.title
modalImage.innerHTML = `<img src="${POSTER_URL}${data.image}" class="img-fluid" alt="Responsive image">`
modalDate.textContent = `release at : ${data.release_date}`
modalDescription.textContent = `${data.description}`
})
}
list.push(movie);
alert(`Added ${movie.title} to your favorite list!`);
localStorage.setItem("favoriteMovies", JSON.stringify(list));
}

function addFavoriteItem (id) {
const list = JSON.parse(localStorage.getItem('favoriteMovies')) || []
const movie = data.find(item => item.id === Number(id))

if (list.some(item => item.id === Number(id))) {
alert(`${movie.title} is already in your favorite list.`)
} else {
list.push(movie)
alert(`Added ${movie.title} to your favorite list!`)
}
localStorage.setItem('favoriteMovies', JSON.stringify(list))
}
})()
fetchMovies().then((data) => {
movies.push(...data);
renderPaginator(movies.length);
renderMovieList(getMoviesByPage(1));
});

0 comments on commit 355c806

Please sign in to comment.