diff --git a/package-lock.json b/package-lock.json index 7fca024..f87fd49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "achillea", "version": "0.0.0", "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", @@ -775,6 +777,75 @@ "node": ">=10" } }, + "node_modules/@tanstack/match-sorter-utils": { + "version": "8.8.4", + "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz", + "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==", + "dependencies": { + "remove-accents": "0.4.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kentcdodds" + } + }, + "node_modules/@tanstack/query-core": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.7.tgz", + "integrity": "sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.7.tgz", + "integrity": "sha512-ijBWEzAIo09fB1yd22slRZzprrZ5zMdWYzBnCg5qiXuFbH78uGN1qtGz8+Ed4MuhaPaYSD+hykn+QEKtQviEtg==", + "dependencies": { + "@tanstack/query-core": "4.29.7", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.29.7.tgz", + "integrity": "sha512-fckNnBV6Kfbtq6EJqQen8oBjPqGFcOPS9SJmNKLbFLQgd7OpNIlA4M0r37iJYUY9m14/ESKc1wzKd36VfeiPjg==", + "dependencies": { + "@tanstack/match-sorter-utils": "^8.7.0", + "superjson": "^1.10.0", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "4.29.7", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -1370,6 +1441,20 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/copy-anything": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.4.tgz", + "integrity": "sha512-MaQ9FwzlZ/KLeVCLhzI3rZw0EhrIryfZa3AyT4agVybR0DjlkDHA8898lamLD6kfkf9MMn8D+zDAUR4+GxaymQ==", + "dependencies": { + "is-what": "^4.1.8" + }, + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2156,6 +2241,17 @@ "node": ">=8" } }, + "node_modules/is-what": { + "version": "4.1.9", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.9.tgz", + "integrity": "sha512-I3FU0rkVvwhgLLEs6iITwZ/JaLXe7tQcHyzupXky8jigt1vu4KM0UOqDr963j36JRvJ835EATVIm6MnGz/i1/g==", + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -2818,6 +2914,11 @@ "node": ">=8.10.0" } }, + "node_modules/remove-accents": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", + "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -3041,6 +3142,17 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/superjson": { + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz", + "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==", + "dependencies": { + "copy-anything": "^3.0.2" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -3245,6 +3357,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index f5f0e78..bd122d0 100644 --- a/package.json +++ b/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", diff --git a/src/api/index.ts b/src/api/index.ts index d9b83a1..ebdb4bc 100644 --- a/src/api/index.ts +++ b/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 } diff --git a/src/components/BarChart.tsx b/src/components/BarChart.tsx new file mode 100644 index 0000000..b6efdd7 --- /dev/null +++ b/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 ( +
+
+

Proposal

+ + +
+ + +
+ ) +} + +export default BarChart diff --git a/src/main.tsx b/src/main.tsx index 7049350..ee57f73 100644 --- a/src/main.tsx +++ b/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: , - children: [ - { - element: , - index: true, - }, - { - path: "user", - element: , - }, - { - path: "bugs", - element: , - }, - ], - }, -]) +const queryClient = new QueryClient() ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - + + + ) diff --git a/src/routes/Blockchain.tsx b/src/routes/Blockchain.tsx index 4291aaa..39c4154 100644 --- a/src/routes/Blockchain.tsx +++ b/src/routes/Blockchain.tsx @@ -1,73 +1,11 @@ -import ReactEcharts from "echarts-for-react" -import { InfoIcon } from "../icons" +import BarChart from "../components/BarChart" const Blockchain = () => { - 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 = { - // legend: { - // data: ["Olumsuz", "Olumlu"], - // }, - tooltip: {}, - grid: { - left: "5%", - right: "5%", - top: "10%", - bottom: "10%", - }, - xAxis: { - type: "category", - data: data.map((item) => item.day), - }, - yAxis: { - type: "value", - }, - series: [ - { - name: "Olumlu", - stack: "total", - type: "bar", - data: chartData.map((item) => item.value[1]), - itemStyle: { - color: "#2196F3", - }, - barWidth: 60, - }, - { - name: "Olumsuz", - stack: "total", - type: "bar", - data: chartData.map((item) => item.value[0]), - itemStyle: { - color: "#FF5722", - }, - barWidth: 60, - }, - ], - } - return ( -
-
-

Proposal

- - -
- - +
+ + +
) } diff --git a/src/routes/Bugs.tsx b/src/routes/Bugs.tsx index 08b75c1..5584f90 100644 --- a/src/routes/Bugs.tsx +++ b/src/routes/Bugs.tsx @@ -1,30 +1,31 @@ -import axios from "axios" -import { config } from "../config" -import { isAxiosResponseSuccess } from "../utils" -import { useEffect } from "react" +import { useQuery } from "@tanstack/react-query" +import { getOpenBugsCount } from "../api" +import { BugIcon } from "../icons" const Bugs = () => { - 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 } - } - } - useEffect(() => { - fetchOpenBugsCount().then((data) => console.log(data)) - }, []) + const bugsQuery = useQuery({ + queryKey: ["bugs"], + queryFn: getOpenBugsCount, + }) - return
hello i am bugs page
+ if (bugsQuery.isLoading) return
Loading...
+ + return ( + <> +
+ +
Number of bugs reported : {bugsQuery.data.count}
+
+ + + Click here to see the bugs + + + ) } export default Bugs diff --git a/src/routes/Root.tsx b/src/routes/Root.tsx index 7f23c1f..0496034 100644 --- a/src/routes/Root.tsx +++ b/src/routes/Root.tsx @@ -23,7 +23,7 @@ const navigationItems = [ function Root() { return (
-