Resource dropdown boxes & rendering fake data

package.json

@@ -21,13 +21,15 @@
 		"bootstrap-icons": "^1.8.3",
 		"node-sass": "^7.0.1",
 		"photoswipe": "^5.3.0",
+		"prop-types": "^15.8.1",
 		"react": "^18.1.0",
 		"react-bootstrap": "^2.4.0",
 		"react-dom": "^18.1.0",
 		"react-photoswipe-gallery": "^2.2.1",
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "5.0.1",
 		"react-spinners": "^0.13.4",
+		"react-youtube": "^9.0.3",
 		"styled-components": "^5.3.5",
 		"web-vitals": "^2.1.4"
 	},

src/resources/Organizations.js

@@ -1,17 +1,60 @@
-import React from "react";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { organizationsMap } from "./fakeData";
 import "./resources.css";
 
+// tags is currently unused
+function ToggleItem({ id, title, description, url, tags }) {
+	const [showButton, setShowButton] = useState(false);
+
+	return (
+		<li className="resource-list-item" key={id}>
+			<button
+				type="button"
+				className={`resource-list-title ${showButton && "active"}`}
+				onClick={() => setShowButton(prevState => !prevState)}
+			>
+				{title}
+			</button>
+
+			<div className={`resource-list-description ${showButton && "active"}`}>
+				<p>{description}</p>
+				<a
+					className="resource-link"
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Learn more here. {/* Open link in new tab*/}
+				</a>
+				<p>Tags: {tags.join(", ")}</p>
+			</div>
+		</li>
+	);
+}
+
+ToggleItem.propTypes = {
+	id: PropTypes.number.isRequired,
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	url: PropTypes.string.isRequired,
+	tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 function Organizations() {
 	return (
-		<div>
-			<h2>Organizations</h2>
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-				commodo consequat.
-			</p>
-		</div>
+		<ul className="resource-list">
+			{organizationsMap.map(org => (
+				<ToggleItem
+					key={org.id}
+					id={org.id}
+					title={org.title}
+					description={org.description}
+					url={org.url}
+					tags={org.tags}
+				/>
+			))}
+		</ul>
 	);
 }
 

src/resources/Readings.js

@@ -1,16 +1,67 @@
-import React from "react";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import { readingsMap } from "./fakeData";
 import "./resources.css";
 
+// tags is currently unused
+function ToggleItem({ id, title, publicationDate, description, url, tags }) {
+	const [showButton, setShowButton] = useState(false);
+
+	return (
+		<li className="resource-list-item" key={id}>
+			<button
+				type="button"
+				className={`resource-list-title ${showButton && "active"}`}
+				onClick={() => setShowButton(prevState => !prevState)}
+			>
+				{title}
+			</button>
+
+			<div className={`resource-list-description ${showButton && "active"}`}>
+				<p>{description}</p>
+				<a
+					className="resource-link"
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Read it here. {/* Open link in new tab*/}
+				</a>
+				<p>
+					Publication date: {publicationDate}
+					<br />
+					Tags: {tags.join(", ")}
+				</p>
+			</div>
+		</li>
+	);
+}
+
+ToggleItem.propTypes = {
+	id: PropTypes.number.isRequired,
+	title: PropTypes.string.isRequired,
+	publicationDate: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	url: PropTypes.string.isRequired,
+	tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
 function Readings() {
 	return (
 		<div>
-			<h2>Readings</h2>
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-				veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-				commodo consequat.
-			</p>
+			{readingsMap.map(reading => {
+				return (
+					<ToggleItem
+						key={reading.id}
+						id={reading.id}
+						title={reading.title}
+						publicationDate={reading.publicationDate}
+						description={reading.description}
+						url={reading.url}
+						tags={reading.tags}
+					/>
+				);
+			})}
 		</div>
 	);
 }