Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to vite #12

Open
wants to merge 34 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
e4f6ef6
First step done
JoeOsG Jan 30, 2021
1043a28
routes: about, episodes, home
JoeOsG Feb 12, 2021
4147138
initial commit
narvmtz Feb 18, 2021
8342e03
Adding data from API
narvmtz Feb 18, 2021
2da3d48
Merge pull request #3 from narvmtz/fetchData
narvmtz Feb 18, 2021
678085d
Adding routes
narvmtz Feb 23, 2021
ec84e92
Fixing HTML render in the show/episodes summaries
narvmtz Feb 23, 2021
37bcc3e
Merge pull request #4 from narvmtz/fetchData
narvmtz Feb 23, 2021
1c3f344
Fixing order in episode list page
narvmtz Mar 16, 2021
1cddf4c
Various calls to api to have season on its own
JoeOsG Mar 21, 2021
0cbdd31
Merge branch 'seasonsComponent' into develop
JoeOsG Mar 21, 2021
6baa729
Delete .eslintcache
narvmtz Mar 22, 2021
21269b9
ignore eslintchace
JoeOsG Mar 22, 2021
66a55aa
Updated homepage styles
narvmtz Jun 1, 2021
fa0e92e
Updated list styles
narvmtz Jun 1, 2021
f1e8c00
Adding styles
narvmtz Jun 11, 2021
38d9dc7
Adding styles to main page
narvmtz Jun 20, 2021
fc8632c
Adding descriptive classes
narvmtz Jun 20, 2021
62f9387
Added button to show/hide episodes
narvmtz Jun 20, 2021
5c3e66f
Added styles to episodes' page
narvmtz Jun 20, 2021
6266886
Added styles to each episode page
narvmtz Jun 20, 2021
73c7dd6
Added styles to full episode list page
narvmtz Jun 21, 2021
09717a4
Adding season portraits & styles to list page
narvmtz Jun 22, 2021
31fe787
Merged short list component to dataShow
narvmtz Jun 22, 2021
dced03f
Replaced useFetch hook with react-query
narvmtz Jun 22, 2021
b8f3c79
minor changes in folder's order
narvmtz Jun 22, 2021
2e6990d
test
narvmtz Jun 22, 2021
1713dda
changed http to https
narvmtz Jun 22, 2021
6a16d33
Merge pull request #7 from JoeOsG/develop
JoeOsG Jul 29, 2022
32ba0a0
Merge branch 'fetchData' of https://github.com/narvmtz/mystery-west i…
JoeOsuna Dec 19, 2022
586a9c1
Merge branch 'narvmtz-fetchData' into develop
JoeOsuna Dec 19, 2022
228c63e
Merge branch 'develop' into narvmtz-fetchData
JoeOsuna Dec 20, 2022
ca46c29
Merge branch 'develop' into narvmtz-fetchData
JoeOsuna Dec 23, 2022
f1d5451
Migrated done
JoeOsuna Jan 17, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added button to show/hide episodes
* Ordered episodes' view per season
  • Loading branch information
narvmtz committed Jun 20, 2021
commit 62f93875e95cbe4e314c8921bae6172e6811b822
60 changes: 44 additions & 16 deletions tvshow/src/components/list.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from "react";
import { Link } from "react-router-dom";
import { useFetch } from "./useFetch";
import "../styles/list.css";
import { React, useState } from 'react';
import { Link } from 'react-router-dom';
import { useFetch } from './useFetch';
import '../styles/list.css';

const List = () => {
const URL = "http://api.tvmaze.com/shows/530/episodes";
const URL = 'http://api.tvmaze.com/shows/530';

const { data, hasError } = useFetch(URL);
const { data, hasError } = useFetch(`${URL}/episodes`);

let render = [];

/**
* [
* empty, season 0 does not exist
Expand All @@ -18,10 +17,9 @@ const List = () => {
* ...
* ]
*/

if (data) {
data.forEach((episodeList) => {
if (typeof render[episodeList.season] === "undefined") {
if (typeof render[episodeList.season] === 'undefined') {
render[episodeList.season] = [];
}
render[episodeList.season].push({
Expand All @@ -32,6 +30,14 @@ const List = () => {
});
}

const [isClickedIndex, setIsClickedIndex] = useState({});
const handleClick = (index) => () => {
setIsClickedIndex((state) => ({
...state, // <-- copy previous state
[index]: !state[index], // <-- update value by index key
}));
};

return (
<div className="allSeasons">
{hasError ? (
Expand All @@ -40,13 +46,35 @@ const List = () => {
render?.map((season, index) => (
<section key={index} className="season">
<h3>Season {index}</h3>
{season?.map((episode) => (
<li key={episode.id}>
<Link to={`/episodes/${episode.id}`}>
Ep{episode.episodeN} - {episode.name}
</Link>
</li>
))}
<button
className={`button-${index}`}
onClick={handleClick(index)}
key={`${index}_action`}
>
{season?.length} Episodes
</button>
<ul
className={
isClickedIndex[index] ? `episodeList` : `episodeListHidden`
}
>
<div className="summaryList">
<li className="episodeNum">Episode</li>
<li className="episodeName title">Name</li>
</div>

{season?.map((episode) => (
<div
key={`${episode.id}_number`}
className="summaryList sumListMargin"
>
<li className="episodeNum number">{episode.episodeN}</li>
<Link className="episodeName" to={`/episodes/${episode.id}`}>
{episode.name}
</Link>
</div>
))}
</ul>
</section>
))
)}
Expand Down