Skip to content

Added api logic to editions #71

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.

Sign up for GitHub

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

Open
mannan-b wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added api logic to editions #71

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f5d399
fixed the api logic
mannan-b Sep 8, 2025
96b0288
Merge pull request #4 from mannan-b/mannan-b-patch-4
mannan-b Oct 5, 2025
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
261 changes: 229 additions & 32 deletions src/sections/LandingSections/EditionsSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,232 @@
import React from 'react';

import EditionCards from "./EditionCards";

const EditionsHeading = () => {
document.documentElement.classList.remove("nav-open");
const checkScroll = () => {
const componentPosition = document.getElementsByClassName("add-animation");
const scrollPosition = window.pageYOffset;
for (var i = 0; i < componentPosition.length; i++) {
var rec =
componentPosition[i].getBoundingClientRect().top + window.scrollY + 100;
if (scrollPosition + window.innerHeight >= rec) {
componentPosition[i].classList.add("animated");
} else if (scrollPosition + window.innerHeight * 0.8 < rec) {
componentPosition[i].classList.remove("animated");
}
}
import React from "react";
import { Row, Col } from "reactstrap";

const EditionCards = () => {
const [mob, setMob] = React.useState(true);
const [editions, setEditions] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [error, setError] = React.useState(null);

// Handle window resize
React.useEffect(() => {
const handleResize = () => {
const width = window.innerWidth;
setMob(width <= 900);
};

React.useEffect(() => {
document.body.classList.add("presentation-page");
window.addEventListener("scroll", checkScroll);
window.scrollTo(0, 0);
document.body.scrollTop = 0;
return function cleanup() {
document.body.classList.remove("presentation-page");
window.removeEventListener("scroll", checkScroll);
};
},[]);

// Set initial state
handleResize();

return <EditionCards />
}
// Add event listener
window.addEventListener("resize", handleResize);

// Cleanup
return () => window.removeEventListener("resize", handleResize);
}, []);

// Fetch editions from API
React.useEffect(() => {
const fetchEditions = async () => {
try {
setLoading(true);
// Replace 'your-api-base-url' with your actual API base URL
const response = await fetch('https://api.dtutimes.com/v1/edition');

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const data = await response.json();
if (!Array.isArray(data)) { setError('Received malformed data from the API'); return; }
// Take only the first 8 editions (newest)
const latestEditions = data.slice(0, 8);
setEditions(latestEditions);
setError(null);
} catch (err) {
console.error('Error fetching editions:', err);
setError('Failed to load editions');
} finally {
setLoading(false);
}
};

fetchEditions();
}, []);

// Loading state
if (loading) {
return (
<div className="section section-cards" style={{ paddingTop: "0rem", minHeight: "400px", display: "flex", alignItems: "center", justifyContent: "center" }}>
<div>Loading editions...</div>
</div>
);
}

// Error state
if (error) {
return (
<div className="section section-cards" style={{ paddingTop: "0rem", minHeight: "400px", display: "flex", alignItems: "center", justifyContent: "center" }}>
<div>Error: {error}</div>
</div>
);
}

// Grid item class names for positioning
const gridClasses = [
"first-card", "second-card", "third-card", "fourth-card",
"fifth-card", "sixth-card", "seventh-card", "eight-card", "ninth-card"
];

const renderEditionGrid = () => {
return editions.map((edition, index) => (
<li key={edition.id} className={`grid__item ${gridClasses[index] || 'grid__item'}`}>
<a
className="grid__link"
href={edition.link || `/editions/${edition.id}`}
target={edition.link ? "_blank" : "_self"}
rel={edition.link ? "noopener noreferrer" : ""}
>
<img
alt={edition.name || `Edition ${edition.id}`}
className="grid__img layer"
src={edition.imgUrl || '/placeholder-edition.jpg'}
onError={(e) => {
e.target.src = '/placeholder-edition.jpg'; // Fallback
}}
/>
</a>
</li>
));
};

if (mob === false) {
return (
<>
<div
className="section section-cards"
style={{
paddingTop: "0rem",
}}
>
<div className="codrops-header">
<Row>
<Col lg="4" md="6">
<div className="section-description">
<img
width="10%"
style={{
minWidth: "4rem",
}}
src={require("assets/img/icons/newspaper.png")}
alt="..."
/>
<h2
style={{
marginBottom: "1rem",
fontWeight: "8rem !important",
}}
>
<span style={{ color: "#040403" }}>
<strong>Latest</strong>
</span>{" "}
<span style={{ color: "#6bd098" }}>
<strong>Editions</strong>
</span>
</h2>
<h6 className="category">By DTU Times </h6>
<h5
style={{
fontSize: "1.1rem",
color: "#494850",
fontWeight: "400 !important",
}}
className="description"
>
The DTU Snapshot at a glance. Check out our latest editions,
containing interviews of the dignitaries and the celebrities
that visited DTU to the news of societies, faculties,
students and the University itself. And while you are at it
be sure to visit the Pulse section, filled to the brim with
the creativity of some of the most talented writers of our
University.
</h5>
</div>
</Col>
</Row>
</div>
<section className="section-intro">
<div className="isolayer isolayer--deco1 isolayer--shadow js">
<ul className="grid grid--loaded">
{renderEditionGrid()}
</ul>
</div>
</section>
</div>
</>
);
} else {
return (
<>
<div
className="section section-cards"
style={{
paddingTop: "0rem",
minHeight: "900px !important",
}}
>
<div className="codrops-header">
<Row>
<Col lg="4" md="6">
<div className="section-description">
<img
width="10%"
style={{
minWidth: "3rem",
}}
src={require("assets/img/icons/newspaper.png")}
alt="..."
/>
<h2
style={{
marginBottom: "1rem",
fontWeight: "8rem !important",
}}
>
<span style={{ color: "#040403" }}>
<strong>Latest</strong>
</span>{" "}
<span style={{ color: "#6bd098" }}>
<strong>Editions</strong>
</span>
</h2>
<h6 className="category">By DTU Times </h6>
<h5
style={{
fontSize: "1.1rem",
color: "#494850",
fontWeight: "400 !important",
}}
className="description"
>
The DTU snapshot at a glance. Check out our latest editions
for a comprehensive summary of the happenings over the past
quarter.
</h5>
</div>
</Col>
</Row>
</div>
<section className="section-intro">
<div className="isolayer isolayer--deco1 isolayer--shadow js">
<ul className="grid grid--loaded">
{renderEditionGrid()}
</ul>
</div>
</section>
</div>
</>
);
}
};

export default EditionsHeading;
export default EditionCards;