More TS support

.eslintrc.json

@@ -1,3 +1,25 @@
 {
-  "extends": "next/core-web-vitals"
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off",
+        "react/jsx-uses-react": "off"
+    }
 }

app/(app)/billing/change-plan/page.tsx

@@ -1,6 +1,5 @@
 import { getSession } from "@/lib/auth";
 import type { Metadata } from 'next';
-import prisma from "@/lib/prisma";
 import Link from 'next/link';
 import { PlansComponent } from '@/components/manage';
 import { getPlans, getSubscription } from '@/lib/data';

app/(app)/billing/page.tsx

@@ -1,12 +1,7 @@
 import { getSession } from "@/lib/auth";
 import type { Metadata } from 'next';
-import prisma from "@/lib/prisma";
-import Plans from '@/components/plan';
 import { SubscriptionComponent } from '@/components/subscription';
 import { getPlans, getSubscription } from '@/lib/data';
-import LemonSqueezy from '@lemonsqueezy/lemonsqueezy.js'
-
-const ls = new LemonSqueezy(process.env.LEMONSQUEEZY_API_KEY);
 
 
 export const metadata: Metadata = {

app/(app)/billing/refresh-plans/page.tsx

@@ -1,27 +1,21 @@
 import prisma from "@/lib/prisma";
 import LemonSqueezy from '@lemonsqueezy/lemonsqueezy.js';
-import type { Variant, Product, ProductAttributes } from '@/types/types';
+import type { Variant, Product, ProductAttributes, ApiQueryParams } from '@/types/types';
 
 
 const ls = new LemonSqueezy(process.env.LEMONSQUEEZY_API_KEY);
 
 
-interface QueryParams {
-  include?: string,
-  perPage?: number,
-  page?: number
-}
-
 async function getPlans() {
   // Fetch data from Lemon Squeezy
 
-  const params: QueryParams = { include: 'product', 'perPage': 50 }
+  const params: ApiQueryParams = { include: 'product', perPage: 50 }
 
-  var hasNextPage = true
-  var page = 1
+  let hasNextPage = true;
+  let page = 1;
 
-  var variants: Variant[] = []
-  var products: Product[] = []
+  let variants: Variant[] = []
+  let products: Product[] = []
 
   while (hasNextPage) {
     const resp = await ls.getVariants(params);
@@ -38,22 +32,22 @@ async function getPlans() {
   }
 
   // Nest products inside variants
-  let prods: Record<string, ProductAttributes> = {};
-  for (var i = 0; i < products.length; i++) {
+  const prods: Record<string, ProductAttributes> = {};
+  for (let i = 0; i < products.length; i++) {
     prods[products[i]['id']] = products[i]['attributes']
   }
-  for (var i = 0; i < variants.length; i++) {
+  for (let i = 0; i < variants.length; i++) {
     variants[i]['product'] = prods[variants[i]['attributes']['product_id']]
   }
 
 
   // Save locally
-  var variantId,
+  let variantId,
       variant,
       product,
       productId
 
-  for (var i = 0; i < variants.length; i++) {
+  for (let i = 0; i < variants.length; i++) {
 
     variant = variants[i]
 
@@ -111,12 +105,12 @@ async function getPlans() {
 }
 
 export default async function Page() {
-  const plans = await getPlans()
+  await getPlans()
 
   return (
-    <>
+    <p>
       Done!
-    </>
+    </p>
   )
 }
 

app/(app)/billing/webhook/route.ts

@@ -1,30 +1,11 @@
-import { NextResponse } from 'next/server';
 import { type NextRequest } from 'next/server'
-import { Readable } from 'node:stream';
 import prisma from "@/lib/prisma";
-
-
-interface UpdateData {
-  orderId: number,
-  name: string,
-  email: string,
-  status: string,
-  renewsAt: string,
-  endsAt: string,
-  trialEndsAt: string,
-  planId: number,
-  userId: string,
-  price: number | null
-}
-
-interface CreateData extends UpdateData {
-  lemonSqueezyId?: number
-}
+import { SubscriptionCreateData, SubscriptionUpdateData } from '@/types/types';
 
 
 async function processEvent(event) {
 
-  var processingError = ''
+  let processingError = ''
 
   const customData = event.body['meta']['custom_data'] || null
 
@@ -59,9 +40,9 @@ async function processEvent(event) {
 
         // Update the subscription
 
-        var lemonSqueezyId = parseInt(obj['id'])
+        const lemonSqueezyId = parseInt(obj['id'])
 
-        var updateData: UpdateData = {
+        const updateData: SubscriptionUpdateData = {
           orderId: data['order_id'],
           name: data['user_name'],
           email: data['user_email'],
@@ -74,7 +55,7 @@ async function processEvent(event) {
           price: event.eventName == 'subscription_created' ? plan['price'] : null
         }
 
-        const createData: CreateData = updateData
+        const createData: SubscriptionCreateData = updateData
         createData.lemonSqueezyId = lemonSqueezyId
         createData.price = plan.price
 
@@ -145,7 +126,6 @@ export async function POST(request: NextRequest) {
 
   // Process
   processEvent(event)
-
 
   return new Response('Done');
 }

app/api/subscriptions/[id]/route.ts

@@ -1,5 +1,4 @@
 import { NextResponse } from 'next/server';
-import { getSession } from "@/lib/auth";
 import { getPlan } from '@/lib/data';
 import LemonSqueezy from '@lemonsqueezy/lemonsqueezy.js'
 
@@ -20,12 +19,10 @@ export async function GET(request, { params }) {
 
 
 export async function POST(request, { params }) {
-  const session = await getSession();
 
   const res = await request.json()
 
-  var subscription;
-
+  let subscription;
 
   if (res.variantId && res.productId) {
 

app/layout.tsx

@@ -1,5 +1,3 @@
-import { Inter } from 'next/font/google'
-const inter = Inter({ subsets: ['latin'] })
 import { Providers } from "./providers"
 
 import './globals.css'

app/providers.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { SessionProvider } from "next-auth/react";
-import { Toaster } from "sonner";
+import { SessionProvider } from "next-auth/react"
+import { Toaster } from "sonner"
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <SessionProvider>
       <Toaster richColors position="top-center" />
       {children}
     </SessionProvider>
-  );
-};
+  )
+}

components/manage.tsx

@@ -4,9 +4,11 @@ import { useState } from 'react';
 import { Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import Plans from '@/components/plan';
+import { SubscriptionRecord } from '@/types/types';
+import { Subscription } from '@prisma/client';
 
 
-export function UpdateBillingLink({ subscription, type }) {
+export function UpdateBillingLink({ subscription, elementType }: { subscription: SubscriptionRecord; elementType: string }) {
 
   const [isMutating, setIsMutating] = useState(false)
 
@@ -31,7 +33,7 @@ export function UpdateBillingLink({ subscription, type }) {
     }
   }
 
-  if (type == 'button') {
+  if (elementType == 'button') {
     return (
       <a href="" className="inline-block px-6 py-2 rounded-full bg-amber-200 text-amber-800 font-bold" onClick={openUpdateModal}>
         <Loader2 className={"animate-spin inline-block relative top-[-1px] mr-2" + (!isMutating ? ' hidden' : '')} />
@@ -48,7 +50,12 @@ export function UpdateBillingLink({ subscription, type }) {
   }
 }
 
-export function CancelLink({ subscription, setSubscription }) {
+interface Props {
+  subscription: SubscriptionRecord,
+  setSubscription: Function
+}
+
+export function CancelLink({ subscription, setSubscription }: Props) {
 
   const [isMutating, setIsMutating] = useState(false)
 
@@ -97,7 +104,7 @@ export function CancelLink({ subscription, setSubscription }) {
 }
 
 
-export function ResumeButton({ subscription, setSubscription }) {
+export function ResumeButton({ subscription, setSubscription }: Props) {
 
   const [isMutating, setIsMutating] = useState(false)
 
@@ -147,7 +154,7 @@ export function ResumeButton({ subscription, setSubscription }) {
 }
 
 
-export function PauseLink({ subscription, setSubscription }) {
+export function PauseLink({ subscription, setSubscription }: Props) {
 
   const [isMutating, setIsMutating] = useState(false)
 
@@ -196,7 +203,7 @@ export function PauseLink({ subscription, setSubscription }) {
 }
 
 
-export function UnpauseButton({ subscription, setSubscription }) {
+export function UnpauseButton({ subscription, setSubscription }: Props) {
 
   const [isMutating, setIsMutating] = useState(false)
 
@@ -246,7 +253,7 @@ export function UnpauseButton({ subscription, setSubscription }) {
 }
 
 
-export function PlansComponent({ plans, sub }) {
+export function PlansComponent({ plans, sub }: { plans: object, sub: Subscription}) {
 
   const [subscription, setSubscription] = useState(() => {
     if (sub) {

components/plan.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import PlanButton from '@/components/plan-button';
 
 
-function createMarkup(html: string): Object {
+function createMarkup(html: string): object {
   return {__html: html};
 }
 
@@ -27,7 +27,7 @@ function IntervalSwitcher({ intervalValue, changeInterval }) {
         <label className="toggle relative inline-block">
           <input 
             type="checkbox"
-            checked={intervalValue == 'year' ? 'checked': ''}
+            checked={intervalValue == 'year'}
             onChange={(e) => changeInterval(e.target.checked ? 'year' : 'month')}
           />
           <span className="slider absolute rounded-full bg-gray-300 shadow-md"></span>
@@ -69,8 +69,8 @@ function Plan({ plan, subscription, intervalValue, setSubscription }) {
 
 
 interface PlanProps {
-  plans: Object,
-  subscription?: Object,
+  plans: object,
+  subscription?: object,
   setSubscription?: Function
 }