topic cards adjusted

next.config.js

@@ -4,20 +4,11 @@ const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig = {
   output: 'export',
-  basePath: isProd ? '/courtformsonline.org' : '',
-  assetPrefix: isProd ? '/courtformsonline.org' : '',
+  // basePath: isProd ? '/courtformsonline.org' : '',
+  // assetPrefix: isProd ? '/courtformsonline.org' : '',
   images: {
     unoptimized: true,
   },
-  async rewrites() {
-    return [
-      {
-        // This will match anything after /api/ and proxy it to your backend server
-        source: '/api/:path*', // Matches all API requests
-        destination: 'https://apps.suffolklitlab.org/:path*', // Proxy to Backend, maintaining the path and query
-      },
-    ];
-  },
 };
 
 module.exports = nextConfig;

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next",
     "build": "next build",
-    "start": "next start",
+    "start": "serve out",
     "lint": "next lint",
     "format": "prettier --write .",
     "test:format": "prettier --check 'src/**/*.js'"
@@ -29,6 +29,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^5.0.1",
     "reactstrap": "^9.1.9",
+    "serve": "^14.2.3",
     "swr": "^2.2.5"
   },
   "devDependencies": {

src/app/components/TopicCard.tsx

@@ -6,14 +6,25 @@ interface TopicCardProps {
     long_name: string;
     icon: string;
   };
-  interviews: any;
+  interviews: any[];
 }
 
-const FontAwesomeIcon: React.FC<IconProps> = ({ iconName, className = '' }) => {
-  return <i className={`fas fa-${iconName} ${className}`}></i>;
+interface IconProps {
+  iconName: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const FontAwesomeIcon = ({ iconName, className = '' }: IconProps) => {
+  return <i className={`fas fa-${iconName} ${className}`} style={{ minWidth: '40px', minHeight: '40px' }}></i>;
 };
 
-const TopicCard = ({ topic, interviews }) => {
+const TopicCard = ({ topic, interviews }: TopicCardProps) => {
+
+  // Display the first 3 interviews, and show a final tag with how many remaining interviews are not shown
+  const displayInterviews = interviews.slice(0, 3);
+  const extraCount = interviews.length > 3 ? interviews.length - 3 : 0;
+
   return (
     <div className="col-lg-4">
       <Link
@@ -30,15 +41,12 @@ const TopicCard = ({ topic, interviews }) => {
             <h5 className="card-title ms-3">{topic.long_name}</h5>
           </div>
           <div className="card-body">
-            {interviews.length > 0 ? (
-              interviews.map((interview, index) => (
-                <span key={index} className="form-tag">
-                  {interview.metadata.title}
-                </span>
-              ))
-            ) : (
-              <p>No interviews available.</p>
-            )}
+            {displayInterviews.map((interview, index) => (
+              <span key={index} className="form-tag">
+                {interview.metadata.title}
+              </span>
+            ))}
+            {extraCount > 0 && <span className="form-tag">+{extraCount}</span>}
           </div>
         </div>
       </Link>

src/config/topics.config.ts

@@ -13,31 +13,31 @@ export const legalTopics: Topic[] = [
     name: 'Housing',
     long_name: 'Housing',
     icon: 'house',
-    always_visible: true,
+    always_visible: false,
     priority: 100,
   },
   {
     codes: ['FA-00-00-00-00'],
     name: 'Family',
     long_name: 'Family and Safety',
     icon: 'people-roof',
-    always_visible: true,
+    always_visible: false,
     priority: 90,
   },
   {
     codes: ['MO-00-00-00-00'],
     name: 'Consumer',
     long_name: 'Money, Debt and Consumer Issues',
     icon: 'money-bill-wave',
-    always_visible: true,
+    always_visible: false,
     priority: 80,
   },
   {
     codes: ['BE-00-00-00-00'],
     name: 'Benefits',
     long_name: 'Public Benefits',
     icon: 'hand-holding-dollar',
-    always_visible: true,
+    always_visible: false,
     priority: 70,
   },
   {
@@ -53,7 +53,7 @@ export const legalTopics: Topic[] = [
     name: 'Courts',
     long_name: 'Court and Hearings',
     icon: 'gavel',
-    always_visible: true,
+    always_visible: false,
     priority: 1,
   },
   {
@@ -109,7 +109,7 @@ export const legalTopics: Topic[] = [
     name: 'Health',
     long_name: 'Health',
     icon: 'user-doctor',
-    always_visible: true,
+    always_visible: false,
     priority: 50,
   },
   {
@@ -165,15 +165,15 @@ export const legalTopics: Topic[] = [
     name: 'Employment',
     long_name: 'Employment',
     icon: 'briefcase',
-    always_visible: true,
+    always_visible: false,
     priority: 60,
   },
   {
     codes: ['CO-07-02-00-00'],
     name: 'Appeals',
     long_name: 'Appeals',
     icon: 'table-list',
-    always_visible: true,
+    always_visible: false,
     priority: 10,
   },
   {

src/data/fetchInterviewData.ts

@@ -7,7 +7,6 @@ import { legalTopics } from '../config/topics.config';
 export const fetcher = (url) => fetch(url).then((res) => res.json());
 
 export const useInterviews = () => {
-  // This can be modified to grab a different url from formsources based on subdomain or route.
   const serverUrl = formSources.docassembleServers[0].url;
   const url = new URL(`${serverUrl}/list`);
   url.search = 'json=1';
@@ -16,16 +15,15 @@ export const useInterviews = () => {
 
   const interviewsByTopic = { Other: [] };
 
-  //  Match returned interview data to corresponding topic from topics.config.ts
   if (data && data.interviews) {
-    data.interviews.forEach((interview) => {
+    data.interviews.forEach(interview => {
       let assigned = false;
-      const tags = interview.tags || [];
-      if (tags.length === 0) {
-        interviewsByTopic['Other'].push(interview);
-      } else {
-        tags.forEach((tag) => {
-          const topic = legalTopics.find((t) => t.codes.includes(tag));
+
+      // Prioritize 'LIST_topics' if it exists
+      const listTopics = interview.metadata?.LIST_topics || [];
+      if (listTopics.length > 0) {
+        listTopics.forEach(topicCode => {
+          const topic = legalTopics.find(t => t.codes.includes(topicCode));
           if (topic) {
             if (!interviewsByTopic[topic.name]) {
               interviewsByTopic[topic.name] = [];
@@ -34,9 +32,26 @@ export const useInterviews = () => {
             assigned = true;
           }
         });
-        if (!assigned) {
-          interviewsByTopic['Other'].push(interview);
-        }
+      }
+
+      // Use 'tags' if no 'LIST_topics' or if 'LIST_topics' didn't match any topic
+      if (!assigned) {
+        const tags = interview.tags || [];
+        tags.forEach(tag => {
+          const topic = legalTopics.find(t => t.codes.includes(tag));
+          if (topic) {
+            if (!interviewsByTopic[topic.name]) {
+              interviewsByTopic[topic.name] = [];
+            }
+            interviewsByTopic[topic.name].push(interview);
+            assigned = true;
+          }
+        });
+      }
+
+      // If no topics were assigned, place in 'Other'
+      if (!assigned) {
+        interviewsByTopic['Other'].push(interview);
       }
     });
   }

tsconfig.json

@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "module": "esnext",