-
TrendFinder UI
-
- Sponsored by Firecrawl.dev 🔥
-
+
+
+
+
TrendFinder UI
+
+ Sponsored by Firecrawl.dev 🔥
+
+
+
- {message}
-
- )}
)
}
\ No newline at end of file
diff --git a/trendfinder-ui/src/components/settings-form.tsx b/trendfinder-ui/src/components/settings-form.tsx
new file mode 100644
index 0000000..3701a0c
--- /dev/null
+++ b/trendfinder-ui/src/components/settings-form.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import { useState, useEffect } from "react"
+import { Button } from "./button"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import { Input } from "./ui/input"
+
+
+interface XAccount {
+ id: number
+ username: string
+}
+
+interface Settings {
+ cronInterval: number
+}
+
+interface ApiKey {
+ service: string
+ key: string
+}
+
+export function SettingsForm() {
+ const [settings, setSettings] = useState
({ cronInterval: 15 })
+ const [xAccounts, setXAccounts] = useState([])
+ const [newAccount, setNewAccount] = useState('')
+ const [apiKeys, setApiKeys] = useState([])
+ const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+
+ // Fetch initial settings
+ useEffect(() => {
+ fetchSettings()
+ }, [])
+
+ const fetchSettings = async () => {
+ try {
+ const response = await fetch('http://localhost:3001/api/settings')
+ const data = await response.json()
+ setSettings(data.settings)
+ setXAccounts(data.xAccounts)
+ setApiKeys(data.apiKeys)
+ } catch (error) {
+ console.error('Failed to fetch settings:', error)
+ }
+ }
+
+ const handleAddAccount = async () => {
+ try {
+ const response = await fetch('http://localhost:3001/api/x-accounts', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ username: newAccount })
+ })
+ const data = await response.json()
+ setXAccounts([...xAccounts, data])
+ setNewAccount('')
+ } catch (error) {
+ console.error('Failed to add account:', error)
+ }
+ }
+
+ const handleRemoveAccount = async (id: number) => {
+ try {
+ await fetch(`http://localhost:3001/api/x-accounts/${id}`, {
+ method: 'DELETE'
+ })
+ setXAccounts(xAccounts.filter(account => account.id !== id))
+ } catch (error) {
+ console.error('Failed to remove account:', error)
+ }
+ }
+
+ const handleUpdateApiKey = async (service: string, key: string) => {
+ try {
+ const response = await fetch('http://localhost:3001/api/api-keys', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ service, key })
+ })
+ const data = await response.json()
+ setApiKeys(apiKeys.map(k => k.service === service ? data : k))
+ } catch (error) {
+ console.error('Failed to update API key:', error)
+ }
+ }
+
+ const handleUpdateSettings = async () => {
+ try {
+ setStatus('loading')
+ const response = await fetch('http://localhost:3001/api/settings', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(settings)
+ })
+ if (response.ok) {
+ setStatus('success')
+ } else {
+ throw new Error('Failed to update settings')
+ }
+ } catch (error) {
+ setStatus('error')
+ }
+ }
+
+ return (
+
+ {/* X Accounts Section */}
+
+
+ X Accounts to Monitor
+
+
+
+ setNewAccount(e.target.value)}
+ placeholder="@username"
+ />
+
+
+
+ {xAccounts.map(account => (
+
+ {account.username}
+
+
+ ))}
+
+
+ {/* API Keys Section */}
+
+
+ API Keys
+
+
+ {['together', 'x', 'firecrawl', 'slack'].map(service => (
+
+
+ k.service === service)?.key || ''}
+ onChange={(e) => handleUpdateApiKey(service, e.target.value)}
+ placeholder={`Enter ${service} API key`}
+ />
+
+ ))}
+
+
+
+ {/* Cron Settings Section */}
+
+
+ Check Interval
+
+
+
+ setSettings({ ...settings, cronInterval: Number(e.target.value) })}
+ />
+ minutes
+
+
+
+
+
{/* X Accounts Section */}
@@ -179,6 +203,32 @@ export function SettingsForm() {
+
+ {/* Test Cron Section */}
+
+
+ Test Run
+
+
+
+
+
+ {cronMessage && (
+
+ {cronMessage}
+
+ )}
+
TrendFinder UI
- Sponsored by Firecrawl.dev 🔥
+ Sponsored by Firecrawl.dev 🔥
diff --git a/trendfinder-ui/src/components/settings-form.tsx b/trendfinder-ui/src/components/settings-form.tsx
index 9dbc293..0541d05 100644
--- a/trendfinder-ui/src/components/settings-form.tsx
+++ b/trendfinder-ui/src/components/settings-form.tsx
@@ -131,14 +131,14 @@ export function SettingsForm() {
{/* X Accounts Section */}
- X Accounts to Monitor
+ X Accounts / Webpages to Monitor
setNewAccount(e.target.value)}
- placeholder="@username"
+ placeholder="@username or https://example.com/blog"
/>