started replace the table with a grid

leandrodalbo · Dec 30, 2024 · 86c0b6f · 86c0b6f
1 parent a023a07
commit 86c0b6f
Show file tree

Hide file tree

Showing 10 changed files with 944 additions and 162 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,11 +12,14 @@
     "test": "vitest"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "moment": "^2.30.1",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -26,6 +29,7 @@
     "@types/jest": "^29.5.14",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/tailwindcss": "^3.0.11",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",

diff --git a/src/components/TradingSignals.tsx b/src/components/TradingSignals.tsx
@@ -1,66 +1,64 @@
 import "./tradingsignals.css";
 
-import { FaXTwitter } from "react-icons/fa6";
-import { FaGithub } from "react-icons/fa";
-import { FaLinkedin } from "react-icons/fa";
+import {FaXTwitter} from "react-icons/fa6";
+import {FaGithub} from "react-icons/fa";
+import {FaLinkedin} from "react-icons/fa";
 
-import { Head } from "./head/Head";
-import { Row } from "./row/Row";
-import { Signal } from "../types/types";
-import { useCallback, useEffect, useState } from "react";
-import { Controls } from "./controls/Controls";
+import {Head} from "./head/Head";
+import {Row} from "./row/Row";
+import {Signal} from "../types/types";
+import {useCallback, useEffect, useState} from "react";
+import {Controls} from "./controls/Controls";
 
 import GetSignalsService from "../service/GetSignals";
+import MainGrid from "./main-grid/MainGrid";
 
 export interface TradingSignalsProps {
-  signalsService: GetSignalsService;
+    signalsService: GetSignalsService;
 }
 
