├── .gitignore
├── index.html
├── package.json
├── src
├── GifExpertApp.jsx
├── components
│ ├── AddCategory.jsx
│ ├── GifGrid.jsx
│ ├── GifItem.jsx
│ └── index.js
├── helpers
│ └── getGifs.js
├── hooks
│ └── useFetchGifs.js
├── main.jsx
└── styles.css
├── vite.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gif-expert-app",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "preview": "vite preview"
9 | },
10 | "dependencies": {
11 | "react": "^18.0.0",
12 | "react-dom": "^18.0.0"
13 | },
14 | "devDependencies": {
15 | "@types/react": "^18.0.0",
16 | "@types/react-dom": "^18.0.0",
17 | "@vitejs/plugin-react": "^1.3.0",
18 | "vite": "^2.9.5"
19 | }
20 | }
--------------------------------------------------------------------------------
/src/GifExpertApp.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { AddCategory, GifGrid } from './components';
3 |
4 | export const GifExpertApp = () => {
5 |
6 | const [ categories, setCategories ] = useState([ 'One Punch' ]);
7 |
8 | const onAddCategory = ( newCategory ) => {
9 | if ( categories.includes(newCategory) ) return;
10 | setCategories([ newCategory, ...categories ]);
11 | }
12 |
13 |
14 | return (
15 | <>
16 |
17 | GifExpertApp
18 |
19 |
20 | onAddCategory(value) }
22 | />
23 |
24 | {
25 | categories.map( ( category ) => (
26 |
29 | ))
30 | }
31 |
32 |
33 |
34 |
35 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/AddCategory.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 |
4 | export const AddCategory = ({ onNewCategory }) => {
5 |
6 | const [ inputValue, setInputValue ] = useState('');
7 |
8 | const onInputChange = ({ target }) => {
9 | setInputValue( target.value );
10 | }
11 |
12 | const onSubmit = ( event ) => {
13 | event.preventDefault();
14 | if( inputValue.trim().length <= 1) return;
15 |
16 | // setCategories( categories => [ inputValue, ...categories ]);
17 | setInputValue('');
18 | onNewCategory( inputValue.trim() );
19 | }
20 |
21 | return (
22 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/GifGrid.jsx:
--------------------------------------------------------------------------------
1 | import { GifItem } from './GifItem';
2 | import { useFetchGifs } from '../hooks/useFetchGifs';
3 |
4 | export const GifGrid = ({ category }) => {
5 |
6 | const { images, isLoading } = useFetchGifs( category );
7 |
8 | return (
9 | <>
10 | { category }
11 | {
12 | isLoading && ( Cargando...
)
13 | }
14 |
15 |
16 |
17 | {
18 | images.map( ( image ) => (
19 |
23 | ))
24 | }
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/GifItem.jsx:
--------------------------------------------------------------------------------
1 |
2 |
3 | export const GifItem = ({ title, url, id }) => {
4 |
5 | return (
6 |
7 |
8 |
{ title }
9 |