clean up

Bit-Barron · Sep 22, 2024 · 86a3946 · 86a3946
1 parent ea019fd
commit 86a3946
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 35 deletions.
diff --git a/public/locales/de.json b/public/locales/de.json
@@ -7,6 +7,11 @@
     "title": "Dashboard",
     "about": "Zur Über-uns-Seite"
   },
+  "loading": "Laden...",
+  "NoCoins": {
+    "title": "Keine Münzen gefunden",
+    "description": "Keine Münzen gefunden. Bitte versuchen Sie es später erneut."
+  },
   "Navbar": {
     "Home": "Startseite",
     "Contact": "Kontakt",
@@ -15,5 +20,16 @@
       "de": "Deutsch",
       "en": "Englisch"
     }
+  },
+  "CryptoTable": {
+    "title": "Kryptowährungen-Tabelle",
+    "searchPlaceholder": "Münzen suchen...",
+    "sortByPlaceholder": "Sortieren nach",
+    "coin": "Münze",
+    "price": "Preis",
+    "24hChange": "24h Änderung",
+    "marketCap": "Marktkapitalisierung",
+    "volume": "Volumen",
+    "supply": "Umlaufmenge"
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -7,6 +7,11 @@
     "title": "Dashboard",
     "about": "Go to the about page"
   },
+  "loading": "Loading...",
+  "NoCoins": {
+    "title": "No coins found",
+    "description": "No coins found. Please try again later."
+  },
   "Navbar": {
     "Home": "Home",
     "Contact": "Contact",
@@ -15,5 +20,16 @@
       "de": "German",
       "en": "English"
     }
+  },
+  "CryptoTable": {
+    "title": "Cryptocurrency Table",
+    "searchPlaceholder": "Search coins...",
+    "sortByPlaceholder": "Sort by",
+    "coin": "Coin",
+    "price": "Price",
+    "24hChange": "24h Change",
+    "marketCap": "Market Cap",
+    "volume": "Volume",
+    "supply": "Supply"
   }
 }
