changes made in assignment 4
This commit is contained in:
bhavnisharora
parent
9408ac16b2
commit
9c80e85ff2
|
|
@ -1,10 +1,10 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>Star Wars | Assignment 4</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
26
package-lock.json
generated
26
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) => {
|
|||
<p>
|
||||
<strong> Birth Year </strong> {character.birth_year}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 = () => {
|
|||
<div className="main">
|
||||
<div className="header-container">
|
||||
<div className="header">
|
||||
<img src="/images/logo.png" alt="Logo" />
|
||||
{loading ? (
|
||||
<Skeleton width={120} height={60} />
|
||||
) : (
|
||||
<img src="/images/logo.png" alt="Logo" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="search-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearch}
|
||||
className="search-input"
|
||||
/>
|
||||
{loading ? (
|
||||
<Skeleton width={280} height={52} />
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by name..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearch}
|
||||
className="search-input"
|
||||
/>
|
||||
)}
|
||||
|
||||
{suggestions.length > 0 && (
|
||||
<ul className="suggestions">
|
||||
{suggestions.map((suggestion, index) => (
|
||||
|
|
@ -104,9 +120,11 @@ const Home = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<CharacterCard data={filteredData} />
|
||||
|
||||
{showSkeleton && (
|
||||
<ul className="skeleton-character-container">
|
||||
{[...(data || Array(5))].map((_, index) => (
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<li className="skeleton-character-card skeleton" key={index}>
|
||||
<div className="skeleton-character-details">
|
||||
<div className="skeleton-line skeleton-title"></div>
|
||||
|
|
@ -118,18 +136,9 @@ const Home = () => {
|
|||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<CharacterCard data={filteredData} />
|
||||
)}
|
||||
|
||||
<div className="changePage">
|
||||
<button className="button" disabled={page === 1} onClick={decrement}>
|
||||
Previous
|
||||
</button>
|
||||
<button className="button" onClick={increment}>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
{hasMore && <div ref={ref}></div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue