Skip to content

Commit

Permalink
Debugging graphql issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedanielforum
thedanielforum committed Feb 28, 2022
1 parent 1d522c4 commit 4c74e50
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 241 deletions.
2 changes: 1 addition & 1 deletion components/DailySpendCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const DailySpendCard: React.FC = () => {
};

return (
<div className="card border-left-primary shadow h-100 py-2">
<div className="card border-left-success shadow h-100 py-2">
<div className="card-body">
<div className="row no-gutters align-items-center">
<div className="col mr-2">
Expand Down
67 changes: 26 additions & 41 deletions components/NewTransaction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { Fragment, useState, useContext } from "react";
import { useContext } from "react";
import { useRouter } from "next/router";
import { useIntl } from "react-intl";
import { gql, useMutation, useQuery } from "@apollo/client";
import { useHotkeys } from "react-hotkeys-hook";
import { DateTime } from "luxon";
import { Modal } from "react-bootstrap";
import { FormikHelpers } from "formik";
Expand Down Expand Up @@ -48,16 +47,16 @@ const GET_CATEGORIES_QUERY = gql`
}
`;

const NewTransaction: React.FC = () => {
export interface NewTransactionProps {
show: boolean;
onHide: (arg: boolean) => void;
}

const NewTransaction: React.FC<NewTransactionProps> = (props) => {
const intl = useIntl();
const { locale } = useRouter();
const user = useContext(UserContext);

const [show, setShow] = useState<boolean>(false);

// Register a keyboard shortcut
useHotkeys("shift+t", () => setShow(true));

const [addTransaction] = useMutation(ADD_TRANSACTION_MUTATION);
const categories = useQuery(GET_CATEGORIES_QUERY);

Expand Down Expand Up @@ -91,7 +90,7 @@ const NewTransaction: React.FC = () => {
});
// analytics.logEvent("add_transaction");
setSubmitting(false);
setShow(false);
props.onHide(false);
} catch (err) {
console.error(err);
}
Expand All @@ -111,39 +110,25 @@ const NewTransaction: React.FC = () => {
};

return (
<Fragment>
<button
type="button"
className="btn btn-primary lift"
onClick={() => setShow(true)}
>
{intl.formatMessage({
defaultMessage: "Expense",
description: "new expense button",
})}
</button>
<Modal
show={show}
onHide={() => setShow(false)}
backdrop="static"
keyboard
>
<div className="modal-card card">
<div className="card-header">
<h4 className="card-header-title">Reigster Expense</h4>
</div>
<div className="card-body" style={{ maxHeight: "none" }}>
<NewTransactionForm
onSubmit={onSubmit}
onCancel={() => setShow(false)}
initialValues={{ amount: "" }}
loading={categories.loading}
categories={getCategories()}
/>
</div>
<Modal
show={props.show}
onHide={() => props.onHide(false)}
backdrop="static"
keyboard
>
<div className="modal-card card">
<div className="card-header text-primary">Reigster Expense</div>
<div className="card-body" style={{ maxHeight: "none" }}>
<NewTransactionForm
onSubmit={onSubmit}
onCancel={() => props.onHide(false)}
initialValues={{ amount: "" }}
loading={categories.loading}
categories={getCategories()}
/>
</div>
</Modal>
</Fragment>
</div>
</Modal>
);
};

Expand Down
7 changes: 7 additions & 0 deletions components/RadioButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const RadioButton = () => {
return <div />;
};

