ConditionSearchAutocomplete, searchConditions library

app/dfda/components/ConditionSearchAutocomplete.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react'
+import { Input } from "@/components/ui/input"
+import { searchConditions } from "@/lib/clinicaltables"
+
+interface ConditionSearchAutocompleteProps {
+  onConditionSelect: (condition: string) => void
+  placeholder?: string
+}
+
+export default function ConditionSearchAutocomplete({ onConditionSelect, placeholder = "Enter medical condition" }: ConditionSearchAutocompleteProps) {
+  const [condition, setCondition] = useState('')
+  const [suggestions, setSuggestions] = useState<string[]>([])
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  useEffect(() => {
+    if (condition.length > 2) {
+      searchConditions(condition).then(extractedSuggestions => {
+        setSuggestions(extractedSuggestions)
+        setShowDropdown(true)
+      })
+    } else {
+      setSuggestions([])
+      setShowDropdown(false)
+    }
+  }, [condition])
+
+  const handleSuggestionClick = (suggestion: string) => {
+    setCondition(suggestion)
+    setShowDropdown(false)
+    onConditionSelect(suggestion)
+  }
+
+  return (
+    <div className="relative">
+      <Input
+        type="text"
+        placeholder={placeholder}
+        value={condition}
+        onChange={(e) => setCondition(e.target.value)}
+        className="w-full"
+      />
+      {showDropdown && suggestions.length > 0 && (
+        <ul className="absolute z-10 w-full border border-gray-300 mt-1 max-h-60 overflow-auto bg-background">
+          {suggestions.map((suggestion, index) => (
+            <li
+              key={index}
+              className="px-4 py-2 hover:bg-accent hover:text-accent-foreground cursor-pointer"
+              onClick={() => handleSuggestionClick(suggestion)}
+            >
+              {suggestion}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

app/dfda/components/FindTreatments.tsx

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
 import { Search } from 'lucide-react'
+import {searchConditions} from "@/lib/clinicaltables";
 
 export default function FindTreatments() {
     const [condition, setCondition] = useState('')
@@ -11,14 +12,17 @@ export default function FindTreatments() {
         e.preventDefault()
         console.log('Searching for:', condition)
         // Implement search functionality here
+        const results = searchConditions(condition)
     }
 
     return (
         <section>
             <Card>
                 <CardHeader>
                     <CardTitle>Find Treatments & Join Trials</CardTitle>
-                    <CardDescription>Search for treatments and clinical trials related to your condition</CardDescription>
+                    <CardDescription>
+                        Search for treatments and clinical trials related to your condition
+                    </CardDescription>
                 </CardHeader>
                 <CardContent>
                     <form onSubmit={handleConditionSearch} className="flex space-x-2">

app/dfda/components/HealthTracking.tsx → app/dfda/components/HealthTrackingLinkBoxes.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button"
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
 import { Clipboard, Database } from 'lucide-react'
 
-export default function HealthTracking() {
+export default function HealthTrackingLinkBoxes() {
     const handleStartLogging = () => {
         console.log('Start logging')
         // Implement logging functionality here
@@ -32,8 +32,12 @@ export default function HealthTracking() {
 
             <Card>
                 <CardHeader>
-                    <CardTitle>Import Your Health Data</CardTitle>
-                    <CardDescription>Securely import health data from various apps and devices</CardDescription>
+                    <CardTitle>
+                        Import Your Health Data
+                    </CardTitle>
+                    <CardDescription>
+                        Securely import health data from various apps and devices
+                    </CardDescription>
                 </CardHeader>
                 <CardContent>
                     <Button onClick={handleConnectData}>

app/dfda/components/TopTreatments.tsx

@@ -1,80 +1,28 @@
-import React, { useState, useEffect } from 'react'
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import React from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
-import { BarChart2 } from 'lucide-react'
+import ConditionSearchAutocomplete from './ConditionSearchAutocomplete'
 
 export default function TopTreatments() {
-    const [condition, setCondition] = useState('')
-    const [suggestions, setSuggestions] = useState<string[]>([])
-    const [showDropdown, setShowDropdown] = useState(false)
-
-    useEffect(() => {
-        if (condition.length > 2) {
-            fetch(`https://clinicaltables.nlm.nih.gov/api/conditions/v3/search?terms=${condition}&ef=name`)
-                .then(response => response.json())
-                .then(data => {
-                    // Extract the suggestions from the fourth element of the array
-                    const extractedSuggestions = data[3].map((item: string[]) => item[0]);
-                    setSuggestions(extractedSuggestions);
-                    setShowDropdown(true);
-                })
-        } else {
-            setSuggestions([])
-            setShowDropdown(false)
-        }
-    }, [condition])
-
-    const handleViewRankings = (e: React.FormEvent, selectedCondition?: string) => {
-        e.preventDefault()
-        const conditionToUse = selectedCondition || condition
-        console.log('Viewing rankings for:', conditionToUse)
+    const handleViewRankings = (selectedCondition: string) => {
+        console.log('Viewing rankings for:', selectedCondition)
         // Implement rankings view functionality here
     }
 
-    const handleSuggestionClick = (suggestion: string) => {
-        setCondition(suggestion)
-        setShowDropdown(false)
-        handleViewRankings({ preventDefault: () => {} } as React.FormEvent<HTMLFormElement>, suggestion)
-    }
-
     return (
         <section>
             <Card>
                 <CardHeader>
                     <CardTitle>See Top Treatments</CardTitle>
                     <CardDescription>
-                        View a ranked list of the most effective treatments for a your condition
+                        View a ranked list of the most effective treatments for your condition
                     </CardDescription>
                 </CardHeader>
                 <CardContent>
-                    <form onSubmit={(e) => handleViewRankings(e)} className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
-                        <div className="relative flex-grow">
-                            <Input
-                                type="text"
-                                placeholder="Enter medical condition"
-                                value={condition}
-                                onChange={(e) => setCondition(e.target.value)}
-                                className="w-full"
-                            />
-                            {showDropdown && suggestions.length > 0 && (
-                                <ul className="absolute z-10 w-full border border-gray-300 mt-1 max-h-60 overflow-auto bg-background">
-                                    {suggestions.map((suggestion, index) => (
-                                        <li
-                                            key={index}
-                                            className="px-4 py-2 hover:bg-accent hover:text-accent-foreground cursor-pointer"
-                                            onClick={() => handleSuggestionClick(suggestion)}
-                                        >
-                                            {suggestion}
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
+                    <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+                        <div className="flex-grow">
+                            <ConditionSearchAutocomplete onConditionSelect={handleViewRankings} />
                         </div>
-                        <Button type="submit" className="w-full sm:w-auto">
-                            <BarChart2 className="mr-2 h-4 w-4" /> View Rankings
-                        </Button>
-                    </form>
+                    </div>
                 </CardContent>
             </Card>
         </section>

app/dfda/page.tsx

@@ -1,17 +1,17 @@
 "use client"
 import React from 'react'
 import FindTreatments from './components/FindTreatments'
-import HealthTracking from './components/HealthTracking'
+import HealthTrackingLinkBoxes from './components/HealthTrackingLinkBoxes'
 import CostBenefitAnalysis from './components/CostBenefitAnalysis'
 import TopTreatments from './components/TopTreatments'
 
 export default function DFDAPage() {
     return (
         <div className="container mx-auto px-4 py-8 space-y-8">
-                <FindTreatments />
-                <HealthTracking />
-                <CostBenefitAnalysis />
-                <TopTreatments />
+            <FindTreatments />
+            <HealthTrackingLinkBoxes />
+            <CostBenefitAnalysis />
+            <TopTreatments />
         </div>
     )
 }