From 7710282f2d858eefb21a00a60e74ff03a8910100 Mon Sep 17 00:00:00 2001 From: Raphael Martins Date: Wed, 26 Oct 2022 13:46:46 -0300 Subject: [PATCH 1/6] refactor: improve semantic HTML and make the code cleanner Remove some components redundancy and make some lines of code cleanner --- src/App.js | 61 ++++++++++++++++++++----------------- src/components/PetCard.js | 17 ++++++++--- src/components/PetHeader.js | 7 ++--- 3 files changed, 48 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index 682eb61..13af54e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,15 +1,15 @@ +import parse from 'parse-link-header'; import React, { useEffect, useState } from 'react'; -import { usePage } from './hooks/use-page'; -import { Card, Container, Pagination } from 'semantic-ui-react'; +import { HashLoader } from 'react-spinners'; import 'semantic-ui-css/semantic.min.css'; -import parse from 'parse-link-header'; +import { Card, Container, Pagination } from 'semantic-ui-react'; import './App.css'; import { PetCard } from './components/PetCard'; import { PetHeader } from './components/PetHeader'; +import { PETS } from './constants'; +import { usePage } from './hooks/use-page'; import fetchPets from './services/pets'; import { cacheRequest } from './_sessionStorage'; -import { PETS } from './constants'; -import { HashLoader } from "react-spinners"; function App() { const LIMIT = 9; @@ -22,9 +22,13 @@ function App() { useEffect(() => { async function fetchData() { const config = { - params: { _page: page, _limit: LIMIT } + params: { _page: page, _limit: LIMIT }, }; - const result = await cacheRequest(PETS, config.params._page, fetchPets(config)); + const result = await cacheRequest( + PETS, + config.params._page, + fetchPets(config) + ); const parsedLink = parse(result.headers.link); setTotalPages(parsedLink.last._page); setPets(result.data); @@ -39,32 +43,33 @@ function App() { return (
- - { - loading ? + {loading ? ( + : -
-
- - {pets.map(pet => PetCard(pet))} - -
-
- -
-
- } + /> + ) : ( +
+ + + {pets.map((pet) => PetCard(pet))} + + + +
+ )}
); } diff --git a/src/components/PetCard.js b/src/components/PetCard.js index 5ddc86f..a6b4160 100644 --- a/src/components/PetCard.js +++ b/src/components/PetCard.js @@ -3,7 +3,7 @@ import { Card, Icon, Image } from 'semantic-ui-react'; import placeholder from '../assets/img/paw.png'; import './PetCard.css'; -export const PetCard = pet => { +export const PetCard = (pet) => { const extra = ( @@ -14,11 +14,17 @@ export const PetCard = pet => { ); const image = ( - pet.img ? {pet.name} : {pet.name} + {pet.name} ); return ( { ); }; -document.addEventListener('DOMContentLoaded', function(event) { - document.querySelectorAll('img').forEach(function(img) { - img.onerror = function() { +document.addEventListener('DOMContentLoaded', () => { + const images = document.querySelectorAll('img'); + images.forEach((currImg) => { + currImg.onerror = function () { this.src = placeholder; }; }); diff --git a/src/components/PetHeader.js b/src/components/PetHeader.js index 25bb0c3..9f91348 100644 --- a/src/components/PetHeader.js +++ b/src/components/PetHeader.js @@ -2,14 +2,13 @@ import React from 'react'; import { Icon } from 'semantic-ui-react'; export const PetHeader = () => { - return (
- DeveloPets - +

DeveloPets

+

Introduce your animal buddies to your fellow developers - +

From 343190ff16af286c51a74ddd218ef4ba312fec55 Mon Sep 17 00:00:00 2001 From: Raphael Martins Date: Wed, 26 Oct 2022 13:47:12 -0300 Subject: [PATCH 2/6] style: improve responsiveness --- src/App.css | 12 +++++++++++- src/components/PetCard.css | 16 +--------------- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/App.css b/src/App.css index 6d18f1e..0e04eba 100644 --- a/src/App.css +++ b/src/App.css @@ -55,8 +55,12 @@ body { font-size: large; } +.App main { + padding: 20px 0 30px; +} + .App-content { - padding: 20px; + padding: 20px 0; } .App-pagination { @@ -67,3 +71,9 @@ body { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +@media only screen and (max-width: 340px) { + .App-title { + font-size: 2em; + } +} diff --git a/src/components/PetCard.css b/src/components/PetCard.css index 1b9053f..ab1f5f7 100644 --- a/src/components/PetCard.css +++ b/src/components/PetCard.css @@ -1,6 +1,6 @@ .card-image { object-fit: cover; - width: 320px; + width: 100%; height: 320px; } @@ -8,17 +8,3 @@ .ui.cards > .card { width: 320px; } - -@media only screen and (max-width: 767px) { - .card-image { - object-fit: cover; - width: 240px; - height: 240px; - } -} - -@media only screen and (max-width: 767px) { - .ui.stackable.cards > .card { - width: 240px !important; - } -} \ No newline at end of file From fabd174e982ccdfad77f34513e37eaee4a534399 Mon Sep 17 00:00:00 2001 From: Raphael Martins Date: Wed, 26 Oct 2022 13:54:26 -0300 Subject: [PATCH 3/6] Add my cats --- db.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/db.json b/db.json index f6800a1..0e64f7e 100644 --- a/db.json +++ b/db.json @@ -167,6 +167,14 @@ "type": "dog", "description": "Cute little dog.", "img": "https://i.imgur.com/XoOZNFV.jpeg" + }, + { + "id": "90dbeace-b820-4fa9-8903-3ff9e2b4f0f9", + "name": "Lírio & Narciso", + "owner": "raphaelalmeidamartins", + "type": "cat", + "description": "My little fellas. They loves to turn off my computer when I'm working", + "img": "https://ibb.co/FHJhSCD" } ] } From 7be4d987916b82510d3717977a4ed0f65bc5503b Mon Sep 17 00:00:00 2001 From: Raphael Martins Date: Wed, 26 Oct 2022 13:55:51 -0300 Subject: [PATCH 4/6] Add json sintax highlight --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index da3ec2f..cb7e28b 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ You can add your own pets in [`/db.json`](https://github.com/vspedr/developets/b You can use the following format to add your pet -``` +```json { "pets": [ - ... + //... { "id": "", // generate a guid however you like "name": "", @@ -18,7 +18,6 @@ You can use the following format to add your pet "description": "", "img": "" } - ... ] } ``` From 7deda5dd7524e6a6e9f6d19ea150837d301b46a7 Mon Sep 17 00:00:00 2001 From: Raphael Martins <64360469+raphaelalmeidamartins@users.noreply.github.com> Date: Wed, 26 Oct 2022 14:14:13 -0300 Subject: [PATCH 5/6] Grammar checking --- db.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/db.json b/db.json index 0e64f7e..a4ce7b3 100644 --- a/db.json +++ b/db.json @@ -173,7 +173,7 @@ "name": "Lírio & Narciso", "owner": "raphaelalmeidamartins", "type": "cat", - "description": "My little fellas. They loves to turn off my computer when I'm working", + "description": "My little fellas. They love to turn off my computer when I'm working", "img": "https://ibb.co/FHJhSCD" } ] From d615633c13ec86a0abf745de869b413e81a7c4ab Mon Sep 17 00:00:00 2001 From: Raphael Martins <64360469+raphaelalmeidamartins@users.noreply.github.com> Date: Wed, 26 Oct 2022 14:41:10 -0300 Subject: [PATCH 6/6] Replace anonymous function with arrow function --- src/components/PetCard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PetCard.js b/src/components/PetCard.js index a6b4160..2564530 100644 --- a/src/components/PetCard.js +++ b/src/components/PetCard.js @@ -38,7 +38,7 @@ export const PetCard = (pet) => { document.addEventListener('DOMContentLoaded', () => { const images = document.querySelectorAll('img'); images.forEach((currImg) => { - currImg.onerror = function () { + currImg.onerror = () => { this.src = placeholder; }; });