export default RadioButton;
145 changes: 78 additions & 67 deletions components/RecentTransactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,73 +87,84 @@ const RecentTransactions: React.FC = () => {
</div>
) : getList(data).length > 0 ? (
<div className="table-responsive">
<table className="table table-bordered">
<thead>
<tr>
<th>
<span className="text-muted list-sort">Amount</span>
</th>
<th>
<span className="text-muted list-sort">Type</span>
</th>
<th>
<span className="text-muted list-sort">Date</span>
</th>
<th>
<span className="text-muted list-sort">Categories</span>
</th>
<th></th>
</tr>
</thead>
<tbody className="list" style={{ borderTop: "0" }}>
{getList(data).map((transaction: any) => (
<tr key={transaction.id}>
<td>
{intl.formatMessage(
{
defaultMessage: "{amount} $",
description: "monetary amount readout",
},
{
amount: intl.formatNumber(transaction.amount),
}
)}
</td>
<td>
{transaction.type === "EXPENSE"
? intl.formatMessage({
defaultMessage: "Expense",
description: "recent transactions table",
})
: intl.formatMessage({
defaultMessage: "Income",
description: "recent transactions table",
})}
</td>
<td>
{DateTime.fromISO(transaction.when).toFormat(
"dd/MM/yyyy"
)}
</td>
<td>{transaction.category?.title}</td>
<td className="text-end">
<Dropdown>
<Dropdown.Toggle as={CustomToggle} />
<Dropdown.Menu>
<button
type="button"
className="dropdown-item"
onClick={() => onDelete(transaction.id)}
>
Delete
</button>
</Dropdown.Menu>
</Dropdown>
</td>
</tr>
))}
</tbody>
</table>
<div className="row">
<div className="col-12">
<table className="table table-bordered">
<thead>
<tr>
<th>
<span className="text-muted list-sort">Amount</span>
</th>
<th>
<span className="text-muted list-sort">Type</span>
</th>
<th>
<span className="text-muted list-sort">Date</span>
</th>
<th>
<span className="text-muted list-sort">Categories</span>
</th>
<th></th>
</tr>
</thead>
<tbody className="list" style={{ borderTop: "0" }}>
{getList(data).map((transaction: any) => (
<tr key={transaction.id}>
<td>
{intl.formatMessage(
{
defaultMessage: "{amount} $",
description: "monetary amount readout",
},
{
amount: intl.formatNumber(transaction.amount),
}
)}
</td>
<td>
{transaction.type === "EXPENSE"
? intl.formatMessage({
defaultMessage: "Expense",
description: "recent transactions table",
})
: intl.formatMessage({
defaultMessage: "Income",
description: "recent transactions table",
})}
</td>
<td>
{DateTime.fromISO(transaction.when).toFormat(
"dd/MM/yyyy"
)}
</td>
<td>{transaction.category?.title}</td>
<td className="text-end">
<Dropdown>
<Dropdown.Toggle as={CustomToggle} />
<Dropdown.Menu>
<button
type="button"
className="dropdown-item"
onClick={() => onDelete(transaction.id)}
>
Delete
</button>
</Dropdown.Menu>
</Dropdown>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="dataTables_info" role="status">
Showing 1 to 10 of 57 entries
</div>
</div>
</div>
</div>
) : (
<div className="card-body text-center">
Expand Down
13 changes: 11 additions & 2 deletions components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useContext } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import classNames from "classnames";
import UserContext from "contexts/User";

const Sidebar = () => {
const router = useRouter();
const user = useContext(UserContext);

if (!user) {
Expand All @@ -17,7 +20,9 @@ const Sidebar = () => {
</a>
</Link>
<hr className="sidebar-divider my-0" />
<li className="nav-item active">
<li
className={classNames("nav-item", { active: router.pathname === "/" })}
>
<Link href="/">
<a className="nav-link">
<i className="fas fa-fw fa-tachometer-alt"></i>
Expand All @@ -26,7 +31,11 @@ const Sidebar = () => {
</Link>
</li>
<hr className="sidebar-divider my-0" />
<li className="nav-item">
<li
className={classNames("nav-item", {
active: router.pathname === "/transactions",
})}
>
<Link href="/transactions">
<a className="nav-link">
<i className="fas fa-fw fa-coins"></i>
Expand Down
2 changes: 1 addition & 1 deletion components/TotalSpendCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const TotalSpendCard: React.FC = () => {
};

return (
<div className="card border-left-primary shadow h-100 py-2">
<div className="card border-left-info shadow h-100 py-2">
<div className="card-body">
<div className="row no-gutters align-items-center">
<div className="col mr-2">
Expand Down
6 changes: 4 additions & 2 deletions components/TransactionsCountCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const TransactionsCountCard: React.FC = () => {
};

return (
<div className="card border-left-primary shadow h-100 py-2">
<div className="card border-left-warning shadow h-100 py-2">
<div className="card-body">
<div className="row no-gutters align-items-center">
<div className="col mr-2">
Expand All @@ -49,7 +49,9 @@ const TransactionsCountCard: React.FC = () => {
</span>
</div>
) : (
<span className="h2 mb-0">{getCount()}</span>
<div className="h5 mb-0 font-weight-bold text-gray-800">
{getCount()}
</div>
)}
</div>
</div>
Expand Down
35 changes: 21 additions & 14 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import type { NextPage } from "next";
import { useState } from "react";
import { useIntl } from "react-intl";
import loadIntlMessages from "utils/loadIntlMessages";
import { useHotkeys } from "react-hotkeys-hook";
import NewTransaction from "components/NewTransaction";
import TransactionsCountCard from "components/TransactionsCountCard";
import DailySpendCard from "components/DailySpendCard";
import TotalSpendCard from "components/TotalSpendCard";
import RecentTransactions from "components/RecentTransactions";

const Home: NextPage = (props) => {
const Home: NextPage = () => {
const intl = useIntl();

const [showNewTransaction, setShowNewTransaction] = useState<boolean>(false);

// Register a keyboard shortcuts
useHotkeys("shift+t", () => setShowNewTransaction(true));

return (
<div className="container-fluid">
<div className="d-sm-flex align-items-center justify-content-between mb-4">
Expand All @@ -19,12 +25,21 @@ const Home: NextPage = (props) => {
description: "index page title",
})}
</h1>
<a
href="#"
<button
type="button"
className="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
onClick={() => setShowNewTransaction(true)}
>
<i className="fas fa-plus fa-sm text-white-50"></i> New Transaction
</a>
<i className="fas fa-plus fa-sm text-white-50"></i>&nbsp;
{intl.formatMessage({
defaultMessage: "New Transaction",
description: "index page new transaction button",
})}
</button>
<NewTransaction
show={showNewTransaction}
onHide={() => setShowNewTransaction(false)}
/>
</div>
<div className="row">
<div className="col-xl-3 col-md-6 mb-4">
Expand Down Expand Up @@ -65,12 +80,4 @@ const Home: NextPage = (props) => {
);
};

export const getServerSideProps = async (ctx: any) => {
return {
props: {
intlMessages: await loadIntlMessages(ctx),
},
};
};

export default Home;
Loading

1 comment on commit 4c74e50

@vercel
Copy link

@vercel vercel bot commented on 4c74e50 Feb 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.