fix remix issue

clerk · Jun 6, 2023 · 26c420f · 26c420f
1 parent faf7080
commit 26c420f
Show file tree

Hide file tree

Showing 8 changed files with 19,946 additions and 39,519 deletions.
diff --git a/api/index.js b/api/index.js
diff --git a/api/index.js.map b/api/index.js.map
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -4,129 +4,129 @@ import { Link } from '@remix-run/react'
 import { SignedIn, SignedOut, useAuth } from '@clerk/remix'
 import { getAuth } from '@clerk/remix/ssr.server'
 import {
-    Button,
-    Flex,
-    Heading,
-    Link as ChakraLink,
-    Stack,
-    Text,
-    useBreakpointValue,
+  Button,
+  Flex,
+  Heading,
+  Link as ChakraLink,
+  Stack,
+  Text,
+  useBreakpointValue,
 } from '@chakra-ui/react'
 import { LogoBanner, SongsList } from 'components'
 import { getDB } from 'utils'
 
 const dbErrorMessage =
-    'Something is missing.<br/>Did you set up Supabase yet?<br/>You can find the <a href="https://github.com/clerkinc/remix-bossa-nova-stack#configuring-the-database" target="_blank">instructions in the README file</a>.'
+  'Something is missing.<br/>Did you set up Supabase yet?<br/>You can find the <a href="https://github.com/clerkinc/remix-bossa-nova-stack#configuring-the-database" target="_blank">instructions in the README file</a>.'
 