-const TradingSignals = ({ signalsService }: TradingSignalsProps) => {
-  const [rows, setRows] = useState([] as Signal[]);
-  const [byDate, setSortByDate] = useState(false);
-  const [bySymbol, setSortBySymbol] = useState(false);
+const TradingSignals = ({signalsService} : TradingSignalsProps) => {
+    const [rows, setRows] = useState([] as Signal[]);
+    const [byDate, setSortByDate] = useState(false);
+    const [bySymbol, setSortBySymbol] = useState(false);
 
-  const refreshSignals = async (
-    timeframe?: string,
-    strength?: string,
-    buysell?: string
-  ) => {
-    const response = await signalsService.signals(timeframe, strength, buysell);
-    setRows(response.data);
-  };
+    const refreshSignals = async (timeframe? : string, strength? : string, buysell? : string) => {
+        const response = await signalsService.signals(timeframe, strength, buysell);
+        setRows(response.data);
+    };
 
-  useEffect(() => {
-    refreshSignals();
-  }, []);
+    useEffect(() => {
+        refreshSignals();
+    }, []);
 
-  const sortByDate = useCallback(() => {
-    if (byDate) {
-      setSortByDate(false);
-      setRows(rows.sort((a, b) => a.signalTime - b.signalTime));
-    } else {
-      setSortByDate(true);
-      setRows(rows.sort((a, b) => b.signalTime - a.signalTime));
-    }
-  }, [byDate, rows]);
+    const sortByDate = useCallback(() => {
+        if (byDate) {
+            setSortByDate(false);
+            setRows(rows.sort((a, b) => a.signalTime - b.signalTime));
+        } else {
+            setSortByDate(true);
+            setRows(rows.sort((a, b) => b.signalTime - a.signalTime));
+        }
+    }, [byDate, rows]);
 
-  const sortBySymbol = useCallback(() => {
-    if (bySymbol) {
-      setSortBySymbol(false);
-      setRows(rows.sort((a, b) => a.symbol.localeCompare(b.symbol)));
-    } else {
-      setSortBySymbol(true);
-      setRows(rows.sort((a, b) => b.symbol.localeCompare(a.symbol)));
-    }
-  }, [bySymbol, rows]);
+    const sortBySymbol = useCallback(() => {
+        if (bySymbol) {
+            setSortBySymbol(false);
+            setRows(rows.sort((a, b) => a.symbol.localeCompare(b.symbol)));
+        } else {
+            setSortBySymbol(true);
+            setRows(rows.sort((a, b) => b.symbol.localeCompare(a.symbol)));
+        }
+    }, [bySymbol, rows]);
 
-  return (
-    <>
-      <header data-testid="header">
-        <Controls refreshSignals={refreshSignals} />
-      </header>
-      <main data-testid="main">
-        <table id="#table" data-testid="tradingsignals">
+    return (
+        <>
+            <header data-testid="header">
+                <Controls refreshSignals={refreshSignals}/>
+            </header>
+            <div className="min-h-screen bg-[var(--color-primary)] flex items-center justify-center" data-testid="main">
+
+                <MainGrid data={rows}/> {/* <table id="#table" data-testid="tradingsignals">
           <thead>
             <Head sortByDate={sortByDate} sortBySymbol={sortBySymbol} />
           </thead>
@@ -69,47 +67,36 @@ const TradingSignals = ({ signalsService }: TradingSignalsProps) => {
               <Row key={it.symbol} signal={it} />
             ))}
           </tbody>
-        </table>
-      </main>
-      <footer className="botom" data-testid="footer">
-        <div className="contact">
-          <a
-            href="https://jungle-logic.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            JungleLogic Lab
-          </a>
-        </div>
-        <div className="container footersocials">
-          <a
-            key={"twiter"}
-            href={"https://x.com/JunglelogicLab"}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FaXTwitter />
-          </a>
-          <a
-            key={"github"}
-            href={"https://github.com/leandrodalbo"}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FaGithub />
-          </a>
-          <a
-            key={"linkedin"}
-            href={"https://www.linkedin.com/in/leandrodlb/"}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <FaLinkedin />
-          </a>
-        </div>
-      </footer>
-    </>
-  );
+        </table> */} </div>
+            <footer className="botom" data-testid="footer">
+                <div className="contact">
+                    <a href="https://jungle-logic.com/" target="_blank" rel="noopener noreferrer">
+                        JungleLogic Lab
+                    </a>
+                </div>
+                <div className="container footersocials">
+                    <a key={"twiter"}
+                        href={"https://x.com/JunglelogicLab"}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        <FaXTwitter/>
+                    </a>
+                    <a key={"github"}
+                        href={"https://github.com/leandrodalbo"}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        <FaGithub/>
+                    </a>
+                    <a key={"linkedin"}
+                        href={"https://www.linkedin.com/in/leandrodlb/"}
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        <FaLinkedin/>
+                    </a>
+                </div>
+            </footer>
+        </>
+    );
 };
 
 export default TradingSignals;
diff --git a/src/components/main-grid/MainGrid.tsx b/src/components/main-grid/MainGrid.tsx
@@ -0,0 +1,24 @@
+import {Signal} from "../../types/types";
+import SignalCard from "../signal-card/SignalCard";
+
+export interface MainGridProps {
+    data: Signal[]
+}
+
+const MainGrid = ({data} : MainGridProps) => {
+    return (
+        <div className="overflow-x-auto">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 p-6">
+                {
+                data.map(it => <SignalCard key={
+                        it.symbol
+                    }
+                    data={it}/>)
+            } </div>
+        </div>
+    )
+
+
+}
+
+export default MainGrid;
diff --git a/src/components/signal-card/SignalCard.tsx b/src/components/signal-card/SignalCard.tsx
@@ -0,0 +1,26 @@
+import {Signal} from "../../types/types";
+
+export interface SignalCardProps {
+    data: Signal
+}
+
+const SignalCard = ({data} : SignalCardProps) => {
+    return (
+
+
+        <div className="bg-[var(--color-secondary)] text-[var(--primary-text)] rounded-xl p-6 shadow-lg hover:shadow-xl transition hover:bg-[var(--hover-bg)] hover:text-[var(--hover-text)]">
+            <h2 className="font-bold text-2xl mb-4 text-[var(--highlight)]">
+                {
+                data.symbol
+            } </h2>
+            <p className="text-lg mb-2">
+                <strong className="text-[var(--secondary-text)]">Time:</strong>
+                {" "}
+                {
+                data.signalTime
+            } </p>
+        </div>
+    )
+}
+
+export default SignalCard;
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   margin: 0;
   padding: 0;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,12 +1,14 @@
 import "./index.css"
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import {StrictMode} from "react";
+import {createRoot} from "react-dom/client";
 import TradingSignals from "./components/TradingSignals.tsx";
 import GetSignalsService from "./service/GetSignals.ts";
 import axiosClient from "./ApiConf.ts";
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-      <TradingSignals  signalsService={new GetSignalsService(axiosClient)} />
-  </StrictMode>
+createRoot(document.getElementById("root")!).render (
+    <StrictMode>
+        <TradingSignals signalsService={
+            new GetSignalsService(axiosClient)
+        }/>
+    </StrictMode>
 );
diff --git a/src/service/GetSignals.ts b/src/service/GetSignals.ts
@@ -1,6 +1,7 @@
 import { AxiosInstance, AxiosResponse } from "axios";
 
 import { BuySell, Strength, TimeFrame } from "./../types/types";
+import { testdata } from "../../tests/data/testdata";
 
 enum TimeFramePath {
   H1 = "onehour",
@@ -20,7 +21,8 @@ class GetSignalsService {
     strength?: string,
     buysell?: string
   ): Promise<AxiosResponse> {
-    return this.axiosClient.get(this.buildPath(timeframe, strength, buysell));
+    return Promise.resolve({data:testdata} as AxiosResponse)
+    //this.axiosClient.get(this.buildPath(timeframe, strength, buysell));
   }
 
   private buildPath(

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,13 @@
+import { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,4 +3,7 @@ import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
+  css: {
+    postcss: './postcss.config.js'
+  },
 });