Faq and Learn page api integration

src/Redux/slice/faqSlice.js

@@ -0,0 +1,13 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const faqApi = createApi({
+    reducerPath: 'LearnPage',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getFaq: builder.query({
+            query: () => 'faq/active',
+        }),
+    }),
+});
+
+export const { useGetFaqQuery } = faqApi;

src/Redux/slice/newsLetter.js

@@ -1,16 +0,0 @@
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-
-export const newsLetterApi = createApi({
-    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
-    endpoints: (builder) => ({
-        newsLetter: builder.mutation({
-            query: ({ formData }) => ({
-                url: 'newsLetter/request',
-                method: 'POST',
-                body: formData,
-            }),
-        }),
-    }),
-});
-
-export const { useNewLetterMutation } = newsLetterApi;

src/Redux/store/store.js

@@ -5,9 +5,9 @@ import { communitiesBanner } from '../slice/communityBannerSlice';
 import { newsApi } from '../slice/newsSlice';
 import { resourcesApi } from '../slice/resources';
 import { videoTableApi } from '../slice/videoTable';
-import { newsLetterApi } from '../slice/newsLetter';
 import { whitePaper } from '../slice/whitePaperSlice';
 import { buildPage, learnPage } from '../slice/bannerSlice';
+import { faqApi } from '../slice/faqSlice';
 
 const store = configureStore({
     reducer: {
@@ -17,10 +17,10 @@ const store = configureStore({
         [newsApi.reducerPath]: newsApi.reducer,
         [resourcesApi.reducerPath]: resourcesApi.reducer,
         [videoTableApi.reducerPath]: videoTableApi.reducer,
-        [newsLetterApi.reducerPath]: newsLetterApi.reducer,
         [whitePaper.reducerPath]: whitePaper.reducer,
         [learnPage.reducerPath]: learnPage.reducer,
         [buildPage.reducerPath]: buildPage.reducer,
+        [faqApi.reducerPath]: faqApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -30,10 +30,10 @@ const store = configureStore({
             newsApi.middleware,
             resourcesApi.middleware,
             videoTableApi.middleware,
-            newsLetterApi.middleware,
             whitePaper.middleware,
             learnPage.middleware,
-            buildPage.middleware
+            buildPage.middleware,
+            faqApi.middleware,
         ), // Add blogApi.middleware here
 });
 

src/components/BuildPage/BuildBanner.jsx

@@ -21,7 +21,7 @@ const BannerContent = [
 const BuildBanner = ({ data }) => {
   return (
     <>
-      {data.map((item) => (
+      {data?.map((item) => (
         <Box
           key={item.id}
           height={"100vh"}

src/components/Footer/Footer.jsx

@@ -30,12 +30,41 @@ import discord from "../../assets/images/discord.png";
 import { Form, Link } from "react-router-dom";
 import { useEffect, useState } from "react";
 import MobileFooter from "./MobileFooter";
-import { useNewLetterMutation } from "../../Redux/slice/newsLetter";
 
 const Footer = () => {
+  const [email, setEmail] = useState("");
   const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
+  const handleSubmit = async (event) => {
+    event.preventDefault(); // Prevent the default form submission behavior
+
+    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("");
+    } catch (error) {
+      console.error("Error submitting form:", error);
+    }
+  };
+
+  const handleEmailChange = (event) => {
+    setEmail(event.target.value);
+  };
+
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
@@ -102,7 +131,7 @@ const Footer = () => {
                     Sign up for our newsletter and receive the{" "}
                     {isSmallScreen ? null : <br />} latest updates.
                   </Text>
-                  <Form>
+                  <Form onSubmit={handleSubmit}>
                     <Flex alignItems="center">
                       <Input
                         type="email"
@@ -114,6 +143,8 @@ const Footer = () => {
                         borderTopLeftRadius={"5px"}
                         borderBottomLeftRadius={"5px"}
                         color={"#fff"}
+                        onChange={handleEmailChange}
+                        value={email}
                       />
                       <Button
                         type="submit"

src/components/LearnPage/Faq.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // import banner from "../../assets/images/faqBg.webp";
 import { ChevronRightIcon } from "@chakra-ui/icons";
 
@@ -12,6 +13,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { AddIcon, MinusIcon } from "@chakra-ui/icons";
+import { useGetFaqQuery } from "../../Redux/slice/faqSlice";
 
 const accordion = [
   {
@@ -181,49 +183,53 @@ const accordion = [
 ];
 
 export const Faq = () => {
-  return (
-    <Box
-      // backgroundImage={`url(${banner})`}
-      backgroundColor={"#101015"}
-      backgroundSize={"cover"}
-      backgroundRepeat={"no-repeat"}
-      // backgroundAttachment={"fixed"}
-      borderBottom={"1px solid #ffffff59"}
-    >
-      <Container
-        maxW={"container.xl"}
-        padding={"5rem 4rem"}
-        sx={{
-          "@media (max-width: 600px)": {
-            padding: "4rem 1rem",
-          },
-        }}
-      >
-        <Text
-          as={"h2"}
-          // paddingTop={"3rem"}
-          paddingBottom={"2rem"}
-          fontWeight={700}
-          fontSize={"40px"}
-          textAlign={"center"}
-          textTransform={"capitalize"}
-          color={"#fff"}
-          sx={{
-            "@media (max-width: 600px)": {
-              fontSize: "22px",
-              fontWeight: "500",
-            },
-          }}
-        >
-          Frequently Asked Questions
-        </Text>
+  const { data, isLoading, error } = useGetFaqQuery();
+  console.log(data?.data?.data?.rows);
+  const faq = data?.data?.data?.rows;
 
-        <Box>
-          <Accordion allowToggle defaultIndex={[0]}>
-            {accordion.map((accord) => (
-              <>
+  return (
+    <>
+      {faq?.map((item) => (
+        <Box
+          key={item.id}
+          // backgroundImage={`url(${banner})`}
+          backgroundColor={"#101015"}
+          backgroundSize={"cover"}
+          backgroundRepeat={"no-repeat"}
+          // backgroundAttachment={"fixed"}
+          borderBottom={"1px solid #ffffff59"}
+        >
+          <Container
+            maxW={"container.xl"}
+            padding={"5rem 4rem"}
+            sx={{
+              "@media (max-width: 600px)": {
+                padding: "4rem 1rem",
+              },
+            }}
+          >
+            <Text
+              as={"h2"}
+              // paddingTop={"3rem"}
+              paddingBottom={"2rem"}
+              fontWeight={700}
+              fontSize={"40px"}
+              textAlign={"center"}
+              textTransform={"capitalize"}
+              color={"#fff"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "22px",
+                  fontWeight: "500",
+                },
+              }}
+            >
+              Frequently Asked Questions
+            </Text>
+
+            <Box>
+              <Accordion allowToggle defaultIndex={[0]}>
                 <AccordionItem
-                  key={accord.id}
                   borderTop={"none"}
                   borderBottom={"none"}
                   marginBottom={"1rem"}
@@ -254,7 +260,7 @@ export const Faq = () => {
                               },
                             }}
                           >
-                            {accord.title}
+                            {item.question}
                           </Box>
                           {isExpanded ? (
                             <MinusIcon
@@ -294,26 +300,22 @@ export const Faq = () => {
                           },
                         }}
                       >
-                        {accord.content.map(({ item, bullet }) => (
-                          <>
-                            <Text marginBottom={4}>{item}</Text>
-                            {bullet && (
-                              <p>
-                                <ChevronRightIcon fontSize={"3xl"} />
-                                {bullet}
-                              </p>
-                            )}
-                          </>
-                        ))}
+                        <Text marginBottom={4}>{item.answer}</Text>
+                        {/* {bullet && (
+                          <p>
+                            <ChevronRightIcon fontSize={"3xl"} />
+                            {bullet}
+                          </p>
+                        )} */}
                       </AccordionPanel>
                     </>
                   )}
                 </AccordionItem>
-              </>
-            ))}
-          </Accordion>
+              </Accordion>
+            </Box>
+          </Container>
         </Box>
-      </Container>
-    </Box>
+      ))}
+    </>
   );
 };