diff --git a/src/components/App.tsx b/src/components/App.tsx
index 8ee8903..178b758 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,11 +1,11 @@
-import { FC, useState } from 'react'
+import { useState } from 'react'
import Header from './Header'
import SearchBox from './SearchBox'
import CharactersList from './CharactersList'
import marvel from '../services/marvelApi'
import loadingSpinner from '../assets/images/loading.gif'
-const App: FC = () => {
+function App() {
const [metadata, setMetadata] = useState({})
const [characters, setCharacters] = useState([])
const [loading, setLoading] = useState(false)
@@ -23,7 +23,7 @@ const App: FC = () => {
setMetadata(responseMetadata)
setCharacters(results)
} catch (ex) {
- console.error(ex)
+ console.error(ex) // eslint-disable-line no-console
} finally {
setLoading(false)
}
@@ -38,20 +38,19 @@ const App: FC = () => {
-
+
+ {loading ? (
-
-
-
+ ) : (
submitSearch(lastSearch, page)}
/>
-
+ )}
diff --git a/src/components/CharacterCard/index.tsx b/src/components/CharacterCard/index.tsx
index e3b6af9..e3f53cc 100644
--- a/src/components/CharacterCard/index.tsx
+++ b/src/components/CharacterCard/index.tsx
@@ -1,38 +1,39 @@
-import { FC } from 'react'
import './styles.scss'
interface CharacterCardProps {
- showDetails: (CharacterCard?: any) => any
+ showDetails: (record?: any) => any
character: any
}
-const CharacterCard: FC = ({ character, showDetails }) => (
-
-
-
-
+function CharacterCard({ character, showDetails }: CharacterCardProps) {
+ return (
+
+
+
+
-
-
- {character.name}
-
-
-
+
+
+ {character.name}
+
+
+
+
-
-)
+ )
+}
export default CharacterCard
diff --git a/src/components/CharacterModal/index.tsx b/src/components/CharacterModal/index.tsx
index 0d915b0..00dc551 100644
--- a/src/components/CharacterModal/index.tsx
+++ b/src/components/CharacterModal/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { useEffect } from 'react'
import $ from 'jquery'
import './styles.scss'
@@ -7,7 +7,7 @@ interface CharacterModalProps {
character: any
}
-const CharacterModal: FC
= ({ character, hideDetails }) => {
+function CharacterModal({ character, hideDetails }: CharacterModalProps) {
useEffect(() => {
$('#character-details').modal('show')
$(document.body).css({
@@ -23,7 +23,12 @@ const CharacterModal: FC = ({ character, hideDetails }) =>
}, [hideDetails])
return (
-
+
diff --git a/src/components/CharactersList/index.tsx b/src/components/CharactersList/index.tsx
index da1560b..8b4b2a8 100644
--- a/src/components/CharactersList/index.tsx
+++ b/src/components/CharactersList/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { useState } from 'react'
import CharacterCard from '../CharacterCard'
import CharacterModal from '../CharacterModal'
import Pagination from '../Pagination'
@@ -14,21 +14,27 @@ interface CharactersListProps {
}
}
-const CharactersList: FC
= ({
- goToPage, currentPage, characters, metadata: { total = 1, limit = 1 },
-}) => {
+function CharactersList({
+ goToPage,
+ characters,
+ currentPage,
+ metadata: {
+ total = 1,
+ limit = 1,
+ },
+}: CharactersListProps) {
const [displayDetails, setDisplayDetails] = useState(null)
return (
-
limit}>
+ {total > limit && (
-
+ )}
{characters.map((character: any) => (
@@ -40,7 +46,7 @@ const CharactersList: FC = ({
))}
-
limit}>
+ {total > limit && (
= ({
limit={limit}
displayCounter
/>
-
+ )}
-
+ {!displayDetails || (
-
+ )}
)
}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 8c211cb..2ea8fb5 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,23 +1,24 @@
-import { FC } from 'react'
import logo from '../../assets/images/logo-marvel.png'
import './styles.scss'
-const Header: FC = () => (
-
-
-
+function Header() {
+ return (
+
+
+
-
- {'CHARACTERS'.split('').map((letter, index) =>
{letter}
)}
-
+
+ {'CHARACTERS'.split('').map((letter, index) =>
{letter}
)}
+
-
- Characters of the Marvel Comics Universe
-
+
+ Characters of the Marvel Comics Universe
+
+
-
-)
+ )
+}
export default Header
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index ad4875e..b3426ea 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -1,4 +1,4 @@
-import { FC, useReducer } from 'react'
+import { useReducer } from 'react'
import './styles.scss'
interface PaginationProps {
@@ -9,18 +9,18 @@ interface PaginationProps {
limit: number
}
-const Pagination: FC
= (props) => {
- const last = Math.ceil(props.total / props.limit)
-
+function Pagination({ goToPage, displayCounter, current, total, limit }: PaginationProps) {
const [, forceUpdate] = useReducer((x: number) => x + 1, 0)
- const goToPrevious = () => {
- props.goToPage(props.current - 1)
+ const last = Math.ceil(total / limit)
+
+ function goToPrevious() {
+ goToPage(current - 1)
forceUpdate()
}
- const goToNext = () => {
- props.goToPage(props.current + 1)
+ function goToNext() {
+ goToPage(current + 1)
forceUpdate()
}
@@ -30,18 +30,18 @@ const Pagination: FC = (props) => {
type="button"
className="btn btn-outline-marvel page-nav-btn"
onClick={goToPrevious}
- style={{ visibility: (props.current === 1) ? 'hidden' : 'visible' }}
+ style={{ visibility: (current === 1) ? 'hidden' : 'visible' }}
>Previous
-
- Page {props.current} of {last}
-
+ {!displayCounter || (
+ Page {current} of {last}
+ )}
)
diff --git a/src/components/SearchBox/index.tsx b/src/components/SearchBox/index.tsx
index 95301d2..163917c 100644
--- a/src/components/SearchBox/index.tsx
+++ b/src/components/SearchBox/index.tsx
@@ -1,16 +1,16 @@
-import { FC, FormEvent, useState } from 'react'
+import { FormEvent, useState } from 'react'
import './styles.scss'
interface SearchBoxProps {
submitSearch: (search: string) => any
}
-const SearchBox: FC = (props) => {
+function SearchBox({ submitSearch }: SearchBoxProps) {
const [search, setSearch] = useState('')
- const handleSubmit = (ev: FormEvent) => {
+ function handleSubmit(ev: FormEvent) {
ev.preventDefault()
- props.submitSearch(search)
+ submitSearch(search)
}
return (
diff --git a/src/index.tsx b/src/index.tsx
index 6fd9fd6..9e1e20c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import 'jquery'
@@ -6,8 +6,8 @@ import 'bootstrap'
import './assets/styles/global.scss'
ReactDOM.render(
-
+
- ,
+ ,
document.getElementById('root'),
)