adding arrow to move backwards on signal detail component

leandrodalbo · Jan 11, 2025 · 0650860 · 0650860
1 parent 6c0a228
commit 0650860
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/components/signal-card/SignalCard.tsx b/src/components/signal-card/SignalCard.tsx
@@ -15,7 +15,7 @@ const SignalCard = ({ data }: SignalCardProps) => {
                     data.symbol
                 } </h2>
             <p data-testid="cardtime" className="text-lg mb-2">
-                <strong className="text-[var(--secondary-text)]">Time:</strong>
+                <strong className="text-[var(--secondary-text)]">Time</strong>
                 {" "}
                 {
                     unixToDate(data.signalTime)

diff --git a/src/components/signal-detail/SignalDetail.test.tsx b/src/components/signal-detail/SignalDetail.test.tsx
@@ -11,14 +11,13 @@ describe("Signals Details", () => {
 
     render(<MemoryRouter initialEntries={[{ pathname: `/signal`, state: { signal } }]}><SignalDetail /></MemoryRouter>);
     expect(screen.getByTestId("symbol-detail")).toBeInTheDocument();
+    expect(screen.getByTestId("backward-link")).toBeInTheDocument();
     expect(screen.getByTestId("time-detail")).toBeInTheDocument();
     expect(screen.getByTestId("indicators")).toBeInTheDocument();
   });
 
   it("will render all the indicators", () => {
-
     render(<MemoryRouter initialEntries={[{ pathname: `/signal`, state: { signal } }]}><SignalDetail /></MemoryRouter>);
     expect(screen.getByTestId("indicators-grid")).toBeInTheDocument();
-
   });
 });
diff --git a/src/components/signal-detail/SignalDetail.tsx b/src/components/signal-detail/SignalDetail.tsx
@@ -2,6 +2,9 @@ import { useLocation } from "react-router-dom";
 import { Signal } from "../../types/types";
 import { BuySellItem } from "../buyselltem/BuySellItem";
 import { unixToDate } from "../../utils/utils";
+import { Link } from "react-router-dom";
+import { IoMdArrowRoundBack } from "react-icons/io";
+
 
 export const SignalDetail = () => {
     const location = useLocation();
@@ -13,8 +16,12 @@ export const SignalDetail = () => {
         <div className="min-h-screen text-primary-text p-8">
 
             <div className="bg-[var(--color-secondary)] p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
-                <h2 data-testid="symbol-detail" className="text-[var(--highlight)] text-3xl font-semibold mb-4">{signal.symbol} Signal Details</h2>
-
+                <div className="flex justify-between items-center">
+                    <h2 data-testid="symbol-detail" className="text-[var(--highlight)] text-3xl font-semibold mb-4">{signal.symbol} Signal Details</h2>
+                    <Link data-testid="backward-link" to="/">
+                        <IoMdArrowRoundBack className="text-[var(--primary-text)] text-2xl hover:text-opacity-80 cursor-pointer" />
+                    </Link>
+                </div>
                 <div data-testid="time-detail" className="grid grid-cols-1 md:grid-cols-1 gap-4  ">
                     <div>
                         <h3 className="text-[var(--highlight)] text-lg font-semibold text-primary-text">Signal Time</h3>

diff --git a/src/service/GetSignals.ts b/src/service/GetSignals.ts
@@ -1,5 +1,4 @@
 import { AxiosInstance, AxiosResponse } from "axios";
-
 import { BuySell, Strength, TimeFrame } from "./../types/types";
 
 enum TimeFramePath {