khabzox / aceyourscore

https://aceyourscore.vercel.app
2 stars 0 forks source link

Data Not Updating on Dashboard in Production Environment #1

Closed khabzox closed 1 month ago

khabzox commented 1 month ago

I have a web application with payment system integration, and I am facing an issue where the payment data is not updating in the dashboard in the production environment, although it works fine in development.

see diagramme: https://excalidraw.com/#json=uwcITb3OzG_H2KBvCcWSJ,-Epm-_UIdZgrTsVRfJQ2nA

if you dont want to see diagramme:

Client:

PayPage: Handles the payment process. Dashboard: Displays the payment data, which includes Status, Exam, Full Name, and Email. Server:

Webhook: Receives payment data from the payment provider. API: Fetches payment data from the database. Database:

Stores payment data.

Flow:

PayPage: User completes a payment. Webhook: Receives payment data and updates the database. Dashboard: Fetches payment data from the API and displays it.

Problem:

Development: Data is saved in the database and updates correctly on the dashboard.

Screenshot 2024-07-14 063011

Production: Data is saved in the database, but it does not update on the dashboard.

Screenshot 2024-07-14 063109

`import { getUsersPaymentsData } from "./FetchUsersPaymentsData"; import { currentUser } from "@clerk/nextjs/server";

export default async function UsersInfo() { try { // get data of user const data = await getUsersPaymentsData();

// get data of this current user from clerk
const user = await currentUser();

// if (!user) {
//   return (
//     <div className="border-t-2 sm:border-t-0 sm:border-l-2 border-accent pt-4 sm:pt-0 sm:pl-4">
//       <p className="text-navy-900">Status: User not found</p>
//       <p className="text-navy-900">Exam: N/A</p>
//       <p className="text-navy-900">FullName: N/A</p>
//       <p className="text-navy-900">Email: N/A</p>
//     </div>
//   );
// }

// get specific data from clerk
const serializedUser = {
  id: user.id,
  fullName: user.fullName,
  primaryEmailAddress: user.primaryEmailAddress?.emailAddress,
};

// check if the current user have data on db by userid
const userStatusPayments = data.payments.find(
  (payment) => payment.clerkUser?.userID === serializedUser.id
);

// console.log(userStatusPayments.id);

// if user not found at db return this
if (!userStatusPayments) {
  return (
    <div className="border-t-2 sm:border-t-0 sm:border-l-2 border-accent pt-4 sm:pt-0 sm:pl-4">
      <p className="text-navy-900">Status: FREE</p>
      <p className="text-navy-900">Exam: No Specified</p>
      <p className="text-navy-900">FullName: {serializedUser.fullName}</p>
      <p className="text-navy-900">
        Email: {serializedUser.primaryEmailAddress}
      </p>
    </div>
  );
}

// if everything is good and the user is found return his data and show it
return (
  <div className="border-t-2 sm:border-t-0 sm:border-l-2 border-accent pt-4 sm:pt-0 sm:pl-4">
    <p className="text-navy-900">
      Status: {userStatusPayments.lemonsqueezyUser.paymentsInfo.status}
    </p>
    <p className="text-navy-900">Exam: {userStatusPayments.examName}</p>
    <p className="text-navy-900">
      FullName: {userStatusPayments.clerkUser.userFullName}
    </p>
    <p className="text-navy-900">
      Email: {userStatusPayments.clerkUser.userEmail}
    </p>
  </div>
);

// that for catch error and return it } catch (error) { console.log("Error loading user payment info: ", error); return (

Status: Error loading data

);

} }

`

`import config from "@/config";

export const getUsersPaymentsData = async () => { try { const res = await fetch(${config.domainNameProduction}/api/payments, { cache: "no-store", });

if (!res.ok) {
  throw new Error("Failed to fetch topics");
}

return res.json();

} catch (error) { console.log("Error loading topics: ", error); } };`

this api/payments/route.js

`import clientPromise from "@/utils/mongodb"; import { NextResponse } from "next/server";

export async function GET() { try { const client = await clientPromise; const db = client.db(process.env.MONGODB_DB);

const payments = await db.collection("payments").find({}).toArray();

return NextResponse.json({ payments }, { status: 200 });

} catch (error) { console.log(error); return NextResponse.json({ message: "Error", error }, { status: 500 }); } } `

I search and I found, when I went to Data Cache > Purge Cache > Purge Everything and remove it the data on app is updated and show it on dashboard. But its not for long time. anther way, You must do this for every update that occurs relative to the DataBase

khabzox commented 1 month ago

I fix it, look this pages inside my repo inside api: https://github.com/khabzox/aceyourscore/tree/main/app/api/payments

inside components: https://github.com/khabzox/aceyourscore/tree/main/components/dashboard/UsersInfo