From a463bf6ecddf391cde1409bce213de3458136d8a Mon Sep 17 00:00:00 2001 From: Dhruvan Ganadhandayuthapani Date: Wed, 11 Sep 2024 16:19:19 +0200 Subject: [PATCH] Massive frontend updates --- frontend/src/app/Navbar.tsx | 239 +++++++++++++++--- frontend/src/app/globals.css | 6 +- frontend/src/app/indicators/page.tsx | 4 +- frontend/src/app/layout.tsx | 6 +- frontend/src/app/{ => liquidity}/DataPlot.tsx | 0 frontend/src/app/liquidity/page.tsx | 170 +++++++++++++ frontend/src/app/page.tsx | 171 +------------ 7 files changed, 392 insertions(+), 204 deletions(-) rename frontend/src/app/{ => liquidity}/DataPlot.tsx (100%) create mode 100644 frontend/src/app/liquidity/page.tsx diff --git a/frontend/src/app/Navbar.tsx b/frontend/src/app/Navbar.tsx index 16aea29..c4d9752 100644 --- a/frontend/src/app/Navbar.tsx +++ b/frontend/src/app/Navbar.tsx @@ -1,42 +1,221 @@ -import React from 'react'; +'use client'; + +import React, { useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; -import IndicatorDropdown from './IndicatorDropdown'; -import DataSourceDropdown from './DataSourceDropdown'; + +interface Indicator { + name: string; + url_name: string; + human_name: string; +} + +interface Category { + name: string; + id: number; +} + +interface CategoryWithIndicators { + category: Category; + indicators: Indicator[]; +} + +interface DataSource { + url: string; + name: string; + description: string; +} export default function Navbar() { + // Handle dropdowns logic + const [isIndicatorDropdownOpen, setIsIndicatorDropdownOpen] = useState(false); + const [isDataSourceDropdownOpen, setIsDataSourceDropdownOpen] = useState(false); + + const handleIndicatorMouseEnter = () => setIsIndicatorDropdownOpen(true); + const handleIndicatorMouseLeave = (e: React.MouseEvent) => { + const relatedTarget = e.relatedTarget as Element; + if (!relatedTarget || !(relatedTarget instanceof Element) || !relatedTarget.closest('.indicator-dropdown-area')) { + setIsIndicatorDropdownOpen(false); + } + }; + + const handleDataSourceMouseEnter = () => setIsDataSourceDropdownOpen(true); + const handleDataSourceMouseLeave = (e: React.MouseEvent) => { + const relatedTarget = e.relatedTarget as Element; + if (!relatedTarget || !(relatedTarget instanceof Element) || !relatedTarget.closest('.datasource-dropdown-area')) { + setIsDataSourceDropdownOpen(false); + } + }; + + // Fetch indicators data + const [indicators, setIndicators] = useState([]); + const [indicatorsIsLoading, setIndicatorsIsLoading] = useState(true); + + useEffect(() => { + const fetchCategories = async () => { + try { + const response = await fetch('/api/indicators/categories_with_indicators'); + if (!response.ok) { + throw new Error('Failed to fetch indicators'); + } + const data = await response.json(); + setIndicators(data); + } catch (error) { + console.error('Error fetching indicators:', error); + } finally { + setIndicatorsIsLoading(false); + } + } + + fetchCategories(); + }, []); + + // Fetch data sources data + const [dataSources, setDataSources] = useState([]); + const [dataSourcesIsLoading, setDataSourcesIsLoading] = useState(true); + + useEffect(() => { + const fetchCategories = async () => { + try { + const response = await fetch('/api/indicators/datasource'); + if (!response.ok) { + throw new Error('Failed to fetch data sources'); + } + const data = await response.json(); + setDataSources(data); + } catch (error) { + console.error('Error fetching indicators:', error); + } finally { + setDataSourcesIsLoading(false); + } + } + + fetchCategories(); + }, []); + return ( -
-