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

Card edit #268

Open
wants to merge 26 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
eb87ab8
mvp is completed
edelveiss May 25, 2020
969b27d
spinner is added
edelveiss May 25, 2020
590cd1c
spinner timeout is added
edelveiss May 25, 2020
eb8ea7f
Link to home page from logo is added
edelveiss May 25, 2020
00bcc01
new photos for couresl are added
edelveiss May 25, 2020
a5d5e05
new photos are added
edelveiss May 25, 2020
a92729a
some photos are deleted
edelveiss May 25, 2020
711c253
search bar is resized
edelveiss May 25, 2020
6feedd5
styling card id added
edelveiss May 25, 2020
47a3931
button for addtional photo id added
edelveiss May 26, 2020
42c2c8c
button for refresh photo id added
edelveiss May 26, 2020
5f54c75
async name is added
edelveiss May 26, 2020
49d2eb5
style of photos is added
edelveiss May 29, 2020
0c70935
toggle navbar is added
edelveiss May 29, 2020
b63d355
toggle navbar is corrected
edelveiss May 29, 2020
56731b2
photos on home page are added
edelveiss May 29, 2020
8a6ff73
resizing photos on home page are added
edelveiss May 29, 2020
a00ae2e
resizing height of photos are added
edelveiss May 29, 2020
6b416a7
search bar is correctedd
edelveiss May 29, 2020
5df9918
styling cat page is added
edelveiss May 29, 2020
41c797e
styling cat card in cat page is added
edelveiss May 29, 2020
7e594fe
picture border was deleted
edelveiss May 29, 2020
7390d07
picture height was corrected to auto
edelveiss May 29, 2020
b1d8d20
carousel styling is added
edelveiss May 29, 2020
6ccb4ca
link is changes
edelveiss Sep 9, 2021
cf37da0
lazy load images
edelveiss Sep 9, 2021
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
style of photos is added
edelveiss committed May 29, 2020

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit 49d2eb508598a2ce744ac284c6b5a370fd677b6d
19 changes: 14 additions & 5 deletions app/src/App.js
Original file line number Diff line number Diff line change
@@ -10,20 +10,22 @@ import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import InputBase from "@material-ui/core/InputBase";
import { createStyles, fade, makeStyles } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";

import SearchIcon from "@material-ui/icons/Search";

//import { catsReducer as reducer } from "./reducers/catsReducer";

import CatForm from "./components/CatForm";
import CatsList from "./components/CatsList";

import Cat from "./components/Cat";

//const store = createStore(reducer, applyMiddleware(thunk));

