bhavnish.arora/assignment-4
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

changes made in assignment 4

Browse source
This commit is contained in:
bhavnisharora 2025-01-02 00:21:20 +05:30
parent 9408ac16b2
commit 9c80e85ff2
6 changed files with 91 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -1,10 +1,10 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>Star Wars | Assignment 4</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

26
package-lock.json generated
View file

@ -11,6 +11,8 @@
"axios": "^1.7.9", "axios": "^1.7.9",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^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": "^6.28.1",
"react-router-dom": "^6.28.1" "react-router-dom": "^6.28.1"
}, },
@ -4443,6 +4445,21 @@
"react": "^18.3.1" "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": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -4450,6 +4467,15 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/react-router": {
"version": "6.28.1", "version": "6.28.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.1.tgz",

2
package.json
View file

@ -13,6 +13,8 @@
"axios": "^1.7.9", "axios": "^1.7.9",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^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": "^6.28.1",
"react-router-dom": "^6.28.1" "react-router-dom": "^6.28.1"
}, },

6
src/App.css
View file

@ -60,6 +60,11 @@ body {
padding-right: 5px; padding-right: 5px;
} }
.changePage {
display: flex;
justify-content: center;
}
.button { .button {
background-color: #ffcc00; background-color: #ffcc00;
color: #000; color: #000;
@ -163,6 +168,7 @@ body {
padding: 20px; padding: 20px;
width: 250px; width: 250px;
height: 225px; height: 225px;
margin: 20px 0px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }

1
src/components/CharacterCard.jsx
View file

@ -1,4 +1,3 @@
import React, { useEffect, useState } from "react";
import "../App.css"; import "../App.css";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";

81
src/pages/Home.jsx
View file

@ -1,5 +1,8 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import axios from "axios"; 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"; import CharacterCard from "../components/CharacterCard";
const Home = () => { const Home = () => {
@ -8,35 +11,42 @@ const Home = () => {
const [filteredData, setFilteredData] = useState([]); const [filteredData, setFilteredData] = useState([]);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [showSkeleton, setShowSkeleton] = useState(false);
const [suggestions, setSuggestions] = useState([]); const [suggestions, setSuggestions] = useState([]);
const [hasMore, setHasMore] = useState(true);
const increment = () => { const { ref, inView } = useInView({
setPage(page + 1); threshold: 0.1,
}; });
const decrement = () => {
setPage(page - 1);
};
useEffect(() => { useEffect(() => {
axios.get(`https://swapi.py4e.com/api/people/?page=${page}`).then((res) => { if (!hasMore) return;
setData(res.data.results);
setFilteredData(res.data.results); 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]); }, [page]);
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { if (inView && hasMore && !loading) {
setLoading(false); setPage((prevPage) => prevPage + 1);
}, 1500); }
}, [inView, hasMore, loading]);
return () => clearTimeout(timer);
}, []);
const handleSearch = (e) => { const handleSearch = (e) => {
const query = e.target.value.toLowerCase(); const query = e.target.value.toLowerCase();
@ -48,13 +58,11 @@ const Home = () => {
return; return;
} }
// FILTERING DATA TO LOWERCASE
const filtered = data.filter((character) => const filtered = data.filter((character) =>
character.name.toLowerCase().includes(query) character.name.toLowerCase().includes(query)
); );
setFilteredData(filtered); setFilteredData(filtered);
// AUTOCOMPLETE SUGGESTION
const autoSuggestions = data const autoSuggestions = data
.map((character) => character.name) .map((character) => character.name)
.filter((name) => name.toLowerCase().includes(query)) .filter((name) => name.toLowerCase().includes(query))
@ -62,7 +70,6 @@ const Home = () => {
setSuggestions(autoSuggestions); setSuggestions(autoSuggestions);
}; };
// HANDLING SUGGESTION ONCLICK EVENT
const handleSuggestionClick = (suggestion) => { const handleSuggestionClick = (suggestion) => {
setSearchQuery(suggestion); setSearchQuery(suggestion);
setFilteredData( setFilteredData(
@ -77,10 +84,17 @@ const Home = () => {
<div className="main"> <div className="main">
<div className="header-container"> <div className="header-container">
<div className="header"> <div className="header">
{loading ? (
<Skeleton width={120} height={60} />
) : (
<img src="/images/logo.png" alt="Logo" /> <img src="/images/logo.png" alt="Logo" />
)}
</div> </div>
<div className="search-container"> <div className="search-container">
{loading ? (
<Skeleton width={280} height={52} />
) : (
<input <input
type="text" type="text"
placeholder="Search by name..." placeholder="Search by name..."
@ -88,6 +102,8 @@ const Home = () => {
onChange={handleSearch} onChange={handleSearch}
className="search-input" className="search-input"
/> />
)}
{suggestions.length > 0 && ( {suggestions.length > 0 && (
<ul className="suggestions"> <ul className="suggestions">
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
@ -104,9 +120,11 @@ const Home = () => {
</div> </div>
</div> </div>
{loading ? ( <CharacterCard data={filteredData} />
{showSkeleton && (
<ul className="skeleton-character-container"> <ul className="skeleton-character-container">
{[...(data || Array(5))].map((_, index) => ( {Array.from({ length: 5 }).map((_, index) => (
<li className="skeleton-character-card skeleton" key={index}> <li className="skeleton-character-card skeleton" key={index}>
<div className="skeleton-character-details"> <div className="skeleton-character-details">
<div className="skeleton-line skeleton-title"></div> <div className="skeleton-line skeleton-title"></div>
@ -118,18 +136,9 @@ const Home = () => {
</li> </li>
))} ))}
</ul> </ul>
) : (
<CharacterCard data={filteredData} />
)} )}
<div className="changePage"> {hasMore && <div ref={ref}></div>}
<button className="button" disabled={page === 1} onClick={decrement}>
Previous
</button>
<button className="button" onClick={increment}>
Next
</button>
</div>
</div> </div>
); );
}; };