-
-
+
- );
+ )
}
+
+export default App
+/* todo:
+ - add caching layer to categories, teams, etc. index calls
+ - make full login page wireframe
+ - fetch moves for pokemon on team page
+ - fix rest of pages to use the new default naming middleware that categories now uses to reduce api calls
+ - add menu pages for teams, boxes, etc.
+ - start abstracting out repeated api calls and functions to reduce code duplication
+ - add a styling palette and start to beautify
+*/
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..ec904f5 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,10 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
import App from './App.tsx'
-createRoot(document.getElementById('root')!).render(
- {response}
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/Test.tsx b/frontend/src/pages/Test.tsx
new file mode 100644
index 0000000..e28fe75
--- /dev/null
+++ b/frontend/src/pages/Test.tsx
@@ -0,0 +1,26 @@
+import { useState } from 'react'
+
+const BASE_URL = 'http://127.0.0.1:8000'
+
+export default function Test() {
+ const [health, setHealth] = useStateHome Page
+ +
+
+
+ )
+}
diff --git a/frontend/src/pages/categories/Categories.tsx b/frontend/src/pages/categories/Categories.tsx
new file mode 100644
index 0000000..bdd02a6
--- /dev/null
+++ b/frontend/src/pages/categories/Categories.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import CategoryMenu from './CategoryMenu.tsx'
+import { createPortal } from 'react-dom'
+
+export default function Categories() {
+ const [categories, setCategories] = useState<{ button: any }[]>([])
+ const [isCategoryMenuVisible, setIsCategoryMenuVisible] = useState{health}
+
+
+ {isCategoryMenuVisible &&
+ createPortal(
+
+ )
+}
diff --git a/frontend/src/pages/categories/Category.tsx b/frontend/src/pages/categories/Category.tsx
new file mode 100644
index 0000000..52f8c7e
--- /dev/null
+++ b/frontend/src/pages/categories/Category.tsx
@@ -0,0 +1,15 @@
+import { useParams } from 'react-router-dom'
+import Teams from '../teams/Teams.tsx'
+
+export default function Category() {
+ const { categoryId } = useParams()
+
+ return (
+
+ {categories.map(category => category.button)}
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/categories/CategoryMenu.tsx b/frontend/src/pages/categories/CategoryMenu.tsx
new file mode 100644
index 0000000..ea3c185
--- /dev/null
+++ b/frontend/src/pages/categories/CategoryMenu.tsx
@@ -0,0 +1,29 @@
+export default function CategoryMenu({ x, y }: { x: number; y: number }) {
+ return (
+ category {categoryId}
+
+
+
+
+ )
+}
diff --git a/frontend/src/pages/teams/Team.tsx b/frontend/src/pages/teams/Team.tsx
new file mode 100644
index 0000000..f835af6
--- /dev/null
+++ b/frontend/src/pages/teams/Team.tsx
@@ -0,0 +1,135 @@
+import { useParams } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import Select from 'react-select'
+
+const BASE_URL = 'http://127.0.0.1:8000'
+
+type PokemonInstance = {
+ id: number
+ box_id?: number
+ team_id?: number
+ pokemon_species_id: number
+ custom_name: string
+ format_id?: number
+}
+
+type PokemonSpecies = {
+ id: number
+ image: number
+ name: string
+ url: string
+}
+export default function Team() {
+ const [pokemon, setPokemon] = useState<{ button: any }[]>([])
+ const { teamId } = useParams()
+
+ const [dropdownItems, setDropdownItems] = useState<{ value: number | null; label: string }[]>([
+ {
+ value: null,
+ label: 'Select A Pokemon',
+ },
+ ])
+ const [selectedItem, setSelectedItem] = useState<{ value: number | null; label: string }>({
+ value: null,
+ label: 'Select A Pokemon',
+ })
+
+ async function loadDropdownItems() {
+ try {
+ const json = await (await fetch(`${BASE_URL}/pokemon-species/index/?per-page=1000`)).json()
+ const items = json.items.map((item: PokemonSpecies) => {
+ return {
+ value: item.id,
+ label: item.name,
+ }
+ })
+ setDropdownItems(items)
+ } catch (err) {
+ console.error(err)
+ }
+ }
+
+ async function loadPokemon() {
+ const json = await (await fetch(`${BASE_URL}/teams/pokemon-index?teamId=${teamId}`)).json()
+
+ const species: { image: string; name: string }[] = json.species.map((item: PokemonSpecies) => {
+ return {
+ image: item.image,
+ name: item.name,
+ }
+ })
+
+ const instance: { id: number }[] = json.instances.map((item: PokemonInstance) => {
+ return {
+ id: item.id,
+ }
+ })
+
+ const pokemon = instance.map((item, index) => {
+ const id = item.id
+ const imageUrl = species[index].image
+ const name = species[index].name
+
+ const imageTag = -
+
- + + +
- + + +
+
+ )
+}
diff --git a/frontend/src/pages/teams/Teams.tsx b/frontend/src/pages/teams/Teams.tsx
new file mode 100644
index 0000000..553f7cb
--- /dev/null
+++ b/frontend/src/pages/teams/Teams.tsx
@@ -0,0 +1,67 @@
+import { Link, useParams } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+
+export default function Teams() {
+ const BASE_URL = 'http://127.0.0.1:8000'
+ const { categoryId } = useParams()
+ const [teams, setTeams] = useState<{ button: any }[]>([])
+
+ async function loadTeams() {
+ const json = await (
+ await fetch(`${BASE_URL}/categories/teams-index?categoryId=${categoryId}`)
+ ).json()
+ const teams = json.map((item: any) => {
+ return {
+ id: item.id,
+ name: item.name,
+ button: (
+
+ ),
+ }
+ })
+ setTeams(teams)
+ }
+
+ async function createNewTeam() {
+ const userId: number = 1 // (placeholder) todo: get userId of currently logged in user / localstorage
+
+ await fetch(`${BASE_URL}/teams/create`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ category_id: categoryId,
+ user_id: userId,
+ name: '',
+ // created_at: '2007-09-24 00:00:00',
+ }),
+ })
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+ })
+ .catch(err => console.log(err))
+
+ await loadTeams()
+ }
+
+ useEffect(() => {
+ loadTeams().then()
+ }, [])
+
+ return (
+
+
+
+ {pokemon.map(p => p.button)}
+
+
+ )
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index ac9e0cf..13217ea 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,14 +3,14 @@ import react from '@vitejs/plugin-react-swc'
// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
- server: {
- proxy: {
- '/api': {
- target: 'http://localhost:8000', // 👈 your Yii server URL
- changeOrigin: true,
- secure: false,
- },
- },
+ plugins: [react()],
+ server: {
+ proxy: {
+ '/api': {
+ target: 'http://localhost:8000',
+ changeOrigin: true,
+ secure: false,
+ },
},
-});
+ },
+})
teams in category {categoryId}
+ +
+ {teams.map(category => category.button)}
+
+
+