Merge pull request #34 from codersforcauses/issue-5-Create_Resources_Page

Issue 5 create resources page

Author: RadinMan

.gitignore

@@ -291,4 +291,5 @@ dist
 # misc
 .DS_Store
 
-opt/
+opt/
+server/media/

client/next.config.mjs

@@ -8,6 +8,18 @@ const isWindowsDevContainer = () =>
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    remotePatterns: [
+      // Local development only. Replace this with the production media/CDN
+      // hostname before deployment.
+      {
+        protocol: "http",
+        hostname: "localhost",
+        port: "8000",
+        pathname: "/media/**",
+      },
+    ],
+  },
   // dumb fix for windows docker
   webpack: isWindowsDevContainer()
     ? (config) => {

client/public/default-resource-img.jpg

@@ -0,0 +1,56 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import api from "@/lib/api";
+
+export interface Resource {
+  id: string;
+  image: string | null;
+  name: string;
+  date_made: string;
+  author: string;
+  slug: string;
+  summary: string;
+  type: "page" | "file";
+  body: string;
+  file_url: string | null;
+  file_name: string | null;
+}
+
+export const getResources = (
+  args?: Omit<UseQueryOptions<Resource[]>, "queryKey" | "queryFn">,
+) => {
+  return useQuery<Resource[], Error>({
+    ...args,
+    queryKey: ["resources"],
+    queryFn: async () => {
+      const res = await api.get("resources/collection/");
+      return res.data as Resource[];
+    },
+  });
+  // TODO: Error handling
+};
+
+export async function fetchResourceFromSlug(slug: string): Promise<Resource[]> {
+  const res = await api.get("resources/collection/", {
+    params: {
+      slug,
+    },
+  });
+
+  return res.data as Resource[];
+} //had to create to use in GetServerSideProps since it needs to be async since it runs outside react
+
+export function getResourceFromSlug(slug: string) {
+  return useQuery<Resource[], Error>({
+    queryKey: ["resources", slug],
+    queryFn: async () => {
+      try {
+        const res = await fetchResourceFromSlug(slug);
+        return res as Resource[];
+      } catch (error) {
+        throw new Error("Failed to load"); //create instance of error
+      }
+    },
+    enabled: !!slug,
+  });
+}

client/src/hooks/apiService.ts

@@ -0,0 +1,139 @@
+import { ArrowLeft, Calendar, FileText } from "lucide-react";
+import { GetServerSideProps } from "next";
+import Link from "next/link";
+
+import { fetchResourceFromSlug, Resource } from "@/hooks/apiService";
+
+//implement getPDFbySlug async function that will take a slug and return pdf url
+
+interface Props {
+  resource: Resource[] | null; //resource defined in api service
+}
+
+const DEFAULT_PDF =
+  "https://www.rd.usda.gov/sites/default/files/pdf-sample_0.pdf";
+
+//used in pages router to fetch data for interface Props at request time
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  params,
+}) => {
+  const slug = params?.slug as string | undefined;
+
+  if (!slug) {
+    return {
+      notFound: true,
+    };
+  }
+  try {
+    const resource = await fetchResourceFromSlug(slug);
+
+    if (resource.length === 0) {
+      return {
+        notFound: true,
+      };
+    }
+
+    return {
+      props: {
+        resource,
+      }, //returns props object that page component will recieve
+    };
+  } catch (error) {
+    return {
+      props: {
+        resource: null,
+      },
+    };
+  }
+};
+
+function ResourceHeader({ resource }: { resource: Resource }) {
+  return (
+    <header className="mb-8">
+      <div className="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+        <span className="inline-flex items-center gap-1.5">
+          <Calendar size={16} />
+          {resource.date_made}
+        </span>
+        <span className="inline-flex items-center gap-1.5 rounded-full bg-[#C000CC]/10 px-2.5 py-0.5 text-xs font-semibold capitalize text-[#C000CC]">
+          <FileText size={13} />
+          {resource.type}
+        </span>
+      </div>
+
+      <h1 className="mt-3 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        {resource.name}
+      </h1>
+
+      {resource.author ? (
+        <p className="mt-2 text-sm text-muted-foreground">
+          By {resource.author}
+        </p>
+      ) : null}
+
+      <div className="mt-5 h-1 w-16 rounded-full bg-[#C000CC]" />
+
+      {resource.summary ? (
+        <p className="mt-5 max-w-3xl text-base leading-relaxed text-muted-foreground">
+          {resource.summary}
+        </p>
+      ) : null}
+    </header>
+  );
+}
+
+function ResourceContent({ resource }: { resource: Resource[] | null }) {
+  if (!resource) {
+    return (
+      <embed
+        src={DEFAULT_PDF}
+        type="application/pdf"
+        className="h-[85vh] w-full"
+      />
+    );
+  }
+  if (resource[0].type == "file" && resource[0].file_url != null) {
+    return (
+      <iframe
+        src={resource[0].file_url}
+        title="PDF Viewer"
+        className="h-[85vh] w-full rounded-lg border border-border/60"
+      />
+    );
+  }
+  if (resource[0].type == "page") {
+    return (
+      <article className="whitespace-pre-line py-8 text-base leading-relaxed text-foreground">
+        {resource[0].body}
+      </article>
+    );
+  }
+  return (
+    <div className="px-6 py-8 text-muted-foreground">
+      Unsupported resource type
+    </div>
+  );
+}
+
+export default function PDFViewer({ resource }: Props) {
+  return (
+    <main className="min-h-screen bg-muted/30 pb-12 pt-8">
+      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+        <Link
+          href="/resources"
+          className="group mb-6 inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-[#C000CC] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          <ArrowLeft
+            size={16}
+            className="transition-transform group-hover:-translate-x-0.5"
+          />
+          Back to Resources
+        </Link>
+
+        {resource ? <ResourceHeader resource={resource[0]} /> : null}
+
+        <ResourceContent resource={resource} />
+      </div>
+    </main>
+  );
+}

