From c5c1f69a906971ef51c73aa13412d5fa23b6afc4 Mon Sep 17 00:00:00 2001 From: Beto Date: Sat, 6 Apr 2024 16:37:33 -0300 Subject: [PATCH] feat(web): document title --- web/index.html | 4 +-- web/src/components/DrinksList/DrinksList.tsx | 20 ++--------- web/src/pages/Drink/Drink.tsx | 3 ++ web/src/pages/Drinks/Drinks.tsx | 4 +++ web/src/pages/Highlight/Highlight.tsx | 8 +++-- web/src/pages/Highlights/Highlights.tsx | 3 ++ web/src/pages/Home/Home.tsx | 33 +++++++++++-------- web/src/pages/Instruction/Instruction.tsx | 8 +++-- web/src/pages/Instructions/Instructions.tsx | 3 ++ web/src/pages/Knowledge/Knowledge.tsx | 10 ++++-- web/src/pages/Knowledges/Knowledges.tsx | 3 ++ .../utils/getCategoryName/getCategoryName.ts | 16 +++++++++ web/src/utils/getCategoryName/index.ts | 1 + 13 files changed, 75 insertions(+), 41 deletions(-) create mode 100644 web/src/utils/getCategoryName/getCategoryName.ts create mode 100644 web/src/utils/getCategoryName/index.ts diff --git a/web/index.html b/web/index.html index 224be35..ba2309e 100644 --- a/web/index.html +++ b/web/index.html @@ -2,9 +2,9 @@ - + - Drinquepedia + Drinquepedia | Things go better with a cocktail!
diff --git a/web/src/components/DrinksList/DrinksList.tsx b/web/src/components/DrinksList/DrinksList.tsx index 800ae5d..78ec513 100644 --- a/web/src/components/DrinksList/DrinksList.tsx +++ b/web/src/components/DrinksList/DrinksList.tsx @@ -1,6 +1,7 @@ import { Drink } from "@/types/drink"; import Pagination from "@/components/Pagination"; import DrinkRow from "@/components/DrinkRow"; +import getCategoryName from "@/utils/getCategoryName"; const DrinksList = ({ drinks, @@ -15,23 +16,6 @@ const DrinksList = ({ page: number; perPage: number; }) => { - const getCategoryName = (): string => { - const categories: { [key: string]: string } = { - martinis: "Martinis", - tropicais: "Tropicais", - frozen: "Frozen", - quentes: "Quentes", - shot: "Shots", - classicos: "Clássicos", - semalcool: "Sem Álcool", - caipirinhas: "Caipirinhas clássicas", - smoothies: "Smoothies", - }; - return ( - categories[category as keyof typeof categories] || "Todos os drinques" - ); - }; - const drinksList = category === "caipirinhas" ? drinks?.filter((drink) => @@ -49,7 +33,7 @@ const DrinksList = ({ return (

- {getCategoryName()} + {getCategoryName(category)}

{count} drinques
{drinksList?.map((drink) => )} diff --git a/web/src/pages/Drink/Drink.tsx b/web/src/pages/Drink/Drink.tsx index e0dcdd8..42fd87e 100644 --- a/web/src/pages/Drink/Drink.tsx +++ b/web/src/pages/Drink/Drink.tsx @@ -1,4 +1,5 @@ import { useParams } from "react-router-dom"; +import { useDocumentTitle } from "usehooks-ts"; import useGetDrink from "@/api/useGetDrink"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; @@ -9,6 +10,8 @@ const Drink = () => { const { drinkId } = useParams(); const { isPending, error, data: drink } = useGetDrink(drinkId); + useDocumentTitle(drink ? `${drink?.name} - Drinquepedia` : "Drinquepedia"); + if (isPending) { return (
diff --git a/web/src/pages/Drinks/Drinks.tsx b/web/src/pages/Drinks/Drinks.tsx index 8c42253..1a1adb8 100644 --- a/web/src/pages/Drinks/Drinks.tsx +++ b/web/src/pages/Drinks/Drinks.tsx @@ -1,10 +1,12 @@ import { useSearchParams } from "react-router-dom"; +import { useDocumentTitle } from "usehooks-ts"; import useGetDrinks from "@/api/useGetDrinks"; import SearchBar from "@/components/SearchBar"; import DrinksList from "@/components/DrinksList"; import DrinksListHighlights from "@/components/DrinksListHighlights"; import Loadings from "@/components/Loadings"; import Errors from "@/components/Errors"; +import getCategoryName from "@/utils/getCategoryName"; const Drinks = ({ category }: { category?: string }) => { const perPage = category === "caipirinhas" ? 50 : 20; @@ -22,6 +24,8 @@ const Drinks = ({ category }: { category?: string }) => { alcoholicContent, }); + useDocumentTitle(`${getCategoryName(category)} - Drinquepedia`); + return ( <> {!category && } diff --git a/web/src/pages/Highlight/Highlight.tsx b/web/src/pages/Highlight/Highlight.tsx index 68f0c60..77c859b 100644 --- a/web/src/pages/Highlight/Highlight.tsx +++ b/web/src/pages/Highlight/Highlight.tsx @@ -1,4 +1,5 @@ import { Link, useParams } from "react-router-dom"; +import { useDocumentTitle } from "usehooks-ts"; import useGetHighlight from "@/api/useGetHighlight"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; @@ -8,6 +9,11 @@ import { Button } from "@/components/ui/button"; const Highlight = () => { const { highlightId } = useParams(); const { isPending, error, data } = useGetHighlight({ highlightId }); + const highlight = data?.highlight; + + useDocumentTitle( + highlight ? `${highlight.title} - Drinquepedia` : "Drinquepedia", + ); if (isPending) { return ( @@ -21,8 +27,6 @@ const Highlight = () => { return ; } - const highlight = data?.highlight; - return (
diff --git a/web/src/pages/Highlights/Highlights.tsx b/web/src/pages/Highlights/Highlights.tsx index 1d4e904..7d12605 100644 --- a/web/src/pages/Highlights/Highlights.tsx +++ b/web/src/pages/Highlights/Highlights.tsx @@ -1,3 +1,4 @@ +import { useDocumentTitle } from "usehooks-ts"; import useGetHighlights from "@/api/useGetHighlights"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; @@ -6,6 +7,8 @@ import HighlightCard from "@/components/HighlightCard"; const Highlights = () => { const { isPending, error, data } = useGetHighlights(); + useDocumentTitle("Destaques - Drinquepedia"); + if (isPending) { return (
diff --git a/web/src/pages/Home/Home.tsx b/web/src/pages/Home/Home.tsx index 8f903d6..42f626a 100644 --- a/web/src/pages/Home/Home.tsx +++ b/web/src/pages/Home/Home.tsx @@ -1,21 +1,26 @@ +import { useDocumentTitle } from "usehooks-ts"; import FeaturedHighlights from "@/components/FeaturedHighlights"; import SecondHighlights from "@/components/SecondHighlights"; import ThirdHighlights from "@/components/ThirdHighlights"; import FourthHighlights from "@/components/FourthHighlights"; -const Home = () => ( - <> -
- - -
-
- -
-
- -
- -); +const Home = () => { + useDocumentTitle("Drinquepedia | Things go better with a cocktail!"); + + return ( + <> +
+ + +
+
+ +
+
+ +
+ + ); +}; export default Home; diff --git a/web/src/pages/Instruction/Instruction.tsx b/web/src/pages/Instruction/Instruction.tsx index 225b6e5..5ad3c33 100644 --- a/web/src/pages/Instruction/Instruction.tsx +++ b/web/src/pages/Instruction/Instruction.tsx @@ -1,4 +1,5 @@ import { useParams } from "react-router-dom"; +import { useDocumentTitle } from "usehooks-ts"; import useGetInstruction from "@/api/useGetInstruction"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; @@ -7,6 +8,11 @@ import Breadcrumbs from "@/components/Breadcrumbs"; const Instruction = () => { const { instructionId } = useParams(); const { isPending, error, data } = useGetInstruction({ instructionId }); + const instruction = data?.instruction; + + useDocumentTitle( + instruction ? `${instruction.title} - Drinquepedia` : "Drinquepedia", + ); if (isPending) { return ( @@ -20,8 +26,6 @@ const Instruction = () => { return ; } - const instruction = data?.instruction; - return (
diff --git a/web/src/pages/Instructions/Instructions.tsx b/web/src/pages/Instructions/Instructions.tsx index 8e90e7f..ca51bdb 100644 --- a/web/src/pages/Instructions/Instructions.tsx +++ b/web/src/pages/Instructions/Instructions.tsx @@ -1,3 +1,4 @@ +import { useDocumentTitle } from "usehooks-ts"; import useGetInstructions from "@/api/useGetInstructions"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; @@ -6,6 +7,8 @@ import InstructionCard from "@/components/InstructionCard"; const Instructions = () => { const { isPending, error, data } = useGetInstructions(); + useDocumentTitle("Dicas - Drinquepedia"); + if (isPending) { return (
diff --git a/web/src/pages/Knowledge/Knowledge.tsx b/web/src/pages/Knowledge/Knowledge.tsx index 7d04967..1e911f8 100644 --- a/web/src/pages/Knowledge/Knowledge.tsx +++ b/web/src/pages/Knowledge/Knowledge.tsx @@ -1,12 +1,18 @@ +import { useParams } from "react-router-dom"; +import { useDocumentTitle } from "usehooks-ts"; import useGetKnowledge from "@/api/useGetKnowledge"; import Breadcrumbs from "@/components/Breadcrumbs"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; -import { useParams } from "react-router-dom"; const Knowledge = () => { const { knowledgeSlug } = useParams(); const { isPending, error, data } = useGetKnowledge({ knowledgeSlug }); + const knowledge = data?.knowledge; + + useDocumentTitle( + knowledge ? `${knowledge.title} - Drinquepedia` : "Drinquepedia", + ); if (isPending) { return ( @@ -20,8 +26,6 @@ const Knowledge = () => { return ; } - const knowledge = data?.knowledge; - return (
diff --git a/web/src/pages/Knowledges/Knowledges.tsx b/web/src/pages/Knowledges/Knowledges.tsx index f3caf1e..4a71ca1 100644 --- a/web/src/pages/Knowledges/Knowledges.tsx +++ b/web/src/pages/Knowledges/Knowledges.tsx @@ -1,4 +1,5 @@ import useGetKnowledges from "@/api/useGetKnowledges"; +import { useDocumentTitle } from "usehooks-ts"; import Errors from "@/components/Errors"; import Loadings from "@/components/Loadings"; import KnowledgeCard from "@/components/KnowledgeCard"; @@ -6,6 +7,8 @@ import KnowledgeCard from "@/components/KnowledgeCard"; const Knowledges = () => { const { isPending, error, data } = useGetKnowledges(); + useDocumentTitle("Tudo sobre bar - Drinquepedia"); + if (isPending) { return (
diff --git a/web/src/utils/getCategoryName/getCategoryName.ts b/web/src/utils/getCategoryName/getCategoryName.ts new file mode 100644 index 0000000..ec99ec1 --- /dev/null +++ b/web/src/utils/getCategoryName/getCategoryName.ts @@ -0,0 +1,16 @@ +const getCategoryName = (category?: string): string => { + const categories: { [key: string]: string } = { + martinis: "Martinis", + tropicais: "Tropicais", + frozen: "Frozen", + quentes: "Quentes", + shot: "Shots", + classicos: "Clássicos", + semalcool: "Sem Álcool", + caipirinhas: "Caipirinhas clássicas", + smoothies: "Smoothies", + }; + return categories[category as keyof typeof categories] || "Drinques de A a Z"; +}; + +export default getCategoryName; diff --git a/web/src/utils/getCategoryName/index.ts b/web/src/utils/getCategoryName/index.ts new file mode 100644 index 0000000..cdf08a1 --- /dev/null +++ b/web/src/utils/getCategoryName/index.ts @@ -0,0 +1 @@ +export { default } from "./getCategoryName";