Update the current_user check

app/javascript/app/App.tsx

@@ -1,15 +1,44 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import Turbolinks from 'turbolinks'
 import { getUser } from './src/utils'
 import { Main } from './Main'
+import { Navbar } from './Navbar'
+import { Deck } from './src/pages/Deck'
+import { deckLoader } from './loaders'
 
 const router = createBrowserRouter([
-  { path: '/', element: <Main />, loader: getUser },
+  { path: '/', element: <Main /> },
+  { path: '/deck/:deckId', element: <Deck />, loader: deckLoader },
 ])
 
 export const App = (): ReactElement => {
+  const [isInitialized, setIsInitialized] = useState(false)
+  const [user, setUser] = useState(null)
+
+  // Get the current user to determine if they are logged in
+  const initialize = async () => {
+    const { user } = await getUser()
+
+    setUser(user)
+  }
+
+  // Initialize the application on the first render
+  useEffect(() => {
+    if (!isInitialized) {
+      initialize()
+      setIsInitialized(true)
+    }
+  }, [isInitialized])
+
+  // Redirect to the login page if the user is not logged in and the app is initialized
+  if (isInitialized && user === false) {
+    Turbolinks.visit('/login')
+  }
+
   return (
     <>
+      <Navbar />
       <RouterProvider router={router} />
     </>
   )

app/javascript/app/Main.tsx

@@ -1,22 +1,15 @@
 import React from 'react'
-import { Navigate, useLoaderData } from 'react-router'
-import { Navbar } from './Navbar'
 import { Collection } from './src/pages/Collection'
 import { Decks } from './src/pages/Decks'
 import { Search } from './src/pages/Search'
 
 export const Main = () => {
-  const { user } = useLoaderData()
-
-  return user && user.id ? (
+  return (
     <>
-      <Navbar />
       <Search />
       <Collection />
       <hr />
       <Decks />
     </>
-  ) : (
-    <Navigate to="login" />
   )
 }

app/javascript/app/Navbar.tsx

@@ -115,7 +115,7 @@ export const Navbar = () => {
         },
       })
 
-      Turbolinks.visit('/')
+      Turbolinks.visit('/login')
     } catch (error) {
       console.log("Couldn't logout", error)
     }

app/javascript/app/loaders/deckLoader.ts

@@ -0,0 +1,5 @@
+export const deckLoader = ({ params }) => {
+  console.log(params)
+
+  return { id: params.deckId }
+}

app/javascript/app/loaders/index.ts

@@ -0,0 +1 @@
+export * from './deckLoader'

app/javascript/app/src/hooks/useCards.tsx

