Skip to content

Commit 1223b64

Browse files
geekayushtrinachoudhury1mgayush-mehra
authored
Lazy on cleanup (#5)
* Add lazy loading * Performance merge (#6) * Basic SSR * SSR with basic redux setup * Improve SSR command * Clean up 01-basic-app-setup * Clean up 02-html-font-setup * Clean up 03-css-setup * added procfile and script * fixed port * static files * port check * port fix * Remove console logs * Replace images with CDN images * Add data to store * Remove README * Dog Screen Updated * New Dog View Changes in all modules Co-authored-by: geekayush <[email protected]> Co-authored-by: ayush <[email protected]> * Cleanup yet again * Image Fit Css and prod script added in package.json * Server side renderin Co-authored-by: trinachoudhury1mg <[email protected]> Co-authored-by: ayush <[email protected]> Co-authored-by: Trina Choudhury <[email protected]>
1 parent b4d88be commit 1223b64

File tree

292 files changed

+35669
-16025
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

292 files changed

+35669
-16025
lines changed

‎01-basic-app-setup/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"server:dev": "NODE_ENV=development nodemon ./server/index",
2020
"build": "DISABLE_ESLINT_PLUGIN=true NODE_ENV=production react-scripts build",
2121
"serve": "serve -s build",
22-
"server:prod": "NODE_ENV=production nodemon ./server/index"
22+
"server:prod": "NODE_ENV=production nodemon ./server/index",
23+
"prod": "npm run build && npm run server:prod"
2324
},
2425
"eslintConfig": {
2526
"extends": [

‎01-basic-app-setup/public/images/icon.jpg‎

683 KB
Loading

‎01-basic-app-setup/public/index.html‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
9-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
10-
<title>01-basic-app-setup</title>
11-
<link href="https://fonts.googleapis.com" />
12-
<link href="https://fonts.gstatic.com" crossorigin />
13-
<link
14-
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
15-
rel="stylesheet"
16-
/>
17-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
18-
<script src="https://d3js.org/d3.v7.min.js"></script>
19-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
20-
<script src="/scripts/block.js"></script>
213

22-
</head>
23-
<body>
24-
<noscript>You need to enable JavaScript to run this app.</noscript>
25-
<div id="root"></div>
26-
</body>
27-
</html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
10+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11+
<title>01-basic-app-setup</title>
12+
<link href="https://fonts.googleapis.com" />
13+
<link href="https://fonts.gstatic.com" crossorigin />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
16+
rel="stylesheet" />
17+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
18+
<script src="https://d3js.org/d3.v7.min.js"></script>
19+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
20+
<script src="/scripts/block.js"></script>
21+
22+
</head>
23+
24+
<body>
25+
<noscript>You need to enable JavaScript to run this app.</noscript>
26+
<div id="root"></div>
27+
</body>
28+
29+
</html>

‎01-basic-app-setup/src/components/Card/Card.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import { Link } from "react-router-dom";
22

3-
const Card = ({ url, image, header, description }) => (
3+
const Card = ({ url, image, header, description, imgHeight }) => (
44
<article className="card">
55
<Link to={url}>
66
{image && (
77
<figure className="thumbnail">
8-
<img src={`${image}`} alt="meow" />
8+
<img src={`${image}`} alt="meow" style={
9+
{
10+
height: imgHeight + 'px' || "auto"
11+
}
12+
}/>
913
</figure>
1014
)}
1115
{(header || description) && (
1216
<div className="card-content">
1317
{header && <h2>{header}</h2>}
14-
{description && <p>{description}</p>}
18+
{description && <p className="marginTop-8 bodyRegular">{description}</p>}
1519
</div>
1620
)}
1721
</Link>

‎01-basic-app-setup/src/components/CardCarousel/CardCarousel.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React, { useState, useRef, useCallback } from "react";
2+
import debounce from "lodash/debounce";
3+
import Card from "../Card/Card";
4+
5+
function CardCarousel({ dogs }) {
6+
/* Slider Logic Starts here */
7+
const [activeDot, setActiveDot] = useState(0);
8+
const dogSliderRef = useRef(null);
9+
10+
const handleScroll = () => {
11+
const scrolledItem = parseInt(
12+
(parseInt(dogSliderRef.current.scrollWidth) -
13+
parseInt(dogSliderRef.current.scrollLeft)) /
14+
(parseInt(dogSliderRef.current.clientWidth) - 24)
15+
);
16+
setActiveDot(dogs.length - scrolledItem);
17+
};
18+
19+
const debouncedChangeDots = useCallback(debounce(handleScroll, 10), []);
20+
/* Slider Logic Ends here */
21+
22+
return (
23+
<div className="slider">
24+
<div
25+
className="container-fluid slides x mandatoryScrollSnapping"
26+
ref={dogSliderRef}
27+
onScroll={debouncedChangeDots}
28+
>
29+
{dogs?.map((dog, index) => {
30+
return (
31+
<React.Fragment key={index}>
32+
{index === 0 && <div className="spacer" />}
33+
<div className="col-6 marginBoth-8 slide">
34+
<Card
35+
key={dog.id}
36+
url={`/${dog.name?.toLowerCase()}`}
37+
header={dog.name}
38+
image={dog.image}
39+
imgHeight={200}
40+
description={`${dog.name} is a friendly ${dog.size?.toLowerCase() || 'small'} sized ${dog.gender?.toLowerCase() || 'female'} ${dog.age?.toLowerCase() || 'young'} dog.`}
41+
dog={dog.dog}
42+
/>
43+
</div>
44+
{index === dogs.length - 1 && <div className="spacer" />}
45+
</React.Fragment>
46+
);
47+
})}
48+
</div>
49+
{dogs?.length > 1 && (
50+
<div className="col-6 dotsContainer">
51+
<div className="flex dotsScrollableContainer">
52+
{dogs?.map((el, index) => {
53+
return (
54+
<span
55+
key={index}
56+
className={`dot ${index === activeDot ? "activeDot" : ""}`}
57+
/>
58+
);
59+
})}
60+
</div>
61+
</div>
62+
)}
63+
</div>
64+
);
65+
}
66+
67+
export default CardCarousel;

‎01-basic-app-setup/src/components/Carousel/Carousel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function Carousel({ images }) {
2121
return (
2222
<div className="slider">
2323
<div
24-
className="container-fluid paddingBoth-8 slides x mandatoryScrollSnapping"
24+
className="container-fluid slides x mandatoryScrollSnapping"
2525
ref={imageSliderRef}
2626
onScroll={debouncedChangeDots}
2727
>

‎01-basic-app-setup/src/components/ContentPageTitle/ContentPageTitle.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.anchor {
2+
text-decoration: underline;
3+
}
4+
5+
.marginLeft8 {
6+
margin-left: 8px;
7+
}
8+
9+
10+
/* Avatar classes */
11+
.avatar {
12+
border-radius: 50%;
13+
}
14+
15+
.imageBoxMedium {
16+
width: 45px;
17+
height: 45px;
18+
}

‎01-basic-app-setup/src/components/ContentPageTitle/ContentPageTitle.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react";
2+
import { Link } from "react-router-dom";
3+
import "./ContentPageTitle.css";
4+
5+
/**
6+
* Content Page Title Widget is used to display the Title of the Page
7+
* along with some information about the page
8+
*/
9+
const ContentPageTitle = React.memo(function ContentPageTitle({ dog = {} }) {
10+
return (
11+
<div className="container-fluid widget-container">
12+
<div className="col-6 marginTop-8">
13+
<div className="flex alignCenter justifyBetween">
14+
<h1 className="l1SemiBold">{dog.name}</h1>
15+
</div>
16+
<div className="marginTop-16 flex alignCenter">
17+
<img
18+
className="avatar imageBoxMedium"
19+
src="/images/icon.jpg"
20+
alt={dog.name || "Avatar"}
21+
/>
22+
<div className="flexColumn marginLeft8">
23+
<span className="smallRegular textSecondary">
24+
It is of{" "}
25+
<Link
26+
to={`/dogs/${dog.breed}`}
27+
className="smallMedium noAnchorColor anchor"
28+
>
29+
{dog.breed} breed
30+
</Link>
31+
</span>
32+
</div>
33+
</div>
34+
<div className="marginTop-8 smallRegular textSecondary">
35+
Located at {dog.city}, {dog.state}
36+
</div>
37+
<div className="marginTop-4 smallRegular textSecondary">
38+
Last Updated on {new Date().toDateString()}
39+
</div>
40+
<div className="button marginTop-8">Adopt {dog.name}</div>
41+
</div>
42+
</div>
43+
);
44+
});
45+
46+
export default ContentPageTitle;

‎01-basic-app-setup/src/pages/Dog.js‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import { useParams } from "react-router-dom";
33

44
import Loader from "../components/Loader/Loader";
55
import Carousel from "../components/Carousel/Carousel";
6+
import CardCarousel from "../components/CardCarousel/CardCarousel";
7+
import ContentPageTitle from "../components/ContentPageTitle/ContentPageTitle";
68

7-
import { getDog } from "../api";
9+
import { getDog, getDogs } from "../api";
810

911
const Product = () => {
1012
const { name } = useParams();
@@ -19,6 +21,8 @@ const Product = () => {
1921
description: "",
2022
});
2123

24+
const [relatedDogs, setDogs] = useState([]);
25+
2226
useEffect(() => {
2327
getDog(name.toLowerCase()).then((data) => {
2428
setDog({
@@ -30,26 +34,32 @@ const Product = () => {
3034
state: data.state,
3135
description: data.description,
3236
});
33-
setLoading(false);
37+
if (data.breed) {
38+
getDogs(data?.breed?.toLowerCase()).then((resp) => {
39+
setDogs(resp);
40+
setLoading(false);
41+
});
42+
} else {
43+
setLoading(false);
44+
}
3445
});
3546
}, []);
3647

3748
return (
38-
<div className="centered">
49+
<>
3950
{loading ? (
4051
<Loader />
4152
) : (
4253
<div className="details">
4354
<Carousel images={dog.images} />
4455
<div>
45-
<h1>{dog.name}</h1>
46-
<h2>{`${dog.animal} — ${dog.breed} — ${dog.city}, ${dog.state}`}</h2>
47-
<button>Adopt {dog.name}</button>
48-
<p>{dog.description}</p>
56+
<ContentPageTitle dog={dog} />
57+
<p className="container-fluid col-6">{dog.description}</p>
4958
</div>
59+
{relatedDogs && <CardCarousel dogs={relatedDogs} />}
5060
</div>
5161
)}
52-
</div>
62+
</>
5363
);
5464
};
5565

‎01-basic-app-setup/src/pages/Dogs.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ const Category = () => {
3030
key={dog.id}
3131
url={`/${dog.name?.toLowerCase()}`}
3232
header={dog.name}
33-
description={dog.description || "No dog description present!"}
3433
image={dog.image}
3534
/>
3635
))}

0 commit comments

Comments
 (0)