Solved search string issue by updating router.

This commit is contained in:
Jesse Brault 2024-08-07 13:12:16 -05:00
parent 3ea7f6f83a
commit 73cdf19ac6
3 changed files with 14691 additions and 14682 deletions

29245
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,52 +1,52 @@
{ {
"name": "meals-made-easy-app", "name": "meals-made-easy-app",
"private": true, "private": true,
"version": "0.1.0", "version": "0.1.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview", "preview": "vite preview",
"storybook": "storybook dev -p 6006", "storybook": "storybook dev -p 6006",
"build-storybook": "storybook build" "build-storybook": "storybook build"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-regular-svg-icons": "^6.6.0", "@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2", "@fortawesome/react-fontawesome": "^0.2.2",
"@tanstack/react-query": "^5.45.1", "@tanstack/react-query": "^5.45.1",
"@tanstack/react-query-devtools": "^5.51.21", "@tanstack/react-query-devtools": "^5.51.21",
"@tanstack/react-router": "^1.38.1", "@tanstack/react-router": "^1.46.8",
"@tanstack/router-devtools": "^1.39.4", "@tanstack/router-devtools": "^1.39.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@chromatic-com/storybook": "^1.5.0", "@chromatic-com/storybook": "^1.5.0",
"@storybook/addon-essentials": "^8.1.10", "@storybook/addon-essentials": "^8.1.10",
"@storybook/addon-interactions": "^8.1.10", "@storybook/addon-interactions": "^8.1.10",
"@storybook/addon-links": "^8.1.10", "@storybook/addon-links": "^8.1.10",
"@storybook/addon-onboarding": "^8.1.10", "@storybook/addon-onboarding": "^8.1.10",
"@storybook/blocks": "^8.1.10", "@storybook/blocks": "^8.1.10",
"@storybook/react": "^8.1.10", "@storybook/react": "^8.1.10",
"@storybook/react-vite": "^8.1.10", "@storybook/react-vite": "^8.1.10",
"@storybook/test": "^8.1.10", "@storybook/test": "^8.1.10",
"@tanstack/router-vite-plugin": "^1.39.1", "@tanstack/router-vite-plugin": "^1.39.1",
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22", "@types/react-dom": "^18.2.22",
"@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0", "@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-react-refresh": "^0.4.6",
"eslint-plugin-storybook": "^0.8.0", "eslint-plugin-storybook": "^0.8.0",
"prettier": "^3.3.2", "prettier": "^3.3.2",
"storybook": "^8.1.10", "storybook": "^8.1.10",
"typescript": "^5.2.2", "typescript": "^5.2.2",
"vite": "^5.2.0" "vite": "^5.2.0"
} }
} }

View File

@ -1,4 +1,4 @@
import { useQuery } from '@tanstack/react-query' import { useQuery, useQueryClient } from '@tanstack/react-query'
import { createFileRoute, useParams } from '@tanstack/react-router' import { createFileRoute, useParams } from '@tanstack/react-router'
import getRecipe from '../../api/getRecipe' import getRecipe from '../../api/getRecipe'
import { useAuth } from '../../auth' import { useAuth } from '../../auth'
@ -10,21 +10,25 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
from: '/recipes/$username/$slug' from: '/recipes/$username/$slug'
}) })
const authContext = useAuth() const authContext = useAuth()
const queryClient = useQueryClient()
const { const {
isLoading, isLoading,
error, error,
data: recipe data: recipe
} = useQuery({ } = useQuery(
queryKey: ['recipe', username, slug], {
queryFn({ signal: abortSignal }) { queryKey: ['recipe', username, slug],
return getRecipe({ queryFn({ signal: abortSignal }) {
abortSignal, return getRecipe({
authContext, abortSignal,
username, authContext,
slug username,
}) slug
} })
}) }
},
queryClient
)
if (isLoading) { if (isLoading) {
return 'Loading...' return 'Loading...'
} else if (error !== null) { } else if (error !== null) {