From 01fb8165c01fdbb74a13eefb5f11590b27481b4b Mon Sep 17 00:00:00 2001 From: rockyeverlast Date: Tue, 4 Jun 2024 19:32:03 +0530 Subject: [PATCH] Added updated RTK query slice --- src/Redux/slice/newsLetterSlice.js | 17 +++ src/Redux/store/store.js | 3 + src/components/Footer/Footer.jsx | 119 ++++++++++-------- src/components/LearnPage/Faq.jsx | 88 +++++++------ src/components/LearnPage/LearnDev.jsx | 8 +- .../SubnetsComponent/Component1.jsx | 1 + .../SubnetsComponent/Component2.jsx | 1 + .../SubnetsComponent/Component3.jsx | 1 + .../SubnetsComponent/Component4.jsx | 1 + src/pages/LearnPage.jsx | 4 +- 10 files changed, 143 insertions(+), 100 deletions(-) create mode 100644 src/Redux/slice/newsLetterSlice.js 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. -
+ - - + + + +
+ + {errors.email && errors.email.message} + { const { data, isLoading, error } = useGetLearnFaqQuery(); - const faq = data?.data?.data?.rows; + const faq = data?.data?.data; + + console.log(data); if (isLoading) { return ( @@ -198,47 +200,47 @@ export const Faq = () => { return ( <> - {faq?.map((item) => ( - + - - - Frequently Asked Questions - + Frequently Asked Questions + - - + + + {faq?.map((item) => ( { }, }} > - {item.answer} + {/* {bullet && (

@@ -320,11 +328,11 @@ export const Faq = () => { )} - - - - - ))} + ))} + + + + ); }; diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx index 927ff33..8ae6463 100644 --- a/src/components/LearnPage/LearnDev.jsx +++ b/src/components/LearnPage/LearnDev.jsx @@ -115,7 +115,7 @@ const LearnDev = () => { }, }} > - {/* {partnerCard?.map((item) => ( + {partnerCard?.map((item) => ( { text={item.description} href={item.website_link} /> - ))} */} - {content.map((item) => ( + ))} + {/* {content.map((item) => ( { text={item.text} href={item.href} /> - ))} + ))} */} diff --git a/src/components/SubnetsComponent/Component1.jsx b/src/components/SubnetsComponent/Component1.jsx index 360f1c3..549e2e0 100644 --- a/src/components/SubnetsComponent/Component1.jsx +++ b/src/components/SubnetsComponent/Component1.jsx @@ -24,6 +24,7 @@ export const Component1 = ({ id, title, content }) => { color={"#fff"} border={"1px solid #A5A5A5"} fontSize={"16px"} + cursor={"default"} // _after={{ // content: "''", // position: "absolute", diff --git a/src/components/SubnetsComponent/Component2.jsx b/src/components/SubnetsComponent/Component2.jsx index 66635e9..785b28d 100644 --- a/src/components/SubnetsComponent/Component2.jsx +++ b/src/components/SubnetsComponent/Component2.jsx @@ -25,6 +25,7 @@ export const Component2 = ({ id, title, content }) => { color={"#fff"} border={"1px solid #A5A5A5"} fontSize={"16px"} + cursor={"default"} _after={{ content: "''", position: "absolute", diff --git a/src/components/SubnetsComponent/Component3.jsx b/src/components/SubnetsComponent/Component3.jsx index b5d5d5e..f300342 100644 --- a/src/components/SubnetsComponent/Component3.jsx +++ b/src/components/SubnetsComponent/Component3.jsx @@ -31,6 +31,7 @@ export const Component3 = ({ id, title, content }) => { color={"#fff"} border={"1px solid #A5A5A5"} fontSize={"16px"} + cursor={"default"} _before={{ content: "''", position: "absolute", diff --git a/src/components/SubnetsComponent/Component4.jsx b/src/components/SubnetsComponent/Component4.jsx index e023bcc..7afd2a6 100644 --- a/src/components/SubnetsComponent/Component4.jsx +++ b/src/components/SubnetsComponent/Component4.jsx @@ -24,6 +24,7 @@ export const Component4 = ({ id, title, content }) => {