Skip to content

Commit

Permalink
fix(holiday): fix bug where message would be changed erroneously
Browse files Browse the repository at this point in the history
  • Loading branch information
IgStefano committed Dec 17, 2024
1 parent ce77a2d commit 03d7a25
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 14 deletions.
12 changes: 7 additions & 5 deletions src/components/Holiday/Holiday.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { getHolidayByName } from "../../utils/getHoliday";
import holidays from "../../data/holidays.json";
import { getMessage } from "../../utils/getMessage";
import { useState } from "react";
import { useCallback, useState } from "react";
import type { Message } from "../../types/typings";
import Contribution from "./Contribution";
import MessageChanger from "./MessageChanger";
Expand All @@ -18,7 +18,7 @@ interface HolidayProps {

export default function Holiday({ holidayData, alecrimUrl }: HolidayProps) {
const [currentMessage, setCurrentMessage] = useState(holidayData.message);
const [isModalOpen, setIsModalOpen] = useState(true);
const [isModalOpen, setIsModalOpen] = useState(false);

const handleCloseModal = () => {
setIsModalOpen(false);
Expand All @@ -28,12 +28,14 @@ export default function Holiday({ holidayData, alecrimUrl }: HolidayProps) {
setIsModalOpen(true);
};

const changeMessage = () => {
const changeMessage = useCallback(() => {
const { messages } = getHolidayByName({ holidays, name: holidayData.name });
const message = getMessage(messages);

setCurrentMessage(message);
};
if (!isModalOpen) {
setCurrentMessage(message);
}
}, [isModalOpen]);

const contribution = currentMessage.contribution;

Expand Down
10 changes: 5 additions & 5 deletions src/components/Holiday/MessageChanger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@ export default function MessageChanger({
changeMessage: () => void;
}) {
useEffect(() => {
function changeMessageOnKeydown(event: KeyboardEvent) {
const changeMessageOnKeydown = (event: KeyboardEvent) => {
if (event.keyCode === 32) {
changeMessage();
}
}
};

document.addEventListener("keydown", changeMessageOnKeydown);

return () => {
document.removeEventListener("keydown", changeMessageOnKeydown);
};
}, []);
}, [changeMessage]);

return (
<p
onClick={changeMessage}
className="mt-12 flex justify-center items-center w-full font-light bg-transparent no-underline outline-none cursor-pointer"
className="mt-12 flex w-full cursor-pointer items-center justify-center bg-transparent font-light no-underline outline-none"
>
Aperte{" "}
<span className="py-2 px-4 mx-2 border border-gray-200 rounded-md tracking-wide">
<span className="mx-2 rounded-md border border-gray-200 px-4 py-2 tracking-wide">
Espaço
</span>{" "}
ou clique aqui
Expand Down
2 changes: 1 addition & 1 deletion src/components/Suggestions/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function Modal({
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"
/>
</svg>
<div>{children}</div>
<div className="h-full">{children}</div>
</div>
</section>
);
Expand Down
6 changes: 3 additions & 3 deletions src/components/Suggestions/Suggestions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function SuggestionsForm({
if (hasSubmissionError) {
return (
<div className="flex h-full flex-col items-center justify-center gap-4">
<p className="text-4xl text-red-500">
<p className="text-balance text-center text-4xl text-red-500">
Houve um erro ao enviar seus dados 😔
</p>
<small className="opacity-60">Tente novamente mais tarde</small>
Expand All @@ -54,7 +54,7 @@ export default function SuggestionsForm({
if (hasSubmitted) {
return (
<div className="flex h-full flex-col items-center justify-center gap-4">
<p className="text-4xl text-emerald-800 dark:text-emerald-200">
<p className="text-balance text-center text-4xl text-emerald-800 dark:text-emerald-200">
Obrigado por sua contribuição!
</p>
<small className="opacity-60">Você é top 🤙</small>
Expand Down Expand Up @@ -176,7 +176,7 @@ export default function SuggestionsForm({
</div>
<button
type="button"
className="mt-2 rounded-md border bg-emerald-400 px-4 py-2 font-bold text-gray-50 transition-opacity duration-300 hover:opacity-70"
className="mb-4 mt-2 rounded-md border bg-emerald-400 px-4 py-2 font-bold text-gray-50 transition-opacity duration-300 hover:opacity-70"
onClick={async () => {
await handlePost();
}}
Expand Down

0 comments on commit 03d7a25

Please sign in to comment.