Added analytics and new type system

zefhub · Oct 20, 2021 · 62aec1f · 62aec1f · vercel · Oct 20, 2021
1 parent 1b77290
commit 62aec1f
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 31 deletions.
diff --git a/components/DailySpendCard.tsx b/components/DailySpendCard.tsx
@@ -1,30 +1,36 @@
 import { Fragment, memo } from "react";
-import { DateTime } from "luxon";
 import { gql, useQuery } from "@apollo/client";
+import { DateTime } from "luxon";
 
-const GET_AMOUNT_AVG = gql`
-  query totalTransactionsAmountAverage($from: DateTime!) {
-    aggregateTransaction(filter: { when: { gt: $from } }) {
-      amountAvg
+const GET_AMOUNT_MAX = gql`
+  query totalTransactionsSum($from: DateTime!) {
+    aggregateTransaction(
+      filter: { and: { when: { ge: $from }, type: { eq: EXPENSE } } }
+    ) {
+      amountSum
     }
   }
 `;
 
 const DailySpendCard: React.FC = () => {
-  const { loading, error, data } = useQuery(GET_AMOUNT_AVG, {
-    variables: { from: DateTime.local().startOf("month") },
+  const { loading, error, data } = useQuery(GET_AMOUNT_MAX, {
+    variables: { from: DateTime.local().startOf("month").toString() },
   });
   if (error) {
     console.error(error);
   }
 
+  const days = Math.ceil(
+    DateTime.local().diff(DateTime.local().startOf("month"), ["days"]).days
+  );
+
   const getAmount = (): number => {
     if (
       data &&
       data.aggregateTransaction &&
-      data.aggregateTransaction.amountAvg
+      data.aggregateTransaction.amountSum
     ) {
-      return data.aggregateTransaction.amountAvg;
+      return Math.ceil(data.aggregateTransaction.amountSum / days);
     }
     return 0;
   };
@@ -42,7 +48,9 @@ const DailySpendCard: React.FC = () => {
                 </div>
               ) : (
                 <Fragment>
-                  <span className="h2 mb-0">{getAmount()} 円</span>
+                  <span className="h2 mb-0">
+                    {getAmount().toLocaleString()} 円
+                  </span>
                   {false && (
                     <span
                       className="badge bg-danger-soft mt-n1"
@@ -54,9 +62,6 @@ const DailySpendCard: React.FC = () => {
                 </Fragment>
               )}
             </div>
-            <div className="col-auto">
-              <span className="h2 fe fe-dollar-sign text-muted mb-0"></span>
-            </div>
           </div>
         </div>
       </div>

diff --git a/components/Input.tsx b/components/Input.tsx
@@ -6,6 +6,7 @@ export interface InputProps {
   touched: { [key: string]: boolean };
   errors: { [key: string]: string };
   type: "text" | "number" | "date";
+  pattern?: string;
   label?: string;
   disabled?: boolean;
   readOnly?: boolean;
@@ -29,6 +30,7 @@ const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
         type={props.type}
         name={props.name}
         value={props.value || ""}
+        pattern={props.pattern}
         onChange={props.onChange}
         onBlur={props.onBlur}
         disabled={props.disabled}

diff --git a/components/NewTransaction.tsx b/components/NewTransaction.tsx
@@ -12,12 +12,19 @@ import NewTransactionForm, {
 const ADD_TRANSACTION_MUTATION = gql`
   mutation addTransaction(
     $user: UserRef!
+    $type: TransactionType!
     $amount: Float!
     $when: DateTime!
     $category: CategoryRef!
   ) {
     addTransaction(
-      input: { user: $user, amount: $amount, when: $when, category: $category }
+      input: {
+        user: $user
+        type: $type
+        amount: $amount
+        when: $when
+        category: $category
+      }
     ) {
       transaction {
         id
@@ -60,13 +67,15 @@ const NewTransaction: React.FC = () => {
           user: {
             id: user?.id,
           },
+          type: "EXPENSE",
           amount: Number(values.amount),
           when: DateTime.fromISO(values.when),
           category: {
             id: values.category,
           },
         },
       });
+      // analytics.logEvent("add_transaction");
       setSubmitting(false);
       setShow(false);
     } catch (err) {
@@ -81,7 +90,7 @@ const NewTransaction: React.FC = () => {
         className="btn btn-primary lift"
         onClick={() => setShow(true)}
       >
-        New Transaction
+        New Expense
       </button>
       <Modal
         show={show}
@@ -91,7 +100,7 @@ const NewTransaction: React.FC = () => {
       >
         <div className="modal-card card">
           <div className="card-header">
-            <h4 className="card-header-title">Reigster Transaction</h4>
+            <h4 className="card-header-title">Reigster Expense</h4>
           </div>
           <div className="card-body" style={{ maxHeight: "none" }}>
             <NewTransactionForm

diff --git a/components/RecentTransactions.tsx b/components/RecentTransactions.tsx
@@ -54,7 +54,6 @@ const RecentTransactions: React.FC = () => {
       showCancelButton: true,
       confirmButtonText: "Delete",
       reverseButtons: true,
-      showLoaderOnConfirm: true,
     });
     if (isConfirmed) {
       await deleteTransaction({

diff --git a/components/TotalSpendCard.tsx b/components/TotalSpendCard.tsx
@@ -4,15 +4,17 @@ import { gql, useQuery } from "@apollo/client";
 
 const GET_AMOUNT_MAX = gql`
   query totalTransactionsSum($from: DateTime!) {
-    aggregateTransaction(filter: { when: { gt: $from } }) {
+    aggregateTransaction(
+      filter: { and: { when: { ge: $from }, type: { eq: EXPENSE } } }
+    ) {
       amountSum
     }
   }
 `;
 
 const TotalSpendCard: React.FC = () => {
   const { loading, error, data } = useQuery(GET_AMOUNT_MAX, {
-    variables: { from: DateTime.local().startOf("month") },
+    variables: { from: DateTime.local().startOf("month").toString() },
   });
   if (error) {
     console.error(error);
@@ -24,7 +26,7 @@ const TotalSpendCard: React.FC = () => {
       data.aggregateTransaction &&
       data.aggregateTransaction.amountSum
     ) {
-      return data.aggregateTransaction.amountSum;
+      return data.aggregateTransaction.amountSum.toLocaleString();
     }
     return 0;
   };
@@ -46,9 +48,6 @@ const TotalSpendCard: React.FC = () => {
                 <span className="h2 mb-0">{getAmount()} 円</span>
               )}
             </div>
-            <div className="col-auto">
-              <span className="h2 fe fe-dollar-sign text-muted mb-0"></span>
-            </div>
           </div>
         </div>
       </div>

diff --git a/components/TransactionsCountCard.tsx b/components/TransactionsCountCard.tsx
@@ -1,23 +1,28 @@
 import { memo } from "react";
 import { gql, useQuery } from "@apollo/client";
+import { DateTime } from "luxon";
 
 const GET_TOTOAL_TRANSACTIONS = gql`
-  query totalTransactions {
-    aggregateTransaction {
+  query totalTransactions($from: DateTime!) {
+    aggregateTransaction(
+      filter: { and: { when: { ge: $from }, type: { eq: EXPENSE } } }
+    ) {
       count
     }
   }
 `;
 
 const TransactionsCountCard: React.FC = () => {
-  const { loading, error, data } = useQuery(GET_TOTOAL_TRANSACTIONS);
+  const { loading, error, data } = useQuery(GET_TOTOAL_TRANSACTIONS, {
+    variables: { from: DateTime.local().startOf("month").toString() },
+  });
   if (error) {
     console.error(error);
   }
 
   const getCount = (): number => {
     if (data && data.aggregateTransaction && data.aggregateTransaction.count) {
-      return data.aggregateTransaction.count;
+      return data.aggregateTransaction.count.toLocaleString();
     }
     return 0;
   };
@@ -39,9 +44,6 @@ const TransactionsCountCard: React.FC = () => {
                 <span className="h2 mb-0">{getCount()}</span>
               )}
             </div>
-            <div className="col-auto">
-              <span className="h2 fe fe-clock text-muted mb-0"></span>
-            </div>
           </div>
         </div>
       </div>

diff --git a/forms/NewTransactionForm.tsx b/forms/NewTransactionForm.tsx
@@ -40,7 +40,8 @@ const NewTransactionForm: React.FC<NewTransactionFormProps> = (props) => {
             touched={touched}
             errors={errors}
             name="amount"
-            type="text"
+            type="number"
+            pattern="\d*"
             label="Amount"
             placeholder="10,000"
             tabIndex={0}

diff --git a/lib/initAuth.js b/lib/initAuth.js
@@ -75,10 +75,12 @@ const initAuth = () => {
       databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
     },
     firebaseClientInitConfig: {
+      appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
       apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
       authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
       databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
       projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+      measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
     },
     cookies: {
       name: "Ikura",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,11 +1,14 @@
 import "../styles/theme.scss";
 import "sweetalert2/src/sweetalert2.scss";
+import "firebase/analytics";
 import type { AppProps } from "next/app";
+import { useEffect } from "react";
 import Head from "next/head";
 import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../lib/apolloClient";
 import initAuth from "../lib/initAuth";
 import { useAuthUser, withAuthUser } from "next-firebase-auth";
+import firebase from "firebase/app";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 
@@ -15,6 +18,18 @@ function CustomApp({ Component, pageProps }: AppProps) {
   const user = useAuthUser();
   const apolloClient = useApollo(pageProps, user);
 
+  useEffect(() => {
+    if (firebase.apps.length > 0) {
+      const analytics = firebase.analytics();
+
+      firebase.auth().onIdTokenChanged((user) => {
+        if (user) {
+          analytics.setUserId(user.uid);
+        }
+      });
+    }
+  }, [firebase.apps.length]);
+
   return (
     <ApolloProvider client={apolloClient}>
       <Head>

diff --git a/pages/settings/categories.tsx b/pages/settings/categories.tsx
@@ -11,6 +11,7 @@ import CategoryForm, { CategoryFormValues } from "../../forms/CategoryForm";
 const ADD_CATEGORY_MUTATION = gql`
   mutation addCategory(
     $user: UserRef!
+    $type: CategoryType!
     $title: String!
     $createdAt: DateTime!
     $description: String
@@ -20,6 +21,7 @@ const ADD_CATEGORY_MUTATION = gql`
     addCategory(
       input: {
         user: $user
+        type: $type
         title: $title
         createdAt: $createdAt
         description: $description
@@ -68,6 +70,7 @@ const SettingsCategories: NextPage = () => {
           user: {
             id: user?.id,
           },
+          type: "PRIVATE",
           title: values.title,
           description: values.description,
           createdAt: DateTime.now(),