From ec45bc5e5c7ca80d5b114b341a3c8d0f4ff2400f Mon Sep 17 00:00:00 2001
From: nhestrompia <nhestrompia@gmail.com>
Date: Wed, 9 Aug 2023 18:21:17 +0300
Subject: [PATCH 1/4] feat(web): dynamic-values-in-cases-page

---
 web/src/components/CasesDisplay/Stats.tsx | 65 ++++++++++++++++-------
 web/src/hooks/queries/useAllCasesQuery.ts | 22 ++++++++
 2 files changed, 67 insertions(+), 20 deletions(-)
 create mode 100644 web/src/hooks/queries/useAllCasesQuery.ts

diff --git a/web/src/components/CasesDisplay/Stats.tsx b/web/src/components/CasesDisplay/Stats.tsx
index 3d8e0b2aa..899063922 100644
--- a/web/src/components/CasesDisplay/Stats.tsx
+++ b/web/src/components/CasesDisplay/Stats.tsx
@@ -1,15 +1,13 @@
 import React from "react";
 import styled from "styled-components";
+import { useAllCasesQuery } from "hooks/queries/useAllCasesQuery";
 
 const FieldWrapper = styled.div`
   display: inline-flex;
   gap: 8px;
 `;
 
-const Field: React.FC<{ label: string; value: string }> = ({
-  label,
-  value,
-}) => (
+const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => (
   <FieldWrapper>
     <label>{label}</label>
     <small>{value}</small>
@@ -23,21 +21,48 @@ const SeparatorLabel = styled.label`
 
 const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
 
-const fields = [
-  { label: "Total", value: "600" },
-  { label: "In Progress", value: "50" },
-  { label: "Closed", value: "550" },
-];
-
-const Stats: React.FC = () => (
-  <div>
-    {fields.map(({ label, value }, i) => (
-      <React.Fragment key={i}>
-        <Field {...{ label, value }} />
-        {i + 1 < fields.length ? <Separator /> : null}
-      </React.Fragment>
-    ))}
-  </div>
-);
+const calculateDisputeSituation = (data) => {
+  if (data) {
+    let inProgressCount = 0;
+    let closedCount = 0;
+
+    data.forEach((dispute) => {
+      if (dispute.period === "execution") {
+        closedCount++;
+      } else {
+        inProgressCount++;
+      }
+    });
+    const totalCases = data.length;
+    return {
+      inProgress: inProgressCount.toString(),
+      closed: closedCount.toString(),
+      total: totalCases.toString(),
+    };
+  }
+};
+
+const Stats: React.FC = () => {
+  const { data } = useAllCasesQuery();
+
+  const caseStats = calculateDisputeSituation(data?.disputes);
+
+  const fields = [
+    { label: "Total", value: caseStats?.total || "0" },
+    { label: "In Progress", value: caseStats?.inProgress || "0" },
+    { label: "Closed", value: caseStats?.closed || "0" },
+  ];
+
+  return (
+    <div>
+      {fields.map(({ label, value }, i) => (
+        <React.Fragment key={i}>
+          <Field {...{ label, value }} />
+          {i + 1 < fields.length ? <Separator /> : null}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
 
 export default Stats;
diff --git a/web/src/hooks/queries/useAllCasesQuery.ts b/web/src/hooks/queries/useAllCasesQuery.ts
new file mode 100644
index 000000000..d8bbac852
--- /dev/null
+++ b/web/src/hooks/queries/useAllCasesQuery.ts
@@ -0,0 +1,22 @@
+import { graphql } from "src/graphql";
+import { useQuery } from "@tanstack/react-query";
+import { AllCasesQuery } from "src/graphql/graphql";
+import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper";
+export type { AllCasesQuery };
+
+const allCasesQuery = graphql(`
+  query AllCasesQuery {
+    disputes {
+      id
+      period
+      lastPeriodChange
+    }
+  }
+`);
+
+export const useAllCasesQuery = () => {
+  return useQuery({
+    queryKey: [`allCasesQuery`],
+    queryFn: async () => await graphqlQueryFnHelper(allCasesQuery, {}),
+  });
+};

From dc77aacb5e93bd1ccd913ab04f582056885b2e3c Mon Sep 17 00:00:00 2001
From: nhestrompia <nhestrompia@gmail.com>
Date: Wed, 9 Aug 2023 18:24:10 +0300
Subject: [PATCH 2/4] refactor: code smells

---
 web/src/components/CasesDisplay/Stats.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/CasesDisplay/Stats.tsx b/web/src/components/CasesDisplay/Stats.tsx
index 899063922..daf72a3d0 100644
--- a/web/src/components/CasesDisplay/Stats.tsx
+++ b/web/src/components/CasesDisplay/Stats.tsx
@@ -48,9 +48,9 @@ const Stats: React.FC = () => {
   const caseStats = calculateDisputeSituation(data?.disputes);
 
   const fields = [
-    { label: "Total", value: caseStats?.total || "0" },
-    { label: "In Progress", value: caseStats?.inProgress || "0" },
-    { label: "Closed", value: caseStats?.closed || "0" },
+    { label: "Total", value: caseStats?.total ?? "0" },
+    { label: "In Progress", value: caseStats?.inProgress ?? "0" },
+    { label: "Closed", value: caseStats?.closed ?? "0" },
   ];
 
   return (

From 1f4ca6a22c4fae20b17d01cf4908eb692901bc77 Mon Sep 17 00:00:00 2001
From: nhestrompia <nhestrompia@gmail.com>
Date: Wed, 9 Aug 2023 18:47:38 +0300
Subject: [PATCH 3/4] refactor: using counter in query

---
 web/src/components/CasesDisplay/Stats.tsx | 29 +++--------------------
 web/src/hooks/queries/useAllCasesQuery.ts |  9 ++++---
 2 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/web/src/components/CasesDisplay/Stats.tsx b/web/src/components/CasesDisplay/Stats.tsx
index daf72a3d0..d96ee368d 100644
--- a/web/src/components/CasesDisplay/Stats.tsx
+++ b/web/src/components/CasesDisplay/Stats.tsx
@@ -21,36 +21,13 @@ const SeparatorLabel = styled.label`
 
 const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
 
-const calculateDisputeSituation = (data) => {
-  if (data) {
-    let inProgressCount = 0;
-    let closedCount = 0;
-
-    data.forEach((dispute) => {
-      if (dispute.period === "execution") {
-        closedCount++;
-      } else {
-        inProgressCount++;
-      }
-    });
-    const totalCases = data.length;
-    return {
-      inProgress: inProgressCount.toString(),
-      closed: closedCount.toString(),
-      total: totalCases.toString(),
-    };
-  }
-};
-
 const Stats: React.FC = () => {
   const { data } = useAllCasesQuery();
 
-  const caseStats = calculateDisputeSituation(data?.disputes);
-
   const fields = [
-    { label: "Total", value: caseStats?.total ?? "0" },
-    { label: "In Progress", value: caseStats?.inProgress ?? "0" },
-    { label: "Closed", value: caseStats?.closed ?? "0" },
+    { label: "Total", value: data?.counter?.cases ?? "0" },
+    { label: "In Progress", value: data?.counter?.cases - data?.counter?.casesRuled ?? "0" },
+    { label: "Closed", value: data?.counter?.casesRuled ?? "0" },
   ];
 
   return (
diff --git a/web/src/hooks/queries/useAllCasesQuery.ts b/web/src/hooks/queries/useAllCasesQuery.ts
index d8bbac852..1e224927d 100644
--- a/web/src/hooks/queries/useAllCasesQuery.ts
+++ b/web/src/hooks/queries/useAllCasesQuery.ts
@@ -5,11 +5,10 @@ import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper";
 export type { AllCasesQuery };
 
 const allCasesQuery = graphql(`
-  query AllCasesQuery {
-    disputes {
-      id
-      period
-      lastPeriodChange
+  query AllCases {
+    counter(id: 0) {
+      cases
+      casesRuled
     }
   }
 `);

From c2f5a8864bab5af11553d925b6209ebb93751187 Mon Sep 17 00:00:00 2001
From: nhestrompia <nhestrompia@gmail.com>
Date: Wed, 9 Aug 2023 19:13:44 +0300
Subject: [PATCH 4/4] fix: bug fix

---
 web/src/components/CasesDisplay/Stats.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/CasesDisplay/Stats.tsx b/web/src/components/CasesDisplay/Stats.tsx
index d96ee368d..e877af7ef 100644
--- a/web/src/components/CasesDisplay/Stats.tsx
+++ b/web/src/components/CasesDisplay/Stats.tsx
@@ -24,10 +24,14 @@ const Separator: React.FC = () => <SeparatorLabel>|</SeparatorLabel>;
 const Stats: React.FC = () => {
   const { data } = useAllCasesQuery();
 
+  const totalDisputes = data?.counter?.cases;
+  const closedDisputes = data?.counter?.casesRuled;
+  const inProgressDisputes = (totalDisputes - closedDisputes).toString();
+
   const fields = [
-    { label: "Total", value: data?.counter?.cases ?? "0" },
-    { label: "In Progress", value: data?.counter?.cases - data?.counter?.casesRuled ?? "0" },
-    { label: "Closed", value: data?.counter?.casesRuled ?? "0" },
+    { label: "Total", value: totalDisputes ?? "0" },
+    { label: "In Progress", value: inProgressDisputes ?? "0" },
+    { label: "Closed", value: closedDisputes ?? "0" },
   ];
 
   return (