@@ -114,15 +114,15 @@ export const useCards = (
     if (isCollection) {
       return await collectionCardActions.add(id, options)
     }
-    return await deckCardActions.add(id, deckId, options)
+    return await deckCardActions.add(id, options.deckId, options)
   }
 
   const removeCard = async (id: number, options?: any): Promise<Card> => {
     if (isCollection) {
       return await collectionCardActions.remove(id, options)
     }
 
-    await deckCardActions.remove(id, deckId, options)
+    await deckCardActions.remove(id, options.deckId, options)
   }
 
   const updateCard = async (
@@ -133,7 +133,7 @@ export const useCards = (
     if (isCollection) {
       return await collectionCardActions.update(id, quantity, options)
     }
-    return await deckCardActions.update(id, quantity, deckId, options)
+    return await deckCardActions.update(id, quantity, options.deckId, options)
   }
 
   const getCards = async (cardQuery = new URLSearchParams()): Promise<void> => {
@@ -148,17 +148,22 @@ export const useCards = (
 
     setQuery(cardQuery)
 
+    console.log({ type, cardQuery, options })
+
     let response
 
     if (type === 'search') {
       if (isCollection) {
         response = await collectionCardActions[type](cardQuery)
       } else {
-        response = await deckCardActions[type](cardQuery, Number(deckId))
+        response = await deckCardActions[type](
+          cardQuery,
+          Number(options.deckId)
+        )
       }
     } else if (typeof scope === 'object' || options.deckId) {
       if (type === 'deck') {
-        response = await deckCardActions.deck(cardQuery, Number(deckId))
+        response = await deckCardActions.deck(cardQuery, Number(options.deckId))
       } else {
         response = await deckCardActions[type](cardQuery, options.setId, deckId)
       }

app/javascript/app/src/pages/Deck.tsx

@@ -0,0 +1,172 @@
+import React, { ReactElement, useState, useEffect } from 'react'
+import styled from 'styled-components'
+import Turbolinks from 'turbolinks'
+import { Text, Flex, Container, Button } from 'warlock-ui'
+import { useMediaQuery } from 'react-responsive'
+import {
+  ManaSymbol,
+  Cards,
+  Page,
+  Collapse,
+  DeckForm,
+  SearchCollapse,
+  Drawer,
+} from '../components'
+import { deckActions, usePopup } from '../utils'
+import { Stats } from '../components/decks/Stats'
+import { Deck as DeckType } from '../interface'
+import { useLoaderData } from 'react-router'
+
+const ButtonOptions = styled.div(({ theme, isMobile }) => ({
+  width: isMobile ? '100%' : theme.spaceScale(11),
+  display: 'grid',
+  gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr',
+  gridTemplateRows: isMobile ? '1fr' : 'repeat(2, 1fr)',
+  gridGap: theme.spaceScale(2),
+}))
+
+export const Deck = (): ReactElement => {
+  const { id } = useLoaderData()
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const defaultDeck: DeckType = {
+    id,
+  }
+
+  const isMobile = useMediaQuery({ maxWidth: 650 })
+  const isTablet = useMediaQuery({ maxWidth: 950, minWidth: 651 })
+  const { triggerProps, popupProps, isOpen, close } = usePopup()
+  const [deck, setDeck] = useState(defaultDeck)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const getDeck = async (): Promise<void> => {
+    const deck = await deckActions.get(id)
+
+    setDeck(deck)
+
+    setIsLoading(false)
+  }
+
+  /**
+   * Destroys an existing deck
+   *
+   * @param {number} id - The deck id
+   */
+  const destroy = async (id: number): Promise<void> => {
+    await deckActions.delete(id)
+
+    Turbolinks.visit('/decks')
+  }
+
+  /**
+   * Updates a existing deck
+   *
+   * @param {object} deckParams - New deck params include name, description, format, and ID
+   */
+  const update = async (deckParams): Promise<void> => {
+    const updatedDeck = await deckActions.update(id, deckParams)
+
+    close()
+
+    setDeck(updatedDeck)
+  }
+
+  useEffect(() => {
+    if (isLoading) {
+      getDeck()
+    }
+  }, [isLoading])
+
+  return (
+    <Page defaultScope={deck}>
+      {isLoading ? (
+        <p>...Loading</p>
+      ) : (
+        <>
+          <Flex alignItems="center" justifyContent="start">
+            {(deck.colors || []).length ? (
+              deck.colors.map((mana, i) => (
+                <ManaSymbol
+                  size={isMobile ? 'medium' : 'xLarge'}
+                  key={i}
+                  mana={mana}
+                />
+              ))
+            ) : (
+              <ManaSymbol size={isMobile ? 'medium' : 'xLarge'} mana="C" />
+            )}
+          </Flex>
+          <Flex
+            direction={isMobile ? 'column' : 'row'}
+            alignItems={isMobile ? 'stretch' : 'center'}
+            justifyContent="space-between"
+          >
+            <Flex.Item>
+              <Text
+                as="h1"
+                size={isMobile || isTablet ? 8 : 10}
+                family="source sans"
+              >
+                {deck?.name}
+              </Text>
+            </Flex.Item>
+            <Flex.Item>
+              <ButtonOptions isMobile={isMobile}>
+                <Button
+                  onClick={(): void => {
+                    if (confirm('Are you sure?')) {
+                      destroy(deck.id)
+                    }
+                  }}
+                  color="grey"
+                  shade={10}
+                  variant="text"
+                >
+                  Delete
+                </Button>
+                <Button
+                  color="blue"
+                  shade={7}
+                  variant="outline"
+                  {...triggerProps}
+                >
+                  {isOpen ? 'Cancel' : 'Edit'}
+                </Button>
+              </ButtonOptions>
+            </Flex.Item>
+          </Flex>
+          <Container marginVertical={3}>
+            <Text>{deck?.description}</Text>
+          </Container>
+          <Collapse {...popupProps}>
+            <Collapse.Content>
+              <DeckForm deck={deck} submitCallback={update} />
+            </Collapse.Content>
+          </Collapse>
+          <hr />
+          <Stats stats={deck.stats} />
+          <br />
+          <Button onClick={() => setIsDrawerOpen(!isDrawerOpen)}>
+            Add Cards
+          </Button>
+          <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
+            <Container padding={4}>
+              <Button onClick={() => setIsDrawerOpen(false)}>
+                Close Drawer
+              </Button>
+
+              <SearchCollapse />
+            </Container>
+          </Drawer>
+          <br />
+          <Cards
+            type="deck"
+            showScope
+            imageOnly
+            showFilter={false}
+            options={{ deckId: id }}
+          />
+        </>
+      )}
+    </Page>
+  )
+}