Filter resources by topic

.vscode/settings.json

@@ -2,7 +2,7 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": true
 	},
-	"editor.formatOnSave": false,
+	"editor.formatOnSave": true,
 	"eslint.options": {
 		"ignorePath": ".config/.lintignore",
 		"overrideConfigFile": ".config/.eslintrc.json"

client/setupTests.js

@@ -3,7 +3,6 @@ import { randomUUID } from "node:crypto";
 import "@testing-library/jest-dom";
 import "whatwg-fetch";
 import { setupServer } from "msw/node";
-
 export const resourceStub = (overrides = {}) => ({
 	accession: new Date(),
 	description: null,

client/src/components/Form/Select.js

@@ -9,6 +9,8 @@ export default function Select({
 	options,
 	placeholder,
 	required,
+	onChange = () => {},
+	className,
 }) {
 	return (
 		<Label required={required} text={label}>
@@ -17,6 +19,8 @@ export default function Select({
 				disabled={options === undefined}
 				name={name}
 				required={required}
+				onChange={onChange}
+				className={className}
 			>
 				<option disabled value="">
 					{placeholder}
@@ -34,6 +38,7 @@ export default function Select({
 
 Select.propTypes = {
 	defaultValue: PropTypes.string,
+	className: PropTypes.string,
 	label: PropTypes.string.isRequired,
 	name: PropTypes.string.isRequired,
 	options: PropTypes.arrayOf(
@@ -44,4 +49,5 @@ Select.propTypes = {
 	),
 	placeholder: PropTypes.string.isRequired,
 	required: PropTypes.bool,
+	onChange: PropTypes.func,
 };

client/src/components/ResourceList/ResourceList.scss

@@ -65,3 +65,12 @@ ul.resource-list {
 		word-break: break-word;
 	}
 }
+
+.custom-select {
+	background-color: white;
+	border: 1px solid palette.$light-grey;
+	border-radius: layout.$border-radius;
+	font: typography.$body-text;
+	padding: layout.$baseline;
+	width: 100%;
+}

client/src/components/ResourceList/ResourceList.test.js

@@ -1,47 +1,184 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { rest } from "msw";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
 
-import { resourceStub } from "../../../setupTests";
+import { resourceStub, server } from "../../../setupTests";
+import * as useFetchPublishedResourcesModule from "../../hooks";
+
+import TopicSelector from "./TopicSelector";
 
 import ResourceList from "./index";
 
+server.use(
+	rest.get("/api/topics", (req, res, ctx) => {
+		return res(
+			ctx.json([
+				{
+					id: "199a529b-22c1-460f-bc51-387cb12225e8",
+					name: "Git",
+				},
+				{
+					id: "84b099a4-8acd-4659-b5bd-1b89796fb924",
+					name: "HTML/CSS",
+				},
+			])
+		);
+	})
+);
+
+jest.mock("../../hooks/useFetchPublishedResources", () => ({
+	useFetchPublishedResources: jest.fn(),
+}));
+
+jest.mock("../../hooks/useFetchTopics", () => ({
+	useFetchTopics: jest.fn(),
+}));
+
 describe("ResourceList", () => {
-	it("shows the resource", () => {
-		const resource = resourceStub({
-			description:
-				'Comprehensive guide to setting up the various types of inputs with React (a.k.a. "data binding")',
-			title: "Data Binding in React",
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const topics = [
+		{ id: "199a529b-22c1-460f-bc51-387cb12225e8", name: "Git" },
+		{ id: "84b099a4-8acd-4659-b5bd-1b89796fb924", name: "HTML/CSS" },
+	];
+
+	const resourceData = [
+		resourceStub({
+			id: "1",
+			title: "A Complete Guide to Flexbox",
 			url: "https://www.joshwcomeau.com/react/data-binding/",
+			topics: "84b099a4-8acd-4659-b5bd-1b89796fb924",
+			topic_name: "HTML/CSS",
+		}),
+		resourceStub({
+			id: "2",
+			title: "React Hooks Tutorial",
+			url: "https://reactjs.org/docs/hooks-intro.html",
+			topics: "199a529b-22c1-460f-bc51-387cb12225e8",
+			topic_name: "React",
+		}),
+	];
+
+	it("shows resources", async () => {
+		const resource = resourceStub({
+			description: "This is a very useful resource I found",
+			id: "abc123",
+			title: "Hello",
+			url: "https://example.com",
 		});
-		render(<ResourceList resources={[resource]} />);
-		expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
-			resource.title
+
+		useFetchPublishedResourcesModule.useFetchPublishedResources.mockReturnValueOnce(
+			{
+				perPage: 20,
+				page: 1,
+				resources: [resource],
+			}
+		);
+
+		render(
+			<MemoryRouter>
+				<ResourceList />
+			</MemoryRouter>
 		);
+
+		await expect(
+			screen.findByRole("heading", { name: resource.title })
+		).resolves.toBeInTheDocument();
+
+		expect(screen.getByRole("link", { name: "example.com" })).toHaveAttribute(
+			"href",
+			resource.url
+		);
+
 		expect(
-			screen.getByRole("link", { name: "joshwcomeau.com" })
-		).toHaveAttribute("href", resource.url);
-		expect(screen.getByText(/comprehensive guide/i)).toBeInTheDocument();
+			screen.getByText(new RegExp(resource.description))
+		).toBeInTheDocument();
 	});
 
-	it("shows a message if no resources are available", () => {
-		render(<ResourceList resources={[]} />);
-		expect(screen.getByText(/no resources to show/i)).toBeInTheDocument();
+	it("shows a message if no resources are available", async () => {
+		useFetchPublishedResourcesModule.useFetchPublishedResources.mockReturnValueOnce(
+			{
+				perPage: 10,
+				page: 1,
+				resources: [],
+			}
+		);
+		useFetchPublishedResourcesModule.useFetchTopics.mockReturnValueOnce([]);
+		render(
+			<MemoryRouter>
+				<ResourceList />
+			</MemoryRouter>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText(/no resources to show/i)).toBeInTheDocument();
+		});
 	});
 
-	it("shows a publish button if enabled", async () => {
-		const publish = jest.fn();
-		const resource = resourceStub();
-		const user = userEvent.setup();
-		render(<ResourceList publish={publish} resources={[resource]} />);
+	it("shows the topic if available", async () => {
+		useFetchPublishedResourcesModule.useFetchPublishedResources.mockReturnValueOnce(
+			{
+				perPage: 20,
+				page: 1,
+				resources: resourceData,
+			}
+		);
 
-		await user.click(screen.getByRole("button", { name: /publish/i }));
+		render(
+			<MemoryRouter>
+				<ResourceList />
+			</MemoryRouter>
+		);
 
-		expect(publish).toHaveBeenCalledWith(resource.id);
+		await waitFor(() => {
+			expect(screen.getByText(resourceData[0].topic_name)).toBeInTheDocument();
+		});
 	});
 
-	it("shows the topic if available", () => {
-		const resource = resourceStub({ topic_name: "My Topic" });
-		render(<ResourceList resources={[resource]} />);
-		expect(screen.getByText(resource.topic_name)).toBeInTheDocument();
+	it("displays only resources with the selected topic", async () => {
+		const setSelectedTopicMock = jest.fn();
+
+		server.use(
+			rest.get("/api/resources", (req, res, ctx) => {
+				return res(ctx.json({ resources: resourceData }));
+			})
+		);
+
+		useFetchPublishedResourcesModule.useFetchPublishedResources.mockReturnValueOnce(
+			{
+				perPage: 20,
+				page: 1,
+				resources: resourceData.filter(
+					(resource) => resource.topic_name === "HTML/CSS"
+				),
+			}
+		);
+
+		render(
+			<MemoryRouter>
+				<TopicSelector
+					topics={topics}
+					setSelectedTopic={setSelectedTopicMock}
+				/>
+			</MemoryRouter>
+		);
+
+		await userEvent.selectOptions(
+			screen.getByRole("combobox", { name: /filter topic/i }),
+			"HTML/CSS"
+		);
+
+		render(
+			<MemoryRouter>
+				<ResourceList />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("A Complete Guide to Flexbox")).toBeInTheDocument();
+		expect(screen.queryByText("React Hooks Tutorial")).not.toBeInTheDocument();
 	});
 });

client/src/components/ResourceList/TopicSelector.js

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { FormControls } from "..";
+
+export default function TopicSelector({ topics, setSelectedTopic }) {
+	const navigate = useNavigate();
+	const handleChange = (event) => {
+		setSelectedTopic(event.target.value);
+		navigate("/");
+	};
+	return (
+		<div>
+			<FormControls.Select
+				label="Filter Topic"
+				placeholder="Select a topic"
+				name="filter topic"
+				options={topics}
+				onChange={handleChange}
+				className="custom-select"
+			/>
+		</div>
+	);
+}
+TopicSelector.propTypes = {
+	topics: PropTypes.array.isRequired,
+	setSelectedTopic: PropTypes.func.isRequired,
+};

client/src/components/ResourceList/index.js

@@ -1,49 +1,44 @@
-import PropTypes from "prop-types";
+import { useState } from "react";
+
+import { Pagination } from "../../components";
+import { useFetchPublishedResources, useFetchTopics } from "../../hooks";
+import { formatUrl } from "../../utils/utils";
 
 import "./ResourceList.scss";
+import TopicSelector from "./TopicSelector";
 
-export default function ResourceList({ publish, resources }) {
-	return (
-		<ul className="resource-list">
-			{resources.length === 0 && (
-				<li className="no-resources">
-					<em>No resources to show.</em>
-				</li>
-			)}
-			{resources.map(({ description, id, title, topic_name, url }) => (
-				<li key={id}>
-					<div>
-						<h3>{title}</h3>
-						{topic_name && <span className="topic">{topic_name}</span>}
-					</div>
-					{description && <p className="resource-description">{description}</p>}
-					<div>
-						<a href={url}>{formatUrl(url)}</a>
-						{publish && <button onClick={() => publish(id)}>Publish</button>}
-					</div>
-				</li>
-			))}
-		</ul>
-	);
-}
+export default function ResourceList() {
+	const [selectedTopic, setSelectedTopic] = useState(undefined);
+	const topics = useFetchTopics();
+	const { lastPage, resources } = useFetchPublishedResources(selectedTopic);
 
-ResourceList.propTypes = {
-	publish: PropTypes.func,
-	resources: PropTypes.arrayOf(
-		PropTypes.shape({
-			description: PropTypes.string,
-			id: PropTypes.string.isRequired,
-			title: PropTypes.string.isRequired,
-			topic_name: PropTypes.string,
-			url: PropTypes.string.isRequired,
-		})
-	).isRequired,
-};
+	return (
+		<>
+			<div>
+				{topics && (
+					<TopicSelector setSelectedTopic={setSelectedTopic} topics={topics} />
+				)}
+			</div>
 
-function formatUrl(url) {
-	const host = new URL(url).host;
-	if (host.startsWith("www.")) {
-		return host.slice(4);
-	}
-	return host;
+			<ul className="resource-list">
+				{resources && resources.length === 0 && (
+					<li className="no-resources">
+						<em>No resources to show.</em>
+					</li>
+				)}
+				{resources &&
+					resources.map(({ description, id, title, topic_name, url }) => (
+						<li key={id}>
+							<div>
+								<h3>{title}</h3>
+								{topic_name && <span className="topic">{topic_name}</span>}
+							</div>
+							{description && <p>{description}</p>}
+							<a href={url}>{formatUrl(url)}</a>
+						</li>
+					))}
+			</ul>
+			<Pagination lastPage={lastPage ?? 1} />
+		</>
+	);
 }

client/src/hooks/index.js

@@ -1 +1,4 @@
 export { default as useSearchParams } from "./useSearchParams";
+export { usePagination } from "./usePagination";
+export { useFetchTopics } from "./useFetchTopics";
+export { useFetchPublishedResources } from "./useFetchPublishedResources";