-export const loader: LoaderFunction = async ({ request }) => {
-    const { userId } = await getAuth(request)
-    if (!userId) return null
+export const loader: LoaderFunction = async (request) => {
+  const { userId } = await getAuth(request)
+  if (!userId) return null
 
-    const db = await getDB(request)
-    if (!db) {
-        return json({ error: dbErrorMessage })
-    }
+  const db = await getDB(request)
+  if (!db) {
+    return json({ error: dbErrorMessage })
+  }
 
-    const { data } = await db.from('bossa_nova_songs').select()
+  const { data } = await db.from('bossa_nova_songs').select()
 
-    if (!data) {
-        return json({ error: dbErrorMessage })
-    }
+  if (!data) {
+    return json({ error: dbErrorMessage })
+  }
 
-    return json({ songs: data })
+  return json({ songs: data })
 }
 
-export const action: ActionFunction = async ({ request }) => {
-    const formData = await request.formData()
-    const { userId } = await getAuth(request)
+export const action: ActionFunction = async (req) => {
+  const formData = await req.request.formData();
+  const { userId } = await getAuth(req)
 
-    const song = formData.get('add-song')
+  const song = formData.get('add-song')
 
-    const db = await getDB(request)
-    if (!db) return null
+  const db = await getDB(req)
+  if (!db) return null
 
-    await db.from('bossa_nova_songs').insert({ body: song, user_id: userId })
-    return null
+  await db.from('bossa_nova_songs').insert({ body: song, user_id: userId })
+  return null
 }
 
 export default function Index() {
-    const { signOut } = useAuth()
-    const data = useLoaderData()
-    const headingSize = useBreakpointValue({ base: 'lg', sm: '2xl', lg: '4xl' })
-
-    return (
-        <Stack
-            justify='center'
-            textAlign='center'
-            h='100vh'
-            flex={1}
-            color='white'
-            gap={20}
+  const { signOut } = useAuth()
+  const data = useLoaderData()
+  const headingSize = useBreakpointValue({ base: 'lg', sm: '2xl', lg: '4xl' })
+
+  return (
+    <Stack
+      justify='center'
+      textAlign='center'
+      h='100vh'
+      flex={1}
+      color='white'
+      gap={20}
+    >
+      <Stack gap={4} p={{ base: 4, md: 8 }}>
+        <Heading
+          as='h1'
+          size={headingSize}
+          textTransform='uppercase'
+          color='green.400'
         >
-            <Stack gap={4} p={{ base: 4, md: 8 }}>
-                <Heading
-                    as='h1'
-                    size={headingSize}
-                    textTransform='uppercase'
-                    color='green.400'
-                >
-                    Bossa Nova Stack
-                </Heading>
-
-                <Text size='lg'>
-                    Check the{' '}
-                    <ChakraLink
-                        href='https://github.com/clerkinc/remix-bossa-nova-stack/blob/main/README.md'
-                        isExternal
-                        textDecoration='underline'
-                        color='white'
-                        _visited={{
-                            color: 'white',
-                        }}
-                    >
-                        README
-                    </ChakraLink>{' '}
-                    file for instructions on how to get this project deployed.
-                </Text>
-
-                <SignedOut>
-                    <Flex justify='center' gap={4}>
-                        <Button as={Link} to='/sign-in' bg='gray.500'>
-                            Sign in
-                        </Button>
-
-                        <Button as={Link} to='/sign-up'>
-                            Sign up
-                        </Button>
-                    </Flex>
-                </SignedOut>
-
-                <SignedIn>
-                    <Stack align='center' gap={4}>
-                        <SongsList songs={data?.songs || []} />
-
-                        {data?.error && (
-                            <Text
-                                color='red.500'
-                                fontWeight='bold'
-                                sx={{
-                                    '& a': {
-                                        textDecoration: 'underline',
-                                    },
-                                }}
-                                dangerouslySetInnerHTML={{
-                                    __html: data.error,
-                                }}
-                            />
-                        )}
-                        <Button onClick={() => signOut()} bg='gray.500'>
-                            Sign out
-                        </Button>
-                    </Stack>
-                </SignedIn>
-            </Stack>
-
-            <LogoBanner />
-        </Stack>
-    )
+          Bossa Nova Stack
+        </Heading>
+
+        <Text size='lg'>
+          Check the{' '}
+          <ChakraLink
+            href='https://github.com/clerkinc/remix-bossa-nova-stack/blob/main/README.md'
+            isExternal
+            textDecoration='underline'
+            color='white'
+            _visited={{
+              color: 'white',
+            }}
+          >
+            README
+          </ChakraLink>{' '}
+          file for instructions on how to get this project deployed.
+        </Text>
+
+        <SignedOut>
+          <Flex justify='center' gap={4}>
+            <Button as={Link} to='/sign-in' bg='gray.500'>
+              Sign in
+            </Button>
+
+            <Button as={Link} to='/sign-up'>
+              Sign up
+            </Button>
+          </Flex>
+        </SignedOut>
+
+        <SignedIn>
+          <Stack align='center' gap={4}>
+            <SongsList songs={data?.songs || []} />
+
+            {data?.error && (
+              <Text
+                color='red.500'
+                fontWeight='bold'
+                sx={{
+                  '& a': {
+                    textDecoration: 'underline',
+                  },
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: data.error,
+                }}
+              />
+            )}
+            <Button onClick={() => signOut()} bg='gray.500'>
+              Sign out
+            </Button>
+          </Stack>
+        </SignedIn>
+      </Stack>
+
+      <LogoBanner />
+    </Stack>
+  )
 }
diff --git a/app/utils/db.server.ts b/app/utils/db.server.ts
@@ -2,28 +2,28 @@ import { getAuth } from '@clerk/remix/ssr.server'
 import { createClient, type SupabaseClient } from '@supabase/supabase-js'
 
 export const getDB = async (
-    request: Request,
+  request: any,
 ): Promise<SupabaseClient | null> => {
-    try {
-        const { userId, getToken } = await getAuth(request)
-        if (!userId) return null
+  try {
+    const { userId, getToken } = await getAuth(request)
+    if (!userId) return null
 
-        const secret = await getToken({ template: 'supabase' })
-        if (!secret) return null
+    const secret = await getToken({ template: 'supabase' })
+    if (!secret) return null
 
-        const supabaseUrl = process.env.SUPABASE_URL || ''
-        const supabaseKey = process.env.SUPABASE_ANON_KEY || ''
+    const supabaseUrl = process.env.SUPABASE_URL || ''
+    const supabaseKey = process.env.SUPABASE_ANON_KEY || ''
 
-        const client = createClient(supabaseUrl, supabaseKey, {
-            global: {
-                headers: {
-                    Authorization: `Bearer ${secret}`,
-                },
-            },
-        })
+    const client = createClient(supabaseUrl, supabaseKey, {
+      global: {
+        headers: {
+          Authorization: `Bearer ${secret}`,
+        },
+      },
+    })
 
-        return client
-    } catch (error) {
-        return null
-    }
+    return client
+  } catch (error) {
+    return null
+  }
 }