Ass prettier organize imports plugin (#121)

* Install plugin

* Format files

drizzle.config.ts

@@ -1,5 +1,5 @@
-import type { Config } from 'drizzle-kit'
 import dotenv from 'dotenv'
+import type { Config } from 'drizzle-kit'
 import path from 'node:path'
 
 dotenv.config({ path: path.resolve(process.cwd(), '.env.local') })

e2e-tests/landing.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
   await page.goto('/en')

package.json

@@ -82,6 +82,7 @@
     "jest-environment-jsdom": "29.7.0",
     "next-axiom": "1.1.0",
     "prettier": "3.0.3",
+    "prettier-plugin-organize-imports": "3.2.3",
     "prettier-plugin-tailwindcss": "0.5.5",
     "server-only": "0.0.1",
     "tailwind-merge": "1.14.0",

prettier.config.mjs

@@ -4,7 +4,7 @@ const config = {
   semi: false,
   singleQuote: true,
   tailwindConfig: './tailwind.config.js',
-  plugins: ['prettier-plugin-tailwindcss'],
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
 }
 
 export default config

src/app/[locale]/(app)/explore/_components/place-list.tsx

@@ -2,8 +2,8 @@
 
 import { Card, CardBody } from '@nextui-org/card'
 import { Image } from '@nextui-org/image'
-import type { FC } from 'react'
 import { LatLngLiteral } from 'leaflet'
+import type { FC } from 'react'
 
 function makeImageUrl<T extends string>(s3key: T | null) {
   if (!s3key) {

src/app/[locale]/(app)/explore/places/[placeId]/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 import { getTranslator } from 'next-intl/server'
 import type { FC } from 'react'
 import { Map } from '~/components/map/map'
-import { onlyTranslatableLocales, LocaleParams } from '~/i18n'
+import { LocaleParams, onlyTranslatableLocales } from '~/i18n'
 import { getTrpc } from '~/server/get-server-thing'
 
 type Params = LocaleParams & { placeId: string }

src/app/[locale]/(app)/hub/layout.tsx

@@ -2,8 +2,8 @@ import { Navbar, NavbarContent, NavbarItem } from '@nextui-org/navbar'
 import { IconHelpCircle } from '@tabler/icons-react'
 import { useTranslations } from 'next-intl'
 import type { FC, PropsWithChildren } from 'react'
-import type { LocaleRouteParams } from '~/i18n'
 import { LinkIconButton } from '~/components/link-icon-button'
+import type { LocaleRouteParams } from '~/i18n'
 
 type HubLayoutProps = PropsWithChildren<LocaleRouteParams>
 

src/app/[locale]/(app)/profile/_components/more-options-modal.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { MoreOptionsModal } from './more-options-modal'
 import { render } from '~/test-utils'
+import { MoreOptionsModal } from './more-options-modal'
 
 describe('MoreOptionsModal', () => {
   it('shows the correct title', async () => {

src/app/[locale]/(app)/profile/_components/profile-login.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from 'next-intl'
 import { FC } from 'react'
 import { LinkButton } from '~/components/link-button'
-import { ContinueWithProvider } from './continue-with-provider'
 import { ContinueWithEmail } from './continue-with-email'
+import { ContinueWithProvider } from './continue-with-provider'
 import { RegisterBanner } from './register-banner'
 
 export const ProfileLogin: FC = () => {

src/app/[locale]/(app)/profile/page.tsx

@@ -2,9 +2,9 @@ import type { Metadata } from 'next'
 import { getTranslator } from 'next-intl/server'
 import type { FC } from 'react'
 import type { LocaleRouteParams } from '~/i18n'
-import { UserPreview } from './_components/user-preview'
 import { getSession } from '~/server/get-server-thing'
 import { ProfileLogin } from './_components/profile-login'
+import { UserPreview } from './_components/user-preview'
 
 export async function generateMetadata({
   params,

src/app/[locale]/complete-profile/_components/complete-profile-form.tsx

@@ -6,11 +6,11 @@ import { useSession } from 'next-auth/react'
 import { useTranslations } from 'next-intl'
 import { useRouter } from 'next-intl/client'
 import { FC, FormEvent, useState } from 'react'
+import { LinkButton } from '~/components/link-button'
+import { UserAvatar } from '~/components/user-avatar'
+import { UpdateSessionSchemaType } from '~/schemas/profile'
 import { trpc } from '~/trpc'
 import { UploadProfileImageModal } from './upload-profile-image-modal'
-import { UpdateSessionSchemaType } from '~/schemas/profile'
-import { UserAvatar } from '~/components/user-avatar'
-import { LinkButton } from '~/components/link-button'
 
 export const CompleteProfileForm: FC<{
   className?: string

src/app/[locale]/complete-profile/_components/upload-profile-image-modal.tsx

@@ -1,21 +1,21 @@
 'use client'
 
+import { Button } from '@nextui-org/button'
+import { Input } from '@nextui-org/input'
 import {
   Modal,
   ModalBody,
   ModalContent,
-  ModalHeader,
   ModalFooter,
+  ModalHeader,
   useDisclosure,
 } from '@nextui-org/modal'
-import { Button } from '@nextui-org/button'
-import { Input } from '@nextui-org/input'
-import { useTranslations } from 'next-intl'
-import { FC, useState, FormEvent, ChangeEvent } from 'react'
 import { useSession } from 'next-auth/react'
-import { UpdateSessionSchemaType } from '~/schemas/profile'
-import { AlertBox } from '~/components/alert-box'
+import { useTranslations } from 'next-intl'
+import { ChangeEvent, FC, FormEvent, useState } from 'react'
 import { UploadProfileImageResponse } from '~/app/api/upload/profile-image/route'
+import { AlertBox } from '~/components/alert-box'
+import { UpdateSessionSchemaType } from '~/schemas/profile'
 
 const uploadProfileImage = async ({ file }: { file: File | null }) => {
   const body = new FormData()

src/app/[locale]/complete-profile/page.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from 'next'
 import { getTranslator, redirect } from 'next-intl/server'
 import type { FC } from 'react'
 import type { LocaleRouteParams } from '~/i18n'
-import { CompleteProfileForm } from './_components/complete-profile-form'
 import { getSession } from '~/server/get-server-thing'
+import { CompleteProfileForm } from './_components/complete-profile-form'
 
 export async function generateMetadata({
   params,

src/app/api/upload/profile-image/route.ts

@@ -1,11 +1,11 @@
+import { eq } from 'drizzle-orm'
+import { withAxiom } from 'next-axiom'
+import { NextResponse } from 'next/server'
 import sharp from 'sharp'
 import { deleteFromS3, uploadToS3 } from '~/server/aws'
 import { db } from '~/server/db/db'
-import { eq } from 'drizzle-orm'
 import { users } from '~/server/db/schema'
-import { NextResponse } from 'next/server'
 import { getSession } from '~/server/get-server-thing'
-import { withAxiom } from 'next-axiom'
 
 export const POST = withAxiom(async (request) => {
   const session = await getSession()

src/components/icons/place-icon.tsx

@@ -1,7 +1,7 @@
 import {
+  Icon,
   IconBeach,
   IconBuildingCastle,
-  Icon,
   IconCircle,
   IconFlag,
   TablerIconsProps,

src/components/link-icon-button.tsx

@@ -1,5 +1,5 @@
-import { LinkButton } from './link-button'
 import { FC, ReactNode } from 'react'
+import { LinkButton } from './link-button'
 
 export const LinkIconButton: FC<{
   href: string

src/components/map/map.tsx

@@ -1,5 +1,5 @@
-import dynamic from 'next/dynamic'
 import { IconLoader } from '@tabler/icons-react'
+import dynamic from 'next/dynamic'
 
 export const Map = dynamic(
   async () => {

src/components/map/place-marker.tsx

@@ -1,7 +1,7 @@
-import { cn } from '~/helpers/cn'
+import { FC } from 'react'
 import { PlaceIcon } from '~/components/icons/place-icon'
+import { cn } from '~/helpers/cn'
 import { PlaceType } from '~/server/db/constants/places'
-import { FC } from 'react'
 
 export const PlaceMarker: FC<{
   type?: PlaceType

src/components/navbar/bottom-navbar.tsx

@@ -8,14 +8,14 @@ import {
   IconUser,
   IconUserFilled,
 } from '@tabler/icons-react'
-import { DbEnvironmentTag } from '../db-environment-tag'
-import { BottomNavbarItem } from './bottom-navbar-item'
-import { getSession } from '~/server/get-server-thing'
-import { cn } from '~/helpers/cn'
+import { User } from 'next-auth'
+import { useTranslations } from 'next-intl'
 import { FC } from 'react'
+import { cn } from '~/helpers/cn'
+import { getSession } from '~/server/get-server-thing'
+import { DbEnvironmentTag } from '../db-environment-tag'
 import { UserAvatar } from '../user-avatar'
-import { useTranslations } from 'next-intl'
-import { User } from 'next-auth'
+import { BottomNavbarItem } from './bottom-navbar-item'
 
 export const BottomNavbar: FC<{
   className?: string

src/components/text-link.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { cn } from '~/helpers/cn'
 import Link from 'next-intl/link'
 import { forwardRef, type ComponentPropsWithoutRef } from 'react'
+import { cn } from '~/helpers/cn'
 
 export const TextLink = forwardRef<
   HTMLAnchorElement,

src/components/user-avatar.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react'
 import { Avatar, AvatarProps } from '@nextui-org/avatar'
+import { FC } from 'react'
 
 function getProfileImage(user: User) {
   if (user.image) return user.image

src/server/api/router/auth.ts

@@ -1,12 +1,12 @@
 import 'server-only'
 
-import { registerSchema } from '~/schemas/auth'
 import bcrypt from 'bcryptjs'
+import { eq } from 'drizzle-orm'
+import { v4 as uuidv4 } from 'uuid'
+import { registerSchema } from '~/schemas/auth'
 import { db } from '~/server/db/db'
 import { users } from '~/server/db/schema/users'
 import { procedure, router } from '~/server/trpc'
-import { eq } from 'drizzle-orm'
-import { v4 as uuidv4 } from 'uuid'
 
 export const authRouter = router({
   register: procedure.input(registerSchema).mutation(async ({ input }) => {

src/server/api/router/index.ts

@@ -1,8 +1,8 @@
 import 'server-only'
 
 import { router } from '~/server/trpc'
-import { placesRouter } from './places'
 import { authRouter } from './auth'
+import { placesRouter } from './places'
 import { profileRouter } from './profile'
 
 export const apiRouter = router({

src/server/api/router/places.ts

@@ -1,15 +1,15 @@
 import 'server-only'
 
-import { asc, eq, sql, and } from 'drizzle-orm'
+import { and, asc, eq, sql } from 'drizzle-orm'
 import { getPlacesSchema, listPlacesSchema } from '~/schemas/places'
 import { db } from '~/server/db/db'
 import { places, placesTranslations } from '~/server/db/schema/places'
+import { selectPoint } from '~/server/helpers/spatial-data'
 import { procedure, router } from '~/server/trpc'
 import {
   flattenTranslations,
   selectTranslations,
 } from '../../helpers/translations'
-import { selectPoint } from '~/server/helpers/spatial-data'
 
 const allPlacesTranslationsInLocale = db
   .select()

src/server/auth.ts

@@ -1,16 +1,16 @@
 import 'server-only'
 
 import { DrizzleAdapter } from '@auth/drizzle-adapter'
+import bcrypt from 'bcryptjs'
+import { eq } from 'drizzle-orm'
 import { type AuthOptions } from 'next-auth'
-import GoogleProvider from 'next-auth/providers/google'
 import CredentialsProvider from 'next-auth/providers/credentials'
+import GoogleProvider from 'next-auth/providers/google'
 import { env } from '~/env.mjs'
-import { db } from './db/db'
-import bcrypt from 'bcryptjs'
 import { loginSchema } from '~/schemas/auth'
-import { eq } from 'drizzle-orm'
-import { users } from './db/schema'
 import { updateSessionSchema } from '~/schemas/profile'
+import { db } from './db/db'
+import { users } from './db/schema'
 
 export const authOptions: AuthOptions = {
   // Note: Cast required to workaround issue https://github.com/nextauthjs/next-auth/issues/8283

src/server/aws.ts

@@ -1,9 +1,9 @@
 import 'server-only'
 
 import {
-  S3Client,
-  PutObjectCommand,
   DeleteObjectCommand,
+  PutObjectCommand,
+  S3Client,
 } from '@aws-sdk/client-s3'
 import { env } from '~/env.mjs'
 

src/server/db/db.ts

@@ -1,12 +1,12 @@
 import 'server-only'
 import { env } from '~/env.mjs'
 
+import { connect } from '@planetscale/database'
 import { drizzle as drizzleMysql } from 'drizzle-orm/mysql2'
 import {
   PlanetScaleDatabase,
   drizzle as drizzlePlanetscale,
 } from 'drizzle-orm/planetscale-serverless'
-import { connect } from '@planetscale/database'
 import { createConnection } from 'mysql2'
 import * as schema from './schema'
 

src/server/db/migrate.mjs

@@ -1,7 +1,7 @@
 /* eslint-env node */
 // @ts-check
-import { migrate } from 'drizzle-orm/mysql2/migrator'
 import { drizzle as drizzleMysql } from 'drizzle-orm/mysql2'
+import { migrate } from 'drizzle-orm/mysql2/migrator'
 import { createConnection } from 'mysql2'
 
 if (process.env.USE_LOCAL_DB !== 'true') {

src/server/db/schema/places.ts

@@ -1,7 +1,7 @@
 import { text } from 'drizzle-orm/mysql-core'
+import { pointType } from '../../helpers/spatial-data'
 import { mysqlTableWithTranslations } from '../../helpers/translations'
 import { s3ObjectKey } from '../utilities'
-import { pointType } from '../../helpers/spatial-data'
 
 export const {
   normalTable: places,

src/test-utils/render.tsx

@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react'
 import { render, RenderOptions } from '@testing-library/react'
+import { Session } from 'next-auth'
 import { NextIntlClientProvider } from 'next-intl'
+import React, { ReactElement } from 'react'
 import { AuthProvider } from '~/components/providers/auth-provider'
 import { NextuiProvider } from '~/components/providers/nextui-provider'
 import { TrpcProvider } from '~/components/providers/trpc-provider'
-import { Session } from 'next-auth'
 
 import messages from '~/messages/en.json'