diff --git a/checkers-app/src/App.tsx b/checkers-app/src/App.tsx index c826229c..5e8fe68f 100644 --- a/checkers-app/src/App.tsx +++ b/checkers-app/src/App.tsx @@ -27,7 +27,7 @@ export const router = createBrowserRouter([ ]); function App() { - const { setCheckerId, setCheckerName, setAuthScopes } = useUser(); + const { setCheckerDetails, setAuthScopes } = useUser(); const [isLoading, setIsLoading] = useState(true); //for global states: userID, name and messages @@ -74,16 +74,16 @@ function App() { } if (data.isNewUser || data.isOnboardingComplete === false) { // TODO BRENNAN: Redirect to onboarding page - signInWithToken( - data.customToken, - setCheckerId, - setCheckerName, - data.checkerId, - data.name - ) + signInWithToken(data.customToken) .then(() => { // Handle post-signIn success actions here, if any - console.log("Sign-in successful"); + setCheckerDetails((currentChecker) => ({ + ...currentChecker, + checkerId: data.checkerId, + checkerName: data.name, + isAdmin: data.isAdmin, + tier: data.tier, + })); setAuthScopes(data); router.navigate("/onboarding"); }) @@ -97,16 +97,15 @@ function App() { setAuthScopes(data); } else { //if existing user - signInWithToken( - data.customToken, - setCheckerId, - setCheckerName, - data.checkerId, - data.name - ) + signInWithToken(data.customToken) .then(() => { - // Handle post-signIn success actions here, if any - console.log("Sign-in successful"); + setCheckerDetails((currentChecker) => ({ + ...currentChecker, + checkerId: data.checkerId, + checkerName: data.name, + isAdmin: data.isAdmin, + tier: data.tier, + })); }) .catch((err) => { console.error( @@ -121,12 +120,11 @@ function App() { console.error("Error fetching custom token:", err); }) .finally(() => { - console.log("Sign-in complete"); setIsLoading(false); }); } } - }, [setCheckerId, setCheckerName]); + }, [setCheckerDetails]); if (isLoading) { return ; diff --git a/checkers-app/src/components/common/BotNavBar.tsx b/checkers-app/src/components/common/BotNavBar.tsx index 19475016..c5cf6625 100644 --- a/checkers-app/src/components/common/BotNavBar.tsx +++ b/checkers-app/src/components/common/BotNavBar.tsx @@ -9,9 +9,9 @@ import { export default function NavbarDefault() { const navigate = useNavigate(); - const { pendingCount } = useUser(); + const { checkerDetails } = useUser(); // Helper function to decide if the badge is invisible - const isBadgeInvisible = pendingCount === 0; + const isBadgeInvisible = checkerDetails.pendingCount === 0; return ( @@ -34,7 +34,7 @@ export default function NavbarDefault() { diff --git a/checkers-app/src/components/dashboard/index.tsx b/checkers-app/src/components/dashboard/index.tsx index e0da2457..727a44d6 100644 --- a/checkers-app/src/components/dashboard/index.tsx +++ b/checkers-app/src/components/dashboard/index.tsx @@ -10,7 +10,7 @@ import Loading from "../common/Loading"; export default function Dashboard() { const [isLoading, setIsLoading] = useState(false); - const { checkerId, pendingCount, setPendingCount } = useUser(); + const { checkerDetails, setCheckerDetails } = useUser(); const [totalVotes, setTotalVotes] = useState(0); const [accuracyRate, setAccuracyRate] = useState(0); const [avgResponseTime, setAvgResponseTime] = useState(0); @@ -19,23 +19,23 @@ export default function Dashboard() { useEffect(() => { const fetchChecker = async () => { setIsLoading(true); - if (!checkerId) { + if (!checkerDetails.checkerId) { return; } - const checker: Checker = await getChecker(checkerId); + const checker: Checker = await getChecker(checkerDetails.checkerId); if (checker) { setTotalVotes(checker.last30days.totalVoted); setAccuracyRate(checker.last30days.accuracyRate); setAvgResponseTime(checker.last30days.averageResponseTime); setPeopleHelped(checker.last30days.peopleHelped); - setPendingCount(checker.pendingVoteCount); + //setPendingCount(checker.pendingVoteCount); setIsLoading(false); } }; - if (checkerId) { + if (checkerDetails.checkerId) { fetchChecker(); } - }, [checkerId]); + }, [checkerDetails.checkerId]); if (isLoading) { return ; @@ -43,8 +43,11 @@ export default function Dashboard() { return (
- {pendingCount > 0 && ( - + {checkerDetails.pendingCount > 0 && ( + )} {/* {reviewCount > 0 && ( diff --git a/checkers-app/src/components/myvotes/MessagesDisplay.tsx b/checkers-app/src/components/myvotes/MessagesDisplay.tsx index bd260331..93d28145 100644 --- a/checkers-app/src/components/myvotes/MessagesDisplay.tsx +++ b/checkers-app/src/components/myvotes/MessagesDisplay.tsx @@ -26,7 +26,7 @@ import { VoteSummary, VoteSummaryApiResponse } from "../../types"; import Pagination from "./Pagination"; // Make sure to create this component const MessagesDisplay: FC = () => { - const { checkerId } = useUser(); + const { checkerDetails } = useUser(); const [isLoading, setIsLoading] = useState(false); const [votes, setVotes] = useState([]); const [lastPath, setLastPath] = useState(null); @@ -39,11 +39,11 @@ const MessagesDisplay: FC = () => { const fetchMessages = async () => { setIsLoading(true); try { - if (!checkerId) { + if (!checkerDetails.checkerId) { throw new Error("Checker Id missing."); } const response: VoteSummaryApiResponse = await getCheckerVotes( - checkerId, + checkerDetails.checkerId, activeTab.toLowerCase(), 5, lastPath @@ -60,10 +60,10 @@ const MessagesDisplay: FC = () => { setIsLoading(false); } }; - if (checkerId) { + if (checkerDetails.checkerId) { fetchMessages(); } - }, [checkerId, activeTab, currentPage]); + }, [checkerDetails.checkerId, activeTab, currentPage]); const handleTabChange = (tab: "pending" | "voted") => { setActiveTab(tab); diff --git a/checkers-app/src/components/vote/CustomReply.tsx b/checkers-app/src/components/vote/CustomReply.tsx new file mode 100644 index 00000000..a7d93d9e --- /dev/null +++ b/checkers-app/src/components/vote/CustomReply.tsx @@ -0,0 +1,121 @@ +import React, { useState, useEffect } from "react"; +import { Alert } from "@material-tailwind/react"; +import { useNavigate } from "react-router-dom"; +import { + getMessage, + postCustomReply, + sendWhatsappTestMessage, +} from "../../services/api"; +import { useUser } from "../../providers/UserContext"; + +interface PropType { + messageId: string | undefined; +} + +export default function CustomReply(Prop: PropType) { + //load props + const navigate = useNavigate(); + const { messageId } = Prop; + const { checkerDetails } = useUser(); + const [customReplyText, setCustomReplyText] = useState(""); + const [showAlerts, setShowAlerts] = useState(false); + + useEffect(() => { + const fetchMessage = async () => { + if (messageId) { + const message = await getMessage(messageId); + if (message.customReply) { + setCustomReplyText(message?.customReply?.text ?? ""); + } else { + setCustomReplyText(""); + } + } + }; + if (messageId) { + fetchMessage(); + } + }, []); + + const handleInputChange = (event: React.ChangeEvent) => { + setCustomReplyText(event.target.value); + }; + + const handleSubmit = () => { + // Implement what happens when the comment is posted (e.g., send to a server) + if (checkerDetails.checkerId && customReplyText && messageId) { + postCustomReply( + messageId, + checkerDetails.checkerId, + customReplyText + ).then(() => { + console.log("Custom reply posted successfully"); + navigate("/votes"); + }); + } + }; + + const handleWhatsappTest = () => { + if (checkerDetails.checkerId && customReplyText) { + sendWhatsappTestMessage(checkerDetails.checkerId, customReplyText) + .then((data) => { + console.log(data); + console.log("Test is successfull"); + setShowAlerts(false); + }) + .catch((error) => { + console.error(error); + setShowAlerts(true); + }); + } + }; + + return ( +
+
+