setup layout and routes

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query-devtools": "^4.29.7",
     "axios": "^1.4.0",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",

src/api/index.ts

@@ -1,6 +1,6 @@
 import axios from "axios"
 import { SentryDataTypes, SentryDataPeriods } from "../types"
-import { formatSentryURL, isAxiosResponseSuccess } from "../utils"
+import { formatSentryURL } from "../utils"
 import { config } from "../config"
 
 export const fetchSentryData = async (
@@ -10,29 +10,16 @@ export const fetchSentryData = async (
   try {
     const url = formatSentryURL(period, type)
     const response = await axios.get(url)
-    if (isAxiosResponseSuccess(response)) {
-      return response.data
-    }
-    return {}
+
+    return response.data
   } catch (error) {
     console.error(error)
     return {}
   }
 }
 
-export const fetchOpenBugsCount = async () => {
-  try {
-    const url = `${config.apiUri}/stats/issues`
-    const response = await axios.get(url)
-    if (isAxiosResponseSuccess(response)) {
-      return response.data
-    }
-    console.log("error")
-    console.log(response.status)
-    return { count: 0 }
-  } catch (error) {
-    console.log("error")
-    console.log(error)
-    return { count: 0 }
-  }
+export async function getOpenBugsCount() {
+  const url = `${config.apiUri}/stats/issues`
+  const res = await axios.get(url)
+  return res.data
 }

src/components/BarChart.tsx

@@ -0,0 +1,72 @@
+import ReactEcharts from "echarts-for-react"
+import { InfoIcon } from "../icons"
+
+const BarChart = () => {
+  const data = [
+    { day: "may1", positive: 28, negative: 2 },
+    { day: "may2", positive: 12, negative: 3 },
+    { day: "may3", positive: 19, negative: 3 },
+    { day: "may4", positive: 20, negative: 3 },
+    { day: "may5", positive: 21, negative: 3 },
+    { day: "may6", positive: 29, negative: 3 },
+    { day: "may7", positive: 30, negative: 3 },
+  ]
+
+  const chartData = data.map((item) => ({
+    name: item.day,
+    value: [item.negative, item.positive],
+  }))
+
+  const option = {
+    tooltip: {},
+    grid: {
+      left: "5%",
+      right: "5%",
+      top: "10%",
+      bottom: "10%",
+    },
+    xAxis: {
+      type: "category",
+      data: data.map((item) => item.day),
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        name: "Success",
+        stack: "total",
+        type: "bar",
+        data: chartData.map((item) => item.value[1]),
+        itemStyle: {
+          color: "#2196F3",
+        },
+        barWidth: 60,
+      },
+      {
+        name: "Failure",
+        stack: "total",
+        type: "bar",
+        data: chartData.map((item) => item.value[0]),
+        itemStyle: {
+          color: "#FF5722",
+        },
+        barWidth: 60,
+      },
+    ],
+  }
+
+  return (
+    <div className="bg-white rounded-md flex flex-col p-4 shadow-md">
+      <div className="flex justify-between px-10 items-center">
+        <h4 className="text-xl font-semibold">Proposal</h4>
+
+        <InfoIcon />
+      </div>
+
+      <ReactEcharts option={option} />
+    </div>
+  )
+}
+
+export default BarChart

src/main.tsx

@@ -1,35 +1,16 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { RouterProvider } from "react-router-dom"
 import "./index.css"
-import Bugs from "./routes/Bugs"
-import Root from "./routes/root"
-import Blockchain from "./routes/Blockchain"
-import User from "./routes/User"
+import { router } from "./routes/Router"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Root />,
-    children: [
-      {
-        element: <Blockchain />,
-        index: true,
-      },
-      {
-        path: "user",
-        element: <User />,
-      },
-      {
-        path: "bugs",
-        element: <Bugs />,
-      },
-    ],
-  },
-])
+const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
   </React.StrictMode>
 )