Skip to content

Commit 50bee40

Browse files
BODMATBODMAT
committed
upd allCrypto with thunk, components styles
1 parent 354d695 commit 50bee40

7 files changed

Lines changed: 41 additions & 27 deletions

File tree

‎src/modules/AllCrypto/Coin.popup.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Graph } from "./Graph";
44
export function CoinPopup({ coin }: { coin: Coin }) {
55
return (
66
<div className="flex gap-5 flex-col">
7-
<div className="flex justify-between items-center p-2 rounded bg-[var(--color-card)] transitioned text-[var(--color-text)]">
7+
<div className="flex max-md:flex-col justify-between items-center p-2 rounded bg-[var(--color-card)] transitioned text-[var(--color-text)]">
88
<div className="flex gap-3 items-center">
99
<img src={coin.image} alt={coin.name} className="w-12 h-12" />
1010
<span className="font-bold text-xl">{coin.name}</span>

‎src/modules/AllCrypto/all-crypto.api.ts‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,19 @@ export const allCryptoApi = createApi({
3333
reducerPath: 'allCryptoApi',
3434
tagTypes: ["Coin"],
3535
baseQuery: fetchBaseQuery({ baseUrl: 'https://api.coingecko.com/api/v3/' }),
36+
refetchOnMountOrArgChange: true,
37+
refetchOnReconnect: true,
3638
endpoints: (builder) => ({
3739
getAllCoins: builder.query<Coin[], void>({
3840
query: () =>
3941
`coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=true`,
4042
transformResponse: (response: unknown) => z.array(coinSchema).parse(response),
41-
async onQueryStarted(_, { dispatch, queryFulfilled }) {
42-
try {
43-
const { data } = await queryFulfilled;
44-
dispatch(setIsAPILoading(true));
45-
dispatch(sincronizeAllCoins(data));
46-
} catch {
47-
console.error("error fetching coins");
48-
} finally {
49-
dispatch(setIsAPILoading(false));
50-
}
51-
},
5243
providesTags: [{ type: "Coin", id: "LIST" }],
5344
extraOptions: {
5445
retry: (failureCount: number) => {
5546
return failureCount < 3;
5647
}
57-
}
48+
},
5849
}),
5950
getCoin: builder.query<Coin, string>({
6051
query: (id) => `coins/${id}?sparkline=true`,

‎src/modules/AllCrypto/all-crypto.thunk.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { AppDispatch } from "../../store";
2+
import { allCryptoApi } from "./all-crypto.api";
3+
import { sincronizeAllCoins, setIsAPILoading } from "./all-crypto.slice";
4+
5+
export const fetchAllCoinsThunk = () => async (dispatch: AppDispatch) => {
6+
try {
7+
dispatch(setIsAPILoading(true));
8+
const result = await dispatch(
9+
allCryptoApi.endpoints.getAllCoins.initiate(undefined, {
10+
forceRefetch: true,
11+
subscriptionOptions: { pollingInterval: 60000, },
12+
})
13+
14+
).unwrap();
15+
dispatch(sincronizeAllCoins(result));
16+
} catch (e) {
17+
console.error("error fetching coins", e);
18+
} finally {
19+
dispatch(setIsAPILoading(false));
20+
}
21+
};

‎src/modules/App/App.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ import { FixedHeader } from "../FixedHeader/FixedHeader";
66
import { HomePage } from "../HomePage/HomePage";
77
import { AllCrypto } from "../AllCrypto/AllCrypto";
88
import { Wallet } from "../Wallet/Wallet";
9-
import { useGetAllCoinsQuery } from "../AllCrypto/all-crypto.api";
9+
import { fetchAllCoinsThunk } from "../AllCrypto/all-crypto.thunk";
10+
import { useEffect } from "react";
11+
import { useAppDispatch } from "../../store";
1012

1113
export function App() {
1214
useApplyTheme();
13-
useGetAllCoinsQuery(undefined, {
14-
refetchOnMountOrArgChange: true,
15-
refetchOnReconnect: true,
16-
pollingInterval: 60000,
17-
});
15+
16+
const dispatch = useAppDispatch();
17+
useEffect(() => {
18+
dispatch(fetchAllCoinsThunk());
19+
}, [dispatch]);
1820
return (
1921
<div className="relative">
2022
<div className="fontText relative transitioned flex flex-col justify-between max-w-full overflow-hidden">

‎src/modules/HomePage/HomePage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function HomePage() {
2424
variants={blockFromLeftAnimation}
2525
custom={index}
2626
className="transitioned relative mb-3 p-4 rounded-2xl bg-[var(--color-card)] text-white
27-
first:font-black first:text-3xl lg:first:w-fit
27+
first:font-black first:text-3xl
2828
shadow-[0_10px_30px_rgba(0,0,0,0.3)] hover:shadow-[0_15px_35px_rgba(0,0,0,0.4)]
2929
hover:scale-[1.02] transitioned
3030
backdrop-blur-md border border-white/10"
@@ -34,12 +34,12 @@ export function HomePage() {
3434
);
3535
})}
3636
<motion.button onClick={handleOnenPopup} custom={3} variants={blockFromLeftAnimation} className="transitioned relative p-4 rounded-2xl bg-[var-(--color-card)] text-white
37-
font-black text-2xl w-fit cursor-pointer border-3
37+
font-black text-2xl cursor-pointer border-3
3838
shadow-[0_10px_30px_rgba(0,0,0,0.3)] hover:shadow-[0_15px_35px_rgba(0,0,0,0.4)]
3939
hover:scale-[1.02] transitioned
4040
backdrop-blur-md border-white/30">{useTypeWriter(BTNDATA.short, 500)}</motion.button>
4141
</div>
42-
<motion.div variants={blockFromRightAnimation} className="">
42+
<motion.div variants={blockFromRightAnimation} className="w-full">
4343
<img className="w-full" src={NewsLetterSVG} alt="NewsLetterSVG" />
4444
</motion.div>
4545
</motion.div>

‎src/modules/Wallet/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function Header() {
55
<h1 className="fontTitle text-2xl">Wallet:</h1>
66
<h2 className="fontTitle text-2xl">$110000</h2>
77
</div>
8-
<div className="flex gap-5">
8+
<div className="flex gap-5 max-[420px]:flex-col">
99
<button onClick={() => console.log("add transaction modal")} className="max-[500px]:w-full flex justify-center items-center text-center px-9 py-2 bg-[var(--color-card)] cursor-pointer rounded transitioned hover:scale-105 text-[var:--color-text] border-[var:--color-text] border-2">Add transaction</button>
1010
<button onClick={() => console.log("view transaction modal")} className="max-[500px]:w-full flex justify-center items-center text-center px-9 py-2 bg-[var(--color-card)] cursor-pointer rounded transitioned hover:scale-105 text-[var:--color-text] border-[var:--color-text] border-2">View transactions</button>
1111
</div>

‎src/modules/Wallet/MyCoins.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,19 +115,19 @@ export function MyCoins() {
115115
/>
116116
</div>
117117
<div className="">
118-
<div className="grid items-center grid-cols-5 font-semibold border-b pb-2 text-sm text-gray-700 dark:text-gray-200">
118+
<div className="grid items-center grid-cols-5 max-[420px]:grid-cols-4 font-semibold border-b pb-2 text-sm text-gray-700 dark:text-gray-200 max-[420px]:text-[13px]">
119119
<div>Name</div>
120120
<div className="text-center">Quantity</div>
121121
<div className="text-center">Current Price</div>
122122
<div className="text-center">Buying Price</div>
123-
<div className="text-center">Date</div>
123+
<div className="text-center max-[420px]:hidden">Date</div>
124124
</div>
125125

126126
{sortedCoins.map((coin) => (
127127
<button
128128
onClick={() => console.log("coin modal to change")}
129129
key={coin.id}
130-
className="cursor-pointer grid grid-cols-5 items-center border-b py-2 text-sm hover:bg-gray-100/10 w-full"
130+
className="cursor-pointer grid grid-cols-5 max-[420px]:grid-cols-4 items-center border-b py-2 text-sm hover:bg-gray-100/10 w-full max-[420px]:text-[13px]"
131131
>
132132
<div className="flex items-center gap-2">
133133
<img src={coin.image} alt={coin.name} className="w-5 h-5" />
@@ -136,7 +136,7 @@ export function MyCoins() {
136136
<div>{coin.quantity}</div>
137137
<div>${coin.current_price}</div>
138138
<div>${coin.buying_price}</div>
139-
<div>{coin.date}</div>
139+
<div className="max-[420px]:hidden">{coin.date}</div>
140140
</button>
141141
))}
142142
</div>

0 commit comments

Comments
 (0)