diff --git a/src/Redux/slice/newsLetterSlice.js b/src/Redux/slice/newsLetterSlice.js
new file mode 100644
index 0000000..6e94cb3
--- /dev/null
+++ b/src/Redux/slice/newsLetterSlice.js
@@ -0,0 +1,17 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const newsLetterApi = createApi({
+ reducerPath: 'newsLetter',
+ baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+ endpoints: (builder) => ({
+ subscribeToNewsletter: builder.mutation({
+ query: (email) => ({
+ url: `newsLetter/request`,
+ method: "POST",
+ body: { email },
+ }),
+ }),
+ }),
+});
+
+export const { useSubscribeToNewsletterMutation } = newsLetterApi;
\ No newline at end of file
diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js
index 1417a84..9480195 100644
--- a/src/Redux/store/store.js
+++ b/src/Redux/store/store.js
@@ -15,6 +15,7 @@ import { ecoSystem } from '../slice/ecosystemSlice';
import { statsApi } from '../slice/statsSlice';
import { TermsPage } from '../slice/termsSlice';
import { PrivacyPage } from '../slice/privacySlice';
+import { newsLetterApi } from '../slice/newsLetterSlice';
const store = configureStore({
reducer: {
@@ -34,6 +35,7 @@ const store = configureStore({
[statsApi.reducerPath]: statsApi.reducer,
[TermsPage.reducerPath]: TermsPage.reducer,
[PrivacyPage.reducerPath]: PrivacyPage.reducer,
+ [newsLetterApi.reducerPath]: newsLetterApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(
@@ -53,6 +55,7 @@ const store = configureStore({
statsApi.middleware,
TermsPage.middleware,
PrivacyPage.middleware,
+ newsLetterApi.middleware,
), // Add blogApi.middleware here
});
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index c855158..344b49b 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -11,6 +11,7 @@ import {
ListItem,
Text,
UnorderedList,
+ useToast,
} from "@chakra-ui/react";
import { useMediaQuery } from "@chakra-ui/react";
import {
@@ -30,41 +31,44 @@ import discord from "../../assets/images/discord.png";
import { Form, Link } from "react-router-dom";
import { useEffect, useState } from "react";
import MobileFooter from "./MobileFooter";
+import { useSubscribeToNewsletterMutation } from "../../Redux/slice/newsLetterSlice";
+import { useForm } from "react-hook-form";
const Footer = () => {
- const [email, setEmail] = useState("");
+ const [subscribeToNewsletter] = useSubscribeToNewsletterMutation();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm();
+ const toast = useToast();
const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
- const handleSubmit = async (event) => {
- event.preventDefault(); // Prevent the default form submission behavior
-
+ const onSubmit = async (data) => {
try {
- const response = await fetch(
- "https://rubix.betadelivery.com/api/newsLetter/request",
- {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ email }),
- }
- );
-
- if (!response.ok) {
- throw new Error("Failed to submit form");
- }
- console.log(email);
- setEmail("");
+ const response = await subscribeToNewsletter(data.email).unwrap();
+ toast({
+ title: "Success",
+ description: "You have been subscribed to the newsletter.",
+ status: "success",
+ duration: 5000,
+ isClosable: true,
+ });
+ reset();
} catch (error) {
- console.error("Error submitting form:", error);
+ console.error("Error subscribing to newsletter:", error);
+ toast({
+ title: "Error",
+ description: "Something went wrong. Please try again.",
+ status: "error",
+ duration: 5000,
+ isClosable: true,
+ });
}
};
- const handleEmailChange = (event) => {
- setEmail(event.target.value);
- };
-
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
@@ -131,38 +135,45 @@ const Footer = () => {
Sign up for our newsletter and receive the{" "}
{isSmallScreen ? null :
} latest updates.
-