From d63e56663a79cf3833175df53f95ff2620eac279 Mon Sep 17 00:00:00 2001 From: KaemonIsland Date: Fri, 28 Oct 2022 00:30:23 -0400 Subject: [PATCH] Update the current_user check --- app/javascript/app/App.tsx | 33 ++++- app/javascript/app/Main.tsx | 9 +- app/javascript/app/Navbar.tsx | 2 +- app/javascript/app/loaders/deckLoader.ts | 5 + app/javascript/app/loaders/index.ts | 1 + app/javascript/app/src/hooks/useCards.tsx | 15 +- app/javascript/app/src/pages/Deck.tsx | 172 ++++++++++++++++++++++ 7 files changed, 221 insertions(+), 16 deletions(-) create mode 100644 app/javascript/app/loaders/deckLoader.ts create mode 100644 app/javascript/app/loaders/index.ts create mode 100644 app/javascript/app/src/pages/Deck.tsx diff --git a/app/javascript/app/App.tsx b/app/javascript/app/App.tsx index 72d41b7d..9ea67fbe 100644 --- a/app/javascript/app/App.tsx +++ b/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:
, loader: getUser }, + { path: '/', element:
}, + { path: '/deck/:deckId', element: , 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 ( <> + ) diff --git a/app/javascript/app/Main.tsx b/app/javascript/app/Main.tsx index 005ea219..5a2e85c8 100644 --- a/app/javascript/app/Main.tsx +++ b/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 ( <> -
- ) : ( - ) } diff --git a/app/javascript/app/Navbar.tsx b/app/javascript/app/Navbar.tsx index 21efbaeb..d5f3200a 100644 --- a/app/javascript/app/Navbar.tsx +++ b/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) } diff --git a/app/javascript/app/loaders/deckLoader.ts b/app/javascript/app/loaders/deckLoader.ts new file mode 100644 index 00000000..3a974c49 --- /dev/null +++ b/app/javascript/app/loaders/deckLoader.ts @@ -0,0 +1,5 @@ +export const deckLoader = ({ params }) => { + console.log(params) + + return { id: params.deckId } +} diff --git a/app/javascript/app/loaders/index.ts b/app/javascript/app/loaders/index.ts new file mode 100644 index 00000000..26b62b3d --- /dev/null +++ b/app/javascript/app/loaders/index.ts @@ -0,0 +1 @@ +export * from './deckLoader' diff --git a/app/javascript/app/src/hooks/useCards.tsx b/app/javascript/app/src/hooks/useCards.tsx index 5ac2efa4..a2a7c201 100644 --- a/app/javascript/app/src/hooks/useCards.tsx +++ b/app/javascript/app/src/hooks/useCards.tsx @@ -114,7 +114,7 @@ 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 => { @@ -122,7 +122,7 @@ export const useCards = ( 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 => { @@ -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) } diff --git a/app/javascript/app/src/pages/Deck.tsx b/app/javascript/app/src/pages/Deck.tsx new file mode 100644 index 00000000..2b0545ba --- /dev/null +++ b/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 => { + 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 => { + 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 => { + const updatedDeck = await deckActions.update(id, deckParams) + + close() + + setDeck(updatedDeck) + } + + useEffect(() => { + if (isLoading) { + getDeck() + } + }, [isLoading]) + + return ( + + {isLoading ? ( +

...Loading

+ ) : ( + <> + + {(deck.colors || []).length ? ( + deck.colors.map((mana, i) => ( + + )) + ) : ( + + )} + + + + + {deck?.name} + + + + + + + + + + + {deck?.description} + + + + + + +
+ +
+ + setIsDrawerOpen(false)}> + + + + + + +
+ + + )} + + ) +}