From a59f0fca116dffcc65f0bfd5861fee421e89659d Mon Sep 17 00:00:00 2001
From: jtmst <josh.troy.mills@gmail.com>
Date: Thu, 6 Jun 2024 11:31:49 -0400
Subject: [PATCH] spot display working

---
 src/app/components/Footer.tsx               |  2 +-
 src/app/components/HeroSection.tsx          | 20 ++++++--
 src/app/components/ShowAllToggle.tsx        | 14 +++---
 src/app/components/SpotResultsContainer.tsx | 56 +++++++++++++--------
 src/app/components/TopicCard.tsx            |  5 +-
 src/app/components/TopicsSection.tsx        |  2 +-
 src/app/globals.css                         | 12 ++++-
 src/app/page.tsx                            |  6 ++-
 8 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
index e1478b6..1ea6106 100644
--- a/src/app/components/Footer.tsx
+++ b/src/app/components/Footer.tsx
@@ -10,7 +10,7 @@ export default function Footer() {
           <div className="col">
             <a href="https://suffolk.edu">
               <Image
-                src={`${prefix}/suffolk_law.png`}
+                src="suffolk_law.png"
                 alt="Suffolk University Law School"
                 className="img-fluid mb-2 suffolk-logo"
                 width={497}
diff --git a/src/app/components/HeroSection.tsx b/src/app/components/HeroSection.tsx
index 52506d3..8c43060 100644
--- a/src/app/components/HeroSection.tsx
+++ b/src/app/components/HeroSection.tsx
@@ -4,7 +4,7 @@ import Button from 'react-bootstrap/Button';
 import SpotResultsContainer from './SpotResultsContainer';
 import { fetchSpotData } from '../../data/fetchSpotData';
 
-const HeroSection = () => {
+const HeroSection = ({ path, interviews, isError }) => {
   const [text, setText] = useState('');
   const [saveData, setSaveData] = useState(false);
   const [results, setResults] = useState(null);
@@ -24,6 +24,16 @@ const HeroSection = () => {
       const fetchedResults = await fetchSpotData(data);
       setResults(fetchedResults);
       setError('');
+      // Manage display of topic cards when spot search is used. dom manipulation is used to keep Page components server components
+      const topicCards = document.querySelectorAll('.topic-card-parent');
+      console.log(topicCards);
+      topicCards.forEach((card) => {
+        card.classList.add('hidden');
+      });
+      const showAllButton = document.querySelector('.show-all-toggle');
+      if (showAllButton) {
+        showAllButton.classList.remove('hidden');
+      }
     } catch (e) {
       setError(e.message);
       setResults(null);
@@ -69,11 +79,15 @@ const HeroSection = () => {
                 Find help
               </Button>
             </div>
-            {error && <p className="text-danger">{error}</p>}
+            {error && (
+              <p className="text-danger">Error. Please try again later.</p>
+            )}
           </div>
         </div>
       </div>
-      {results && <SpotResultsContainer data={results} />}
+      {results && (
+        <SpotResultsContainer data={results} interviews={interviews} />
+      )}
     </section>
   );
 };
diff --git a/src/app/components/ShowAllToggle.tsx b/src/app/components/ShowAllToggle.tsx
index d818adc..2dfa21a 100644
--- a/src/app/components/ShowAllToggle.tsx
+++ b/src/app/components/ShowAllToggle.tsx
@@ -1,6 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { BsChevronRight } from 'react-icons/bs';
+import Button from 'react-bootstrap/Button';
 
 const ShowAllToggle = () => {
   const [showAll, setShowAll] = useState(false);
@@ -11,10 +13,10 @@ const ShowAllToggle = () => {
     ) as NodeListOf<HTMLElement>;
     setShowAll(!showAll);
     topics.forEach((topic, index) => {
-      if (index > 8) {
-        if (topic.style.display === 'none' || !topic.style.display) {
-          topic.style.display = 'block';
-        } else {
+      if (topic.style.display === 'none' || !topic.style.display) {
+        topic.style.display = 'block';
+      } else {
+        if (index > 8) {
           topic.style.display = 'none';
         }
       }
@@ -22,9 +24,9 @@ const ShowAllToggle = () => {
   };
 
   return (
-    <button className={'show-all-toggle'} onClick={handleToggle}>
+    <Button className={'show-all-toggle'} onClick={handleToggle}>
       {showAll ? 'Hide extra categories' : 'Show all categories'}
-    </button>
+    </Button>
   );
 };
 
diff --git a/src/app/components/SpotResultsContainer.tsx b/src/app/components/SpotResultsContainer.tsx
index d5374f1..d9101f5 100644
--- a/src/app/components/SpotResultsContainer.tsx
+++ b/src/app/components/SpotResultsContainer.tsx
@@ -1,33 +1,49 @@
 import React from 'react';
 import { legalTopics } from '../../config/topics.config';
+import { formSources } from '../../config/formSources.config';
+import TopicCard from './TopicCard';
 
-const SpotResultsCard = ({ data }) => {
+const SpotResultsContainer = ({ data, interviews, path }) => {
   if (!data || !data.labels) {
     return <p>No matching topics found.</p>;
   }
 
-  const sortedLabels = data.labels
-    .sort((a, b) => b.pred - a.pred)
-    .map((label) => {
-      const topic = legalTopics.find((t) => t.codes.includes(label.id));
-      return topic ? topic.long_name : null;
-    })
-    .filter(Boolean);
+  // Find the server URL based on the path
+  const server =
+    formSources.docassembleServers.find((server) => server.path === path) ||
+    formSources.docassembleServers[0];
+  const serverUrl = server.url;
+
+  // Sort and filter topics based on the SPOT labels
+  const sortedTopics = data.labels
+    .map((label) => ({
+      ...label,
+      topic: legalTopics.find((t) => t.codes.includes(label.id)),
+    }))
+    .filter(({ topic }) => topic) // Ensure the topic exists
+    .sort((a, b) => b.pred - a.pred) // Sort by confidence score
+    .map(({ topic }) => topic); // Extract sorted topics
 
   return (
-    <div>
-      <h2>It looks like you may be looking for help with...</h2>
-      {sortedLabels.length > 0 ? (
-        <ul>
-          {sortedLabels.map((name, index) => (
-            <li key={index}>{name}</li>
+    <section id="topics">
+      <div className="container">
+        <h2>It looks like you may be looking for help with...</h2>
+        <div className="row row-cols-1 row-cols-md-3 g-5 card-container">
+          {sortedTopics.map((topic, index) => (
+            <TopicCard
+              key={topic.codes[0]}
+              topic={topic}
+              interviews={interviews[topic.name] || []}
+              path={'ma'}
+              serverUrl={serverUrl}
+              index={index}
+              isSpot={true}
+            />
           ))}
-        </ul>
-      ) : (
-        <p>No relevant topics found based on your query.</p>
-      )}
-    </div>
+        </div>
+      </div>
+    </section>
   );
 };
 
-export default SpotResultsCard;
+export default SpotResultsContainer;
diff --git a/src/app/components/TopicCard.tsx b/src/app/components/TopicCard.tsx
index 0a3e3c6..87565c9 100644
--- a/src/app/components/TopicCard.tsx
+++ b/src/app/components/TopicCard.tsx
@@ -35,6 +35,7 @@ const TopicCard = ({
   index,
   serverUrl,
   path,
+  isSpot = false,
 }: TopicCardProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const visibilityClass = index > 8 ? 'hidden' : '';
@@ -42,7 +43,7 @@ const TopicCard = ({
     ? interviews.slice(0, Math.min(10, interviews.length))
     : interviews.slice(0, 3);
   const remainingCount = interviews.length > 10 ? interviews.length - 10 : 0;
-
+  const cardClassName = isSpot ? 'spot-topic-card-parent' : 'topic-card-parent';
   const toggleExpand = (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>
   ) => {
@@ -56,7 +57,7 @@ const TopicCard = ({
 
   return (
     <div
-      className={`col-lg-4 topic-card-parent ${visibilityClass}`}
+      className={`col-lg-4 ${cardClassName} ${visibilityClass}`}
       key={topic.codes[0]}
     >
       <Link
diff --git a/src/app/components/TopicsSection.tsx b/src/app/components/TopicsSection.tsx
index 522d83f..d897d25 100644
--- a/src/app/components/TopicsSection.tsx
+++ b/src/app/components/TopicsSection.tsx
@@ -23,6 +23,7 @@ const TopicsSection = async ({ path, interviews, isError }) => {
     <section id="topics">
       <div className="container">
         <h2>Browse court forms by category</h2>
+        {filteredTopics.length > 9 && <ShowAllToggle />}
         <div className="row row-cols-1 row-cols-md-3 g-5 card-container">
           {filteredTopics.map((topic, index) => (
             <TopicCard
@@ -35,7 +36,6 @@ const TopicsSection = async ({ path, interviews, isError }) => {
             />
           ))}
         </div>
-        {filteredTopics.length > 9 && <ShowAllToggle />}
       </div>
     </section>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index 6d45943..b626d2c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -14,6 +14,11 @@
   min-height: 8em;
 }
 
+.hero-button {
+  background: #002e60;
+  border: none;
+}
+
 #how-it-works-section {
   padding: 5em 0 5em 0;
   background-color: #3e7d9a54;
@@ -107,6 +112,10 @@ footer {
   display: none;
 }
 
+.hidden-topics {
+  display: none;
+}
+
 .visible {
   display: block;
 }
@@ -125,9 +134,8 @@ footer {
 
 .show-all-toggle {
   cursor: pointer;
-  font-size: 1.2em;
   border: none;
-  background: none;
+  background: #002e60;
   margin-top: 10px;
 }
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a8ab847..f5ba74b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,11 @@ export default async function Page() {
 
   return (
     <div>
-      <HeroSection />
+      <HeroSection
+        path={'ma'}
+        interviews={interviewsByTopic}
+        isError={isError}
+      />
       <HowItWorksSection />
       <TopicsSection
         path={'ma'}