diff --git a/src/app/[locale]/(home)/coin/[coinId]/page.tsx b/src/app/[locale]/(home)/coin/[coinId]/page.tsx
@@ -16,15 +16,25 @@ import {
 } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTranslations } from "next-intl";
 
 export default function CoinInfoPage() {
   const { coinIdQuery } = CoinHook();
   const coin = coinIdQuery.data;
+  const t = useTranslations();
 
   return (
     <div className="container mx-auto p-4">
-      {!coin && <div>No Coin</div>}
-      {coinIdQuery.isLoading && <div>Loading...</div>}
+      {!coin && (
+        <div className="text-center py-4">
+          <h2 className="text-xl font-semibold">{t("NoCoins.title")}</h2>
+          <p className="text-muted-foreground mt-2">
+            {t("NoCoins.description")}
+          </p>
+        </div>
+      )}
+
+      {coinIdQuery.isLoading && <div>{t("loading")}</div>}
       <Card className="mb-8">
         <CardHeader className="flex flex-row items-center space-y-0 pb-2">
           <Avatar className="h-16 w-16 mr-4">

diff --git a/src/app/[locale]/(home)/page.tsx b/src/app/[locale]/(home)/page.tsx
@@ -31,9 +31,9 @@ export default function CryptoTable() {
   const { coinQuery } = CoinHook(sortOrder, currentPage);
   const { searchTerm, setSearchTerm } = searchStore();
   const router = useRouter();
-  const t = useTranslations("HomePage");
+  const t = useTranslations();
 
-  const coins = coinQuery?.data ?? [];
+  const coins = Array.isArray(coinQuery?.data) ? coinQuery.data : [];
   const filteredCoins = coins.filter(
     (coin) =>
       coin.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -47,18 +47,20 @@ export default function CryptoTable() {
 
   return (
     <div className="container mx-auto p-4 space-y-4">
-      <h1 className="text-3xl font-bold text-center mb-6">{t("title")}</h1>
+      <h1 className="text-3xl font-bold text-center mb-6">
+        {t("HomePage.title")}
+      </h1>
       <div className="flex gap-4">
         <Input
           type="text"
-          placeholder="Search coins..."
+          placeholder={t("CryptoTable.searchPlaceholder")}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           className="flex-grow"
         />
         <Select value={sortOrder} onValueChange={handleSortChange}>
           <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Sort by" />
+            <SelectValue placeholder={t("CryptoTable.sortByPlaceholder")} />
           </SelectTrigger>
           <SelectContent>
             {sortOptions.map((option) => (
@@ -72,12 +74,12 @@ export default function CryptoTable() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Coin</TableHead>
-            <TableHead>Price</TableHead>
-            <TableHead>24h Change</TableHead>
-            <TableHead>Market Cap</TableHead>
-            <TableHead>Volume</TableHead>
-            <TableHead>Supply</TableHead>
+            <TableHead>{t("CryptoTable.coin")}</TableHead>
+            <TableHead>{t("CryptoTable.price")}</TableHead>
+            <TableHead>{t("CryptoTable.24hChange")}</TableHead>
+            <TableHead>{t("CryptoTable.marketCap")}</TableHead>
+            <TableHead>{t("CryptoTable.volume")}</TableHead>
+            <TableHead>{t("CryptoTable.supply")}</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -130,10 +132,15 @@ export default function CryptoTable() {
           onPageChange={(p) => setCurrentPage(p)}
         />
       </div>
-      {coinQuery.isLoading && <div>Loading...</div>}
-      {coinQuery.isError && <div>Error loading data</div>}
+      {coinQuery.isLoading && <div>{t("loading")}</div>}
+      {coinQuery.isError && <div>{t("error")}</div>}
       {!coins.length && !coinQuery.isLoading && (
-        <div className="flex justify-center items-center">No Coins</div>
+        <div className="text-center py-4">
+          <h2 className="text-xl font-semibold">{t("NoCoins.title")}</h2>
+          <p className="text-muted-foreground mt-2">
+            {t("NoCoins.description")}
+          </p>
+        </div>
       )}
     </div>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,12 +32,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <main className="">{children}</main>
-          <footer className="bg-primary text-primary-foreground py-4 mt-8">
-            <div className="container mx-auto text-center">
-              <p>&copy; 2023 CryptoTrack Pro. All rights reserved.</p>
-            </div>
-          </footer>
+          <main>{children}</main>
         </NextThemesProvider>
       </body>
     </html>

diff --git a/src/components/hooks/coin-hook.ts b/src/components/hooks/coin-hook.ts
@@ -10,8 +10,9 @@ export const CoinHook = (
 
   const coinQuery = useQuery<CoinData[]>({
     queryKey: ["coin", sortOrder, page],
-    enabled: false,
     queryFn: () => fetchCoins(sortOrder, page),
+    enabled: !!sortOrder && !!page,
+    staleTime: 60000,
   });
 
   const coinIdQuery = useQuery<CoinIdData>({

diff --git a/src/components/pages/container/navbar.tsx b/src/components/pages/container/navbar.tsx
@@ -12,7 +12,7 @@ import { useState } from "react";
 export const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
   const { tabs } = NavbarStore();
-  const t = useTranslations("Navbar");
+  const t = useTranslations();
 
   return (
     <nav className="bg-background shadow w-full x-4 sm:px-6 lg:px-8">
@@ -27,7 +27,7 @@ export const Navbar = () => {
                   tab.current ? "border-primary text-primary" : ""
                 } hover:text-primary hover:border-primary border-transparent inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium`}
               >
-                {t(tab.title)}
+                {t(`Navbar.${tab.title}`)}
               </Link>
             ))}
           </div>

diff --git a/src/components/utils/locale-switcher.tsx b/src/components/utils/locale-switcher.tsx
@@ -3,14 +3,17 @@ import { useLocale, useTranslations } from "next-intl";
 import LocaleSwitcherSelect from "./local-switcher-select";
 
 export default function LocaleSwitcher() {
-  const t = useTranslations("LocaleSwitcher");
+  const t = useTranslations();
   const locale = useLocale();
 
   return (
-    <LocaleSwitcherSelect defaultValue={locale} label={t("label")}>
+    <LocaleSwitcherSelect
+      defaultValue={locale}
+      label={t("LocaleSwitcher.label")}
+    >
       {locales.map((cur) => (
         <option key={cur} value={cur}>
-          {t("locale", { locale: cur })}
+          {t("LocaleSwitcher.locale", { locale: cur })}
         </option>
       ))}
     </LocaleSwitcherSelect>

diff --git a/src/lib/fetch-coins.ts b/src/lib/fetch-coins.ts
@@ -1,12 +1,9 @@
-export const fetchCoins = async (
-  sortOrder: string = "market_cap_desc",
-  page: number = 1
-) => {
-  const response = await fetch(
-    `https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=${sortOrder}&per_page=50&page=${page}&sparkline=false`
+export const fetchCoins = async (sortOrder = "market_cap_desc", page = 1) => {
+  const res = await fetch(
+    `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=${sortOrder}&page=${page}`
   );
 
-  return response.json();
+  return res.json();
 };
 
 export const fetchCoinData = async (coinId?: string): Promise<CoinIdData> => {

diff --git a/todo.tsx b/todo.tsx
@@ -0,0 +1 @@
+//TODO: translation