data handling for form and topic pages added (#32)

* data handling for form and topic pages added

* try relative path for image

* prettier

package.json

@@ -30,7 +30,9 @@
     "react-bootstrap": "^2.7.4",
     "react-dom": "18.2.0",
     "react-icons": "^5.0.1",
+    "react-markdown": "^9.0.1",
     "reactstrap": "^9.1.9",
+    "remark-gfm": "^4.0.0",
     "serve": "^14.2.3",
     "swr": "^2.2.5",
     "ts-node": "^10.9.2"

src/app/[path]/[topic]/page.tsx

@@ -1,5 +1,11 @@
-import { GetStaticPathsResult } from 'next';
-import { legalTopics, Topic } from '../../../config/topics.config';
+import { legalTopics } from '../../../config/topics.config';
+import { fetchInterviews } from '../../../data/fetchInterviewData';
+import { formSources } from '../../../config/formSources.config';
+import Button from 'react-bootstrap/Button';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import InteractiveForm from '../../components/InteractiveForm';
 
 interface PageProps {
   params: {
@@ -8,9 +14,41 @@ interface PageProps {
   };
 }
 
-const Page = ({ params }: PageProps) => {
+const Page = async ({ params }: PageProps) => {
   const { topic, path } = params;
-  return <div>Topic: {topic}</div>;
+  const { interviewsByTopic, isError } = await fetchInterviews(path);
+
+  const server =
+    formSources.docassembleServers.find((server) => server.path === path) ||
+    formSources.docassembleServers[0];
+  const serverUrl = server.url;
+
+  if (isError) {
+    return <div>Error fetching data.</div>;
+  }
+
+  const topicDetails = legalTopics.find((t) => t.name.toLowerCase() === topic);
+
+  const interviews = interviewsByTopic[topic] || [];
+
+  return (
+    <div className="container">
+      <h1 className="form-heading">{topicDetails?.long_name || 'Topic'}</h1>
+      {interviews.length > 0 ? (
+        interviews.map((interview, index) => (
+          <InteractiveForm
+            key={index}
+            title={interview.title}
+            metadata={interview.metadata}
+            link={interview.link}
+            serverUrl={interview.serverUrl}
+          />
+        ))
+      ) : (
+        <p>No interviews found for this topic.</p>
+      )}
+    </div>
+  );
 };
 
 export default Page;

src/app/components/InteractiveForm.tsx

@@ -1,21 +1,46 @@
-import { Form } from '../interfaces/Form';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import Button from 'react-bootstrap/Button';
 
-interface InteractiveFormProps extends Form {}
+interface InteractiveFormProps {
+  title: string;
+  metadata: any;
+  link: string;
+  serverUrl: string;
+}
 
 const InteractiveForm: React.FC<InteractiveFormProps> = ({
   title,
   metadata,
   link,
   serverUrl,
 }) => {
-  const url = new URL(serverUrl);
-  url.pathname = link;
+  const fullUrl = `${serverUrl}${link}`;
 
   return (
-    <div className="interactive-form" key={link}>
-      <h2>{title}</h2>
-      <p>{metadata.description}</p>
-      <a href={url.toString()}>Start Form</a>
+    <div>
+      <div className="form-content">
+        <div className="form-text-section">
+          <h2 className="form-subheading">{title}</h2>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {metadata.before_you_start}
+          </ReactMarkdown>
+          <br />
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {metadata.description}
+          </ReactMarkdown>
+          <br />
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {metadata.can_I_use_this_form}
+          </ReactMarkdown>
+        </div>
+        <div className="form-button-section">
+          <Button className="form-start-button" href={fullUrl}>
+            Start Form
+          </Button>
+        </div>
+      </div>
+      <hr />
     </div>
   );
 };

src/app/components/NavigationBar.tsx

@@ -11,11 +11,7 @@ export default function NavigationBar() {
     >
       <div className="container">
         <Link href="/" className="navbar-brand d-flex align-items-center">
-          <img
-            src={`${prefix}/logo-short.png`}
-            alt="Logo"
-            className="logo-image me-2"
-          />
+          <img src="logo-short.png" alt="Logo" className="logo-image me-2" />
           <span id="nav-header-text" className="logo-text">
             Court Forms Online
           </span>

src/app/components/TopicsSection.tsx

@@ -16,7 +16,8 @@ const TopicsSection = async ({ path, interviews, isError }) => {
   const filteredTopics = legalTopics
     .sort((a, b) => b.priority - a.priority)
     .filter(
-      (topic) => topic.always_visible || interviews[topic.name].length > 0
+      (topic) =>
+        topic.always_visible || interviews[topic.name.toLowerCase()].length > 0
     );
 
   return (
@@ -28,7 +29,7 @@ const TopicsSection = async ({ path, interviews, isError }) => {
             <TopicCard
               key={topic.codes[0]}
               topic={topic}
-              interviews={interviews[topic.name] || []}
+              interviews={interviews[topic.name.toLowerCase()] || []}
               path={path}
               serverUrl={serverUrl}
               index={index}

src/app/forms/page.tsx

@@ -50,11 +50,16 @@ export default async function Page() {
 
   return (
     <div className="container">
-      <div>
-        {forms.map((form) => (
-          <InteractiveForm {...form} key={form.id} />
-        ))}
-      </div>
+      <h1 className="form-heading">All Forms</h1>
+      {forms.map((form, index) => (
+        <InteractiveForm
+          key={index}
+          title={form.title}
+          metadata={form.metadata}
+          link={form.link}
+          serverUrl={form.serverUrl}
+        />
+      ))}
     </div>
   );
 }

src/app/globals.css

@@ -175,6 +175,37 @@ footer {
   margin-top: 10em;
 }
 
+.form-heading {
+  text-transform: capitalize;
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.form-subheading {
+  margin-top: 1rem;
+  color: #002e60;
+}
+
+.form-content {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.form-text-section {
+  max-width: 70%;
+}
+.form-button-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.form-start-button {
+  margin: 2rem;
+  background-color: #002e60;
+  border-color: #002e60;
+}
+
 @font-face {
   font-family: 'Inter';
   src: url('/fonts/Inter-Bold.ttf') format('truetype');
@@ -196,6 +227,19 @@ body {
   font-family: 'Inter';
 }
 
+@media (max-width: 768px) {
+  .form-content {
+    flex-direction: column;
+    max-width: 100%;
+  }
+  .form-text-section {
+    max-width: 100%;
+  }
+  .form-button-section {
+    width: 100%;
+  }
+}
+
 @media (max-width: 990px) {
   .courtformsonline-navbar {
     background: rgb(2, 0, 36);