Add import from splitwise option (#37)

* Add import from splitwise option

* Update some ui

next.config.js

@@ -44,6 +44,16 @@ const config = {
         port: '',
         pathname: '/**',
       },
+      {
+        hostname: 's3.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
+      {
+        hostname: 'splitwise.s3.amazonaws.com',
+        port: '',
+        pathname: '/**',
+      },
       {
         hostname: 'api.producthunt.com',
         port: '',

package.json

@@ -24,6 +24,7 @@
     "@prisma/client": "^5.9.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",

prisma/migrations/20240330050427_add_imported_from_splitiwise_user/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Balance" ADD COLUMN     "importedFromSplitwise" BOOLEAN NOT NULL DEFAULT false;

prisma/migrations/20240330061939_add_splitwise_group_id/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Group" ADD COLUMN     "splitwiseGroupId" TEXT;

prisma/migrations/20240330064009_add_splitwise_group_id_unique/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[splitwiseGroupId]` on the table `Group` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Group_splitwiseGroupId_key" ON "Group"("splitwiseGroupId");

prisma/schema.prisma

@@ -73,30 +73,32 @@ model VerificationToken {
 }
 
 model Balance {
-    userId    Int
-    currency  String
-    friendId  Int
-    amount    Int
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
-    user      User     @relation(name: "UserBalance", fields: [userId], references: [id], onDelete: Cascade)
-    friend    User     @relation(name: "FriendBalance", fields: [friendId], references: [id], onDelete: Cascade)
+    userId                Int
+    currency              String
+    friendId              Int
+    amount                Int
+    createdAt             DateTime @default(now())
+    updatedAt             DateTime @updatedAt
+    importedFromSplitwise Boolean  @default(false)
+    user                  User     @relation(name: "UserBalance", fields: [userId], references: [id], onDelete: Cascade)
+    friend                User     @relation(name: "FriendBalance", fields: [friendId], references: [id], onDelete: Cascade)
 
     @@id([userId, currency, friendId])
 }
 
 model Group {
-    id              Int            @id @default(autoincrement())
-    publicId        String         @unique
-    name            String
-    userId          Int
-    defaultCurrency String         @default("USD")
-    createdAt       DateTime       @default(now())
-    updatedAt       DateTime       @updatedAt
-    createdBy       User           @relation(fields: [userId], references: [id], onDelete: Cascade)
-    groupUsers      GroupUser[]
-    expenses        Expense[]
-    groupBalances   GroupBalance[]
+    id               Int            @id @default(autoincrement())
+    publicId         String         @unique
+    name             String
+    userId           Int
+    defaultCurrency  String         @default("USD")
+    createdAt        DateTime       @default(now())
+    updatedAt        DateTime       @updatedAt
+    splitwiseGroupId String?        @unique
+    createdBy        User           @relation(fields: [userId], references: [id], onDelete: Cascade)
+    groupUsers       GroupUser[]
+    expenses         Expense[]
+    groupBalances    GroupBalance[]
 }
 
 model GroupUser {

src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/pages/account.tsx

@@ -3,7 +3,7 @@ import MainLayout from '~/components/Layout/MainLayout';
 import { Button } from '~/components/ui/button';
 import Link from 'next/link';
 import { UserAvatar } from '~/components/ui/avatar';
-import { Bell, ChevronRight, Download, FileDown, Github, Star } from 'lucide-react';
+import { Bell, ChevronRight, Download, DownloadCloud, FileDown, Github, Star } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 import { AppDrawer } from '~/components/ui/drawer';
 import { SubmitFeedback } from '~/components/Account/SubmitFeedback';
@@ -170,9 +170,21 @@ const AccountPage: NextPageWithUser = ({ user }) => {
                 <ChevronRight className="h-6 w-6 text-gray-500" />
               )}
             </Button>
+            <Link href="/import-splitwise">
+              <Button
+                variant="ghost"
+                className="text-md w-full justify-between px-0 hover:text-foreground/80"
+              >
+                <div className="flex items-center gap-4">
+                  <DownloadCloud className="h-5 w-5 text-violet-500" />
+                  Import from Splitwise
+                </div>
+                <ChevronRight className="h-6 w-6 text-gray-500" />
+              </Button>
+            </Link>
           </div>
 
-          <div className="mt-20 flex justify-center">
+          <div className="mt-2 flex justify-center">
             <Button
               variant="ghost"
               className="text-orange-600 hover:text-orange-600/90 "