From 9c80e85ff223cea872bef6e35bb0655e7f4342d6 Mon Sep 17 00:00:00 2001 From: bhavnisharora Date: Thu, 2 Jan 2025 00:21:20 +0530 Subject: [PATCH] changes made in assignment 4 --- index.html | 4 +- package-lock.json | 26 +++++++++ package.json | 2 + src/App.css | 6 ++ src/components/CharacterCard.jsx | 3 +- src/pages/Home.jsx | 99 +++++++++++++++++--------------- 6 files changed, 91 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 0c589ec..54b0f3f 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + - Vite + React + Star Wars | Assignment 4
diff --git a/package-lock.json b/package-lock.json index e41ffb6..1c363a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-intersection-observer": "^9.14.1", + "react-loading-skeleton": "^3.5.0", "react-router": "^6.28.1", "react-router-dom": "^6.28.1" }, @@ -4443,6 +4445,21 @@ "react": "^18.3.1" } }, + "node_modules/react-intersection-observer": { + "version": "9.14.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.14.1.tgz", + "integrity": "sha512-k1xIUn3sCQi3ugNeF64FJb3zwve5mcetvAUR9JazXeOmtap4IP2evN8rs+yf6SQ7F1QydsOGiqTmt+lySKZ9uA==", + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -4450,6 +4467,15 @@ "dev": true, "license": "MIT" }, + "node_modules/react-loading-skeleton": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz", + "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "6.28.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz", diff --git a/package.json b/package.json index 56ac6e3..b0ae439 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "axios": "^1.7.9", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-intersection-observer": "^9.14.1", + "react-loading-skeleton": "^3.5.0", "react-router": "^6.28.1", "react-router-dom": "^6.28.1" }, diff --git a/src/App.css b/src/App.css index b2256f7..e65c32d 100644 --- a/src/App.css +++ b/src/App.css @@ -60,6 +60,11 @@ body { padding-right: 5px; } +.changePage { + display: flex; + justify-content: center; +} + .button { background-color: #ffcc00; color: #000; @@ -163,6 +168,7 @@ body { padding: 20px; width: 250px; height: 225px; + margin: 20px 0px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } diff --git a/src/components/CharacterCard.jsx b/src/components/CharacterCard.jsx index 5d9de96..78bd2e4 100644 --- a/src/components/CharacterCard.jsx +++ b/src/components/CharacterCard.jsx @@ -1,4 +1,3 @@ -import React, { useEffect, useState } from "react"; import "../App.css"; import { Link } from "react-router-dom"; @@ -26,7 +25,7 @@ const CharacterCard = (props) => {

Birth Year {character.birth_year}

- + ); diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 5daeb40..4ef0320 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,5 +1,8 @@ import React, { useEffect, useState } from "react"; import axios from "axios"; +import { useInView } from "react-intersection-observer"; +import Skeleton from "react-loading-skeleton"; +import "react-loading-skeleton/dist/skeleton.css"; import CharacterCard from "../components/CharacterCard"; const Home = () => { @@ -8,35 +11,42 @@ const Home = () => { const [filteredData, setFilteredData] = useState([]); const [searchQuery, setSearchQuery] = useState(""); const [loading, setLoading] = useState(true); + const [showSkeleton, setShowSkeleton] = useState(false); const [suggestions, setSuggestions] = useState([]); + const [hasMore, setHasMore] = useState(true); - const increment = () => { - setPage(page + 1); - }; - - const decrement = () => { - setPage(page - 1); - }; + const { ref, inView } = useInView({ + threshold: 0.1, + }); useEffect(() => { - axios.get(`https://swapi.py4e.com/api/people/?page=${page}`).then((res) => { - setData(res.data.results); - setFilteredData(res.data.results); - }); + if (!hasMore) return; + + setShowSkeleton(true); + setLoading(true); + + setTimeout(() => { + axios + .get(`https://swapi.py4e.com/api/people/?page=${page}`) + .then((res) => { + const results = res.data.results; + if (results.length > 0) { + setData((prevData) => [...prevData, ...results]); + setFilteredData((prevData) => [...prevData, ...results]); + } else { + setHasMore(false); + } + setLoading(false); + setShowSkeleton(false); + }); + }, 2000); }, [page]); - - useEffect(() => { - const timer = setTimeout(() => { - setLoading(false); - }, 1500); - - return () => clearTimeout(timer); - }, []); - - - + if (inView && hasMore && !loading) { + setPage((prevPage) => prevPage + 1); + } + }, [inView, hasMore, loading]); const handleSearch = (e) => { const query = e.target.value.toLowerCase(); @@ -48,13 +58,11 @@ const Home = () => { return; } - // FILTERING DATA TO LOWERCASE const filtered = data.filter((character) => character.name.toLowerCase().includes(query) ); setFilteredData(filtered); - // AUTOCOMPLETE SUGGESTION const autoSuggestions = data .map((character) => character.name) .filter((name) => name.toLowerCase().includes(query)) @@ -62,7 +70,6 @@ const Home = () => { setSuggestions(autoSuggestions); }; - // HANDLING SUGGESTION ONCLICK EVENT const handleSuggestionClick = (suggestion) => { setSearchQuery(suggestion); setFilteredData( @@ -77,17 +84,26 @@ const Home = () => {
- Logo + {loading ? ( + + ) : ( + Logo + )}
- + {loading ? ( + + ) : ( + + )} + {suggestions.length > 0 && (
    {suggestions.map((suggestion, index) => ( @@ -104,9 +120,11 @@ const Home = () => {
- {loading ? ( + + + {showSkeleton && (
    - {[...(data || Array(5))].map((_, index) => ( + {Array.from({ length: 5 }).map((_, index) => (
  • @@ -118,18 +136,9 @@ const Home = () => {
    • ))}
- ) : ( - )} -
- - -
+ {hasMore &&
}
); };