Skip to content

Commit

Permalink
spot display working
Browse files Browse the repository at this point in the history
  • Loading branch information
jtmst committed Jun 6, 2024
1 parent 1ffb6e8 commit a59f0fc
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 36 deletions.
2 changes: 1 addition & 1 deletion src/app/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
20 changes: 17 additions & 3 deletions src/app/components/HeroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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>
);
};
Expand Down
14 changes: 8 additions & 6 deletions src/app/components/ShowAllToggle.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -11,20 +13,20 @@ 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';
}
}
});
};

return (
<button className={'show-all-toggle'} onClick={handleToggle}>
<Button className={'show-all-toggle'} onClick={handleToggle}>
{showAll ? 'Hide extra categories' : 'Show all categories'}
</button>
</Button>
);
};

Expand Down
56 changes: 36 additions & 20 deletions src/app/components/SpotResultsContainer.tsx
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 3 additions & 2 deletions src/app/components/TopicCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,15 @@ const TopicCard = ({
index,
serverUrl,
path,
isSpot = false,
}: TopicCardProps) => {
const [isExpanded, setIsExpanded] = useState(false);
const visibilityClass = index > 8 ? 'hidden' : '';
const displayInterviews = isExpanded
? 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>
) => {
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/TopicsSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -35,7 +36,6 @@ const TopicsSection = async ({ path, interviews, isError }) => {
/>
))}
</div>
{filteredTopics.length > 9 && <ShowAllToggle />}
</div>
</section>
);
Expand Down
12 changes: 10 additions & 2 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -107,6 +112,10 @@ footer {
display: none;
}

.hidden-topics {
display: none;
}

.visible {
display: block;
}
Expand All @@ -125,9 +134,8 @@ footer {

.show-all-toggle {
cursor: pointer;
font-size: 1.2em;
border: none;
background: none;
background: #002e60;
margin-top: 10px;
}

Expand Down
6 changes: 5 additions & 1 deletion src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ export default async function Page() {

return (
<div>
<HeroSection />
<HeroSection
path={'ma'}
interviews={interviewsByTopic}
isError={isError}
/>
<HowItWorksSection />
<TopicsSection
path={'ma'}
Expand Down

0 comments on commit a59f0fc

Please sign in to comment.