Added date filtering

zefhub · Jul 8, 2022 · 0b960cb · 0b960cb · vercel · Jul 8, 2022
1 parent c42595b
commit 0b960cb
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 25 deletions.
diff --git a/components/HeaderNavbar.tsx b/components/HeaderNavbar.tsx
@@ -63,7 +63,7 @@ const HeaderNavbar: React.FC = () => {
   };
 
   return (
-    <header className="sticky top-0 h-12 border-b-2 border-gray-500 w-full mb-2">
+    <header className="sticky top-0 h-12 border-b-2 border-gray-500 bg-white w-full mb-2">
       <div className="max-w-screen-md ml-auto mr-auto">
         <div className="flex justify-between pt-2">
           <button

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "next-auth": "^4.3.4",
     "react": "17.0.2",
     "react-css-collapse": "^4.1.0",
+    "react-datepicker": "^4.8.0",
     "react-dom": "17.0.2",
     "react-hot-toast": "^2.2.0",
     "react-hotkeys-hook": "^3.4.6",
@@ -62,6 +63,7 @@
     "@types/luxon": "^2.0.5",
     "@types/node": "^16.11.1",
     "@types/react": "17.0.27",
+    "@types/react-datepicker": "^4.4.2",
     "autoprefixer": "^10.4.4",
     "aws-cdk": "^2.20.0",
     "aws-cdk-lib": "^2.20.0",

diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
@@ -1,6 +1,8 @@
 import type { NextPage } from "next";
 import { Fragment, useState } from "react";
+import { DateTime } from "luxon";
 import { useIntl } from "react-intl";
+import DatePicker from "react-datepicker";
 import { useQuery } from "@apollo/client";
 import toast from "react-hot-toast";
 import { TRANSACTION_AMOUNT_AGGREGATE } from "constants/queries";
@@ -13,8 +15,8 @@ import CategoryChart from "components/CategoryChart";
 
 const Dashboard: NextPage = () => {
   const intl = useIntl();
-  const [dateStart, setDateStart] = useState(new Date());
-  const [dateEnd, setDateEnd] = useState(new Date());
+  const [dateStart, setDateStart] = useState(DateTime.now().startOf("month"));
+  const [dateEnd, setDateEnd] = useState(DateTime.now());
 
   const { data: income, error: incomeError } = useQuery(
     TRANSACTION_AMOUNT_AGGREGATE,
@@ -23,7 +25,7 @@ const Dashboard: NextPage = () => {
         filter: {
           and: [
             { amount: { gt: 0 } },
-            // { date: { between: { min: dateStart, max: dateEnd } } },
+            { date: { between: { min: dateStart, max: dateEnd } } },
           ],
         },
       },
@@ -36,7 +38,14 @@ const Dashboard: NextPage = () => {
   const { data: expense, error: expenseError } = useQuery(
     TRANSACTION_AMOUNT_AGGREGATE,
     {
-      variables: { filter: { and: [{ amount: { lt: 0 } }] } },
+      variables: {
+        filter: {
+          and: [
+            { amount: { lt: 0 } },
+            { date: { between: { min: dateStart, max: dateEnd } } },
+          ],
+        },
+      },
     }
   );
   if (expenseError) {
@@ -47,6 +56,7 @@ const Dashboard: NextPage = () => {
   const { data: transactions, error } = useQuery(GET_TRANSACTIONS, {
     variables: {
       order: { desc: "date" },
+      filter: { date: { between: { min: dateStart, max: dateEnd } } },
       limit: 30,
     },
   });
@@ -78,23 +88,41 @@ const Dashboard: NextPage = () => {
             </div>
           </div>
           <div className="w-1/2 ml-2 pt-2">
-            {!transactions?.queryTransaction.length ? (
-              <p className="w-full mt-2">
-                {intl.formatMessage({ defaultMessage: "No transactions" })}
-              </p>
-            ) : (
-              <Fragment>
-                {transactions.queryTransaction.map((transaction: any) => (
-                  <Transaction
-                    key={transaction.id}
-                    id={transaction.id}
-                    category={transaction.category}
-                    amount={transaction.amount}
-                    date={transaction.date}
-                  />
-                ))}
-              </Fragment>
-            )}
+            <div className="flex flex-row justify-between">
+              {/* @ts-ignore */}
+              <DatePicker
+                selected={dateStart.toJSDate()}
+                onChange={(date: Date) =>
+                  setDateStart(DateTime.fromJSDate(date))
+                }
+                className="mr-2 rounded-md"
+              />
+              {/* @ts-ignore */}
+              <DatePicker
+                selected={dateEnd.toJSDate()}
+                onChange={(date: Date) => setDateEnd(DateTime.fromJSDate(date))}
+                className="rounded-md"
+              />
+            </div>
+            <div>
+              {!transactions?.queryTransaction.length ? (
+                <p className="w-full mt-2">
+                  {intl.formatMessage({ defaultMessage: "No transactions" })}
+                </p>
+              ) : (
+                <Fragment>
+                  {transactions.queryTransaction.map((transaction: any) => (
+                    <Transaction
+                      key={transaction.id}
+                      id={transaction.id}
+                      category={transaction.category}
+                      amount={transaction.amount}
+                      date={transaction.date}
+                    />
+                  ))}
+                </Fragment>
+              )}
+            </div>
           </div>
         </div>
       </div>

diff --git a/styles/global.scss b/styles/global.scss
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@import "react-datepicker/dist/react-datepicker.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/yarn.lock b/yarn.lock
@@ -1867,7 +1867,7 @@
   resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.0.1.tgz#ed0da773bd5f794d0603f5a5b5cee6d2354e5660"
   integrity sha512-mMyQ9vjpuFqePkfe5bZVIf/H3Dmk6wA8Kjxff9RcO4kqzJo+Ek9pGKwZHpeMr7Eku0QhLXMCd7fNCSnEnRMubg==
 
-"@popperjs/core@^2.11.5":
+"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -2319,6 +2319,16 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
+"@types/react-datepicker@^4.4.2":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.4.2.tgz#13ab25a5fff7f3da4c5380c471efd8b38f53010e"
+  integrity sha512-g8DhWvYmaIMLzVrIEVLXncylyImyBaoPsEUr3yR13JDaaHoebhDorqnVv4tLkNGa8SjBB8SAOQvxD5jaPNBX8A==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    "@types/react" "*"
+    date-fns "^2.0.1"
+    react-popper "^2.2.5"
+
 "@types/react-is@^16.7.1 || ^17.0.0":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
@@ -3377,7 +3387,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-classnames@^2.2.5, classnames@^2.3.1:
+classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -3731,6 +3741,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.0.1, date-fns@^2.24.0:
+  version "2.28.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
+  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
+
 debug@2, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5968,7 +5983,7 @@ lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6933,6 +6948,18 @@ react-css-collapse@^4.1.0:
   resolved "https://registry.yarnpkg.com/react-css-collapse/-/react-css-collapse-4.1.0.tgz#6cf837a4d035e5b9e5c2eff622f8bbaab8c06739"
   integrity sha512-t9UNdEShbqbnsgfaejvgY7ghJXP42CBobuItfrccc4KKA8JsbQ4id6rmh2wdmU+QDMS3L4vg8/yTkjGmpyMa4g==
 
+react-datepicker@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.8.0.tgz#11b8918d085a1ce4781eee4c8e4641b3cd592010"
+  integrity sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    classnames "^2.2.6"
+    date-fns "^2.24.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.12.0"
+    react-popper "^2.2.5"
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -6947,6 +6974,11 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-hot-toast@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"
@@ -6992,6 +7024,19 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-onclickoutside@^6.12.0:
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz#8e6cf80c7d17a79f2c908399918158a7b02dda01"
+  integrity sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==
+
+react-popper@^2.2.5:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 [email protected]:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -8058,6 +8103,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 [email protected]:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.1.1.tgz#e99630550fca07df9f90a06056987baa40a689c7"