fix: autocomplete from scryfall, checkbox id, token expiration (#450)

SpaceCowMedia · Dec 13, 2023 · 634ab7d · 634ab7d
1 parent 8f87247
commit 634ab7d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/frontend/components/submission/CardSubmission/CardSubmission.tsx b/frontend/components/submission/CardSubmission/CardSubmission.tsx
@@ -3,6 +3,7 @@ import AutocompleteInput from "../../advancedSearch/AutocompleteInput/Autocomple
 import {useEffect, useState} from "react";
 import Select, {MultiValue} from 'react-select'
 import TemplateService from "../../../services/template.service";
+import CardService from "../../../services/card.service";
 
 const ZONE_OPTIONS = [
   {value: 'H', label: 'Hand'},
@@ -21,15 +22,13 @@ type Props = {
   index: number
   template?: boolean
 }
-
-const cardAutocompleteOptions = (require("../../../../autocomplete-data/cards.json")).map((card: any) => ({value: card.label, label: card.label}))
-// const cardAutocompleteOptions = require("../../../../autocomplete-data/cards.json")
 const CardSubmission = ({card, onChange, index, onDelete, template}: Props) => {
 
   const [nameInput, setNameInput] = useState(card.card || '')
   const [templateInput, setTemplateInput] = useState(card.template || '')
   const [templateOptions, setTemplateOptions] = useState<Array<{value: string, label: string}>>([])
   const [templatesLoading, setTemplatesLoading] = useState(false)
+  const [cardAutocompleteOptions, setCardAutocompleteOptions] = useState<Array<{value: string, label: string}>>([])
 
   const handleZoneChange = (zoneLocations: MultiValue<{value: string, label: string}>) => {
     const newZoneList = zoneLocations.map(zone => zone.value)
@@ -52,7 +51,7 @@ const CardSubmission = ({card, onChange, index, onDelete, template}: Props) => {
     setTemplatesLoading(true)
     TemplateService.getTemplates(value)
       .then(response => {
-        setTemplateOptions(response.results.map(template => ({value: template.template, label: template.template})))
+        setTemplateOptions(response.results.map(template => ({value: template.name, label: template.name})))
         setTemplatesLoading(false)
       }).catch(e => console.error(e))
 
@@ -63,6 +62,11 @@ const CardSubmission = ({card, onChange, index, onDelete, template}: Props) => {
     onChange({...card as SubmissionCardType, card: value})
   }
 
+  useEffect(() => {
+    CardService.getCardNames()
+      .then(names => setCardAutocompleteOptions(names.map(name => ({value: name, label: name}))))
+  }, [])
+
   return (
     <div className="border border-gray-250 rounded  flex-col p-5 shadow-lg mb-5 relative">
 
@@ -174,12 +178,12 @@ const CardSubmission = ({card, onChange, index, onDelete, template}: Props) => {
       <div className="mt-8">
         <input
           className="mr-2 cursor-pointer"
-          id={`commander-checkbox-${index}`}
+          id={`commander-checkbox-${template ? 't' : 'c'}-${index}`}
           value={card.card}
           onChange={() => onChange({...card, mustBeCommander: !card.mustBeCommander})}
           type="checkbox"
         />
-        <label className="cursor-pointer select-none" htmlFor={`commander-checkbox-${index}`}>Must be commander?</label>
+        <label className="cursor-pointer select-none" htmlFor={`commander-checkbox-${template ? 't' : 'c'}-${index}`}>Must be commander?</label>
       </div>
     </div>
   )

diff --git a/frontend/services/card.service.ts b/frontend/services/card.service.ts
@@ -0,0 +1,18 @@
+import requestService from "./request.service";
+
+let cachedNames: string[] | null = null
+const SCRYFALL_NAME_URL = 'https://api.scryfall.com/catalog/card-names'
+const getCardNames = async (): Promise<string[]> => {
+  if (cachedNames) return cachedNames
+  const res = await requestService.get(SCRYFALL_NAME_URL)
+  const data = res.data as string[]
+  const processedNames = data.filter(n => !n.includes('A-')).map(n => n.split(' // ')[0])
+  cachedNames = processedNames
+  return processedNames
+}
+
+const CardService = {
+  getCardNames
+}
+
+export default CardService
diff --git a/frontend/services/template.service.ts b/frontend/services/template.service.ts
@@ -1,9 +1,9 @@
 import requestService from "./request.service";
 import {TemplateSubmissionType} from "../types/submission";
-import {PaginatedResponse} from "../types/api";
+import {PaginatedResponse, TemplateResponseType} from "../types/api";
 
 const getTemplates = async (name: string) => {
-  return requestService.get<PaginatedResponse<TemplateSubmissionType>>(`/api/templates/?q=${name}`)
+  return requestService.get<PaginatedResponse<TemplateResponseType>>(`/api/templates/?q=${name}`)
 }
 
 const TemplateService = {

diff --git a/frontend/services/token.service.ts b/frontend/services/token.service.ts
@@ -50,7 +50,7 @@ function getToken(): Promise<string> {
 
   if (!decodedToken) return fetchNewToken().then(setToken)
   if (decodedToken.exp > expirationCutoff) {
-    CookieService.set('csbJwt', jwt)
+    CookieService.set('csbJwt', jwt, 'day')
 
     return jwt
   }
@@ -75,7 +75,7 @@ function getTokenFromServerContext(
 
   if (!decodedToken) return fetchNewToken(refreshToken).then(setToken)
   if (decodedToken.exp > expirationCutoff) {
-    CookieService.set('csbJwt', jwt)
+    CookieService.set('csbJwt', 'day')
 
     return jwt
   }
@@ -86,8 +86,8 @@ function getTokenFromServerContext(
 function setToken({ access, refresh }: RefreshResponse) {
   const jwt = access
 
-  CookieService.set('csbJwt', jwt)
-  if (refresh) CookieService.set('csbRefresh', refresh)
+  CookieService.set('csbJwt', jwt, 'day')
+  if (refresh) CookieService.set('csbRefresh', refresh, 'day')
 
   return jwt
 }

diff --git a/frontend/types/api.ts b/frontend/types/api.ts
@@ -4,3 +4,10 @@ export type PaginatedResponse<T> = {
   previous: string | null
   results: T[]
 }
+
+export type TemplateResponseType = {
+  id: number
+  name: string
+  scryfallApi: string
+  scryfallQuery: string
+}