client/src/pages/resources/[slug]/index.tsx

@@ -0,0 +1,99 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Search,
+} from "lucide-react";
+import { useState } from "react";
+
+import { ContentCard } from "@/components/content-card";
+import { getResources, Resource } from "@/hooks/apiService";
+
+type Direction = "double_left" | "left" | "double_right" | "right";
+
+function ArrowButton({ direction }: { direction: Direction }) {
+  const buttonClass =
+    "flex items-center justify-center w-8 h-8 bg-white border border-[#F1F1F1] rounded-lg";
+
+  const iconClass = "h-4 w-4 text-[#CCCCCC]";
+
+  const icons = {
+    double_left: <ChevronsLeft className={iconClass} />,
+    left: <ChevronLeft className={iconClass} />,
+    double_right: <ChevronsRight className={iconClass} />,
+    right: <ChevronRight className={iconClass} />,
+  };
+
+  return <button className={buttonClass}> {icons[direction]} </button>;
+}
+
+function ResourceCard({ item }: { item: Resource }) {
+  const href = `/resources/${item.slug}`;
+
+  // TODO: Use the horizontal card component for the mobile layout once it is available.
+  return (
+    <ContentCard
+      title={item.name}
+      description={item.summary}
+      author={item.author}
+      dateTime={item.date_made}
+      href={href}
+      imageSrc={item.image || "/default-resource-img.jpg"}
+      imageAlt={item.name}
+      buttonLabel="View"
+      className="min-h-[28rem] w-full max-w-none [&_h3]:text-xl [&_p]:text-sm"
+    />
+  );
+}
+
+function ResourcesCards({ searchTerm }: { searchTerm: string }) {
+  const { data, isLoading } = getResources();
+
+  if (isLoading || data === undefined) return <p>Loading...</p>;
+
+  const query = searchTerm.trim().toLowerCase();
+
+  const filteredResources = data.filter((item) => {
+    return item.name.toLowerCase().includes(query);
+  });
+
+  if (filteredResources.length === 0) {
+    return <p>No resources match your search.</p>;
+  }
+
+  return filteredResources.map((item) => (
+    <ResourceCard key={item.id} item={item} />
+  ));
+}
+
+export default function Resources() {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  return (
+    <main>
+      <div className="mx-auto flex w-full max-w-[90rem] flex-col gap-8 px-4 pt-6 sm:px-8 lg:px-16 lg:pt-8">
+        {/* Title + Search */}
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <h1 className="text-2xl font-bold">Resources</h1>
+
+          {/* Search Box */}
+          <div className="relative w-full md:w-auto">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchTerm}
+              onChange={(event) => setSearchTerm(event.target.value)}
+              className="w-full rounded-lg border border-[#F1F1F1] py-2 pl-9 pr-4 md:w-72"
+            />
+          </div>
+        </div>
+        {/* Cards */}
+        <div className="md grid w-full justify-items-center gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          <ResourcesCards searchTerm={searchTerm} />
+        </div>
+      </div>
+    </main>
+  );
+}

client/src/pages/resources/index.tsx

@@ -0,0 +1,6 @@
+from django.contrib import admin
+from .models import Resource
+
+
+# Register your models here.
+admin.site.register(Resource)

server/api/resources/__init__.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ResourcesConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "api.resources"

server/api/resources/admin.py

@@ -0,0 +1,40 @@
+# Generated by Django 5.1.14 on 2026-06-22 07:52
+
+import uuid
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = []
+
+    operations = [
+        migrations.CreateModel(
+            name="Resource",
+            fields=[
+                (
+                    "id",
+                    models.UUIDField(
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                    ),
+                ),
+                ("name", models.CharField(max_length=255)),
+                ("slug", models.SlugField(max_length=255, unique=True)),
+                ("summary", models.TextField(blank=True)),
+                (
+                    "type",
+                    models.CharField(
+                        choices=[("page", "Page"), ("file", "File")], max_length=10
+                    ),
+                ),
+                ("body", models.TextField(blank=True)),
+                ("file_url", models.URLField(blank=True)),
+                ("file_name", models.CharField(blank=True, max_length=255)),
+            ],
+        ),
+    ]