-
{children}
+
+
+ {children}
+
);
diff --git a/src/app/(router)/page.tsx b/src/app/(router)/page.tsx
index ecccc87..f2f25bf 100644
--- a/src/app/(router)/page.tsx
+++ b/src/app/(router)/page.tsx
@@ -1,13 +1,18 @@
import { appConfig } from "@/app.config";
import Header from "@/components/header";
-import { ModeToggle } from "@/components/mode-toggle";
+import Section from "@/components/section";
+import { auth } from "@/server/auth";
+import UserDropdown from "../_components/user-dropdown";
export default async function Home() {
+ const session = await auth();
+
return (
<>
+
);
}
diff --git a/src/app/_components/expense/expense-form.tsx b/src/app/_components/expense/expense-form.tsx
index 7797d82..b2ec971 100644
--- a/src/app/_components/expense/expense-form.tsx
+++ b/src/app/_components/expense/expense-form.tsx
@@ -15,33 +15,92 @@ import {
} from "@/components/ui/form";
import { expenseSchema } from "@/lib/validations/expense";
import { Textarea } from "@/components/ui/textarea";
-import { MoneyInput } from "@/components/number-input";
-import FriendSelect from "../friend/friend-select";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-function ExpenseForm({ initialExpense }: { initialExpense?: Expense }) {
+import { NumberInput } from "@/components/number-input";
+import { EuroIcon } from "lucide-react";
+import ExpenseSplit from "./expense-split";
+import type { Session } from "next-auth";
+import { useExpenseSplit } from "@/hooks/use-expense-split";
+import { toast } from "sonner";
+import { api } from "@/trpc/react";
+
+function ExpenseForm({
+ initialExpense,
+ session,
+ hideSubmit,
+}: {
+ initialExpense?: Expense;
+ session: Session;
+ hideSubmit?: boolean;
+}) {
+ const createExpense = api.expense.create.useMutation();
const form = useForm
>({
resolver: zodResolver(expenseSchema),
defaultValues: {
description: initialExpense?.description ?? "",
amount: initialExpense?.amount ?? 0,
- groupId: initialExpense?.groupId ?? "",
},
});
+ const amount = form.watch("amount");
+ const expenseSplitHook = useExpenseSplit(amount, session);
function onSubmit(values: z.infer) {
- console.log(values);
+ if (expenseSplitHook.participants.length <= 1)
+ return toast.error("Please add at least 2 participants");
+ if (expenseSplitHook.splitType !== "Equal")
+ return toast.error("You can only split equal for now.");
+ toast.success("Expense created!");
}
-
return (
);
diff --git a/src/app/_components/expense/expense-split.tsx b/src/app/_components/expense/expense-split.tsx
new file mode 100644
index 0000000..0df1d85
--- /dev/null
+++ b/src/app/_components/expense/expense-split.tsx
@@ -0,0 +1,148 @@
+"use client";
+import React from "react";
+import FriendSelect from "../friend/friend-select";
+import { Button } from "@/components/ui/button";
+
+import type { Session } from "next-auth";
+import FriendCard from "../friend/friend-card";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { Icons } from "@/components/icons";
+import {
+ splitTypeKeys,
+ type ExpenseSplitHook,
+ type SplitType,
+} from "@/hooks/use-expense-split";
+import PaidByInput from "./paid-by";
+import { Separator } from "@radix-ui/react-select";
+
+export default function ExpenseSplit({
+ expenseSplitHook,
+ session,
+}: {
+ expenseSplitHook: ExpenseSplitHook;
+ session: Session;
+}) {
+ const {
+ friends,
+ splitType,
+ setSplitType,
+ friendTarget,
+ setFriendTarget,
+ addParticipant,
+ removeParticipant,
+ participants,
+ splits,
+ } = expenseSplitHook;
+ return (
+
+
+
+
+
+ user.id!)}
+ />
+
+
+
Owed to
+
+ {participants.map((user) => (
+ -
+
+ {session.user.id !== user.id ? (
+
+ ) : null}
+
+
+
+ ))}
+
+
Paid from
+
+ {participants.map((user) => (
+ -
+
+ {session.user.id !== user.id ? (
+
+ ) : null}
+
+
+
+ ))}
+
+
SplitExpense
;
-}
-
-export default SplitExpense;
diff --git a/src/app/_components/friend/add-friend-drawer.tsx b/src/app/_components/friend/add-friend-drawer.tsx
index 478a04e..6dd94b9 100644
--- a/src/app/_components/friend/add-friend-drawer.tsx
+++ b/src/app/_components/friend/add-friend-drawer.tsx
@@ -45,6 +45,7 @@ const SearchResultCard = ({
};
export default function AddFriendDrawer() {
+ const utils = api.useUtils();
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState("");
const [searchValue] = useDebounce(value, 1000);
@@ -65,7 +66,8 @@ export default function AddFriendDrawer() {
onSuccess() {
toast.success("Friend request sent!");
setOpen(false);
- refetch();
+ setValue("");
+ utils.friend.getAll.invalidate();
},
});
const handleAddFriend = (userId: string) => {
@@ -88,6 +90,7 @@ export default function AddFriendDrawer() {
autoFocus
value={value}
onChange={(e) => setValue(e.currentTarget.value)}
+ placeholder="Search for a friend"
/>
{isFetching ? (
diff --git a/src/app/_components/friend/friend-card.tsx b/src/app/_components/friend/friend-card.tsx
index 03ddb1c..b04b475 100644
--- a/src/app/_components/friend/friend-card.tsx
+++ b/src/app/_components/friend/friend-card.tsx
@@ -1,16 +1,24 @@
import Avatar from "@/components/avatar";
+import { cn } from "@/lib/utils";
import type { PublicUser } from "next-auth";
import React from "react";
export default function FriendCard({
user: { name, image },
children,
+ className,
}: {
user: PublicUser;
children?: React.ReactNode;
+ className?: string;
}) {
return (
-
+
{name}
{children}
diff --git a/src/app/_components/friend/friend-list.tsx b/src/app/_components/friend/friend-list.tsx
new file mode 100644
index 0000000..184d8f3
--- /dev/null
+++ b/src/app/_components/friend/friend-list.tsx
@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import FriendCard from "@/app/_components/friend/friend-card";
+import PendingRequestButton from "@/app/_components/friend/pending-request-button";
+import Section from "@/components/section";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { api } from "@/trpc/react";
+
+function FriendList() {
+ const [friendResult] = api.friend.getAll.useSuspenseQuery();
+ const pendingFriends = friendResult.filter((f) => f.status === "pending");
+ const friends = friendResult.filter((f) => f.status === "accepted");
+ return (
+ <>
+ {pendingFriends.length ? (
+
+ {pendingFriends.map(({ user, requestedBy, id }) => (
+
+
+
+ ))}
+
+ ) : null}
+
+ {friends?.length ? (
+ friends.map(({ user }) => (
+
+
+
+ ))
+ ) : (
+ No friends yet
+ )}
+
+
+ );
+}
+
+export default FriendList;
diff --git a/src/app/_components/friend/friend-select.tsx b/src/app/_components/friend/friend-select.tsx
index 6b17792..e1173ea 100644
--- a/src/app/_components/friend/friend-select.tsx
+++ b/src/app/_components/friend/friend-select.tsx
@@ -1,6 +1,7 @@
"use client";
import Avatar from "@/components/avatar";
import { Combobox } from "@/components/combobox";
+import { Icons } from "@/components/icons";
import { api } from "@/trpc/react";
import React from "react";
@@ -8,22 +9,35 @@ import React from "react";
export default function FriendSelect({
onSelect,
initialValue,
+ className,
+ excludeIds,
}: {
onSelect: (value?: string) => void;
initialValue?: string;
+ className?: string;
+ excludeIds?: Array
;
}) {
const [friends] = api.friend.getAll.useSuspenseQuery();
+ const data = friends
+ .filter((friend) => !excludeIds?.includes(friend.user.id))
+ .map(({ user }) => ({
+ label: user.name!,
+ value: user.id,
+ children: ,
+ }));
return (
({
- label: user.name!,
- value: user.id,
- children: ,
- }))}
+ className={className}
+ data={data}
onSelect={onSelect}
initialValue={initialValue}
+ messageUi={{
+ select: "Select Friend",
+
+ empty: "No friends found",
+ placeholder: "Search friends",
+ }}
/>
);
}
diff --git a/src/app/_components/friend/pending-request-button.tsx b/src/app/_components/friend/pending-request-button.tsx
index b886526..3a61fc0 100644
--- a/src/app/_components/friend/pending-request-button.tsx
+++ b/src/app/_components/friend/pending-request-button.tsx
@@ -11,20 +11,23 @@ export default function PendingRequestButton({
friendshipId: string;
requestedBy: string;
}) {
+ const utils = api.useUtils();
+ const handleSuccess = () => {
+ toast.success(
+ `Friend request ${requestedBy === "them" ? "accepted" : "cancelled"}`
+ );
+ utils.friend.getAll.invalidate();
+ };
const acceptRequest = api.friend.accept.useMutation({
- onSuccess() {
- toast.success("Friend request accepted!");
- },
+ onSuccess: handleSuccess,
});
const cancleRequest = api.friend.cancel.useMutation({
- onSuccess() {
- toast.success("Friend request cancelled!");
- },
+ onSuccess: handleSuccess,
});
return (