feat(web): document title

betofigueiredo · Apr 6, 2024 · c5c1f69 · c5c1f69
1 parent 6c32e41
commit c5c1f69
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 41 deletions.
diff --git a/web/index.html b/web/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Drinquepedia</title>
+    <title>Drinquepedia | Things go better with a cocktail!</title>
   </head>
   <body>
     <div id="root"></div>

diff --git 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 (
     <div>
       <h1 className="mb-0 mt-14 font-serif text-3xl font-bold text-gray-700">
-        {getCategoryName()}
+        {getCategoryName(category)}
       </h1>
       <div className="mb-12 text-gray-500">{count} drinques</div>
       {drinksList?.map((drink) => <DrinkRow key={drink.id} drink={drink} />)}

diff --git 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 (
       <div className="container pt-3 leading-relaxed">

diff --git 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 && <SearchBar />}

diff --git 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 <Errors />;
   }
 
-  const highlight = data?.highlight;
-
   return (
     <div className="container mt-2">
       <Breadcrumbs />

diff --git 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 (
       <div className="container">

diff --git 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 = () => (
-  <>
-    <div className="container">
-      <FeaturedHighlights />
-      <SecondHighlights />
-    </div>
-    <div className="my-24 w-full bg-gray-100">
-      <ThirdHighlights />
-    </div>
-    <div className="container">
-      <FourthHighlights />
-    </div>
-  </>
-);
+const Home = () => {
+  useDocumentTitle("Drinquepedia | Things go better with a cocktail!");
+
+  return (
+    <>
+      <div className="container">
+        <FeaturedHighlights />
+        <SecondHighlights />
+      </div>
+      <div className="my-24 w-full bg-gray-100">
+        <ThirdHighlights />
+      </div>
+      <div className="container">
+        <FourthHighlights />
+      </div>
+    </>
+  );
+};
 
 export default Home;
diff --git 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 <Errors />;
   }
 
-  const instruction = data?.instruction;
-
   return (
     <div className="container mt-2">
       <Breadcrumbs />

diff --git 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 (
       <div className="container">

diff --git 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 <Errors />;
   }
 
-  const knowledge = data?.knowledge;
-
   return (
     <div className="container mt-2">
       <Breadcrumbs />

diff --git a/web/src/pages/Knowledges/Knowledges.tsx b/web/src/pages/Knowledges/Knowledges.tsx
@@ -1,11 +1,14 @@
 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";
 
 const Knowledges = () => {
   const { isPending, error, data } = useGetKnowledges();
 
+  useDocumentTitle("Tudo sobre bar - Drinquepedia");
+
   if (isPending) {
     return (
       <div className="container">

diff --git a/web/src/utils/getCategoryName/getCategoryName.ts 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
@@ -0,0 +1 @@
+export { default } from "./getCategoryName";