const App = (props) => {
const [searchTerm, setSearchTerm] = useState("");

const classes = useStyles();

const handleFormChange = (event) => {
setSearchTerm(event.target.value);
};
@@ -39,7 +41,10 @@ const App = (props) => {
aria-label="open drawer"
>
<Link to={"/"}>
<img src="https://img.icons8.com/ultraviolet/40/000000/cat.png" />
<img
src="https://img.icons8.com/ultraviolet/40/000000/cat.png"
alt="cat"
/>
</Link>
</IconButton>

@@ -62,12 +67,16 @@ const App = (props) => {
</Typography>

<Link style={{ color: "white" }} to={"/"}>
<img src="https://img.icons8.com/ultraviolet/40/000000/cat-footprint.png" />
<img
src="https://img.icons8.com/ultraviolet/40/000000/cat-footprint.png"
alt="cat footprint"
/>
</Link>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
onChange={handleFormChange}
style={{ marginLeft: "2rem" }}
@@ -85,7 +94,7 @@ const App = (props) => {

<Switch>
<Route path="/cat/:catID">
<Cat breeds={props.breeds} isFetchingData={props.isFetchingData} />
<Cat />
</Route>
<Route path="/">
<CatForm searchTerm={searchTerm} />
4 changes: 2 additions & 2 deletions app/src/actions/index.js
Original file line number Diff line number Diff line change
@@ -36,15 +36,15 @@ export const getImage = (imageId) => (dispatch) => {
axios
.get(`https://api.thecatapi.com/v1/images/search?breed_ids=${imageId}`)
.then((res) => {
console.log("getImage res", res.data[0].breeds[0].id, res.data[0].url);
//console.log("getImage res", res.data[0].breeds[0].id, res.data[0].url);
const dataArr = [res.data[0].breeds[0].id, res.data[0].url];
dispatch({
type: UPDATE_IMG,
payload: dataArr,
});
})
.catch((err) => {
console.error("error fetching data from getImage api. err: ", err);
// console.error("error fetching data from getImage api. err: ", err);
dispatch({
type: SET_IMG_ERROR,
payload: "error fetching data from getImage api",
28 changes: 4 additions & 24 deletions app/src/components/BreedCard.js
Original file line number Diff line number Diff line change
@@ -2,32 +2,11 @@ import React from "react";
import { connect } from "react-redux";
import { Col } from "reactstrap";
import cat from "../assets/cat.png";
//import { getImage } from "../actions";
//import { Link } from "react-router-dom";
//import Cat from "./Cat";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
} from "reactstrap";
import {
// useParams,
// Route,
Link,
// NavLink,
// Switch,
// useRouteMatch,
} from "react-router-dom";

import { Card, CardBody, CardTitle, CardSubtitle } from "reactstrap";
import { Link } from "react-router-dom";

const BreedCard = (props) => {
// const handleGetImg = (e) => {
// e.preventDefault();
// props.getImage(props.breed.id);
// };
return (
<Col xs="12" md="6" xl="4">
<Card
@@ -52,6 +31,7 @@ const BreedCard = (props) => {
<div style={{ marginTop: "0.8rem" }}>
Read about me...
<img
alt="cat"
src={cat}
style={{ width: "2rem", marginLeft: "1rem" }}
/>{" "}
41 changes: 21 additions & 20 deletions app/src/components/Carousel.js
Original file line number Diff line number Diff line change
@@ -3,79 +3,80 @@ import { UncontrolledCarousel } from "reactstrap";
//import cat3 from "../assets/cat1.png";

const items = [
// {
// src: "https://cdn2.thecatapi.com/images/hYG6uIRWL.jpg",
// // src: "https://loremflickr.com/320/240/cat?random=1",
// //src: "https://cdn2.thecatapi.com/images/dn4GBRons.jpg",
// // altText: "Slide 1",
// // caption: "Slide 1",
// header: "Himalayan",
// //header: "Birman",
// key: "1",
// },
// {
// src: "https://cdn2.thecatapi.com/images/hYG6uIRWL.jpg?",
// //src: "https://cdn2.thecatapi.com/images/hYG6uIRWL.jpg",
// // src: "https://loremflickr.com/320/240/cat?random=1",
// //src: "https://cdn2.thecatapi.com/images/dn4GBRons.jpg",
// // altText: "Slide 1",
// // caption: "Slide 1",
// header: "Himalayan",
// //header: "Birman",
// key: "1",
// },
{
// src: "https://loremflickr.com/320/240/cat?random=2",
src: "https://cdn2.thecatapi.com/images/imz2EwFWv.jpg",
//altText: "Slide 2",
//caption: "Slide 2",
caption: "",
header: "Ocicat",
key: "2",
},
{
src: "https://cdn2.thecatapi.com/images/b4paC3RGM.jpg",
// altText: "Slide 3",
// caption: "Slide 3",
caption: "",
header: "Pixie-bob",
key: "3",
},
{
src: "https://cdn2.thecatapi.com/images/J4Jv10E7O.jpg",
//altText: "Slide 3",
// caption: "Slide 3",
caption: "",
header: "Burmilla",
key: "4",
},
{
src: "https://cdn2.thecatapi.com/images/E4j4aBDx9.jpg",
//altText: "Slide 3",
//caption: "Slide 3",
caption: "",
header: "Chantilly-Tiffany",
key: "5",
},
{
src: "https://cdn2.thecatapi.com/images/mjeF1hs8v.jpg",
//altText: "Slide 3",
//caption: "Slide 3",
caption: "",
header: "Dragon Li",
key: "6",
},
{
src: "https://cdn2.thecatapi.com/images/3-DZDkDGa.jpg",
// altText: "Slide 3",
// caption: "Slide 3",
caption: "",
header: "Chartreux",
key: "7",
},
{
src: "https://cdn2.thecatapi.com/images/ZZmFRKWZZ.jpg",
//altText: "Slide 3",
//caption: "Slide 3",
caption: "",
header: "American Curl",
key: "8",
},
{
src: "https://cdn2.thecatapi.com/images/O0mRNLlqd.jpg",
//altText: "Slide 3",
//caption: "Slide 3",
caption: "",
header: "Malayan",
key: "9",
},
{
src: "https://cdn2.thecatapi.com/images/f6TE5pt6f.jpg",
//altText: "Slide 3",
//caption: "Slide 3",
caption: "",
header: "Oriental",
key: "9",
key: "10",
},
];

40 changes: 18 additions & 22 deletions app/src/components/Cat.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,25 @@
import React, { useEffect } from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";

import { useRouteMatch } from "react-router-dom";
import { connect } from "react-redux";
import { getImage } from "../actions";
import { Spinner } from "reactstrap";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) =>
createStyles({
root: {
"& > *": {
margin: theme.spacing(1),
},
},
})
);
const Cat = (props) => {
const classes = useStyles();
console.log("Cat props", props);
// const { catId } = useParams();

const match = useRouteMatch();

// console.log("catItem", catItem);
const handleGetImg = (e) => {
e.preventDefault();
// props.getImage(props.breed.id);

props.getImage(match.params.catID);
};

useEffect(() => {
props.getImage(match.params.catID);
}, []);
const catItem = props.breeds.find((breed) => breed.id === match.params.catID);
console.log("catItem", catItem);

return (
<div className="cat-container">
{props.isFetchingData ? (
@@ -41,7 +28,7 @@ const Cat = (props) => {
</div>
) : (
<div className="photo">
<img src={catItem.image} style={{ width: "600px" }}></img>
<img alt="cat" src={catItem.image} style={{ width: "600px" }}></img>
</div>
)}
<div className="desc">
@@ -54,14 +41,17 @@ const Cat = (props) => {
<p>Hairless level: {catItem.hairless}</p>
<p>
Wikipedia:{" "}
<a href={catItem.wikipedia_url} target="_blank">
<a
href={catItem.wikipedia_url}
target="_blank"
rel="noopener noreferrer"
>
{catItem.wikipedia_url}
</a>
</p>
<Button
style={{ with: "60%" }}
style={{ with: "60%", marginTop: "2rem" }}
onClick={handleGetImg}
style={{ marginTop: "2rem" }}
variant="contained"
color="primary"
>
@@ -72,5 +62,11 @@ const Cat = (props) => {
);
};
//export default Cat;
const mapStateToProps = (state) => {
return {
breeds: state.breeds,
isFetchingData: state.isFetchingData,
};
};

export default connect(null, { getImage })(Cat);
export default connect(mapStateToProps, { getImage })(Cat);
24 changes: 3 additions & 21 deletions app/src/components/CatForm.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,16 @@
import React, { useEffect } from "react";
import React from "react";
import { connect } from "react-redux";
import CatsList from "./CatsList";
import Carousel from "./Carousel";
import { getData } from "../actions";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

import { Spinner } from "reactstrap";
import cat1 from "../assets/cat1.jpg";

const CatForm = (props) => {
const classes = useStyles();
const handleGetData = (e) => {
e.preventDefault();
props.getData();
};
// useEffect(() => {
// props.getData();
// }, []);

return (
<div style={{ marginTop: "2rem" }}>
@@ -56,6 +50,7 @@ const CatForm = (props) => {
>
{`Get Breeds `}
<img
alt="cat footprint"
style={{ marginLeft: "1rem", fontSize: "3rem" }}
src="https://img.icons8.com/ultraviolet/40/000000/cat-footprint.png"
/>
@@ -76,16 +71,3 @@ const mapStateToProps = (state) => {
};

export default connect(mapStateToProps, { getData })(CatForm);

const useStyles = makeStyles((theme) =>
createStyles({
root: {
"& > *": {
margin: theme.spacing(1),
},
},
})
);

// width: "600px",
// height: "400px",
5 changes: 2 additions & 3 deletions app/src/components/CatsList.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useEffect } from "react";
import React from "react";
import { connect } from "react-redux";
import { Container, Row, Col } from "reactstrap";
import { Container, Row } from "reactstrap";
import { getData } from "../actions";
import BreedCard from "./BreedCard";
//import { Link, useHistory } from "react-router-dom";

const CatsList = (props) => {
return (
Loading