Skip to content
This repository has been archived by the owner on Jun 2, 2024. It is now read-only.

Restyle Second deployment #63

Merged
merged 2 commits into from
Feb 4, 2024
Merged

Restyle Second deployment #63

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2bd232
Restyled by clang-format
restyled-commits Feb 4, 2024
e775e5e
Restyled by prettier
restyled-commits Feb 4, 2024
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
102 changes: 54 additions & 48 deletions src/components/NonPage/Initiatives.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,59 @@ import Papa from "papaparse";
import "./Initiatives.css";

export default function AllInitiatives(props) {
const [initiativesData, setEventsInfo] = useState([]);
const [showMore, setShowMore] = useState([]);
console.log(props.dayInfo);
useEffect(() => {
const fetchSheetsData = async () => {
try {
const ID = "1yB7zzw0I3hUjLwgKZXMpBioQ9FNkTg2bp3skTwtatHk";
const sheet_name = "Announcements";
const response = await fetch(`https://docs.google.com/spreadsheets/d/${ID}/gviz/tq?tqx=out:csv&sheet=${sheet_name}`);
const text = await response.text();
const parsedData = Papa.parse(text, { header: true }).data.reverse();
setEventsInfo(parsedData);
setShowMore(Array(parsedData.length).fill(false));
} catch (err) {
console.log(err);
}
};
fetchSheetsData();
}, []);

const [initiativesData, setEventsInfo] = useState([]);
const [showMore, setShowMore] = useState([]);
console.log(props.dayInfo);
useEffect(() => {
const fetchSheetsData = async () => {
try {
const ID = "1yB7zzw0I3hUjLwgKZXMpBioQ9FNkTg2bp3skTwtatHk";
const sheet_name = "Announcements";
const response = await fetch(
`https://docs.google.com/spreadsheets/d/${ID}/gviz/tq?tqx=out:csv&sheet=${sheet_name}`,
);
const text = await response.text();
const parsedData = Papa.parse(text, { header: true }).data.reverse();
setEventsInfo(parsedData);
setShowMore(Array(parsedData.length).fill(false));
} catch (err) {
console.log(err);
}
};
fetchSheetsData();
}, []);

const handleShowMoreToggle = (index) => {
setShowMore((prevShowMore) => {
const newShowMore = [...prevShowMore];
newShowMore[index] = !newShowMore[index];
return newShowMore;
});
}
const handleShowMoreToggle = (index) => {
setShowMore((prevShowMore) => {
const newShowMore = [...prevShowMore];
newShowMore[index] = !newShowMore[index];
return newShowMore;
});
};

return (
<div className="all-initiatives">
<div className="frame">
{initiativesData.map((initiative, index) => (
<div className="event" key={index}>
<p className="event-date">{initiative.Date}</p>
<h4 className="event-title">{initiative.Title}</h4>
<p className="event-text">
{showMore[index] ? initiative.Text : initiative.Text.substring(0, 100)}
</p>
{showMore[index] ?
<button className="show-more" onClick={() => handleShowMoreToggle(index)}>
{showMore[index] ? "Show Less" : "Show More..."}
</button> : null
}
</div>
))}
</div>
</div>
);
}
return (
<div className="all-initiatives">
<div className="frame">
{initiativesData.map((initiative, index) => (
<div className="event" key={index}>
<p className="event-date">{initiative.Date}</p>
<h4 className="event-title">{initiative.Title}</h4>
<p className="event-text">
{showMore[index]
? initiative.Text
: initiative.Text.substring(0, 100)}
</p>
{showMore[index] ? (
<button
className="show-more"
onClick={() => handleShowMoreToggle(index)}
>
{showMore[index] ? "Show Less" : "Show More..."}
</button>
) : null}
</div>
))}
</div>
</div>
);
}