📦 vcgtz / rick-and-morty-app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60import { useEffect, useState } from 'react';
import { render } from 'react-dom';
import CharacterList from './CharacterList.jsx';
import Header from './Header.jsx';
import NotFoundMessage from './NotFoundMessage.jsx';
import Paginator from './Paginator.jsx';

const App = () => {
  const [characters, setCharacters] = useState([]);
  const [showLoading, setShowLoading] = useState(true);
  const [navigation, setNavigation] = useState({ prev: null, next: null });
  const [showCharacterList, setShowCharacterList] = useState(true);

  useEffect(() => {
    requestCharacters();
  }, []);

  const requestCharacters = async (filters = {}, requestUrl = null) => {
    setShowLoading(true);

    let searchString = '';
    if (Object.keys(filters).length) {
      searchString = `?${new URLSearchParams(filters)}`;
    }

    const url =
      requestUrl || `https://rickandmortyapi.com/api/character${searchString}`;
    
    try {
      const res = await fetch(url);
      const json = await res.json();

      setShowLoading(false);
      setNavigation({ prev: json.info.prev, next: json.info.next });
      setCharacters(json.results);
      setShowCharacterList(true);
    } catch (err) {
      setShowLoading(false);
      setShowCharacterList(false);
    }
  };

  return (
    <div>
      <Header onClick={requestCharacters} showLoading={showLoading} />
      {(
        showCharacterList ?
        <CharacterList characters={characters} /> :
        <NotFoundMessage />
      )}
      <Paginator
        navigation={navigation}
        showCharacterList={showCharacterList}
        onClick={requestCharacters} />
    </div>
  );
};

render(<App />, document.getElementById('root'));