Update manage cache functions

TODO.md

@@ -35,6 +35,14 @@
 -   [] update manifest https://web.dev/articles/add-manifest
 -   [] minify manifest after changes!
 -   [] fix chrome third party cookies blocked warning
+-   [] share new s3 credentials with Gayan
+
+> After deploy
+-   [] Add sentry
+-   [] Add monitors
+
+> for domain register 4,359.42
+
 
 
 > Web app performance improvements

src/actions/cacheActions.ts

@@ -11,14 +11,22 @@ export const revalidateBrandsAction = async () => {
     revalidateTag(apiTags.getVehicleBrands());
 };
 
-export const revalidatePosedListingsAction = async () => {
+export const revalidateAllPosedListingsAction = async () => {
     revalidateTag(apiTags.getPostedListings());
 };
 
-export const revalidateFeaturedListingsAction = async () => {
+export const revalidatePosedListingsByCountryAction = async (countryCode: string) => {
+    revalidateTag(apiTags.getPostedListingsByCountry(countryCode));
+};
+
+export const revalidateAllFeaturedListingsAction = async () => {
     revalidateTag(apiTags.getFeaturedListings());
 };
 
+export const revalidateFeaturedListingsByCountryAction = async (countryCode: string) => {
+    revalidateTag(apiTags.getFeatureListingsByCountry(countryCode));
+};
+
 export const revalidateRelatedListingsAction = async (listingId: ListingIdType) => {
     revalidateTag(apiTags.getRelatedListings(listingId));
 };
@@ -27,4 +35,11 @@ export const revalidateUserNotificationsAction = async (userId: string) => {
     revalidateTag(apiTags.getMyNotifications(userId));
 };
 
-// todo:revalidate profile get, location details
+export const revalidateCityAndStatesAction = async () => {
+    revalidateTag(apiTags.getStates());
+    revalidateTag(apiTags.getCities());
+};
+
+export const revalidateUserProfileDetails = async (userId: string) => {
+    revalidateTag(apiTags.getMyProfileDetails(userId));
+};

src/app/[locale]/(landingPage)/layout.tsx

@@ -4,7 +4,6 @@ import React from "react";
 import { displayFont } from "@/app/fonts";
 import { LandingHeroSearch } from "@/components/LandingSections/LandingHeroSearch";
 
-// todo: move features and contact us to separate pages
 export default function Layout({ children }: { children: React.ReactNode }) {
     return (
         <section className="relative flex min-h-screen flex-col bg-gradient-to-b from-neutral to-hero pt-24">

src/components/ManageCache/ManageCache.tsx

@@ -1,19 +1,27 @@
-import { RevalidateFeaturedListings } from "./Sections/RevalidateFeaturedListings";
+import { RevalidateAllFeaturedListings } from "./Sections/RevalidateAllFeaturedListings";
+import { RevalidateAllPostedListings } from "./Sections/RevalidateAllPostedListings";
+import { RevalidateCitiesAndStates } from "./Sections/RevalidateCitiesAndStates";
+import { RevalidateFeaturedListingsByCountry } from "./Sections/RevalidateFeaturedListingsByCountry";
 import { RevalidateFeatures } from "./Sections/RevalidateFeatures";
-import { RevalidatePostedListings } from "./Sections/RevalidatePostedListings";
+import { RevalidatePostedListingsByCountry } from "./Sections/RevalidatePostedListingsByCountry";
 import { RevalidateRelatedListings } from "./Sections/RevalidateRelatedListings";
 import { RevalidateUserNotifications } from "./Sections/RevalidateUserNotifications";
+import { RevalidateUserProfileDetails } from "./Sections/RevalidateUserProfileDetails";
 import { RevalidateVehicleBrands } from "./Sections/RevalidateVehicleBrands";
 
 export const ManageCache = () => {
     return (
         <div className="my-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
             <RevalidateFeatures />
             <RevalidateVehicleBrands />
-            <RevalidatePostedListings />
-            <RevalidateFeaturedListings />
+            <RevalidateCitiesAndStates />
+            <RevalidateAllPostedListings />
+            <RevalidatePostedListingsByCountry />
+            <RevalidateAllFeaturedListings />
+            <RevalidateFeaturedListingsByCountry />
             <RevalidateRelatedListings />
             <RevalidateUserNotifications />
+            <RevalidateUserProfileDetails />
         </div>
     );
 };

src/components/ManageCache/Sections/RevalidateFeaturedListings.tsx → src/components/ManageCache/Sections/RevalidateAllFeaturedListings.tsx

@@ -2,10 +2,10 @@
 
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
-import { revalidateFeaturedListingsAction } from "@/actions/cacheActions";
+import { revalidateAllFeaturedListingsAction } from "@/actions/cacheActions";
 
-export const RevalidateFeaturedListings = () => {
-    const { mutate, isLoading } = useMutation(async () => revalidateFeaturedListingsAction(), {
+export const RevalidateAllFeaturedListings = () => {
+    const { mutate, isLoading } = useMutation(async () => revalidateAllFeaturedListingsAction(), {
         onSuccess: () => toast.success(`Successfully revalidated featured listings`),
         onError: () => toast.error(`Failed to revalidate featured listings`),
     });

src/components/ManageCache/Sections/RevalidateAllPostedListings.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "react-hot-toast";
+import { revalidateAllPosedListingsAction } from "@/actions/cacheActions";
+
+export const RevalidateAllPostedListings = () => {
+    const { mutate, isLoading } = useMutation(async () => revalidateAllPosedListingsAction(), {
+        onSuccess: () => toast.success(`Successfully revalidated all posted listings`),
+        onError: () => toast.error(`Failed to revalidate all posted listings`),
+    });
+
+    return (
+        <button className="btn btn-outline" disabled={isLoading} onClick={() => mutate()}>
+            Revalidate all posted listings
+        </button>
+    );
+};

src/components/ManageCache/Sections/RevalidatePostedListings.tsx → src/components/ManageCache/Sections/RevalidateCitiesAndStates.tsx

@@ -2,17 +2,17 @@
 
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
-import { revalidatePosedListingsAction } from "@/actions/cacheActions";
+import { revalidateCityAndStatesAction } from "@/actions/cacheActions";
 
-export const RevalidatePostedListings = () => {
-    const { mutate, isLoading } = useMutation(async () => revalidatePosedListingsAction(), {
-        onSuccess: () => toast.success(`Successfully revalidated posted listings`),
-        onError: () => toast.error(`Failed to revalidate posted listings`),
+export const RevalidateCitiesAndStates = () => {
+    const { mutate, isLoading } = useMutation(async () => revalidateCityAndStatesAction(), {
+        onSuccess: () => toast.success(`Successfully revalidated cities and states`),
+        onError: () => toast.error(`Failed to revalidate cities and states`),
     });
 
     return (
         <button className="btn btn-outline" disabled={isLoading} onClick={() => mutate()}>
-            Revalidate posted listings
+            Revalidate Cities & States
         </button>
     );
 };

src/components/ManageCache/Sections/RevalidateFeaturedListingsByCountry.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { z } from "zod";
+import { revalidateFeaturedListingsByCountryAction } from "@/actions/cacheActions";
+import { Modal, ModalFooter } from "@/components/Common";
+import { AutocompleteController } from "@/components/FormElements/AutoComplete";
+import { COUNTRIES } from "@/utils/countries";
+import { LabelValue } from "@/utils/types";
+
+const RevalidateFeaturedListingsByCountrySchema = z.object({ country: z.string() });
+
+type RevalidateFeaturedListingsByCountryReq = z.infer<typeof RevalidateFeaturedListingsByCountrySchema>;
+
+export const RevalidateFeaturedListingsByCountry = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+
+    const { handleSubmit, control } = useForm<RevalidateFeaturedListingsByCountryReq>({
+        resolver: zodResolver(RevalidateFeaturedListingsByCountrySchema),
+        mode: "all",
+    });
+
+    const { mutate, isLoading } = useMutation(
+        (req: RevalidateFeaturedListingsByCountryReq) => {
+            const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === req.country);
+            return revalidateFeaturedListingsByCountryAction(countryCode!);
+        },
+        {
+            onMutate: () => setModalVisible(false),
+            onSuccess: () => toast.success(`Successfully revalidated featured listings`),
+            onError: () => toast.error(`Failed to revalidate featured listings`),
+        },
+    );
+
+    const countryList: LabelValue[] = Object.keys(COUNTRIES).map((key) => ({
+        label: COUNTRIES[key]?.[0]!,
+        value: COUNTRIES[key]?.[0]!,
+    }));
+
+    return (
+        <>
+            <button className="btn btn-outline" disabled={isLoading} onClick={() => setModalVisible(true)}>
+                Revalidate featured listings by country
+            </button>
+            <Modal onVisibleChange={setModalVisible} title="Revalidate featured listings by country" visible={!!modalVisible}>
+                <form className="grid gap-1">
+                    <AutocompleteController
+                        control={control}
+                        fieldName="country"
+                        label="Country"
+                        options={countryList}
+                        placeholder="Select Country"
+                        required
+                    />
+                    <div className="h-36" />
+                    <ModalFooter
+                        loading={isLoading}
+                        onSubmit={handleSubmit((values) => mutate(values))}
+                        onVisibleChange={setModalVisible}
+                        primaryButton={{ text: "Proceed" }}
+                    />
+                </form>
+            </Modal>
+        </>
+    );
+};

src/components/ManageCache/Sections/RevalidatePostedListingsByCountry.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { z } from "zod";
+import { revalidatePosedListingsByCountryAction } from "@/actions/cacheActions";
+import { Modal, ModalFooter } from "@/components/Common";
+import { AutocompleteController } from "@/components/FormElements/AutoComplete";
+import { COUNTRIES } from "@/utils/countries";
+import { LabelValue } from "@/utils/types";
+
+const RevalidatePostedListingsByCountrySchema = z.object({ country: z.string() });
+
+type RevalidatePostedListingsByCountryReq = z.infer<typeof RevalidatePostedListingsByCountrySchema>;
+
+export const RevalidatePostedListingsByCountry = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+
+    const { handleSubmit, control } = useForm<RevalidatePostedListingsByCountryReq>({
+        resolver: zodResolver(RevalidatePostedListingsByCountrySchema),
+        mode: "all",
+    });
+
+    const { mutate, isLoading } = useMutation(
+        (req: RevalidatePostedListingsByCountryReq) => {
+            const countryCode = Object.keys(COUNTRIES).find((item) => COUNTRIES[item]?.[0] === req.country);
+            return revalidatePosedListingsByCountryAction(countryCode!);
+        },
+        {
+            onMutate: () => setModalVisible(false),
+            onSuccess: () => toast.success(`Successfully revalidated posted listings`),
+            onError: () => toast.error(`Failed to revalidate posted listings`),
+        },
+    );
+
+    const countryList: LabelValue[] = Object.keys(COUNTRIES).map((key) => ({
+        label: COUNTRIES[key]?.[0]!,
+        value: COUNTRIES[key]?.[0]!,
+    }));
+
+    return (
+        <>
+            <button className="btn btn-outline" disabled={isLoading} onClick={() => setModalVisible(true)}>
+                Revalidate posted listings by country
+            </button>
+            <Modal onVisibleChange={setModalVisible} title="Revalidate posted listings by country" visible={!!modalVisible}>
+                <form className="grid gap-1">
+                    <AutocompleteController
+                        control={control}
+                        fieldName="country"
+                        label="Country"
+                        options={countryList}
+                        placeholder="Select Country"
+                        required
+                    />
+                    <div className="h-36" />
+                    <ModalFooter
+                        loading={isLoading}
+                        onSubmit={handleSubmit((values) => mutate(values))}
+                        onVisibleChange={setModalVisible}
+                        primaryButton={{ text: "Proceed" }}
+                    />
+                </form>
+            </Modal>
+        </>
+    );
+};

src/components/ManageCache/Sections/RevalidateUserProfileDetails.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { z } from "zod";
+import { revalidateUserProfileDetails } from "@/actions/cacheActions";
+import { Modal, ModalFooter } from "@/components/Common";
+import { InputController } from "@/components/FormElements/Input";
+
+const RevalidateUserProfileSchema = z.object({ userId: z.string() });
+
+type RevalidateUserProfileSchemaReq = z.infer<typeof RevalidateUserProfileSchema>;
+
+export const RevalidateUserProfileDetails = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+
+    const { handleSubmit, control } = useForm<RevalidateUserProfileSchemaReq>({
+        resolver: zodResolver(RevalidateUserProfileSchema),
+        mode: "all",
+    });
+
+    const { mutate, isLoading } = useMutation(
+        (req: RevalidateUserProfileSchemaReq) => {
+            return revalidateUserProfileDetails(req.userId);
+        },
+        {
+            onMutate: () => setModalVisible(false),
+            onSuccess: () => toast.success(`Successfully revalidated user profile`),
+            onError: () => toast.error(`Failed to revalidate user profile`),
+        },
+    );
+
+    return (
+        <>
+            <button className="btn btn-outline" disabled={isLoading} onClick={() => setModalVisible(true)}>
+                Revalidate user profile details
+            </button>
+            <Modal onVisibleChange={setModalVisible} title="Revalidate user profile details" visible={!!modalVisible}>
+                <form className="grid gap-1">
+                    <InputController control={control} fieldName="userId" label="User ID" placeholder="User ID" required />
+                    <ModalFooter
+                        loading={isLoading}
+                        onSubmit={handleSubmit((values) => mutate(values))}
+                        onVisibleChange={setModalVisible}
+                        primaryButton={{ text: "Proceed" }}
+                    />
+                </form>
+            </Modal>
+        </>
+    );
+};